Higher Nationals in Computing

Unit 10: Website Design and Development

ASSIGNMENT 2

Learner’s name: Vo Duc Tai

ID: GCS210942
Class: GCS1005C
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 Vo Duc Tai Student ID GCS210942

Class GCS1005C 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: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

 Assignment Brief 2 (RQF)
Higher National Certificate/Diploma in Computing

Student Name/ID Number:

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 http://cms.greenwich.edu.vn/.
 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 M4 Compare and D2 Critically evaluate
document for a contrast the multipage the design and
branded, multipage website created to the development process
website supported design document. against your design
with medium fidelity document and analyse
wireframes and a full any technical
set of client and user challenges.
requirements.

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 M5 Evaluate the D3 Critically evaluate
Test Plan identifying Quality Assurance the results of your
key performance area (QA) process and Test Plan and include
and use it to review review how it was a review of the overall
the functionality and implemented during success of your
performance of your your design and multipage website;
website. User development stages. use this evaluation to
Experience (UX) and explain any areas of
User Interface (UI). success and provide
justified
recommendations for
areas that require
improvement.
 Table of Contents
Unit 10: Website Design and Development ASSIGNMENT 2......................................................................1
Assignment Brief 2 (RQF)..........................................................................................................................3
Higher National Certificate/Diploma in Computing...........................................................................3
P5. 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. Client and user requirement analysis..............................................................................................7
2. User case diagram............................................................................................................................8
3. Design database diagram.................................................................................................................9
4. Design Website Wire-frames.........................................................................................................10
5. Site Map.........................................................................................................................................10
P6. Use Your Design Document With Appropriate Principles, Stnadards And Guidelines To Produce a
Branded, Multipage Webiste Supported With Realistic Content.............................................................11
1. Front-end and Back-end technologies applied in the website......................................................12
1.1. Front end..............................................................................................................................12
1.2. Back end...............................................................................................................................12
2. Functional screen shot of multipage website................................................................................12
3. Detailed explanation of functions in multipage website...............................................................13
4. Include some screenshots related to error handling (ex: popup message for deletion
comfirmation)....................................................................................................................................13
5. Screenshot some source code in back-end and front-end............................................................13
1.1. Back-end code.............................................................................................................................13
1.2. Front end code............................................................................................................................15
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)..................................17
 ASSIGNMENT 2 ANSWERS
P5. Create a Design Document For a Branded, Multipage Website
Supported With Medium Fidelity Wireframes And a Full Set Of Client
And User Requirements
1. Client and user requirement analysis
MSW-Marches Special Woods is the online shop in from of e-commerce with the
main purpose are Buying Exchanging - Provide decorations, decorative tools and
decorative services. All these products are listed on the primary page of website, it's
is easily for customer to observe and searching for what customer want in this
commerce.
Two small businesses have decided to start a new venture. Their joint venture is
forming a company to manufacture and sell wooden phone cases directly to
customers. This will be a strictly online venture. Unlike the previous companies,
which were both privately owned by families and operated in a traditional manner,
the new company is also privately owned. Their goal is to provide cool designs with
customizable features for any current smartphone, including those from Apple,
Samsung, Sony, LG, HTC, Motorola, and Nexus. Their distinguishing feature will be
full customization with next-day delivery.
This shopping website was designed and developed to display different types of
decorative services available in this industry. By clicking on this product, you can see
detailed information about the product and service name, total number and price of
each product, and a detail note about it. The website will be built for a common
platform using website development technologies such as HTML5, CSS, JavaScript,
and PHP. The website will work properly on all major web browsers, including
Google Chrome, Firefox, and Microsoft Edge. And it works on almost all screen sizes,
including laptops, televisions, and tablets.
Client requirement

● Product information: name, price, photo, id, category, detail note.

● Category details: ID, name.
● Store information: Introduction, Products, address.
● Admin: id, name, photo, email.
Functionally requirement
Website development and design for online commerce include multi pages with
MWS

● For customer maniputating with functions:

● Adding products to cart

● Changing quantity in each products in cart

● Remove the item from cart

● View order Previous Items Order

● Account configuration

● Searching
For admin maniputating with functions:

● Upload, edit and delete items and products existed in shop.

● View items, order details management

● Reset, view, preview order

● Search product, order detail Remove item order

● Login, Logout
2. User case diagram
General information:

Detail information:
Admin can login, manage product, actions such as view, add, edit statistical data.
3. Design database diagram

Table Fields Data types Constrains Descriptions

Category CategoryID Varchar(3) Primary key

Name Varchar(20) Not null Category name

Product ProductID Varchar(10) Primary key
Name Varchar(50) Not null Product name
Price int Not null Product price
 Images Varchar(20) Not null Product images
Detail Varchar(500) Not null Product detail
Admin ID varchar(15) Primary key Admin id
Pass varchar(20) Not null Password
Name varchar(50) Not null Admin name
Email varchar(50) Not null Admin email
Photo varchar(50) Not null Admin image
Customer User name varchar(20) Primary key
password varchar(20) Not null
Name varchar(40) Not null Customer name
Address varchar(30) Not null
Email varchar(30) Not null
Phone varchar(10) Not null

4. Design Website Wire-frames

 5. Site Map

P6. Use Your Design Document With Appropriate Principles, Stnadards

And Guidelines To Produce a Branded, Multipage Webiste Supported
With Realistic Content.
1. Front-end and Back-end technologies applied in the website

1.1. Front end

CSS and JavaScript: Use this software create font, size and color of words.
HTML5: helps to design visual websites, it is also applied to create graphic libraries to
help create graph applications.

1.2. Back end

MySQL: storage web data such as admin, products and genres

Visual studio code: is used to set the functions of the web.
Xampp: creates an environment to be able to run a website itself. It sets a host to
provide port numbers and IP addresses
2. Functional screen shot of multipage website
Print to the screen all of product in list and be able to link with add, edit and delete
function.

Add new product and save it in database

Edit information of the product to retain old images if not changed

3. Detailed explanation of functions in multipage website
4. Include some screenshots related to error handling (ex: popup message
for deletion comfirmation)
When clicking on "deleted", it will appear on the "Are You Sure"

From any page you want to go to the admin page, you will appear on the board "You
must login with admin role" and move to the Admin's login page

5. Screenshot some source code in back-end and front-end

1.1. Back-end code
Login form use login admin page
Logout form

1.2. Front end code

Home Page
Shop

Shop Details
Shopping Cart

Checkout
 Contact

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)
No Test case Input data Expected Actual Evaluation
output output
1 Test link Link to home Link Pass
home page successfully
2 Test link Link to shop Link Pass
shop page successfully
3 Test link Link to shop Link Pass
shop details details page successfully
4 Test link Link to Link Pass
shopping shopping cart successfully
cart page
5 Test link Link to Link Pass
checkout checkout page successfully
6 Test link Link to Link Pass
contact contact page successfully
7 Add product Product id =”P10” Product Product Pass
Product name=”case1” information store
Price= 70 Image= stored in successfully
”product10.jpg” database
categoryID=”C03”
8 Delete Product id =”P5” Product Delete Pass
product information successfully
will delete in
database
9 Show Display list Show Pass
product list successfully
10 Login admin Admin=”admin01” Link to admin Link Pass
1 dashboard successfully
Password=”123456”
11 Logout Show admin Show admin Pass
admin 1 login form login form
successfully
12 Add product Product id =”P11” Product Pass
Product name=”case5” store
Price= 75 successfully
Image=”product11.jpg”
categoryID=”C04”
13 Delete Product id =”P3” Product Delete Pass
product information successfully
will delete in
database
14 Login admin Admin=”admin02” Link Pass
2 successfully
Password="123456”
15 Logout Show admin Show admin Pass
admin 2 login form login form
successfully
16 Add product Product id =”P11” Product Lost images Fail
Product name=”case5” information
Price= 70 Image= “” stored in
categoryID=”C03” database
17 Edit product Product id =”P11” Product Product Pass
information store
Rename=”case4”
stored in successfully
Price= 70 database
Image=“Product016”
 categoryID=”C08”
18 Delete Product id =”P8” Product Delete Pass
product information successfully
will delete in
database
19 Login admin Admin=”admin03” Link Pass
3 successfully
Password=”123456”
20 Logout Show admin Show admin Pass
admin 3 login form login form
successfully
 REFERENCES
101, T. I. M., 2021. What is UX design?. [Online]
Available at: https://sendpulse.com/support/glossary/ux-design
[Accessed 26 11 2022].
 ANI (2017-07-27). "Internet grows, 330.6 mil domain name registrations in Q1:
VeriSign". Business Standard India. Retrieved 2017-07-28.
"Apache Tomcat Configuration Reference - The Realm Component".
Tomcat.apache.org. Retrieved 2013-11-01.
Babich, N., 2021. What Is a UI Kit? Examples & How to Use. [Online]
Available at: https://xd.adobe.com/ideas/process/ui-design/what-is-a-ui-kit/
[Accessed 26 11 2022].
Bali, B., 2022. 10 Best Website Builder Software. [Online]
Available at: https://www.softwareadvice.com/resources/best-website-builder-
software/
[Accessed 26 11 2022].
Begleiter, J., 2017. How do front end and back end technologies work together?.
[Online]
Available at: https://www.quora.com/What-are-the-capabilities-and-relationships-
between-front-end-and-back-end-website-technologies
[Accessed 26 11 2022].