CS 437/637 Database-Backed Web Sites and Web Services

Homework Assignment 4
(100 points)

Assigned Date:

Due Date:

Educational Goal:

Become familiar with client-side HTML, CSS, and JavaScript web application development.

Requirements:

• Create an HTML file signin.html, an external CSS file signin.css, and an external JavaScript file signin.js, for Spot's Pizza House. 
• (30 pts) The HTML document should display a Web page that allows the user to enter User Name and Password. Both User Name and Password are required.
  1. User Name (8 to 20 characters). User name can have uppercase and lowercase English letters (z-z, A-Z), digits 0 to 9, these special characters ! # $ % & ' * + - / = ? ^ _ ` { | }. (including character .). User name must start and end with a letter.
  2. Password (8 to 20 characters).
     Password Policy:
     1. Passwords must have a minimum length of eight (8) characters.
     2. Passwords must include at least 3 out of 4 of the following: contain at least 1 upper-case character; contain at least 1 lower-case character; contain at least 1 special character (& *, $); ctonain at least 1 numeric character.
     3. passwords cannot contain all or part of your user name (Two or more consecutive characters from the user name cannot be used in the password. For example, if a user name is "abcdefgh", the correspondent password cannot have the following substrings "ab", "bc", "cd", "abc", "cde", "defgh",  and so on so forth.).
   
• ( 10 pts) signin.html must be Valid XHTML 1.0 Strict. To show your readers that you have taken the care to create an interoperable Web page, you should display this icon on the web pages. Here is the HTML you could use to add this icon to your Web page: 
  <p>
  <a href="http://validator.w3.org/check/referer"><img
  src="http://www.w3.org/Icons/valid-xhtml10"
  alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
  Once the W3C icon is clicked, W3C MarkUp Validation Service should valid your pages successfully.  
• (60 pts)  Must use regular expression in signin.js to do client-side form data validation when it applies.  

  For invalid inputs, the error message should be printed right after each error input field. You must provide functional error message (that is, an error message indicates why it is wrong). For example, for a wrong username, error message could be printed as follows:

  User Name: Name should start and end with a letter.
   

• Turn in the paper copy and soft copy
  1. signin.html source code
  2. signin.css source code
  3. signin.js source code
  4. the resulting web pages of various test cases you have tried including valid inputs and invalid inputs.
  Paper copies should be bound firmly together in one pack. 5 points will be deducted for unbounded homework.
• Turn in the paper copies of your web pages including the CSS and HTML source code and screen snapshots of the resulting web page. Hard copies should be bound firmly together as one pack. 5 points will be deducted for unbounded homework.
• Submit the softcopy of the files through your Blackboard account. Zip all the files including the cover page into one ZIP file. Name the ZIP file as hwk4_lastname_firstname.
• An invalid homework URL (You must provide URL in your cover page) results in 10 points deduction. 
• No hard copies or soft copies results in 0 points.