Higher Nationals in Computing

Unit 10: Website Design and Development

ASSIGNMENT 2

Learner’s name: HUYNH CONG HUY

ID: GCS210720
Class: GCS1005C
Subject code: 1633
Assessor name: PHAN MINH TAM

Assignment due: 1 3 / 1 2 / 2 0 2 2 Assignment submitted: 1 3 / 1 2 / 2 0 2 2

 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 Huynh Cong Huy Student ID GCS210720

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............................................................................................................................7
3. Design database diagram.................................................................................................................8
4. Design Website Wire-frames...........................................................................................................9
5. Site Map............................................................................................Error! Bookmark not defined.
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......................................................11
1.1. Front end..............................................................................................................................11
1.2. Back end...............................................................................................................................11
2. Functional screen shot of multipage website................................................................................11
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............................................................14
1.1. Back-end code................................................................................Error! Bookmark not defined.
1.2. Front end code...............................................................................Error! Bookmark not defined.
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)..................................18
 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
Marches WoodShell (MWS), is being formed to manufacture and sell phone cases for
mobile phones direct to customers.
This will be an internet-only business. Their aim is to provide cool designs with
customizable features for any current smartphone from Apple, Samsung, Sony, LG,
HTC, Motorola, and Nexus.
1.1. Client requirement
● Product information: name, price, photo, id, category,.
● Category details: ID, name.
● Admin: id, name, photo, email.
Functionally requirement
Website development and design for online commerce include multi pages with
MWS
For customer maniputating with functions:

● 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.
Customer can Make payment, View product.
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

4. Design Website Wire-frames

4.1. Wire-frame
Registration:

Home
Product
 4.2. 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
Dash board

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
3. Detailed explanation of functions in multipage website
Admin Page:
Home page: Login
Product Page: Edit product, delete product, add product
Customer Page:
Home Page: Login, Register
Product Page: View Product

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
5.1. Back-End Code
Login form use login admin page
Logout form

5.2. Front-End Code

Home Page
Shop

Product
 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

1.Uni. B, (2022). CLA FREE CSS TEMPLATE. [online] Available at: https://www.free-
css.com/free-css-templates/page277/cla [Accessed November 25, 2022].

2. Kyle.H, (2021). Login template. [online] Available at:

https://colorlib.com/wp/html5-and-css3-login-forms/ [Accessed November 25,
2022].

3. Hossein. M, (2020). Registration form with flat tire. [online] Available at:
https://www.freepik.com/premium-vector/registration-form-template-with-flat-
design_3301492.htm [Accessed November 25, 2022].

4. Tim. K, (2022). Star Admin 2: Bootstrap Admin Dashboard. [online] Available at:
https://www.bootstrapdash.com/product/star-admin-free[Accessed November 25,
2022].

5. Staff .E, (2022). Bootstrap Login Panels (Compared). [online] Available at:
https://codepen.io/xmas1224/pen/MWJqbao [Accessed November 25, 2022]