[FULL ACCESS] Reviewing Website Performance and Design

This assignment involves creating a test plan to review the performance and design of a multipage website. It includes testing the graphical user interface (GUI), responsive web design, user experience, and functionality of various features such as login, product view, add new product, update product, delete product, search product, and cart. The test plan is designed to ensure that the website is easy to use, navigate, and meets the expected results for each feature.

ASSIGNMENT 1 FRONT SHEET
Qualification TEC Level 5 HND Diploma in Computing
Unit number and title Unit 05: Website Design & Development
Submission date 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
1

❒ Summative Feedback: ❒ Resubmission Feedback:
Grade: Assessor Signature: Date:
Signature & Date:
2

3

I INTRODUCE
Nowadays, in the hustle and bustle of people, it is too far away to take the time to go out to shop.
Therefore, online shopping becomes more important and necessary, just one click away, they can
get the product they want. After going to the sales website, choosing a product, just placing an
order, the seller will bring the product to your home. Online shopping allows you to buy items
whenever you want. So, in this report, I will use website technologies, tools and techniques with
designing a florist website. Then, I will create and use the Test Plan to review the site's
performance and design.
II Utilize website technologies, tools and
techniques with good design principles to
create a multipage website.
1.Create a design document for a branded,
multipage website supported with medium
fidelity wireframes and a full set of client and
user requirements ...
Fresh flowers have long become meaningful gifts that everyone gives to each other. Each flower
has its own meaning and each bouquet will replace what the giver wants to say.
Gradually, the flower-selling service becomes extremely attractive to many flower lovers and
business enthusiasts. Now, if they want to develop their business, outperform the competition,
the shop owners have started to Onlineize the service of providing fresh flowers and everything
starts with designing a website that sells fresh flowers.
1.1 Website construction goals
First, an online website needs to have a beautiful and attractive web interface to customers.
Designing a beautiful interface in color tones matching the products sold is a mandatory
criterion for a website that sells fresh flowers.
a) Object of the website:
Website is built to serve two main objects: Admin and Customers with the following functions:
- Admin:
 Website login
 View, update, delete product information.
4

 Manage orders
 View, respond to customer comments, suggestions and feedback or delete such
information from customers
 View, delete information of customers but not have the right to change that
information
 News updates
- Customer (user and guest):
 View product information as well as other news.
 Order products
b) Characteristics:
Build a simple, user-friendly, easy-to-use online florist system that allows customers to view
information and place orders online, administrators manage product information as well as
users.
Website designed with:
- Harmonious and user-friendly interface makes it easy for users to use.
- The home page will display a list of the newest and best-selling products that make it
easier for users to find.
- Customers can easily find detailed information about the flowers they are interested in.
- Customers can choose to buy the flowers they need based on their financial capacity
and required functionality by adding them to the cart.
- Have the function of registration, login. Customers can send feedback and suggestions
to the Website to contribute to enriching and developing the Website. use, allowing
customers to view information and place orders online, administrators to manage
information about products as well as users.
1.2 System analysis
a) The system's input and output information:
Input information:
- Customer information
- Product information
- Information about the company and related articles
- The feedback
- The order
Information output:
- Details of the product
- Bill
- The feedback
5

b) Influence agent
Customer (Client): User and Guest
Admin
Figure 1. Influence agent
6

1.3 Use Case Diagram
Figure 2. Use Case Diagram
1.4 Product Management Diagram
My florist system consists of two main entities: product and user
Table Product:
7

Figure 3. Table product
Table User:
Figure 4. Table user
And below is my product management diagram:
8

Figure 5. Product Management Diagram
1.5 Wireframe
My website consists of the following main directories:
Figure 6. Website directory
In that the admin directory is used to store files on the administrator side. Here administrators can log in
to the sales system, manage users; add, delete and edit products, ...
The css folder used to store css files. CSS will help HTML forms to display more vibrant colors, frame
formats, media, ... Besides, CSS will help them a lot of work in building the interface, only a small piece
of code will make our app more professional shimmer.
The images folder is used to store the images that we will use for a website.
The inc folder is used to store files that will be shared by the entire website
Beautiful website interface will decide the attention of customers, so, when designing the
website to sell flowers, we choose many beautiful modern web templates and SEO and modern
standards for customers to choose from. A wireframe is a visualization of a Web page. It is
meant to show all the items included on a particular page, without defining the look (or graphic
design). Below is the wireframe for my website.
Index. php
Home page "index. php":
- This is the main page of the company, containing all the items to choose from. From the
home page, customers can find all necessary information
- Information about all kinds of products with close, friendly and easy to use interface ...
from which customers can order for themselves favorite products, suitable for their
budget …
9

Figure 7. wireframe of index. Php
Singer-product.php
This page will display details of the product that the customer chooses.
10

Figure 8. wireframe of singer-profuct.php
Cart.php
The shopping cart is designed with smart stand out, helping customers easily add products,
customers can also delete and supplement depending on their needs.
Shopping cart item is an indispensable category for any e-commerce website, online sale. You
will easily see a shopping cart icon placed in the right corner of the website to help customers
understand the number of products selected and the total amount. When they click on the
shopping cart to view details, transactions such as shipping, payment and ordering will be
displayed to help close the customer quickly.
11

Figure 9. . wireframe of singer-profuct.php
Search. php
Smart search filters help customers easily find the right products for their needs, customers can
search by the latest product group, the most purchased product, related product, or search by
right key word.
12

Figure 10. . wireframe of singer-profuct.php
Login. Php
This page will let the administrator login username and password to log into the system.
13

Figure 11. wireframe of login. Php
Admin: list product:
14

Figure 12. listsp. Php
Add product:
Figure 13. themsp. Php
15

Figure 14. suasp. php
1.6 Site diagram
2.Use your design document with appropriate
principles, standards and guidelines to
produce a branded, multipage website
supported with realistic content.
I used Xampp and Sublime Text to develop a fully functional website, based on an existing
design.
2.1 On the administrator side:
When running the program, the system will appear a login form for users to enter username
and password.
16

Figure 15. Login
Figure 16. Login. php
17

After logging into the system, an admin page will appear so that the administrator can manage
product and customer information. Admin can add, edit, and delete fresh flower products on
the website.
Figure 17. Admin page
18

Figure 18. Delete product
When the administrator wants to add the product:
Figure 19. Add Product
19

Figure 20. Add Product (code)
Or when the administrator wants to fix the product:
20

Figure 21. Update product
21

Figure 22. Code Update product
When the administrator wants to logout, the site will return to the login page.
22

2.2 User side:
When a user enters your website a homepage will appear. This is also the place to display the
sub-categories in the website to help visitors easily grasp all the elements of the website.
Below are the elements that we will see in the home page:
- Header: This element is located at the top of the web page and is displayed on all pages
of the website. Inside the header contains the following components:
 Navigation menu: A container for the collection of links to main pages on the
website. My menu bar includes the following links: Home, Product, Contact,
News ...
 Search box: with the search box, users will find information on the website
quickly.
Figure 23. Header
Code:
23

Figure 24. header. php
- Content: This is the main body of the site and contains the most information.
24

Figure 25. Content
Code:
25

Figure 26. index. Php
For webpages that contain a lot of content like a product listing slide or article list, pagination helps to
reduce the load on the website so that the page loads faster, it also saves the user from having to load.
scrolling too much. Below is the pagination technique for the website:
26

Figure 27. pagination. php
- Footer: This section contains the information bar (information such as postdate, who is
the author, number of post views ...) and social sharing bar: includes buttons to share
the page via popular social networks such as Facebook, Google, Twitter ... so that users
can contact the store
27

Figure 28. Footer
Here is the complete look and feel of the website:
28

Figure 29. Home page
When you click on the product you want to buy, the website will go to the singer-product page.
Here, customers will know more details about the product such as price, the meaning of the
product, ...
Figure 30. singer-product
29

Figure 31. singer-product. php
Or customers can enter the product they want to find on the search bar:
30

Figure 32. search
Figure 33. search. php
And press the buy button to go to the cart page to pay the product:
Figure 34. cart
31

Figure 35. cart. php Figure 36. cart. css
III Create and use a Test Plan to review the
performance and design of a multipage
website.
1.Test GUI
Elements for
testing
Detail
User
Interface(UI)
Color Colors are in harmony the two main color of blue and white
Layout The layout of the website is harmonious and easy to see
Font The most commonly used font when designing the web is
Time New Roman.
32

Easy-to-read font, not messy.
Image Beautiful image, attracting viewers. The flexible image is also
sized in relative units.
User
Experience(UX
)
When open
website on a
computer, laptop,
tablet
Website easy to see, easy to use.
When open a
webpage on a
phone
It is harder to use because the phone screen is small, so have
to zoom up. However, when zoomed in, the website still
retains its original frame without being affected
 Responsive web:
To create a responsive website, add the following <meta> tag to all your web pages:
Figure 37. Meta tag
In addition to resizing text and images, people often use media queries in responsive web pages
as well.
With media queries, you can define completely different styles for different browser sizes.
Figure 38
Test responsive web: Below are some of the responsive webs with different resolutions and device
types:
33

Figure 39 Responsive web on iPad
34

Figure 40. Responsive web on mobile
35

Figure 41. Responsive web on computer
2. Test functions
N
o
Scope Test summary Input detail Expected result Status
1 Test
Login
Test login Username and
password
Login as admin Pass
2 Test
view
product
Test view product
normal
List of products Display product
list
Pass
3 Test add
new
product
Test add new
product
Product details Product add to
“Flower List”
Pass
4 Test
update
product
Test update
product normal
Product details Product edited Pass
5 Test
delete
product
Test delete product
normal
Product id Product deleted Pass
6 Test
search
product
Test search product
normal
Product name Product
information
Pass
7 Test cart Test cart Product name Shopping cart
information,
product
payment
Pass
a) Test login
36

Figure 42. Test Login
b) Test view Product
Figure 43. Test view Product
c) Test add new product
37

d) Test update product
For example, I will edit the product named White orchids (id = 1) into a product named Take my
hand.
Figure 44. Update product
Before:
38

Figure 45. Before update product
After:
Figure 46 After update product
e) Test delete product
For example, I will remove the product with id = 2 (Happy) from the product list.
Before:
39

Figure 47. Before delete product
After:
Figure 48. after delete product
f) Test search product
For example, I will find product named White and I get the following result:
40