BTEC FPT INTERNATIONAL COLLEGE

INFORMATION TECHNOLOGY
ASSIGNMENT 2
UNIT: WEBSITE DESIGN & DEVELOPMENT

STUDENT : VU LE MINH HIEU

CLASS : ENT05103
STUDENT ID : HIEUVLMBD00108
SUPERVISOR : NGUYEN HOANG ANH VU

DaNang, December 2021

 ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 4 HND Diploma in Business

Unit number and title Unit: Website Design & Development

Date received (1st sub-

Submission date 10/12/2021
mission)

Date received (2nd

Re-submission date
submission)

Vu Le Minh Hieu
Student name Student ID HIEUVLMBD00108

Class IT16101 Assessor name Nguyen Hoang Anh Vu

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the con-
sequences of plagiarism. I understand that making a false declaration is a form of malpractice.

Student’s signature:

MINH HIEU

Grading grid

P5 P6 M4 D2 P7 M5 D3
Summative Feedbacks: Resubmission Feedbacks:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

i
 TABLE OF CONTENT

Contents
TABLE OF CONTENT................................................................................................ii

LIST OF TABLES AND FIGURES............................................................................iv

LIST OF ACRONYM.................................................................................................vii

INTRODUCTION.........................................................................................................1

CHAPTER 1. UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND TECHNIQUES

WITH GOOD DESIGN PRINCIPLES TO CREATE A MULTIPAGE WEBSITE. (LO3).........2

Create a design document for a branded, multipage website supported with

medium-fidelity wireframes and a full set of client and user requirements. (P5)...............2

1.1 Client and user requirement analysis.......................................................2

1.2 Use case diagram.....................................................................................4

1.3 Database diagram.....................................................................................6

1.4 Wireframe...............................................................................................11

1.5 Detailed explanation of wireframe...........................................................21

Use your design document with appropriate principles, standards and

guidelines to produce a branded, multipage website supported with realistic content.
(P6)…………....................................................................................................................25

1.1 Register page..........................................................................................25

1.2 Login page..............................................................................................26

1.3 Home page..............................................................................................27

1.4 Contact page...........................................................................................30

1.5 Product page...........................................................................................31

1.6 Shopping cart page.................................................................................33

1.7 Checkout page........................................................................................33

1.8 Login Admin page...................................................................................35

i
 1.9 Admin change password page...............................................................36

1.10 Create category page.............................................................................36

1.11 Create product page...............................................................................37

1.12 Create discount code page.....................................................................39

CHAPTER 2. CREATE AND USE A TEST PLAN TO REVIEW THE

PERFORMANCE AND DESIGN OF A MULTIPAGE WEBSITE. (LO4) 40

Create a suitable Test Plan identifying key performance areas and using
them to review the functionality and performance of your website. User Experience
(UX) and User Interface (UI). (P7)..................................................................................40

1.1 Functional and non-functional requirements...............................................40

1.2 User Interface and User Experiences (UI & UX) text log.............................41

1.3 Back-end User Interface and User Experiences (UI & UX) text log............44

CONCLUSION..........................................................................................................47

CRITICAL EVALUATION.........................................................................................48

REFERENCES..........................................................................................................49

i
 LIST OF TABLES AND
FIGURES

Table 1: Priority......................................................................................................................2

Table 2: Analyze customer and user requirements ………………………….…………………4

Table 3: User Interface and User Experiences (UI & UX) text log ………………………….43

Table 4: Back-end User Interface and User Experiences (UI & UX) text log …………….…

46

Figure 1: Admin – Use case diagram....................................................................................4

Figure 2: User – Use case diagram.......................................................................................5

Figure 3: Site map..................................................................................................................6

Figure 4: Overview database.................................................................................................6

Figure 5: Admin table.............................................................................................................7

Figure 6: Category table.........................................................................................................7

Figure 7: Contact table...........................................................................................................7

Figure 8: Order table..............................................................................................................8

Figure 9: Orderdetail table.....................................................................................................8

Figure 10: Producer table.......................................................................................................9

Figure 11: Product table.........................................................................................................9

Figure 12: User table............................................................................................................10

Figure 13: Userlog table.......................................................................................................10

Figure 14: ERD....................................................................................................................11

Figure 15: Home page.........................................................................................................13

Figure 16: Product page......................................................................................................14

Figure 17: Register page.....................................................................................................15

Figure 18: Login page..........................................................................................................16

6
Figure 19: Cart page............................................................................................................16

Figure 20: Checkout page....................................................................................................17

7
Figure 21: Contact page.......................................................................................................18

Figure 22: Login Admin page...............................................................................................19

Figure 23: Admin change password page...........................................................................19

Figure 24: Create product page...........................................................................................20

Figure 25: Create discount code page.................................................................................20

Figure 26: Create category page.........................................................................................21

Figure 27: Command buttons..............................................................................................21

Figure 28: Search button.....................................................................................................22

Figure 29: Account button....................................................................................................22

Figure 30: Shopping cart button...........................................................................................22

Figure 31: A few more buttons.............................................................................................22

Figure 32: Index command buttons.....................................................................................23

Figure 33: The bottom of home page..................................................................................23

Figure 34: Slide....................................................................................................................23

Figure 35: Logo....................................................................................................................23

Figure 36: Product................................................................................................................23

Figure 37: Login buttons......................................................................................................24

Figure 38: Admin change password....................................................................................24

Figure 39: Other buttons......................................................................................................25

Figure 40: Register page.....................................................................................................26

Figure 41: Login page..........................................................................................................27

Figure 42: Login successfully...............................................................................................27

Figure 43: Home page.........................................................................................................30

Figure 44: Contact page.......................................................................................................31

Figure 45: Product page......................................................................................................32

Figure 46: Shopping cart page.............................................................................................33

5
Figure 47: Checkout page....................................................................................................34

Figure 48: Order success.....................................................................................................35

Figure 49: Login Admin page...............................................................................................35

Figure 50: Admin change password page...........................................................................36

Figure 51: Password change success.................................................................................36

Figure 52: Create new category..........................................................................................37

Figure 53: Manage categories.............................................................................................37

Figure 54: Create category success....................................................................................37

Figure 55: Manage products................................................................................................38

Figure 56: Create new product............................................................................................38

Figure 57: Create product success......................................................................................38

Figure 58: Manage discount codes......................................................................................39

Figure 59: Create new discount code..................................................................................39

Figure 60: Create discount code success............................................................................39

Figure 61: Functional and non-functional requirements......................................................40

6
 LIST OF ACRONYM

RAM Random Access Memory

GUI Graphical User Interface

UX User Experience

CPU Central Processing Unit

UI User Interface

HTML HyperText Markup Language

CSS Cascading Style Sheets

v
 INTRODUCTION

First of all, I would like to thank my family for their enthusiastic encouragement and
invaluable support for me to complete this assignment. Next, I would like to thank my
subject teachers for guiding me, helping me achieve good academic results, and
thanking all my friends for exchanging and supporting me.

Website Design & Development is an introductory course that introduces us to the

foundational services required to host, manage, and access a secure website. You will
learn about back-end technology and front-end technology. Design and deliver a website
with a superior user experience (UX) powered by an innovative user interface (UI). The
following report will cover the following sections:

 Chapter 1: Utilize website technologies, tools, and techniques with good

design principles to create a multipage website.
 Chapter 2: Create and use a Test Plan to review the performance and design
of a multipage website.

Perfomed Student: Vu Le Minh Hieu 1

 CHAPTER 1. UTILIZE WEBSITE TECHNOLOGIES, TOOLS AND
TECHNIQUES WITH GOOD DESIGN PRINCIPLES TO CREATE
A MULTIPAGE WEBSITE. (LO3)

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.1 Client and user requirement analysis

1.1.1 Priority

NO DEFINITION OF PRIORITY LEVEL

Necessary requirements for the implementation

1 Key
and the operation of the website system.

2 Request of the highest priority. 1

3 Medium priority request. 2

4 Low priority request. 3

Table 1. Priority

Perfomed Student: Vu Le Minh Hieu 2

 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with
realistic content. (P6)

After designing the wireframe, we use website technologies combined with design
principles to build a website with many different pages requested by the user. Use current
tools and programming languages like HTML, CSS, JS and phpMyAdmin database.

The benefits of HTML, CSS, JS and phpMyAdmin are based on standards-based

access to databases, low-cost cross-platform development, offline browsing, consistency,
etc.

1.1 Register page

On the registration page, users who do not have an account can register a new
account with information such as name, username, password, re-enter password, email
and

Perfomed Student: Vu Le Minh Hieu 3

 CHAPTER 2. CREATE AND USE A TEST PLAN TO REVIEW THE
PERFORMANCE AND DESIGN OF A MULTIPAGE WEBSITE. (LO4)

Create a suitable Test Plan identifying key performance areas and using
them to review the functionality and performance of your website. User
Experience (UX) and User Interface (UI). (P7)

1.1 Functional and non-functional requirements

Figure 61. Functional and non-functional requirements

A functional requirement is a description of the functionality or service of a software

or a system. Usually, the functional requirement will specify a behavior or a function.
Functional requirements are mandatory, easy to define, help you verify the functionality of
the software. Functional testing like system, integration, API testing, ... is done. Requires
the functionality specified by the user. Here are some examples of functional requirements:

Perfomed Student: Vu Le Minh Hieu 4

Perfomed Student: Vu Le Minh Hieu 5
 CONCLUSION
After completing this report, I sketched the website design using a wireframe tool
with full features to meet the requirements of users and customers. After the sketch, I
proceed to design the website with my brand. In addition, I learned more front-end and
back-end, functional and non-functional requirements. I have scheduled a test to
determine speed and use it to review your website functionality. User Experience (UX)
and User Interface (UI).

Perfomed Student: Vu Le Minh Hieu 6

 CRITICAL EVALUATION
In this report, I have completed all the criteria of the question in part P, from P5 to P7.
Detail:

 P5: Create a design document for a branded, multipage website

supported with medium-fidelity wireframes and a full set of client and
user requirements.
 P6: Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with
realistic content.
 P7: Create a suitable Test Plan identifying key performance areas and
using them to review the functionality and performance of your website.
User Experience (UX) and User Interface (UI).

So I think this report of mine deserves a pass.

Perfomed Student: Vu Le Minh Hieu 7

 REFERENCES
1. Mr. Nguyen Hoang Anh Vu lecturers and slides.

Perfomed Student: Vu Le Minh Hieu 8