Internet Programming Assignment #2 Solution

1    Description

 

The objective of this assignment is to give you more practice with HTML and CSS

-  and to expose you to client-side JavaScript and the Document Object Model . In this assignment you will update the Webpage with the table of your favorite

places from Assignment 1 by adding styling and behavior,  develop a second

web page, and link the two pages together. The second page should have a form used for submitting new entrie s to your table of favorite places. Also, you will use HTML DOM Events and JavaScript to change an image and insert a

third-party widget. This HW specification is 5 pages long.

2    Requirements

Develop a second webpage with an HTML form and several inputs for submitting new

table events. The form will be functional and interact with a PHP program that we have set up on a Web-server (you don't have to write PHP - just HTML5, CSS, and JavaScript). The two pages should be linked via a navigational bar. Use a single CSS file, style.css, to provide a consistent styling across both webpages. NO CSS styling should be present in

your HTML file.

•      The image below shows the updates required for this assignment – a CSS-styled Nav bar, a Twitter Widget, and, each time your page is loaded, the Gopher image provided should be displayed as shown below.

 

 

Figure1: Screenshot of places homepage; the Gopher image is displayed below the table

•     The image displayed at the bottom of the places homepage should change when a user clicks on the name of a place displayed in the Name column:

o  An image corresponding to the Name of the place selected/clicked-on should be displayed in the same location as the Gopher image.

 

 

 

 

Figure 2:  An example of displaying a relevant image -  in this case, user has clicked “Blue Door

Pub” in Name column

 

•   A Twitter Feed should be inserted on the places page as shown in Figure 2 above.

 

Place a Twitter feed widget to the right of the places table on the home page as shown in the pictures. You should use twitter tags related to UMN like #UMN ,

#UMNdriven etc to subscribe to the feeds.

 

•     You need to develop a second web page that contains an input form to enter places of interest along with details as specified below.

Use HTML5 input types on the form wherever possible. For example, in Figure 3 below, the Opening Time and Closing Time input fields are of type “time”, which is an HTML5 input type.

 

Use the “GET” request method for the form. The action attribute on the form should submit to the PHP page located at the following URL:

 

http://www-users.cselabs.umn.edu/~tulaj001/form_handler.php

 

The name fields in the example form are as follows:

 

placename: “Name of the place” addressline1: “Apt#, Street Address” addressline2: “City, zip code” opentime: “Place opening time” closetime: “Place closing time”

additionalinfo: “Link to additional information”

 

 

The PHP script accesses the values submitted via the form based on the names in bold font above, so you must have the same names for your form elements, or your form will not function correctly, and you will not get credit.

 

•     The following values on your form must be validated by either HTML input fields or by using JavaScript and regular expressions.

➢   Place Name, Address, and Hours of Operation are mandatory.

 

➢   Place Name and Address should accept only alphanumeric characters and spaces. Alphanumeric characters are: 0-9 a-z A-Z.

➢   Error messages with should be displayed when from validation fails (see

Figures3 and 4 below).

➢   Alert boxes can be used to display these messages.

 

 

 

Figure 3: Snapshot of Form indicating an error because the mandatory

Place Name input field on the form is empty.

 

Figure 4: Snapshot of a form indicating an error for incorrect values in mandatory fields that accept only alphanumeric values.

 

Once you submit the form, you should see a confirmation page with the details you filled in on the form – as shown below in Figure 5.

 

 

 

Figure 5: An example confirmation page returned after the form on your Form page is submitted successfully.

3    Evaluation

 

Your submission will be graded on the following items:

 

•     HTML passes w3c HTML and CSS validator without errors. Test your HTML and CSS using the html and css validator. Warnings are accepted. 10 points

•     The form correctly validates user input and displays correct and relevant error messages. 20 points

 

•     Form submits correctly and the confirmation page with the correct data is displayed.15 Pts

•     Displaying the Gopher image (provided) at the bottom of the Places page on page load. 10 points

•     Dynamically display the correct image of a place when the Name of the place is clicked on. The picture of the place should be displayed in the same location as the Gopher image (instead of the Gopher image) on the Places page. You must include the pictures you use in your implementation when you submit your assignment. 15 points

•   Aligning images with the calendar table dimensions. 5 points

•     Place page includes Twitter widget that functions correctly using one of the hashtags mentioned in the specification.  The Twitter widget should be properly aligned as shown in Figure 2. alignment as shown in the picture. 10 points

•   Displaying the ‘Form Input’ and ‘My Places’ Navigation links in the form of

navigation bar. (on both of the web pages, and they should work…). 5 points

 

•     External file style.css is present and styles both HTML files in a consistent manner. 5 points

 

•     Name your file: ‘<Your UMN x.500 IDHW2.zip’ Your zip file should contain your HTML, CSS, and picture files. 5 points

•   You should test your webpage with either Firefox or Chrome (or both) .

Indicate which browser(s) you used to test your webpage at the bottom of your webpage. Failure to do so will result in a 5-point deduction.