Creating Dynamic Database-Driven Sites with Dreamweaver

Lloyd Rieber

Workshop Home Page:http://projects.coe.uga.edu/workshop/rieber/

ASPPHPJSP

ColdFusion

Last updated on November 20, 2008

Recommended: Get and Install the Dreamweaver Extension

'Go To Detail Extension for PHP'

• Here’s the URL:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=627434

(Link is on workshop home page.)

Workshop Agenda

• Welcome and introductions• Seeing the power of a dynamic web site in

education– Online Introduction to Instructional Design

• Seeing/doing it: Building a small dynamic “people” web site– List current people, add new person, update existing

person

• Advanced topics– Session variables, PHP scripting, Automated Email

Some of Lloyd’s Examples of Using Online Databases

• Online Introduction to Instructional Design• Other examples

– Project Promote– Peer Financial Counseling– WWILD Team– Introduction to Computers in Education

(Online Course)– EDIT 6170 IDA Library– IDD Portfolio Management

http://www.nowhereroad.com/instructionaldesign

Program Flowchart

list.php

insert.phpupdate.php

update_record_reply.htm new_record_reply.htm

Update Record Insert Record

Here are the files we will eventually create…

Client requests PHP File

Client

Server

Server returns HTML text to client

Server locates the PHP file on the hard drive and parses it, removing all PHP script and replacing it with HTML text

Client/Server Interaction for PHP Files

Adapted from Mitchell & Atkinson (2000)

How Databases Work

A 15-Minute Primer

“Flat” Database Structure

Database

Record Record Record

Field Field Field

“Flat” Database Structure

Studio People

Lloyd Ike Greg

Database ID Name Course

Relational Database StructureA Collection of Databases (tables) that connect (relate) to each other

Orders

Order1 Order2 Order3

People_ID Order_ID Book_Title Price

People

John Mary Jane

People_ID Name Address Email

Working Demonstration(quickly)

Working with mySQL DatabasesphpMyAdmin

http://projects.coe.uga.edu/pma

Step 1: Make a root folder

Step 2: Create a folder inside it named:yourLastname

Getting Ready to Work with Dreamweaver

Step 3: Launch Dreamweaver and define a new site that points to the root folder.

Launch Dreamweaver

Remote Server Information

Be sure to “Test” your connection before proceeding.

Password:

(this will be changed within a few days)

Notice that this server needs a Secure FTP connection.

eu3$@93!

Testing Server Information

Be sure to “Test” your connection before proceeding.

Double-check that this URL is correct. (On some servers, you will need to remove server-side pathways, such as “wwwroot”, from the URL Prefix.

Creating a Simple Search/Results Page Set

Make a new file called “list.php”

Add a 2 X 4 table and format accordingly:

Creating a Data ConnectionGo to the Application Panel, click on “Databases” tab, then follow the directions…

Naming convention:

connDescriptive

Use “connLastName” (for reasons I’ll explain)

Notice that a folder titled “Connections” has been automatically created in your root folder.

Creating a Data Connection

Creating a New RecordSetGo to the Application Panel, click on “Bindings” tab, then follow the directions…

Naming convention:

rsDescriptive

Use “rsPeople”

Always testing the connection is a good habit to develop

Insert Dynamic Data into Document

Click on “Server Behavior” Tab and Note What you Find

Repeating a Region with Multiple DataStep 1: Select table row <tr> as the region to repeat.

(Repeat Region is always linked to a specific HTML tag.)

Step 2: Select “Repeat Region” from Server Behaviors.

Upload and Test the PageChoose to “include dependent files” (only necessary the first time you upload).

Reason: The “Connections” file needs uploaded too.

http://projects.coe.uga.edu/workshop/rieber/list.php

Your last name goes here

Creating an Insert Page

Create a New Document…

insert.php

Select from menubar…

Insert

Data Objects >

Insert Record >

Record Insertion Form Wizard

Filling out the Dialog Box

Remove from list

Form is Created… Feel free to modify

Create “new_record_reply.html”

Click here to view all the records.

Upload and Test

Creating an Update/Delete Page

Reminder: Get Extension 'Go To Detail Extension for PHP'

• Here’s the URL:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=627434

(Link is on workshop home page.)

What If I Didn’t Get the Extension?

• Then you will have to enter the code manually:

Generic:

filename.php?recordID=<?php echo $row_recordsetName['fieldName']; ?>

Actual for the example to follow:

update.php?ID_people=<?php echo $row_rsPeople['ID_people']; ?>

list.php: Add Text “update” to 4th Column

Go to Detail Page

Highlight the text “update”, then choose to “Go to Detail Page” (in Server Behaviors)

Be sure that “ID_people” data will be passed as a URL parameter.

Create “update.php” page

Click on “Bindings” tab, then choose to create a new recordset by clicking on + symbol and selecting “Recordset (Query).

The “filter” must match the data being passed from the previous slide:

Record Update Form

Select from menubar…

Insert

Data Objects >

Update Record >

Record Update Form Wizard

Complete Dialog Box

Remove from list

Modify Form As You Wish

Create the Reply page

update_record_reply.htm

Be sure to include a link back to “list.php”

Upload and Test the Page

Upload and Test the Page

Notice the data appended to the end of the URL

Creating a User Login Page

Create a form. Then, create a 2 X 2 table in the form as shown below.

In the Property Inspector window…

Title this TextField “email”

Title this TextField “password”

Creating a User Login PageClick somewhere inside the form,

then select the <form> tag.

In the Action field, enter this page title (we will create the page itself later).

Be sure to choose POST as the method.

The GET method will send the user’s email and password as part of the URL, which is a security risk. Upload the page.

Creating the “update-account.php” Page

Insert a 2 X 1 table with messages as shown below in each row.

Creating the “update-account.php” PageIn the Bindings tab, choose to create a new Recordset (Query):

Name the recordset “rsAccount” and select the connection:

Creating the “update-account.php” PageClick on the “Advanced…” button…

The dialog box changes to give us access to the SQL programming…

Creating the “update-account.php” PageEnter the following SQL code and add the variables – varEmail and varPassword - as shown, test the code for errors, then click “OK”:

Creating the “update-account.php” Page1. Click somewhere in the first row, then click on the <tr> tag to choose that row. This selects the row as a “region”:

2. With this region selected, go to the Server Behaviors and choose:Show Region > Show Region If Recordset is Empty.

3. Choose the ‘rsAccount’ RecordSet, and click OK:

Creating the “update-account.php” Page

Repeat the steps on the previous slide, except:Select the second rowChoose to “Show Region If RecordSet Is Not Empty

Upload the page.

Test the Log-In Page

Test the Log-In PageIf you log-in correctly, you should see this result…

If you log-in incorrectly, you should see this result…

Use the “Record Update Form Wizard” to add an update form to the second table row

Select from menubar…

Insert

Data Objects >

Update Record >

Record Update Form Wizard

Upload the page and test the site.

Maintaining “State” of a UserTwo Approaches

• Passing data via the URL from page to page– Exactly what we have been doing so far– Drawbacks

• Users can bookmark specific pages without logging in

• Savvy users can access accounts other than their own

• Creating a session variable– User’s browser must be set to allow “cookies”

Session Variable

• A type of cookie

• Stores a particular piece of information temporarily on the client’s computer– The variable is deleted when the browser is

closed, or when there is inactivity for a set period of time.

• How and where to declare this variable?

Where to Set a Session Variable

• Needs to be set after a verified log-in has occurred

• Recommendation– Add this variable in the “Show Region”

behavior

1. Click here to highlight the “Show Region” behavior associated with a successful log-in.

2. Click here to view the code.

We will add the code to create the session variable as the first line AFTER the “If-then” statement

ASP Example!

<% Session ("People_ID") = rsAccount.Fields.Item("People_ID").Value %>

Name of the record set. Name of the variable we need from the record set.

ASP Example!

Using Session Variables

• Create a new .asp page

• In the Bindings tab, create a new record set and use the Session variable as a filter:

Other Useful Session Commands

• Setting a time limit (in minutes) for when the Session variable will expire if there is no activity:

• Creating a “Log Out” option that clears all session variables

<% Session.Abandon %>

<% Session.TimeOut = 300 %>

ASP Example!

VB Script

ASP Example!

In Simple English:

If “ready4feedback” equals “y”, then display

Otherwise, display

Useful VB Script Example

This “If-Then” statement checks the value of a particular field in a recordset and displays an appropriate graphic depending on its value.

<% If (rsIDA_course.Fields.Item("ready4feedback").Value) = "y" Then _ Response.Write("<img src='resources/yes.gif'>") _Else Response.Write("<img src='resources/no.gif'>") %>

ASP Example!

Book Recommendations for Learning More

References• Bardzell, J., Flynn, B. (2007). Adobe Dreamweaver CS3

with ASP, ColdFusion, and PHP: Training from the Source. Adobe Press.

• Lowery, J. W. (2007). Dreamweaver CS3 Bible. Indianapolis, IN: Wiley Publishing.

• Meloni, J., & Telles, M. (2008). PHP 6 Fast & Easy Web Development. Boston: Course Technology.

• Mitchell, S., & Atkinson, J. (2000). Teach yourself Active Server Pages 3.0 in 21 days. Indianapolis, IN: SAMS.

• Ray, J. (2003). Teaching yourself Dreamweaver MX Application Development in 21 days. Indianapolis, IN: SAMS.