Project Six Solution

$35.00 $30.80

Description

Project Six

 

This assignment has four main objectives:

 

  1. To give you some practice adding forms to your web pages.

 

  1. Basic processing of form data.

 

  1. Add JavaScript functionality to your website with both native JavaScript and jQuery.

 

  1. Add video and audio to your website.

 

There are 4 tasks associated with this project.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 2 © Dr. Mark Llewellyn

 

Project Six

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 3 © Dr. Mark Llewellyn

 

Project Six

 

 

 

wrapper (<div>)

 

header

 

 

 

navigation main

 

 

 

 

address

 

id

 

(<div>)

 

 

 

 

footer

 

image

 

 

 

 

 

 

Main (index) page

 

 

 

 

CIS 4004: Project Six Page 4 © Dr. Mark Llewellyn

 

Project Six

 

 

 

 

wrapper (<div>)

 

header

 

main

 

navigation <table>

 

 

<table>

 

address

id

 

(<div>) <table>

 

 

 

 

footer

 

 

 

Menu page

 

 

 

 

 

CIS 4004: Project Six Page 5 © Dr. Mark Llewellyn

 

Project Six

 

  • Recall our original wireframe for the overall website project (shown below).

 

 

 

Home Page

 

 

 

 

Our Menu Entertainment Reservations
Schedule
   

 

 

 

 

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

 

 

 

CIS 4004: Project Six Page 6 © Dr. Mark Llewellyn

 

Project Six

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 7 © Dr. Mark Llewellyn

 

Project Six

 

form

 

fieldset  
       
  label   text box
       
  label   text box
       
  label   email box
       
  label   telephone box
       
  label   date box (calendar selector)
       
  label   time box (time selector)
       
  label   numeric selector box
       
  label   scrolling text box (textarea)
       

 

submit button

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Reservations

 

form wire

 

frame

 

 

 

 

CIS 4004: Project Six Page 8 © Dr. Mark Llewellyn

 

Desktop version

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 9 © Dr. Mark Llewellyn

 

Project Six: Task 1

 

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

 

CIS 4004: Project Six Page 10 © Dr. Mark Llewellyn

 

Tablet version

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 11 © 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 12 © Dr. Mark Llewellyn

 

Project Six: Task 2

 

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

 

http://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.

 

CIS 4004: Project Six Page 13 © Dr. Mark Llewellyn

 

User enters

 

information into

 

the form.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 14 © Dr. Mark Llewellyn

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

PHP script on server

 

returns the values that

 

the user entered

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 15 © Dr. Mark Llewellyn

 

Project Six: Task 3

 

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

 

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

 

  1. 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).

 

CIS 4004: Project Six Page 16 © Dr. Mark Llewellyn

 

Project Six: Task 3

 

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

 

http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 17 © Dr. Mark Llewellyn

 

Project Six: TaskThemenu3page when user’s mouse is not hovering over a row in the table. The default view.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 18 © 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 19 © Dr. Mark Llewellyn

 

 

 

 

 

 

 

 

 

 

 

 

Date and time are

 

displayed at the bottom

 

of the footer on every

 

page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 20 © 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 21 © Dr. Mark Llewellyn

 

After entering 37

 

characters, the line has

 

been modified to indicate

 

only 27 characters are

 

left. This is done in “real-

 

time” by JavaScript so

 

each “keyup” event within

 

the Comment box will

 

update this line.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 22 © Dr. Mark Llewellyn

 

 

 

 

 

 

 

 

User has entered 64

 

characters into the

 

Comments box. Zero

 

characters are now

 

available.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 23 © 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 24 © Dr. Mark Llewellyn

 

Project Six: Task 4

 

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

 

 

 

 

 

CIS 4004: Project Six Page 25 © Dr. Mark Llewellyn

 

Project Six: Task 4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Six Page 26 © Dr. Mark Llewellyn

 

What To Turn In

 

Place all of the deliverables for this assignment into a folder named Project6.

 

  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 imagescontaining all of the images for this project. (5 pts)

 

  1. A document containing screen captures for HTML5 validations (all four passing!) (20 pts – 5pts for each valid page).
  2. A valid CSS stylesheet named bistro.css, with styles defined as outlined in this document. (20 pts).
  3. A document containing a screen capture of the validation of the stylesheet (5 pts).
  4. A screen shot illustrating data submitted via your form (see page 15) (15 pts).

 

  1. Your external JavaScript file with comments. (45 pts).

 

 

 

 

CIS 4004: Project Six Page 27 © Dr. Mark Llewellyn