1633-Assignment2.Pdf

Higher Nationals in Computing

Unit 10: Website Design and Development
ASSIGNMENT 2

Learner’s name: PhamNguyenQuynhNhu
ID:GCS210018
Class: GCS1005A
Subject code: 1633
Assessor name: PHAN MINH TAM
Assignment due:

Assignment submitted:


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

Pham Nguyen Quynh Nhu

Student ID

GCS210018

Class

GCS1005A

Assessor name

TamPM

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:

Grade:
Signature & Date:

❒ Resubmission Feedback:

Assessor Signature:

Date:


Assignment Brief 2 (RQF)
Higher National Certificate/Diploma in Computing
Student Name/ID Number:

Pham Nguyen Quynh Nhu/ GCS210018

Unit Number and Title:

Unit 10: Website Design & Development

Academic Year:

2021 – 2022

Unit Assessor:

Phan Minh Tam

Assignment Title:

Website Design and Implementation

Issue Date:

21 March 2022

Submission Date:
Internal Verifier Name:
Date:
Submission Format:
Format:
1. A report document including below sections
o Section 1: A review of appreciate web design principles, standards and guidelines.
o Section 2: Design document for online shopping website.
o Section 3: Implementation of website design.
o Section 4: Test plan and test evaluation.
2. A compressed file that encapsulates all source code and particular necessary resources including files of
images, style sheets, java script and other files to support to install multipage website such as sql script and
installation guide.
Submission





Students are compulsory to submit the assignment in due date and in a way requested by the Tutor.
The form of submission will be a soft copy posted on />Remember to convert the word file into PDF file before the submission on CMS.

Note:




The individual Assignment must be your own work, and not copied by or from another student.
If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must
reference your sources, using the Harvard style.
Make sure that you understand and follow the guidelines to avoid plagiarism. Failure to comply this
requirement will result in a failed assignment.

Unit Learning Outcomes:
LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Page |1


Assignment Brief and Guidance:
Assignment scenario
You currently work for a software training company that produces courses and topic presentations to established
companies and, importantly, to new start-ups. MWS wishes to pursue a bespoke web-based e-commerce solution.
MWS were impressed with your presentations and wishes to continue with the design and development of an ecommerce website.

A sister company develops web solutions and you have been tasked with taking the lead on the MWS solution
you outlined previously.
You are now required to design and create an interactive website with the emphasis being on the production of a
set of simple dynamic web pages, which embody good design principles. The site will be themed around a
template which would be most appropriate to MWS, with placeholders for text and content. Images and icons will
be used, to give MWS a feel for the proposed website design. You will also include a membership area, where
users can register to have access to restricted areas.
You will base on MWS-CaseStudy.docx for more information.

Page |2


Learning Outcomes and Assessment Criteria (Assignment 2):
Learning Outcome

Pass

Merit

Distinction

LO3

P5 Create a design
document for a branded,
multipage
website
supported with medium
fidelity wireframes and
a full set of client and

user requirements.

M4 Compare and
contrast the multipage
website created to the
design document.

D2 Critically evaluate
the design and
development process
against your design
document and analyse
any technical
challenges.

M5 Evaluate the Quality
Assurance (QA) process
and review how it was
implemented during
your design and
development stages.

D3 Critically evaluate
the results of your Test
Plan and include a
review of the overall
success
of
your
multipage website; use

this
evaluation
to
explain any areas of
success and provide
justified

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

P7 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).

recommendations for
areas that require
improvement.

Page |3


Table of Content

Unit 10: Website Design and DevelopmentASSIGNMENT 2 .................................................................................................... 1
Assignment Brief 2 (RQF) ...........................................................................................................................................................1
Higher National Certificate/Diploma in Computing ...........................................................................................................1
ASSIGNMENT 2 ANSWERS .....................................................................................................................................................7
A - Create a design document for a branded, multi-page website supported with medium fidelity wire-frames and a full set of
client and user requirements. (P5) ............................................................................................................................................... 7
1. Client and user requirement analysis ....................................................................................................................................... 7
2. Use case diagram ..................................................................................................................................................................... 7
a. Admin use case diagram ................................................................................................................................................. 7
b. Customer use case diagram .............................................................................................................................................7
3. Design database diagram ......................................................................................................................................................... 8
a. Logical diagram ...............................................................................................................................................................8
b. Physical diagram ............................................................................................................................................................. 9
Table: Login ........................................................................................................................................................................9
Table: Customer ..................................................................................................................................................................9
Table: Staff ..........................................................................................................................................................................9
Table: Product ................................................................................................................................................................... 10
Table: Category .................................................................................................................................................................10
Table: Admin .................................................................................................................................................................... 10
4. Design website wireframes ....................................................................................................................................................10
a. Home-page wire frames ....................................................................................................................................... 10
b. Details wireframes ............................................................................................................................................... 11
c. Register wireframes ..............................................................................................................................................11
d. Login wireframes ................................................................................................................................................. 12

e. Admin wireframes ................................................................................................................................................ 12
f. Contact wireframes ............................................................................................................................................... 13
5. Site map ................................................................................................................................................................................. 14
a. Customer site map .........................................................................................................................................................14
b. Admin site map ............................................................................................................................................................. 14
B - Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content.(P6) ......................................................................................................................................... 14
1. Font-end and back-end technologies applied in the website .........................................................................................14
a. Tool ...................................................................................................................................................................... 15
b. Techniques ........................................................................................................................................................... 15
2. Function screen shot of multipage website ................................................................................................................... 15
a. Homepage layout ..................................................................................................................................................15
b. List of product layout ........................................................................................................................................... 16
c. Register layout ......................................................................................................................................................17
d. Login layout ......................................................................................................................................................... 17
e. Contact page ......................................................................................................................................................... 18
f. Admin layout ........................................................................................................................................................ 19
3. Source code of function in multipage website and explanation ....................................................................................19
a. Source code of homepage layout and explanation .............................................................................................. 19
b. Source code of list of product layout and explanation ........................................................................................ 21
c. Source code of register layout and explanation ....................................................................................................23
d. Source code of login layout and explanation ...................................................................................................... 23
e. Source code of contact layout and explanation ................................................................................................... 24
f. Source code of admin layout and explanation ..................................................................................................... 25
4. Include some screenshots related to error handling ...................................................................................................... 26
a. Login admin ......................................................................................................................................................... 26
b. Delete product ...................................................................................................................................................... 26
5. Screenshot some source code of back-end ....................................................................................................................26
a. Create table ...........................................................................................................................................................26
b. Insert data ............................................................................................................................................................. 27

C - 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) ..........................................................................................28

Page |4


1. Test plan .................................................................................................................................................................................28
2. Test results ............................................................................................................................................................................. 29
REFERENCES .......................................................................................................................................................................... 31

Table of Figure
Figure 1 : Admin use case diagram of website ..................................................................................................7
Figure 2 : Customer use case diagram of website ............................................................................................. 8
Figure 3 : Logical design diagram of website ................................................................................................... 9
Figure 4 : Homepage wireframes .................................................................................................................... 11
Figure 5 : Details wireframe ............................................................................................................................11
Figure 6 : Resgister wireframe .........................................................................................................................12
Figure 7 : Admin page wireframe ....................................................................................................................13
Figure 8 : Contact wireframe ...........................................................................................................................13
Figure 9 : Site map of customer .......................................................................................................................14
Figure 10 : Site map of admin ......................................................................................................................... 14
Figure 11 : Home page layout ......................................................................................................................... 16
Figure 12 : List of product layout ...................................................................................................................16
Figure 13 : List of product layout ....................................................................................................................17
Figure 14 : Register layout .............................................................................................................................. 17
Figure 15 : Login layout .................................................................................................................................. 18
Figure 16 : Contact layout ............................................................................................................................... 18
Figure 17 : Admin layout .................................................................................................................................19
Figure 18 : Admin product layout ................................................................................................................... 19
Figure 19 : Source code of homepage ............................................................................................................. 20

Figure 20 : Source code of homepage ............................................................................................................. 20
Figure 21 : Source code of home page ............................................................................................................ 21
Figure 22 : Source code of product list ............................................................................................................22
Figure 23 :Source code of product list .............................................................................................................22
Page |5


Figure 24 : Create table category and table product ........................................................................................27
Figure 25 : Create table admin ........................................................................................................................ 27
Figure 26 : Create table login .......................................................................................................................... 27
Figure 27 : Insert product table and category table ......................................................................................... 28
Figure 28 : Insert admin table ......................................................................................................................... 28
Figure 29 : Insert login customer .....................................................................................................................28

Page |6


ASSIGNMENT 2 ANSWERS
A - Create a design document for a branded, multi-page website supported with medium fidelity wireframes and a full set of client and user requirements. (P5)
1. Client and user requirement analysis
Companies in today's ever-changing information technology era all desire to possess an e-commerce website so
that customers can learn about them and purchase things more conveniently. Furthermore, employee expenses,
facility prices, and other promotional expenditures are a challenge for businesses wanting to expand. For
businesses wishing to grow their market, an e-commerce website will be the greatest answer. As a result,
Marches Special Woods (MWS) is aware of the developing e-commerce scenario, and I hope I could construct a
website to assist them in selling their products with complete information about the company's phone cover items.
The website features a front-end (the section that the consumer sees) that shows all of the information about the
company's products and interfaces that make buying easier for the user. Aside from the font-end, they require a
back-end (the area where staff change product information), which contains customer information, employee
information, product information, and bill.

2. Use case diagram
a. Admin use case diagram

Figure 1: Admin use case diagram of website
Description:
This is a characteristic of the company's employees. Employees must first log in using the right login supplied by
the employer and the password they have registered with the company. After successfully logging in, workers
may modify, add, and delete products, as well as examine the brands that have collaborated with the organization.
The employee can then log out of the system.
b. Customer use case diagram
Page |7


Figure 2: Customer use case diagram of website
Description:
This is a client-side function. When customers access the website, they may search for the products they need or
the brands they like, and they can also log in or establish an account to be able to buy. Shopping is made easy.
Customers can log out of the website when they have finished shopping.
3. Design database diagram
a. Logical diagram

Page |8


Figure 3: Logical design diagram of website
b. Physical diagram

Table: Login
Field Name

Data Type

Allow Nulls

Description

userName

varchar(15)

x

Username, primary key

PW

varchar(20)

x

Password of user to login the database

userPhoto

varchar(50)

x

Photo of customer

Table: Customer
Field Name

Data Types

Allow Nulls

Description

customerID

varchar(6)

x

Customer code, primary key

customerName

varchar(50)

x

Full name of customer

customerPhone

varchar(10)

x

Phone number of customer

customerAddress

varchar(50)

x

Address information of customer

customerEmail

varchar(50)

x

Email information of customer

Data Types

Allow Nulls

Table: Staff
Field Name

Description

staffID

varchar(6)

x

Staff code, primary key

staffName

varchar(50)

x

Full name of staff

staffPhone

varchar(10)

x

Phone number of staff

Page |9


staffEmail

varchar(50)

x

Email address of staff

staffAddress

varchar(50)

x

Address information of staff

staffFunction

varchar(25)

x

Function of staff in the store

Table: Product
Field Name

Data Types

Allow Nulls
x

Description

productID

varchar(6)

Product code, primarykey

productName

varchar(50)

productPrice

float

productImage

varchar(20)

Image of product

productDetails

varchar(500)

Details of product

categoryID

int

Category of product, foreign key

Name of product
x

Price of product

Table: Category
Field Name

Data Types

categoryID

int

categoryName

varchar(30)

Allow Nulls

Description
Category code, primary key

x

Name of category

Table: Admin
Field Name

Data Types

Allow Nulls

adminID

varchar(15)

x

Admin code, primary key

adminPass

varchar(20)

x

Pass of account admin

addminFullname

varchar(50)

x

Name of admin

adminEmail

varchar(50)

x

Email address of admin

adminPhoto

varchar(50)

x

Photo of admin

4. Design website wireframes
a. Home-page wire frames

P a g e | 10

Description


Figure 4: Homepage wireframes
b. Details wireframes

Figure 5: Details wireframe
c. Register wireframes
P a g e | 11

Figure 6: Resgister wireframe

d. Login wireframes

e. Admin wireframes

P a g e | 12


Figure 7: Admin page wireframe
f. Contact wireframes

Figure 8: Contact wireframe
P a g e | 13


5. Site map
a. Customer site map

Figure 9: Site map of customer
b. Admin site map

Figure 10: Site map of admin
B - Use your design document with appropriate principles, standards and guidelines to produce a
branded, multipage website supported with realistic content.(P6)
1. Font-end and back-end technologies applied in the website
P a g e | 14

a. Tool
-

IDE (integrated development environment): Microsoft Visual Studio 2022

-

Hosting: the XAMPP Control Panel includes Apache packages for the Apache server and PHP. It is most
often a local host or a local server. This local server runs on my personal laptop. XAMPP is used to test
lients or websites before uploading them to a remote web server. This XAMPP server software provides me
with an appropriate environment for debugging MYSQL, PHP, and Apache applications on my local PC.

-

Web browser: Google Chorme

b. Techniques
-

Front-end techniques:



HTML 5 is the language that I want to utilize to construct the layout of the website.



JavaScript is the programming language and approach I use to create my website.



CSS is useful for improving the looks of my website, and the frame is bootstrap 5.



Attractive iconic fonts are created with great font icons.

-

Back-end techniques:



PHP is the scripting language of the server I use.



MySQL is the finest database for PHP.



Some logic problem-solving methods.

2. Function screen shot of multipage website
a. Homepage layout

P a g e | 15


Figure 11: Home page layout

b. List of product layout

Figure 12: List of product layout

P a g e | 16


Figure 13: List of product layout
c. Register layout

Figure 14: Register layout
d. Login layout
P a g e | 17


Figure 15: Login layout
e. Contact page

Figure 16: Contact layout
P a g e | 18


f. Admin layout

Figure 17: Admin layout

Figure 18: Admin product layout
3. Source code of function in multipage website and explanation
a. Source code of homepage layout and explanation

P a g e | 19


Figure 19: Source code of homepage

Figure 20: Source code of homepage
Explanation: This includes the source code for the bar's navigation, which includes signing in, choosing a
money value from the menu, the company's logo, a list of something like the entire website, a search bar, and a
cart. This file was created primarily with HTML, CSS, and some PHP. It has been created to display the
P a g e | 20


navigation bar of webpages, the logo on top, and the concealed main menu of a webpage, and it may be displayed
using Javascript handling. The search function in the navigation bar is built in PHP, and the search characters
entered by users are delivered to main.php, where they are handled and displayed appropriately.

Figure 21: Source code of home page
Explanation: These source codes are essentially abbreviated models of Main.Php, which shows the homepage's
main body. This file is fairly big since it must handle the categories filter, slider, and all items including such
products displayed at the top of the homepage, one of most purchased product displayed below, and ultimately
the product being discounted is presented at the end of the customer's website. The homepage slider was
created with bootstrap and designed with bootstrap. I may use Foreach Loop PHP to transfer the product's
details into the HTML box built to represent the brief information of each product to display all items like
names, prices, and photographs. When administrators upload a large number of items, they are quickly shown
on the homepage. Furthermore, the items are presented based on comparable customers' search keywords
with the name of the menu name and product name depending on the ID of these products. If there are no
products that match the search keywords in the URL, it will return to H1 nothing matches each other. The filter
for all goods belonging to each kind is located beside the slider on the title. Customers may show the suitable
goods by clicking on each category line.
b. Source code of list of product layout and explanation

P a g e | 21


Figure 22: Source code of product list

Figure 23:Source code of product list
Explanation: This is the source code that customers will use when making a purchase. Brand filtering, price
learning, and sticker filtering are the three filters. Filters are written in HTML. This is the product listing's source
P a g e | 22