Swinburne University of Technology

Faculty of Information and Communication Technologies

HIT3323 / HIT6323
Web Programming
Assignment 1, Semester 1, 2011

Purpose of Assignment:
An individual assignment, designed to familiarise students with the techniques and skills involved in:
 developing a simple web application using XHTML, server-side PHP, and server-side data files;
 loading and accessing application files on a UNIX / Apache server;
 gaining knowledge about typical web application processes; and
 testing server-side code, checking user entered data using server-side PHP, and validating the served
mark-up, to ensure good quality assurance.

Due Date: 10pm Friday 15th April 2011

Submission as a single zip file, named “assign1.zip” via the online submission system (ESP)
https://esp.ict.swin.edu.au/
 See also „Submission and Assessment‟ notes on later pages.
 Your assignment should work correctly when placed on the Apache server mercury.it.swin.edu.au.
 Check the subject website for discussions and for any announcements.
 Late penalties will automatically be applied after the due date and time.

Contribution to Final Assessment: 10%

Assignment Requirements:
Overview
The aim of this assignment is to create a Membership System for a “Computer User Group”. This system will
enable information about new members to be entered and saved to text files, (one file per member); information
about existing members to be retrieved; and information about existing members to be updated.

For this assignment, you will need to create all the appropriate XHTML, PHP and text files.

As with Lab activities, you should save and test all your XHTML and PHP files on mercury.it.swin.edu.au in a
folder under the directory “~/hit3323/www/htdocs/assign1”
Standards
 All client side pages should be well-structured, well-formed, valid and „warning free‟ XHTML 1.0 Strict.
This means NO Frames, and NO deprecated HTML elements or attributes.
 All PHP scripts should be well-structured and commented as necessary.
 Coding quality should follow the „Coding Standards‟ provided for this unit.
 CSS is optional. However, any CSS used should be in a linked external stylesheet „style.css‟ and
should be valid and „warning free‟ CSS 2.1 or CSS 3.
 Ideally, webpages should address the principles of the W3C Web Content Accessibility Guidelines.
In particular, do not use tables for page layout or form layout, use style instead.
Ensure that all form controls are labelled, and all forms have „submit‟ functionality.

Task 1: Home Page index.html

A simple web page containing:
 The name of your Computer User Group (use your imagination)
 Your Name
 Your Student SIMS number
 Your Student email address
 Declaration:
“I declare that this assignment is my individual work. I have not worked collaboratively nor have I copied
from any other student's work or from any other source except where due acknowledgment is made
explicitly, nor has any part been written for me by another person.”
 A link to „about.html‟ page that tells us what you have attempted.
HIT3323 / HIT6323 Web Programming Assignment 1

 A link to add a new Member (link to „newMember.html‟)

 A link to query an existing Member (link to „queryMember.php‟)

See sample image of index.html page below

Task 2: Add a New Member Page newMember.html

This web page contains a form that enables New Member information to submitted for processing.

The form should include details about the Member:

 Member Number (Text input type, four characters long, never NULL, e.g. 0001)
 Member‟s First Name (Text input type, e.g. John)
 Member‟s Family Name (Text input type, e.g. Wong)
 Gender (Radio input type)
 Age Range (Drop down list: ---, 21-30, 31-40, 41-50, 51-60, 61-70, 71-80, 81+.
With default ---, may only select one option.)
 Member‟s email address (Text input type)
 Member‟s Telephone Number (Text input type)
and details about their computer interests:
 What Operating System (Drop down list: ---, Windows XP, Windows Vista, Windows 7, MacOS, Unix,
Android. With default ---, may only select one option.)
 Areas of Interest (6 Checkboxes: Computer Games, Digital Photography, Video/Sound Editing, Website
Development, Family History, Electronic Publishing)
 Member needs help with. (Textarea, optional field.)
 Member can offer help with (Textarea, optional field.)
and “submit” and “reset” form controls.

The form should submit the data to “processMember.php” using the method ‘post’.

This webpage should contain a link back to the Home page (index.html).

See sample image of newMember.html on next page

Page 2 of 5 March 2011

HIT3323 / HIT6323 Web Programming Assignment 1

Task 3: Process Member Data processMember.php

This web page checks the data and writes the data to a text file.

The page specifically:

 Provides server-side form data error checking:
o That a Membership Number is correctly provided
o Checking that other data is provided, and checking that appropriate data is entered
(e.g. email is an email, phone number contains only numbers and spaces, and so on) , and
o Provides informative, helpful error messages to the user.
 Automatically handles the creation of a directory named “members” on the mercury server under the
directory “~/hit3323/www/data” in which the member information files will be stored.
 Processes the member data by creating and writing each member‟s information into a separate text file.
(i.e., one file for each member)
 Displays a confirmation message once the member information is stored successfully.
 Provides a link back to the Home page.
See images of a sample processMember.php pages above

Page 3 of 5 March 2011

HIT3323 / HIT6323 Web Programming Assignment 1

Task 4: Query Member queryMember.php

This web page contains a simple search form, to search for a member, and if found, displays the member data.

 The form should contain a field for inputting a Member

Number, and when actioned, should search the
Member files to locate the member details.
 Form action is to „queryMember.php‟ (i.e., a self-call)
using the method ‘get’.
 If the Member details are not found, then display an
error message, and enable further searching.
 If the Member details are found:
o Display the details of the requested Member
in an appropriate html format (table?, list?),
o the search form should no longer be
displayed, and
o an „Update‟ submit input should be displayed.
(ie. A submit input for a form with action to
„updateMember.php‟ and method „post‟)
 Provide a link back to the Home page.

See sample images queryMember.php pages on the right

Task 5: Update Member updateMember.php

This web page displays existing member data retrieved from a
file, in a form, similar to newMember.html, to enable existing
Member data to be updated, and saved to file.

 The Member Number displayed should not be able to

be changed. (Perhaps use a hidden input?)
 The form should submit the data to
“processMember.php” using the method ‘post’.
 Provide a link back to the Home page.

Task 6: About Page about.html

This is a simple webpage to enable you to tell us what you
have done, and to help us understand and mark your
assignment  and for you to be able to refer to, and reflect on
later.

Include the following headings:

 Overall
 Task 1
 Task 2
 Task 3
 Task 4
 Task 5

And under these heading clearly and very briefly (using simple list points?) explain things like:
 What tasks you have / have not attempted / completed
 Anything special that you have done, or attempted, in creating the site that we should know about
 What you really had trouble with
 How you solved any problems along the way
 What you would change or try differently next time
 What you reckon you should have been able to do better
 What references/sources you have used to help you learn how to create your website
 What you have learnt along the way.

Page 4 of 5 March 2011

HIT3323 / HIT6323 Web Programming Assignment 1

Submission & Assessment Process:

Folder and File Structure for the Web Site
Create your site structure as described below.
assign1/ You must have this folder – case sensitive!
index.html Home page
newMember.html Add a New Member Page
processMember.php Process Member Data
queryMember.php Query Member Page
updateMember.php Update Member Page
about.html About Page
images/ Folder for any images used for page content (optional)
style.css CSS style sheet rules for your stylesheet (optional)
style/ Folder for any stylesheet images (optional)

Notes:
 HTML and PHP files should only be in the base “assign1/” folder – not anywhere else.
 All links to your files should be relative. Do not use absolute links, as these links will be broken
when files are transferred for marking. No marks will be allocated if links are broken. 
Submission Process
 Zip up the assign1 folder and its content into a zip file named assign1.zip
 Submit your „assign1.zip‟ file through the online submission system (ESP) https://esp.ict.swin.edu.au/
 Make sure you submit to your correct subject on ESP – either HET123, HET723, HIT3323 or HIT6323.
Marking Scheme
There are 10 marks for this assignment. The assignment will be marked out of 100.

Item Feature Mark

Task 1 Home Page index.html 5
Task 2 Add a New Member Page newMember.html 10
Task 3 Process Member Page processMember.php 35
Task 4 Query Member Page queryMember.php 20
Task 5 Update Member Page updateMember.php 20
Task 6 About Page about.html 5
Overall Quality 5
Total: 100

Your mark will be based on the skills and knowledge that you demonstrate, including providing the required
features, explaining what you have done, using well structured valid XHTML pages, and creating logically coded
PHP.

Ensure that the application pages “flow” and link together, even if some of your code is incomplete, so can step
through your whole application.

Failure to meet the following will result in deductions:

 You must zip up and submit your work through ESP.
 The assignment must work when unzipped on mercury
 Make sure all links throughout the entire application are relative, not absolute links.
Any hard coded links to files or folders loaded under your student numbers will not work when the files are
independently loaded for marking. You will lose marks if links fail.

Notes:
It is recommended that you review the lecture examples and do the appropriate lab exercises before embarking on this
assignment. Many issues may be resolved through the lab exercises. It is often easier to get simpler code segments
working, then build the segments into more complex coding.

Good, clear, simple, well understood and demonstrated XHTML and PHP can often achieve better marks than, say, using
an authoring tool that generates “pretty” webpages with unnecessarily complex coding, that you do not understand, or
cannot explain.  You are strongly encouraged to use a standard text editor such as Notepad++ or Crimson Editor, as this
approach will provide a deeper understanding of XHTML and PHP. 
This assignment is about your XHTML and PHP programming skills - NOT about your artistic or design skills.

Page 5 of 5 March 2011