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 Bui Nguyen Ngoc Han Student ID BH00150

Class IT0503 Assessor name Ngo Thi Mai Loan

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

1
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

2
Table of Contents
A. Introduction ....................................................................................................................................................................................... 6
B. Content ............................................................................................................................................................................................... 6
I. Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of
client and user requirements (P5) ........................................................................................................................................................ 6
1. Design the structure and components of the website (using wireframes) .................................................................................... 6
2. Database design (specify the design of each table in the database) ........................................................................................... 11
II. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage
website supported with realistic content (P6) ................................................................................................................................... 12
1. Tools and languages used for development ............................................................................................................................... 12
2. Describe how the website works? .............................................................................................................................................. 15
III. Create a suitable Test Plan identifying key performance areas and use it to review the functionality and performance
of your website. User Experience (UX) and User Interface (UI) (P7) ............................................................................................ 35
1. Test UI (include color, layout, font, image) ............................................................................................................................... 35
2. Test UX (when open the website on a variety of devices) ......................................................................................................... 35
3. Test case ..................................................................................................................................................................................... 36
C. Conclusion ........................................................................................................................................................................................ 37
D. References......................................................................................................................................................................................... 37

3
Figure 1: Design of Add new product......................................................................................................................................................... 6
Figure 2: Design of the Register ................................................................................................................................................................. 7
Figure 3: Design of Login ........................................................................................................................................................................... 7
Figure 4: Design of the Index ..................................................................................................................................................................... 8
Figure 5: Design of the Search page ........................................................................................................................................................... 9
Figure 6: Design of the Detail page ............................................................................................................................................................ 9
Figure 7: Design of the product page ........................................................................................................................................................ 10
Figure 8: Users table ................................................................................................................................................................................. 11
Figure 9: Product table .............................................................................................................................................................................. 11
Figure 10: Code of HTML ........................................................................................................................................................................ 12
Figure 11: Code of CSS ............................................................................................................................................................................ 13
Figure 12: Code of PHP ............................................................................................................................................................................ 14
Figure 13: Index ........................................................................................................................................................................................ 15
Figure 14: Index ........................................................................................................................................................................................ 16
Figure 15: Index ........................................................................................................................................................................................ 17
Figure 16: Index ........................................................................................................................................................................................ 18
Figure 17: Login ....................................................................................................................................................................................... 19
Figure 18: Register .................................................................................................................................................................................... 20
Figure 19: Add new product ..................................................................................................................................................................... 21
Figure 20: Search form ............................................................................................................................................................................. 22
Figure 21: Detail ....................................................................................................................................................................................... 23
Figure 22: Click on the user icon .............................................................................................................................................................. 24
Figure 23: Enter username and password to login .................................................................................................................................... 25
Figure 24: Successful login message ........................................................................................................................................................ 26
Figure 25: Move to home page after successful login .............................................................................................................................. 26
Figure 26: Failed login message ............................................................................................................................................................... 27
Figure 27: Click to Register ...................................................................................................................................................................... 27
Figure 28: Register .................................................................................................................................................................................... 28
Figure 29: Succesful registration message ................................................................................................................................................ 28

4
Figure 30: Database of Users table ........................................................................................................................................................... 28
Figure 31: Product page ............................................................................................................................................................................ 29
Figure 32: Click Add new product............................................................................................................................................................ 30
Figure 33: Enter product information ....................................................................................................................................................... 31
Figure 34: Successful adding message ..................................................................................................................................................... 32
Figure 35: Database of Product table ........................................................................................................................................................ 32
Figure 36: Click Detail.............................................................................................................................................................................. 33
Figure 37: Detail ....................................................................................................................................................................................... 34

5
A. Introduction
In this assignment, I will create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirements and create a suitable Test Plan identifying key performance areas and
use it to review the functionality and performance of website, User Experience (UX) and User Interface (UI).
B. Content
I. 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. Design the structure and components of the website (using wireframes)
In this section, I will provide the design of the website:

Figure 1: Design of Add new product

6
 Figure 2: Design of the Register

Figure 3: Design of Login

7
Figure 4: Design of the Index

8
 Figure 5: Design of the Search page

Figure 6: Design of the Detail page

9
Figure 7: Design of the product page

10
2. Database design (specify the design of each table in the database)
Next, I will provide a database design to store user information and product information:
- Users table:

Figure 8: Users table

- Product table:

Figure 9: Product table

11
II. Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content (P6)
1. Tools and languages used for development
- To start building this website, I used HTML for the front-end to create the static part of the website:

Figure 10: Code of HTML

12
In addition, I also use CSS to make the website more beautiful and eye-catching:

Figure 11: Code of CSS

13
- For the back-end, I used PHP so that the website can perform some functions like login, registration, add new
products, search and product details. In addition, I also use MySQL to manage user and product data:

Figure 12: Code of PHP

14
2. Describe how the website works?

Website includes sites: index, login, register, add new product, search, detail

- Index:

Figure 13: Index

15
Figure 14: Index

16
Figure 15: Index

17
Figure 16: Index

18
- Login:

Figure 17: Login

19
- Register:

Figure 18: Register

20
- Add new product:

Figure 19: Add new product

21
- Search form:

Figure 20: Search form

22
- Detail:

Figure 21: Detail

23
When accessing the website, click on the user icon to log in:

Figure 22: Click on the user icon

24
After clicking on the user icon, the login form will appear. If you already have an account, just enter your username and password:

Figure 23: Enter username and password to login

25
If you enter the correct username and password, a successful login message will appear and move from the login page to the home
page:

Figure 24: Successful login message

Figure 25: Move to home page after successful login

26
Conversely, if you enter the wrong username or password, a failed login message will appear:

Figure 26: Failed login message

If you have not registered an account, please click here to register:

Figure 27: Click to Register

27
Enter User ID, username and password to register an account:

Figure 28: Register

After completing the registration, the successful registration message will appear and the database will save the user information

Figure 29: Succesful registration message Figure 30: Database of Users table

28
At the homepage, when clicking the Product button, a list of products will appear:

Figure 31: Product page

29
Click Add new product to add a new product:

Figure 32: Click Add new product

30
At the add new product page, enter product information. After completing the product adding, a successful adding message will
appear and the database will save data about the product:

Figure 33: Enter product information

31
Figure 34: Successful adding message

Figure 35: Database of Product table

32
Click Detail to see detailed product information:

Figure 36: Click Detail

33
Figure 37: Detail

34
III. Create a suitable Test Plan identifying key performance areas and use it to review the functionality and
performance of your website. User Experience (UX) and User Interface (UI) (P7)
1. Test UI (include color, layout, font, image)
Test criteria Detail
Website colors The website uses 2 main colors: tan 4 (#8B5A2B) and white
(#FFFFFF). In addition, the website also uses some other colors such
as: black, brown.
The colors appearing on the website are in harmony with each other
to make the overall website easy to see, not annoying.
Font Using the font Courier New is quite familiar with font-size 16px,
18px for content and 30px for title to make the website easier to see
and clearer.
Image The images on the website are clear and reasonable in size, making
it easy for users to see the product as well as the website's banner.
Size, position, width, height of elements The size, position, width, and height of the elements are quite
proportionate.
Interface The user interface is simple but quite good looking and conveys the
necessary content on the website.

2. Test UX (when open the website on a variety of devices)

Test criteria Detail
When opening the website on different devices

Website loading time
User's attitude towards the website
Because to ensure user experience, the website has been
optimized, so the speed of accessing the website is fast (about
1-2 seconds).
The speed of the website is fast and there is necessary
information so it is not annoying for users. So the user
feedback and attitude towards the site is good.

35
3. Test case

No Test case Input data Expected output Actual output Evaluation

1 Test link Localhost/demoWeb/index.php Display all product Display all product Pass
home
2 Test link Username: han Display message Display message Pass
login page Password: 123 “Successful” “Successful”
3 Test link Username:ngochan (username is Display message “Failure” Display message Pass
login page not in database) “Failure”
Password: 456
4 Add product Product ID: 1 Display message Display message Pass
Product Name : Dark Chocolate “Sucessfully added new “Sucessfully added
Price: $10 product” new product”
Quatity: 5000
Image: darkchocolate.jpg
Description:…
5 Add product Product ID: 1 (Duplicate ID) Display message Display message Pass
Product Name : Lava Chocolate “Add new product failed” “Add new product
Price: $35 failed”
Quatity: 200
Image: lavachoco.jpg
Description:…
6 Test link User ID: 2 Display message Display message Pass
register page Username: admin “Successfully registered” “Successfully
Password: 456 registered”
7 Test link User ID: 2 (Duplicate ID) Display message Display message Pass
register page Username: abc “Registration failed” “Registration failed”
Password: 789

36
C. Conclusion
In conclusion, I created a design document for a multi-page, branded, mid-fidelity website, and created a tailored Test Plan
that identifies key performance areas, uses it to review website functionality and performance as well as User Experience
(UX) and User Interface (UI).
D. References
http://localhost/demoWeb/index.php
http://localhost/phpmyadmin/index.php?route=/database/structure&db=demo_db
https://www.betabreakers.com/software-quality-management/

37