HW#2 --- last modified March 02 2019 21:33:07..Due date: Oct 2
Files to be submitted: Purpose: To learn about server-side includes. To get experience with forms and client-side Javascript. To write a simple client side script to validate forms. Related Course Outcomes: The coding part of this assignment covers aspects of the learning outcome (1) [Write validating HTML documents employing CSS and containing standard HTML elements including forms, tables, and client-side scripts] not covered in HW1. Namely, it covers CSS, forms and client-side scripts. Some aspects of learning outcome (4) [Write server-side scripts that process HTML forms] are covered as Server Side Includes are used in this assignment to process QUERY_STRING data which is closely related to HTML form data. Validation of e-mail address is needed for this assignment and this directly corresponds to learning outcome (5) [Write client-side scripts which validate forms]. Specification: For this homework you are to develop a mock community web site. The page might have the overall structure:
[style controls]
Know-Your-Neighbors.com
^
N
Map Pane1 Map Pane2
<W| |E>
Map Pane3 Map Pane4
S
V
People On the Map
[select gadget] [Currently Selected Person's Image]
Photos on this site were either culled from public documents or by individuals
like yourself who emailed their image to know@neighbors.com . Fill out
the form below to be notified of upcoming community events.
Email:[ ] [Submit]
The page for this site should be viewable by looking at the index.php page in the neighbors.zip file you submit. The style controls should be some obvious controls to select the font size as well as the color and look of the page. These controls should select between different class selectors to be used to style the page. The map panes should be based on a map of your fictional community. Each pane should be an at most 20 kilobyte JPEG image. The map of your whole community is made of a 6x6 grid of panes of which you you see four panes at any times. Clicking on the north, south, east, west image links should alter the query string part of the URL to change which panes that are displayed. Initially, the user should start at the center of the map. For instance, the east key at some point might link to: ?c4 . So clicking on it will reload the page passing the coordinates in the query string of the top left pane so it can be used by some Javascript routine that actually specifies the srcs of the four images. (Note from a technical perspective this trick is actually slow but I wanted to illustrate manually passing form variables.) Each pane has associated with it a list of 20 people who live in the area given by that pane. So in total on the larger map one has associated 20 x 6 x 6 = 720 names. The names you should use can be found in the names.txt file in: people.zip. Each group of 20 names in order in this list corresponds to the names for one pane. The names that appear in the selection gadget should be only those names associated with the four panes currently being displayed. When a particular name is clicked on, a small image of that person should be displayed. These images can also be found in the peopl.zip archive. There are 720 distinct images of people. The last element of the page is the form where an email address is collected. The action of this form should be "mailto:know2@neighbors.com". You should have a javascript function for onSubmit which checks that the email address has at least a @ in it. If it doesn't ask the user to submit a good e-mail address. The final requirement for this project is on the download sizes. Besides the restriction on the image sizes, the index.php page is not allowed to be more than 4 kilobytes long. In a given page load, the total sizes of all stylesheets and scripts that you download can at most be 2 kilobytes. You are allowed to use SSI in this assignment but only to echo variable names. You should not use any other server side languages for this assignment. Point Breakdown
|