Lab 02 - The Schedule of Things to Come

Introduction

This week we introduced XHTML tables and demonstrated how they can be used to present information.  We've also talked about web forms and how they can be used to send information to a web server.

 

For this week’s lab, you are going to do two things:

 

  1. Create a table to hold the schedule for an event your unit has (flight schedule, PT schedule, duty schedule, unit sponsored triathlon etc.). The schedule will provide the timing and duration of each module or event. You are limited only by your creativity! (Well, that, and the requirements below).
  2. Create a sign-up form of some kind (e.g. leave requests, change of address/phone number, unit dining-in seating reservation, working party volunteers, correspondence course request, MWR team registration, spouse club cook-off recipe submissions, etc.)

This lab will be building directly onto the page you created for lab 1.   We highly recommend carefully reading this entire lab before you start.

Requirements

  1. Directory: You must create a folder on your WEB drive called "Lab02" (without the quotes) and store your work in that directory. You should copy your lab from week 1 into this directory and make changes to it there!  See the figure at the end of this lab regarding where files should be.
  2. Table: you must create a new page, Lab02/schedule.html, which contains an XHTML 1.1 table that meets the following criteria:

·        The table has a caption, summary, border, header, and footer

·        The table provides some useful information regarding a schedule of events for your themed web site

·        The schedule should encompass the events for at least two days/time slots of events and three events on each day/time slot. Be creative!

·        The table must use spanning techniques to have one data element span two or more rows and another data element span two or more columns.

·        At least one row or column has the horizontal or vertical alignment set different from the default.

  1. Form: you must create a form for users to sign up for something. This form may be on any page – index.html, schedule.html, or a new page you create.  Pick what works best for your site. Specifics:

·        Your form collects necessary information from the user such as name, rank, e-mail address, leave address, leave phone number, new address, new phone number, seating preferences (table number), special dietary requests, working party, course title, course number, sport, team name, ingredients, directions, etc as appropriate for your topic.

·        Your form should contain at least one of all of the following input types:

·        hidden

·        submit

·        reset

·        text

·        password (TIP: either assume the user has an existing account or ask them to create a password to be used for possible changes to their request later)

·        checkbox

·        radio button

·        text area

·        select.

·        Use /Users/cs/lmcdowel/courses/it350/tools/FormChecker/submit.cgi  as the action for your form.  (Later in the course you will learn how to write this)  Should you use GET or POST – pick the one that is appropriate for your form.  Test that each of the inputs correctly transmits its information by viewing the output of submitting your form.

 

  1. Graphics: you may store your images either in your “Lab02” directory or in the “images” directory that already exists in the top level directory of your web drive. 

 

  1. Links:

·        Lab02/index.html (the page you created last week, copied into Lab02) must have a link to your schedule page

·        The schedule page has a link back to Lab02/index.html

·        The main student page of your web site (default.htm) must have a link to Lab02/schedule.html

·        There must be some way to follow links to get from your index.html page to the page with your form

·        All links must work.

Your web page must follow the guidelines given in the course’s Lab Guidance page, including the limitations on acceptable editors.

Extra Credit

For a nominal amount of extra credit do the following:

1.                                                      Tables are often used to help with web page layout.  Modify your form to make appropriate use of a table to nicely layout your form input elements. (You may want to make a backup copy of your valid form before you try this).

2.                                                      Add real email submission to your form! First, make a copy of the page with your form in it. (We need to see the original version of your form, that doesn’t send email, for grading).  Then, read about FormMail/yForm.  Make some small changes to make your form send e-mail to yourself.  Add a link to your new form – make it clear which form sends email. (NOTE – the USNA script for this works, but imperfectly.  Use ‘yForm’).

Deliverables

  1. Follow filename conventions very carefully!  Also, review the Lab Guidance page for general guidelines.
  2. Your main web page (inside Lab02) should be called "index.html" (without the quotes).
  3. Your default.htm page is updated to point to Lab02.
  4. All of your web pages should be valid XHTML 1.1 as verified by the validator.
  5. Your schedule page (and separate form page, if any) should contain all of the elements described in the requirements section above.
  6. When you turn in this lab, the index.html should be stored in a folder called "Lab02" (without the quotes) on you WEB drive. Your instructor will assume that your deliverables are viewable at http://www.mXXXXXX.it350.cs.usna.edu/Lab02/index.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
  7. Turn in the following hardcopy at the beginning of class when due, stapled together in the following order (coversheet on top):

a.)    A completed assignment coversheet.  Your comments will help us improve the course.

b.)    The first page of the output of the W3C validator, as run on the final version of your Lab02/schedule.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate.

c.)    First page of the validator output for the file that contains your XHTML form (if not in schedule.xhtml).

d.)    A printout of the source to your Lab02/schedule.html file (not the rendered page that you normally see with Internet Explorer).

e.)    A printout of the source to the file that contains your XHTML form (if not in schedule.html).

 

When finished, the structure of your web site should look like this: (items in blue shall undergo creation/modification during this lab)

            www.m0XXXXX.it350.cs.usna.edu/

                        default.htm                                (main page for the course; has links to each week’s lab)

Lab01/

                                    index.html

                        Lab02/

                                    index.html                     (the main page of your unit that you created last week)

                                    schedule.html                (the file with a table containing some schedule info)

                                    form.html                      (a file containing an XHTML form.  This page is optional – you can include the form in a different page if you wish)