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 Nguyen Dang Khanh Hang Student ID GCD210581

Class GCD1103 Assessor name Phan Thanh Tra

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

Grading grid

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

Grade: Assessor Signature: Date:

Signature & Date:
Contents
I. Introduction: ............................................................................................................................................................................................ 8
II. Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and
user requirements (P5): ............................................................................................................................................................................... 8
1. Users’ requirements: ........................................................................................................................................................................... 8
2. Accessibility standards and guidelines:............................................................................................................................................... 9
2.1. Principles of Web Accessibility: .................................................................................................................................................. 9
2.2. Web design guidelines: ............................................................................................................................................................... 10
3. Use case diagrams: ............................................................................................................................................................................ 11
4. Wireframes: ....................................................................................................................................................................................... 12
4.1 Landing Page: .............................................................................................................................................................................. 13
4.2. Home Page:................................................................................................................................................................................. 14
4.3. Product Page: .............................................................................................................................................................................. 15
4.4 Contact Page: ............................................................................................................................................................................... 16
4.5. Cart Page..................................................................................................................................................................................... 17
4.6 Login Page ................................................................................................................................................................................... 18
4.7 Register Page ............................................................................................................................................................................... 19
5. Site map:............................................................................................................................................................................................ 20
III. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content (P6): ....................................................................................................................................................... 21
1. Screenshots of the webpages: ............................................................................................................................................................ 21
Landing Page: ............................................................................................................................................................................. 21
Login Page: ................................................................................................................................................................................ 27
Register Page: ............................................................................................................................................................................. 34
 Home Page: ................................................................................................................................................................................ 39
Product Page:.............................................................................................................................................................................. 46
Contact Page:.............................................................................................................................................................................. 52
Cart Page: ................................................................................................................................................................................... 55
IV. Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your
website. User Experience (UX) and User Interface (UI) (P7): ................................................................................................................. 64
1. Test plan: ........................................................................................................................................................................................... 64
2. Test case: ........................................................................................................................................................................................... 65
3. Evidence for the actual result: ........................................................................................................................................................... 67
V. Reference: ............................................................................................................................................................................................ 81

Table of Figures:

Figure 1: WCAG ......................................................................................................................................................................................... 9

Figure 2: Use case Diagram ...................................................................................................................................................................... 12
Figure 3: Landing Page ............................................................................................................................................................................. 13
Figure 4: Home Page ................................................................................................................................................................................ 14
Figure 5: Product Page .............................................................................................................................................................................. 15
Figure 6: Contact Page .............................................................................................................................................................................. 16
Figure 7: Cart Page .................................................................................................................................................................................. 17
Figure 8: Login Page ................................................................................................................................................................................. 18
Figure 9: Register Page ............................................................................................................................................................................. 19
Figure 10: Site Map .................................................................................................................................................................................. 20
Figure 11: Landing Page ........................................................................................................................................................................... 21
Figure 12: HTML Landing Page............................................................................................................................................................... 23
Figure 13: HTML Landing Page(2) .......................................................................................................................................................... 23
Figure 14: CSS Landing Page ................................................................................................................................................................... 25
Figure 15:CSS Landing Page(2) ............................................................................................................................................................... 25
Figure 16: CSS Landing Page(3) .............................................................................................................................................................. 26
Figure 17: CSS Landing Page(4) .............................................................................................................................................................. 27
Figure 18: Login Page ............................................................................................................................................................................... 28
Figure 19: Navbar Login Page .................................................................................................................................................................. 29
Figure 20: HTML Login Page .................................................................................................................................................................. 30
Figure 21: CSS Login Page....................................................................................................................................................................... 32
Figure 22: CSS Login Page (2) ................................................................................................................................................................. 32
Figure 23: setting.php ............................................................................................................................................................................... 32
Figure 24: dangnhap.php .......................................................................................................................................................................... 33
Figure 25: Enter wrong ............................................................................................................................................................................. 33
Figure 26: Register Page ........................................................................................................................................................................... 34
Figure 27: HTML Register Page............................................................................................................................................................... 35
Figure 28: CSS Register Page ................................................................................................................................................................... 36
Figure 29: setting.php ............................................................................................................................................................................... 36
Figure 30: Database .................................................................................................................................................................................. 37
Figure 31: dangky_submit.php ................................................................................................................................................................. 37
Figure 32: Register Page (2) ..................................................................................................................................................................... 38
Figure 33: Database(2) .............................................................................................................................................................................. 39
Figure 34: Register .................................................................................................................................................................................... 39
Figure 35: Home Page .............................................................................................................................................................................. 40
Figure 36: HTML Home Page .................................................................................................................................................................. 41
Figure 37: HTML Home Page (2) ............................................................................................................................................................ 42
Figure 38: HTML Home Page (3) ............................................................................................................................................................ 43
Figure 39: CSS Home Page ...................................................................................................................................................................... 44
Figure 40: CSS Home Page (2) ................................................................................................................................................................. 45
Figure 41: CSS Home Page (3) ................................................................................................................................................................. 46
Figure 42: product Page ............................................................................................................................................................................ 47
Figure 43: Product Page (2) ...................................................................................................................................................................... 48
Figure 44: HTML Product Page ............................................................................................................................................................... 49
Figure 45: HTML Product Page (2) .......................................................................................................................................................... 50
Figure 46: CSS Product Page .................................................................................................................................................................... 51
Figure 47: CSS Product Page (2) .............................................................................................................................................................. 52
Figure 48: Contact Page ............................................................................................................................................................................ 52
Figure 49: HTML Contact Page ............................................................................................................................................................... 53
Figure 50: HTML Contact Page (2) .......................................................................................................................................................... 54
Figure 51: CSS Contact Page .................................................................................................................................................................... 55
Figure 52: Cart Page ................................................................................................................................................................................. 56
Figure 53: HTML Cart Page ..................................................................................................................................................................... 57
Figure 54: HTML Cart Page (2) ............................................................................................................................................................... 58
Figure 55: HTML Cart Page (3) ............................................................................................................................................................... 59
Figure 56: CSS Cart Page ......................................................................................................................................................................... 60
Figure 57: CSS Cart Page (2).................................................................................................................................................................... 61
Figure 58: CSS Cart Page (3)................................................................................................................................................................... 62
Figure 59: CSS Cart Page (4)................................................................................................................................................................... 63
Figure 60: CSS Cart Page (5).................................................................................................................................................................... 64
Figure 61: Evidence of case 1 ................................................................................................................................................................... 68
Figure 62: Evidence of case 2 ................................................................................................................................................................... 68
Figure 63: Evidence of case 3 ................................................................................................................................................................... 69
Figure 64: Evidence of case 4 ................................................................................................................................................................... 70
Figure 65: Evidence of case 5 ................................................................................................................................................................... 71
Figure 66: Evidence of case 6 ................................................................................................................................................................... 72
Figure 67: Evidence of case 7 ................................................................................................................................................................... 73
Figure 68: Evidence of case 8 ................................................................................................................................................................... 73
Figure 69: Evidence of case 8 ................................................................................................................................................................... 73
Figure 70: Evidence of case 9 ................................................................................................................................................................... 74
Figure 71: Evidence of case 9 ................................................................................................................................................................... 75
Figure 72: Evidence of case 10 ................................................................................................................................................................. 76
Figure 73: Evidence of case 10 ................................................................................................................................................................. 76
Figure 74: Evidence of case 11 ................................................................................................................................................................. 77
Figure 75: Evidence of case 11 ................................................................................................................................................................. 77
Figure 76: Evidence of case 11 ................................................................................................................................................................. 77
Figure 77: Evidence of case 12 ................................................................................................................................................................. 78
Figure 78: Evidence of case 12 ................................................................................................................................................................. 78
Figure 79: Evidence of case 13 ................................................................................................................................................................. 79
Figure 80: Evidence of case 13 ................................................................................................................................................................. 79
Figure 81: : Evidence of case 14 ............................................................................................................................................................... 80
Figure 82: Evidence of case 14 ................................................................................................................................................................. 80

Table of Table:

Table 1: Test Plan ..................................................................................................................................................................................... 65

Table 2: Test Case ..................................................................................................................................................................................... 67
I. Introduction:
✓ In assignment 1, I discussed website development technologies. Moving on to project 2, I will design and build an e-commerce
website using medium-fidelity wireframes and a comprehensive list of customer and user requirements. A booklet is also
supplied to outline the process of constructing the website, including relevant concepts, standards, and recommendations for
producing a branded, multipage website backed by actual material. Finally, there is a table of test cases to demonstrate that
each function works properly.

II. Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirements (P5):
1. Users’ requirements:
As an administrator:
− I want to add products to the website so that customers can choose more.
− I want to remove the old products so that I can update new products.
− I want to access customer account information including their order information so that I can deliver the products
they ordered to their home
− I want to view orders so that I can approve them.
− I want to statistic products so that I can know products quantity.

As a customer:
− I want to search products so that I can buy them.
− I want to view products so that I can know well the products.
− I want to be able to view, add, delete, and update products in my cart so that I can buy precisely what I want.
− I want to examine my profile to ensure that my information is right.
− I want to check my order so that I make sure what I want to buy.
− I want to check my order status so that I can know where my products are.
− I want to feedback so that I can help the shop improve quantity.
− I want to sign up as a member to receive the most recent alerts.
− I want to login to use the full functionality of the website.
 2. Accessibility standards and guidelines:

Figure 1: WCAG

− Web Content Accessibility Guidelines (WCAG) 2.1 specifies ways to make Web content more accessible to individuals with
impairments. Visual, auditory, muscular, verbal, cognitive, language, learning, and neurological problems all contribute to
accessibility. Although these recommendations cover a wide variety of topics, they cannot meet the requirements of persons
with all types, degrees, and combinations of disabilities. These standards also make Web material more useable for older
people whose skills change as they age, and they frequently increase usability for all users.

2.1. Principles of Web Accessibility:

• It has four main principles: perceivable, operable, understand, and robust.
1. Perceivable:
Information components and User Interfaces must be presented in such a way that users can not only read, but also through
other devices, people with disabilities can perceive the content of the information.
 When an image is missing Alt text, the device/app reader screen cannot read the content of the image. The user
(blind/visually impaired) will not know what this image represents.
2. Operable:
Interface and navigation components can work just fine. Your web has to do something so that through devices such as
keyboards, buttons, etc., you can still control your web easily. Like how to change focus, page structure, time to read and
use content, move from module to module on the same page, users can feel that they are in that position of your website.
Friend.
Pages that automatically redirect, should have enough time so that people with disabilities such as blindness, low vision,
cognitive limitations may need more time to read the content. Therefore, it is necessary to design the appropriate amount of
time.
3. Understandable:
The information and operations of the UI must be easy to understand, in favor of the content of the website must be easy to
read, understand, navigate consistently, easily guess the direction of the navigation, help avoid errors or errors with clear
error messages clear,…
tabindex needs to be set appropriately, consistently, and easily to make it easy for users to navigate when using devices
such as Single-switch access devices, keyboards, etc.
4. Robust:
The content provided must be strong enough to reliably represent each component to user agents and assistive
technologies. Through parsing, how to set name, role, and value for html tags, how to convey status message

2.2. Web design guidelines:

• Create a web page format: You must first decide what kind of website you want to build. If you have an online store. It will
be focused on new launches, will have a high degree of customer involvement when it comes to purchasing, and visitors
will be able to contact the Shop using the information provided on the landing page.
➢ Determine your goals: Make a list of the most important goals for the website. Make a specific list or a list of the most
basic components, and add everything else that comes up when building a website to the list.
➢ Concerns concerning the website: Ask queries like, "How many pages should the website have?" as if you were a
customer.
− Is it required to incorporate connections to social media sites such as Facebook or Instagram on the website?
− Is it possible to join the site as a member?
 − Is it possible to place an order through the website?
➢ Create Basic Content: One of the most important aspects that separates your website from others is its content. The
content of a website is crucial to its success. Many people believe that establishing a visually appealing website,
increasing loading speed, and offering high-quality products is sufficient, but these are merely auxiliary aspects. The
most crucial thing for a new website is to create content, yet most of us still don't comprehend the true value of content,
therefore website content production remains a gray area.
➢ Website Promotion: Businesses may use social media to sell items and services on their websites, as well as to improve
their image and build brands.
➢ You'll need to create your website once it's up and running. If you believe it's just working properly, you're incorrect.
➢ You should continually be studying and upgrading your website in order to keep your visitors happy and comfortable.
You should also provide your consumers with very useful items. These are the elements that will attract and retain a
significant number of visitors to your website.

3. Use case diagrams:

 Figure 2: Use case Diagram

4. Wireframes:
− Wireframes are black and white layouts that define each page element, page feature, transition region, or navigation for your
website in a set size and location. They are simple, with no colors, fonts, logos, or other design features. The structure of the
site is the emphasis of the wireframe.
4.1 Landing Page:

Figure 3: Landing Page

4.2. Home Page:

Figure 4: Home Page

4.3. Product Page:

Figure 5: Product Page

4.4 Contact Page:

Figure 6: Contact Page

4.5. Cart Page

Figure 7: Cart Page

4.6 Login Page

Figure 8: Login Page

4.7 Register Page

Figure 9: Register Page

 5. Site map:
− A sitemap is a blueprint for your website that assists search engines in finding, crawling, and indexing all of its information.
Sitemaps also inform search engines about the most essential pages on your website.

Figure 10: Site Map

III. Use your design document with appropriate principles, standards and guidelines to
produce a branded, multipage website supported with realistic content (P6):
1. Screenshots of the webpages:

▪ Landing Page:
− The landing page will show if you visit the website without registering or logging in. The first is the navbar section, which
contains all of the website's functionality but will not be accessible. Following that are banner advertising, with the store's
details in the footer.

Figure 11: Landing Page

− This code is used for the navigation bar of the website including HTML. You can only click on the login function if you want
to use other functions.
 Figure 12: HTML Landing Page

− This is the code to display the banner ad and footer of the page. Footer includes information of the page including contact,
introduction, recruitment and some other information

Figure 13: HTML Landing Page(2)

− Below is the CSS used to add styles to the page such as changing layout, page color, changing font color, font, changing
structure...
 Figure 14: CSS Landing Page

Figure 15:CSS Landing Page(2)

Figure 16: CSS Landing Page(3)
 Figure 17: CSS Landing Page(4)

▪ Login Page:
− The login page displays a form that allows consumers to buy items from the shop.
Figure 18: Login Page
Figure 19: Navbar Login Page
− This is the code that displays the Login Page. Here are some input functions for users to enter the information needed to log in
if they already have an account. Conversely, if you do not have an account, the user must register an account by clicking the
"Register" button. Also, in this code there is <form action='' method=''> to assign data sending address and data sending
method. Here, is assigned to “dangnhap.php”.

Figure 20: HTML Login Page

 Figure 21: CSS Login Page

Figure 22: CSS Login Page (2)

− Here, I have setting.php to contain php code for database connection.

Figure 23: setting.php

− Next, the php code is used to get the data the user enters into the form to submit the data to the database. Check that you have
entered the correct username and password. If not, the "Please enter your full username and password" screen will appear.
Also, if users log in successfully, customers will come to the home page. Conversely, when you enter incorrect username or
password, the screen "Your username or password is incorrect" will appear.

Figure 24: dangnhap.php

Figure 25: Enter wrong

 ▪ Register Page:
− Customers will find a form on the register page that will assist them in creating an account. The signup form takes three sorts
of information: a username, a password, and a confirm password.

Figure 26: Register Page

− This is the HTML code of the Register Page. Here there are some input functions for the user to enter the information needed
to register an account and there are two buttons: Confirm and Reload. Also, in this code there is <form action='' method=''> to
assign data sending address and data sending method. Here, is assigned to “dangky_submit.php”.

Figure 27: HTML Register Page

Figure 28: CSS Register Page

Figure 29: setting.php

− A user table is created in the database with two columns, username and password.

Figure 30: Database

− This is the PHP code used to register an account. If all the data is valid then the user input data will be inserted into the
database.

Figure 31: dangky_submit.php

− Below, when the user enters the registration form, the entered information will be entered into the database. If successful, the
screen “Xin chào …. Bạn đã đăng ký thành công.”. And take you back to Login Page to login.

Figure 32: Register Page (2)

 Figure 33: Database(2)

Figure 34: Register

▪ Home Page:
− When you log in successfully, the system will take you to the Home Page and use the website's functions. The homepage is the
face of the website, so it is the website that is focused. The first is the navbar section that includes all the functionality of the
website. Below is a banner ad makes the website more special. Next are the areas containing the best collection of shop.
Figure 35: Home Page
Figure 36: HTML Home Page
Figure 37: HTML Home Page (2)
Figure 38: HTML Home Page (3)
Figure 39: CSS Home Page
Figure 40: CSS Home Page (2)
 Figure 41: CSS Home Page (3)

▪ Product Page:
− Customers will select and purchase things from the shop via the Product page.
Figure 42: product Page
Figure 43: Product Page (2)
Figure 44: HTML Product Page
Figure 45: HTML Product Page (2)
Figure 46: CSS Product Page
 Figure 47: CSS Product Page (2)

▪ Contact Page:
− The contact page includes the store's contact information and the customer's comments for the shop.

Figure 48: Contact Page

Figure 49: HTML Contact Page
Figure 50: HTML Contact Page (2)
 Figure 51: CSS Contact Page

▪ Cart Page:
− After the consumer adds things to the cart, they will be stored on the cart page. The cart will show the amount of money that
the customer must pay.
Figure 52: Cart Page
Figure 53: HTML Cart Page
Figure 54: HTML Cart Page (2)
Figure 55: HTML Cart Page (3)
Figure 56: CSS Cart Page
Figure 57: CSS Cart Page (2)
Figure 58: CSS Cart Page (3)
Figure 59: CSS Cart Page (4)
 Figure 60: CSS Cart Page (5)

IV. Create a suitable Test Plan identifying key performance area and use it to review the
functionality and performance of your website. User Experience (UX) and User Interface (UI)
(P7):

1. Test plan:
Test
Date What is being tested How Expect Result
Plan
 1 7/5/2023 Test the interface of landing page localhost/ASM2/ Display Landing page
2 7/5/2023 Test the interface of login page localhost/ASM2/Login.html Display Login page
3 7/5/2023 Test the interface of register page localhost/ASM2/ dangky.html Display Register page
4 7/5/2023 Test the interface of home page localhost/ASM2/Home.html Display Home page
5 7/5/2023 Test the interface of product page localhost/ASM2/Product.html Display Product page
6 7/5/2023 Test the interface of contact page localhost/ASM2/Contact.html Display Contact page
7 7/5/2023 Test the interface of cart page localhost/ASM2/Store.html Display Cart page
Check when successfully registered Enter all required information Display “Xin chào Nguyen Dang
8 7/5/2023 Khanh Hang. Bạn đã đăng ký thành
công. Hãy đăng nhập”
The change of landing page before and When successfully logged in, the
9 7/5/2023 after login system automatically switches to the
Home page
Log in with an unregistered account Login account not in database Display “Your username or
10 7/5/2023
password is incorrect! Back”
Log in with the wrong username or Log in with a password that doesn’t Display “Your username or
11 7/5/2023 password match the password in the database. password is incorrect! Back”
Log in without filling in the blanks Leave some fields blank on the Display “Please enter your full
12 7/5/2023
login form. username and password! Back”
Sign up without filling in the blanks Leave some fields blank on the sign Display “Error
13 7/5/2023 up form. Back”
The case of password and confirm Try to input password and confirm Display “Password and Confirm
14 7/5/2023 password are not match. password are not the same password not match. Please re-
enter”
Table 1: Test Plan

2. Test case:
Test Actual
Test Name How Inputted data Expected Result Status
Case Result
Test the interface of
1 localhost/ASM2/ Display Landing page Pass
landing page
 Test the interface of localhost/ASM2/
2 Display Login page Pass
login page Login.html
Test the interface of localhost/ASM2/
3 Display Register page Pass
register page dangky.html
Test the interface of localhost/ASM2/
4 Display Home page Pass
home page Home.html
Test the interface of localhost/ASM2/
5 Display Product page Pass
product page Product.html
Test the interface of localhost/ASM2/
6 Display Contact page Pass
contact page Contact.html
Test the interface of localhost/ASM2/
7 Display Cart page Pass
cart page Store.html
“Nguyen Dang Khanh Hang” Display “Xin chào Nguyen
Check when Enter all
“123” Dang Khanh Hang. Bạn đã
8 successfully required Pass
“123” đăng ký thành công. Hãy
registered information
đăng nhập”
The change of When successfully logged in,
9 landing page before the system automatically Pass
and after login switches to the Home page
Log in with an Display “Your username
Login account
10 unregistered
not in database
KhanhHang or password is incorrect! Pass
account Back”
Log in with a
Log in with the password that Display “Your username
“123”
11 wrong username or doesn’t match or password is incorrect! Pass
“456”
password the password in Back”
the database.
Leave some Display “Please enter your
Log in without
12 fields blank on full username and Pass
filling in the blanks
the login form. password! Back”
Leave some
Sign up without Display “Error
13 fields blank on Pass
filling in the blanks
the sign up form. Back”
 Try to input
The case of Display “Password and
password and
password and “123” Not
14
confirm password
confirm
“Nguyen Dang Khanh Hang”
Confirm password not Pass
password are not match. Please re-enter”
are not match.
the same
Table 2: Test Case

3. Evidence for the actual result:

Case 1:
 Figure 61: Evidence of case 1

Case 2:

Figure 62: Evidence of case 2

Case 3:

Figure 63: Evidence of case 3

Case 4:

Figure 64: Evidence of case 4

Case 5:

Figure 65: Evidence of case 5

Case 6:

Figure 66: Evidence of case 6

Case 7:

Figure 67: Evidence of case 7

Case 8:

Figure 68: Evidence of case 8

Figure 69: Evidence of case 8

Case 9:

Figure 70: Evidence of case 9

Figure 71: Evidence of case 9
Case 10:

Figure 72: Evidence of case 10

Figure 73: Evidence of case 10

Case 11:

Figure 74: Evidence of case 11

Figure 75: Evidence of case 11

Figure 76: Evidence of case 11

Case 12:

Figure 77: Evidence of case 12

Figure 78: Evidence of case 12

Case 13:

Figure 79: Evidence of case 13

Figure 80: Evidence of case 13

Case 14:

Figure 81: : Evidence of case 14

Figure 82: Evidence of case 14

V. Reference:
W3C (2018). Web Content Accessibility Guidelines (WCAG) 2.1. [online] W3.org. Available at:
https://www.w3.org/TR/WCAG21/.
Nguyen, T. (2020). Wireframe là gì? Cách thiết lập Wireframe hiệu quả? [online] TopDev. Available at:
https://topdev.vn/blog/wireframe-la-gi/.
NIVIKI.COM - TỰ DO TÀI CHÍNH. (n.d.). Cách thiết kế website cho người khuyết tật - Phần 1. [online] Available at:
https://niviki.com/cach-thiet-ke-website-cho-nguoi-khuyet-tat-phan-1 [Accessed 7 May 2023].