ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Duong Van Thanh Son Student ID GCD201619

Class GCD1002 Assessor name Phyo Min Tun

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.
 Student’s signature Son

Grading grid
P5 P6 P7 M4 M5 D2 D3
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:
Table of Contents
I. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE (P5) .................................................................. 6
1. Users’ requirements by User Story template....................................................................................................... 6
2. Review Accessibility Standards and Guidelines ................................................................................................. 6
2.1. Design principles ................................................................................................................................................................................................ 6
2.2 . Guideline ............................................................................................................................................................................................................... 7
2.3. Success Criteria ................................................................................................................................................................................................... 7
3. Use case diagram describing users’ behavior on the system ......................................................................... 8
4. Wireframes for each proposed pages..................................................................................................................... 9
a) Landing page ........................................................................................................................................................................................................... 9
b) Login page ................................................................................................................................................................................................................ 9
c) Register page ........................................................................................................................................................................................................ 10
e) Cart page ................................................................................................................................................................................................................ 11
5. Site map for web development ............................................................................................................................... 11
II. IMPLEMENTATION OF WEB DESIGN AND DEVELOPMENT (P6)......................................................... 12
1. Screenshots of webpages and source code ......................................................................................................... 12
a) Landing page ........................................................................................................................................................................................................ 12
b) Register page ....................................................................................................................................................................................................... 16
c) Login page .............................................................................................................................................................................................................. 19
d) Profile page ........................................................................................................................................................................................................... 21
e) Cart page ................................................................................................................................................................................................................ 22
2. Features of the website.............................................................................................................................................. 25
a) Registering a new user .................................................................................................................................................................................... 25
b) Login with email and password .................................................................................................................................................................. 27
c) Cart............................................................................................................................................................................................................................ 27
IV. TEST PLAN / TEST LOG TO REVIEW WEBSITE FUNCTIONALITY AND PERFORMANCE (P7) ..... 29
Figure 1 Landing Page.................................................................................................................................................. 12
Figure 2 Code: Header ................................................................................................................................................. 13
Figure 3 Code: Footer ................................................................................................................................................. 14
Figure 4 Code: Landing page ....................................................................................................................................... 14
Figure 5 Code: Component.......................................................................................................................................... 15
Figure 6 Database: Product ......................................................................................................................................... 15
Figure 7 Register .......................................................................................................................................................... 16
Figure 8 Code: Register ............................................................................................................................................... 17
Figure 9 Code: Register ............................................................................................................................................... 18
Figure 10 Code: Login .................................................................................................................................................. 19
Figure 11 Code: Login .................................................................................................................................................. 20
Figure 12 Database: Account ...................................................................................................................................... 20
Figure 13 Profile page.................................................................................................................................................. 21
Figure 14 Code: Profile page ....................................................................................................................................... 21
Figure 15 Cart page ..................................................................................................................................................... 22
Figure 16 Code: Cart Page ........................................................................................................................................... 23
Figure 17 Code: Cart page ........................................................................................................................................... 24
I. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE (P5)

1. Users’ requirements by User Story template

As a customer, I want to view all the available products on the website so that I can easily decide on what
to buy.

As a customer, I want to create an account on the website so that it can save my personal information to
make purchases easier.

As a customer, I want to view the account information I have created on the website so that I can easily
manage my account information.

As a customer, I want to have an e-shopping cart so I can add or remove the items I am considering at will.

As a manager, I want to view, add or remove the products on the website so that I can easily manage
everything that my company sells on the website.

As a manager, I want to view all the registered customers’ accounts information so that it will be more
convenient and safer to deal with customers when I know who they are.

As a manager, I want to view all the orders of the customers so that I can easily calculate the company’s
revenue.

2. Review Accessibility Standards and Guidelines

The Web Content Accessibility Guidelines (WCAG) is a set of standards created and

recognized by the World Wide Web Consortium. The purpose of WCAG standards is showing

off how to make a website’s content become clearly with the disabled people who have the

disabilities about visual, auditory, linguistic, cognitive, language, neurological impairments and

so on. Those standards are:

2.1. Design principles

Perceivable: The information and user interface must be clear to perceive

Operable: All the website elements must be operable

Understandable: The user interface elements should be easily to understand and follow

Robust: The website’s content must be strong enough to be interpreted by various

 users including the supporting technologies

2.2 . Guideline
a) Perceivable

• Provide a variety of text alternatives for non-text contents such as large print,
• Braille, speech, symbols, etc.
• Provide several choices for time-based media
• The website content should be presented in several ways
• Support the users to hear and see the content easily, including separating • foreground from
background
b) Operable

• All the functionalities from keyboard must be operable

• Provide the users an amount of time long enough to read and take advantages of
• the content
• Do not display the content that causes seizures
• Provide to the users how to navigate, lookup content, and locate their position c) Understandable

• The text content must be readable and easy to understand

• The website must be presented in predictable ways • Support users avoid making and fixing
mistakes
d) Robust

Optimize the ability to be compatible with the current users and potential users, including

the assistive technologies

2.3. Success Criteria

To approach the WCAG compliance, W3C have divided the success criteria into three implementation

levels including A, AA, and AAA

Priority 1: A website developer must meet with this checkpoint. Unless one or many groups

will not be able to access the information on the website, satisfying this level is the basic

necessity to use the website’s resources.

 Priority 2: A website developer should meet with this checkpoint. Unless one or many

groups will not be able to access the information on the website, satisfying this checkpoint will eliminate

the barriers when users access the web resources.

Priority 3: A website developer may meet with this checkpoint. Unless one or many groups

will not be able to access the information on the website, satisfying this checkpoint will

improve the accessing website experience.

3. Use case diagram describing users’ behavior on the system

This is the use-case diagram consisting of two users’ roles (customer including registered customer, guest,
and manager) corresponding to eight different users’ actions depending on the type of user.
 4. Wireframes for each proposed pages

a) Landing page

It includes a navigation bar that allows users to switch between landing pages, profiles, and cards. User can
use the logout button to log out of the current account

b) Login page

This is the wireframe of the login page consisting of a home button and a login form including inputting
spaces for users, login button and a registration link.
 c) Register page

This is the wireframe of the register page consisting of a home button and a register form including
inputting spaces for users, registration button and a login link.

d) Profile page
 e) Cart page

This is the wireframe of the shopping cart page spaces for product information when added to cart, and
total price information.

5. Site map for web development

As can be seen, this is a simple and predictable website structure with basic content and the minimum
functions of an e-commerce website to satisfy the needs of a single type of user, who is the customer.
II. IMPLEMENTATION OF WEB DESIGN AND DEVELOPMENT (P6)

1. Screenshots of webpages and source code

a) Landing page

Figure 1 Landing Page

This is a website that sells Apple products

 Figure 2 Code: Header

This is the code to display each component of the header including: Shopping Cart, Profile( Welcome
User_Name, Si, Profile, Log out
 Figure 3 Code: Footer

This is the code to display each component of the footer including: About Us, Userful Links, Follow Us

Figure 4 Code: Landing page

This code helps to get product data from the database, then combine with the header and footer to display a full
landing page.
 Figure 5 Code: Component

This code shows how the server gets the products data from the database.

Figure 6 Database: Product

Easily managed database, you can add or remove products

b) Register page

Figure 7 Register
Figure 8 Code: Register
 Figure 9 Code: Register

This code helps to check if the account already exists in the database and validate the information entered by the
user is valid or not.
c) Login page

Figure 10 Code: Login

 Figure 11 Code: Login

This code helps the website check whether the user has entered the correct account and password corresponding to
the data in the database.

Figure 12 Database: Account

 d)

Profile page

Figure 13 Profile page

Figure 14 Code: Profile page

e) Cart page

Figure 15 Cart page

 Figure 16 Code: Cart Page

This is the PHP code of the shopping cart page to display the items’ information chosen by customers and also
allow them to remove an item if needed.
 Figure 17 Code: Cart page

This is the HTML and PHP code of the shopping cart page interface which auto calculate the total amount of money
of the chosen items.
 2. Features of the website

a) Registering a new user

In this registration form, in case I do not enter all the information, it will require me to fill in the blanks by popping
up the “Please fill out this field.” notification on the first unfilled blank and so on to the last unfilled one.

In case I enter the unidentical password and re-password, it will display the following message:
In case I register using an email that has existed in the database, it will display the following message:

When I register with valid credentials, it will finally display the following message and save all the information I have
entered to the database:
b) Login with email and password

c) Cart

It will look in the database for accounts with the same email and password as above to allow the user to log in. If
they cannot be found (i.e. the user entered the wrong email or password, or both), it will display the following
message:

Shopping cart can add more products

If you choose to add an existing product to your cart, this message will appear
 IV. TEST PLAN / TEST LOG TO REVIEW WEBSITE FUNCTIONALITY AND PERFORMANCE (P7)
Test What is How Test data used Expected Date Actual results Status
being results
tested
1 The Register a ‘thanhson, ‘20, The 15/ Pass
accuracy new ’68 An Dương Vương’, information 5/2
of data account ‘duongvanthanhson5@gmail.com’,displayed 022
when with ‘123456’, ‘123456’ on the
entered requied database
into the information matches
database. on the the
website. information
that I used
to create
the
registered
account.
2 The case of Try making thanhson, ‘20, It displays 15/ Pass
password the ’68 An Dương Vương’, a message 5/2
and Password ‘duongvanthanhson5@gmail.com’, stating 022
confirm and ‘123456’, that the
password Confirm ‘1234567’ password
input are Password and
not the are not the confirm
same same. password
when are not the
registering. same and
stop the
program.
3 The case of Leave It displays 15/ Pass
not some fields a message 5/2
entering blank on stating 022
enough the that users
fields registration must
when form. enter all
logging in fields
or when
registering. logging in
or
registering
4 The case Register ‘duongvanthanhson5@gmail.com’ It displays 15/ Pass
when an email a message 5/2
registering that was stating 022
with an used to that users
email that register must enter
already for the another
exists in previous email
the account when
database registering
and stop
the
program.
5 The case Log in with It display a 15/
when password message 5/2
logging in which are stating 022
with different that users
incorrect form that must
in reenter
their

email or the email or

password. database. password to
log in.

Source code: https://1drv.ms/u/s!AvtmmCgv0Wbihya0vLO0sGaP8OFs?e=0mZTqu