CSCI 1100L
Web pages for database access

In this lab we will briefly explore the idea of how a Web page can serve as a front-end to allow the user to make entries and lookups in an online database. But first…

Finish that Web page!

If you have not yet published your personal Web page by uploading it to Arches, please do so now. I have left enough time for you to take some care and make it a true expression of your personality, so please don't be satisfied with just a sloppy job to satisfy the requirement. This is your Web presence – make it reflect how you want to present yourself to the world! Don't forget that we have a digital camera to take a photo of you if you wish, and we'll be glad to help you upload your photo to Arches so that it can be part of your Web page.

OK, back to database stuff…

IMPORTANT PRIVACY WARNING: In this exercise you will be entering data into a real live Web database whose contents are publicly accessible on the Internet. Do not enter your E-mail address into this form unless you are willing to be contacted!

Launch your Web browser and open the page

http://www.cs.uga.edu/~dme/csci1100/insert.html

Use the File/Save Page menu item to save this file onto a diskette so that you can work with it. As always, if you don't have a diskette you can use a folder with your name on the I: drive, but remember that these can be erased by anyone.

Launch Notepad and open the file you have just saved. There are two new elements which make this page interact with a database:

1. At the bottom of the form are a SUBMIT and a RESET button: <input type= submit><input type=reset>. Clicking the RESET button clears the data you have typed into the form. Clicking the SUBMIT button will send the contents of the form to a remote server program which will enter the data into a database.
2. The <FORM> tag now has an ACTION attribute, <form action = "http://ebiz.terry.uga.edu/~deverett/php/cs1100_insert.php">. This is the location of the server program.

You will also notice some SELECT and OPTION tags. These are new tags which create drop-down lists. For example, the lines

<select name=class>

<option value=1>Freshman

specify that this option will show up as Freshman in the drop-down list, but the value1 will be sent to the server if this option is selected. Note that a </SELECT> tag follows the last <OPTION> tag.

Edit the file to jazz it up a bit, as follows:

• Add a title, "CSCI 1100 Student Database Entry"

• Put a nice background color into the BODY tag.

• Get rid of the text "This is my plain-Jane version…" In its place, add a level-1 header (H1 tag) and some text above the form. The header and text should explain that entering this data into the database will allow the user to be contacted by other students who share his or her interests.

• Add two more class options, "Senior" (value of 4) and "Grad or professional" (value of 5) to the class drop-down list. Remember, they must appear before the </SELECT> tag!

You can refer to "Dr. Dan's Quickie HTML guide" or the Netscape HTML reference page

http://developer.netscape.com/docs/manuals/htmlguid/index.htm

if you have forgotten how to use the appropriate HTML tags.

Try it out!

OK, let's see if this works. Type in your name, or a fake name if you don't want to reveal your interests. Fill out the rest of the form and click Submit. You should see an acknowledgement that your information has been entered.

The selection page

Now point your web browser at the selection page,

http://www.cs.uga.edu/~dme/csci1100/select.html

Again, please jazz this page up along the lines suggested for the input page.

There is a new tag type in this page: the hidden input tag. These values are not shown on the page, but they are passed back to the server program, and control how the reply is formatted. This particular server program recognizes the following hidden tags:

• title – the page title
• pageColor – the background color of the page
• headerH1 – a level-1 header at the top of the page
• headerText – text which follows the level-1 header
• font – font attributes for headerText
• tableColor – background color for the table entries
• footer – text which follows the table of results

Try this page out, by searching for the interest you just entered. You should see yourself, and possibly others! To see the entire database, enter any in the interest field.

Customize the selection results page

Now customize this program by altering the hidden tags to create your own personalized text (but see below if you are tempted to add new HTML to the header text!) There is no tableColor value, so put one in. I like light blue.

Adding New HTML

It is possible to add new HTML to the page by putting it into the hidden headerText tag. However, you cannot use the "<" and ">" characters in the headerText string, as this will confuse Netscape big time. Instead, you must use the special characters

• &lt; to represent "<"
• &gt; to represent ">"

This looks horrible, but just remember that lt stands for "less than" and gt for "greater than." To see an example, open the page

http://www.cs.uga.edu/~dme/cs101/select2.html

You'll see some scary-looking stuff in the headerText hidden tag. But if you translate the special characters and put in some line breaks, it translates to

<table>

<tr>

<td><font size=+2 color=blue>Welcome to my interactive database! Here are some students who share your interests!

<td><img src=http://www.arches.uga.edu/~drdan/koala2.gif>

</table>

<p>

This creates a table with two entries, a text string and an image. Note that we can use an HTTP: address to specify an image on a different server. Try it out!

A couple of cautionary notes:

1. You can't put line breaks into a string. The whole thing has to be on one line.
2. I have not yet found a way to make single quotes work well.

If you are feeling adventurous, try this technique to put some cool stuff on your results page!