Tutorial 10
Adding Spry Elements and
Database Functionality
Dreamweaver CS3 Tutorial 10 1
XPXPObjectives• 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 2
XPXPObjectives• 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 3
XPXPObjectives• 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 4
XPXPUnderstanding 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 5
XPXPAdding a Spry Widget to a Web Page• Widgets are reusable, prebuilt page elements
that enable user interaction.
Dreamweaver CS3 Tutorial 10 6
XPXPAdding 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 7
XPXPAdding a Spry Widget to a Web Page
Dreamweaver CS3 Tutorial 10 8
XPXPAdding 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 9
XPXPUsing Spry Effects• Spry effects are visual enhancements that you
can apply to the various elements in Web pages.
Dreamweaver CS3 Tutorial 10 10
XPXPExploring 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 11
XPXPExploring 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 12
XPXPExploring 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 13
XPXPExploring 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 14
XPXPCreating 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 15
XPXPCreating 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 16
XPXPModifying 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 17
XPXPModifying the Form
Dreamweaver CS3 Tutorial 10 18
XPXPCreating 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 19
XPXPCreating 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 20
XPXPCreating New Pages
Dreamweaver CS3 Tutorial 10 21
XPXPCreating 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 22
XPXPCreating a Database on a Remote Server
Dreamweaver CS3 Tutorial 10 23
XPXPCreating a Database on a Remote Server
Dreamweaver CS3 Tutorial 10 24
XPXPConnecting 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 25
XPXPConnecting 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 26
XPXPConnecting a Web Site to a Database
Dreamweaver CS3 Tutorial 10 27
XPXPAdding 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 28
XPXPAdding 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 29
XPXPAdding 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 30
XPXPAdding Server Behaviors
Dreamweaver CS3 Tutorial 10 31
XPXPAdding Server Behaviors
Dreamweaver CS3 Tutorial 10 32
XPXPAdding 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 33
XPXPAdding Server Behaviors
Dreamweaver CS3 Tutorial 10 34
XPXPAdding Server Behaviors
Dreamweaver CS3 Tutorial 10 35
XPXPAdding 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 36
XPXPCreating 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 37
XPXPCreating 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 38
XPXPCreating 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 39
XPXPCreating Backend Pages for Viewing Data in a Database
Dreamweaver CS3 Tutorial 10 40
XPXPCreating 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 41
XPXPCreating Backend Pages for Viewing Data in a Database
Dreamweaver CS3 Tutorial 10 42
XPXPCreating 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 43
XPXPCreating 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 44
XPXPCreating 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 45
XPXPCreating a Login Page to Protect Backend Pages
Dreamweaver CS3 Tutorial 10 46
XPXPCreating a Login Page to Protect Backend Pages
Dreamweaver CS3 Tutorial 10 47
XPXPCreating 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 48
XPXPCreating 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 49
XPXPCreating 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 50
XPXPModifying 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 51
XPXPModifying the Form
Dreamweaver CS3 Tutorial 10 52
XPXPModifying 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 10 53
XPXPModifying 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 10 54
XPXPModifying 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 10 55
XPXPModifying the Form
Dreamweaver CS3 Tutorial 10 56
XPXPUploading 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 10 57
XPXPUploading a Database to a Remote Server
Dreamweaver CS3 Tutorial 10 58
XPXPConnecting 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 59
XPXPConnecting 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 10 60
XPXPAdd 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 61
XPXPAdd 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 10 62
XPXPAdd Server Behaviors
Dreamweaver CS3 Tutorial 10 63
XPXPCreating Backend Pages for Viewing Data in a Database
Dreamweaver CS3 Tutorial 10 64
XPXPCreating Backend Pages for Viewing Data in a Database
Dreamweaver CS3 Tutorial 10 65
XPXPTutorial 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 10 66
XPXPTutorial 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 10 67