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:  Resubmission Feedback:

Grade: Assessor Signature: Date:

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. Create Design Document .............................................................................................................................................................................................. 5
1. Client and Customer Requirements .................................................................................................................................................................... 5
2. Mechanism Diagram .................................................................................................................................................................................................. 9
B. 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. 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.

1.3. 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
  Reset, view, preview order
 Search product, order detail
 Remove item order
 Logout
1.5. 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 web-
friendly 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. User Criteria

No. User Criteria Decription

1. Homepage Interface  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:

Figure 13: site map

Overview Site map for all web operating:

Figure 14: Overview full sitemap

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.
1.3. Main Menu of Website:

To continute manipulate with this website, Customers need to click on menu icon on top of left site in homepage inferface

After click on this button, a menu will display and be pulled from the right to the left. This event also pull the main
interface of homepage to the left site. This menu includes some primary selections of website such as My Shopping Cart,
My Account, My Favorites, Link to Wallet, Dark and Light modes. However, there are two selections: My Favorites and
Link to Wallet which are still Still under maintenance and updating.
Source code of main menu:

Javascript Code CSS to create animated effect for menu icon when clicked.
Dark and Light mode:

There are two mode of this website to suitable with each Customer there are Dark Mode And Light Mode, which will change
the theme of this websiteDark Mode: When Dark mode is turned on, interface theme will immediately change to dark colours,

Figure 21: Dark mode

Text will be change to Light colours

Source code of this mode:

CSS code Javascript code

Figure 22: Light mode

 Light Mode: When Light mode is turned on, Interface theme will back to default(with Light colours)
1.4. Account Site:

Sign in Interface

Figure 23: Sign in Interface

Sign up Interface

Figure 24: Sign up Interface

 In case users (Customers/Admin) sign in for sign up successfully, this website will redirect into User Page

This site will encompass fully information of customer including: UserName, Address, Phone, Shopping log where
storing products customer has bought. User also can edit their profile in here and submit it to system of website. User
can sign out when they no longer want use this account or want to finnish this buying session.

 On the contrast, if Users sign in of sign up failed (such as wrong user name/ password or sign up with the user name
has been exised), Website will return the notification for Users:

or

When sign in process still be failed, customer will cannot get into User Page. However, They can view this website
hompage as guest but in guest mode, they cannot perform any task involing to buying or trading products or services in
this web.
1.5. Cart site
The Cart function only can be operated as soon as customers get done with Account Sign in. In case customers have not
yet sign in but them still want to use Cart. System will send the notification appearing on the top of website like below:

Hence, for continuing using website’s service, customers need to complete account process. As soon as done that
process, customer can immediately continue with using Cart services. Below are source code notice

Explaination: System will examine that whether the login information(particularly Customer ID) has been existed in
temporary memory of host or not. If customers has not logged in, system will declare session to notify the notification
in homepage. Notification box has been built by bootstrap 4.

To view Cart, customers can click on “My Cart Button” which located in menu site:

This button will redirect customer directly to Cart Form. To add Products into cart, customer can click on “Add to Cart”

button which appear on each products in website’s homepage:

When customers add this product to cart, system will be implemented and this product will be added in the personal
cart of customer and it look like below

Figure 25: Interface of Cart

Source Code

Explaination: To add a product into cart, I has been used Session to

create shopping Sessions in form of multi-dimension array.
Particularly, When customers click on “add-to-cart” button in
homepage, Id of this product will send on to Url and sytem will get
it. System will check if this ID not yet existed, from this id I will
query into mysql with condition as in image. Then, program will
create a multi-dimension array with key is the id which already got,
and each value assigned to values of this product queried from
mysql. On the contrast, if this ID already existed, the quantity of this
products in cart will be increased. In cart interface, these products
added will be displayed by foreach loop.
Customer can easily adjust the quantity of products in cart, price and total price of bill will continuous update

Figure 26: After adjust product in cart

Source code

Source code to increase or decrease the Source code to

quantity of product in cart. Particularly, delete products
the minus and plus putton in cart in cart
interface has include their own types,
and when it has been clicked its type
and id will be sent on to Url, program
will check what type of this button and
check the condition as in image and
perform these syntax.

Additonally, Customers can easily add more products into cart by click on button “add to cart” introduced above:

Figure 27: after add more Products

 To request purchase these products in cart, customers can click on Purchase Button at left side of Cart Form

There are the essential condition that require customers must fullfill information including Address and phone
number to ensure that these order will be deliveried properly.

Source code:

First, program will check Whether Address and Phone has been filled. If yes, Session will be started and Progarm will
retrieve all informatin of this Order. Based on Session Id(ID of customer’s account) and key Id(Id of products), program
will execute “Insert query” Syntax via php language to insert these information into mysql database with the compatible
ID of customer and Id of products.
 1.6. Website Admin Management site:

This site is only for Administrators of Shop can utilize. There is only account which have the greatest power in this website can
sign in directly to Admin site. If User are not admin and they do not have admin account, this user cannot get into admin site,
even they try any different account.

To Sign in to admin site, user can also click on “My account” button and here is the other link to redirect to Admin site(Sign in
as admin now)

This link will be located below Sign in button and Create one link. And when user are redirected to Sign in As Admin site, User
can sign in with account admin.

Source code: Html & CSS

mix bootstrap.

Figure 28: Admin Sign in

This notification will be sent when user who are not admin try to sign in admin site.

As soon as successfully sign in as admin, this is the interface will display for admins of shop can handle their own shop.

Figure 29: Admin site interface

Administrator can edit or delete every products in their shop as well as update new products into their shop. Add form will
always appear at bottom of admin site, admin can easily see it, every information of a product will be here.

Figure 30: Add Products form

To edit each product, admin can click on Edit Button on same row with product.

Update form will also appear at bottom of website. It will include fullfilly information of product and admin can adjust or edit
it very easy and save much time.

Figure 31: Update Form

Source Code

Brief explain: Program will execute

update query syntax via php
language to update database from
value in update form in admin site
based on product id. Additional,
the Add product form also
operating quite like this form. In
add product form, progarm will
execute insert query syntax
instead of update and add product
form not based on any condition of
system. Besides, Delete function
will be deleted based on id of
product.
Lastly, To Manage Orders from Customer, Admin can click on “Order List” selection which appear in Menu form(left side of
admin site)

Here is Manage Orders form.

Figure 32: Manage Orders Form

In here, admin can see full information of every orders, which have been requested from customers including address, phone,
order date, product and quantity of products. Then, admins can confirm or cancel this order based on condition of their shop.
C. CREATE A SUITABLE TEST PLAN(P7)
I. PurPose of Test:

Basically, making a website also has been viewed as complicated thing. However, Satisfying the Client by ensure User
Experiments/user Interface operating properly and smoothly as well as assure system are more complicated and need to
be test multiple times. Here some main purpose of this testing time:

 Verifying functionality guidelines and customer requirements

 Validating expectations and customer requirements
 Checking data validation of system
 Check data flow
 Checking 'real' end user scenarios
 Exposing errors

II. Test Plan

No. What is being Tested How Test data used Expected results

1 Validation of Input Enter typical values, Information of Good data accepted,

boundary value, values that products bad data rejected
should be rejected
2 Verify the Signin/Signup process Input some Username which Function involve to Reject the improper
has been used, Test system Signin/Signup handle to
check account signin/signup process
3 Functionality Try using function in website Function in website Function operating
properly and meet
customer needs.
 III. Test Log

Test Signin/Signup by interacting with the available account in database: Username : Sephoang; Password: 000000

No. Test Case Decription Actual Result Expected Overall

Resuld
1. Test Sign in with wrong user Enter wrong username : Error Error Pass
name “Sephoang123” instead of
“Sephoang”
2. Test Sign in with wrong Enter wrong password : Error Error Pass
Password “000003” instead of “000000”
3. Test Sign in with empty Not enter username Error Error Pass
username
4. Test Sign in with empty Test Sign in with empty Error Error Pass
password password

5. Test Sign in with Exact Sign in with Signin Success Pass

Username and Exact Password username:”Sephoang” Successfully
&
Password:”000000”
6. Sign up with the username has Sign up with user name Error Error Pass
been used “Sephoang” which has been used

7. Test Signup with wrong Sign up with user name contain Accepted by Error False
common username structure special characters such as ‘@’, System
‘#’, “%”

8. Test Signup with wrong Sign up with the length of Accepted by Error False
common password structure password less than 8 System

9. Test Signup with proper Sign up with username Signup Success Pass
username & password “danchoi” & password “123456” successfully

10. Update profile with wrong Update phone number contains Error Error Pass
phone structure letter or speacial character
 Example: “#$%#123456”

11. Update profile with wrong Input virtual address or fake Accepted by Error False
Address structure address “@#! HA noi” System
12. Update profile with proper Update with phone Update Success Pass
phone “03251642987” & Address “15 Successfully
Hanoi”
13. View all Products & categories Check all products and All Products All Product Pass
on Homepage categories on Hompage and Categories and
are Viewable in Categories are
Homepage Viewable in
Homepage
14. Test link Items Clicking on a products on All Information All Information Pass
homepage of this product of this product
be fetched in viewable in
details page details page

15. Test checking assurance of Add products to cart before Error Error Pass
system Signin or Signup
16. Test checking assurance of Purchase an order when Error Error Pass
system 2 information about address &
phone still empty
17. Test checking assurance of Searching info with a string not Return “ Return “ Pass
system 3 like any product name Nothing Match ” Nothing
Match ” or “No
result”
18. Test checking assurance of Try Clicking on Cart before Return Return Pass
system 4 Signin or Signup “Message” “Notice
message”
19. Test checking assurance of Try Sign in admin site with Error Error Pass
system 5 normal account
20. Test Functional ability Open and close Message Box Open and close Able to open Pass
smoothly and close
21. Test Functional ability 2 Open and Close Menu Side Open menu Able to Open Pass
smoothly, & close menu
homepage Homepage
interface is interface
pulled from left move
to right with smoothly in
smooth effect the direction
and contrast of menu
when close
menu all
become normal
22. Test Functional ability 3 Switch mode between Dark Switching Able to Pass
mode and Light mode smoothly with Switching
animated effect
23. Test Functional ability 4 Update or edit profile when Accepted by Able to handle Pass
Signed in system profile
24. Test Functional ability 5 All products which has been Some products Listing full False
bought will be display in user- are not been producs
Page listed
25. Test Functional ability 6 Log out Able to Log out Able to log out Pass

26. Test Functional ability 7 Edit or Delete available products Easily Edit and Able to Edit Pass
with admin power Delete products and Delete
27. Test Functional ability 8 Add products with admin power Easily Add Able to Add Pass
products products
28. Test Functional ability 9 Confirm or Cancel Orders from Easily Confirm Able to False
Customers with admin power or Cancel. confirm or
However, Cancel
sometime products and
Orders are not All Orders are
listed fully list
29. Test Functional ability 10 Filter by categories Products are Able to filter Pass
filtered by
category
 30. Test Functional ability 11 Adjust quantity of products in Able to plus or Able to adjust Pass
Cart minus quantity
31. Test Functional ability 12 Add more products into Cart Accepter by Able to add all Pass
system products into
Cart
32. Test Functional ability 12 Add more products to Calculate Automatically Exactly Pass
price Calculate total calculate price
of price
33. Test admin system Add products with lack of Accepted by Error False
product’s information by admin system
power(paticularly lack of detail)

Overall:

After testing process, through 33 test times, the program received 6 test times which has been not passed the checking
condition. It has showed that the program still be incomplete, there are many problems needed to be fixed. Almost false test
times involved to Validation Input ability of System. Although there are explicit Errors which can see when perform quick test
and there are many hidden errors, I has focused on fixing validation input ability before.

Solution:

To enhance the validation input ability, the good way I found that is using JS Validator to improve validation. I could use form
validation which has provided by W3s to create validation for each field which get data from Users.

For Instance, there is an example to fix Validation:

By this condition built by JS, the profram can filter the password which must more than 6 characters. Thereby, I could use JS to Validate other
fields.
D. COMPARE AND CONTRAST THE MULTIPAGE WEBSITE CREATED TO THE DESIGN DOCUMENT(M4)
I. Compare And Contrast
1. HomePage Interface:

Figure 33: Compare between wireframe and real web hompage

Overview:

Generally, the real page is designed quite identical to the wireframe, they layout of header, body and footer are designed fully
and arrange appropriately. Border of each frame box also be made softly and look more modern.
Assess Compare & Contrast:

Comparing to design document, Real Homepage also is deisigned for containing almostly functions as given document, functions
include: search form for products, categories filter section, flexible navigation bar design, animated effect with menu side and
box chat interface. All functions are designed quite aesthetic and suitable with requirements. Page loading also quite quick.
Additional, all site of web also use friendly font. Each product are displayed fully info including : price, image, title and the eye-
catching button to add product into cart and these all in a section based on user criteria in design document. The position of
Elements also quite meet the criteria of Design Standard.

However, There are still some contrasts of homepage to given design document, such as grid responsive of homepage is quite
bad. It just suit for ipad and computor console but not really suit for mobile. Interface of box chat frequently gets error at form
search in message bar. Border’s color of homepage in light mode make layout quite hard to see because its colour tone is as same
as background tone. Fortunately, homepage has dark mode, it can make layout more easier to see than default. Homepage still
not yet reached the SEO-friendly as the principles suggested.

2. Details Site

Figure 34: Comparing between wireframe and real details page

Assess Compare & Contrast:

Basically, Real Details site are designed quite similar to the wireframe in design document, there are not so much different
between these two. In Real Details Site, the layout details of each section is design more flexible. It look more suitable with a
shopping website. It contain fully : reviews section, decriptions with each new line, Icon, colour are mixed appropriately.
Background color and other color when compare with user documents in Part C is viewed as meeting all user needs of detail
site. Grid responsive of this site is pretty good, It can suit either for computer/ipad or for even mobiles with 375 x 1080 pixel.
Animated effect of the big image in this site is quite eye-catching which assesser based on web design standard.

However, This site also has some contrast with design document. It meet almost user needs, but the favourite button still in
maintainance process and it not yet can be used. Review path also like Favourite Button, these two also in maintainance process.
The location of category label and its value are stil skewed, they are not in same line and this partly make site are loss aesthetic.

3. Cart form

Figure 35: Comparing Between wireframe and real cart form

Assess Compare & Contrast:

Design of Cart form look not really similar to wireframe layout. This is because for aesthetic experiments of users, I re-split the
layout to 1 part for Bill side and 3 part for Cart side instead of 1 – 1 ratio like initial wireframe. It partly make real Cart form look
more modern and aesthetic when compare to wireframe as well as not too obsolete when compare to other modern shopping
websites. Layout of each products listed in Cart also is quite good, it easy for customers can see statistic of products they has
bought and it also meets the design document requirements. In bill side, price section are designed easy to see and options
section also look modern. Responsive of Cart is quite good and stable through some testing time. It can automatically adjust size
to fit with different types of screen.

However, The options of website still be in maintanance process, it can not be used, form text of give code is bigger than other
text form, it not follow standard in design document and make this site look uneven.

4. User Page

Figure 36: Comparing wireframe and Real User Page

Assess Compare & Contrast:

Generally, Userpage when compare to design document, Interface of User-page has been designed based on layout of wireframe.

However, there are quite multiple weakness of this site when compare and contrast with design document. The screen’s ratio
spliting of this site quite bad. The Section which contains User-information quite small compare to wirefram ratio. It make User-
Page quite hard to see and lessen friendly feature of website. The layout of this site also is not really fine for an user profile site.

5. Admin Management Site

Figure 37: Comparing Real Admin Site and wireframe

Basically, admin manament site is designed quite identical to the wireframe, they layout of navigation bar, body and footer
are designed fully and arrange appropriately. Border of each frame box also be made softly and look more modern.

Assess Compare & Contrast:

 Comparing to design document, Real admin site also is deisigned for containing fully functions as given document, functions
include: search form for products which are available in shop, categories filter section, simple and logical navigation bar
design, menu side and Update product form. All functions are designed quite aesthetic and suitable with requirements. Page
loading also quite quick. It also meet the user requirements of Admin that admin need add, edit, delete products. And there
are fully these ability. Products list has been designed in form of table as in design document, therefore; Admin can
distinguish this products and that products. Grid responsive of admin site is quite good as in design document requirements.
Its bootstrap operating appropriately, it can suit with any screen size.

However, There are still some contrasts of admin site to given design document, such as this colour and layout is not really
suitable for admin site, it look like a simple customer site than the admin site which need careful and professional in working
process. Update form has been designed quite coarse with seem to be no CSS. This site has bad font, some text phrase are
quite hard to read. This site also is badly compatible for mobile screen although the grid reponsive of this site is quite good.

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

I. Overview The QA Process

QA – Quality Assurance is refered to a sequence of activities to assure that this website is providing the best possible
experiment or service to customers. QA testing practice applied to test websites or web functions for potential bugs and
focuses on enhancing the processes to provide better quality to the customer. A web-based system which just completed
designing needs to be examined entirely from end-to-end before it goes live for end users.

QA Process List:

 Web Functional Ability Test

 System Design Test
 Page Interface Test
 Accessible Test
 Compatiblity Test
 II. Review How It Was Implemented During Design & Development Stages & Evaluate Quality Assurance in
each Testing Process
1. Web Functional Ability Test Process:
1.1. Test form operating in website

Criteria:

 Default values on text box

 Valid and invalid inputted data
 Check all the validation on each field
 Check corresponding fields in DB
 Try resizing the browser's window to see if strange wrapping occurs around the forms/pages
No. What being tested Evaluate After Testing
based on Criteria
1. Validation in this form
is not really fine.
Check Struture of user
name and password
quite bad. Check Data
existed well.
Other Criterias Passed
2. Validation in this form
is not really fine.
Check Struture of user
name and password
quite bad. Check Data
existed well.
Other Criterias Passed

3. All Criterias Passed

 4. Validation in this form
is not really fine.
Check Struture of
Name, Phone and
Address data type
quite bad.
Other Criterias Passed

5. Validation in this form

is not really fine.
Corresponding to DB
well. Other Criterias
Passed

To enhance and fix the validation data in each form, this is good way to apply more Javascript syntax and function to check the
structure of Username, password. There is a screenshot code to check the length of password

Thereby, it’s necessary to apply JS validator on all form in web to ensure quality assurance process and enhance user
experiment as well as performance of web’s system.
 1.2. Test Link

Criteria:

 Test the outgoing links from all the pages to the specific domain under test.
 Test all internal links.
 Test links jumping on the same pages.
 Test links used to send email to admin or other users from web pages.
 Test to check if there are any orphan pages.

No. What Being Tested Evaluate After Testing

1. http://localhost/asm2/index.php Connect Well

2. http://localhost/asm2/Fullstock.php Connect Well
3. http://localhost/asm2/Cart.php Connect Well
4. http://localhost/asm2/Details.php Connect Well
5. http://localhost/asm2/Account/Signin.php Connect Well
6. http://localhost/asm2/Account/Signupok.php Connect Well
7. http://localhost/asm2/Admin/Signin_to_admin.php Connect Well
8. http://localhost/asm2/Admin/index.php Connect Well
9. http://localhost/asm2/Admin/Order-list.php Connect Well
10. http://localhost/asm2/Account/User-page.php Connect Well
11. http://localhost/asm2/index.php?Search=candy to Connect Well
http://localhost/asm2/index.php?Search=beer to
http://localhost/asm2/index.php?Search=accessories
12. http://localhost/asm2/index.php?Id=1 to Connect Well
http://localhost/asm2/index.php?Id=2 to
http://localhost/asm2/index.php?Id=5 to
1. System Design Test
a. Database Connection test

To Test the mysqli database connection, I need to declare a variable that contains your DB connection, which I can
examine at any point.

$conn = new mysqli('localhost', 'root', '', 'notashop'); or $conn = mysqli_connect('localhost', 'root', '', 'notashop');

After Declare Db connect variable, I can test querying via the $conn variable to figure out the connection quality.

if($conn->connect_error)

echo "Connection fail<br>";

die($conn->connect_error);

To check for data integrity and errors while handle with Database the forms or do any DB related functionality. Check if
all the database queries are executing correctly, data is retrieved and also updated correctly. There are screenshot of
code to test DB Connection:
 b. Handling with Database Test

Test insert Account information into Database from script language

Check input and data retrieve from Sign in/ Sign up form after validation process. To check whether these data has
been got into program to store in database, I need to use die() function to stop and print at the variable query before
continuting next step.

When print the variable assigned to query and it absolutely is normal and has no bugs or errors, I will delete die()
function to next process has been executed.

Test insert Order info from script language

Error: When testing the process of inserting all informations of an order into Database via PHP, my system has got bug.
After I had Tested input an order with some products and then, these information has not been inserted into database.
This bug seem to be an error at the duration of implementing code to swiching information got in cart to data that
Database could retrieve. After debugging in some code phrase, it has been realized that the bug happenning in the code
below:

I must have used die() function to figure out the reason and this bugs happen due to “$ToID” variable which store
OrderID for determine what Order need to be inserted their details order.

Solution: Adding more function(Mysqli_fetch_array) to get only one value of orderid

 From there, the progarm can handle with order informations in not only insert them into database and store them
carefully but also manipulating with these data to display in user page and storing in admin site.

2. Page Interface Test

Test Sytem notification:

Notification is a crucial part of a website, therefore; it needs to be tested carefully from designing code to try running on
website.

To ensure system will notify when user do wrong handle, there is example source code to display notification notify user that
they wrong at sign in:

Test & Check:

Figure 38: System notify that user has been wrong at sign
in

Test process showed that system has been implemented properly, there are no bug and error =>

 Partly Ensure quality of Account assurance

Test Animated Effect on Homepage

It is necessary to test Effect to ensure UI and UX

Criteria:

 Smooth
 Not affect to other section
 No stalling when effect executed
 Flexible animation

Drop-down in navigation bar effect test:

Menu drop from top to down with the soft effect

 All criterias Passed

Primary menu of web:

Figure 39: Test Animated effect of menu

 All criterias Passed

 Content Checking for QA

Criteria:

 Content, Text should be logical and uncomplicated.

 Check for spelling/Grammar errors.
 Content, title, Text should be meaningful.
 All the anchor text links should be working properly.
 Images should be placed properly with proper sizes.

Checking process:

Page Evaluate QA

 Simple, clean, and friendly theme

 Content, name of products is meaningful,
enought informations needed to be display.
 Images is be placed properly with proper
sizes.
 Slider is located in appropriate location.
 Anchor in navigation and anchor in (See all
Products) work properly.
 Clear font-size of Each Anchor flag
 Content, name of each information at footer
is meaningful, enought informations needed
to be display.

 Spelling/Grammar Assurance
 Images in proper size to be displayed
clearly
 Bad font size

 Aesthetic theme
 Detail Content is meaningful, enought
informations of product.
 Images is be placed properly with proper
sizes.
 3. Accesible Test

Test Redirection

Redirecting Pages From Website HomePage (asm2/index.php)

No. Accesible Pages from Website HomePage Evaluate

i. Signin.php Ability to access

 Success

ii. SignupOk.php Ability to access

 Success

iii. User-page.php Ability to access

 Success
iv. Cart.php Ability to access
 Success

v. Details.php Ability to access

 Success

vi. Fullstock.php Ability to access

 Success

vii. Admin/index.php Ability to access

 Success

viii. Admin/Order-List.php Ability to access

 Success
Redirecting Pages From Admin Site (asm2/Admin/index.php)

No. Accesible Pages from Website HomePage Evaluate

ix. Signin.php Ability to access

 Success

x. SignupOk.php Ability to access

 Success

xi. User-page.php Ability to access

 Success

xii. Cart.php Ability to access

 Success

xiii. Details.php Ability to access

 Success

xiv. Fullstock.php Ability to access

 Success

xv. Asm2/index.php Ability to access

 Success
 4. Compatibility Test

On Computer Screen, To Test and Evaluate QA, there are some common browsers to test

1) Google chrome – the most popular browser

2) Coccoc – the common browser in Vietnam

3) Microsoft Edge

The Images reponsize size in slider

The slider display images

better in Google & CocCoc
Browser

In Microsoft Edge, The

slider images frequently
gets deviated size
coressponding to slider size
The color compatibility of each section

In Chrome and CocCoc,

colour tones of web are
displayed clearly. It's can
clearly be seen the division
between the colors, which
proves that the website is
very compatible in colours
with these browser.

In Microsoft Edge, Colour

tones are quite pale

Error Images

When the image get error in path, size of image still be

intacto and not disappear when the image cannot display.
This means website is compatible in fixed size in any
browser
Test compatibility of web on mobile web.

User page when display in mobile screen size,

All forms switch form from horizontal to
vertical, all element of userpage are re-size to
fit with mobile screen
 Good Compatibility

Cart interface split from Cart and bill display in

the form to Cart on above Bill at bottom, all
element of userpage are re-size to fit with
mobile screen
 Good Compatibility
In footer, website is compatible well to mobile
web screen but the main body of web sometime
gets error in sizing of images, it can led to bad
experiment to user.
 Bad compatibility

Signin/Signup and Sign into Admin site is well

compatibility and reponsive well on mobile
screen. All elements are sorted appropriate to
meet requirements
 Good Compatibility
 In Admin site, it can be seen that website can be
compatible with mobile screen. However, all
element is so small for seeing. Specially, admin
site has many crucial tasks, it is not fine when
all element hard-to-look.
 Not really good compatible.

III. Evaluate QA Testing Process

Test Process Evaluation Overall
Success
Rate
Web Functional Ability Test Generally, the website's operations work in a logical, consistent, and 6/10
holistic manner. The page's components are not redundant, and they all
work together.
Their own function and significance From customer interface to user
experience.
They all bring a solid user experience, including database processing
experience. The webpages are constructed in a cohesive block.
The website's material is solely focused on the no frills, no distractions,
just the essential point of the page
Validation of system is quite bad.
System Design Test To make the good system and security is a challenging technique, but 7/10
through QA test process there are still ways to improve website system.
I think i can only design rudimentary techniques of avoiding errors and
 bugs from data transition, but maybe this will only limit errors in
operating process. Although Database management still had error and
bug, the database also operating quite proper.
Page Interface Test Overall, the interface QA testing has yielded positive findings; the user 6/10
interface is almostly neither broken or crashed as a result of any faults.
arise as a result of the system All usual blunders are built in.
On a different error point to avoid any degradation of the user's
experiment.
The page's navigation is well-designed. No pages are stuck, and all
pages are in the correct order.
However, the user interface in some page still in not good design and
colour mixing. The repondsive is not really fine.

Accessible Test Redirecting the same content group is possible. Redirecting to the 8/10
other page is possible
Compatiblity Test Overall, when it comes to compatibility testing, By testing compatibility 7/10
on various browsers, operating systems, and devices, we discovered that
each of them displays webpages in slightly different ways, but in general,
all information is fully displayed. No website has been broken, no
webpage has become unstructured, and no information has been lost.
Ensure that users receive correct information.

References
Agrawal, A., 2019. [Online]
Available at: https://customerthink.com/top-website-design-and-development-guidelines-for-2019/

CRESTODINA, 2015. orbitmedia. [Online]

Available at: https://digital-goal.net/top-principles-of-effective-web-design/
W3C, 2016. Standard Design. [Online]
Available at: https://www.w3.org/standards/webdesign/