Web Application Assignment - 30% Due: 11:00pm – Tuesday, 31st of January 2017 Checkpoint Due: During your registered practical on Tuesday the 17th of January 2017 General Instructions • Your HTML files must be validated by the W3C validator at http://validator.w3.org • You must test your web pages in Google Chrome to make sure they work. You should test them in another browser, but this is not a requirement. • To be eligible for full marks for this assignment you must follow all instructions given within this document. Although your functionality may work, if it is not to the instructions you will not get full marks. For instance, you do not do a post back for a form when asked, instead you have a separate PHP file handling the form submission. • Save all your files (HTML, CSS, images) to your /practicals/assignment1 folder on your TWA website. • A written report on the work carried out is to be included with your submission. This is to be in PDF format and saved within your assignment1 folder. • This assignment is not a group based assignment. Collusion of any kind when discovered will be treated as a case of academic misconduct and will be dealt with in the manner set down in the University's relevant policy • Any forms created must be easy to use and be styled accordingly. This means choosing the right inputs devices for the data required. All inputs should have labels • Input validation must be both client and server side to enforce any validation requirements. No form should submit if there is a required field empty or the data type or format is wrong (client side), and no form should succeed to save if there is a required field empty or the data type or format is wrong (server side). • All in page calculations, dynamic page behaviour or other functionality provided by the client (internet browser) must be created through javascript unless specified otherwise. • All pages must use CSS (Cascading Style Sheets) as the only way of modifying presentational elements. All this CSS will be put into a file called styles.css. You may use embedded stylesheets or inline styles if you have unique presentational elements, otherwise everything must be in the external styles.css file • You will approach the design of your site as mobile first. This means you will build a responsive website that will be respond to changes in the size of screen. • It is your responsibility to ensure no inappropriate images or content are used. 2 • There are no files given, or details of presentation. The styling is up to you, however you must reflect on the type of site it is and how a user would perceive such a site – it must be professional and user friendly • Navigation must be present on all pages. It should also respond to changes in screen size. Assignment Description and Tasks Your assignment is to build a simple eCommerce site. The products available for this site is up to you. There is no facility for product images, so your products will have a name and description only. Navigation There are two (2) different types of users on the site, user, and staff. Both users use the same login feature, however depending on the type of user logged in will determine what the user can navigate to. This means there will be dynamic links dependent on the type of user logged in and public links available to all users and guests (those not logged in). • Public links : all users o Home Page o Products o Categories o Search o Shopping Cart o Login o User Registration • Private Links : user and staff users only o Checkout o Profile o Previous orders • Private Links : staff users only o Users o Orders o Products o Categories 3 Validation Validation is to be both client and server side. This means where there are forms, validation should be carried out with both javascript and PHP. The validation rules, unless specified, are to be determined by you, however the validation should prevent the form submitting data that could lead to incorrect data being submitted or stored. For example, the email is a VARCHAR(100) type in the database which means a 100 character string can be entered in any format. If anything but a valid email is stored validation has failed. Another example could be the post code can only store an INT type, if your form allows and/or tries to save this to the database and your validation has failed. Note: If you use HTML validation, please know it will be turned off during marking. This means if will not have any affect invalidating form input. To turn off HTML validation for your form you can use the novalidate attribute

Site Report You are to do a simple report, no more than one (1) page. This report will include: • A simple site map of all the pages on your site. • A basic assessment of security – are there any flaws you've found? • Suggested improvements to the site if any – future work? • Any users and their passwords you have created. It must be in PDF format and uploaded within your assignment1 folder 4 Database The database schema is as follows: Database data dictionary Table: user Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto Inc. email VARCHAR(100) This is the user's email address. It is always regarded as their login. There cannot be two email addresses the same Required Unique password VARCHAR(255) This is a hash of the user's password. Required fname VARCHAR(45) The first name of the user Required lname VARCHAR(45) The last name of the user Required address VARCHAR(100) The number and street address of the user Required suburb VARCHAR(50) The name of the suburb of the user's address Required state VARCHAR(3) A three character representation of the state Required postcode INT An integer representing the 4 number post code Required 5 creation DATETIME The date and time the user was created Required type INT The foreign key representing the user type Required Table: user_type Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto Inc. name VARCHAR(45) The name of the user type (user | staff) Required Table: product_order Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto Inc. user INT The foreign key representing the user who placed the order Required ordered DATETIME The date and time the order was placed Required Table: product_ordered Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto Inc. orderid INT The foreign key of the order that contains the product ordered Required product INT The foreign key of the product that was ordered Required price DOUBLE The price of the product ordered at the point of sale. Required quantity INT The quantity ordered of the product Required Table: product Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto Inc. name VARCHAR(45) The name of the product Required description TEXT An optional description for the product. Optional price DOUBLE The current price of the product Required inventory INT The number of product available for purchase Required category INT The foreign key of the product category Required Table: category Column Data Type Description Special id INT This is the primary key and identifier of the table record Required Auto In. name VARCHAR(45) The category name of a product Required 6 Connecting to the database You have your own unique database. To log into this database you have to use a username and password. Your database name for the Assignment is assignment### with the ### being your TWA site number. For your username it is your TWA username, however your password is twa###XX. The ### being your TWA site number and the XX being the first two (2) characters of your TWA site password. For instance, your TWA site is twa999, and your password is abcd7890, this would mean your password would be twa999ab. For these tasks you are to use the PHP mysqli extension - that is the MySQL Improved, do not confuse it with the general MySQL extension which is deprecated and should not be used! For reference to the mysqli extension and for all its capabilities please refer to http://php.net/manual/en/book.mysqli.php To connect to your database (using example user): connect_error) { echo "Failed to connect to MySQL" . $connection->connect_error; } ?> Listing data in the database You can see what is in the database, you can use the file listdata.php. Site Files The site will be made up of various files. As a bare minimum the following files should exist within your site: • index.php • products.php • categories.php • search.php • cart.php • login.php • logout.php • register.php • checkout.php • thankyou.php • profile.php • changepassword.php • history.php • users.php 7 • order-list.php • product-list.php • category-list.php • add-product.php • add-category.php • styles.css • actions.js index.php This is your home page to the site. You can incorporate static images, and you can stylise it the way you want. You do however have to ensure the user can navigate all sections of the site from this page. This includes the public and private links. The shopping cart links should show the amount of products it contains on all pages. Remember you are building for a wide range of devices and therefore your design should be responsive - use media queries (refer to style.css file) Hint: Create your home page first, and use this as your site design. This way you can copy and paste the design over and over for all your files – you can be adventurous and create a header.php and footer.php file to keep it in one location. Before you copy and paste in all your files, create all the public and private links first with PHP, so you don't have to create this later for each file. products.php The products page lists all the products available within your site. They are to be listed in alphabetical order. The way you present your products is up to you. It must be clear though. It also must have a link to add the product and a quantity to the shopping cart. The products page can also handle product categories, restrict listing only to category, when a user selects a category from the category.php page. To achieve something like this with a link (An alternative could be a dropdown box): Home

About

Services

Contact

Privacy Policy

Terms of Use