Assignment #9

RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4

50 Points
Due TUE NOV 17 at start of class

Before you attempt this assignment, you are required to have read and understood the information contained within the Assignment #0 document, which is available from the class web site. To avoid unnecessary point loss, make sure that you turn in all of the required printouts and staple them together in the order indicated within this document.

Part 1: "Lesson 11: Building Web Forms"

Follow the steps below to learn about building "forms" using various form elements (from lesson 11 of our textbook) and to produce the correct printouts. Be careful to read all of the steps below before you begin your work.

Read pages 259 - 291 and perform all lesson steps on those pages. This will give you a good background on the issues related to creating form based Web pages using Dreamweaver.
After completing the entire lesson, you are ready to continue on to part 2 to make some additional modifications to your lesson 11 form page and to create some printouts.

Part 2: "More Form Building"

In this part, you will continue working on your lesson 11 form page from part 1 in order to create your proper printouts. To do so, you will follow the steps below.

First, copy the existing "organicform.html" file from lesson 11, calling the copy "organicform2.html". Keep it in the same working root folder that you used for your original lesson 11 files. Then open up that new "organicform2" page to work on it in Dreamweaver.
Insert your name into the beginning of this form page's title.
To the existing list of volunteer choices, add the item "Product Testing" between the existing items "Planting Season" and "Anything". Adjust the list to display all 4 items at once in the browser (so no scrolling is necessary.)
Just below the existing form's "City/State/Zip" text field, insert a new "Email" text field with an appropriate label and id.
Delete the form's "Validate" button (and with it, both behaviors associated with it.)
Using the existing "Submit" button (instead of the old "Validate" button), create the following form validation behavior:
The "Name" field should be a required field, but can have anything in it.
The "Email" field should be a required field and must have an email address entered into it.
The "Comments" field should be a required field, but can have anything in it.

If the information is not entered into these any of these 3 form elements as required, an appropriate error message should be displayed.
Somehow, make it clear to the person filling out this form which fields are required and, where appropriate, make it clear what you expect them to enter.
Save and test your form page changes to make sure your new elements are functioning correctly and that the validation process is working as expected (when good data is submitted as well as when bad data is submitted). If so, you are ready to turn in your work.
Your work can be submitted in either one of these two ways. Whichever way you decide to use for this part you must also use this same approach for the next part of the assignment too.

Choice one is to upload the form page and all dependent files (images, style sheets, and any other files that the page needs to look and function correctly online) to your RCC server account. Be sure to test your page in the browser using your own server account. See the previous assignment for all uploading and account information. To let your instructor know that your work has been uploaded and is ready for grading you will send him an email message, but that message should not be sent yet -- wait until you finish the next assignment part and then follow the directions for sending that email after you've completed the whole assignment.

Choice two is to create the 2 paper-based printouts as described below:

Printout #1: Display your form page in a browser of your choice. Fill in the form with your own full name, RCC's address information (obtain it from their Web site if necessary), your own actual email address, leave the checkboxes empty, choose the "member" radio button, indicate you'll volunteer to be a product tester, and fill in the "comments" area with a funny joke to keep me entertained when I grade (not to long, one that will fit easily). Then use the browser's "File" menu to print the resultant form page. Turn this in as printout #1.

Printout #2: Return to Dreamweaver and use its "File" menu to print the code for this form page. After the form page prints, circle your name in the page's title area. Then also circle all the code on the page that has to do with the form validation. Note it will not all be in one place (check the "head" section of the page as well as the form's submit button code area. Turn in this code printout as printout #2.

Part 3: "Build a Collection Feedback Form"

You may recall building a table of your own collection items in a previous assignment. For this part, assume that your table of collection items is part of your live online site and you will build a form page that would be appropriate for someone to fill out if they had seen your collection items online and wanted to give you some feedback about them. This form should be specific to the type of collection items you have. Although it is somewhat open ended, here are some guidelines:

At the top of the page, create an appropriate heading that includes your full name and then create an appropriate paragraph (several lines of text) to introduce the purpose of the form to customers. Also enter your name into the document's title. Save your feedback page using the filename "myproductform.html".
Insert an product related image of appropriate size (not too big) to sit next to the paragraph. You can use the same image you used in the original collection table page (or a better one).
The form must contain an area for the customer to give some personal contact info -- a name text field and an email address text field are required. Anything else is optional.
Set up a list/menu filled with the names of your 10 collection items so the customer can indicate which one(s) their feedback pertains to. For example, if your collection contains 10 movies, the form should allow the user to select which movie (or movies) the person is giving feedback about. This selection would be from a list of your actual 10 movies, not a text box for them to type it in.
Ask the customer to rate your product(s) on a scale of 1 to 10. Their rating should be typed into a text box.
Come up with some appropriate product related feedback that makes appropriate use of 2 radio buttons.
Come up with some appropriate product related feedback that makes appropriate use of at least one check box.
There should be a multi-line text area for general feedback for the customer to rant and/or rave (type) into.
Optionally, you may add other form elements that you feel make your form more realistic and suitable for your particular type of products.
Add submit and reset buttons to the bottom of the form. The submit button should say "Send" on it and the reset button should say "Clear" on it. They should work in the browser as expected.
Set up validation to occur when the form is submitted as follows. Validate that the customer is actually entering something into the name field, entering something into the email address field that resembles an email address, entering a product rating between 1 and 10, and entering something into the feedback text area. Make sure that your form fields have been given appropriate names so that the error messages that display in the browser for invalid data are clear to the customer. For example, names like text1 or text2, etc. will yield confusing error messages. Somehow, make it clear to the customer which fields are required and, where appropriate, make it clear what you expect them to enter.
Make an attempt to improve upon the default appearance of the form page and form elements through the use of a style sheet. You may not use the same style sheet that was used in lesson 11, but you can use it as a starting point from which to make appropriate modifications. For example, try to align your form fields so that they look better than the "Name", "Address", and "City/State/Zip" fields did on the part 1 and 2 form. The color scheme you use should resemble the one used on your original collection table. Float your product-related image to the left or right so that multiple lines of the paragraph text will sit to the side of the image. Give the image a side margin to keep the text from getting too close to the image.
As described in the assignment part above, your work can be turned in using either of two different ways -- paper or online. But you must choose the same turn in method here as you did before. Here are the details on each choice:
1. Choice one is to upload the "myproductform.html" form page and all dependent files (images, style sheets, and any other files that the page needs to look and function correctly online) to your RCC server account. Be sure to test your page in the browser using your own server account. See the previous assignment for all uploading and account information.
  
  To let your instructor know that you work has been uploaded and is ready for grading you must send him an email message as follows:
  1. Check the course syllabus for the email address to send it to.
  2. Enter a subject line of "DWA9 Lastname Firstname" where you replace Last name First name with your own actual name (lastname goes before firstname.)
  3. In the email message main area, identify yourself again, say "hi", and then include 2 clickable links on 2 separate lines to the 2 form pages on the RCC server that you uploaded to complete this assignment. The part 2 link should be above the part 3 link. Note that the URLs (links) you send me should end with the correct filenames "organicform2.html" and "myproductform.html". They would begin with http://209.129.8.3/~smcleod/dw.
    
    Be sure to test your pages in the browser using the server account and then just copy and paste the URL from your browser's address area directly into the email rather than trying to typing it yourself -- sending me a link that doesn't work is like turning in a blank printout and will earn you points accordingly. So you might just send the email to yourself first to make sure the links work in your own email before forwarding it on to your instructor.
  4. When the email message is complete, send it. The time stamp on your email will mark the assignment's turn in time (unless you upload another version of your files afterward -- then the date/time stamp of the files themselves on the server will be used instead of the email -- but don't do that because I may grade it before you upload your new version. Send the email after you are done making changes.)
  5. Expect that your instructor will acknowledge receipt of your email (and that your 2 links are working) within 24 hours and will send you your assignment score (out of 45 points) before the next class meeting. Remember that sending your instructor a link that does not work will cost you points because your follow-up email with the correct link(s) will be considered late based on when it was sent (not when the original was sent.)
2. Choice two is to turn in paper based printouts. If you created printouts 1 and 2 for paper-based turn in for part 2 of this assignment, then create printouts 3 and 4 as follows:
  
  Printout #3: Display your form page in a browser of your choice. Fill in the form completely as if you are a satisfied customer giving positive feedback (use your own actual email address). Then use the browser's "File" menu to print the resultant form page. Turn this in as printout #3.
  
  Printout #4: Return to Dreamweaver and use its "File" menu to print the code for this form page. After the form page prints, circle your name in the page's heading and title areas. Then also circle the code on the page that has to do with the list/menu of 10 products. Lastly circle the validation code that appears on the form's submit button (not the validation code in the "head" section.) Turn in this code printout as printout #4.
That concludes your work on this assignment.

What To Turn In (if you Are Turning In printouts)

If you are turning in your work electronically, then ignore this section. If you are turning in paper printouts, then modify your cover sheet document from assignment 8 (or create a new one) as follows. Use either Dreamweaver or a word processor to create a document that contains the following information: Your full name, the class "CIS/CAT 76B Dreamweaver", your instructor "Scott McLeod", and the assignment number "Assignment #9", each on its own line in a large font, centered across the page (make it look decent). Then turn in the following items, stapled together in this order:

The cover sheet (as indicated above)
Printout #1, your modified form page, organicform2.html, printed from within the browser after filling it out completely.
Printout #2, a code printout of your same form page with appropriate code areas marked.
Printout #3, your product feedback form page, myproductform.html, printed from within the browser after filling it out completely.
Printout #4, a code printout of your same form page with appropriate code areas marked.

Back-Up Your Work

Don't forget that it is important to back-up all of your work from this assignment. Some of these files may end up being needed on a later assignment, so copy them all onto a second disk, just in case. The easiest thing to do is just copy the local root folders for the two sites you worked on in this assignment.