Project 5: Adding CGI Forms and Javascript

Assigned: Tuesday, October 27, 2009
Due: Tuesday, November 10, 2009 before class

Setting Up | Description | Requirements | Submission

The goal of this assignment is to add a contact form and JavaScript to the Dan's Disco Discs website.

Setting Up

Here are the steps to get started:

1. Create a directory for this project in ~/public_html/cs312/.
2. Copy the files from ~/public_html/cs312/project 4 directory/ into the newly created project 5 directory.
3. Make sure that the directory and file permissions allow anyone to view the files.

Description

Recall the scenario: You are in charge of designing a website for Dan's Disco Discs. As the name implies, they specialize in selling disco CDs. The company wants a home page, an inventory page, a disco information page, and a contact page.

In this assignment, you will be adding a form to the contact page, using JavaScript to validate the data entered in the form, and adding JavaScript to the inventory page.

Requirements

• Edit your web pages with a simple text editor (no Word or any other fancy tools allowed).
• Use XHTML 1.0 Transitional. Your pages must pass validation.
• Your CSS must also pass validation.

Contact Page

• Create a CGI form that asks the user for their name, email, and comments.
  • The name and email boxes should have a size of 30 pixels. ( Update - MCW 10/29 @ 11:15am - There should be 30 characters visible - see http://www.w3schools.com/TAGS/att_input_size.asp)
  • The comments box should have a size of 3 rows and 30 columns.
• There should be a Submit button and a Clear button that clears the form.
• JavaScript should be used to validate the form once the user presses the Submit button.
  • The JavaScript should be put into an external file.
  • The name and email fields are not allowed to be left blank.
  • The email address must contain an @ character.
  • If the form does not validate, a JavaScript alert should pop-up indicating the problem.
• If the form validates, a JavaScript alert should pop-up displaying all of the information that the user entered in the form.
• Use CSS to style the form (using your external CSS file).
  • The text labels for the form elements should be on the left side of the content area and right-aligned.
    • Create a class to contain the labels that floats to the left, has a width of 100 pixels, aligns text to the right, and has 10 pixels of padding on the right.
    • In the HTML, use this class in the label element. Also, only enclose the label text in the label element instead of both the text and the input element.
  • There should be extra space around each form element.
    • Create a class for the form elements that has 40 pixels of height.
    • In the HTML, create a div element using this class that encloses both the label and the input element. There should be a separate div element for each line (name, email, and comments).
  • There should be extra space surrounding the buttons.
    • Create a class with all margins set to 10 pixels except the top margin which should be 40 pixels.
    • In the HTML, use this class in the input element for the buttons.
• The contact page should look something like this (your colors and logo should be different):

Inventory Page

• Add an onmouseover event to the CD titles. Whenever a user hovers over the title, a JavaScript alert message should pop up to remind the user to click the Contact link to contact the store for pricing.
• Add the date the page was last modified to the bottom of the page (under the "Website designed ..." line) using JavaScript (hint: document.lastModified).

Submission

Go to the Project 5 Submission page, and enter your name and the URL of your webpage.

• Make sure that the URL works and has been validated before you submit it.
• Only submit your URL once!