Assignment

Foundation and Pathways

Creating Web Applications

Purpose of Assignment:

An individual assignment, designed to familiarise in following the project life cycle in developing a website. It also provides an opportunity to practice again techniques and skills involved in designing webpages utilising validated HTML, and validated CSS using a standard text editor. Moreover, these webpages will contain input forms that will use Javascript to validate user data input before the form is submitted to the server for processing.

In this individual assignment you will develop a new Web form or enhance the Web form you developed in Assignment 1 by using PHP and storing server-side information in a MySQL database. This information will have been collected in your HTML Forms. It will involve the creation of simple MySQL tables to store, update and retrieve information from a Web site using MySQL commands.

Submission as a single zip file, via the online submission system (Blackboard) http://blackboard.swin.edu.au/

Requirements and Specifications

The assignment requires you to develop a test website for a "Help Desk". The director of the company is interested in developing a test website that allows the user to register a unique job number when first registering a technical problem. You are required to develop the front end (client) of the website. The director has asked a student, Mr Blog, who is taking up Web programming to develop the back end (server) of the website that will process the data input from the front end (client).

Task 1: Website Design

After several discussions with the director, it was agreed that 2 webpages will be developed. These are the Home Page and the Registration Page.

To keep the test website simple, the structure adopted is linear. Figure 2 illustrates the site map of the website.

The register.htm page:

1. Client side validation using Javascript.

The testreg.php page:

1. Redirects to the index page if registration is successful or outputs to successful registration feedback page with a link back to the index page.

2. Outputs an error page if server side validation fails. The outputted error page contains a link back to register.htm and index.html page.

Graphic Design

As part of the graphic design, it was agreed with the director that the main wireframe design for both webpages shown in Figure 3 be adopted.

These two structure elements will be styled by the CSS contained in common.css. You are free to design and add other structure elements to complete the index and the registration page.

Task 2: Construction and Content Development

Section One: HTML 5 Web Page

The two webpages must be developed using HTML5 to describe the content and structure. All pages must not contain any deprecated elements/attributes. The following HTML must be used in the assignment

• Index Page

o Anchor

• Registration page

o Form
o Input(Text and Submit)
o Select

Other elements can be used if deemed necessary and appropriate for the content.

In addition, the following describes the required contents in each webpage.

o Index page
o Show your details similar to the sample in Figure 4 inside the main section structure.

o Clicking on the email address should launch an email client (if installed)
o Display a link to allow users to proceed to the registration page

o Registration page
o Show a simple form containing
o Job number - text field
o First name - text field
o Last name - text field
o Mobile Phone - text field
o Email address - text field
o Office - text field
o Desk - text field
o Computer - text field
o Problem - select field with options of "password", "new user", "delete user", "lost file", "new computer", "new software installation" and "virus checking".
o Set the method to POST and action to
o http://mercury.ict.swin.edu.au/vcaravias/COS10020/regtest.php

Section Two: CSS files

Two CSS files are to be created. One is used to style both the HTML pages, mainly to display a background image within the main section and style the footer. The second CSS will style the form itself. Everyone is encouraged to be creative in their design. Any CSS property groups can be used if deemed necessary and appropriate for the presentation.

In addition, implementing special features are highly recommended. These are

o Tooltip for the job number that describes that a 5-digit number is expected. The tooltip is displayed wherever the mouse hovers over the job number input field.

o Pop up window for the terms and conditions of logging a technical problem with the help desk.

Section Three: Javascript File

A Javascript file must be created for the registration page to validate the input data in the form prior to submitting it to the server for processing. The Javascript must

o Check that the job number is a 5 digit number before allowing submission
o Check that the mobile number is a 10 digit number before allowing submission
o Check that a valid email address has been entered
o Check that there are no blank input text field value
o Check that a selection is made for the selection input
o Show an alert box with a message if there is a problem
o Return true (if all input are okay) or false

Enhancements using JavaScript

You should complete the above requirements before attempting enhancements using Javascript. Each enhancement must be listed on a page called enhancements2.html. You will need to add a link in in the index.html page to the enhancements page. The entries on this page should:

• briefly describe the interaction required to trigger the event and what a programmer has to do to implement the feature.
• provide a hyperlink to the page where the enhancement is implemented in your website.
• reference any 3rd party contribution to the enhancement

The JavaScript enhancements themselves should be in a separate enhancements.js file. Make sure there are adequate comments to explain the enhancement (including its source if applicable). Examples of JavaScript and other enhancements you might make include (but are not limited to):

• Use the JavaScript methods querySelector() that take a CSS selector as an argument to manipulate the web page in response to use action.

• Use regular expression patterns in JavaScript to validate the data.
• Have the Menu display reflect the current page being viewed.

Any extensions that are not listed and linked on the page enhancements2.html will not be assessed.

Section Four: Use PHP to reuse common elements in your Web site

PHP provides us with more techniques to modularise and reuse our web application code. You need to refactor your web pages as follows:

- Your web site contains common elements such a menu, header and footer. Re-write your html pages so that static HTML elements common to your pages are sourced from a single PHP script.

Section Five: Create database table

You should create the following table:

Users Table (users)

This table will record the data the user enters into the form in register.html. The format of the database fields should match appropriate validation rules. If no rule exists for a particular field, choose an appropriate format.

The email address of the user will be used as the primary key for this table. Make sure duplicate email addresses cannot be entered in the table.

Section Six: Registering users (register.html and regtest.php)

In this section you will adapt the register.html Web page. If you have not already done, create a submit button Web page. On clicking this button user information will be sent to the server where it is processed by regtest.php and stored in the users table. If a record with the email already exists in the table, an error message will be sent back to the user.

Data validation: the data validation rules that you applied at the client using HTML5 and JavaScript should also be applied at the server. Data validated should include all input fields. Remember: make sure you have the novalidate="novalidate" form attribute set.

Demonstration Procedure:

1. Make sure you attend your allocated lab class. You will demonstrate your assignment to the teacher in your allocated Lab class in Week 13 (12-16 September 2016). You must attend this class to receive a mark for this assignment. If you cannot attend your allocated lab class time due to illness you must provide a copy of the medical certificate to the Unit Convenor.

2. Before your demonstration starts:

a. Make sure you web site is running on Mercury. (Your teacher will check the URL). All demonstrations will be done on Firefox.

b. Load Web Developer in Firefox. Validate all your new/altered web pages for both HTML5 and CSS and the results display in separate browser windows.

c. Load MySQL Monitor command line client or the phpMyAdmin web interface so you can demonstrate the changes to your table as your demonstration progresses.

3. As you demonstrate your Web site your teacher will ask you to explain how you have implemented various aspects of it.

4. If there is time you may have an opportunity to demonstrate and explain any additional features. If not, your tutor will mark this from your Blackboard submission. After the demonstration tutorial your teacher will mark your source code and documentation.

5. Students must include a Full URL of their website, phpmyadmin URL and username and password to access your database in the submission for Assignment.

6. Create a document or separate page for references when using outsourced images or text.