• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • 1
    CommentGo Back
Download
 
 
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 thedata. In this workshop, students will learn how to create forms and have the data sent viaemail using preconfigured scripts provided by ATS. They will also learn how to set upDreamweaver to connect to a database and retrieve information to be incorporated intoweb pages. Finally, students will learn how to create password protected pages using adatabase and scripting.
Create a site
Because working with forms and databases requires scripting, we must set up our site toinclude what Dreamweaver calls Server Technology. Basically we are providingDreamweaver with information about the type of server we will be using to deliver ourpages and its capabilities.Begin creating a new site as you would anynew site:
•
 
On the second page of the wizard,click that you do want to use aserver technology and choose ASPVBScript from the dropdown list.
•
 
On the next page, select “Editlocally then upload to remotetesting server”
•
 
On the site definition pagecomplete the page as follows
o
 
Connect using: FTP
o
 
Hostname: www.etsu.edu
o
 
Folder:oit/ats/workshops/practice/***[replace the *** with thecomputer number at which youare sitting during the workshop, atl followed by a number]
o
 
FTP login: etsu\*** [replace the *** with the computer number at whichyou are sitting during the workshop, atl followed by a number]
o
 
FTP Password: [use the password on the computer at which you are sittingduring the workshop]
 
•
 
Test the connection, and if successful, finish completing the site creationwizard.
Forms
HTML forms allow users to enter data and then submit it. Forms actually consist of twoparts:
•
 
The web page that contains the form
•
 
A script or program that receives the data submitted by the form and processes itsomehow (writing the data to a database or emailing it are the most commonoptions, for example)Dreamweaver will automatically generate some scripting to assist you in this process, it isnot 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 beginlearning how to write your own scripts.In addition, ATS has loaded a couple of scripts onto the server that you can use as youare 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 FormProperties window; we will return to it in a moment. For design purposes, you may find ituseful to construct a table within the form. There a number of different types of formfields 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 processingOnce we design the form, we have to work on the backend, the script that will process thesubmitted data.Click on the dotted outline of the form to bring up the form properties. The Actionproperty tells the location of the script or program that will process the data. ATS hasloaded a couple of scripts onto the ETSU server that you may find useful. One simplyprints 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.aspThe second script is used to
email the form data to an address you specify
. For this towork, 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 sentThe script, written and freely distributed by Mike Hall of http://www.BrainJar.com, alsoallows you to control other settings, such as the page to which the user should be directedafter submitting the form. These options are controlled by hidden fields in the form. For acomplete list of the options and documentation of the script, seehttp://www.brainjar.com/asp/formmail.
Validate Your Form: 
Using JavaScript, Dreamweaver can validate your form data before it is submitted tomake certain, for example, that all required fields are completed or that the data the userentered meets certain basic criteria.
•
 
From the menu, select Window > Behaviors. A new panel opens on the right sideof 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 acceptablevalues.
•
 
If the data should be an email address, you can check that the entered text isformatted as a valid email address.
Note:
Dreamweaver does not ensure thatemail address itself is valid (i.e. that it is a real email account), only that it lookslike an email address (i.e. has a “@” somewhere in the middle, a period near theend, 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 againstthe rules established. If it passes the validation, the data is sent to the script; if it failsvalidation, a message pops up and the user is allowed to correct the form and resubmit.
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...