CIS 4004: Project Six solved

)

Menu pageCIS 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 andReservations page to the existing web site. The newReservations page will consist of a CSS styled form and utilizethe same theme as the existing pages. The Entertainment Pagewill list upcoming events at the Bistro and include audio andvideo snippets of the scheduled performers.Project SixHome PageOur Menu EntertainmentSchedule ReservationsCIS 4004: Project Six Page 7 © Dr. Mark Llewellyn• The Reservations page will not feature the large image thatappears on the Index page, but the bulk of the styling will bethe same as for the Index page, so you can use the Index pageas the starting point for your new Reservations page.• The wire frame (desktop version) for the form on theReservations page is shown on the next page.• The Reservations and Entertainment pages will also have tabletand mobile phone versions using the same media queries youcreated in Project Five. The mobile version of the Reservationpage has a slight modification to configure (more later).Project SixCIS 4004: Project Six Page 8 © Dr. Mark LlewellynProject Sixformfieldsetsubmit buttonlabel text boxlabellabellabellabeltext boxemail boxtelephone boxscrolling text box (textarea)date box (calendar selector)time box (time selector)labellabelReservationsform wireframelabel numeric selector boxCIS 4004: Project Six Page 9 © Dr. Mark LlewellynDesktop versionCIS 4004: Project Six Page 10 © Dr. Mark Llewellyn• Your first task for Project Six is to create the Reservations pagewith the form as shown on the previous page.• Notice in the wireframe the various types of input fields that theform contains. In addition the following will apply to this form:– Notice the fields in the form that are required (designated by asterisk inlabel).– The first input area (user first name) has autofocus set.– The email field, phone number field, reservation date, time of arrival, andnumber of guests are all special type input fields, be sure to use the correcttype 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 areshown on the next two slides.Project Six: Task 1CIS 4004: Project Six Page 11 © Dr. Mark LlewellynTablet versionCIS 4004: Project Six Page 12 © Dr. Mark LlewellynMobile phone versionIn the mobile versionthe form labels aredisplayed above theirrespective inputelements.CIS 4004: Project Six Page 13 © Dr. Mark Llewellyn• Your second task for Project Six is to link the form that youcreated to the following PHP script which is residing on mypublic page on one of the Computer Science department servers(Monroe).• While testing your form, you can simply set the action attributeof the form to “#”, which will not activate any script.• When your form is complete, change the action attribute of theform to:http://cs.ucf.edu/~markl/bistroformreport.php• This PHP script is residing on one of the Computer Sciencedepartment servers and will simply read the information enteredinto the form and return the values in a table as shown on the nexttwo slides. You do not need to do anything with the PHP scriptnor the styling for this page.Project Six: Task 2CIS 4004: Project Six Page 14 © Dr. Mark LlewellynUser entersinformation intothe form.CIS 4004: Project Six Page 15 © Dr. Mark LlewellynPHP script on serverreturns the values thatthe user enteredCIS 4004: Project Six Page 16 © Dr. Mark Llewellyn• Your third task for Project Six is to create an external JavaScriptfile that will contain the JavaScript and jQuery that will providethe functionality described below.1. Write a native JavaScript function (native JavaScript not jQuery) that isinvoked on each page in your website that displays the current date and timebelow your name in the footer area of each page.2. Write a JavaScript function using jQuery (not native JavaScript) to providean alternate color scheme for table cells when the user’s mouse hovers over atable cell. The alternate color scheme should not be applied to any elementin the header row of a table. We only have tables in the menu page of ourwebsite.3. Write the native JavaScript function (not jQuery) that displays the number ofcharacters the user has left to type in the Comments box on the reservationform.• The functionality of each of these functions is shown on thefollowing pages (I’ll also demonstrate in class).Project Six: Task 3CIS 4004: Project Six Page 17 © Dr. Mark Llewellyn• All functionality from the previous projects should carrythrough into this project, meaning that the media queries shouldstill apply to each page.• You can use a locally hosted version of jQuery for developmentpurposes, but when you submit your assignment documents usethe Goggle CDN. Use the snippet below to link to this CDN:http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.jsProject Six: Task 3CIS 4004: Project Six Page 18 © Dr. Mark LlewellynProject Six: Task 3 The menu page when user’s mouse isnot hovering over a row in the table.The default view.CIS 4004: Project Six Page 19 © Dr. Mark LlewellynThe menu page when user’s mouse is placed within thesecond column cell of the second data row of the first table.When the mouse moves out of this cell, the default view willrestored.CIS 4004: Project Six Page 20 © Dr. Mark LlewellynDate and time aredisplayed at the bottomof the footer on everypage.CIS 4004: Project Six Page 21 © Dr. Mark LlewellynNumber of charactersavailable in theComments box. It is a 2row x 32 column box, so64 characters initially.This line is created andmodified by JavaScript.Other than a placeholderin the markup for theJavaScript to target, thereis nothing in the markup.CIS 4004: Project Six Page 22 © Dr. Mark LlewellynAfter entering 37characters, the line hasbeen modified to indicateonly 27 characters areleft. This is done in “realtime” by JavaScript soeach “keyup” event withinthe Comment box willupdate this line.CIS 4004: Project Six Page 23 © Dr. Mark LlewellynUser has entered 64characters into theComments box. Zerocharacters are nowavailable.CIS 4004: Project Six Page 24 © Dr. Mark LlewellynUser attempts to enter a65th character. It will notbe accepted into thetextarea due to its 64character restriction andthe JavaScript functiongets a bit more emphatic.CIS 4004: Project Six Page 25 © Dr. Mark Llewellyn• The fourth and final task in this project is to build theEntertainment Schedule page. This page also follows the sametheme as the other pages in the website.• This page is intended to provide a preview, for guests of thebistro, of upcoming entertainment.• I’ve added two additional images to the images folder for theproject and two different audio files, using different formats, tobe used for this page. As of yet, I have not found a good videofile for this group, but will continue searching and we may addvideo as well. I will cover audio/video techniques in class, sounless you already know how to do this – save this part for last.• The Entertainment Schedule page will look like that shown onthe next slide when you finish it.Project Six: Task 4CIS 4004: Project Six Page 26 © Dr. Mark LlewellynProject Six: Task 4CIS 4004: Project Six Page 27 © Dr. Mark LlewellynPlace all of the deliverables for this assignment into a folder namedProject6. The deliverables for this assignment are to be submittedvia 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 markupfor the index/home, menu, entertainment and reservations pages (40 pts – 10ptsfor 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 fourpassing!) (20 pts – 5pts for each valid page).4. A valid CSS stylesheet named bistro.css, with styles defined as outlined in thisdocument. (20 pts).5. A document containing a screen capture of the validation of the stylesheet (5pts).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