CS 312 - Internet Concepts
Fall 2010: Tues/Thurs 9:30-10:45am, Spong 108

Print - Admin





Useful Links

Project 5 - CGI Forms and JavaScript

Assigned: Tuesday, November 9, 2010
Due: Tuesday, November 23, 2010 before midnight
Group Assignment - You are permitted to work with your project group partner.

The goal of this assignment is to start working towards the final project (Project 7), a webpage that provides searchable access to a personal media collection (CDs, MP3s, DVDs, etc.).

Setting Up

  1. Create a new directory under ~/public_html/cs312/ for this project
    • chmod 755 ~/public_html/cs312/new directory name
  2. Create three files in the new directory, an HTML file, a CSS file, and a JavaScript file.
  3. Make sure that the directory and file permissions allow anyone to view the files.


The next few projects will build upon each other to produce a webpage that provides searchable access to a personal media collection. The type of media (CDs, MP3s, DVDs) is up to you and your project partner. The website should be tailored to the type of media you will be storing, so you should make that decision now.

In this assignment, you will:

  • create the basic layout and stylings for your webpage using CSS
  • create a CGI form that allows the user to enter information about the media they want to store (you'll implement actually storing the information in Project 6)
  • create a JavaScript pop-up that ensures the user entered all of the required information and displays what they've entered as verification

CSS Layout

Be creative with your CSS layout and stylings. Feel free to use other sites as inspiration. If you do so, you must give credit to those websites with a link. (For example, "Design inspired by http://www.example.com and http://www.example.edu")

CGI Form

  • Create a CGI form that asks the user for information about their media. Here are some examples for different media types:
    • CD: artist, title, year released, record label, number of tracks
    • DVD: title, year released, director, genre, lead actor/actress
  • Your form should ask the user for enough information so that the database you will build will be easily searchable. (Think about what types of things a user may want to search for.)
  • There should be a Submit button and a Clear button that clears the form.
  • You should specify that some fields are required (for instance, title).
  • Use CSS to style the form (using your external CSS file).


  • JavaScript (placed in an external file) should be used to validate the data entered in the CGI form once the user presses the Submit button.
    • For those fields that are required, check to make sure that they have not been left blank.
    • If some required fields are left blank, a JavaScript alert should pop-up indicating the problem.
    • If no required fields are left blank, a JavaScript alert should pop-up displaying all of the information that the user entered in the form.
  • Add the date the page was last modified to the bottom of the page using JavaScript (hint: document.lastModified).


  • Edit your HTML page with a simple text editor (no Word or any other fancy tools allowed).
    • examples: Notepad++ (on CS Windows machines), pico (on Unix machines), emacs (on Unix machines)
  • Remember to use tags that are acceptable for XHTML (all lowercase and include closing tags when required).
  • For full credit, your code must pass XHTML 1.0 Transitional validation.


Go to the Project 5 Submission page, and enter the name of each group member and the URL of your Project 5 page (must start with http://www.cs.odu.edu/).

  • Only submit one URL per group.
  • Make sure that the URL works before you submit it.
  • Pressing the submit button will add a link to your page to the Student Projects page along with a timestamp of your submission. Note that you will not be directed to the list of pages, but to a page that says your submission was successful.
  • Only submit your URL once!