Summer A 2019
Technologies for Web Applications 300582
Page 1 of 10
Web Application Assignment
Due: Wednesday 11:59pm 6th of Fe
uary 2019 – Assessment Weight: 30%
Note:
• Include comments for your student ID, Name, and Practical Class Time at the top of each source file
created.
• All instructions given in this document must be followed in order to be eligible for full marks for the
Web Application Assignment
• This assignment is not a group assignment; collusion, plagiarism, cheating of any kind is not
acceptable. Submitting your work to your TWA site signifies that the work uploaded is yours. If you
cannot honestly certify that the work is your own then do not upload it to your TWA site. Breaches
of the Misconduct Rule will be dealt with according to the university policy (see the learning guide
for more information)
• All files must be uploaded to your TWA web site before submission due date
• Ensure all HTML written is valid. Use http:
validator.w3.org to confirm before submission
Assignment Overview:
For this assignment, you are going to be build a basic eCommerce site. To do this, you are given a list of files
that you will need to create. These will be a mix of HTML, CSS, Javascript and PHP files. Within some of your
PHP files, you will be required to connect to and execute SQL statements on a database. This database will
e given to you and will be associated only with your TWA site.
Every concept or skill within this assignment has been demonstrated in lecture or has been part of a
practical class exercise. You will be combining all these concepts and skills to build your basic eCommerce
site.
Design and Styling
Within lectures and your practical classes, you have been given the styling and design that needs to be met
either via CSS or via a figure. For this major web assignment, you must design and style your own site. You
can adopt what has been given in your Practical Class exercises or you can start from scratch. Either way,
you must design and style your eCommerce site so it is professional looking. Your chosen design and styling
will be assessed.
Javascript and PHP Validation
All forms or where a user can provide input needs to be validated with both Javascript and PHP. HTML 5
validation will not be accepted as a valid form of validation.
Web Application Assignment Database
You have been provided with your own copy of the database called eshop on your TWA site. To access this
database, you have to use a username and password.
The following is a generic representation of the connection information to be used when connecting to your
eshop database (you do this with PHP code):
Summer A 2019
Technologies for Web Applications 300582
Page 2 of 10
Database Name: eshop###
Username: twa###
Password: twa###XX
Server: localhost
Where ### is your twa site number, and XX refers to the first two characters of your TWA site password.
For example, if your TWA site is twa999, and your password is abcd7890, then the following would be your
connection information:
Database Name: eshop999
Username: twa999
Password: twa999ab
Server: localhost
Using this information, you will use similar code to that below to connect to your database:
$connection = new mysqli('localhost', 'twa999', 'twa999ab', 'eshop999');
if($connection->connect_e
or) {
Echo out if it failed to connect to the database
echo $connection->connect_e
or;
}
Once connected to your database, you will have access to the eshop database and all its data. Figure 1
presents the Entity Relationship Diagram and the schema of your database.
If wanting, within the assignment files the Schema has also been provided – eshop.sql
Figure 1
Summer A 2019
Technologies for Web Applications 300582
Page 3 of 10
The eshop Database Data Dictionary:
User Table
Column Description Type Required
user_id This is an auto incrementing number to uniquely
identify a table row. You do not insert this
number into the database it is determined
automatically
Integer Yes
user_email This is the email address of the user. It will be
used as their login
VARCHAR(255) Yes
user_password This is an encrypted password. The encryption
used is sha256. If you store an unencrypted
password the admin cannot login.
VARCHAR(255) Yes
user_fname This is the first name of the user VARCHAR(45) Yes
user_lname This is the last name of the user VARCHAR(45) Yes
user_street This is the home street of the user, e.g. 4 Silly
Street
VARCHAR(45) Yes
user_subu
This is the home subu
of the user, e.g.
Pa
amatta
VARCHAR(45) Yes
user_state This is the home state of the user, e.g. NSW VARCHAR(3) Yes
user_post_code This is the home post code of the user, e.g. 2000 VARCHAR(5) Yes
user_type This is the type of user they are. There is
‘general’ and ‘admin’
VARCHAR(10) Yes
User Order Table
Column Description Type Required
order_id This is an auto incrementing number to uniquely
identify a table row. You do not insert this
number into the database it is determined
automatically
Integer Yes
order_datetime The date and time the order was placed DATETIME Yes
order_user_id The id of the user who placed the order. It is a
foreign key to the user table’s user_id column.
Integer Yes
Order Detail Table
Column Description Type Required
detail_id This is an auto incrementing number to
uniquely identify a table row. You do not insert
this number into the database it is determined
automatically
Integer Yes
detail_product_id The id of the product that was part of an order.
It is a foreign key to the user_order table
Integer Yes
detail_qty This is the number of items bought with the
product id that appears in the
detail_product_id column a particular row
Integer Yes
Summer A 2019
Technologies for Web Applications 300582
Page 4 of 10
detail_price This is the price the product was bought for at
the time the order was placed. It is not a
multiple of the price per product. It is the price
of one product.
Float Yes
detail_order_id The id of the order this detail belongs to. It is a
foreign key to the user_order table’s order_id
Integer Yes
Product Table
Column Description Type Required
product_id This is an auto incrementing number to
uniquely identify a table row. You do not
insert this number into the database it is
determined automatically
Integer Yes
product_name The name of the product VARCHAR(255) Yes
product_description The description of the product. TEXT Yes
product_price This is the price of an individual product. Float Yes
product_stock This is the quantity in stock. When a
purchase is made the quantity of the product
is updated
Integer Yes
product_image This is the image file name of the product. It
does not include the path to the file, just the
filename
VARCHAR(100) No
Use of Javascript and CSS Li
aries
IMPORTANT: This should only be used by students with prior understanding of these li
aries. If used,
instruction and support on how to use these li
aries will not be provided by your tutor.
Although they have not been presented in lecture or practical classes, if you feel you want to use either the
jQuery Li
ary for Javascript or the Bootstrap Li
ary for styling you may. However, you are only allowed to
include the two by placing the code from the optional-li
aries.txt file within the tag of
your files. The HTML
tags within the optional-li
aries.txt use content delivery networks
to provide the sources for jQuery and Bootstrap. You should not have the frameworks uploaded to your
TWA site.
Required Functionality and Files
Hint: Write your HTML, CSS first before you do any Javascript or PHP programming. This way you can get
your pages designed the way you want and then add the programming logic. This approach will make
development considerably easier. Plus, if you fail to implement the Javascript or PHP you can still get marks
for the HTML and CSS used to construct the page.
Navigation
The site must have a main navigation bar. Where you place this within your page is up to you. Every page
should have this navigation bar. Pages which fail to have a navigation bar will lose marks. The navigation bar
should display the following links:
• Home – links to index.php
• Products – links to list-products.php
Summer A 2019
Technologies for Web Applications 300582
Page 5 of 10
• Search – links to search.php
• Cart – links to cart.php
• My Profile – links to profile.php
o This should only be present if the user is logged in
• Order History – links to history.php
o This should only be present if the user is logged in
• Users – links to users.php
o This should only be present if the user is logged in and is a user type of ‘admin’
• Register – links to register.php
o If the user is logged in this link should not be present
• Login – links to login.php
o If the user is logged in this link should change to ‘Logout’ (logout.php)
Style and Design – styles.css
The styles.css file is your master CSS stylesheet for your site. Although you are allowed embedded and inline
styles, a focus on external styles should be maintained. For maximum marks, your style and design should
e responsive. This means it can be viewed both on a mobile screen and a desktop. Use the device preview
available in Google Chrome under Developer Tools.
Javascript – actions.js
This file is to hold all your javascript required for your pages; all your form validations or actions javascript
will perform.
Home page – index.php