itec244 project

7/29/2019 ITEC244 Project

1/8

Page 1 of8

Course: InternetTechnology (ITEC244)

Assignment Number :1 of 1 Contribution : 20% ofcourse

Lecturer :Kadeem Best Date Given:15th March 2013 Date Due: 9th May 2013

Notes for the Student: This Group project is designed to give you practical experience increating dynamic websites.

Background: You will need to have access to a code editor, preferably Notepad ++, popularbrowsers (Internet Explorer, Safari, Fire-Fox, Google Chrome, Opera) and WAMP Server.Concepts covered: XHTML, CSS, Client Side Validation using Javascript, SQL, DatabaseDesign, Server Side Scripting using PHP.

Rules and Regulations

You are required to develop a dynamic website and like all web applications and

dynamic websites, both Client Side and Server Side technologies must be used for

development.

The number of web pages for your website should not exceed seven (7) and should not

be less than five (5).

XHTML Strict 1.0, CSS and JavaScript MUST be used for the client-side coding

whereas, PHP MUST be used for the server side coding.

Windows Apache MySQL and PHP (WAMP) server would be the platform and

environment used to display and serve the website.

Notepad ++ would be the code editor used for development.

The website is required to display and operate correctly and consistently on all popular

web browsers, i.e. Internet Explorer, Mozilla Firefox and Google Chrome, Safari, Opera.

Your website MUST adhere to the below directory structure that is:-

o ITEC244_Group#_WEBAPP This folder would be the root directory of the

website. All other folders MUST be stored in this folder.o XHTML This folder would store all XHTML and HTML files.

o CSS This folder would store all CSS files.

o JS This folder would store all JavaScript files.

o PHP This folder would store all PHP files.


2/8

Page 2 of8

o IMG This folder would store all images for the website.

o SQL- This folder would store all SQL or dump files.

You will be required to upload your website using the following free webhosting URL:

www.000webhost.com.The site offers free PHP and MySQL hosting.

You must demonstration your project

Assig nment Submission Requirements and Deliverables

An electronic copy of your work (a zip file containing the ITEC244_Group#_WEBAPP

folder) and a report in pdf format should be uploaded on E-Classroom by midnight on the

deadline date.

A hard copy of the report is also required to be submitted. The report MUST BE securely

bound (e.g. ring-binded). That report should be submitted to me on the day of your

demonstration. The report should contain :-

o Cover Page

o Table of Contents

o Organization Background

o A Storyboard to illustrate the objective of the site

The storyboard must include:

The aim of each page.

The layout of each page (indicate where on the page you wish to

place images, text, navigation bar etc.)

o Site Hierarchy/Site Map

A site hierarchy must complement the storyboard. The site hierarchy is

intended to illustrate the relationship between the pages in your

storyboard. Its major aim is to establish the navigation structure of your

site.

Appendices:

o Appendix 1 Screen Shots of Working Website with explanations

o Appendix 2- All Source Code

o Appendix 3- Work Schedule

o Appendix 4 Bibliography
http://www.000webhost.com/http://www.000webhost.com/http://www.000webhost.com/


3/8

Page 3 of8

Detailed Specification

You are required to design and build a dynamic website for an organization of your

choice that will allow visitors to the website to view information about them. The website

should also allow visitors to become members to the website by filling out an onlineregistration form. Members of the website should have a secure section that would

allow them to view and edit their personal information as well as delete their account if

they no longer want to be a member of the website

Functionality to be achieved

You are required to complete all client side and server side functionality. Both the client

and server sides are expressed as a number of levels. The level of functionality

implemented in your website will determine the maximum marks you can receive.

Design graphics and animations that are optimized for your website. You are required to

create the following:

A logo

A static banner

An animation

Any additional graphics you will require for the site such as navigational buttons

etc.

All graphics and animation must be original. The graphics must be of any of the file

types .gif, .png or .jpg. All files must be saved in a web compatible format and saved in

the IMG folder.


4/8

Page 4 of8

CLIENT SIDE

Web pages vary in layout and features, however most web pages incorporate basic

components as shown in the following example : -

The header component normally consists of the organizations logo, organizations

name and other pertinent information.

The body component normally consists of a side bar which lists links that would

navigate users to other pages in the website. The content area displays

content/information to the user.

Lastly, the footer section normally displays the organizations title, address, copy right

information as well as the organizations contact numbers and email address.


5/8

Page 5 of8

LEVEL 1 (9 MARKS)

Create a home page.

Your home page should have links that will navigate the user to all other web pages

within the website.

In addition, your home page should have an area that briefly explains the

organization.

A XHTML login form which will allow members to authenticate with the website

should be placed in an appropriate area on the home page.

LEVEL 2 (6 MARKS)

Create additional pages relevant to your website.

LEVEL 3 (15 MARKS)

Create a Registration page. This web page will display an XHTML form that will

capture the following pertinent information from the user.

o First name

o Last name

o Address

o Date of Birth

o Gender

o E-mail Address

o Image Upload

o Username

o Password

o Confirm Password

On submitting the form an acknowledgement should be generated, Thank you

firstname lastname, your information has been recorded.


6/8

Page 6 of8

LEVEL 4 (7 MARKS)

Create a members View page (Profile Page) and a members Edit page.

The members view page would display members personal information stored in the

database.

The members edit page would display a populated XHTML form that would allow the

user to edit their personal information.

ALL XHTML forms must be validated using JavaScript to ensure that data is entered in all

fields, else a suitable message should be displayed and the user should be allowed to re-

enter the data.

SERVER SIDE

LEVEL 5 (5 MARKS)

Create a database called ITProject and a table in the database called members. The

members table should have relevant columns that would store the data captured

from the form in LEVEL 3.

LEVEL 6 (10 MARKS)

The XHTML form that was created in LEVEL 3 should now allow visitors to create an

account for the website.

All the information that was entered on the XHTML from by the user should be

stored in THE MySQL database created in LEVEL 5.

All passwords must be stored in an encrypted format in the database.

LEVEL 7 (10 MARKS)

The XHTML form that was created in LEVEL 1 should now allow MEMBERS of the

site to authenticate with the website (Login) using their username and password.


7/8

Page 7 of8

NOTE: You will be required to initiate some sort of session to prevent unauthorized

access from further activity.

LEVEL 8 (13 MARKS)

Both the members View page (Profile Page) and members edit page created in

LEVEL 4 should now display the Logged-in user information stored in the database

and the image the user uploaded in Level 4.

In addition these pages can only be accessed after the MEMBER authenticates with

the website in LEVEL 7. These pages must be secure, that is, only MEMBERS of

the site are allowed to view the pages.

LEVEL 9 (15 MARKS)

The XHTML edit form that was created in LEVEL 4 should now be populated with

the member information and they should now be allowed to edit their existing

information.

NOTE: Editing information is not the same as re-entering data. The user may seek to

change a spelling error or change address details and thus, should not be required to

re-enter complete data.

LEVEL 10 (7 MARKS)

Create a delete account page that would allow the MEMBERS to delete their

account. Like the pages specified in LEVEL 8, this page is also a secure page and

can only be access after the user authenticates with the website in LEVEL 7.

NOTE: There are two types of users of the website:-

1. Visitors- These users can only view the Home page and registration page.

2. Members- These users can view all web pages that is, Home page, registration

page and secure pages.


8/8

Page 8 of8

Assessment Criteria

Marks would be awarded for:

Functionality

o

Did the candidate achieve all functionality or just some?o How well was the functionality achieved?

o Was any extra functionality that was not included in the requirements but

added value to the website, added?

User interface design and overall usability of website

o Is the website easy to use?

o Can the user easily navigate from one page to the next?

o Is the navigation straightforward?

o Are there any orphan pages?

o Is the layout consistent, attractive and easy to read?

o Are all messages clear and precise?

o Were all the forms validated?

Browser Compatibility

o Does the website operate and look the same in the above mentioned

browsers?

Directory Structure

o Does the website directory structure conform to the requirements stated

above?

Quality of Code

o Were meaningful comments used?

o Is the code easy to read and understand?

o Was the code well structured and did it include any indentation?

itec244 project

Documents