Higher National in Computing

Unit 10: Web Design & Development

ASSIGNMENT 2

Name: Nguyen Nhat Thanh

ID: GCS210101
Class: GCS1004A
Subject code: 1633

Assignment due: Assignment submitted:

Page | 1
 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

Nguyen Nhat Thanh GCS210101
Student Name Student ID
GCS1004A Le Minh Hoa
Class 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
Grading grid
P1 P2 P3 P4 M1 M2 M3 D1

Page | 1
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

Page | 2
 Assignment Brief 2 (RQF)
Higher National Certificate/Diploma in Computing
Student Name/ID Number: Nguyen Nhat Thanh / GCS210101

Unit Number and Title: Unit 10: Website Design & Development

Academic Year: 2021 – 2022

Unit Assessor: Hoang Nhu Vinh

Assignment Title: Website Design and Implementation

Issue Date: 01 April 2021

Submission Date:

Internal Verifier Name:

Date:

Submission Format:

Page | 3
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:

Page | 4
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.

Page | 5
LO4 P7 Create a suitable M5 Evaluate the D3 Critically evaluate
Test Plan identifying Quality Assurance the results of your Test
key performance area (QA) process and Plan and include a
and use it to review review how it was review of the overall
the functionality and implemented during success of your
performance of your your design and multipage website; use
website. User development stages. this evaluation to
Experience (UX) and explain any areas of
User Interface (UI). success and provide
justified
recommendations for
areas that require
improvement.

Page | 6
 Table of Contents
P5. Create a design document for a branded, multipage website supported with medium fidelity wireframes and
a full set of client and user requirements ............................................................................................................... 8
1. Introduction and customer’s requirement...................................................................................................... 8
1.1. Introduction ............................................................................................................................................. 8
2. Mechanism diagram .................................................................................................................................. 9
2.1 Flow diagram ................................................................................................................................................... 9
2.2 User case diagram............................................................................................................................................ 9
3. Design database diagram ........................................................................................................................ 12
4. Design website wireframes ..................................................................................................................... 13
4.1 Home Page ..................................................................................................................................................... 13
4.3 Product details ............................................................................................................................................... 14
4.4 Cart page ........................................................................................................................................................ 15
4.5 Sign In ............................................................................................................................................................ 16
4.6 Sign Up ........................................................................................................................................................... 17
4.7 Home Page Admin ......................................................................................................................................... 18
5. Site map ....................................................................................................................................................... 19
P6. Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content: ........................................................................................... 20
1.1. Home page ................................................................................................................................................. 20
1.2. Category page ............................................................................................................................................ 20
1.3. Detail product ............................................................................................................................................ 22
1.4. Login ........................................................................................................................................................... 22
1.5. Sign up ........................................................................................................................................................ 23
1.6. Cart ............................................................................................................................................................. 23
1.7. Profile ......................................................................................................................................................... 24
1.8. Admin page ................................................................................................................................................ 24
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) ....................................................... 25
1. Test plan ......................................................................................................................................................... 25
REFERENCES......................................................................................................................................................... 28

Page | 7
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. Introduction and customer’s requirement

1.1. Introduction

The purpose of creating this website was to offer phone covers. You may view more
information about this product by clicking on it, including the name of the product
and service, the quantity and cost of all the products, and extra remarks. A range of
website building tools, including HTML, CSS, JavaScript, and PHP, will be used to create
the website. All widely used web browsers, such as Microsoft Edge, Google Chrome,
etc., are compatible with the website.

1.2. Customer’s requirement

For customer:

+ Customers are Registered members of the site and log in to buy products.

+ Adding products to cart

+ Changing quantity in each product in cart

+ Remove the item from cart

+ View order

Page | 8
2. Mechanism diagram

2.1 Flow diagram

Figure 1: Flow diagram

2.2 User case diagram

A use case diagram is a visual representation of how system users can communicate
with it and which features they can use to do so. It will consist of three main
sections:

- User Types in the System (Actors)

- Make use of system features

- The connection between actors and use cases

Figure 2: User case diagram

Page | 9
Admin
It will be split into two layers to handle the admin page and website. Lever 1 is a website manager
with the ability to manage the admin page and the entire website. Collaboration at Level 2 is
limited to the simple addition, modification, and deletion of goods, categories, and post
collections.

Client
The website allows users to explore, click links, and make purchases. However, customers must
first register for an account or log in before they may order and buy items. A website's home
page serves as an introduction to the brand and business. Collection page showing the newest
products offered by the business.
Users can find the company's address by going back to the contact page. Visitors are expected to
find comprehensive information about the product on the detail page. Using the shopping cart
and checkout pages, customers may make purchases and submit orders. Customers can learn
more about the company on the About Us page.

Figure 3: Admin and User interface

Admin
To lessen the load on the website's database, you might update order status and delete orders
when clients cancel orders. When a user wants to modify something, the order is updated.
However, if you wish to perform such functions, you must first log in.
Client User
Users who visit the shop page can explore products, make purchases, and check product details.
The user is also taken to the cart page after making a purchase, where he can change his order if
he changes his mind, add more or fewer items, and order more if he buys enough. However, you
must first log in in order to carry out such actions.

Page | 10
Sign up

Figure 4: Sign up

In order for the invoice code and other notifications, such as the login code and data, to be
delivered to registered users' phones when they make purchases, registered users can provide
various relevant details, such as their email address. Please let us know their location if they
purchase something from our website so we can deliver it there.

Sign in

Figure 5: Sign in

Page | 11
In order for the invoice code and other notifications, such as the login code and data, to be
delivered to registered users' phones when they make a purchase, registered users can provide
certain relevant details, such as their email address. Please let us know their location if they
purchase something from our website so we can deliver it there.

3. Design database diagram

Figure 6: Database diagram

According to my logic design, my database consists of 8 tables.

The Category table includes ID, name, and parent.
The Product table includes: ID, Name, Price, Intro, Content, Featured, image, status, and
category.
The User table includes Admin Name, email, password, and lever.
The Cart detail table includes: ID, product-id, cart-id, quantity.
The cart table includes id, email, full name, address, phone, and total-cart.
The customer table includes id, email, full name, address, phone, and email.
The collection table includes id, image, and category-id.
The post table includes id, title, content, and image.

Page | 12
 4. Design website wireframes

4.1 Home Page

Figure 7: Home page

4.2 Category page

Figure 8: Category page

Page | 13
4.3 Product details

Figure 9: Product details

Page | 14
4.4 Cart page

Figure 10: Cart page

Page | 15
4.5 Sign In

Figure 11: Sign In

Page | 16
4.6 Sign Up

Figure 12: Sign Up

Page | 17
4.7 Home Page Admin

Figure 13: Admin Page

Page | 18
5. Site map

Figure 14: Site map

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

1.1. Home page

Figure 15: Home page

1.2. Category page

Figure 16: Phone case

Page | 20
Figure 17: Laptop

Figure 18: Tablets

Page | 21
1.3. Detail product

Figure 19: Detail

1.4. Login

Figure 20: Login

Page | 22
1.5. Sign up

Figure 21: Sign up

1.6. Cart

Figure 22: User Cart Page

Page | 23
1.7. Profile

Figure 23: User Profile

1.8. Admin page

Figure 24: Admin page

Page | 24
 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):

1. Test plan

No. Test Case Decription Actual Result Expecte Overall

Result
1 Test Sign in Not enter username Error Error Pass
with empty
username
2 Password Sign up with user name Accepted by Error False
test contain special characters System
such as ‘@’, ‘#’, “%”
3 Password Sign up with the length Accepted by Error False
test of password less than 8 System

4 Profile test Update phone number Error Error Pass

contains letter or speacial
chara (: “#$%#123456”)

5 Password Enter wrong password Error Error Pass

Test
6 View all Check all products and All Products and All Product and Pass
Products & categories on Hompage Categories are Categories are
categories Viewable in Viewable in
on Homepage Homepage
Homepage
7 Test link Clicking on a products on All Information All Information of Pass
Items homepage of this product be this product
fetched in details viewable in details
page page
8 Test Add products to cart before Error Error Pass
checking Signin or Signup
assurance of
system

Page | 25
9 Register test Enter information and started to Error Error False
sign up
10 Type wrong Enter email that not include Error Error Pass
email address “@ or .com”

11 Retyping Enter different Error Error Pass

password in password
sign up form
12 Add Choose a random product and Products have Products have been Pass
products click “add to cart” been added added

13 Delete Click “X” icon to delete a Products have Products have been Pass
products product from cart been deleted deleted
from cart
14 Search Enter product name to search Product has been Product has been Pass
products toolbar founded founded
15 Edit user Click to edit profile and Information have Information have Pass
profile started to edit profile been changed been changed
information and then save it
16 Log out Click to log out button Account has been Account has been Pass
logged out logged out
17 Check the Add and reduce products in The price will The price will Pass
price the cart increase and increase and
decrease decrease according
according to the to the number of
number of items items added to the
added to the cart cart
18 Profile photo Add a random photo to user The photo has The photo has been Pass
and admin profile been added added
19 Delete Choose a random product to Product has been Product has been Pass
products with delete deleted from the deleted from the
admin web web
account
20 Delete user Choose a random user to User has been User has been Pass
with admin delete deleted from the deleted from the
account web web

Page | 26
21 Change Choose some products and The product price The product price Pass
product price change the price have been have been changed
in admin changed
account

Page | 27
 REFERENCES

Cloudflare (2019). Cloudflare. [online] Cloudflare. Available at:

https://www.cloudflare.com/learning/dns/what-is-dns/. [Accessed 19 Dec. 2022]

DNS Server Types | Cloudflare. (n.d.). Cloudflare. [online] Available at:

https://www.cloudflare.com/learning/dns/dns-server-types/. [Accessed 19 Dec. 2022]

iNET Systems. (2021). How are domain names organized and managed? [online]
Available at: https://blog.inetsystems.com/faq/how-are-domain-names-organized-
and-managed. [Accessed 19 Dec. 2022]

ElProCus - Electronic Projects for Engineering Students. (2013). Electronic

Communication Protocols Basics and Types with Functionality. [online] Available at:
https://www.elprocus.com/communication-protocols/. [Accessed 19 Dec. 2022]

GCFGlobal (2016). Computer Basics: Understanding Operating Systems. [online]

GCFGlobal.org. Available at:
https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/.
[Accessed 19 Dec. 2022]

Back4App Blog. (2021). Top 10 Backend Technologies. [online] Available at:

https://blog.back4app.com/backend-technologies/. [Accessed 19 Dec. 2022]

Oracle (n.d.). What is a database? [online] www.oracle.com. Available at:

https://www.oracle.com/database/what-is-database/. [Accessed 19 Dec. 2022]

Website Guides, Tips & Knowledge. (2020). Everything You Need to Know about
Website Builders - DreamHost. [online] Available at:
https://www.dreamhost.com/blog/what-is-a-website-builder/. [Accessed 19 Dec. 2022]

Page | 28