CIS 408 Internet Computing Sunnie Chung

Transcription

1 Project #2: CIS 408 Internet Computing Sunnie Chung Building a Personal Webpage in HTML and Java Script to Learn How to Communicate Your Web Browser as Client with a Form Element with a Web Server in URL Problem 1 Create your personal webpage in index.html that has 5 sections and displays the followings: Section 1: Create an HTML file and its corresponding CSS file p2.css, which will create a set of tabs that appear on top of your webpage with the 5 Tabs. It would looks like this page below on MacOS with Chrome with 5 different Tab names as follow: Display Each Tab name with Home, CIS 408 News, MyCourses, Video Player, AddToContactList. Home tab for Section 1 that displays Your personal info (name, ID, , your website address)

2 3 images of the pictures that is displayed in Slider. Use your choice of any three pictures, or you can use the EECS Dept site Pic and Engineering College site pictures. CIS408 Class tab displays Section 2 as below. MyCourses tab displays Section 3 as below. Video Player tab displays Section 4 as below. AddToContactLst tab takes Contact info of each visitor then display the contact info entered. Create a separate CSS file to put the uniform style (template) information for every page under your Webpage with the same format with the same background color and same font of your choice other than default. Section 2: CIS 408 class webpage with iframes that displays the CIS408 Classpage ( and the related course CIS430 Class page ( Display two web pages side by side. SAME ORIGIN POLICY: Note that any current web browsers wouldn t allow to insert any webpage sites that are not in the same domain as your website into iframe because of web security and protection of the content of the site. See the instructions in the Project 1 section to avoid this error. Section 3: Create an unordered list of your classes you are taking this semester under the title Class List under the title of your current semester, for example, Spring One of them is CIS 408 Internet Computing. Create a link for it to go to a next page MyCIS408.html under the subfolder named CIS408. The page for My CIS 408 Internet Computing in MyCIS408.html will list an ordered list of your projects (labs) from this course: Project 1 Project 4 and Group Project. For each Project: o Create an unordered list of all the files that you submitted for Project1 to be downloaded under Project 1 o Create a link for each file, for example, that displays p1.html Version 1, p1.html Version 2 o Create the same list under Project 2 as well. Section 4: Create a separate section 4 and create a video player as directed in Problem2. Section 5: o Create Contact Info with First name, Last name, Address with Submit Button as directed in Problem3 below to take visitor s contact info then display them when the visitor click the Verify button.

3 o Create an animation as directed in Problem4 below.

4 Problem 2 for Section 4 Creating a Customized Video Playback Controller in HTML5/XHTML The HTML5/XHTML video element (as defined in Document Object Model (DOM)) provides methods, properties, and events that you can use to control playback video files with JavaScript in your presentation on your webpage. In problem 2 in Lab2, you are creating your own video playback controller in html with java script on a webpage using video element in Html5/Xhtml. The HTML5 video element gets you started using video elements on your webpages. With the addition of JavaScript, you can programmatically create custom playback controls, get and set the current playing position, and change the current video by using some of the basic methods and properties that you can use to control your video object. The HTML5 video element has its own built-in controls to play, pause, and seek the video playback. You can create your own customized controller by using the play and pause methods to start and stop the video, the currenttime property to seek within the video, and the paused property to get the current playing state of the video player. Useful Resource Site for more on video element: Implement your own Video Playback Controller on a Webpage using <video> element and java script with the Following Controlling Buttons: 1. Play (>) 2. Pause ( ) : 3. Restart ( >) 4. Forward with interval value 10 (>>) 5. Rewind with interval value -10 (<<) Make Button 1 as follow: 1. Play (>) with toggled Pause ( ) : If currently playing, show Pause Else, show Play Make all the buttons hidden but appear together when a mouse is hovered over any button. Notes: 1. For this lab, you need a web browser with XHTML and HTML5 (IE9 or higher, Chrome, Firefox) 2. You are NOT supposed to use element <embed> with controller attribute for this lab1. 3. You can use your own video file in mp4. 4. Submit as usual Zip file on blackboard and a printout of your report in class. 5. DO NOT SUBMIT your Video File on Blackboard!

5 Sample Customized Video Player (Note that this shows only for the video part. This is not your final page layout.) Problem 3 for Section 5 Create AddToContactList to take First name, Last name, and Address of each visitor with Submit Button. Name your Server side script file name as ServerScriptFile.html for action attribute of your Form element. Display the Instruction text as below with Verify Button to take visitor s contact info then display them when the visitor type his/her contact info then click the Verify button as in the picture below. Click the "Verify" button to display your contact info and the URL for where to send the form data when the form above is submitted.

6 Display the following form element values, as your output of Problem 3, in the section 5 of your webpage below the Verify button when the visitor clicks Verify button: o Key name of First Name o Value of First Name o Key name of Last Name o Value of Last Name o Key name of o Value of o Value of action attribute of your Form element, which is URL of your ServerScriptFile.html for where to send the form data when the form above is submitted. Screen Capture to show your form element data above in a complete URL with Query Parameters in the address bar of your browser, which your web browser creates to send to the Web Server when Submit button is clicked. Copy and Paste a complete URL with Query Parameters in your output. Create ServerScriptFile.html with the following messages below with your name and (See the picture below for the messages to display as a server response). Click Submit Button to get the Server Response. Screen Capture to show the server response and URL. Copy and Paste the URL in the address bar in your report to show your communication is done correctly.

7 Change the value of action attribute of your Form element to \ServerScriptFile.html to Report the difference when you click Verify and then Submit. Screen captures to show the difference in your report. Test Problem 3 with your name and with action = \ServerScriptFile.html and ServerScriptFile.html respectively in the browser on your webpage address then screen capture each execution step to show the results when click Verify button and then Submit button. Example of Server Response: Problem 4 for Section 5 Create an animation in your webpage with 5 runner images given in the Lab Section for Project 2. Test Instructions: Set up your webpage properly on eecs.csuohio.edu as instructed in PrepLab2. See Lab Section. Go to your webpage by typing your website URL in the address bar of your web browser of your system.

8 All the execution tests should be done in your web page on the (Linux) host eecs.csuohio.edu where a webserver is running. You can develop and test your codes in your web browser in your local system without a webserver then copy all the files in your webpage directory correctly to test your codes on eecs.csuohio.edu to get the correct execution results to create your lab report. Submission: Use the blackboard to submit a zip file that includes your report in doc file and all of the files needed to display the pages for all the problems, all of the files you used as needed. Create a report for the project (see below for what to add). Submit all the files including your report in one Zip file on Blackboard. Your report should include screen captures of each execution of the page display for each problem and all the source codes in Doc file. Show all the screen captures of each button execution. Add a proper heading for title, name and ID. Submit a printout of your report (in one doc file) in class. Ext xtra Credit Problems: Extra Problem1: Create a Draggable Text of Your Name in Home Tab. Extra Problem2: JavaScript Date Picker For this problem, you will be implementing two interactive DatePicker displays using a combination of HTML, CSS, and JavaScript. In your project3 directory create a file DatePicker.js that implements a JavaScript class named DatePicker that can be used as in the following example: var datepicker = new DatePicker("div1", function (id, fixeddate) { ); }); console.log("datepicker with id", id, "selected date:", fixeddate.month + "/" + fixeddate.day + "/" + fixeddate.year datepicker.render(new Date("July 4, 1776")); The constructor takes an argument consisting of the id attribute for an existing div and a date selection callback function. When a date is selected the callback function should be called with the id argument and an object containing the properties month, day, year with the number encoding of the date (e.g. {month: 1, day: 30, year: 2016}) is the encoding of January 30, 2016.

9 The object should have a render method that takes one argument consisting of a Date object that selects a particular month (the object can refer to any time within the month). When render is invoked it replaces the contents of the date picker's div with HTML that displays a small one-month calendar such as those you might see in a travel reservation website: The calendar must display the days of the selected month in a grid with one line for each week and one column for each day of the week. Weeks run from Sunday on the left to Saturday on the right. The calendar must contain a header row displaying abbreviations for the days of the week, such as "Su", "Mo", etc. Each day of the month is displayed as a number. Some weeks may contain days not in the selected month. These days should be displayed as the number in their month, but in a dimmed fashion to indicate they are not part of the current month. All weeks displayed should contain at least one day belonging to the current month. Most months will display 5 weeks, but some months may display 4 or 6 depending on the days. The number of rows in your calendar should not be fixed. The calendar must display the name of the month and year at the top of the calendar. In addition, it must display controls such as "<" and ">" that can be clicked to change the calendar's display to the previous or next month. Clicking on a valid day of the current month should invoke the callback specified on the constructor with the arguments described above. Clicking on days belonging to months other than the current month should not invoke the callback. Once you have created the JavaScript class, create a file datepicker.html containing two empty div elements, plus a bit of JavaScript code that invokes the DatePicker class to display a date picker in each of the divs. One of the date pickers initially displays the current month and the other displays the month of January It should be possible to change the month of each date picker independently using the controls on that date picker. You can create a stylesheet with the filename datepicker.css to apply styling to the calendars and make them look nice. The corresponding link tag that requires the css file has already been added for you in the html file. Useful Resource Sites: