IT350: Web & Internet Programming

Lab 2: The Schedule of Things to Come

Introduction

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 W 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 here!  See the figure at the end of this lab regarding where files should be. Make sure you do not modify the files in Lab01 folder. Note: You do not have to have Lab 01 completed in order to work on this lab!
  2. Table: you must create a new page, Lab02/schedule.html, which contains an HTML5 table that meets the following criteria:
    • The table has a caption, header, footer, and body.
    • 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 (so the body of your table should have at least 2 rows and 3 columns). 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.
  3. 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 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 http://www.usna.edu/Users/cs/adina/teaching/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.
  4. Comments: As always, you should add a few reasonable comments in the source of your HTML files, explaining major sections or what is being accomplished.  
  5. Graphics: if you are using images, you may store them either in your “Lab02” directory or in an “images” directory on your web drive, outside Lab02. 
  6. 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
    • On the main student page of your web site (default.htm) you must add a link to Lab02/index.html  and a link to Lab02/schedule.html. Do not remove the links to the previous labs.
    • 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.
    • Since all these links are for pages within the same website, all the links need to be relative links, not absolute links.
    • All your pages must include the code from the starter page that displays the button link to the internal HTML5 validator, and the last modified date.

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. Add real email submission to your form! First, make a copy of the page with your form in it. (I need to see the original version of your form, that doesn’t send email, for grading).  Then, read about yform on the USNA internal docs about forms. Look for the subsection "Using Forms". Use yform to 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 maybe imperfectly.  Use ‘yForm’, not ‘FormMail’).

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 add 2 new links: a link to Lab02/index.html  and a link to Lab02/schedule.html. The links to the previous lab should still be there.
  4. All of your web pages should be valid HTML5 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 and other files for this lab should be stored in a folder called "Lab02" (without the quotes) on you W drive. Your instructor will assume that your deliverables are viewable at http://zee.academy.usna.edu/~mXXXXXX/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 completed assignment coversheet. Your comments will help us improve the course.

    • 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.

    • First page of the validator output for the file that contains your HTML5 form (if not in schedule.html).

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

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

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

        \\zee.academy.usna.edu\mXXXXXX\public_html

               default.html                             (main page with links to all labs)

Lab01/

                           index.html

                    Lab02/

                           index.html                   (the main page that you updated this week)

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

                           form.html                    (page containing an HTML5 form: optional, could exist in another page)