1633 assignment 2 (pass)

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
Đào Vĩnh Khang

Student Name

Student ID

GCS200222
Trung Nam

Class

GCS0905B

Assessor name

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
KHANG
Grading grid
P5

P6

P7

x

x

x

M4

M5

D2

D3

 Summative Feedback:

 Resubmission Feedback:


Grade:
Signature & Date:

Assessor Signature:

Date:


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

ĐÀO VĨNH KHANG

Unit Number and Title:

Unit 10: Website Design & Development

Academic Year:

2022 – 2023

Unit Assessor:

TRUNG NAM

Assignment Title:

Website Design and Implementation

Issue Date:

01 May 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.
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 e-commerce 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.


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

D2 Critically evaluate
the
design
and
development process
against your design
document and analyse

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

contrast
the

multipage
website
created to the design
document.

any
technical
challenges.


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

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
recommendations for
areas that require
improvement.

Contents
INTRODUCTION .................................................................................................................................................................................................. 14
DESIGN PLAN (P5) ............................................................................................................................................................................................... 14
1. Produce a set of Users’ requirements .............................................................................................................................................................. 14


2. Use cases diagram ........................................................................................................................................................................................... 16

3. Wireframes .................................................................................................................................................................................................... 17

4. Site map........................................................................................................................................................................................................... 23

Implementation (P6) ............................................................................................................................................................................................... 23
Functional screenshot after implementation ....................................................................................................................................................... 23

As a user .............................................................................................................................................................................................................. 23

As an administrator ............................................................................................................................................................................................. 30

Testing (P7) ............................................................................................................................................................................................................. 32
Test case: ............................................................................................................................................................................................................. 32

References ............................................................................................................................................................................................................... 35
Schedule .................................................................................................................................................................................................................. 36


Figure 1. Use cases diagram ..................................................................................................................................................................... 19
Figure 2. Login page .................................................................................................................................................................................
20
Figure 3. Register page ............................................................................................................................................................................. 21
Figure 4. Home page .................................................................................................................................................................................
22
Figure 5. Product page .............................................................................................................................................................................. 23
Figure 6. Cart page ....................................................................................................................................................................................
24
Figure 7. Profile page ................................................................................................................................................................................
25
Figure 8. Homepage of unregister user ..................................................................................................................................................... 27
Figure 9. Login form .................................................................................................................................................................................
28
Figure 10. Register form ...........................................................................................................................................................................
29

Figure 11. Register successfully ............................................................................................................................................................... 30
Figure 12. Homepage of registered user ................................................................................................................................................... 31
Figure 13. Navbar of registered user 2 ..................................................................................................................................................... 31 Figure
14. Product .....................................................................................................................................................................................
32
Figure 15. Cart ..........................................................................................................................................................................................
33
Figure 16. Product .....................................................................................................................................................................................
33
Figure 17. Update product ........................................................................................................................................................................ 34
Figure 18. Update successfully .................................................................................................................................................................
34
Figure 19. Delete product ......................................................................................................................................................................... 35
Table 1. Site map ......................................................................................................................................................................................
26


INTRODUCTION
Assignment scenario
I 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 was impressed with my
presentations and wishes to continue with the design and development of an e-commerce website.
A sister company develops web solutions and I have been tasked with taking the lead on the MWS solution you outlined previously.
I am 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 that 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. I will also
include a membership area, where users can register to have access to restricted areas.
I will base on MWS-CaseStudy.docx for more information.

DESIGN PLAN (P5)
Now, I want to create a shopping website specifically a men's clothing store.
1. Produce a set of Users’ requirements
My website has 5 pages:


•

A Landing Page: As a registered user, I want to display all features so that I can use them easily.

•

A Login Page: As a registered user, I want to login into the system so that I can use all features.

•

A Register Page: As an unregistered user, I want to register for an account so that I can access the system.

•

A Profile Page: As a registered user, I want to manage my profile so that I can change my information.

•

A My Cart Page: As a registered user, I want to choose the item I want so that I can buy a product.

•

A Product Page: As a registered user, I want to find the item I want so that I can choose to cart.

2. Use cases diagram

Figure 1. Use cases diagram


3. Wireframes

Figure 2. Login page


Figure 3. Register page


Figure 4. Home page


Figure 5. Product page


Figure 6. Cart page


Figure 7. Profile page


4. Site map
Table 1. Site map

Store

Login

Register

Home

Product
Size

Size 1
Size 2
Size 3

Implementation (P6)
Functional screenshot after implementation
As a user
•

Overview home page:

Price

Cart
Quantity

Shopping
cart

Payment

Profile


On the home page, we can see the products that are on the website but are not yet able to buy because we are not registered, users.

Figure
8. Homepage of unregister user

• Login form:
This is the login form for registered users. If you are not registered, you will need to create an account to purchase products.


Figure
9. Login form

•

Register form:

This is a registration form for unregistered users. After creating an account, we were able to log in to the website.