Course: Internet Technology (ITEC244) Lecturer :Kadeem Best

Assignment Number :1 of 1 Date Given:15th March 2013

Contribution : 20% of course Date Due: 9th May 2013

Notes for the Student: This Group project is designed to give you practical experience in creating dynamic websites. Background: You will need to have access to a code editor, preferably Notepad ++, popular browsers (Internet Explorer, Safari, Fire-Fox, Google Chrome, Opera) and WAMP Server. Concepts covered: XHTML, CSS, Client Side Validation using Javascript, SQL, Database Design, 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 o o o o ITEC244_Group#_WEBAPP This folder would be the root directory of the website. All other folders MUST be stored in this folder. XHTML This folder would store all XHTML and HTML files. CSS This folder would store all CSS files. JS This folder would store all JavaScript files. PHP This folder would store all PHP files. Page 1 of 8

o o

IMG This folder would store all images for the website. 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

Assignment 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 o o o Cover Page Table of Contents Organization Background A Storyboard to illustrate the objective of the site The storyboard must include: o The aim of each page. The layout of each page (indicate where on the page you wish to place images, text, navigation bar etc.)

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 o o o Appendix 1 Screen Shots of Working Website with explanations Appendix 2- All Source Code Appendix 3- Work Schedule Appendix 4 Bibliography Page 2 of 8

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 online registration 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.

Page 3 of 8

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.

Page 4 of 8

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.

Page 5 of 8

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 reenter 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.
Page 6 of 8

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.
Page 7 of 8

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?

Page 8 of 8