INTRODUCTION
Rationale
As the quality of life continues to improve, the demand for buying and selling goods is on the rise In response to this growing need, we have developed an e-commerce website focused on clothing items Our goal is to provide customers with a convenient platform for quick and efficient purchasing, ultimately saving them time This user-friendly website allows businesses to reach a wider audience and showcase a variety of products To achieve this, we have utilized JavaScript, among other programming languages like Java, PHP, and C#, to create an accessible and enjoyable shopping experience for our users.
TypeScript has emerged as a dominant force in the realm of JavaScript, evolving from a trend to a standard choice for most software development projects Its widespread adoption facilitates the efficient management and operation of sales websites, ultimately streamlining business processes and enhancing overall efficiency.
Objectives
This graduate project focuses on researching the MERN Stack technology and its impact on the current programming industry Through this exploration, we aim to gain a deeper understanding of the MERN Stack, enabling us to develop a fully functional website that incorporates essential features similar to existing platforms.
Introducing products and items of the website
Support the customers chat with admin by messenger connection
Support the system owner to manage the products
Support the system owner to manage the orders & users
Contents
Find out the MERN Stack technology
Find out how to manage the databases on Mongo Atlas
Find out the Express with the MVC model
Find out the React Framework & Redux model
Find out the Heroku to deploy API
Find out the Netlify to deploy a website
Research methods
Researching documents, websites and video related to applied technologies
Refer to the videos it describes regarding the model applied in the graduate project
Consult with instructors and classmates
Practical scientific significance
The website's user interface is designed to be simple, making it easier for users to navigate and use the site when they purchase products
FUNDAMENTALS
Introduction to the Technical Stack
1.1 What is the Technical Stack?
The Technical Stack, also known as the Solution Stack, is a collection of technologies used to build and run a single application [1]
1.2 List of the top Stacks
LAMP Stack Linux, Apache, MySQL, PHP
WISA Stack Window, IIS, SQL Server, ASP.NET
MEAN Mongo DB, Express, Angular, NodeJS
MERN Mongo DB, Express, React, NodeJS
Table 1: List of the top Stacks
Introduction to the MERN stack
2.1 What is the MERN stack?
The MERN stack is a powerful software stack that consists of four key open-source technologies: MongoDB, a database solution; Express, a framework for building Node.js applications; ReactJS, a browser-side JavaScript library for creating dynamic user interfaces; and Node.js, a server-side JavaScript runtime that allows JavaScript to be executed outside the browser Together, these technologies enable developers to build robust and efficient web applications.
2.2 How does the MERN Stack work?
The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON
At each client, react does the processing and creates the user interface, and React also executes the single-page-application on each client
At the server, NodeJS and Express are responsible for handling logic, business, and authentication
MongoDB on the server is responsible for organizing and storing data
Client and server will communicate by sending requests and responses Request and Response send implicitly by AJAX technology to help users do not need to reload the website
2.3 Why use the MERN Stack?
The primary benefit of having a distinct front-end and back-end is the clear separation of concerns, allowing team members to concentrate on their specific areas of expertise This division enhances productivity and efficiency, as each team can focus on optimizing their respective components without interference.
Allow us to build a powerful front-end which is a single page application give experience offers a great user
The MERN stack uses a common JavaScript language for both client-side and server-side, making website development accessible
NodeJS capable of running on both Linux, Windows and OS X so it is not
The MERN stack utilizes JSON as the primary data exchange format among its components, eliminating the need for extra libraries to convert data during client-server interactions.
MongoDB capable of managing a large amount of data, can add new properties to the tables without updating the entire table
The technologies used in the MERN stack are all free and open source.
Introduction to the MongoDB
MongoDB is a document – oriented, no sequel (No SQL) database
3.2 What is the MongoDB Atlas?
MongoDB Atlas is a paid service that allows users to store application data in the cloud
MongoDB Atlas offers top-tier automation and established practices that ensure continuous availability, elastic scalability, and rapid performance, all while supporting regulatory compliance It provides a user-friendly way to explore MongoDB for free on major cloud platforms like AWS, Google Cloud, and Azure.
Fully managed database lifecycle backed by uptime SLA
Elastic deployments with on-demand vertical & horizontal scaling
Multi-cloud, global data distribution at the click of a button
Enterprise-grade security controls and compliance offerings
Advanced data privacy protection with client-side encryption
Auto-pilot capabilities such as auto-scale and auto-generated tuning guidance
Integrated full-text search powered by Lucene
Automated data archival to Queryble cloud storage
Real-time triggers for building event-driven data infrastructures
Embedded live migration service enables data migrations with minimal downtime
MongoDB use data is Document JSON should be easy in the access out
flexible when it comes to storage
Data contained in MongoDB is usually not bound together
Insert, delete or update, you won't lose too much time like in
The _id field will always be automatically indexed, so information retrieval speed will always be at peak performance
we have a data query, the write will be saved to the memory cache
Then the query will go faster without you having to read from the hard drive
MongoDB query speed is always faster than the administrative database system
Thanks to a large enough amount of data, the test for MongoDB insert speed will be 100 times faster than MySQL.
Introduction to the Express
Express is a versatile modular web application framework designed for NodeJS, offering robust features for both web and mobile development It supports HTTP and middleware methods, enabling the creation of a powerful and user-friendly API.
Express.js accelerates server-side development by offering a range of commonly used Node.js features as easily accessible functions This streamlined approach eliminates the need for extensive coding, significantly reducing development time.
Middleware in Express.js serves as a crucial component that facilitates access to the database, client requests, and other middleware It plays a key role in the systematic organization of various functions within the application, ensuring efficient processing and management of requests.
Routing: Express provides a highly advanced routing mechanism which helps to preserve the state of the webpage with the help of their URLs
Templating: Express provides templating engines that allow the developers to build dynamic content on the web pages by building HTML templates on the server-side
Debugging is essential for the effective development of web applications, and Express simplifies this process by offering a robust debugging mechanism This feature allows developers to accurately identify the specific areas of their web application that contain bugs, enhancing overall efficiency and reliability.
It is easy to learn because many front-end users are already familiar with JavaScript so they don’t have to learn a new language in order to learn Express
This makes backend development much easier for front-end developers using Express
The Express.js framework is very simple to customize and use as per the needs
Express.js provides a flexible middleware module It is mainly useful for doing extra tasks on response and request
Set up intermediate classes to return HTTP requests
Define router allows use with different actions based on HTTP method and URL
Allows returning HTML pages based on parameters.
Introduction to the ReactJS
React JS is a powerful JavaScript library designed for web development, enabling the creation of interactive elements on websites For those unfamiliar with JavaScript or its libraries, understanding these concepts is essential to grasp the full potential of React JS.
React is a powerful JavaScript library designed for creating user interfaces (UIs) in websites and web applications It encompasses all interactive elements on the screen, such as menus, search bars, and buttons, enhancing user experience by streamlining how individuals engage with digital platforms.
React not only offers reusable library code that saves development time and reduces coding errors, but it also includes two essential features that enhance its attractiveness to JavaScript developers.
JSX, or JavaScript extension, is a powerful React feature that simplifies DOM manipulation for web developers through an intuitive, HTML-like syntax Additionally, its compatibility with all modern web browsers ensures seamless integration across various platforms.
5.4 What is the Virtual Dom?
The Virtual DOM is essentially a replica of the website's DOM, utilized by React JS to determine which elements of the actual DOM require updates in response to events, such as user interactions like button clicks.
When a user submits a comment on a blog post, traditional methods require a complete update of the DOM, consuming significant time and processing power In contrast, React JS enhances performance by utilizing the Virtual DOM, which identifies changes resulting from user actions, such as adding a comment, and selectively updates only the affected sections of the DOM.
Hooks are a new addition in React 16.8 They let you use state and other React features without writing a class.
Introduction to the NodeJS
Node.js is an open-source server environment
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X)
Node.js uses JavaScript on the server
Node.js can generate dynamic page content
Node.js can create, open, read, write, delete, and close files on the server
Node.js can collect form data
Node.js can add, delete, modify data in your database
Node.js uses asynchronous programming
A common task for a web server can be to open a file on the server and return the content to the client
Here is how PHP or ASP handles a file request:
Sends the task to the computer's file system
Waits while the file system opens and reads the file
Returns the content to the client
Ready to handle the next request
Here is how Node.js handles a file request:
Sends the task to the computer's file system
Ready to handle the next request
When the file system has opened and read the file, the server returns the content to the client
Node.js eliminates the waiting, and simply continues with the next request
Node.js runs single-threaded, non-blocking, asynchronously programming, which is very memory efficient.
Introduction to the Redux
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test
With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store
Redux is based on a flux structure proposed by Facebook, following a unidirectional data flow model to avoid overlapping calls
All states are kept in one place, the store, and the views get the changes from the store to display
Events from the view must send action to update the state in the store
The Reducer relies on actions to update the state in the store
State is a plain JavaScript object, it cannot be modified directly, it must create new object for reducer to return
Lightweight, easy-to-integrate library
Return the result of the middleware function inside the component
Introduction to the PayPal
PayPal serves as a convenient intermediary for international payments and money transfers online It enables users to make purchases from foreign retailers and receive payments from abroad while in Vietnam.
PayPal functions as an electronic wallet, akin to Internet Banking, allowing users to transfer and withdraw funds to other PayPal accounts, make online purchases with supported sellers, and receive international payments.
Wide network of systems, used all over the world quickly and conveniently
Good and fast customer service support
To enhance security, limit the sharing of your bank account information by using PayPal for transactions This way, you won't need to enter your international payment card number (such as VISA or Mastercard) every time you make a payment, as your PayPal account is linked during the registration process.
SURVEYS AND USER REQUIREMENTS
Reality survey
In today's digital age, the rapid advancement of information technology has significantly influenced economic growth and globalized the marketplace, leading to an increased demand for high-quality goods and services Major corporations are expanding their online presence to capitalize on e-commerce, allowing consumers to conveniently shop from home with just a click Recognizing the benefits of this trend, we have developed a dedicated e-commerce website to cater to the clothing shopping needs of our customers.
The website aims to meet clothing needs while enhancing consumer value, ensuring a positive user experience It offers high-quality products that combine aesthetic appeal with exceptional comfort, making them enjoyable to wear.
Next, we conducted a survey of the three most popular clothes websites that are used by many people today
Figure 2: The website https://www.zara.com
Figure 3: The website https://www.shein.com.vn
Figure 4: The website https://www.hm.com
Figure 5: The website https://libeworkshop.com/
Our survey revealed that numerous websites offer similar user-friendly features, allowing customers to easily select and search for products using tags or keywords, view related items, and manage their purchases through cart and wishlist options Users also prioritize a seamless experience, desiring a stable, lag-free website that facilitates easy registration, login, and secure online payments Additionally, they expect high-quality items delivered in the correct quantities and appreciate functionalities like order tracking, discount codes, and direct communication with administrators.
July 19, 2021 29 the system's stable operation so that they can update information & product prices daily, strictly manage orders, and send users promotional codes
Integrating a chatbot or gamifying the shopping experience to earn points on a clothing website poses challenges that not all platforms can overcome A user-friendly interface combined with a variety of integrated features is essential for attracting more customers, ultimately determining the success or failure of a clothing business.
User Requirement
Based on what we learned, we identified the main actors interacting in the system are:
The guest: They can interact with the system but cannot purchase items, rates and comments
The user: They are similar to guests but more than that they have an account and make purchases items
The administrator: This is an actor who manages a website that can manage everything For example manage category, tag, import goods, but it is managed by super admin
The super admin: This person above admin, manages everything including admin
1 Register This function allows guests to register for an account to become a user of the system
2 Add email to receive discount code
This function allows users to add their email to the system to receive a discount code
This function helps guests to find products by category
4 Filter product by color This function helps guests to find products by color
5 Filter product by size This function helps guests to find products by size
6 Filter product by tag This function helps guests to find products by tag
This function helps guests to find products by keyword
8 View list products This function helps guests to view a variety of products
9 View detailed product This function helps guests to view detailed products
10 Chat with admin by messenger
This function allows guests to contact with admin
This function allows guests to add products to compare each other
This function allows guests to remove products from compare
13 Add products to cart This function allows guests to add products to cart
This function allows guests to remove products from cart
15 Click to increase the number of products
This function helps guests to increase the number of quantity
16 Send feedback This function helps guests to send their feedback to admin
Table 2: The function of Guest
1 Login This function allows users to login into the system
2 Edit profile This function allows users to edit their personal information
This function helps users to find products by category
4 Filter product by color This function helps users to find products by color
5 Filter product by size This function helps users to find products by size
6 Filter product by tag This function helps users to find products by tag
This function helps users to find products by keyword
8 View list products This function helps users to view a variety of products
9 View detailed product This function helps users to view detailed products as color, size, description
10 Chat with admin by messenger
This function allows users to contact with admin
11 Add products to wishlist This function allows users to add products to wishlist
This function allows user to remove products from wishlist
This function allows users to add products to compare each other
This function allows user to remove products from compare
15 Add products to cart This function allows users to add products to cart
This function allows user to remove products from cart
17 Click to increase the number of products
This function helps users to increase the number of quantity
18 Use discount code The user enters the discount code in the code box
19 Place the orders This function allows users place the orders
20 Payment the order This function allows users to pay for orders
21 Order tracking This function helps users to track orders
22 Cancel the orders This function allows users to cancel orders
This function allows users to comment & rating the product purchased
24 Send feedback This function helps users to send their feedback to admin
Table 3: The function of User
1 Login This function allows admin to login into the system
2 Add categories This function allows admin to add categories to the system
3 Update categories This function allows admin to update categories to the system
4 Delete categories This function allows admin to categories products to the system
5 Add products This function allows admin to add products to the system
6 Update products This function allows admin to update products to the system
7 Delete products This function allows admin to delete products to the system
8 View detailed product This function allows users to view detailed product
9 Block products This function allows users to block product
10 Unblock products This function allows users to unblock product
11 Add users This function allows admin to add users to the system
12 Update users This function allows admin to update users to the system
13 Delete users This function allows admin to categories users to the system
14 Block users This function allows users to block user
15 Unblock users This function allows users to unblock user
16 Add tags This function allows admin to add tags to the system
17 Update tags This function allows admin to update tags to the system
18 Delete tags This function allows admin to delete tags to the system
19 Add size This function allows admin to add size to the system
20 Update size This function allows admin to update size to the system
21 Add vouchers This function allows admin to add vouchers to the system
22 Update vouchers This function allows admin to update vouchers to the system
23 Delete vouchers This function allows admin to delete vouchers to the system
This function helps users to find categories, products, tag, size by keyword
The admin function provides crucial statistics on revenue and the quantity sold for each product, identifies best-selling items, and tracks stock levels, including which products are in stock and which are out of stock Additionally, it offers insights into the number of orders that have not yet been accepted or completed.
26 Send email have discount codes to users
This function helps the admin send codes to
3 groups: guest, all system's users, VIP
27 Import goods This function allows users to import goods
This function allows admin to change status of orders: not accept, packed, delivery, complete, cancel
29 Delete the orders This function allows admin to delete orders
Table 4: The function of Administrator
2.4 The function of Super Admin
1 Add admins This function allows SA to add admins to the system
2 Update admins This function allows SA to update admins to the system
3 Delete admins This function allows SA to delete admins to the system
4 Block admins This function allows the SA to block admins
5 Unblock admins This function allows the SA to unblock admins
Table 5: The function of Super Admin
Figure 6: Use Case Diagram - User uc User
Figure 7: Use Case Diagram - Admin
USE CASE - GUEST_01 uc Administrator
View Non Best Seller Statistics
Use Case No GUEST_01 Use Case Version 2.0
- Allows the guest can register an account
- The guest registers an account on the system
- The guest clicks the register button on the login screen
- Success: The system will have an account
- Fail: The system shows error messages
Step Actor Action System Response
1 The guest needs access to the website
The guest click to Register button The system redirects to the
Customer enter first name, last name, email, password and click to the Register button
The system creates a new account The system redirects to the main view
The internet is lost The system shows the message
Please! Check your internet connection
This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Use Case No GUEST_02 Use Case Version 2.0
- Allows the guest to login to the system
- The guest can login to the system
- The guest clicks Login button on the login screen
- The guest needs to enter the correct password & id number
- Success: The guest is redirected to the home screen
- Fail: System show error messages
Step Actor Action System Response
1 The guest needs access to the login page
The login page is displayed
2 The guest enters the id & password
The id & password is displayed of each the textbox
3 The guest clicks on the Login button
The home screen is displayed
The internet is lost The system shows the message
Please! Check your internet connection
Any box is empty The system shows the message
Please! Fill in your full information
- Email: must not be empty
- Password: must not be empty
Figure 10: UC Guest - View Product List
Use Case No GUEST_03 Use Case Version 2.0
Use Case Name View Product List
- Allows the guest to view all products displayed on the website
- The guest can visit the website & view products
- Success: The system will display product list
- Fail: The system shows error messages
Step Actor Action System Response
1 The guest needs access to the website
The internet is lost The system shows the message
Please! Check your internet connection uc User
Table 8: View Product List
Figure 11: UC Guest View Product Details
Use Case No GUEST_04 Use Case Version 2.0
Use Case Name View Detailed Product
- Allows the guest can view the detailed product
- The guest views the detailed product on the system
- The guest clicks the view icon button on the product screen
- Success: The system will display the detailed product
- Fail: The system show error messages
Step Actor Action System Response
1 The guest needs access to the website uc User
The guest clicks the Details button or product image on the home screen
The system display the detail product
The system shows the message Please check your internet connection when the internet is lost
Table 9: View Detailed Product
Figure 12: UC Guest Filter Product by Keyword
Use Case No GUEST_05 Use Case Version 2.0
Use Case Name Filter Product
- Allows the guest can filter the search products by the keywords, category, color, size, tag, price
Filter Product Filter Product By
- The guest filters the search products by the category, color, size, tag, price, keywords
- The guest enters the keywords, category, color, size, tag, price
- The guest logged into the system successfully
- Success: The guest filters the search products
- Fail: The system display error messages
Step Actor Action System Response
1 The guest clicks the Store on header website
The store screen is displayed
The guest enters the keywords, category, color, size, tag, keyword, price in the input
The products displayed corresponding to its keyword
The internet is lost The system shows the message
Please! Check your internet connection
Table 10: Filter Product by Keyword
Figure 13: UC Guest Add Email uc User
Use Case No GUEST_06 Use Case Version 2.0
Use Case Name Add Email
- Allows the guests can add their email to receive discount code
- The guests add email on the system successfully
- The guests clicks the Add button on home screen
- The guests logged into the system successfully
- Success: The system will have more email
- Fail: The system show error messages
Step Actor Action System Response
1 The guests input their email on box
The email is displayed on box
2 The guest click the Add email button on home screen
The system inform that your email sent successfully
The internet is lost The system shows the message
Please! Check your internet connection
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 14: UC Guest Add to Compare
Use Case No GUEST_07 Use Case Version 2.0
Use Case Name Add to Compare
- Allow the guests to add products in compare
- The guests add products in compare
- The guest clicks Add Compare icon on the product screen
- There are at least 2 products in the compare
- Success: Products are added the compare
- Fail: The system shows error messages
Step Actor Action System Response
1 Guest clicks the any product The detailed product screen displays uc User
2 Guest click Add compare icon The products are added successfully
The internet is lost The system shows the message
Please! Check your internet connection
Table 12: Add to Compare
2.6.1.8 Remove Product from Compare
Figure 15: UC Guest Remove Product from Compare
Use Case No GUEST_08 Use Case Version 2.0
Use Case Name Remove Product from Compare
- Allows the guest to remove product in compare
- The guest removes product in compare
- The guest clicks the Trash bin icon on the compare page uc User
- There is at least 1 product in the compare
- Success: Products are deleted out the compare
- Fail: The system shows error messages
Step Actor Action System Response
1 Guest clicks icon compare The compare screen displays
2 Guest click Trash bin icon The items is deleted out successfully
The internet is lost The system shows the message
Please! Check your internet connection
Table 13: Remove Product from Compare
Figure 16: UC Guest Add to Cart
Use Case No GUEST_09 Use Case Version 2.0
Use Case Name Add to Cart
- Allows the guest can add products to cart
- The guest adds to cart successfully
- The guest clicks the Add to Cart button on detailed product screen
- Success: The products are added successfully
- Fail: The system show error messages
Step Actor Action System Response
1 The guest clicks the Detail button on the product screen
The detail product screen displays
2 The guest clicks the Add to cart button on detail product screen
The product is added successfully
The internet is lost The system shows the message
Please! Check your internet connection
Figure 17: Add to Cart
2.6.1.10 Remove Product from Cart
Figure 18: UC Guest Remove Product from Cart uc User
Use Case No GUEST_10 Use Case Version 2.0
Use Case Name Remove Product from Cart
- Allows the guest to remove product in cart
- The guest removes product in cart
- The guest clicks the X icon on the cart page
- There is at least 1 product in the cart
- Success: Products are deleted out the cart
- Fail: The system shows error messages
Step Actor Action System Response
1 Guest clicks icon cart The cart screen displays
2 Guest click remove button The items is deleted out successfully
The internet is lost The system shows the message
Please! Check your internet connection
Table 14: Remove Product from Cart
Use Case No USER_01 Use Case Version 2.0
- Allows users log out from the system
- The user clicks to the Logout button in the menu
- The user logged into the system successfully
- Success: The system redirects to login screen
- Fail: System show error messages
Step Actor Action System Response
1 The user clicks button Logout The login screen displays
The internet is lost The system shows the message
Please! Check your internet connection
- After member sends logout request, system redirects to login screen
Figure 20: UC User Edit Profile
Use Case No USER_02 Use Case Version 2.0
Use Case Name Edit Profile
- Allows the user can edit profile
- The users edit on the system
- The users click the Edit Profile button on profile screen
- The users logged into the system successfully
- Success: The system will edit profile successfully
- Fail: The system show error messages
Step Actor Action System Response
1 The users click the Profile button on the home screen
The profile screen displays uc User
2 The users click the Edit profile button on profile screen
The edit popup is displayed
3 The users enter the information to update on a form
4 The users clicks on the OK button
The profile is updated successfully
The system shows the message Please! Check your internet connection
The system shows the message Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 21: UC User Add to Wishlist
Use Case No USER_03 Use Case Version 2.0
Use Case Name Add to Wishlist
- Allows the users can add products to wishlist
- The users add to wishlist successfully
- The guest clicks the Heart icon button on detailed product screen
- Success: The products are added to wishlist successfully
- Fail: The system show error messages
Step Actor Action System Response
1 The guest clicks the Heart icon The product is added wishlist succesfully
The internet is lost The system shows the message
Please! Check your internet connection
Table 17: Add to Wishlist
2.6.2.4 Remove Product from Wishlist
Figure 22: US User Remove Product from Wishlist
USE CASE - USER_04 uc User
Use Case No USER_04 Use Case Version 2.0
Use Case Name Remove Products from Wishlist
- Allows the users can remove products out wishlist
- The users remove products from wishlist successfully
- The guest clicks the X icon button wishlist screen
- There is at least 1 product in the wishlist
- Success: The products are added to wishlist successfully
- Fail: The system show error messages
Step Actor Action System Response
1 The guest clicks the X icon The product is removed from wishlist successfully
The internet is lost The system shows the message
Please! Check your internet connection
Table 18: Remove Product from Wishlist
Figure 23: UC User Send Feedback
Use Case No USER_05 Use Case Version 2.0
Use Case Name Send Feedback
- Allows the users can send feedback
- The users send feedback on the system successfully
- The users click the Send button on contact screen
- The users logged into the system successfully
- Success: The system will send feedback successfully
- Fail: The system show error messages
Step Actor Action System Response
1 The users input subject, content The subject & content is displayed
2 The users clicks Send The system sends feedback successfully
No Cause System Response uc User
The internet is lost The system shows the message
Please! Check your internet connection
Figure 24: UC User Using Voucher
Use Case No USER_06 Use Case Version 2.0
Use Case Name Using The Voucher
- Allows users to use the voucher to discount when purchase products
- The users use the voucher when purchase products
- The users enter discount code on code box
- The user must have another item on cart
- Success: The user use the voucher code & pay the invoice successfully
- Fail: System show error messages uc User
Step Actor Action System Response
1 The users enter the voucher code on code box
The voucher code is displayed on code box
The system shows the message Please check your internet connection when the internet is lost
- The cart is not empty
Figure 25: UC User Place Orders
Use Case No USER_07 Use Case Version 2.0
Use Case Name Place The Orders
- Allows users purchase the items on the website
- The users order the items successfully uc User
- The user put the items on the cart then they will pay it
- There is at least 1 item in the cart
- Success: The product is purchased successfully
- Fail: System show error messages
Step Actor Action System Response
1 The users add items to cart The cart appears items just add
2 The user click Check out button The check out display
3 The user enter address, phone number
The information just enter will display on each box
The users can click Place Order button or PayPal to payment
The system appears the successful alert & send email confirm to user
The system shows the message Please check your internet connection when the internet is lost
- Must successfully purchase at least one product
Figure 26: UC User Order Tracking
Use Case No USER_08 Use Case Version 2.0
Use Case Name Order Tracking
- Allow users track all their the order
- The users track all the orders
- User click My order button on any screen
- Success: The system displays all order & status order
- Fail: The system show error messages
Step Actor Action System Response
1 User clicks button My order The orders screen displays
The system shows the message Please check your internet connection when the internet is lost uc User
Figure 27: UC User Cancel Order
Use Case No USER_09 Use Case Version 2.0
Use Case Name Cancel Order
- Allows users to cancel orders
- The users cancel orders on the website
- The users click cancel button order screen
- Have to order at least one item & it’s status are not accept or packed
- Success: The users cancel the orders successfully
- Fail: System show error messages
Step Actor Action System Response uc User
1 The user clicks button My orderbutton
2 The user click button cancel The user cancel order successfully
The system shows the message Please check your internet connection when the internet is lost
Figure 28: UC User Comment Product
Use Case No USER_10 Use Case Version 2.0
Use Case Name Comment Product
- Allow users to comment on products they have just purchased
- The users can comment on the product they just bought uc User
- User click My order button on any screen
- The order has a complete status
- Success: User commented on the product successfully
- Fail: The system show error messages
Step Actor Action System Response
1 User clicks button My order The orders screen displays
2 User clicks on review the product on the table
The details product screen displays
The system shows the message Please check your internet connection when the internet is lost
Figure 29: UC User Rating Product
Use Case No USER_11 Use Case Version 2.0 uc User
Use Case Name Rating Product
- Allow users to rating on products they have just purchased
- The users can rating on the product they just bought
- User click My order button on any screen
- The order has a complete status
- Success: User rated on the product successfully
- Fail: The system show error messages
Step Actor Action System Response
1 User clicks button My order The orders screen displays
2 User clicks on review the product on the table
The details product screen displays
The system shows the message Please check your internet connection when the internet is lost
Use Case No USER_12 Use Case Version 2.0
- Allows users pay the order when purchase items
- The users pay the orders successfully
- The user put the items on the cart then they will pay it
- There is at least 1 item in the cart
- Success: The product is purchased & completed payment
- Fail: System show error messages
Step Actor Action System Response
1 The users add items to cart The cart appears items just add
2 The user click Check out button The check out display
3 The user enter address, phone number
The information just enter will display on each box uc User
The users can click Place Order button or PayPal to payment
The system appears the successful alert & send email confirm to user
The system shows the message Please check your internet connection when the internet is lost
- Must successfully purchase at least one product
Figure 31: UC SA Create New Administrator
Use Case No SA_01 Use Case Version 2.0
Use Case Name Create New Administrator
- Allow SA to add new account user with role admin
- SA can to add new account user with role admin on the website
- SA click the Add Admin button on the sidebar in the left corner of the admin page
- SA has logged in successfully
- Success: System add new account admin successfully
- Fail: System show error messages
Step Actor Action System Response
1 SA clicks button Add Admin in the sidebar
The system redirects to the Admin page
3 SA clicks the Save button at the bottom of the textbox
The system will announce Insert Admin Successfully
The system shows the message Please check your internet connection when the internet is lost
- Character length must not exceed 50 characters
Table 27: Create New Administrator
Use Case No SA_02 Use Case Version 2.0
Use Case Name Update Administrator
- Allows the SA can update admin
- The SA updates admin on the system
- The SA clicks the update icon button on the user screen
- The SA logged into the system successfully
- Success: The system will update the admin
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the User button on the header
The user screen is displayed
2 The admin clicks the edit icon button on user screen
The update popup is displayed
3 The admin enters the information to update on a form
4 The admin clicks on the OK button
The category is updated successfully uc Administrator
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 33: UC SA Delete Administrator
Use Case No SA_03 Use Case Version 2.0
- Allow the SA to delete catalog on the website
- SA can delete category on the website
- SA click the Delete button in the right corner of the Category List page
- SA has logged in successfully
- Fail: System show error messages
Step Actor Action System Response
1 Admin clicks button Admin in the sidebar
The system redirects to the Admin page
2 Admin clicks button Delete in
Admin click the delete button of the category to delete
The system shows the message Are you want to delete?
4 Admin click Accept to delete System immediately removes the account admin from the list
No Actor Action System Response
1 Admin clicks on cancel button System close logout popup
The system shows the message Please check your internet connection when the internet is lost
Figure 34: UC SA Block Administrator
Use Case No SA_04 Use Case Version 2.0
Use Case Name Block Administrator
- Allows the SA to block admin
- The SA blocks admin to the system
- The SA clicks Lock icon on the user screen
- The admin is not blocked
- Success: The admin is blocked successfully
- Fail: System show error messages
Step Actor Action System Response
1 The SA click User on menu The user screen displayed
2 The admin click Lock icon the right each of admin
No Cause System Response uc Administrator
The internet is lost The system shows the message
Please! Check your internet connection
Figure 35: UC SA Unblock Administrator
Use Case No SA_05 Use Case Version 2.0
Use Case Name Unblock Administrator
- Allows the SA to unblock admin
- The SA unblocks admin to the system
- The SA clicks Lock icon on the user screen
- Success: The admin is unblocked successfully
- Fail: System show error messages
Main Success Scenario: uc Administrator
Step Actor Action System Response
1 The SA click User on menu The user screen display
2 The admin click Lock icon the right each of admin
The internet is lost The system shows the message
Please! Check your internet connection
Use Case No ADMIN_01 Use Case Version 2.0
- Allows the admin to login to the system
- The admin can login to the system uc Administrator
- The admin clicks Login button on the login screen
- The admin needs to enter the correct password & id number
- Success: The admin is redirected to the home screen
- Fail: System show error messages
Step Actor Action System Response
1 The admin needs access to the login page
The login page is displayed
2 The admin enters the id & password
The id & password is displayed of each the textbox
3 The admin clicks on the Login button
The home screen is displayed
The internet is lost The system shows the message
Please! Check your internet connection
Any box is empty The system shows the message
Please! Fill in your full information
- Email: must not be empty
- Password: must not be empty
Use Case No ADMIN_02 Use Case Version 2.0
- Allows the admin to log out to the system
- The admin can log out to the system
- The admin clicks Logout button on the any screen
- The admin logged into the system successfully
- Success: The admin logout to the system successfully
- Fail: System show error messages
Step Actor Action System Response
1 The admin clicks on the Log out button
The login screen is displayed
The internet is lost The system shows the message
Please! Check your internet connection uc Administrator
Figure 38: UC Administrator Create New Category
Use Case No ADMIN_03 Use Case Version 2.0
Use Case Name Create New Category
- Allows the admin can create new category
- The admin creates new category on the system
- The admin clicks the plus icon button on the category screen
- The admin logged into the system successfully
- Success: The system will have the new category
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Category button on the sidebar
The category screen is displayed uc Administrator
Create New Category Manage Category
2 The admin clicks the plus icon button on category screen
The creation popup is displayed
3 The admin enters the information on a form
4 The admin clicks on the OK button
The new category is created successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of character must not exceed 50 characters
Table 34: Create New Category
Figure 39: UC Administrator Update Category
Use Case No ADMIN_04 Use Case Version 2.0
Use Case Name Update Category
- Allows the admin can update category
- The admin updates category on the system
- The admin clicks the update icon button on the category screen
- The admin logged into the system successfully
- Success: The system will update the category
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Category button on the sidebar
The category screen is displayed
2 The admin clicks the edit icon button on category screen
The update popup is displayed
3 The admin enters the information to update on a form
4 The admin clicks on the OK button
The category is updated successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 40: UC Administrator Delete Category
Use Case No ADMIN_05 Use Case Version 2.0
Use Case Name Delete Category
- Allows the admin can delete category
- The admin deletes category on the system
- The admin clicks the delete icon button on the category screen
- The admin logged into the system successfully
- Success: The system will delete the category
- Fail: The system display error messages
Main Success Scenario: uc Administrator
Step Actor Action System Response
1 The admin clicks the Category button on the sidebar
The category screen is displayed
The admin clicks the delete icon button on the right of each product
The delete popup is displayed
3 The admin clicks on the OK button
The internet is lost The system shows the message
Please! Check your internet connection
- The length of character must not exceed 50 characters
Figure 41: UC Administrator Create New Product
Use Case No ADMIN_06 Use Case Version 2.0
Use Case Name Create New Product
- Allows the admin can create new product
- The admin creates new product on the system
- The admin clicks the plus icon button on the product screen
- The admin logged into the system successfully
- Success: The system will have the new product
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Product button on the sidebar
The product screen is displayed
2 The admin clicks the plus icon button on product screen
The creation popup is displayed
3 The admin enters the information on a form
4 The admin clicks on the OK button
The new product is created successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Table 37: Create New Product
Figure 42: UC Administrator Update Product
Use Case No ADMIN_07 Use Case Version 2.0
Use Case Name Update Product
- Allows the admin can update product
- The admin updates product on the system
- The admin clicks the edit icon button on the product screen
- The admin logged into the system successfully
- Success: The system will update the product
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Product button on the sidebar
The product screen is displayed uc Administrator
2 The admin clicks the edit icon button on product screen
The update popup is displayed
3 The admin enters the information to update on a form
4 The admin clicks on the OK button
The product is updated successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 43: UC Administrator Delete Product
Use Case No ADMIN_08 Use Case Version 2.0
Use Case Name Delete Product
- Allows the admin can delete product
- The admin deletes product on the system
- The admin clicks the delete icon button on the product screen
- The admin logged into the system successfully
- Success: The system will delete the product
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Product button on the sidebar
The product screen is displayed
The admin clicks the delete icon button on the right of each product
The delete popup is displayed
3 The admin clicks on the OK button
The internet is lost The system shows the message
Please! Check your internet connection
- The length of character must not exceed 50 characters
Figure 44: UC Administrator View Detailed Product
Use Case No ADMIN_09 Use Case Version 2.0
Use Case Name View Detailed Product
- Allows the admin can view the detailed product
- The admin views the detailed product on the system
- The admin clicks the view icon button on the product screen
- The admin logged into the system successfully
- Success: The system will view the detailed product
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Product button on the sidebar
The product screen is displayed
The admin clicks the view icon button on the right of each product
The detail popup is displayed
No Cause System Response uc Administrator
The internet is lost The system shows the message
Please! Check your internet connection
- The length of character must not exceed 50 characters
Table 40: View Detailed Product
Figure 45: UC Administrator Block Products
Use Case No ADMIN_10 Use Case Version 2.0
Use Case Name Block Products
- Allows the admin to block product
- The admin blocks product to the system
- The admin clicks Lock icon on the product screen
- The product is not blocked
- Success: The product is blocked successfully
- Fail: System show error messages uc Administrator
Step Actor Action System Response
1 The admin click Product on menu
2 The admin click Lock icon the right each of product
The internet is lost The system shows the message
Please! Check your internet connection
Figure 46: UC Administrator Unblock Products
Use Case No ADMIN_11 Use Case Version 2.0
Use Case Name Unblock Products
- Allows the admin to unblock product
- The admin unblocks product to the system
- The admin clicks Lock icon on the product screen
- Success: The product is unblocked successfully
- Fail: System show error messages
Step Actor Action System Response
1 The admin click Product on menu
2 The admin click Lock icon the right each of product
The internet is lost The system shows the message
Please! Check your internet connection
Figure 47: UC Administrator Import Goods
Use Case No ADMIN_12 Use Case Version 2.0 uc Administrator
Use Case Name Import Goods
- Allows the admin can add more product quantity
- The admin adds more product quantity on the system
- The admin clicks the plus icon button on the warehouse screen
- The admin logged into the system successfully
- Success: The system will have more product quantity
- Fail: The system display error messages
Step Actor Action System Response
1 The admin clicks the Warehouse button on the sidebar
The Warehouse screen is displayed
2 The admin clicks the plus icon button on warehouse screen
The add popup is displayed
3 The admin enters to add the quantity
4 The admin clicks on the OK button
The more products is added successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
Figure 48: UC Administrator Create New User
Use Case No ADMIN_13 Use Case Version 2.0
Use Case Name Create New User
- Allows the admin can create new user
- The admin creates new user on the system
- The admin clicks the plus icon button on the user screen
- The admin logged into the system successfully
- Success: The system will have the new user
- Fail: The system show error messages
Main Success Scenario: uc Administrator
Step Actor Action System Response
1 The admin clicks the User button on the sidebar
The user screen is displayed
2 The admin clicks the plus icon button on user screen
The creation popup is displayed
3 The admin enters the information on a form
4 The admin clicks on the OK button
The new user is created successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Table 44: Create New User
Figure 49: UC Administrator Update User
USE CASE - ADMIN_14 uc Administrator
Use Case No ADMIN_14 Use Case Version 2.0
Use Case Name Update User
- Allows the admin can update user
- The admin updates user on the system
- The admin clicks the edit icon button on the user screen
- The admin logged into the system successfully
- Success: The system will update the user
- Fail: The system show error messages
Step Actor Action System Response
1 The admin clicks the User button on the sidebar
The user screen is displayed
2 The admin clicks the edit icon button on user screen
The update popup is displayed
3 The admin enters the information to update on a form
4 The admin clicks on the OK button
The user is updated successfully
The internet is lost The system shows the message
Please! Check your internet connection
2 This name already exists The system shows the message
Any box is empty The system shows the message
Please! Fill in your full information
- The length of the character must not exceed 50 characters
Figure 50: UC Administrator Delete User
Use Case No ADMIN_15 Use Case Version 2.0
Use Case Name Delete User
- Allows the admin can delete user
- The admin deletes user on the system
- The admin clicks the delete icon button on the user screen
- The admin logged into the system successfully
- Success: The system will delete the user
- Fail: The system show error messages uc Administrator
Step Actor Action System Response
1 The admin clicks the User button on the sidebar
The user screen is displayed
The admin clicks the delete icon button on the right of each product
The delete popup is displayed
3 The admin clicks on the OK button
The internet is lost The system shows the message
Please! Check your internet connection
- The length of character must not exceed 50 characters
2.6.4.16 Change The Order Status
Figure 51: UC Administrator Change The Order Status
Use Case No ADMIN_16 Use Case Version 2.0
Use Case Name Change The Order Status
- Allows the admin can change the order
- The admin changes the order on the system
- The admin clicks the Show button on the order screen
- The admin logged into the system successfully
- Success: The system will change the order
- Fail: The system show error messages
Step Actor Action System Response
1 The admin clicks the Order button on the sidebar
The order screen is displayed
2 The admin clicks the show button on order screen
4 The admin clicks on the Accept button
The status of order is changed successfully
The internet is lost The system shows the message
Please! Check your internet connection
- The length of the character must not exceed 50 characters
Table 47: Change The Order Status
Figure 52: UC Administrator Send Email
Use Case No ADMIN_17 Use Case Version 2.0
Use Case Name Send Email
- Allow admin send email to guest
- Admin can send email to guest on the website
- Admin have to enter full information in form
- Admin can send email when clicking the Send button
- Admin has successfully logged in
- Success: The system send email to guest
- Fail: System show error messages
Step Actor Action System Response
Admin clicks the Email button on the menu bar of the admin main page
The system redirect to Email page
3 Admin click the Accept button to accept
The system will send email to guest
The system shows the message Please check your internet connection when the internet is lost
Use Case No ADMIN_18 Use Case Version 2.0
Use Case Name View Statistical Page
- Allows the admin can view the statistical page uc Administrator
View Non Best Seller Statistics
- The admin views the statistical page
- The admin clicks the Dashboard button on the home screen
- The admin logged into the system successfully
- Success: The system will view the statistical page
- Fail: The system show error messages
Step Actor Action System Response
1 The admin clicks the Dashboard button on the sidebar
The home screen is displayed
The internet is lost The system shows the message
Please! Check your internet connection
- The length of the character must not exceed 50 characters
Table 49: View Statistical Page