1. Tutorial 10 Adding Spry Elements and Database Functionality Dreamweaver CS3 Tutorial 101

2. XP Objectives Learn about Spry elements Add and format a Spry widget Add a Spry effect Learn about creating dynamic database content for Web pages Create database-driven pages using MySQL and PHP for a Linux server Create a database on a remote Linux server Dreamweaver CS3 Tutorial 102

3. XP Objectives Connect a Web site to a database Add server behaviors to Web pages Create pages to view data in a database Create a Login page Create database-driven pages using Access and ASP for a Windows server Dreamweaver CS3 Tutorial 103

4. XP Objectives Upload a database to a remote Windows server Connect a Web site to a database Add server behaviors to Web pages Create pages to view data in a database Create a Login page Dreamweaver CS3 Tutorial 104

5. XP Understanding Spry The Spry framework for AJAX enables Web designers to more easily add functionality to Web pages Spry elements are chunks of prewritten, reusable code – Widgets – XML Data Sources – Effects Dreamweaver CS3 Tutorial 105

6. XP Adding a Spry Widget to a Web Page Widgets are reusable, prebuilt page elements that enable user interaction. Dreamweaver CS3 Tutorial 106

7. XP Adding a Spry Widget to a Web Page In the Web page, position the pointer where you want the Spry widget to appear. Click the Spry tab on the Insert bar, and then click the appropriate Spry widget button. Add content to the widget. Style the widget as needed. Dreamweaver CS3 Tutorial 107

8. XP Adding a Spry Widget to a Web Page Dreamweaver CS3 Tutorial 108

9. XP Adding a Spry Widget to a Web Page The look of any widget you add to a Web page should be formatted to complement the aesthetics of the page in which it appears. Dreamweaver CS3 Tutorial 109

10. XP Using Spry Effects Spry effects are visual enhancements that you can apply to the various elements in Web pages. Dreamweaver CS3 Tutorial 1010

11. XP Exploring Databases and Dynamic Page Content A database is a collection of information that is arranged for ease and speed of search and retrieval. A database is usually associated with a software package like MySQL. A database-driven Web site is a Web site that uses a database to gather, display, or manipulate information. Dreamweaver CS3 Tutorial 1011

12. XP Exploring Databases and Dynamic Page Content There are different ways to create database- driven Web sites. The method depends on: – The amount of data being served out – The number of users who may potentially access the information simultaneously – The available budget – The previously used technology Oracle and DB2 are common database software packages used for large sites; MySQL and Access are often used for small or medium sites. Dreamweaver CS3 Tutorial 1012

13. XP Exploring Databases and Dynamic Page Content You must also select the programming or scripting language used to create server behaviors. Server behaviors are behaviors that run on the Web server before the Web page is sent to the user’s browser. They are written in PHP, ASP, ASP.NET, JSP, or ColdFusion When Web pages display data stored in a database, they are said to be dynamically generated. Dreamweaver CS3 Tutorial 1013

14. XP Exploring Databases and Dynamic Page Content The general process for creating the database-driven pages in the Cosmatic site is: – Adjust the form in the Contact page – Create the Web pages you will need – Place or create the database on the remote server – Add server behaviors to the form to connect the database – Add server behaviors to view the data collected in the database from within the designated Web pages – Format the login page – Set the database pages to display only when a user has logged in Dreamweaver CS3 Tutorial 1014

15. XP Creating Database-Driven Pages Using MySQL and PHP It is a good idea to plan the database-driven portion of a Web site in advance. When the database-driven pages are complete, the survey information from users who completed the form in the Contact page will be stored in a database that only authorized users can access. Dreamweaver CS3 Tutorial 1015

16. XP Creating Database-Driven Pages Using MySQL and PHP Create the Web pages you need. Create a database on your remote server. Add server behaviors to connect the site to the database. Add server behaviors to store submitted data in the database and to view the data collected in the database from within designated Web pages. Create a Login page. Add code to the backend pages to prevent unauthorized users from viewing the content of those pages. Dreamweaver CS3 Tutorial 1016

17. XP Modifying the Form Before you create the database-driven pages of a Web site, you will modify the form in the Contact page to work with the database that you will place on the remote server. You should replace the list box to keep things simpler because it requires more steps and custom scripts to process data from a list box for storage in a database. Dreamweaver CS3 Tutorial 1017

18. XP Modifying the Form Dreamweaver CS3 Tutorial 1018

19. XP Creating New Pages The five pages used for the database-driven portion of the Cosmatic site are: – thankyou.htm – a page thanking the user for his or her submission – access_denied.htm – a page informing the user that the wrong user name or password has been entered – database.php – a page showing an overview of the data stored in the database Dreamweaver CS3 Tutorial 1019

20. XP Creating New Pages The five pages used for the database-driven portion of the Cosmatic site are (cont.): – database_details.php – a page showing the details of a selected record – login.php – a page in which a user enters in his or her user name and password and clicks the Login button Dreamweaver CS3 Tutorial 1020

21. XP Creating New Pages Dreamweaver CS3 Tutorial 1021

22. XP Creating a Database on a Remote Server You must create a database on the remote server so it can send data to and receive data from Web pages or Web applications. You can find information about using phpMyAdmin as the database management interface at www.phpmyadmin.netwww.phpmyadmin.net Dreamweaver CS3 Tutorial 1022

23. XP Creating a Database on a Remote Server Dreamweaver CS3 Tutorial 1023

24. XP Creating a Database on a Remote Server Dreamweaver CS3 Tutorial 1024

25. XP Connecting a Web Site to a Database Once the database is created on the Web server, you are ready to connect the site to the database. A check mark to the left of each step in the Server Behaviors panel indicates that all necessary information has been entered and the step is completed. Dreamweaver CS3 Tutorial 1025

26. XP Connecting a Web Site to a Database The three main steps for connecting a Web page to a database are: – Create a site for this file – Choose a document type – Set up the site’s testing server You can’t preview dynamic pages from within Dreamweaver unless you specify a folder in which the dynamic pages can be processed. Dreamweaver CS3 Tutorial 1026

27. XP Connecting a Web Site to a Database Dreamweaver CS3 Tutorial 1027

28. XP Adding Server Behaviors Dreamweaver provides a list of prewritten server behaviors in the Server Behaviors panel once the page is connected to the database. These server behaviors extend the functionality of the page and enable you to retrieve and display the data from the database. Dreamweaver CS3 Tutorial 1028

29. XP Adding Server Behaviors You will include the following two server behaviors in the contact.php page: – Recordset – enables you to specify which data you want to retrieve from the database and display in the Web page – Insert Record – enables you to specify what will happen to the information collected from the Web page Dreamweaver CS3 Tutorial 1029

30. XP Adding Server Behaviors A recordset is a temporary collection of data retrieved from a database and stored on the application server that generates the Web page when that page is loaded in a browser window. You will create a recordset for the contact.php page. Dreamweaver CS3 Tutorial 1030

31. XP Adding Server Behaviors Dreamweaver CS3 Tutorial 1031

32. XP Adding Server Behaviors Dreamweaver CS3 Tutorial 1032

33. XP Adding Server Behaviors Once you create a recordset, you will add the Insert Record behavior to the page. To add the Insert Record behavior, click the Add Behavior button at the top of the Server Behaviors panel and then click Insert Record. The Insert Record dialog box opens. Dreamweaver CS3 Tutorial 1033

34. XP Adding Server Behaviors Dreamweaver CS3 Tutorial 1034

35. XP Adding Server Behaviors Dreamweaver CS3 Tutorial 1035

36. XP Adding Server Behaviors After you add the Insert Record behavior to the page, you should test it. To test it, you need to upload the page to the remote server, preview the page in a browser, and then complete and submit the form. The Thank You page should then display. Dreamweaver CS3 Tutorial 1036

37. XP Creating Backend Pages for Viewing Data in a Database Backend pages are pages that are intended for internal use. The Master Detail Page Set button in the Application category on the Insert bar enables you to create a set of pages that present information in two levels of detail. – The master page lists all the records in the recordset that you create for the page. – The detail page displays the details of the selected record Dreamweaver CS3 Tutorial 1037

38. XP Creating Backend Pages for Viewing Data in a Database You determine which fields of information to display on the master page/detail page when you set the parameters for the pages. Dreamweaver adds server behaviors to create a page navigation bar that enables you to move between the dynamic records if there are more records in the database than are displayed in the page. Dreamweaver CS3 Tutorial 1038

39. XP Creating Backend Pages for Viewing Data in a Database The pages include Display Record Count server behaviors to indicate which records are visible in the page and the total number of records in the database. To create the master page, you use the Insert Master-Detail Page Set dialog box. You will remove the fields from the Master Page Fields list that you do not want to display in the master page. Dreamweaver CS3 Tutorial 1039

40. XP Creating Backend Pages for Viewing Data in a Database Dreamweaver CS3 Tutorial 1040

41. XP Creating Backend Pages for Viewing Data in a Database After you create the detail page, you should upload the pages to the remote server and preview the pages in the browser. Dreamweaver adds elements to the pages that will enable you to view the data collected in the database. Dreamweaver CS3 Tutorial 1041

42. XP Creating Backend Pages for Viewing Data in a Database Dreamweaver CS3 Tutorial 1042

43. XP Creating a Login Page to Protect Backend Pages Data collected from a Web site and stored in a database is usually displayed in Web pages. This allows you to view the data from any computer with an Internet connection. Many businesses do not want the general public to be able to access this type of information. They can restrict access to these Web pages by requiring users to log in before viewing the page. Dreamweaver CS3 Tutorial 1043

44. XP Creating a Login Page to Protect Backend Pages To create a Login page to protect backend pages, you must: – Create a table in the database that holds user names and passwords – Create a page that enables users to create accounts by entering a unique user name and password – Create a page that enables users to log in to the site – Restrict access to the pages Dreamweaver CS3 Tutorial 1044

45. XP Creating a Login Page to Protect Backend Pages Once you have restricted access to the pages, users who are not logged in will be sent to the Access Denied page. You create the form in the Login page, and then add the Log In User server behavior to the page. The Log In User server behavior is added using the Log In User dialog box and will verify the submitted user name and password. Dreamweaver CS3 Tutorial 1045

46. XP Creating a Login Page to Protect Backend Pages Dreamweaver CS3 Tutorial 1046

47. XP Creating a Login Page to Protect Backend Pages Dreamweaver CS3 Tutorial 1047

48. XP Creating a Login Page to Protect Backend Pages You will add a meta refresh tag to the Access Denied page, which tells the browser to automatically refresh the page after a certain amount of time. You will also add text to indicate that access was denied for the user. You should test the Login page and the behaviors you added to the Database and Access Denied pages. Dreamweaver CS3 Tutorial 1048

49. XP Creating Database-Driven Pages Using Access and ASP It is a good idea to plan the database-driven portion of a Web site in advance. When the database-driven pages are complete, the survey information from users who completed the form in the Contact page will be stored in a database that only authorized users can access. Dreamweaver CS3 Tutorial 1049

50. XP Creating Database-Driven Pages Using Access and ASP Create the Web pages you need. Upload a database file in which to store data to your remote server. Add server behaviors to connect the site to the database. Add server behaviors to store submitted data in the database and to view the data collected in the database from within designated Web pages. Create a Login page. Add code to the backend pages to prevent unauthorized users from viewing the content of those pages. Dreamweaver CS3 Tutorial 1050

51. XP Modifying the Form Before you create the database-driven pages of a Web site, you will modify the form in the Contact page to work with the database that you will place on the remote server. You should replace the list box to keep things simpler because it requires more steps and custom scripts to process data from a list box for storage in a database. Dreamweaver CS3 Tutorial 1051

52. XP Modifying the Form Dreamweaver CS3 Tutorial 1052

53. XP Modifying the Form You should create all pages of the database- driven portion of the Web site in advance so that they are available to you when you need them. You need five pages for the database-driven portion of the site. Dreamweaver CS3 Tutorial 1053

54. XP Modifying the Form The five pages used for the database-driven portion of the Cosmatic site are: – thankyou.htm – a page thanking the user for his or her submission – access_denied.htm – a page informing the user that the wrong user name or password has been entered – database.asp – a page showing an overview of the data stored in the database Dreamweaver CS3 Tutorial 1054

55. XP Modifying the Form The five pages used for the database-driven portion of the Cosmatic site are (cont.): – database_details.asp – a page showing the details of a selected record – login.asp – a page in which a user enters in his or her user name and password and clicks the Login button Dreamweaver CS3 Tutorial 1055

56. XP Modifying the Form Dreamweaver CS3 Tutorial 1056

57. XP Uploading a Database to a Remote Server You must create a database on the remote server so it can send data to and receive data from Web pages or Web applications. Dreamweaver CS3 Tutorial 1057

58. XP Uploading a Database to a Remote Server Dreamweaver CS3 Tutorial 1058

59. XP Connecting a Web Site to a Database Once the database is created on the Web server, you are ready to connect the site to the database. A check mark to the left of each step in the Server Behaviors panel indicates that all necessary information has been entered and the step is completed. Dreamweaver CS3 Tutorial 1059

60. XP Connecting a Web Site to a Database The three main steps for connecting a Web page to a database are: – Create a site for this file – Choose a document type – Set up the site’s testing server Dreamweaver CS3 Tutorial 1060

61. XP Add Server Behaviors Dreamweaver provides a list of prewritten server behaviors in the Server Behaviors panel once the page is connected to the database. These server behaviors extend the functionality of the page and enable you to retrieve and display the data from the database. Dreamweaver CS3 Tutorial 1061

62. XP Add Server Behaviors You will include the following two server behaviors in the contact.asp page: – Recordset – enables you to specify which data you want to retrieve from the database and display in the Web page – Insert Record – enables you to specify what will happen to the information collected from the Web page Dreamweaver CS3 Tutorial 1062

63. XP Add Server Behaviors Dreamweaver CS3 Tutorial 1063

64. XP Creating Backend Pages for Viewing Data in a Database Dreamweaver CS3 Tutorial 1064

65. XP Creating Backend Pages for Viewing Data in a Database Dreamweaver CS3 Tutorial 1065

66. XP Tutorial Summary Add Spry elements to a Web page Create database-driven Web sites using MySQL and PHP for a Linux server or Access and ASP for a Windows server Create needed Web pages Place or create the database on your remote server Add server behaviors to connect the database to the form Dreamweaver CS3 Tutorial 1066

67. XP Tutorial Summary Add server behaviors to Web pages to view the data collected in the database Add content to the Login page Set the Database and Database Details pages to display only when a user has logged on with a valid username and password Dreamweaver CS3 Tutorial 1067