tutorial 10 adding spry elements and database functionality dreamweaver cs3 tutorial 101

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


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


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


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


XPXPAdding a Spry Widget to a Web Page• Widgets are reusable, prebuilt page elements

that enable user interaction.


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.


XPXPAdding a Spry Widget to a Web Page


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.


XPXPUsing Spry Effects• Spry effects are visual enhancements that you

can apply to the various elements in Web pages.


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.


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.


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.


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


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.


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.


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.


XPXPModifying the Form


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


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


XPXPCreating New Pages


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


XPXPCreating a Database on a Remote Server


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.


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.


XPXPConnecting a Web Site to a Database


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.


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


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.


XPXPAdding Server Behaviors


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.


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.


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


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.


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.


XPXPCreating Backend Pages for Viewing Data in a Database


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.


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.


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


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.


XPXPCreating a Login Page to Protect Backend Pages


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.


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.


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.


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.


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.


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


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


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.


XPXPUploading a Database to a Remote Server


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.


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


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.


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


XPXPAdd Server Behaviors


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


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


tutorial 10 adding spry elements and database functionality dreamweaver cs3 tutorial 101

Documents

web pagewidgets

web designers

web pagein

web pagethe

databasedriven web sites

web pagescreate pages

web server befor

web pagesspry elements