Advanced Dreamweaver:

Forms and Databases

Introduction
Dreamweaver is more than just a WYSIWYG editor for creating web pages.
Dreamweaver also allows you to work with databases and create dynamic pages from the
data. In this workshop, students will learn how to create forms and have the data sent via
email using preconfigured scripts provided by ATS. They will also learn how to set up
Dreamweaver to connect to a database and retrieve information to be incorporated into
web pages. Finally, students will learn how to create password protected pages using a
database and scripting.

Create a site
Because working with forms and databases requires scripting, we must set up our site to
include what Dreamweaver calls Server Technology. Basically we are providing
Dreamweaver with information about the type of server we will be using to deliver our
pages and its capabilities.

Begin creating a new site as you would any

new site:
• On the second page of the wizard,
click that you do want to use a
server technology and choose ASP
VBScript from the dropdown list.
• On the next page, select “Edit
locally then upload to remote
testing server”
• On the site definition page
complete the page as follows
o Connect using: FTP
o Hostname: www.etsu.edu
o Folder:
oit/ats/workshops/practice/***
[replace the *** with the
computer number at which you
are sitting during the workshop, atl followed by a number]
o FTP login: etsu\*** [replace the *** with the computer number at which
you are sitting during the workshop, atl followed by a number]
o FTP Password: [use the password on the computer at which you are sitting
during the workshop]
 • Test the connection, and if successful, finish completing the site creation
wizard.

Forms
HTML forms allow users to enter data and then submit it. Forms actually consist of two
parts:
• The web page that contains the form
• A script or program that receives the data submitted by the form and processes it
somehow (writing the data to a database or emailing it are the most common
options, for example)

Dreamweaver will automatically generate some scripting to assist you in this process, it is
not as easy to use as FrontPage, and it will not automatically generate an email. However,
unlike Frontpage, Dreamweaver lets you see the script it generates, so you can begin
learning how to write your own scripts.

In addition, ATS has loaded a couple of scripts onto the server that you can use as you
are developing your forms, and let you email the results of the form.

Create a form:
Create a new form by choosing Insert > Form > Form. For now, ignore the Form
Properties window; we will return to it in a moment. For design purposes, you may find it
useful to construct a table within the form. There a number of different types of form
fields that you can use to gather data:
• Text – allows entry of a single line of text
• Textarea – large blocks of text
• Radio Group – allows user to pick one of series of items
• Check Box – allows user to select multiples items
• List/menu – choose one (or more) from a drop down list
• Hidden – used to pass values to the script that the user does not input
• Button – usually used to Submit the form for processing

Once we design the form, we have to work on the backend, the script that will process the
submitted data.

Click on the dotted outline of the form to bring up the form properties. The Action
property tells the location of the script or program that will process the data. ATS has
loaded a couple of scripts onto the ETSU server that you may find useful. One simply
prints out the data that is sent by the form. This can be useful for testing your forms.
Point your form to:
http://www.etsu.edu/oit/ats/scripts/formtester.asp

The second script is used to email the form data to an address you specify. For this to
work, you need to do two things:
1) Set the form action to: http://www.etsu.edu/oit/ats/scripts/formmail.asp
 2) Add a hidden field to your form:
• Set the name of the field to “_recipients” [don’t forget the underscore]
• Set the value to the email address to which you want the form data sent

The script, written and freely distributed by Mike Hall of http://www.BrainJar.com, also
allows you to control other settings, such as the page to which the user should be directed
after submitting the form. These options are controlled by hidden fields in the form. For a
complete list of the options and documentation of the script, see
http://www.brainjar.com/asp/formmail.

Validate Your Form:

Using JavaScript, Dreamweaver can validate your form data before it is submitted to
make certain, for example, that all required fields are completed or that the data the user
entered meets certain basic criteria.
• From the menu, select Window > Behaviors. A new panel opens on the right side
of the screen.
• Click on the dotted outline of the form in your design window to select it.
• In the behavior panel that opened, click the plus sign to Add a New Behavior.
• Select Validate form.
• You will be presented with a window that lists all the user submitted fields.

• For each required field, select the form field and check the Required box.
• If the data should be numeric, you can also check that, along with acceptable
values.
• If the data should be an email address, you can check that the entered text is
formatted as a valid email address. Note: Dreamweaver does not ensure that
email address itself is valid (i.e. that it is a real email account), only that it looks
like an email address (i.e. has a “@” somewhere in the middle, a period near the
end, and one of a list of acceptable final characters).

Before the form is sent to the script identified in the action tag it will be validated against
the rules established. If it passes the validation, the data is sent to the script; if it fails
validation, a message pops up and the user is allowed to correct the form and resubmit.
Working with Databases:
Drawing information from a database allows you to create pages dynamically, saving you
the designer a lot of work. Say, for example, that you are responsible for creating a
department’s web site for a department with 50 members. A common technique is to
create a page that lists all 50 members and then provides a link for each member where a
user can click to find out more specific information about that faculty member. One
option for the designer is to create 51 pages, one for the list and one for each department
member. Or another option is create two pages, both of which draw information from a
database. One would list all the members of the department (drawing that information
from the database); the second page would draw information from the database about a
particular member depending upon what link was clicked on the first page. Obviously,
the later option is usually the better one.

Once again, Dreamweaver is not as easy to work with as FrontPage in this case, but it is
still fairly easy and is much more powerful in that you have much more control over your
data.

Regular HTML canno t interact with databases. You must use some form of scripting
language. When we set up our Dreamweaver site and defined the server technology as
ASP VBScript we were telling Dreamweaver which scripting language we would be
using (ASP with Visual Basic).

Making the Connection

First you must tell Dreamweaver how to connect to your
database and where it is stored. You only need to do this
once for each database in your site.
• In the applications panel, click on the Databases
tab
• Click on the Plus sign to add a new database
• Select Custom Connection String
• Give your connection a name; this can be
anything
• For this workshop, for the connection string type
the following:
Provider=Microsoft.Jet.OLEDB.4.0;Data
Source=D:\www\oit\ats\fpdb\dreamweaver.mdb;Persist Security Info=False
 • The above string tells Dreamweaver the location of the database on the server
(D:\www\oit\ats\fpdb\), the name of the database (dreamweaver.mdb), and the
technology used to make the connection
(Provider=Microsoft.Jet.OLEDB.4.0).
• Test your connection.
• If the connection is successful, click OK.

Dreamweaver will create a folder named “connections” and an asp file in it that is the
name that you gave the connection. The file contains code that Dreamweaver will use to
connect to the database whenever you need access.

TIP: The use of databases on the web requires that proper permissions be set on the
folder that contains the database and on the database itself. However, ETSU’s web server
is not set up to allow users to change those permissions manually. You should create a
folder where you will store all of your databases and upload your databases to those
folders. You can then contact OIT and ask them to set the appropriate permissions for
you. Alternately, because the server is running FrontPage extensions, you can access your
web space through FrontPage, and allow FrontPage to create your database folder and to
set the permissions.

Retrieving Data from a Database

The database that we are using contains a list of faculty and staff. We will create a page
that lists all of those members by name and department. By clicking on the name of the
person, the user will be able to see more detail about the person. We can do all of this by
creating just two pages and drawing our data from the database.

Creating the List Page:

First we must query the database, telling it what records we want returned to display upon
our page.
Create a new web page
by choosing dynamic
page and ASP VBScript
from the wizard.

In the Applications
panel, click on the
Bindings tab, then the
plus sign button, and
choose Recordset
(Query).

You can use the name provided (usually Recordset and a number), from the drop
down list choose the connection you created above, and then choose the table named
people. We also want to sort by the LastName field.
 Defining the
Database
Query

With the query now comp leted we can begin designing our page. To include data from
the database we only need to click and drag the appropriate field from the list on the
applications panel to our design page.

Create a table with 2 columns and three rows. Into the first cell of the first row, drag the
FirstName field and the LastName field. Into the second cell of the same row drag the
Department field.

Preview the page. The first record of our recordset is displayed. To have the entire list
displayed we must add the Repeat Region Server Behavior, which when properly applied
will allow the entire recordset to be printed sequentially:
• In the code view, select the table row that contains our data and the table row
beneath it.
• In the Applications Panel, click the Behaviors tab.
• Press the Plus button to add a behavior.
• Select Repeat Region.
• Click the box to display all the records.
• Preview your page.

Our page now displays a list of all the people in the college sorted alphabetically.

Now let’s create the link to the detail page.

• On the design page, highlight the FirstName and LastName fields just as you
would any other text.
• In the properties window, click on the icon of the folder beside the link field.
• In the popup window, type “profile.asp” as the file name you want to link to.
 • Click on the parameters button.
• In the name filed type ID.
• In the value field, click on the icon
of the lightning bolt.
• From the Recordset list, select the
ID field.
• Click OK
• Click OK to complete the link.

Now, each name as it is printed on the page becomes a link to the profile.asp page. But if
you will notice, each link also includes some extra information in the pathway, namely a
question mark followed by “ID=” and a number. This is called a query string and is a
way to pass variables from one page to the next. The number that is being passed is the
ID field in our database that corresponds to that particular person. With this information
passed to our profile page, we can create a database query that returns only the
information about that particular person. So let’s build that page.

To Create the Profile Page:

Create a new dynamic ASP VBScript page. Now let’s create a database query. This time,
however, we will apply a filter, setting ID = to the URL Parameter (aka query string)
variable named ID.

When we test our query we are asked to enter a sample value for the ID URL variable.
Type in a number, such as 25. Notice that only one record is returned. That’s because the
ID field uniquely identifies each person in our database. We can now design our page,
placing the database fields wherever we would like.
Creating Password Protected Pages
Using a database and the built in scripting of Dreamweaver, we can create web pages that
are password protected.

First we need to create a login page:

• Create a new ASP page.
• Create a form with fields for username, password, and a submit button.
• From the Applications panel, choose the Server Behaviors tab
• Add a behavior > User authentication > Log in User
• Set the appropriate database connections, and pick the authenticate table from
our database.
• Set the username, password, and level boxes to read from the appropriate
fields in the database.
• Set the page to direct the user to if the authentication is successful (secret.asp)
• Set the page to direct the user to if the authentication is unsuccessful
• Click ok
• Save the file as login.asp

Next we create pages that are protected by password.

• Create a new ASP page
• Add a server behavior > User authentication > Restrict Access to Page
o Restrict access by username and password only
• Save the file as secret.asp
• One entry per line, type the following:
o “This page is secret”
o “Top secret page”
o “Logout”
• For the text “Top secret page” create a link to topsecret.asp
• Highlight the Logout text
o Server Behavior > User Authentication > Log Out User
o Set the page to go to as login.asp
• Create a new page named topsecret.asp, and set the Restrict access to Page
setting to include level. Set the level to 3.
Your pages should now be password protected. Upload them to the server and try them.
Without logging in, type in the url for the secret.asp page. You should be denied access
and redirected. Go to the login page and login as faculty/faculty. You should be
authenticated and taken to secret.asp. Click on the link to the topsecret.asp page. You
should be denied access because your security clearance isn’t high enough. Log out and
then log back in as erik/ETSU. You should now be able to access topsecret.asp.