1
ASSIGNMENT 2 FRONT SHEET
Qualification
BTEC Level 5 HND Diploma in Computing
Unit number and title
10: Website Design & Development
Submission date
9/12/2022
Date Received 1st submission
Re-submission Date
Date Received 2nd submission
Student Name
Dao Mai Xuan Di
Student ID
BC00058
Class
IT05101
Assessor name
Nguyen Minh Triet
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
2
❒ Summative Feedback:
Grade:
❒ Resubmission Feedback:
Assessor Signature:
Date:
Signature & Date:
2
Table of contents
II. Content ....................................................................................................................................................... 7
1. Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of slient and user requirements (P5)................................................................... 7
a. Design Document ................................................................................................................................ 7
b. Database Design ................................................................................................................................ 15
2. Use your design document with appropriate principles, standards, and guidelines to produce a
branded, multipage website supported with realistic content. (P6) .......................................................... 17
a. Used tools and programming languages ........................................................................................... 17
b. How my website works ..................................................................................................................... 18
3. 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) ........................ 39
A. Test (UI) and (UX): .......................................................................................................................... 39
B. Test case: .......................................................................................................................................... 39
Conclusion: ............................................................................................................................................... 40
3
List of figures
Figure 1: Database Diagram ........................................................................................................................... 8
Figure 2: Mock up for customer Home page.................................................................................................. 9
Figure 3: Mock up customer Introduct page .................................................................................................. 9
Figure 4: Mock up customer Feedback page ................................................................................................ 10
Figure 5: Mock up customer Login page ..................................................................................................... 10
Figure 6: Mock up customer Registration page ........................................................................................... 11
Figure 7: Mock up adminstrator Login page ................................................................................................ 11
Figure 8: Mock up adminstrator Add flowers page...................................................................................... 12
Figure 9: Mock up adminstrator List flowers page ...................................................................................... 12
Figure 10: Mock up adminstrator List user page.......................................................................................... 13
Figure 11: Mock up adminstrator List feedback page .................................................................................. 13
Figure 12: Mock up adminstrator List invoice page .................................................................................... 14
Figure 13: Mock up admintrator Modify flowers page ................................................................................ 14
Figure 14: Mock up admintrator Modify User page .................................................................................... 15
Figure 15: Mock up admintrator Invoice Detail page .................................................................................. 15
Figure 16: All table in Dababase .................................................................................................................. 16
Figure 17: Table adminaccount in Database ................................................................................................ 16
Figure 18: Table contact in Database ........................................................................................................... 16
Figure 19: Table invoice in Database ........................................................................................................... 16
Figure 20: Table invoice_detail in Database ................................................................................................ 16
Figure 21: Table product in Database (1) ..................................................................................................... 17
Figure 22: Table product in Databse (2)....................................................................................................... 17
Figure 23: Table user in Database ................................................................................................................ 17
Figure 24: Customer HOME page (1) .......................................................................................................... 18
Figure 25: Customer HOME page (2) .......................................................................................................... 18
Figure 26: Customer INTRODUCE page (1) ............................................................................................... 19
Figure 27: Customer INTRODUCE page (2) ............................................................................................... 20
Figure 28: Customer INTRODUCE page (3) ............................................................................................... 20
Figure 29: Customer FLOWERS page (1) ................................................................................................... 20
Figure 30: Customer FLOWERS page(2) .................................................................................................... 21
Figure 31: Customer LOGIN page ............................................................................................................... 21
Figure 32: Customer REGISTRATION page .............................................................................................. 22
Figure 33: Create account in REGISTRATOR page ................................................................................... 22
Figure 34: Registered account is added to Database .................................................................................... 23
Figure 35: Log in to the website ................................................................................................................... 23
Figure 36: Website interface after login ....................................................................................................... 23
Figure 37: Customer CONTACTS page ...................................................................................................... 24
4
Figure 38: Send feedback successfully ........................................................................................................ 24
Figure 39: New feedback in Database .......................................................................................................... 25
Figure 40: Purchase at "FLOWERS" page ................................................................................................... 25
Figure 41: Customer's shopping cart ............................................................................................................ 26
Figure 42: Interface of "CART" after change. ............................................................................................. 26
Figure 43: Successfully purchase ................................................................................................................. 26
Figure 44: In database .................................................................................................................................. 27
Figure 45: Customer PROFILE page ........................................................................................................... 27
Figure 46: After clicking "Edit" ................................................................................................................... 28
Figure 47: Database user after user edits. ..................................................................................................... 28
Figure 48: LOG OUT button ........................................................................................................................ 28
Figure 49: After clicking "LOG OUT" ........................................................................................................ 29
Figure 50: Login page for Admin ................................................................................................................. 29
Figure 51: ADD FLOWERS page ................................................................................................................ 30
Figure 52: Button ADD & Clear in ADD FLOWERS page ........................................................................ 30
Figure 53: After adding products ................................................................................................................. 30
Figure 54: Products in Database ................................................................................................................... 31
Figure 55: LIST FLOWERS page (1) .......................................................................................................... 31
Figure 56: LIST FLOWERS page (2) .......................................................................................................... 32
Figure 57: Edit in LIST FLOWERS page .................................................................................................... 33
Figure 58: "Edit" at LIST FLOWERS.......................................................................................................... 33
Figure 59: After successful editing .............................................................................................................. 33
Figure 60: Changes in the database .............................................................................................................. 33
Figure 61: "Delete" in LIST FLOWERS page ............................................................................................. 34
Figure 62: After deleting the product "Juliet" .............................................................................................. 34
Figure 63: : Changes in the database ............................................................................................................ 35
Figure 64: LIST USER page ........................................................................................................................ 35
Figure 65: Edit in LIST USER page............................................................................................................. 35
Figure 66:: "Edit" in LIST USER page ........................................................................................................ 36
Figure 67: Changes in the database .............................................................................................................. 36
Figure 68: "Delete" in LIST USER page ..................................................................................................... 36
Figure 69: After "Delete" at LIST USER page ............................................................................................ 36
Figure 70: Changes in the database .............................................................................................................. 36
Figure 71: LIST FEEDBACK page ............................................................................................................. 37
Figure 72: Delete in LIST FEEDBACK page .............................................................................................. 37
Figure 73: After "Delete" at LIST FEEDBACK page ................................................................................. 37
Figure 74: Changes in the database .............................................................................................................. 38
Figure 75: LIST INVOICE page .................................................................................................................. 38
5
Figure 76: “Detail” in LIST INVOICE page ................................................................................................ 38
Figure 77: Affter click "Detail" in LIST INVOICE page ............................................................................ 38
Figure 78: Button Log out for admin ........................................................................................................... 39
6
I. Introduction
This assignment will include a summary of the website development process (for a flower shop),
including website design based on user requirements, website deployment using tools and programming
languages like HTML, CSS, JS, and PHP, and creating and executing test plans for all website
functionalities. The second section of the assignment also includes a comparison of the created and
designed documents. This section will go into detail about what has and hasn't been added to the newly
created website. Not to mention, the assignment provides users with definitions of quality assurance,
particularly in the areas of website design and development.
II. Content
1. Create a design document for a branded, multipage website supported with medium
fidelity wireframes and a full set of slient and user requirements (P5)
a. Design Document
For this project, I have divided the requirements into two groups: Admin Requirements and
Customer Requirements.
Firstly, is the Admin Requirement, which is also known as the Admin/ Seller. The main requirements
for the Admin Panel are listed below:



Login
View/Add/Edit/Delete User (Login Credentials)
View/Delete Order
About Customer Requirements, I have chosen some main functionalities for the page including
designed a multipage website for the project with medium fidelity wireframes.
View Homepage with featured product




View product detail
Add product to shopping cart
View/Edit items in shopping cart
Order product online
7
Figure 1: Database Diagram
 For Customer:
8
Figure 2: Mock up for customer Home page
If the user clicks any button on the menu, the website will lead them to another page. Users can
click "Logout" to return to the login interface.
Figure 3: Mock up customer Introduct page
9
Figure 4: Mock up customer Feedback page
Figure 5: Mock up customer Login page
10
Figure 6: Mock up customer Registration page
 For Adminstrator:
Figure 7: Mock up adminstrator Login page
After logging in with the admin account, the user will be redirected to the main admin page.
11
Figure 8: Mock up adminstrator Add flowers page
Here users can add products. If the user clicks any button on the menu, the website will lead them
to another page. Or if they click the Logout button, they will return to the login page.
Figure 9: Mock up adminstrator List flowers page
If the user clicks any button on the menu, the website will lead them to another page. At list
flowers users can edit or delete products.
12
Figure 10: Mock up adminstrator List user page
If the user clicks a button on the menu, the website will lead them to another page. At list user
users can edit or delete products.
Figure 11: Mock up adminstrator List feedback page
If the user clicks a button on the menu, the website will lead them to another page. At the feedback
list interface, users can edit or delete when clicking "Edit".
13
Figure 12: Mock up adminstrator List invoice page
At the invoice list interface, users can see more details by clicking on detail.
Figure 13: Mock up admintrator Modify flowers page
14
When clicking "Edit" at the List Flowers interface, users can view and edit products.
Figure 14: Mock up admintrator Modify User page
When clicking "Edit" at the List User interface, users can view and edit User information.
Figure 15: Mock up admintrator Invoice Detail page
When clicking "Detail" at the List Invoice interface, users can view detailed information.
b. Database Design
15
Figure 16: All table in Dababase
Figure 17: Table adminaccount in Database
Figure 18: Table contact in Database
Figure 19: Table invoice in Database
Figure 20: Table invoice_detail in Database
16
Figure 21: Table product in Database (1)
Figure 22: Table product in Databse (2)
Figure 23: Table user in Database
2. Use your design document with appropriate principles, standards, and guidelines to produce a
branded, multipage website supported with realistic content. (P6)
a. Used tools and programming languages
To realize the designed wireframes, I chose different programming languages for website
development.


For the front end, I used HTML, CSS, PHP and JS.
For a good back-end, MySQL was used for the database.
For interaction between front-end and back-end, PHP (embed in HTML) was selected. In
addition, I also use the Visual Studio Code IDE and Xampp to support the website.
17
b. How my website works
 Customer's side:
When the user goes to the URL:http://localhost/Web/ the Customer Homepage will open.
Figure 24: Customer HOME page (1)
Figure 25: Customer HOME page (2)
18
Here users can see a website named "Hoadep.com", they can preview the products of the
website. If the user clicks any button from the menu panel, the website will lead them to another
page.
Figure 26: Customer INTRODUCE page (1)
19
Figure 27: Customer INTRODUCE page (2)
Figure 28: Customer INTRODUCE page (3)
At the introduction page, users can see the website's introductory information.
Figure 29: Customer FLOWERS page (1)
20
Figure 30: Customer FLOWERS page(2)
Here, if the user wants to buy the product, they will have to click on the “BUY” button, or
click on buttons like “CONTACTS”. However, if they are not logged in, the website will take
them to the "Login" interface to be able to purchase the product.
Figure 31: Customer LOGIN page
21
Figure 32: Customer REGISTRATION page
If the user does not have an account, they can create an account at the “REGISTRATION”
page.
Figure 33: Create account in REGISTRATOR page
Users who are required to enter all information can click on the “Registration” button to
create an account.
22
Figure 34: Registered account is added to Database
Once the account is created successfully, it will be added directly to the Database.
Figure 35: Log in to the website
After registering an account, users can use it to login at the "LOG IN" page.
Figure 36: Website interface after login
23
After logging in, they will be redirected to the main interface. They can see the menu panel
on the left has changed:



“CART” button added.
“PROFILE” button added.
The original “LOGIN” button is changed to “LOG OUT”
Figure 37: Customer CONTACTS page
After entering all the information, the user can click the “Submit” button to send Feedback.
Figure 38: Send feedback successfully
24
When successfully submitted, the text: “Submitted successfully” will appear.
Figure 39: New feedback in Database
At the same time, the feedback will enter the Database.
Figure 40: Purchase at "FLOWERS" page
Users can make purchases by pressing the “BUY” button under each product. The products
will be moved to the “CART” page.
25
Figure 41: Customer's shopping cart
They will see the “CART” page interface and the products they have clicked “BUY”. You
can delete products by clicking “DELETE” button or increase or decrease the number of products
by clicking “+” or “-“. Or you can continue to buy the product by clicking “Continue to buy”. If
they want to buy the product, they will have to press the “Checkout” button.
Figure 42: Interface of "CART" after change.
Figure 43: Successfully purchase
After successful purchase will display a message board.
26
Figure 44: In database
At the same time, the order information will be transferred to the Database.
Figure 45: Customer PROFILE page
At the “PROFILE” page, users can view their information. If they want to edit, they can
click the “Edit” button.
27
Figure 46: After clicking "Edit"
Here you can edit your information. If you want to change your password, you must enter
all the information. If they don't want to change their password, they can keep it the same.
Figure 47: Database user after user edits.
The data in the Database is also changed.
Figure 48: LOG OUT button
28
After pressing “LOG OUT”, the account currently in use on the website will be logged out
and return the user to the login page.
Figure 49: After clicking "LOG OUT"
 Adminstrator’s Side:
When the user goes to the URL: http://localhost/Web/admin/Login.php the admin
Homepage will open.
Figure 50: Login page for Admin
Admin must log in with his account and click “Login” to participate in editing.
29
Figure 51: ADD FLOWERS page
After successful login, the user is taken to the “ADD FLOWERS” page. User can add new
product here by entering information and press “ADD” button or refresh by pressing “Clear”. Also
when clicking the buttons on the horizontal bar, they will be redirected to other pages.
Figure 52: Button ADD & Clear in ADD FLOWERS page
Figure 53: After adding products
30
Figure 54: Products in Database
Figure 55: LIST FLOWERS page (1)
31
Figure 56: LIST FLOWERS page (2)
On the page “LIST FLOWERS” admin can participate in editing or deleting products by
clicking “Eidt” or “Delete”. Products added from “ADD FLOWERS” page will be moved here.
32
Figure 57: Edit in LIST FLOWERS page
Figure 58: "Edit" at LIST FLOWERS
After clicking "Edit", you enter all the information then click "Modify Product"
Figure 59: After successful editing
Figure 60: Changes in the database
33
Figure 61: "Delete" in LIST FLOWERS page
User can click "Delete" to delete the product.
Figure 62: After deleting the product "Juliet"
34
Figure 63: : Changes in the database
The product "Juliet" is no longer in the Database.
Figure 64: LIST USER page
Figure 65: Edit in LIST USER page
Here, administrators can participate in editing or deleting user information by clicking
“Edit” or “Delete”. I will "Edit" first.
35
Figure 66:: "Edit" in LIST USER page
Figure 67: Changes in the database
Figure 68: "Delete" in LIST USER page
Figure 69: After "Delete" at LIST USER page
Figure 70: Changes in the database
36
Figure 71: LIST FEEDBACK page
Figure 72: Delete in LIST FEEDBACK page
Here, admin can view and delete feedback from users by clicking “Delete”.
Figure 73: After "Delete" at LIST FEEDBACK page
37
Figure 74: Changes in the database
Figure 75: LIST INVOICE page
Figure 76: “Detail” in LIST INVOICE page
Here, the admin can view the buyer's invoices, can see more details by clicking "Detail".
Figure 77: Affter click "Detail" in LIST INVOICE page
38
You can click “Back to List invoice” to go back and continue viewing other items.
Figure 78: Button Log out for admin
After pressing the “Log out” button, the user account will log out and return to the login
page.
3. 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)
A. Test (UI) and (UX):
a. Test UI:
Test Criterias
Website Theme Color
Details
White, Pink, Gray, Red
Font
Website Theme Color
Images
Size, position, height and width of elements
Font
Images
Interface
Size, position, height and width of elements
b. Test UX:
Test Criterias
Website Theme Color
Font
Details
White, Pink, Gray, Red
Website Theme Color
Images
Size, position, height and width of elements
Font
Images
Interface
Size, position, height and width of elements
B. Test case:
 For Customer:
39
 For Adminstrator:
See details at the URL:https://drive.google.com/drive/folders/10cq5kYpa9GHpj0qtqPyfdRjta7nMMRG?usp=sharing
Conclusion:
The task covered every step of the website's design and development for selling cars. Tools and
programming languages like HTML, CSS, JS, and PHP are practically used throughout the development
process to meet every client's request. Every aspect of the project has been meticulously detailed and
illustrated. Each edge case for each website capability is covered in the test strategy for the website.
Additionally, depending on the developer's comparison, readers may see the differences between the
intended and built websites. Additionally, with the acceptance of Quality Assurance, the project's
subsequent development stage will be improved with new functions.
40
References
Nhật, T.V. (no date) 6 mẫu button Dành Cho Người mới bắt đầu học HTML CSS, Niềm Vui Lập
Trình. Available at: https://www.niemvuilaptrinh.com/article/6-mau-button-danh-cho-nguoi-moibat-dau-hoc-html-css (Accessed: December 6, 2022).
Webcoban.vn (no date) Canh lề Cho Phần TỬ Bằng Thuộc tính margin trong CSS, webcoban.vn.
Available at: https://webcoban.vn/css/canh-le-cho-phan-tu-bang-thuoc-tinh-margin-trong-css.html
(Accessed: December 6, 2022).
Border-radius - css: Cascading style sheets: MDN (no date) CSS: Cascading Style Sheets | MDN.
Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius (Accessed:
December 9, 2022).
HTML tag (no date) HTML div tag. Available at: https://www.w3schools.com/tags/tag_div.ASP
(Accessed: December 9, 2022).
thachpham92 (2015) HỌC CSS - Cách Chia cột và clear float, Thach Pham. Available at:
https://thachpham.com/web-development/html-css/chia-cot-voi-float-va-clearfloat.html#:~:text=C%C3%A1c%20b%C6%B0%E1%BB%9Bc%20chia%20c%E1%BB%99t%20tr
ong%20CSS&text=C%C3%A1c%20c%E1%BB%99t%20ph%E1%BA%A3i%20lu%C3%B4n%20c
%C3%B3,to%C3%A1n%20k%C3%ADch%20th%C6%B0%E1%BB%9Bc%20ch%C3%ADnh%20
x%C3%A1c. (Accessed: December 9, 2022).
Thiện, N.N. (2017) Màu chữ và Màu nền trong CSS, Vũ Thành Lâm. Available at:
https://lamvt.vn/mau-chu-va-mau-nen-trong-css/ (Accessed: December 9, 2022).
Màu Hot Trend Năm 2022-2023 - Bảng MÃ Màu Theo Xu Hướng (2021) Dịch thuật Phương Đông.
Available at: https://dichthuatphuongdong.com/tienich/trending-color.html (Accessed: December 9,
2022).
41