Unit 05: Website Design & Development - Florist Website Report

This report details the design and development of a florist website, covering the entire process from initial concept to implementation and testing. The report begins with an introduction to the importance of online shopping and the goals of the florist website, which includes providing a user-friendly interface for both customers and administrators. It then delves into system analysis, including input/output information and influence agents, followed by use case and product management diagrams. Wireframes for various pages, such as the homepage, product details, shopping cart, search, and login, are presented to visualize the website's structure. The report then describes the website's functionalities, including the administrator's ability to manage products and users, and the customer's ability to browse, search, and purchase products. The report also covers the website's design, including the use of HTML, CSS, and PHP, along with code snippets to illustrate key elements. Finally, a test plan is created to review the website's performance and design, including testing GUI elements, user experience, and website functions across different devices. The report concludes with a discussion of the website's responsiveness and its ability to provide a seamless user experience.

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