CS 312 - Internet Concepts
Fall 2009: Tues/Thurs 11am-12:15pm, MGB 0129

Print - Admin



  • Dr. Michele Weigle
  • mweigle at cs.odu.edu
  • E&CS 3214
  • Office Hours: MW 2:30-4pm
  • Grader: Hui Shi
  • hshi at cs.odu.edu


Syllabus (pdf)

Useful Links

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.


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.


  • 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).


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!