1 / 67

Tutorial 10 Adding Spry Elements and Database Functionality

Tutorial 10 Adding Spry Elements and Database Functionality. 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

petra-sutton
Télécharger la présentation

Tutorial 10 Adding Spry Elements and Database Functionality

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 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 10

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

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

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

  9. 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 10

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

  11. 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 10

  12. 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 10

  13. 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 10

  14. 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 10

  15. 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 10

  16. 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 10

  17. 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 10

  18. Modifying the Form Dreamweaver CS3 Tutorial 10

  19. 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 10

  20. 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 10

  21. Creating New Pages Dreamweaver CS3 Tutorial 10

  22. 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.net Dreamweaver CS3 Tutorial 10

  23. Creating a Database on a Remote Server Dreamweaver CS3 Tutorial 10

  24. Creating a Database on a Remote Server Dreamweaver CS3 Tutorial 10

  25. 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 10

  26. 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 10

  27. Connecting a Web Site to a Database Dreamweaver CS3 Tutorial 10

  28. 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 10

  29. 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 10

  30. 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 10

  31. Adding Server Behaviors Dreamweaver CS3 Tutorial 10

  32. Adding Server Behaviors Dreamweaver CS3 Tutorial 10

  33. 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 10

  34. Adding Server Behaviors Dreamweaver CS3 Tutorial 10

  35. Adding Server Behaviors Dreamweaver CS3 Tutorial 10

  36. 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 10

  37. 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 10

  38. 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 10

  39. 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 10

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

  41. 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 10

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

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

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

  45. 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 10

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

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

  48. 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 10

  49. 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 10

  50. 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 10

More Related