Asm2 1633

ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing
Unit number and title 10: Website Design & Development
Submission date December 24, 2022 Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Phung Huu Minh Khanh Student ID GDD210033
Class GCD1102 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 Km
Grading grid
P5 P6 P7 M4 M5 D2 D3
PHÙNG HỮU MINH KHÁNH 1

❒ Summative Feedback: ❒ Resubmission Feedback:
Grade: Assessor Signature: Date:

Signature & Date:

Table of Contents
List of Figures ........................................................................................................................................................................................................ 5
List of Tables ......................................................................................................................................................................................................... 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. ....................................................................................................................................................................................................... 7
1. Users’ Requirements. ................................................................................................................................................................................. 7
2. Use cases diagram. .................................................................................................................................................................................... 7
3. Wireframes. ............................................................................................................................................................................................... 8
4. Sitemap. ...................................................................................................................................................................................................13
II. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with
realistic content. ..................................................................................................................................................................................................14
2.1. Source code Samples of the Website. ...................................................................................................................................................14
Source code about Policies Webpage. ...........................................................................................................................................................15
Source code about Account Webpage...........................................................................................................................................................16
Source code about Contact Webpage. ..........................................................................................................................................................17
Source code about Search. ............................................................................................................................................................................19
Source code about Categories.......................................................................................................................................................................19
Source code about New Device. ....................................................................................................................................................................20
A. CSS ........................................................................................................................................................................................................20
B. PHP and JavaScript ................................................................................................................................................................................27
2.2. Screenshots of Final website with explanation. ...................................................................................................................................29
A. Login Page.............................................................................................................................................................................................34
B. Shopping Cart Page. ..............................................................................................................................................................................36
2.3. MySQL. .................................................................................................................................................................................................40

1. Create ...................................................................................................................................................................................................40
2. Delete ...................................................................................................................................................................................................41
3. Select ....................................................................................................................................................................................................42
4. Update ..................................................................................................................................................................................................42
III. 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). .............................................................................................................................................................43
Test plan:..........................................................................................................................................................................................................43
References ...........................................................................................................................................................................................................45

List of Figures
Figure 1: Diagram. ................................................................................................................................................................................................. 7
Figure 2: Wireframes of Homepage. ...................................................................................................................................................................... 8
Figure 3: Wireframes of My Account. .................................................................................................................................................................... 9
Figure 4: Wireframes of Policies. ..........................................................................................................................................................................10
Figure 5: Wireframe of About Me. ........................................................................................................................................................................11
Figure 6: Wireframe of Contact Me. .....................................................................................................................................................................12
Figure 7: Sitemap..................................................................................................................................................................................................13
Figure 8: Source code about About Me. ................................................................................................................................................................14
Figure 9: Source code about Contact Me (1). ........................................................................................................................................................17
Figure 10: Source code about Contact Me (2). ......................................................................................................................................................18
Figure 11: Source code about Homepage (1). ............................................................................................................ Error! Bookmark not defined.
Figure 12: Source code about Homepage (2). ............................................................................................................ Error! Bookmark not defined.
Figure 13: CSS (1). .................................................................................................................................................................................................21
Figure 14: CSS (2). .................................................................................................................................................................................................21
Figure 15: Source code PHP of Payment. ..............................................................................................................................................................27
Figure 16: Source code PHP of Payment Done. .....................................................................................................................................................27
Figure 17: Source code JavaScript. ........................................................................................................................................................................27
Figure 18: Homepage Page. ..................................................................................................................................................................................29
Figure 19: My Account Page .................................................................................................................................................................................30
Figure 20: Policies Page. .......................................................................................................................................................................................31
Figure 21: About Me Page. ...................................................................................................................................................................................32
Figure 22: Contact Me Page. .................................................................................................................................................................................33
Figure 23: Sign in Page ..........................................................................................................................................................................................34
Figure 24: Sign up Page.........................................................................................................................................................................................35
Figure 25: Shopping Cart Page ..............................................................................................................................................................................36
Figure 26: Check out Page. ...................................................................................................................................................................................37
Figure 27: Payment Page. .....................................................................................................................................................................................38
Figure 28: Finish Payment Page. ...........................................................................................................................................................................39

List of Tables
Table 1: Table of Test plan. ...................................................................................................................................................................................44

I. Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of
client and user requirements.
1. Users’ Requirements.
Two small businesses in Da Nang and their joint company, Apple, are being set up to sell mobile phones directly to
customers. This will be an internet-only business. Their aim is to provide exciting designs with customizable features for
all current Apple smartphones and tablets as well as electronic products.
2. Use cases diagram.
Figure 1: Diagram.

3. Wireframes.
Figure 2: Wireframes of Homepage.

Figure 3: Wireframes of My Account.

Figure 4: Wireframes of Policies.

Figure 5: Wireframe of About Me.

Figure 6: Wireframe of Contact Me.

4. Sitemap.
Figure 7: Sitemap.

II. Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content.
2.1. Source code Samples of the Website.
HTML
A. Source code about About Me Webpage.
Figure 8: Source code about About Me Webpage.

B. Source code about Home Webpage.
Figure 9: Source code about Home Webpage (1).

Figure 10: Source code about Home Webpage (2).
Figure 11:Source code about Home Webpage (3).

C. Source code about Policies Webpage.
Figure 12: Source code about Policies Webpage (1).
Figure 13: Source code about Policies Webpage (2).

D. Source code about Account Webpage.
Figure 14: Source code about Account Webpage (1).

E. Source code about Contact Webpage.
Figure 19: Source code about Contact Webpage (1).


F. Source code about Search.
Figure 23: Source code about Search (1).
Figure 24: Source code about Search (2).

G. Source code about Categories.
Figure 25: Source code about Categories (1).

Figure 26: Source code about Categories (2).
H. Source code about New Device.
Figure 27: Source code about New Device (1).
Figure 28: Source code about New Device (2).

CSS

Figure 29: CSS (1).
Figure 30: CSS (2).

Figure 31: CSS (3).
Figure 32: CSS (4).
Figure 33: CSS (5).

Figure 34: CSS (6).
Figure 35: CSS (7).

Figure 36: CSS (8).
Figure 37: CSS (9).

Figure 38: CSS (10).


PHP and JavaScript
Figure 42: Source code PHP of Logout.
Figure 43: Source code PHP of Validate user.
Figure 44: Source code PHP of Order Delete.

Figure 45: Source code PHP of click Account.

2.2. Screenshots of Final website with explanation.
Figure 46: Homepage Page.

Figure 47: My Account Page

Figure 48: Policies Page.

Figure 49: About Me Page.

Figure 50: Contact Me Page.

Login Page.
Figure 51: Sign in Page

Figure 52: Sign up Page.

Shopping Cart Page.
Figure 53: Shopping Cart Page

Figure 54: Check out Page.

Figure 55: Payment Page.

Figure 56: Finish Payment Page.

2.3. MySQL.
Some queries (Create / Read / Update / Delete) with MySQL
1. Create

2. Delete
Before Delete:
After Delete:

3. Select
4. Update
Before
After Update

III. 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).
Test plan:
Number Screenshots Test Case Expectation Screenshots Expectation Reality Result
Output
1 Add Product is Passed Passed
product added on
into my my
website. website.
2 View Product is Passed Passed

product displayed
on on website.
website.
(Macbook)

3 Delete Product is Passed Passed
product deleted
from from my
website. website.
4 Update Product is Passed Passed

new updated on
product my
on website.
website.
Table 1: Table of Test plan.

References
1. Martin, M. (2022) Ux vs ui design – difference between them, Guru99, [online] Available at: https://www.guru99.com/ui-vs-
ux.html (Accessed December 12, 2022).
2. Anon (n.d.) Ui Vs UX: Difference between UI and UX: What is ux or ui, UserTesting, [online] Available at:
https://www.usertesting.com/blog/ui-vs-ux (Accessed December 12, 2022).
3. Anon (2022) Functions of operating system, GeeksforGeeks, [online] Available at: https://www.geeksforgeeks.org/functions-
of-operating-system/ (Accessed December 12, 2022).
4. Anon (n.d.) What is a back end (in a website)? definition & faqs, What Is a Back End (In a Website)? Definition & FAQs,
[online] Available at: https://airfocus.com/glossary/what-is-a-back-end/ (Accessed December 12, 2022).
5. Anon (n.d.) What is a front end (in a website) - definition & development, What is a Front End (In a Website) - Definition &
Development, [online] Available at: https://airfocus.com/glossary/what-is-a-front-end/ (Accessed December 12, 2022).
6. Gillis, A. S. (2020) What is a web server and how does it work?, WhatIs.com, TechTarget, [online] Available at:
https://www.techtarget.com/whatis/definition/Web-server (Accessed December 12, 2022).
7. Julian Wallis21 min read21 min readRead More, Julian Wallis15 min read15 min readRead More and Julian Wallis11 min
read11 min readRead More (2022) "custom-built" vs "Template" websites: What's important & which is better?, WEBO
Digital, [online] Available at: https://webo.digital/blog/custom-built-vs-template-websites-which-is-better/ (Accessed
December 12, 2022).
8. Khillar, S. (2018) Difference between frontend and backend, Difference Between Similar Terms and Objects, [online] Available
at: http://www.differencebetween.net/technology/difference-between-frontend-and-backend/ (Accessed December 12,
2022).
9. Mowforth, L., Liz Mowforth Liz MowforthLiz Mowforth studied Web Development with CareerFoundry. Now based in Berlin,
Mowforth, L. M. L., Mowforth, L. and Liz Mowforth studied Web Development with CareerFoundry. Now based in Berlin
(2022) The 7 most essential frontend web development tools in 2023, CareerFoundry, [online] Available at:
https://careerfoundry.com/en/blog/web-development/7-essential-tools-for-front-end-development/ (Accessed December
12, 2022).
10. Anon (2022) 17 best web development frameworks for 2021, LambdaTest, [online] Available at:
https://www.lambdatest.com/blog/best-web-development-frameworks/ (Accessed December 12, 2022).
11. Anon (n.d.) What is DNS? | how DNS works | cloudflare, [online] Available at:
https://www.cloudflare.com/learning/dns/what-is-dns/ (Accessed December 12, 2022).


Asm2 1633

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Asm2 1633

Uploaded by

Copyright:

Available Formats

ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date December 24, 2022 Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Phung Huu Minh Khanh Student ID GDD210033

Class GCD1102 Assessor name Phyo Min Tun

PHÙNG HỮU MINH KHÁNH 1

Grade: Assessor Signature: Date:

PHÙNG HỮU MINH KHÁNH 2

PHÙNG HỮU MINH KHÁNH 3

PHÙNG HỮU MINH KHÁNH 4

PHÙNG HỮU MINH KHÁNH 5

PHÙNG HỮU MINH KHÁNH 6

PHÙNG HỮU MINH KHÁNH 7

Figure 2: Wireframes of Homepage.

PHÙNG HỮU MINH KHÁNH 8

PHÙNG HỮU MINH KHÁNH 9

PHÙNG HỮU MINH KHÁNH 10

PHÙNG HỮU MINH KHÁNH 11

PHÙNG HỮU MINH KHÁNH 12

PHÙNG HỮU MINH KHÁNH 13

Figure 8: Source code about About Me Webpage.

Figure 9: Source code about Home Webpage (1).

PHÙNG HỮU MINH KHÁNH 14

Figure 11:Source code about Home Webpage (3).

Figure 12: Source code about Policies Webpage (1).

Figure 13: Source code about Policies Webpage (2).

PHÙNG HỮU MINH KHÁNH 15

Figure 14: Source code about Account Webpage (1).

Figure 15: Source code about Account Webpage (2).

PHÙNG HỮU MINH KHÁNH 16

Figure 17: Source code about Account Webpage (4).

Figure 18: Source code about Account Webpage (5).

E. Source code about Contact Webpage.

Figure 19: Source code about Contact Webpage (1).

PHÙNG HỮU MINH KHÁNH 17

Figure 21: Source code about Contact Webpage (3).

Figure 22: Source code about Contact Webpage (4).

PHÙNG HỮU MINH KHÁNH 18

Figure 23: Source code about Search (1).

Figure 24: Source code about Search (2).

Figure 25: Source code about Categories (1).

PHÙNG HỮU MINH KHÁNH 19

Figure 27: Source code about New Device (1).

Figure 28: Source code about New Device (2).

PHÙNG HỮU MINH KHÁNH 20

Figure 30: CSS (2).

PHÙNG HỮU MINH KHÁNH 21

Figure 32: CSS (4).

Figure 33: CSS (5).

PHÙNG HỮU MINH KHÁNH 22

Figure 35: CSS (7).

PHÙNG HỮU MINH KHÁNH 23

Figure 37: CSS (9).

PHÙNG HỮU MINH KHÁNH 24

Figure 39: CSS (11).

PHÙNG HỮU MINH KHÁNH 25

Figure 41: CSS (13).

PHÙNG HỮU MINH KHÁNH 26

Figure 42: Source code PHP of Logout.

Figure 43: Source code PHP of Validate user.

Figure 44: Source code PHP of Order Delete.