Project #6CMSC198N
Due Tuesday May 1 6:00 pmSpring 2007

Objective

To practice forms, data validation, and animation.

Grading

• (30%) Service Form Implementation
• (10%) Service Form Generates Expected Server Confirmation
• (10%) Search Form Implementation
• (40%) JavaScript Support
• (10%) CSS Style

Overview

For this project you will implement a web page with a form that allows user to apply for cable service. The data provided in the form needs to be validated before it is sent to the server for processing. You do not need to provide pseudocode for this project, but you are encourage to develop it for your own benefit. The following files (project distribution) are associated with this project: Proj6.zip.

Specifications

You must define a form with the text fields and buttons you can see in the "Sample Run". The "Payment Method" is a combo box with two options: "Credit Card" and "Bill me". A second form will be used to define a search option (similar to one of the examples discussed in class). The search option will use Google as the search engine. The following provides additional information about this project:

• Your program will display the current time at the top of the form (as illustrated in the "Sample Run" below)
• You should implement an animation that rotates between the four UMD images provided with the project distribution. The images should be displayed at the top of the page (as illustrated in the "Sample Run").
• Validation Requirements
  1. Your program must verify that a firstname, lastname, address, and e-mail have been provided. You do not have to verify the format of the data (e.g., e-mail format). By the way, you can obtain the characters of a string by using the charAt() function, where the argument is the index position of the character in the string.
  2. Your program must verify that at least one service has been selected. If no service has been selected your program must generate the message "No Service Selected".
  3. Your program must verify that at least one plan has been selected. If no plan has been selected your program must generate the message "No Plan Selected".
  4. Your program must have as default payment "Bill me".
  5. Your program must verify that a valid credit card number has been provided. A valid credit card number consists of four sets of digits, each with exactly four digits. In addition, your form must only allow four digits for each set of digits.If an invalid number has been provided your program must generate the message "Invalid Credit Card Number"
  6. Your program must verify that a valid expiration date has been provided. We consider valid dates those with month values between 1 and 12 and year values greater than or equal to 2007. If an invalid date has been provided your program must generate the message "Invalid Expiration Date"
  7. If after evaluating the data any errors are found, your program will not submit the form and will display a single message (using alert) where the fields with invalid data are identified. If the data is correct the form will be submitted. The following image (InvalidData) illustrates how the message will look like if we have invalid values for all of our fields.
• Search Form Requirement - It should define a local search (based on www.umd.edu) and a web search.
• Functions Requirement
  1. It is up to you to define any functions you need, however, you must have at least two functions. All functions should be in the file named cable.js
  2. You should avoid duplicating code. That is, if you have the same code segment in many functions, you should create a function for the common code.
• Style Requirement
  1. The service request form must have a gradient background based on the provided gradientImg.jpg file.
  2. The style and appearance of your page should be very close to what you see in the "Sample Run".
• Server Processing
  1. The form data will be sent to the cableProcessing.php script found at the following address:
     http://www.turtle.cs.umd.edu/classes/cmsc198NSpr07/cableProcessing.php
  2. You will use get as the submission method.
  3. The names to use for form fields are: firstname, lastname, address, email, cable, internet, phone, plan, payment, firstFourDigits, secondFourDigits, thirdFourDigits, fourthFourDigits, month, year, and comments
  4. The values associated with cable, internet and phone fields are cable, internet, and phone, respectively.
  5. The values associated with plan are oneYearPlan, twoYearPlan, otherPlan.
  6. The values associated with payment are creditCard and billMe.
  7. The link Sample Server Script Execution illustrates an example of submitting data to the script. From this example you should derive the names to use for the form entries.

Additional Requirements

• You must name your html file cable.html and you css file cable.css
• You must use the fieldset and label tags for your form.
• You must use good identation.
• After validating your html include the W3C XHTML 1.0 logo
• You must use meaningful variable names.
• You can use global variables but only for animations (time and image animation).
• Your JavaScript code must validate according to http://www.javascriptlint.com/online_lint.php
• Your html must validate according to http://validator.w3.org/#validate-by-upload
• Your css must validate according to http://jigsaw.w3.org/css-validator/

Sample Run

The service request video illustrates the functionality associated with the service request form. Also, you can find a snapshot of the web page in WebPage. For better results use QuickTime as your player.

Submission

Submit your program using the submit server available at: https://submit.cs.umd.edu:8443/. After submitting your project make sure you download the submitted file and verify that what you have submitted is correct. Please do not e-mail your project.

Academic Integrity

Please make sure you read the academic integrity section of the syllabus so you understand what is permissible in our programming projects. We want to remind you that we check your project against other students' projects and any case of academic dishonesty will be referred to the University's Office of Judicial Programs.