developing a website for selling plants

HCM University of Technology and Major: Information Technology Topic Name: Developing a website for selling plants.. HCM University of Technology and Major: Information Technology Topic

INTRODUCTION

The urgency of the topic

The remarkable advancements in technology 4.0 have made it common for society to rely on technology for every aspect of daily life Furthermore, as a result of the COVID-

19 epidemic, living and working patterns are progressively shifting The atmosphere for studying and working is currently getting steadily cozier Individuals desire to make their workspace more comfortable and personal, whether they work from home or in an office Additionally, the current trend of adorning personal areas is leading to a rise in popularity of compact, low-maintenance potted plants

Online shopping is a growing trend right now that appeals to a wide range of age groups Most consumers worldwide, and especially those in Vietnam, are already accustomed to using websites such as Shopee and Lazada for their online shopping needs However, although having an extensive product selection when it comes to bonsai products, the aforementioned websites lack personalization and interesting facts Furthermore, we discovered that the popular websites that specialize in decorative plants are out of date and frequently offer trees that take up a lot of time or space This is the major reason my crew is working on this project: developing a modern website that sells lovely plants, addressing contemporary purchasing habits, and offering extra content to pique customers' interest in ornamental plants.

The objectives of the project

The following is a list of the project objectives:

Creating two primary modules The management system is the first one, and it contains features that are essential for assisting administrators in overseeing the shop's operations The client website is the subject of the second section, which assists clients in finding and examining product details and making payments online

The system needs to satisfy the non-functional requirements in addition to the primary function specifications like using encryption and requiring user and server authentication techniques for managing user passwords, setting up the overall authorization system framework and developing an user-friendly website

Subjects and scope of study

The project's two main goals were to apply technology and gain real-world experience managing and operating an online shopping and selling system

The first goal focuses on investigating and utilizing technologies that are necessary for creating an online store PostgreSQL, Golang, Vercel, NextJS, Firebase storage and API Services are among the technologies The second goal is to conduct research, apply real- world management knowledge, and run an online system for sales and shopping

The research scope of the specialized essay is focused on major websites such as Bloomscape, The Sill and Cây Cảnh Hà Nội on the internet

1.3.3 Analysis and evaluation of research works

In the process of making essays, the group consulted some well-known online tree selling websites like Bloomscape, The Sill and Cây Cảnh Hà Nội to analyze and evaluate the layout, design, ability to interact with users, advantages, and disadvantages of the above products, thereby using that analysis to apply to our group's products

Based on the information Bloomscape provided in their 'About us', Bloomscape is a Netherlands-based bonsai business website Their own business, which has been established and refined over many generations, supplies their products They specialize in growing plants in greenhouse systems

This website stands out with its vast and diverse product range, proudly sourced from its own brands This self-sufficiency ensures brand identity and captivates customers Additionally, the website boasts comprehensive support resources and a modern, user-friendly design that enhances the overall shopping experience.

A picture of their products tastefully arranged in a compact area, like a home office or study, greets visitors to their homepage

Customers are then shown a video introducing their working process and their standard products Following that are testimonials from satisfied clients who bought products from them all over the world By doing this, they hope to emphasize their brand and gain the trust of potential clients

The product content is presented very clearly in the product details section, along with instructions for users on how to add products to the shopping cart, all made possible by the section's simple yet elegant design

Figure 1.6 Bloomscape Product Detail Page

They also thoughtfully added interesting additional knowledge about their products

Finally, they also include a list of suggestions for customers of similar items and a comments section that contains product reviews from other customers who have purchased and used this item

The shopping cart page design is very simple but full of necessary details

When it comes to filling in information for delivery, Bloomscape has delicately broken down the process into several steps to make it easier for users to fill in delivery

The Sill is a website founded by Eliza, a Filipino-American citizen in 2012 Thanks to its minimalist design with unique striking color tones, The Sill succeeds in promoting the brand to customers

The Sill's homepage has simple content but in return is a diverse display of products, helping users to refer to and choose easily In addition, users can personalize their

9 experience by taking a quiz so The Sill can suggest products that are more suitable for them

Figure 1.13 The Sill Home Page

The interesting point about The Sill's way of conveying product details is its unique, minimalist layout, with just enough necessary content for customers to refer to and choose

Figure 1.17 The Sill Product Detail Page

The order page is minimalist and easy to use

Figure 1.20 The Sill Ordering Page

Figure 1.21 Cay canh Ha Noi Introduction

Cây cảnh Hà Nội is a website selling ornamental plants established in Hanoi, Vietnam

Although the design is not eye-catching, they still display a variety of products

Figure 1.22 Cay canh Ha Noi Home Page

Figure 1.23 Cay canh Ha Noi Home Page

The outstanding highlight of this website is that in addition to product information, they also include an article about the product right below for users to read more, which is very convenient

Figure 1.24 Cay canh Ha Noi Product Detail Page

Figure 1.25 Cay canh Ha Noi Product Detail Page

The delivery information page is designed to be simple and easy to use

Figure 1.26 Cay canh Ha Noi Ordering Page

Build and develop the necessary features of an e-commerce website

+ Change quantity, delete cart item

+ Payment + Get order list and detail of the order

+ View and update personal information

+ Add, update, delete, view a product

+ Send email to user to reset password + Add, update, delete, view coupon + Update, view order

Chapter 2: System Architecture and Technologies

SYSTEM ARCHITECTURE AND TECHNOLOGIES

System Architecture

An API's operation is subject to restrictions by the software architecture known as Representational State Transfer, or REST The original purpose of REST was to provide guidelines for managing communication on a complicated network such as the internet REST-based architecture can facilitate scalable, dependable, and high-performing communication It is simple to implement and adapt, giving any API system visibility and cross-platform portability

An internet-based interface known as a RESTful API is used by two computer systems to safely exchange data For a variety of purposes, the majority of business apps need to interact with other internal and external apps For instance, in order to automate invoicing and interface with an internal timesheet application, your internal accounts system needs to exchange data with the banking system of your customers in order to produce monthly payslips This information exchange is made possible by RESTful APIs, which adhere to efficient, dependable, and safe software communication standards

Server: Golang Fiber, PostgreSQL, Firebase Storage, SQLX

Technologies Description

PostgreSQL, an open-source RDBMS, offers exceptional reliability, extensibility, and feature-richness Its ACID compliance and wide data type support ensure data integrity PostgreSQL's customizability through user-defined functions and extensions makes it versatile It is commonly used in various applications and benefits from a strong community and commitment to data protection.

Table 2.1 Advantages and Disadvantages of PostgreSQL Table

Open source and free so make it cost-effective for businesses and developers, with no licensing fees

PostgreSQL require complex setup which challenging to set up and configure, especially for beginners

PostgreSQL supports many data types , such as

JSON, array and custom type which is highly extensive

PostgreSQL is scaled horizontally which require more complex design compared to some other databases

Multi-Version Concurrency control which allows for concurrency access to data without blocking, ensuring high data consistency

Text Search engine which is valuable for text- based applications

PostgreSQL is compatible with various operating system, providing flexibility in deployment

PostgreSQL offers strong security features, including roles-based access control, SSL encryption and authentication methods

Firebase storage is a cloud-based file storage service provided by Google It allows developers to store and manage files such as images, videos, and other binary data Firebase Storage is part of the Firebase platform which seamlessly integrates with make it become a popular choice for building web and mobile applications Google also offers optional security for developers by features like security rules, CDN integration for fast content delivery Finally, Firebase storage has a cost-effective solution

Fiber is a web framework inspired Express framework which is built on top of Fast HTTP It is the fastest HTTP engine for go Designed to ease things up for fast development with zero memory allocation and performance in mind

Table 2.2 Advantages and Disadvantages of Golang Fiber Table

Fiber is known as the fastest web framework for go It is designed to handle a high volume of concurrent requests

Less Documentation which could make troubleshooting and finding solutions more challenging

Optimized for low memory usage, which is crucial for high concurrency applications It is made to minimize memory allocations and deadlocations

Limited built-in features because the main purpose of fiber is lightweight so that the framework lacks some built-in features that other frameworks may offer Developer has to rely on third-party libraries for certain functionalities

Support many for web handle: routing, middleware, websockets, error handling, and context handling

Hot reload support which allow developers can make code changes without restarting application

Sqlx, an extension of Go's standard "database/sql" library, streamlines database interactions It enables effortless mapping of query results to Go structs, eliminating the need for manual data conversion This intuitive library simplifies SQL query execution through support for both prepared and straightforward queries Additionally, Sqlx offers compatibility with a wide range of database systems, including PostgreSQL, MySQL, and SQLite.

JSON Web Token is a proposed Internet standard for creating data with optional signature and optional encryption whose payload holds JSON that asserts some number of claims The tokens are signed either using a private secret or a public/private key

2.1.5.2 Structure of JSON Web Token

Header: The header typically includes two parts: the type of the token and the signing algorithm being used

Payload: The second part of the token is the payload It contains JSON data

Signature: The signature is used to verify the message that it was not changed along the way, and in case of the token signed with a private key, it can also verify that the sender of the JSON Web Token

2.1.5.3 Benefits of using JSON Web Token

Authorization: Used immediately upon login Each request to the server is accompanied by a JSON Web Token to allow the user to access a specific service Information exchange: JSON Web Tokens are a good approach to securely transmitting information between parties

TypeScript is JavaScript with syntax for types TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale

JavaScript and More: TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor Catch errors early in your editor

A Result You Can Trust: TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps

Safety at Scale: TypeScript understands JavaScript and uses type inference to give you great tooling without additional code

A JavaScript framework called Next.js lets you create web applications with React and static websites that load incredibly quickly and easily

The biggest and most well-known businesses in the world, including Netflix, Uber, Starbucks, and Twitch, frequently use Next.js It is also regarded as one of the React frameworks with the fastest growth, making it ideal for working with static sites—a topic that has recently gained a lot of attention in the web development community

2.1.7.2 Main features that we implemented into the project:

Server-side rendering, a website development technique, involves creating and displaying web pages on the server side It streamlines the process by sending a fully formatted HTML document directly to the client's browser, resulting in faster and smoother website experiences.

It is a crucial component of Next.js that makes it easier and more efficient for developers to route files URLs can be directly mapped to files in the project directory thanks to Next.js This makes it possible for files to become routes and expedite navigation

A powerful asynchronous state management for our project This library includes many outstanding features such as automatic data caching, error and loading state handling, query fetching… which is very useful in controlling and processing data, displaying quick feedback to users, providing a smooth, responsive website experience.

SYSTEM ANALYSIS AND DESIGN

Requirement capturing and modeling

1 Add, update and delete User Management

4 Create, update, delete product Management

5 Create, update, delete variant Management

7 Create, update, clear cart store

8 Remove, update cart item store

Table 3.2 Non-functional requirements table

1 - The website can be edited and upgraded to suit the tastes of customers and the needs of the administrator Evolution

- Function buttons are arranged not too complicated and easy to see

- The functional screens interact well with each other, creating convenience for users

3 - The database is stored securely and easily accessible

- The website works stably Effectiveness

- System design easy to scale

- The website meets the requirements of the user without affecting the activities of other users

Use case diagrams

Figure 3.1 Guest Use Case Diagram

Chapter 3: System Analysis and Design

Figure 3.2 User Use Case Diagram

Figure 3.3 Administrator Use Case Diagram

Use case Specifications

3.3.1 Description of Customer Login Use Case:

Table 3.3 Description of Customer Login

Description Actor logs into the system

Precondition When guest wants to log into the system to use further features

2) Click "Login" button on the header bar

3) Enter email and password into login form

4) Press the "Sign In" button

5) The system sends information to the database for validation

6) Email and password are correct, and the guest will log into the system as a customer

3.3.2 Description of Administrator Login Use Case:

Table 3.4 Description of Administrator Login

Description Administrator log into the system

Precondition When administrator wants to access the system to manage the system content

Steps 1) Go to the link: https://greendeco-fe.vercel.app/administrator/login

2) Enter the admin email and password to the login form 3)Press the "Login" button

4) The system sends information to the database for validation

5) Email and password are correct, and the administrator will log into the system to use managing features

3.3.3 Description of Register Use Case:

Description Actor registers an account into the system

Precondition The email which the actor uses to register must not exist in the system

3) Click "Sign Up" link below the login form

4) Enter all the required information into the sign-up form

6) The system will send the given information to the database

7) After the database does the validation step and, a new account will be created if the information is valid, and the system will announce "Your account has successfully registered"

8) The system directs the actor to the Login Page

3.3.4 Description of Reset Password Use Case:

Table 3.6 Description of Reset Password

Description Actor forgets the password and wants to reset the password

Precondition The given email must have been registered into the system

The given email must be valid

The actor is in the login page

2) The system direct to the Forgot Password page

5) The system sends the reset password link to the given email

6) The actor check email and click on the given link

7) The system direct to the reset password page

8) Enter new password and confirm the new password

10) The system direct to the Login Page

3.3.5 Description of Edit User Profile Use Case:

Table 3.7 Description of Edit User Profile

Use Case Edit User Profile

Description Actors want to edit their profile

Precondition The user must still log in the system

2) Click "User" Button in the header bar

4) The system shows the form which is filled with the registered user information

7) The system updates the detail and announce "Updated successfully"

3.3.6 Description of View Product List Use Case:

Table 3.8 Description of View Product List

Use Case View Product List

Description Actors view the product list

Precondition When the actors want to see more products

2) Click "Plants" navigation in the header bar

3) The system directs the user to the product list page

3.3.7 Description of Search Use Case:

Description Actors search for a specific product

Precondition When the actors want to see more products

2) Click "Plants" navigation in the header bar

3) The system directs the user to the product list page

3.3.8 Description of Add Product To Cart Use Case:

Table 3.10 Description of Add Product to Cart

Use Case Add Product To Cart

Description Actors want to add product(s) to cart

The user is in a product detail page

Steps 1) Click "add to cart" button

2) The system saves the product into the user's cart

3) The system shows the recently added item in the car

3.3.9 Description of Change Cart Item Quantity Use Case:

Table 3.11 Description of Change Cart Item Quantity

Use Case Change Cart Item Quantity

Description Actors want to change item quantity in the cart

The user must have at least one item in the cart

2) Click the "Cart" icon in the header bar

3) The system shows the cart

4) Click either "+" or "-" icon to change the item quantity

3.3.10 Description of Delete Cart Item Use Case:

Table 3.12 Description of Delete Cart Item

Use Case Delete Cart Item

Description Actors want to remove a specific item the cart

4) Click the Trash Bin Icon in a specific item to remove it out of the cart

5) The system removes the selected item, update the item list in the cart

3.3.11 Description of Create Order Use Case:

Table 3.13 Description of Create Order

Description Actors wants to buy the items that are in the cart

5) The system direct to the checkout page

6) Fill in the required shipping detail

8) The system announces: "Order created successfully" and show payment guide

3.3.12 Description of View Order List Use Case:

Table 3.14 Description of View Order List

Use Case View Order List

Description Actors want to view the order list

The user must have at least one created order

2) Click the User Button in the header bar

4) The system shows the user order list

5) User can view the order list and filter the list by the order state menu

3.3.13 Description of View Order Detail Use Case:

Table 3.15 Description of View Order Detail

Use Case View Order Detail

Description Actors want to view a specific order detail

The user must have at least one created order

The user must be in the order list page

Steps 1) Click "View" Button at the right-hand side of the order item

2) The system shows the order detail

3.3.14 Description of Create Product Review Use Case:

Table 3.16 Description of Create Product Review

Use Case Create Product Review

Description Actors want to leave the review to the product

The product must have been bought by the user

The user is in the user setting page

Steps 1) Click "Purchased Products" in the sidebar

2) The system shows all the products that have been purchased

3) Click “Review” Button to a specific item

4) The system shows the review form

5) Enter the rating and comment

7) The system adds the review to the selected product and announce

“Review has been sent successfully”

3.3.15 Description of Create Product Use Case:

Table 3.17 Description of Create Product

Description Actors want to create a new product

Precondition The actor must be logging in the system as an administrator

The actor must be in the Product List Page

2) The system opens the create product form

3) Fill in the product detail

5) The system creates the product and update the product list

3.3.16 Description of Edit Product Use Case:

Table 3.18 Description of Create Product

Description Actors want to edit product detail

The actor must be in the Product Detail Page

2) The system opens the edit product form

3) Edit in the product detail

5) The system updates the product detail

3.3.17 Description of Delete Product Use Case:

Table 3.19 Description of Delete Product

Description Actors want to delete product

The actor must be in the Product List Page

Steps 1) Click “Delete” Button from a specific product

2) The system opens the delete confirmation modal

5) The system deletes the product out of the system and update the product list

3.3.18 Description of Manage Variant Use Case:

Table 3.20 Description of Manage Variant

Description Actors want to manage product variant

The actor must be in the Product Detail Page

Steps 1) Click either “Create”, “Edit” or “Delete” Button in the variant section below the product detail

2) Perform the process similarly to the manage product use cases

3.3.19 Description of Manage Order Use Case:

Table 3.21 Description of Manage Order

Description Actors want to manage order

The actor must be in the Order List

Steps Click “View” button to view a specific order

Click the Status button to change the order status with the given option

The system updates the order state via the chosen option

Sequence Diagrams

3.4.7 View Product Detail Sequence Diagram:

Figure 3.10 View Product Detail Diagram

3.4.8 Search Product Sequence Diagram Sequence Diagram:

3.4.9 Add Product Review Sequence Diagram:

Figure 3.12 Add Product Review Diagram

3.4.10 Add To Cart Sequence Diagram:

Figure 3.13 Add To Cart Diagram

3.4.11 Update Cart Item Sequence Diagram:

Figure 3.14 Update Cart Item Diagram

3.4.12 Add Product Variant Sequence Diagram:

Figure 3.15 Add Product Variant Diagram

3.4.13 Update Product Variant Sequence Diagram:

Figure 3.16 Update Product Variant Diagram

Class diagram

Database design

Ord Attribute Type Domain Meaning Note

1 id UUID Primary Key Id of category

2 name varchar Name of Category

3 created_at timestamp Created date

4 updated_at timestamp Updated date

1 id UUID Primary Key Id of category

2 first_name varchar First name of user

3 last_name varchar Last name of user

6 phone_number varchar Phone number of user

7 avatar text Avatar of user

8 admin boolean Account admin rules

1 id UUID Primary Key Id of product

2 category_id UUID Foreign Key Id of category

3 name varchar Name of product

4 is_published boolean Product is published or not

5 available boolean The product is available for sale

6 size varchar Size of product

7 type varchar Type of product

8 images Text[] Images of product

9 description Text Description of product

10 detail Text Detail of product

11 light varchar Light of product

12 difficulty varchar Difficulty of product

13 water varchar Water requirement for product

Id must different from product_id

1 id UUID Primary Key Id of variant

2 product_id UUID Foreign Key Id of product

3 name varchar Name of product

6 color_name varchar Color name of product

7 color varchar Color of product

8 price numeric Price of product

9 currency varchar Currency of Variant

10 image Text Image of Variant

11 description Text Light of product

1 variant_id UUID Foreign Key Id of variant

2 product_id UUID Foreign Key Id of product

1 id UUID Primary Key Id of cart

2 owner_id UUID Foreign Key Id of user

1 id UUID Primary Key Id of cart_variants

2 cart_id UUID Foreign Key Id of cart

4 quantity numeric Quantity of items

1 id UUID Primary Key Id of coupon

3 code varchar Code of coupon

4 description text Description of coupon

5 start_date date Start date of coupon

6 end_date date End date of coupon

1 id UUID Primary Key Id of order

2 owner_id UUID Foreign Key Id of user

3 coupon_id UUID Foreign Key Id of coupon

4 state varchar State of order

5 paid_at timestamp Time of payment

1 id UUID Primary Key Id of order_variant

2 order_id UUID Foreign Key Id of order

4 quantity int Quantity of variant in order

1 id UUID Primary Key Id of notification

2 title varchar Title of notification

3 message text Message of notification

4 description text Description for notification

1 id UUID Primary Key Id of notification_user

2 user_id UUID Foreign Key Id of user

3 notification_id UUID Foreign Key Id of notification

4 state varchar State of notification

SYSTEM IMPLEMENTATION AND TESTING

GUI

Figure 4.2 Login notification Table 4.1 Login Table

1 Email Text Box User enters the email

3 Sign In Button User submits the value to log in

4 Sign Up! Link Direct the user to the Register page

5 Forgot Password Link Direct the user to the Forgot Password page

6 Back to shopping Button Direct the user back to the Home page

7 Notification Text Announce the user has logged in successfully

Chapter 4: System Implementation and Testing

1 First Name Text Box For user enter the first name

2 Last Name Text Box For user enter the last name

3 Email Text Box For user enter the email

4 Phone number Text Box For user enter the phone number

For user enter the password

For user enter the confirm password

7 Sign Up Button Submit the value to register an account

8 Sign In! Link Direct the user to the login page

9 Notification Text Announce the account has been registered successfully

Figure 4.6 Send email successfully Screen

Figure 4.8 Reset Password Notification Table 4.3 Forgot Password and Reset Password Table

1 Email Text Box User enters the email that has been registered

2 Send Email Button Submit the value

3 Sign Up Now Link Direct user to the sign up page if the user wants to register a new account

4 Message Text Announce the user that the system has received the email and sent the link to the

User enters the new password

User enters the new password confirmation

7 Reset Password Button Submit the value to reset the password

8 Notification Text Announce the user that the password has been reset

Figure 4.11 Product List Screen Table 4.4 Product List Table

1 Product List Component Display the product list of our project

Filter the product list by the chosen size option

Filter the product list by the chosen difficulty option

Filter the product list by the chosen type option

Sort the product list by the chosen sort order option

6 Previous Button Direct the user to the previous product list page

7 Next Button Direct the user to the next product list page

8 Product List Component Show the product list based on the chosen options

4.1.2.2 View Product Detail and Reviews:

Figure 4.12 Click on Product Screen

Figure 4.14 Product Detail Screen Table 4.5 Product Detail and Review Table

1 Product Card Component Click on the product card to view that product detail

2 Product Picture Picture Show the featured picture of the product

3 Product Picture Grid Picture Grid Show other pictures of the product, select a specific picture to change the featured picture

Button Click on the variant to select it

5 Product Price Text Show the product price

6 Add to cart Button Click to add the product with the selected variant into the cart

7 Product Description Text Show the product description

8 Product Size Text Show the product size

Text Show the product caring difficulty

Text Show the product light condition

Text Show the product water condition

12 Review Component Show the review list

13 Review rating filer Radio Button Filter the review list by rating

Sort the review list by sort order

Figure 4.17 Add Product to Cart Screen

Figure 4.18 Cart with Item Screen Table 4.6 Cart Management Table

1 Cart Button Button Click to show the cart detail

2 Cart Component The empty cart list

3 No item in your cart Text Tell the user that the cart is empty

4 Continue Shopping Button Close the cart to continue shopping

5 Product Variant Text Choose the product variant

6 Add to cart Button Click to add the chosen variant to the cart

7 Item image Image Show the item image

8 Item name Text Show the item name

9 Item pot color Text Show the item pot color

10 Item price Text Show the item price

11 Decrease Button Decrease the item quantity when click

12 Increase Button Increase the item quantity when click

13 Delete Button Delete the item out of the cart when click

14 Clear Button Clear the cart completely when click

15 Subtotal price Text Show the total price of the item(s)

16 Checkout Button Direct the user to the checkout page

Figure 4.20 Order Created Screen Table 4.7 Checkout Table

1 Brand Logo Link Direct to home page

2 Order Summary List Show all the items of the order

3 Subtotal Price Text Show the total price of all the items

4 Discount Text Show the discount percentage applied to the order

5 Order Total Price Text Show the total order price after being calculated

6 Shipping detail form Form Enter the shipping detail

7 Place Order Button Submit the shipping detail

8 Continue Shopping Link Direct the user back to previous page to continue shopping

9 Message Text Announce the user that the order has been placed

10 Thank you Text Thank the user for choosing our product

11 Order Id Text Show the created order ID

12 Bank account Info Text Show the bank account information for payment

13 Order Price Text Confirm the order price

14 Payment Content Text Payment content note

15 Reminder Text Remind the user to pay attention to the payment agreementt

16 Back to shopping Link Direct back to home page

17 Go to Order List Link Direct user to the order list

Figure 4.21 User Setting Selection Screen

Figure 4.22 User Profile Setting Screen Table 4.8 User Profile Setting Table

Click to open the setting menu

2 User Setting Link Direct to the user setting page

3 Avatar Image Show the user avatar

4 Change avatar Button Show the image selection when click

5 Remove Button Remove the current avatar when click

6 First Name Text Box For user edit the first name

7 Last Name Text Box For user edit the last name

8 Email Text Box For user edit the email

9 Phone number Text Box For user edit the phone number

10 Edit Button Submit the changes when click

11 Cancel Button Cancel all the changes

Figure 4.23 Order List Page Navigation

Figure 4.24 Order List Page Table 4.9 Order List Page

1 Order List Link Direct user to the order list

2 All Button Show all the orders when click

3 Draft Button Show the orders having Draft state

4 Processing Button Show the orders having Processing state

5 Completed Button Show the orders having Completed state

6 Canceled Button Show the orders having Canceled state

Show the orders by the sort option

8 Order Id Text Show order id

9 Create date Text Show order created date

10 State Text Show order state

11 View Button Direct to order detail when click

12 Back Button Go to the previous page

13 Next Button Go to the next page

Figure 4.26 Order Detail Screen Table 4.10 Order Detail Table

1 View Order Button Click to view the order detail

2 Order Detail Group Text Show the order detail

3 Customer Detail Group Text Show the customer detail

4 Shipping address Group text Show the shipping address

5 Order item list Component Show the order item list

6 Coupon information Text Display the coupon information

7 Total Text Display the final price of the order

8 Proceed to pay Button Show the payment information when click

9 Back to order list Link Direct back to the order list

Figure 4.30 Send Review Success Notification

1 Purchased Product Link Direct to the purchased product page

2 Product Name Text Show Product Name

3 Review Button Show the review and rating form

4 View Button Direct to the product detail

Select the rating score when click

6 Comment Text Box Enter comment

7 Send Review Button Submit the review

8 Cancel Button Turn off the review form

9 Notification Text Announce the user that the review has been sent

Figure 4.36 Product Variant Detail Screen

Figure 4.37 Create Variant Form Table 4.12 Product Management Table

1 Product List List Show all the product of the system

2 Create Button Open the Create Product Form

3 View Button Open the Product Detail page

4 Delete Button Open the Delete Product Confirmation when click

5 Product Name Text Box Enter the new product name

7 Product Type Dropdown Menu Choose the plant type

8 Product Size Dropdown Menu Choose the plant size

Dropdown Menu Choose the plant caring difficulty

Text Box Enter the product watering condition

Text Box Enter product light condition

13 Product Image Image Input Grid Enter the product image

14 Create Button Submit the value to create a new product

15 Cancel Button Cancel the creating process

16 Product Detail Group Text Show the product detail

17 Product States Text Show the product availability state

18 Edit Product Button Open the edit product form which is similar to the product create form

19 Published Checkbox Set the product to be published when check in the edit product form

20 Available Checkbox Set the product to be available when check in the edit product form

21 Variant List List Show the product variant list

22 Variant Detail Group Text Show the currently selected variant detail

23 Create Variant Button Open the variant create form

24 Edit Variant Button Open the variant edit form which is similar to variant create form

25 Delete Variant Button Delete the currently selected variant

26 Pot Color Name Text Box Enter variant pot color name

27 Color Color picker Choose the variant color

28 Price Text Box Enter the variant price

29 Variant description Text Box Enter the variant description

30 Default Checkbox Set the variant to be default for the product

31 Available Checkbox Set the variant to be available

32 Variant Image Image Input Enter the variant image

Figure 4.42 Order Detail after Updating Screen

Figure 4.44 Order State after Updating Table 4.13 Order Management Table

1 Order List List Show all the order of the system

2 Order ID Link Direct to the Order Detail page when click

3 Order State Update Dropdown Menu Open the order state update menu when click

4 Delete Button Open the Delete Product Confirmation when click

5 Filter Menu Menu Filter the list with chosen order state

6 Processing Menu Item Open the order update form when click

7 Cancel Menu Item Open the order cancel form when click

8 Date Datetime Picker Enter the payment date

9 Confirm Button Confirm the payment date to update

10 Cancel Button Cancel the update process

11 Order Id Text Show the order ID which belongs to the order that maybe get cancelled

Enter the reason why the order is cancelled

13 Confirm Button Confirm the cancel

14 Cancel Button Cancel the cancel process

15 State Button Show the updated order state after updating successfully

16 Notification Text Announce the administrator that the order has been updated

17 Completed Menu Item Update the order to be completed when click

18 State Button Show the order state after updating successfully

Testing

4.2.1 Project Tools and Testing plan:

• Web app front-end: NextJS, HTML, TailwindCSS

• Back-end: Fiber, Air, Sqlx , MVC, Swagger

In this project, we use black box testing method to test main functions of the application The biggest advantage of black box testing is that it is quite suitable for testing a large part of code or main functions of the system, which is very convenient for rapid software development The functions will be tested are:

1 User Log in Test the response of website when user fills in the log in form and clicks ‘Sign in’

Test the response of website when user clicks ‘sign up’

Test the response of website when user fills in ‘Add product form’ and clicks ‘Add’

I D D e sc ri p tion T e st s te p s T e st d at a E xp e c te d r e su lt A c tu al re su lt S tat u s

E nt er e m ai l E nt er pa ss w or d F ir st n am e: N gu ye n E nt er f ir st n am e L as t n am e: T ri E nt er l as t n am e E m ail :“ tr in g u ye n 2 7 6 2 0 0 1 @ g m a il co m ” E nt er ph on e n um be r P hon e n um be r: + 845 648 728 12 E nt er pa ss w or d Pa ss w or d: “ 123 456 789 0” E nt er c on fir m pa ss w or d C on fir m pa ss w or d: “ 123 456 789 0” C lic k “ Si gn u p” bu tton E nt er e m ai l E nt er pa ss w or d F ir st n am e: N gu ye n E nt er f ir st n am e L as t n am e: T ri E nt er l as t n am e E m ail :“ tr in g u ye n 2 7 6 2 0 0 1 @ g m a il co m ” E nt er ph on e n um be r P hon e n um be r: + 845 648 728 12 E nt er pa ss w or d Pa ss w or d: “ 123 456 789 0” E nt er c on fir m pa ss w or d C on fir m pa ss w or d: “ 123 456 789 0” C lic k “ Si gn u p” bu tton T C _R N U _01 T es t r es pon se of appl ic at ion w he n t he u se r en te rs c or re ct i nf or m at ion N ot ifi ca tion pop up sh ow s “ R eg ist er ed Su cc es sfu lly ” A s e xpe ct ed P as s

T C _R N U _02 T es t r es pon se of appl ic at ion w he n t he u se r en te rs c or re ct i nf or m at ion N ot ifi ca tion pop up sh ow s “ U se r a lre ady ex ist ed” A s e xpe ct ed P as s

Figure 4.45 Expected and actual result of TC_RNU_01

Figure 4.46 Expected and actual result of TC_RNU_02

ID D e sc rip tion T e st s te p s T e st d at a E xp e ct e d r e su lt A ct u al re su lt S tat u s

T C _L I_01 T es t r es pon se of appl ic ati on w he n t he u se r en te rs c or re ct au th en tic ati on i nf or m ati on E nt er e m ai l E nt er pa ss w or d C lic k “ Sig n i n” bu tton E m ail :“ tr in g u ye n 2 7 6 2 0 0 1 @ g m a il co m ” Pa ss w or d: “ 123 456 789 ” U se r i s l og ge d i n t he w ebs ite , s how not ifi ca tion t he n na vi ga te d t o h om e pa ge A s e xpe cte d P as s

When a user enters incorrect authentication information, the application responds by displaying an error notification message indicating that the user was not found This is an expected behavior, as the system is designed to protect user accounts and prevent unauthorized access.

T C _L I_03 T es t r es pon se of appl ic ati on w he n t he u se r en te rs i nc or re ct va lu e t ype in for m ati on E nt er e m ai l E nt er pa ss w or d C lic k “ Sig n i n” bu tton E m ail :“ tr in g u ye n ” P as sw or d: “ 123 456 789 ” A n e rr or n ot ifi ca tion m es sa ge a ppea rs be low t he e m ai l i npu t sa yin g t ha t “ E m ail is in va lid” A s e xpe cte d P as s

Figure 4.47 Expected and actual result of TC_LI_01

Table 4.17 Create Product Testing Result

ID D e sc rip tion T e st s te p s T e st d at a E xp e ct e d r e su lt A ct u al re su lt S tat u s

E nt er pr odu ct n am e P rodu ct N am e: S am pl e T re e

E nt er pr odu ct de sc ri pt ion P rodu ct D es cr ipt ion : T hi s t re e i s ve ry g ood , bu t i t h as ve ry r ic h s oi l S el ec t pl an t t ype , s iz e, c ar in g di ffi cu lty , P la nt T ype :O ut doo r

E nt er w at er in g, l ig ht c on di tion S iz e: S

C lic k “ C re ate ” bu tton C ar in g di ffi cu lty : e as y E nt er pr odu ct n am e P rodu ct N am e: S am pl e T re e E nt er pr odu ct de sc ri pt ion P rodu ct D es cr ipt ion : S hor t de sc ri pt ion S el ec t pl an t t ype , s iz e, c ar in g di ffi cu lty , P la nt T ype :O ut doo r

E nt er w at er in g, l ig ht c on di tion S iz e: S

Upon clicking the "Create" button, the application responds as expected when the user provides correct information A notification pop-up appears, displaying the message "Product has been created," and the user is redirected to the product detail page, signifying a successful product creation.

T C _C N P _02 T es t r es pon se of appl ic at ion w he n t he u se r en te rs i nc or re ct in for m at ion A n e rr or m es sa ge appea r s how s “ T he de ta il of t he pr odu ct m us t c on ta in a t l ea st 20 ch ar ac te rs ” A s e xpe ct ed P as s

Figure 4.50 Expected and actual result of TC_CNP_01

Figure 4.51 Expected and actual result of TC_CNP_02

CONCLUSION

Achievements

During the project implementation process, the student group created a fully functional e-commerce website that is ready for real-world use

Examine and implement novel technologies and methodologies in the creation of websites

Advantages

Modern, friendly, and unique user interface

The system operates successfully and smoothly

The product has many variations for users to choose from.

Disadvantages

Lacking features for the administrator role

Some features for the administrator role could perform automatically.

Future work

Send mail to users for advertisement

Build a mobile version for the system

Provide more categories and products variety

1 What is RESTful API? https://aws.amazon.com/what-is/restful-api/

2 Fiber: https://docs.gofiber.io/

3 Next.JS 13: https://nextjs.org/docs/app

5 The Sill: https://www.thesill.com

6 Cây Cảnh Hà Nội: https://caycanhhanoi.vn

Tiêu đề	Developing A Website For Selling Plants
Tác giả	Nguyễn Khải Trí, Phạm Hoàng Minh Mẫn
Người hướng dẫn	MSc. Mai Anh Thơ
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	113
Dung lượng	9,27 MB