1633 webdesign assignment 2 fpt greenwich (Merit)

Điểm của bài asm còn tùy thuộc vào người chấm. Chỉ cần paraphase bài này là có thể pass. 1 trong nhưng tool paraphase mình recommend là quillbot.The submission is in the form of 1 document.● You must use the Times font with 12pt size, turn on page numbering; set line spacing to 1.3 andmargins to be as follows: left = 1.25cm, right = 1cm, top = 1cm, bottom = 1cm. Citation andreferences must follow the Harvard referencing style.

ASSIGNMENT 2 FRONT SHEET

Unit number and title 10: Website Design & Development

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

 Summative Feedback:  Resubmission Feedback:

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)

1 Client and Customer Requirements

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

 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

 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

 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

 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

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)

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

This is the diagram describing manipulating with website for admin

Figure 1: Flow Diagram

Figure 2: admin diagram

2.3 Customer use-case diagram:

This is the diagram describing manipulating with website for customers

Figure 3: Customer use-case diagram

3.1 HomePage WireFrame

Explaination for this wirefram:

Header of the website includes:

Figure 6: Wireframe

 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

Figure 7: Detail wireframe

3.3 Cart site Wireframe

3.5 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

Figure 11: Admin Site Wireframe

3.6 Mockup wireframe:

Mockup between Homepage between another Pages

Figure 12: Mockup

Site map:

Figure 14: Overview full sitemap

B IMPLEMENTATION OF WEBSITE DESIGN(P6)

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

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

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

Figure 18: Illustrated image

Figure 19: After Click

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

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:

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,

Text will be change to Light colours

Figure 21: Dark mode

Source code of this mode:

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

Figure 22: Light mode

1.4 Account Site:

Sign in Interface

Sign up Interface

Figure 23: Sign in 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

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

Figure 25: Interface of Cart

Customer can easily adjust the quantity of products in cart, price and total price of bill will continuous update

Source code

Source code to increase or decrease the quantity of product in cart Particularly, the minus and plus putton 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

Source code to delete products

in cart

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

Figure 26: After adjust product in cart

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