Creating Dynamic Database-Driven Sites with Dreamweaver

1. Creating Dynamic Database-Driven Sites with Dreamweaver ASP PHP JSP ColdFusion Lloyd Rieber Workshop Home Page: http://projects.coe.uga.edu/workshop/rieber/ Last updated on November 20, 2008

2. 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.)

3. 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

4. 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

5. http://www.nowhereroad.com/instructionaldesign

6. Program Flowchart list.php update.php insert.php Update Record Insert Record update_record_reply.htm new_record_reply.htm

7. Here are the files we will eventually create…

8. Client/Server Interaction for PHP Files Server Server locates the PHP file on the hard drive and parses it, removing all PHP script and replacing it with HTML text Client Client requests PHP File Server returns HTML text to client Adapted from Mitchell & Atkinson (2000)

9. How Databases Work A 15-Minute Primer

10. “Flat” Database Structure

11. “Flat” Database Structure

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

14. Working Demonstration(quickly)

17. Working with mySQL DatabasesphpMyAdmin http://projects.coe.uga.edu/pma

19. Getting Ready to Work with Dreamweaver Step 1: Make a root folder Step 2: Create a folder inside it named: yourLastname

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

21. Remote Server Information Password: (this will be changed within a few days) eu3$@93! Be sure to “Test” your connection before proceeding. Notice that this server needs a Secure FTP connection.

22. 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.

23. Creating a Simple Search/Results Page Set

24. Make a new file called “list.php” Add a 2 X 4 table and format accordingly:

25. Creating a Data Connection Go to the Application Panel, click on “Databases” tab, then follow the directions… Naming convention: connDescriptive Use “connLastName” (for reasons I’ll explain)

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

27. Creating a New RecordSet Go to the Application Panel, click on “Bindings” tab, then follow the directions… Always testing the connection is a good habit to develop Naming convention: rsDescriptive Use “rsPeople”

28. Insert Dynamic Data into Document

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

30. Repeating a Region with Multiple Data Step 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.

31. Upload and Test the Page Choose 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

32. Creating an Insert Page

33. Create a New Document…insert.php • Select from menubar… • Insert • Data Objects > • Insert Record > • Record Insertion Form Wizard

34. Filling out the Dialog Box Remove from list

35. Form is Created… Feel free to modify

36. Create “new_record_reply.html” Click here to view all the records.

37. Upload and Test

39. Creating an Update/Delete Page

40. 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.)

41. 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']; ?>

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

43. 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.

44. 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:

45. Record Update Form • Select from menubar… • Insert • Data Objects > • Update Record > • Record Update Form Wizard

46. Complete Dialog Box Remove from list

47. Modify Form As You Wish

48. Create the Reply page update_record_reply.htm Be sure to include a link back to “list.php”

49. Upload and Test the Page

50. Upload and Test the Page Notice the data appended to the end of the URL