ASSIGNMENT 2 FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

10: Website Design & Development

Submission date

4 January 2022

Date Received 1st submission

Re-submission Date

Date Received 2nd submission

Student Name

Student ID

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
P5

P6

P7

M4

M5

D2

D3


 Summative Feedback:

Grade:
Signature & Date:

 Resubmission Feedback:

Assessor Signature:

Date:


Table of Contents
A. CREATE A DESIGN DOCUMENT FOR A BRANDED, MULTIPAGE WEBSITE SUPPORTED WITH MEDIUM FIDELITY

WIREFRAMES AND A FULL SET OF CLIENT AND USER REQUIREMENTS(P5). ................................................................................................. 5
I.

B.

Create Design Document .............................................................................................................................................................................................. 5
1.

Client and Customer Requirements .................................................................................................................................................................... 5

2.

Mechanism Diagram .................................................................................................................................................................................................. 9

IMPLEMENTATION OF WEBSITE DESIGN(P6) ..................................................................................................................................................... 18
I.

Tool and Techniques Using for Website .............................................................................................................................................................. 18
1.

Tools .............................................................................................................................................................................................................................. 18

2.

Techniques .................................................................................................................................................................................................................. 18

II. Website Implementations ......................................................................................................................................................................................... 19
1.1.

Interface homepage of this website .................................................................................................................................................................. 19


1.2.

Product Details Decription Site:.......................................................................................................................................................................... 25

1.3.

Main Menu of Website: ........................................................................................................................................................................................... 26

1.4.

Account Site: ............................................................................................................................................................................................................... 29

1.5.

Cart site......................................................................................................................................................................................................................... 31

1.6.

Website Admin Management site: ..................................................................................................................................................................... 35

C.

CREATE A SUITABLE TEST PLAN(P7) ...................................................................................................................................................................... 39
I.

PurPose of Test: ............................................................................................................................................................................................................. 39

II. Test Plan ........................................................................................................................................................................................................................... 39
III.


Test Log ........................................................................................................................................................................................................................ 40

D. COMPARE AND CONTRAST THE MULTIPAGE WEBSITE CREATED TO THE DESIGN DOCUMENT(M4) ....................................... 44
I.

Compare And Contrast ................................................................................................................................................................................................ 44
1.

HomePage Interface: ............................................................................................................................................................................................... 44

2.

Details Site ................................................................................................................................................................................................................... 45

3.

Cart form ...................................................................................................................................................................................................................... 46


4.

User Page ..................................................................................................................................................................................................................... 47

5.

Admin Management Site ........................................................................................................................................................................................ 48

E. EVALUATE THE QUALITY ASSURANCE (QA) PROCESS AND REVIEW HOW IT WAS IMPLEMENTED DURING YOUR DESIGN
AND DEVELOPMENT STAGES(M5) ..................................................................................................................................................................................... 49

I.

Overview The QA Process.......................................................................................................................................................................................... 49

II. Review How It Was Implemented During Design & Development Stages & Evaluate Quality Assurance in each Testing
Process ....................................................................................................................................................................................................................................... 50
1.

Web Functional Ability Test Process: ............................................................................................................................................................... 50

1.

System Design Test .................................................................................................................................................................................................. 54

2.

Page Interface Test................................................................................................................................................................................................... 56

3.

Accesible Test............................................................................................................................................................................................................. 60

4.

Compatibility Test .................................................................................................................................................................................................... 62

III.

Evaluate QA Testing Process ................................................................................................................................................................................ 66


References .................................................................................................................................................................................................................................... 67


A. CREATE A DESIGN DOCUMENT FOR A BRANDED, MULTIPAGE WEBSITE SUPPORTED WITH MEDIUM FIDELITY
WIREFRAMES AND A FULL SET OF CLIENT AND USER REQUIREMENTS(P5).
I.
Create Design Document
1. Client and Customer Requirements
1.1.
Project Website Introduce and Decription
VLSS – Virtual Luxurious Service Shop 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.
This shopping website has been designed and developed to display categories of decorative service available in this
commerce. Detailed information about the product and service name, total of number and price of each product and
detail note about it can be observed by click on this products. WebSite will be built for some common Platform by utilizing
some website development technologies including HTML5, CSS, JavaScript, and PHP. The website will well-operating on
all leading web-browsers such as Google Chrome, Firefox, Microsoft Edge, etc. And suitable on almost reponsive screen
sizes like Laptop, TV, Tablet.
1.2.


1.3.

Customers Object:
Decorators and any people who want to decorate their room, their party, or for prettying crucial event of years
with nice accessories and items.
Sellers who are in helding event field or in decorative field.
Input and Output of website


 For the database of website's system
 Product information: name, price, photo, id, quantity in stock, category, detail note
 Customer information: Full name, address, email, phone
 Category details: ID, name, description
 Order details: OrderID, DeliveryDate, Delivery location, Quantity
 Orders: Order ID, OrderDate, customer id,
 Store information: Introduction, Products, News, address, social
 networks, Website reservation


 Output in website:
 Product details, prices, image
 Search results and search technology
 Total order price in Cart static
 User interface
 Order information
 Processing in website
 Processing customer's registration.
 Processing customer's login.
 Change customer account information
 Adding, updating, deleting products in cart
 Processing admin login.
1.4.

Functionality Requirements

 For Customer
 Website development and design for online commerce include multi pages with Virtual Luxurious Service Shop
 For customer maniputating with functions:
 Customers are Registered members of the site and log in to buy products.

 Adding products to cart
 Changing quantity in each products in cart
 Remove the item from cart
 Changing mode dark - light background color
 View order
 Previous Items Order
 Account configuration
 Searching
 Logout
 For administrators, perform the following functions:
 Upload, edit and delete items and products existed in shop.
 View items, customer, order details management


1.5.

 Reset, view, preview order
 Search product, order detail
 Remove item order
 Logout
Review accessibility standards and guidelines
Alternative text: For photos, graphics, and logos, written explanations known as alt-text should be supplied. As
a result, those who use a screen reader will be able to grasp the visual material on your website.
Organized pages: Headers and lists should be included on web pages to make it easier for customers to navigate
the site.
Vision impairments: Color should not be used to convey information. To ensure that persons with vision
impairments can read the text on my site, i should stick to the agreed color contrast standard. They may also
simply use the browser’s text zoom function to make the text large enough to read .
Text/content: My website's wording should be straightforward, and any message or content should be simple to
comprehend (Agrawal, 2019).

Cognitive impairment: Sites that are created simply and clearly aid users with memory, reading comprehension,
problem solving, and concentration issues. These characteristics are beneficial to everybody who visits my
website.
Grid Responsive designs: Responsive design is that the contrast of programming and device which is difficult to
feature after a specific website is intended. it's mainly part of a redesign. that's why it's a compact, not a
corporation standard. Responsive design has been regularly changed over the years.
Readable and web-friendly fonts: Using the proper fonts exemplifies shop brand personality and immediately
grabs your audience’s attention. However, it’s not almost well-to-do. The typefaces you employ in web design also
must be functional and readable. Arial, Helvetica, Times New Roman, and Courier New are all samples of webfriendly fonts.
Mobile Web: In the world of smartphones, make sure that i create a mobile-friendly website. Designing a
responsive website that loads perfectly on any mobile is that the best thanks to win the user response.


Impressive home page: The home page of your website encompasses a specific value proposition. It should be
impressive and attractive. the house page with high-value proposition implies that your website explains their
value to the viewers (Agrawal, 2019).
1.6.
No.

User Criteria

User Criteria

1. Homepage Interface

Decription







The homepage of website should have been created based on utilizing
flags suitable with their commercial logo, the title of each product that
can be added name of famous brands, Navigation bar shuold have some
quick redirected navigation such as service, contact us,... .
There should be the message box for customers can use it to directly
contact with sellers and the footer with full social contact.
Reponsive ability for meet one web of all devices.
Interface should follow Website Accessibility Standard

2. Item Display

The product/item name and the price of the decorative services must be
added with the illustrated images as well as all these must appear on a
displaying section of each product. Text/content need to be meaningful

3. Admin ability

Admin can add, edit and delete products and flexible form to handle with
orders list requested from customers

4. Customer ability

Customer can have button to order, small box searching products on
navigation bar, button or tool to add products to cart and delete it on
interface.

5. Navigation Display


Sticky on top ability, drop down menu with animated effect. Color Switch
when hover.

6. Text Display

The typefaces employed in web design also must be functional and readable
font such as Arial, Helvetica, Times New Roman, and Courier New are all
samples of web-friendly fonts.


2. Mechanism Diagram
2.1.
Flow Diagram

Figure 1: Flow Diagram

2.2.

Admin use-case diagram

Figure 2: admin diagram

This is the diagram describing manipulating with website for admin


2.3.

Customer use-case diagram:

Figure 3: Customer use-case diagram


This is the diagram describing manipulating with website for customers


2.4.

Database-Diagram

Figure 5: Database

Figure 4: Database diagram

This is the main database structure based on user requirements above. This database can store quite full information for
this website operating properly.

3. Wire frames for website


3.1.

HomePage WireFrame

Figure 6: Wireframe

Explaination for this wirefram:
Header of the website includes:






At the top: shop logo and more button: more button will open the menu of account, cart and more.
Navigation bar: Function keys such as Home, Contact, Service, News, Search box

Main interface of website:



Top-Slider: Categories list and advertise Slider will be located here.
Bottom-Main: There are containing items, products with full name, item image, number left and price

Footer of website: Information for the shop owner such as address, contact information, about the company, as
well as shortcuts to links to social media of shop owners.
3.2.

Details WireFrame

Figure 7: Detail wireframe


3.3.

Cart site Wireframe

Figure 10: USerPage Wireframe

Figure 8: Cart Site Wireframe

3.4.


UserPage Wireframe

Figure 9:Userpage wireframe


3.5.

Admin Site Wireframe

Figure 11: Admin Site Wireframe

Explaination for Admin site Wireframe: Products list is the form that will store all products in Website, Navigation bar
on the top is the quick switch to each particular Categories for support admin in editting products.
Menu includes some redirect link. Add Product function is located in bottom for easy adding or update.


3.6.
Mockup wireframe:
Mockup between Homepage between another Pages

Figure 12: Mockup


Site map:

Overview Site map for all web operating:

Figure 14: Overview full sitemap

Figure 13: site map



B. IMPLEMENTATION OF WEBSITE DESIGN(P6)
I.
Tool and Techniques Using for Website
1. Tools
a. IDE: Visual Studio Code version 1.60.1
b. Hosting: XAMPP -XAMPP has Apache distributions for Apache server, PHP. And it is commonly a local host or a local
server. This local server works on my own laptop. The utilization of XAMPP is to test the clients or website before
uploading it to the remote web server. This XAMPP server software gives me the suitable environment for testing
MYSQL, PHP, Apache projects on the local computer
c. Web Browser: Google Chrome

2. Techniques
a. Front-End Techniques
For design front-end





The markup language I use to builtthe structure of the webpage is HTML 5.
The techniques and programming language I use to develop my Website is Javascript
To make my website aesthetic, CSS is the good one and framework is Bootstrap 4
Font Awsome Icon is used to create nice Icon font

b. Back-End Techniques
 The server-side Scripting language I use is PHP
 And the most suitable with PHP is MySQL database
 Some Algorithm to handle the logical problems



II.

Website Implementations
1.1. Interface homepage of this website

Figure 15: Hompate's Header Interface of Website


Figure 17: Homepage's body ìnterface

Figure 16: Homepage's footer interface


Source Code of Homepage:
a) Index.php(Homepage)

PHP & HTML code

In this Index.php file, I design the homepage with the familiar web’s structure html mix php with the arrange of three primary
part include: Header, Main, Footer. Each source code of each part has been splitted into 3 php file to easier fixed and they has
been called by Require Syntax of PHP.


b) Header.php

PHP & HTML code

Explaination:

This file just be built by mainly Html, css and a little PHP. It has been designed to display the navigation bar of webpages, logo
on top and the main menu of hompage which has been hidden and it can be display via Javascript handling. Search in
navigation bar is implemented via php and then it will be sent the search characters from users into main.php to handle and
display appropriate results.


c) Main.php

Explaination:
These Source code above just are brief samples of main.php, this file display the main body of homepage. This file is quite long
because it must have handled the categories filter, slider and all products displayed for customers site. With categories filter, I
just has used foreach loop in php to list fully the categories in database on categories menu. The slider of homepage has been
built from bootstrap which has been available designed in bootstrap. To display all products with name, price and image, I has
used foreach loop php to convey information of product into Html box which has been designed to display the brief information
of each products. When more products is added from admin, it will be displayed immediately on homepages. Additionally,
products also be displayed based on search characters from customers which is similar with product name and categories filter
menu which based on category id of these products. If there are no products match with search characters on Url, it will return
the h1 “Nothing match”.


The filter for all products which belong to each categories has been located on header beside slider. Customers can click
on each category line based on their desire to display the suitable products.

Figure 18: Illustrated image

After clicking on “Candy Cake” category, this site will display these compatible products

Figure 19: After Click

Other categories and these products of them will be operated similarly to “Candy cake” instance above.



1.2.

Product Details Decription Site:

Customer can see the detail information of each product by clicking on the image of each product displayed in homepage
body interdace. The information will display with detail statistics such as reviews, decription, price, category.

Source Code

Figure 20: Detail information of products

Explaination:
This source code of Details has used quite much bootstrap to built interface. All detail information of product will be display
based on the product id which is sent on to Url after customer click on product in homepage. After System with php
language get the id sent from homepage Url, query syntax will be implemented to retrieve all information of this product in
mysql database.