CS2413: Web Site Development
WSD9: JavaJam Coffee House - Forms

Objective:

• Create forms with appropriate elements
• Include the following attributes: name, id, tabindex, accesskey, method and action
• Create the user interface for a shopping cart
• Format forms using CSS

Point Value:

• Full Credit: 30 Points
• Late Credit: 27 Points
• Extra Credit: Full 10 Points, Late: 9 Points (See below)

Common Requirements for All Web Pages

Assignments failing to meet any of these items will be eligible for a maximum of 50% credit.
See additional Mandatory Requirements below.

1. Code must be properly indented. Page 41 gives good example.
2. The web pages must display correctly in BOTH Firefox and Internet Explorer.
3. The links between the existing pages with the JavaJam Coffee House website are broken.
4. On p. 113, the last paragraph for this assignment invites students to experiment with modifying the CSS file. Feel free to experiment. However, for grading purposes, student submissions MUST match the style specification in the assignment instructions. No other colors or designs are acceptable.
5. All images must contain a height, width, and alt property.
6. All images must be in a separate folder named images located inside of the javajamcss folder.
7. All form elements MUST have a name and an id.
8. AccessKeys and TabIndex must be included on all form elements.
   • Not required on hidden fields.

Specifics

Text Pages: Ch 9 pp. 390-392, Ch 12 pp. 489-491
Downloads: Chapter 12 - ECommerce Files (images for the Gear Form in Chapter 12)
Reference: None
Errata Sheet: Chapter Updates for Chapters 9 and 12 (In new window, click on Chapter 9 or Chapter 12 and then scroll to the bottom of center column)

This will be a two part assignment plus an extra credit assignment. The first part will include the assignment as listed on pp. 390-392 in Chapter 9. The second part is the assignment listed on pp. 489-491 in Chapter 12. The Extra credit is from Chapter 9 on pp. 388-389

Step 1 - Jobs Form

• Complete the Web Site Case Study entitled Java Jam Coffee House which on p. 390-392.
• Remember all form elements must have a name and an id.
• Even though the assignment does not specify add TabIndex and AccessKeys to all four form elements (two textboxes, textarea, and button)
• As is true for all web pages in the site, tech jobs page must have navigation buttons not text links.
• Test links to all of the web pages within the JavaJam web site to make sure all pages are accessible from each other.

Step 2 - Gear Form        

• Complete the Web Site Case Study entitled JavaJam Coffee House which on p. 489-492 .
• Again, remember all form elements must have a name and an id.
• TabIndex and AccessKeys must be included for all form elements: Two "Add to Cart" buttons.
• In step i. on p 491, notice that the input elements have a type="hidden". This means that the information is passed to the server, but is not displayed on the web page. The user never sees these. For this reason, there is no need to add tabindex or accesskey attributes.
• Modify the navigation links by making them into buttons.
• Add a link to Gear on the Home, Menu, Music, and Jobs web pages.

Uploading

• Using FileZilla upload the entire javajamcss folder (which included the images folder) to your Apollo web site.
• Access your web pages using the following URL http://apollo.occc.edu/user###/javajamcss(user#### will be replaced by the login provided by your instructor.)
• The JavaJam Coffee House homepage, with the updated formatting, must appear without any further navigation or clicking.

Extra Credit:

Music Survey: pp. 388-389 #11
Since the text has a limited exposure to form elements, an extra credit assignment is being offered. It must be completed by the due dates for the WSD9 assignment. Only students who have completed WSD9 may submit this work for extra credit. It must be submitted at the same time and in the same DropBox submission as the required assignment. If it is submitted separately, it will not be graded. This assignment is not meant to replace the required assignment. This is an excellent exercise in tables and forms which will help you with future web work as well as preparing for the inevitable test.

• Create a new folder named xcredit - short for Extra Credit
• The name of the web page is to be musicSurvey.htm
• Note that the form will be created within a table.
• The design of the form must be professional looking - not just items randomly places in a web page.
• A CSS page named music.css may be added but is not required. This can be a plain (but nicely arranged - table) page. It does not have to look exactly like the example in the text.
• All elements must have names, id's, AccessKeys, TabIndex, and where appropriate labels.
• Feel free to enhance with the fieldset and legend tags.
• The method for the form must be get. (Post will not work properly)
• The action is http://www28.brinkster.com/cs2413/formHandler.asp
• The response will merely display the values entered by the user. It is very basic and boring.

Uploading

• Using FileZilla upload the entire xcredit folder (which included the images folder) to your Apollo web site
• Access your web pages using the following URL http://apollo.occc.edu/user###/xcredit/musicSurvey.htm (user#### will be replaced by the login provided by your instructor.)
• The Music Survey page must appear without any further navigation or clicking.

Assignment Submission:

• Use the DropBox in this weeks folder.
• Enter your name and the assignment name in the Title area.
• In the Message area, use the HTML editor to create a link to your web site. (example: apollo.occc.edu/####/javajamcss where #### will be replaced by your login.)
• Extra Credit: Create a second link to the musicSurvey.htm web page. (example: apollo.occc.edu/####/xcredit/musicSurvey.htm where #### will be replaced by your login.) The extra credit MUST be submitted at the same time as the required homework. Only the last submission will be graded. If there is an error and the homework is submitted without the extracredit or vice versa, resubmit correctly. Again, only the last submission will be graded.
• The web page must open in a new window.
• Need help creating the link? Maybe Submitting URL's can help.

Mandatory Requirements

Failure to adhere to and/or include the following items will prevent the assignment from being graded. (Note: If time permits, the assignment can be resubmitted during the late/resubmit period, but there will be a 10% penalty.)

1. All pages must include Transitional DTD information at the top of the XHTML code.
   
2. Web pages must be correctly posted to the Apollo server
   • The entire javajamcss folder must be uploaded to the server
   • The homepage for the Java Jam website must be index.html
3. All web pages must validate (both XHTML and CSS) without errors using the Web Developer Tool Bar in FireFox
4. The URL in ANGEL's DropBox must be a working link and it must open the assignment in a new browser window.
• The homepage for JavaJam Coffee house must display when the link (http://apollo.occc.edu/####/javajamcss) in the DropBox is clicked. (no additional clicks to locate the homepage Note: #### is replaced by the apollo login provided by your professor)