300582 - technologies for web - your assignment is to build

Question

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

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.

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 https://php.net/manual/en/book.mysqli.php
To connect to your database (using example user):

$connection = new mysqli('localhost', 'twa999', 'twa999ab', 'assignment999');
if($connection->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

- 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):

// (categories.php)
// After retrieving from database go through each category
?>

// (products.php)
// The url is https://example.com/products.php?category=3
// If one of the above links are clicked you would get the category as so

$category = $_GET['category']; // = 3
?>

categories.php
This page provides a simple list of all the categories available. When a category is selected the user is taken to the products page where only the products available chosen category exists.

search.php
Is almost a replicate of the products page, however the user is able to search for products by a query. This means there has to be a search box available to the user (which could be present on all pages). The query will be passed via a GET request. A simple query could use WHERE clauses to find a product by name. For example:

SELECT * FROM example WHERE name LIKE '%query' OR name LIKE 'query%'
OR name LIKE '%query%';

cart.php
This page presents the contents of the shopping cart to the user. The name of the product, price, total, has to be displayed to the user.
When a user clicks ‘Add to Cart', this page also handles the GET request with the product being added, and the quantity. For example:
https://example.com/cart.php?product=1&qty=5

login.php
This presents a form for a user's username, which is their email address, and their password. Through
a postback the username and password is checked against the database. All passwords must be encrypted (hashed), meaning they are not to be stored where they can be read. If the user fails to login, a error is to be displayed informing the user that the username and password entered is incorrect.
When a user logins in a session variable is created for them, so they don't have to log in again during session.

Hint:
Do not destroy your user session when a user successfully logs in. If you destroy your session the user will lose what they have put in their shopping cart.

logout.php
This page does not present anything to the user. Instead, the user is taken to this page when they click logoff, which is a dynamic link that appears throughout the site once logged in. Once a user has been taken to this page their session is destroyed. Destroying the session results in them loosing access to the logged in only sections of the site, such as dynamic links and pages. Once their session is destroyed and they are logged out, they are redirected to the home page index.php

register.php
This page presents a form for registration. A user will get to this through a register link on your site. The link to this page should also be present on the shopping cart page, if they are not logged in, as they can't checkout unless they are registered.
Remember the password is to be encrypted!

Hint:
This registration form only allows the user to be the type of User. This means you will have to create a staff member manually first so you can start the Staff user base. Once this initial user is created, when they log in they will be able to turn normal users into staff. This will be in the list users.php file.

checkout.php
Checkout is only available to userss who are logged in. It is the page which a user progresses to after they have put something into their cart. They cannot progress to checkout if there is nothing in their cart. This page will present two forms. One for shipping details, this will be pre-populated by the user's details in their profile, and the payment method. You will have two choices for payment. One an Electronic Wallet, such as Paypal, and the second being credit card. The choice will be decided by the user, upon the user's choice a section underneath the selection should appear accommodating their choice. For the electronic wallet, you present a badge which is present in assignment files given to you:

For the credit card, you must present a form with the following fields
- Type of card
o Mastercard
o Visa
- Name on Card
- Card Number

- CSV
- Date of Expiry
o Month
o Year

Note:
If changes have been made to the shipping details, these changes must be updated when they make their complete their order.

thankyou.php
Once a successful checkout has taken place, this page will be presented. On this page will be a summary of the shipping details, the order number, and what was bought and the totalling price. You can think of it as the invoice.

profile.php
For the currently logged in user, they will be able to update their details for their profile. Upon submission their details will be updated.

Hint:
The code for this is the same as the checkout.php where you must update the user details if changes have been made.

changepassword.php
This page is only accessible through the profile.php page. The user must enter in their old password, and also have the new password confirmed. A password cannot be updated, unless the old password is valid.

history.php
This is a simple page listing the currently logged in user's orders. You only need to list the order ID, the total price of the order, and the date it was placed.

users.php
This page is only accessible by users who are of staff type. On this page, all users (Staff and User types) are to be listed via a table. You are also to provide a link within the list to make the user a Staff type or to revoke it.

Hint:
The changing of user type can be carried out by a callback for example:

order-list.php
This page provides a list of all orders placed within a table. The orders are to be sorted based on date.

add-product.php & add-category.php
These two pages will be accessible via their relevant sister pages, product-list.php and category- list.php. They are to present forms to add new products or categories. These forms are to also have the capability to edit previous products or categories that have been selected to be edited from the product- list.php or category-list.php
Remember a product will belong to a category, therefore the dropdown to add the product must be dynamic as categories can change.

Hint:
The using a query string you can select the product or category that needs to be edited:
https://example.com/users.php?product=7

product-list.php
This page provides a list via a table, for all products on the site. You are also to provide a link within the table to delete a product. This can be carried out via a callback. Also, an edit link must be present to update a product's details - when clicked will take the user to add-product.php. Make sure there is confirmation before a product is deleted.

category-list.php
This page provides a list of available categories within the site. You are also to provide a link within the table to delete a category. This be carried out by callback. Make sure there is confirmation before deletion. To get maximum marks for this section you are to provide a way to reassign products belong to the category being deleted. You don't want to delete a category that will delete 1,000s of products, when you only wanted a certain few.

styles.css
This file is your Cascading Style Sheet. Within it will hold all your style rules for your site. To get maximum marks there shouldn't be any embedded or inline styles unless it is unique to that page or HTML element.

actions.js
This file is your javascript file. You should place all your javascript within this file and link to it within your HTML.

Checkpoint
4 marks, consisting of one mark for a sitemap, one mark for home page complete, two marks for user registration, one marks for dynamic listing of records
If you fail to attend your checkpoint practical you will receive zero. At any time during the practical your name may be called out for marking the checkpoint. If you are not there when this happens you receive zero - even if you turn up to the practical late. The checkpoint is a formal assessment item; therefore, it is your responsibility to present your assessment when it is to be assessed for marking.
The marking is as follows:
- Sitemap: 1 mark if all pages/files are presenting in a sitemap showing structure of their site, 0 otherwse
- Home Page: 1 mark if the home page is functional and a layout is present via CSS is implemented, but final design need not be complete, 0 otherwise
- User Registration: 2 marks if user registration is complete with validation and successfully inserts into database. 1 mark if user registration is complete with validation but fails to insert, 0 otherwise.
- Dynamic Listing: 1 mark if one record from the database is listed and formatted in accordance to the site, i.e. list products, 0 otherwise.

Attachment:- Assignment-rev.rar

Attachment:- assignment-files.zip