CS 101 Assignment 2

CS 101 Web Construction, Winter 2008, Instructor: Jeffrey Horn ASSIGNMENTS

Assignment 4 "FORMS and Server-side Scripts"

Handed out: Monday, March 17, 2008
Due: Monday, March 24, 2008
Goals:
- Design and implement a web form, as an interface to an existing server-based script (program).
- Link to a remote, pre-built CSS file.
- Learn to use the W3 Validator to develop valid HTML 4.01 code!

Details:

Create a web page (.html file) with the following properties.
To run the Graffiti script, your web page will need to send 5 variables:
1. name: A text string describing the poster's name.
2. color: Describes the text color for the message. MUST be a hex code, preceded
  by a pound sign, such as #00aAFf.
3. bgcolor: Describes the color for the background. Uses the same validation as color. wall: Should be 11,4, or 7, for everything to be nice. It picks which wall to write on. There are infinite walls, each numerically addressed.
4. message: A text string containing the message to write on the wall.
  - (For this variable, all HTML entities are encoded (< replaced with <, for example). After that, all line breaks are replaced with <br>.)
Note that names are case-sensitive.

TASK NUMBER	TASK DESCRIPTION	POINT VALUE

1	Web page contains a valid HTML form that . Use the <form> element properly! Use (some) form elements inside of <form>: (e.g., <input>, <button>, <textarea>, <label>, <select> )	10
2	Allow posting to the Graffiti Wall Server by first collecting data from user: User's name (5 pt.s) User's message (5 pt.s)	10
3	Post to the Graffiti Wall Server by sending the collected data to the server: Implement a button for "submit" functionality. (Use the <button> element.) *(5 pts.)* Make sure that clicking on the submit button sends the proper data (which means correct names for all data listed above). *(5 pts.)* The form's action must be: action="http://www.sarten-x.com/cgi-bin/graffiti.pl" *(5 pts.)* It is suggested that you verify that all of this works by testing to see if the server script returns an appropriately updated wall (i.e., with new message and name posted).	15
4	Use the CSS at http://myweb.nmu.edu/~sraiford/CS101/forms.css (use the <link> element from A3part2.)	10
5	Validate your web page at http://validator.w3.org (suggest you upload your file from your hard drive, not from the server, since you are likely to get errors and therefore need to edit your file)	20
6	Document types: insert the following doctype definition (HTML 4.01 strict) at the top of your .html file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	5
7	Creativity: Creative use of form elements such as <fieldset>, <label>, <select>, <input>	10
8	Good style (indentation and some "main" comments at the top, including name, etc.) in your source file.	10
9	Put your assignment on the web (find a server) and send me the URL!	10
	TOTAL	100 pt.s

Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
Example