This action might not be possible to undo. Are you sure you want to continue?
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.
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:
• • •
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.
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.