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/ECA 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.

Part 0 - Setting up (5%)

  1. Directory: You must create a folder in your public_html/IT350 folder called Lab02 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. Make sure files in Lab01 folder are not open in your editor! Note: You do not have to have Lab 01 completed in order to work on this lab!

Part 1 - Schedule Table (50%)

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.

Part 2 - Registration Form (95%)

Form: you must create a form for users to sign up for something. This form must be on a new page – registration.html. 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:
    • submit
    • reset
    • text
    • email (this field must be filled or the form does not submit )
    • 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 https://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.

Challenge Problem - Just a Bit More (100%)

  1. Add real email submission to your form! First, make a copy of your registration.html and name it registration2.html. (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 - How do I make a form? How do I process information from a form?". Use yform to make some small changes to make your form in registration2.html send e-mail to yourself with all the information submitted and a meaningful subject. Change it to send the e-mail to your instructor before submission. (NOTE – the USNA script for this works, but maybe imperfectly. Use 'yForm', not 'FormMail').
  2. Update your registration.html file containing the form to use the following:
    1. a <fieldset> element
    2. a <datalist> element and the "list" attribute for some input element
    3. a <date> or <time> element
    4. a <input> element of type "number" or "range"

General Requirements and Deliverables

  1. 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.
  2. Graphics: if you are using images, you should store them in the "images" directory on your public_html/IT350 folder, outside Lab02.
  3. Links:
    • Lab02/index.html (the page you created last week, copied into Lab02) must have links to your schedule page and registration page
    • The schedule page and registration page must have a link back to index.html
    • On the main student page of your web site (IT350.html) you must add a link to Lab02/index.html. Do not remove the links to the previous labs.
    • 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.
  4. 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.
  5. All labs (that are web pages) should conform to basic standards and propriety. See the Lab Guidance for specific guidance.
  6. Remember that you may not use editors that build web pages for you, such as Word, FrontPage, DreamWeaver, etc. for any assignment in this course.
  7. Ensure your HTML files are valid HTML5.
  8. All of your files for Lab02 should be in a folder called ~/public_html/IT350/Lab02 on the Web server.
  9. Always put a README.txt file in the lab directory, at a minimum this file should have:
    • *Lab number
    • *Your name and alpha
    • *Collaborations in completing this lab (people, online sources used outside the course website)
    • *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
    • *How long this lab took you
    • Any suggestions to improve the lab
    • Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
    Note that * items are required for every lab submitted.
  10. Your instructor will assume that your web pages are viewable at:
  11. All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
  12. Submit all files to the online submissions system (submit.moboard.com) on or before the due date, this is Lab02. Use the command line submit script and capture the entire contents of the directory, the easiest way to do this would be to cut and paste the following while logged onto the server or a workstation: 

    cd ~/public_html/IT350
~/bin/submit -c=IT350 -p=Lab02 Lab02
    This assumes that the submit script is located in ~/bin/ and is executable.

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

\\midn.cs.usna.edu\mXXXXXX\public_html\IT350

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

images/(images folder might optionally change for this lab)

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)

                           registration.html                    (page containing an HTML5 form)