CS 312 - Internet Concepts
Fall 2011: Tues/Thurs 3-4:15pm, Dragas 1117

Print - Admin

Announcements

Staff

Schedule

Syllabus

Useful Links

Project 2: Forms and JavaScript

Assigned: Thursday, October 20, 2011
Due: Thursday, November 3, 2011 before midnight

The goal of this assignment is to continue working towards the final project -- a set of webpages that allow a user to manage and search a personal media collection (CDs, MP3s, DVDs, video games, etc.).

Description

In this assignment, you will be adding a form to add.html that will allow the user to enter information about a new media item. (We'll actually add the information in a later project.) You'll use JavaScript to validate the contents of the form (ensure that the user has entered all required fields).

Requirements

Form

  • Create a form in the content section of add.html 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 an Add button and a Clear button that clears the form.
    • Note that the Add button should call JavaScript code for validation when clicked and not try to run a server-side CGI program.
  • You should specify that some fields are required (for instance, title).
  • Use CSS to style the form (edit the external CSS file that you created in Project 1).

An example is below:

JavaScript

  • JavaScript (placed in an external file) should be used to validate the data entered in the form once the user presses the Add 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).

An example is below:

Setting Up

Here are the steps to get started:

  1. Create a new directory under ~/public_html/cs312/ for this project
    • chmod 755 ~/public_html/cs312/new directory name
  2. Copy the files you created in Project 1 over to this new directory.
  3. Create an external JavaScript file to hold the functions needed for the form validation. Make sure to include the location of this file in add.html so that you can call the functions. (<script type="text/javascript" src="...)
  4. Make sure that the file permissions allow anyone to view the files.
    • chmod 644 ~/public_html/cs312/new directory name/*

Rules

  • Edit your HTML and CSS with a simple text editor (no Word or any other fancy tools allowed).
    • examples: emacs (on Unix machines), pico (on Unix machines), Notepad++ (on CS Windows 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.
  • All work must be your own. You are not permitted to copy stylings or layouts from other sources.

Submission

Go to the Project 2 Submission page, and enter your name and the URL of your website (should start with http://www.cs.odu.edu/~username/cs312/).

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