Description

5/5 - (8 votes)

This assignment has four main objectives:
1. To give you some practice adding forms to your web pages.
2. Basic processing of form data.
3. Add JavaScript functionality to your website with both native
JavaScript and jQuery.
4. Add video and audio to your website.
There are 4 tasks associated with this project.
Project Six
CIS 4004: Project Six Page 3 © Dr. Mark Llewellyn
• Begin this assignment with the completed version of Project
Five, including the external style sheet and the images folder
that you created for that project. Project Five culminated with
two webpages and one external style sheet with pages
constructed according to the wireframes shown on the next two
pages (desktop versions).
Project Six
CIS 4004: Project Six Page 4 © Dr. Mark Llewellyn
Project Six
wrapper (

)
header
navigation main
footer
address
id
(

)
image
Main (index) page
CIS 4004: Project Six Page 5 © Dr. Mark Llewellyn
Project Six
wrapper (

)
header
navigation
main
footer
address
id
(

)

Menu page
CIS 4004: Project Six Page 6 © Dr. Mark Llewellyn
• Recall our original wireframe for the overall website project
(shown below).
• In this project you will add the Entertainment Schedule and
Reservations page to the existing web site. The new
Reservations page will consist of a CSS styled form and utilize
the same theme as the existing pages. The Entertainment Page
will list upcoming events at the Bistro and include audio and
video snippets of the scheduled performers.
Project Six
Home Page
Our Menu Entertainment
Schedule Reservations
CIS 4004: Project Six Page 7 © Dr. Mark Llewellyn
• The Reservations page will not feature the large image that
appears on the Index page, but the bulk of the styling will be
the same as for the Index page, so you can use the Index page
as the starting point for your new Reservations page.
• The wire frame (desktop version) for the form on the
Reservations page is shown on the next page.
• The Reservations and Entertainment pages will also have tablet
and mobile phone versions using the same media queries you
created in Project Five. The mobile version of the Reservation
page has a slight modification to configure (more later).
Project Six
CIS 4004: Project Six Page 8 © Dr. Mark Llewellyn
Project Six
form
fieldset
submit button
label text box
label
label
label
label
text box
email box
telephone box
scrolling text box (textarea)
date box (calendar selector)
time box (time selector)
label
label
Reservations
form wire
frame
label numeric selector box
CIS 4004: Project Six Page 9 © Dr. Mark Llewellyn
Desktop version
CIS 4004: Project Six Page 10 © Dr. Mark Llewellyn
• Your first task for Project Six is to create the Reservations page
with the form as shown on the previous page.
• Notice in the wireframe the various types of input fields that the
form contains. In addition the following will apply to this form:
– Notice the fields in the form that are required (designated by asterisk in
label).
– The first input area (user first name) has autofocus set.
– The email field, phone number field, reservation date, time of arrival, and
number of guests are all special type input fields, be sure to use the correct
type for each.
– All labels are right justified.
– The submit button is styled. (Hint: use an attribute value selector.)
– The tablet version of the reservations page does not affect the form.
However, the mobile version is slightly different. These two versions are
shown on the next two slides.
Project Six: Task 1
CIS 4004: Project Six Page 11 © Dr. Mark Llewellyn
Tablet version
CIS 4004: Project Six Page 12 © Dr. Mark Llewellyn
Mobile phone version
In the mobile version
the form labels are
displayed above their
respective input
elements.
CIS 4004: Project Six Page 13 © Dr. Mark Llewellyn
• Your second task for Project Six is to link the form that you
created to the following PHP script which is residing on my
public page on one of the Computer Science department servers
(Monroe).
• While testing your form, you can simply set the action attribute
of the form to “#”, which will not activate any script.
• When your form is complete, change the action attribute of the
form to:
https://cs.ucf.edu/~markl/bistroformreport.php
• This PHP script is residing on one of the Computer Science
department servers and will simply read the information entered
into the form and return the values in a table as shown on the next
two slides. You do not need to do anything with the PHP script
nor the styling for this page.
Project Six: Task 2
CIS 4004: Project Six Page 14 © Dr. Mark Llewellyn
User enters
information into
the form.
CIS 4004: Project Six Page 15 © Dr. Mark Llewellyn
PHP script on server
returns the values that
the user entered
CIS 4004: Project Six Page 16 © Dr. Mark Llewellyn
• Your third task for Project Six is to create an external JavaScript
file that will contain the JavaScript and jQuery that will provide
the functionality described below.
1. Write a native JavaScript function (native JavaScript not jQuery) that is
invoked on each page in your website that displays the current date and time
below your name in the footer area of each page.
2. Write a JavaScript function using jQuery (not native JavaScript) to provide
an alternate color scheme for table cells when the user’s mouse hovers over a
table cell. The alternate color scheme should not be applied to any element
in the header row of a table. We only have tables in the menu page of our
website.
3. Write the native JavaScript function (not jQuery) that displays the number of
characters the user has left to type in the Comments box on the reservation
form.
• The functionality of each of these functions is shown on the
following pages (I’ll also demonstrate in class).
Project Six: Task 3
CIS 4004: Project Six Page 17 © Dr. Mark Llewellyn
• All functionality from the previous projects should carry
through into this project, meaning that the media queries should
still apply to each page.
• You can use a locally hosted version of jQuery for development
purposes, but when you submit your assignment documents use
the Goggle CDN. Use the snippet below to link to this CDN:
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
Project Six: Task 3
CIS 4004: Project Six Page 18 © Dr. Mark Llewellyn
Project Six: Task 3 The menu page when user’s mouse is
not hovering over a row in the table.
The default view.
CIS 4004: Project Six Page 19 © Dr. Mark Llewellyn
The menu page when user’s mouse is placed within the
second column cell of the second data row of the first table.
When the mouse moves out of this cell, the default view will
restored.
CIS 4004: Project Six Page 20 © Dr. Mark Llewellyn
Date and time are
displayed at the bottom
of the footer on every
page.
CIS 4004: Project Six Page 21 © Dr. Mark Llewellyn
Number of characters
available in the
Comments box. It is a 2
row x 32 column box, so
64 characters initially.
This line is created and
modified by JavaScript.
Other than a placeholder
in the markup for the
JavaScript to target, there
is nothing in the markup.
CIS 4004: Project Six Page 22 © Dr. Mark Llewellyn
After entering 37
characters, the line has
been modified to indicate
only 27 characters are
left. This is done in “realtime” by JavaScript so
each “keyup” event within
the Comment box will
update this line.
CIS 4004: Project Six Page 23 © Dr. Mark Llewellyn
User has entered 64
characters into the
Comments box. Zero
characters are now
available.
CIS 4004: Project Six Page 24 © Dr. Mark Llewellyn
User attempts to enter a
65th character. It will not
be accepted into the
textarea due to its 64
character restriction and
the JavaScript function
gets a bit more emphatic.
CIS 4004: Project Six Page 25 © Dr. Mark Llewellyn
• The fourth and final task in this project is to build the
Entertainment Schedule page. This page also follows the same
theme as the other pages in the website.
• This page is intended to provide a preview, for guests of the
bistro, of upcoming entertainment.
• I’ve added two additional images to the images folder for the
project and two different audio files, using different formats, to
be used for this page. As of yet, I have not found a good video
file for this group, but will continue searching and we may add
video as well. I will cover audio/video techniques in class, so
unless you already know how to do this – save this part for last.
• The Entertainment Schedule page will look like that shown on
the next slide when you finish it.
Project Six: Task 4
CIS 4004: Project Six Page 26 © Dr. Mark Llewellyn
Project Six: Task 4
CIS 4004: Project Six Page 27 © Dr. Mark Llewellyn
Place all of the deliverables for this assignment into a folder named
Project6. The deliverables for this assignment are to be submitted
via WebCourses no later than 11:59pm Friday November 30, 2018
(the last day of classes this semester) are:
1. The four valid HTML5 documents containing the semantically correct markup
for the index/home, menu, entertainment and reservations pages (40 pts – 10pts
for each page).
2. A folder named images containing all of the images for this project. (5 pts)
3. A document containing screen captures for HTML5 validations (all four
passing!) (20 pts – 5pts for each valid page).
4. A valid CSS stylesheet named bistro.css, with styles defined as outlined in this
document. (20 pts).
5. A document containing a screen capture of the validation of the stylesheet (5
pts).
6. A screen shot illustrating data submitted via your form (see page 15) (15 pts).
7. Your external JavaScript file with comments. (45 pts).
What To Turn In