Worksheets

Worksheet 1 - HTML and Files organisation

Task 1 : Build a frame set

Build a simple frame set with a single frame, later you will be asked to include JavaScript in the head of this frame set.

Task 2 : Build the Architecture

Develop an empty framework of HTML templates that satisfies the following architectural specification. The framework is to include the associated hyperlinks

Task 3 : Forms and Tables

Populate pages A,F,G,J,K & L with raw HTML formatted data. Page A requires a login form, Page G requires a form to order an exotic car (e.g. Ferrari ), Page J requires a form to add a new car to stock, Page K requires a form to delete a car from stock and Page L requires a form to order a new car from the suppliers Page F requires a table to display the current status of the stock. This will include make , model, colour, registration number and status (available or leased).

Website architecture

Worksheet 2 - HTML and CSS

Task 1 : Develop a Corporate Style

Create a corporate style sheet that will be applied to all the pages in the site. Include at least:
 Background Colour
 Font Colour
 Font Style for
 Headings
 Sub Headings
 Lists
 Main Narrative

Note : ALL H1 must have the same style in EVERY document and must not be RED in colour or be in the Arial Font

Task 2 : Local Style

Develop a local style for each page containing tables of data, pages F,M, and N. Utilise positioning for ALL form elements (alas you can not use tables)

Task 3 : Help Pages

Develop a style sheet specifically for the help pages this must include the utilisation of scrollbar attributes.

Worksheet 3 - Javascript

Task 1 : Pop up Help pages

The help pages must open in a new browser window, this window must appear on top and must be positioned 100px by 100px from the top left with the only browser furniture being an optional generated scrollbar. This window must be positioned in the exactly the same place in both Internet Explorer and Mozilla browsers

Task 2 : Rollover Buttons

Replace ALL navigation hyperlinks with rollover buttons. At least tunnel pages.

Task 3 : Dynamic Content

Using the data in http://university-intranet/blabla/casestudy/specials.js recreate the exotics order form, page G. Note this data will change from time to time so DO NOT use a copy of the file.

Task 4 : Form Validation

Create a .js file of your own and call it regex.js [This name is important so use it!!] The file must contain the regular expressions to test for the following
 Integer
 Non negative Integer
 A number
 A Vehicle Registration Number (3 main styles only: ABC123X, X123ABC, AB12XYZ )
 No Visible content Validate the add a car form, page J, to ensure that the number of cars ordered is valid and the make and model elements are completed.

Task 5 : Cookies

Edit Page A to add the following tests. Use the data in the file http://university-intranet/blabla/casestudy/specials.js If an unknown user attempts to login to ensure that the browser window is closed. If a known user attempts to log in three times using the wrong password ensure that the browser window is closed. Use cookies to test if a visitor has been to the site before and if so don’t allow the user to travel down the hypertext tunnel associated with the site (Do not make an active hyperlink - MS forced the above link)

Worksheet 4 – PHP

Task 1 : Create a Database

Create and populate database tables as instructed during the SQL lecture in Semester 2

Task 2 : Read the data base

Modify the stock list page, page F, to list all the cars. The report is to display: make, model, colour, registration number and status (available or leased).

Task 3 : Add Data

Modify the add a car page, page J, to accept data for a car, add the car to the stock and display the add a car page for further data entry only if the data is successfully inserted. Each car must have a unique registration number.

Task 4 : Delete Data

Modify the delete a car page, page K, to accept a registration number, this should be confirmed with make and model, and once confirmed with make and model then delete the car and return to this page only if the deletion was successful.

Task 5 : Send Email

Modify the Order a new car page, page L, so that the data is sent in the form of an email using the send mail system ( not client side email !) The email address to send the data must be: anemailaddress@myuniversity.ac.uk

Worksheet 5 – Perl

Task 1 : First Report

Create a Perl CGI script to be the first report page, page M, this must display the current monthly income from each vehicle and the end of the table display the total income for this month ( don’t forget the style sheet ).

Task 2 : Second Report

Create a Perl CGI script to be the second report page, page N, this must display the number of cars leased each month of the current year in a table and display the number of cars leased each month of the current year in a pie or column chart.

Task 3 : Bulletin Board

Create a Bulletin Board for the company, the primary purpose is to disseminate company and staff news. Use of freeware, shareware and particularly commercial software is prohibited. (Write it yourself)

Worksheet 6 - Help Pages

Task 1 : Help Pages

Create the pages and links for the context sensitive help.