76 Figure 12 Search Product Sequence Diagram .... 80 Figure 18 Delete Product From Cart Sequence Diagram .... 82 Figure 20 Update User Personal Information Sequence Diagram .... 22 Weakn
INTRODUCTION
OBJECTS AND SCOPE OF RESEARCH
The project had two primary goals: one focused on mastering the necessary technologies (Java Spring Boot) for building an ecommerce website, and the other centered around gaining practical knowledge in managing and operating an online shopping and selling system
20 For the first goal, the emphasis was on researching and applying technologies crucial for developing a website This involved learning and utilizing technologies such as website developing with Java, Spring Boot Framework, Thymeleaf and MySQL understanding the deployment process
The second goal involved delving into practical knowledge related to the effective management and operation of an online shopping and selling system This included hands-on experience and insights into the day-to-day functioning of such a system
The project is tailored for small store owners seeking to establish an online presence by creating an ecommerce website The primary focus is to provide customers with a platform to explore products and make online payments Additionally, the project aims to offer a user-friendly management system, enabling small store owners to effortlessly oversee and control their store operations This inclusive approach aims to empower small businesses by simplifying both the customer experience and the store management process
RELATED WORKS
• Manage the product in the cart
• Add the product to the wishlist
• Products are classified in detail (gender, style, price, color, …)
• You can look up order information
• The header is not eye-catching
• The using font is small and not suit with the design website
Link: https://www.watchstore.vn/
• Manage the product in the cart
• Add the product to the wish list
• The UI/UX is friendly
• Products are classified in detail (gender, style, price, color, …)
• Discount are set on top of the homepage
• The header is not eye-catching
Link: https://www.dangquangwatch.vn
• Manage the product in the cart
• Add the product to the wish list
• Users can easily use the advanced search function
• Products are filtered in detail (brand, gender, price, size, …)
• Can view product images in zoom mode
• Discount are set on top of the homepage
Link: https://www.thewatchbox.com
• Manage the product in the cart
• Add the product to the wish list
• Users can easily use the advanced search function
• Products are filtered in detail (brand, gender, price, size, …)
• Can view product images in zoom mode
• The header is not eye-catching
FUNDAMENTALS
SPRING BOOT FRAMEWORK
The Spring Framework is a powerful, feature-rich framework for building enterprise Java applications It is designed to simplify the development of complex applications by providing comprehensive infrastructure support [1]
❖ Inversion of Control (IoC) / Dependency Injection (DI):
IoC Container: Central to Spring is the IoC container, which manages the lifecycle and configuration of application objects (beans) based on the configuration metadata
DI: Promotes loose coupling by allowing dependencies to be injected rather than hard-coded, enhancing testability and modularity
Allows separation of cross-cutting concerns (like logging, security, transactions) from business logic
Uses aspects, join points, and advice to modularize concerns
A model-view-controller web framework built on the core Spring framework
Simplifies web application development with features like RESTful endpoints, form handling, and validation
JDBC: Simplifies database access and reduces boilerplate code
28 ORM: Integrates with ORM frameworks like Hibernate and JPA
Transaction Management: Provides declarative and programmatic transaction management
Comprehensive security services for Java applications
Supports authentication, authorization, and protection against common attacks (CSRF, XSS)
Simplifies data access and reduces boilerplate code with repositories and CRUD operations
Supports various data stores including relational databases, NoSQL databases, and more
Supports enterprise integration patterns and simplifies messaging between applications
Provides adapters for various integration scenarios (e.g., JMS, AMQP, HTTP)
Provides infrastructure for batch processing, including transaction management, job processing, and more
Spring Boot is an extension of the Spring Framework designed to simplify the development and deployment of applications by providing a set of conventions and reducing the need for boilerplate code [1]
Spring Boot adopts sensible defaults and conventions to minimize the need for explicit configuration
Developers can override defaults as needed through application properties or YAML files
Allows the creation of standalone applications that can run directly with an embedded server (e.g., Tomcat, Jetty, or Undertow)
Eliminates the need for deploying WAR files to an external server
Automatically configures Spring applications based on the dependencies and settings present
Reduces the need for manual configuration and setup
Includes ready-to-use features for monitoring and managing applications in production
Provides metrics, health checks, externalized configuration, and more through the Actuator module
30 Offers a set of predefined POMs (Project Object Model) that simplify dependency management
Starters bring in a set of dependencies commonly used together, such as spring- boot-starter-web, spring-boot-starter-data-jpa, etc
A web-based tool to quickly generate a Spring Boot project with the necessary dependencies
Available at start.spring.io
Provides a CLI tool to develop and test Spring Boot applications quickly
Allows running Groovy scripts to build Spring applications without extensive setup
Provides development-time features like automatic restarts, live reload, and configurations for a faster development cycle
Benefits of Spring Boot framework:
Accelerates development with minimal setup and configuration
Developers can focus more on writing business logic rather than boilerplate code
Well-suited for building microservices architectures
31 Integrates with Spring Cloud for building resilient and scalable distributed systems
Starters simplify dependency declarations and ensure compatibility between library versions
Easily integrates with other Spring projects like Spring Data, Spring Security, Spring MVC, and more
Built-in features like Actuator provide health checks, metrics, and monitoring out-of-the-box
Facilitates smooth deployment and monitoring in production environments
Backed by a large community and extensive documentation
Continuous updates and enhancements from the Spring team and open-source contributors.
THYMELEAF
Thymeleaf is a modern server-side Java template engine used for web and standalone environments It is designed to process HTML, XML, JavaScript, CSS, and plain text Thymeleaf is often used in Spring Boot applications as it integrates seamlessly with the Spring framework [2]
Here's an overview of its key features and capabilities:
Thymeleaf templates can be opened and rendered as static files in browsers, making it easier for designers and developers to work collaboratively
The templates look like standard HTML and can be visually rendered without server-side processing
Thymeleaf uses a flexible dialect system that allows the creation of custom processors and expressions
The Standard Dialect offers a wide range of features out of the box
Integrates well with Spring MVC, allowing the use of Spring beans, validation messages, and form handling directly within templates
Supports Spring Security for authorization and authentication in views
Thymeleaf provides a powerful expression language (OGNL) to perform variable substitutions, iteration, conditionals, and more within templates
Supports different template modes including HTML, XML, TEXT, JAVASCRIPT, and CSS
Enables processing various types of templates based on the needs of the application
Supports message resolution and internationalization, allowing the creation of multilingual applications
Allows template fragments to be included and reused, promoting DRY (Don't Repeat Yourself) principles
Simplifies form binding and validation by integrating with Spring's form binding and validation features
Readable and Editable: Templates can be opened and edited in any web browser Static-Template Support: Can render as static files, aiding development and design
Seamless Integration: Works smoothly with Spring MVC, Spring Security, and more
Spring Boot Support: Offers auto-configuration and easy setup with Spring Boot
Expression Language: Supports rich expressions for variable substitution, iteration, and conditionals
Template Modes: Handles HTML, XML, JavaScript, and plain text
Fragments and Layouts: Reuses template fragments and supports layout dialects
❖ Internationalization: i18n Support: Built-in support for creating multilingual applications
34 Custom Dialects: Create custom dialects to extend capabilities
Conditional Rendering: Robust options with th:if, th:unless, th:switch, and th:case
Extensive Documentation: Comprehensive with examples and tutorials
Active Community: Strong community support with frequent updates
Not ideal for dynamic client-side applications (e.g., SPAs)
Server-side processing can introduce overhead
Less efficient for large, complex applications
Advanced features and custom dialects can be challenging
Managing CSS and JavaScript is less straightforward
USER REQUIREMENTS
Based on the problem description, the main actors of system are as follow:
Administrator: This actor has the highest privileges of system Admin can use all functions of management system The function includes: role management, role group management, user management, category management, product management, order management, real-time statistics
Seller: Seller can manage the order of the system
Authenticated user: This actor can use all function of website The function includes: view product list, view product detail, search product, view product list by category, view product list by filters, cart management, update profile, order management, online payment, view introduction and contact page, chat with chatbot
Anonymous user: This actor can use almost function of website except update profile, cart management
1 Log in Enter username and password then log in to the system
2 Log out Log out of the system
3 Update Order Allow editing and updating order
4 Add Product Allow adding a new product
5 Delete Product Allow deleting a product
6 Update Product Allow editing and updating a product information
7 Calculate Revenue Allow viewing revenue statistics, order statistics, sales statistics, product quantity statistic in real-time
8 Update User Allow editing and updating a user information
9 Delete User Allow deleting user
10 Add brand Allow adding a new brand
11 Delete brand Allow deleting brand
12 Update brand Allow editing and updating a brand
13 Add type Allow adding a new type
14 Delete type Allow deleting type
15 Update type Allow editing and updating a type
16 Add dial-size Allow adding a new dial-size
17 Delete dial-size Allow deleting dial-size
18 Update dial-size Allow editing and updating a dial-size
Table 2 Functions Of Authenticated User
1 Log out Log out of the system
2 Search product Allow searching a specific product by name
3 Filter product Allow filtering list of products by types, brands…
4 View product detail View product information such as price, name, image, content, description…
5 Using chat bot Chat with AI bot
Make reviews on purchased product
Allow editing or updating personal information (address, phone number…)
8 Add brand Allow adding a new brand
9 Add product to cart Allow adding a product to cart
Allow removing a product from cart
11 Change quantity of product in cart
Allow changing product quantity in cart
13 Payment Proceed payment (COD or VNPay)
Table 3 Functions Of Anonymous User
1 Register Allow user to create account
3 Search product Allow searching a specific product by name
4 Filter product Allow filtering list of products by types, brands…
5 View product detail View product information such as price, name, image, content, description…
6 Using chat bot Chat with AI bot
1 Log in Enter username and password then log in to the system
2 Log out Log out of the system
3 Update Order Allow editing and updating order
USECASE SPECIFICATION
Table 5 Describe Use Case Login
Short Description Allow Actors to log into the system
Actor Admin, Seller, Anonymous user
Basic Flow 1 User selects login function from home page
2 The system returns the login form page
3 User enters information and clicks confirm
4 System checks username and password
5 The system redirects to the homepage
Alternative Flow 3a If the user forgets the password, click forgot password, the page will redirect to Use case Forgot Password
Exception flow 3.1 If the information input empty, system will request to re- input data, system return step 3
4.1 If the user enters the wrong password information, the system will notify the wrong information and return to step 2
4.2 If the account does not exist, the system will notify you if you want to create a new account
4.2.1 If you choose Yes, you will go to the account registration form
4.2.2 If No is selected, return to step 2
Table 6 Describe Use Case Log Out
Short Description Actor logged out
Actor Authenticated user, Admin, Seller
Pre-Condition Actor has login to the website
Post-Condition: Actor logged out
Basic Flow 1 Actor click log out button
Table 7 Describe Use Case Register
Short Description Allow Actor to register account
Post-Condition: Sign Up Success
Basic Flow 1 Actor accesses Register function from Login page
2 The system returns the account registration form
3 User enters required information and clicks submit
4 System will send OTP code to actor email and redirect to verify page
5 Actor enters the confirmation code in the email verification form and clicks submit, the system will log in with the successfully registered email
6 The system redirects to the homepage with the registered username
Exception flow 3a If the information entered is incorrect (missing important fields such as email, password ) the system will ask to re- enter the information and back to step 3
3b If the email, username information already exists, the system will ask to re-enter it from step 3
46 5.a If the user enters the wrong authentication code, the system displays the wrong authentication code, please re- enter it and return to step 5
3.3.4 Describe use case reset password
Table 8 Describe Use case Reset Password Use Case Forgot Password
Short Description Actor verified OTP code and change password
Pre-Condition Actor at Invoice Information page
Post-Condition: Feedback is saved
Basic Flow 1 Actor select “forgot password” at register page
2 System returns to enter username page
4 System check username is existed in database, if existed, send OTP code to user email And redirect to OTP verification page
6 System check OTP code, if correct move to change password page
7 User enter password and confirm password Click update
8 System update user password, redirect to login page
Alternative Flow 4.1 If username is not existed in database, show message
6.1 If OTP code is wrong, return step 5
7.1 If confirm password is not correct, update button is disabled
Table 9 Describe Use Case Search
Short Description Allow Actor Search Product
Actor Anonymous user, Authenticated user
Pre-Condition Actor at shopping page
Post-Condition: List of products with name contain search text are appeared
Basic Flow 1 1 Actor selects search bar
2 2 The actor enters the product name in the filter bar and click submit
Exception flow 3a If the product exists, the system will display the product list
3b If the product does not exist, the system returns no products
3.2.6 Describe use case filter product
Table 10 Describe Use Case Filter Product
Short Description Allow Actor to filter Product
Actor Anonymous user, Authenticated user
Pre-Condition Actor at shopping page
Post-Condition: List of products suit with filter appeared
Basic Flow 4 1 Actor selects filter criteria
Exception flow 3a If the product exists, the system will display the product list
3b If the product does not exist, the system returns no products
3.2.7 Describe use case detail product
Table 11 Describe Use Case Detail Product
Short Description Allow actor View Detail Product
Actor Anonymous user, Authenticated user
Post-Condition: System direct to product detail page
Basic Flow 1 1 Actor clicks on a product
2 2 System direct to selected product detail page
3.2.8 Describe use case add products to cart
Table 12 Describe Use Case Add Product To Cart
Use Case Add Products To Cart
Short Description Allows actor to add product to cart
Pre-Condition Log in to the app
Post-Condition: Products with entered information are saved in the database
Basic Flow 1 Actor logs into the website
2 Actor move to show all products page
4 Website move to selected product detail page
5 Actor adjust quantity and click add to cart
6 Product with quantity is added to cart
Alternative Flow 2.1 Actor click add to cart
2.2 Product will added to cart with quantity = 1
3.2.9 Describe use case delete product in cart
Table 13 Describe Use Case Delete Product In Cart
Short Description Allows the actor to view products in cart
Pre-Condition Cart has item
Post-Condition: Selected cart item is removed
Basic Flow 1 Actor selects to cart
2 System returns to cart page
3 Actor can see list product in cart
4 Actor click the remove button of each product line in cart
3.2.10 Describe use case change quantity of product in cart
Table 14 Describe Use Case Change Quantity Of Product In Cart
Short Description Allows the actor to view products in cart
Pre-Condition Cart has item
Post-Condition: Quantity of cart item is changed
Basic Flow 5 Actor selects to cart
6 System returns to cart page
7 Actor can see list product in cart
8 Actor can adjust the quantity of each product in cart
Alternative Flow 4.a: Actor can change the quantity of each product by click
4.b: Actor can remove a product from cart by click “remove”
Table 15 Describe Use Case Checkout Use Case Check Out
Short Description Check Out and save new Invoice to database
Post-Condition: New invoice will be added to the database
Basic Flow 1.Actor logs into the website
2.Actor add product to cart Selected product is added to cart 3.Actor move to cart page Website moves to cart page 4.Actor click checkout Website moves to checkout page 5.Actor update address, phone number
6.Actor click pay method: COD
Alternative Flow 6.1 If Actor select pay method: online
6.2 System move to online payment page
3.2.12 Describe use case view purchased history
Table 16 Describe Use Case View Purchased History
Use Case View Purchased History
Short Description The purchased history is showed
Pre-Condition Log in to the website
Account have been ordered before
Post-Condition: The purchased history of user is showed
Basic Flow 1.Actor logs into the website
2.Actor move to user profile page Website move to user profile page
3.Actor click “purchased history” button Website move to purchased history page
4 The list of invoices is showed
3.2.13 Describe use case edit personal information
Table 17 Describe Use Case Edit Personal Information Use Case Edit Personal Information
Short Description Allow user to edit personal information
Pre-Condition Log in to the app
Account have been ordered before
Post-Condition: The purchased history of user is showed
Basic Flow 1.Actor move to user profile page Website moves to user profile page
3.At Profile Information tab, all actor information is loaded
3.2.14 Describe use case using chat service
Table 18 Describe Use Case Using Chat Service Use Case Using Chat Service
Short Description Using chat bot
Actor Anonymous user, Authenticated user
Post-Condition: Chat bot replied to actor
Basic Flow 1 Actor click to chat box
4 Chat bot will reply actor
Exception flow 4.a If error appear, chat bot will reply “There is something wrong!”
3.2.15 Describe use case review on purchased product
Table 19 Describe Use Case Review On Purchased Product Use Case Using Chat Service
Short Description review on purchased product
Pre-Condition Actor at Invoice Information page
Post-Condition: Feedback is saved
Basic Flow 1 Actor select purchased product
3.2.16 Describe use case add product
Table 20 Describe Use Case Add Product
Short Description Allows actor to add new products to the store
Pre-Condition Log in to the website with admin account
Post-Condition: Products with entered information are saved in the database
Basic Flow 1.Actor chooses to add products, the system shows the form to add products
2.Enter information (E1) 3.The system will check the information
4.After adding successfully, the system will notify the admin and proceed to add the product (E2)
Exception flow E1: Notify the admin about the required fields that have not been filled in
E2: Notify the admin about the error when proceed to add product occur error
3.2.17 Describe use case update product
Table 21 Describe Use Case Update Product
Short Description Allows actor to edit the information of a selected product
Pre-Condition Log in to the website with admin account
Post-Condition: Product information is updated successfully
Basic Flow 1 Actor click “product management page” at navigation tab, website move to product management page The product management page will show all products and their ids, names, images on lines from database There are add button on top of the list, edits and deletes buttons on each product line
2 Actor click update button on the line of the product need to update The website opens new tab which display all the information of the product selected Below the form there is a “edit” button
4 Actor click edit button to update information to database Then the website will redirect to product management page (E2)
Exception flow E1: If actor leaves the Update page without clicking “Edit”, all changes will not be saved
E2: If actor does not enter all the text field A message
“Please fill out this field” will appear on the missing field
3.2.18 Describe use case delete product
Table 22 : Describe Use Case Delete Product
Short Description Allow actor to deleted product
Pre-Condition Log in to the website with admin account
Post-Condition: The selected product is removed from the database
Basic Flow 1 Actor click “product management page” at navigation tab, website move to product management page The product management page will show all products and their ids, names, images on lines from database There are add button on top of the list, edits and deletes buttons on each product line
2 Actor click “delete” button on the line of the product need to delete
3 A message box “Are you sure you want to delete product id selected?” will appear with “OK” and
4 Click “OK” to confirm the deletion of the product
Exception flow E1: If the product is already in any of the orders, the deletion process fails and the message "There is a product in other invoice: id1, id2, …" is displayed Then return step 1
3.2.19 Describe use case add brand
Table 23 Describe Use Case Add Brand
Short Description Allows actor to add new brand to the store
Pre-Condition Log in to the website with admin account
Post-Condition: Brand with entered information are saved in the database
Basic Flow 1 Actor click “brand management page” at navigation tab, website move to brand management page The brand management page will show all brands and their ids, names from database There are add button on top of the list, edits and deletes buttons on each brand line
2 Actor click “add” button on top of the list
3 Actor enter new brand information
4 Actor click confirm to add to store
3.2.20 Describe use case update brand
Table 24 Describe Use Case Update Brand
Short Description Allows actor to edit the information of a selected brand
Pre-Condition Log in to the website with admin account
Post-Condition: Brand information is updated successfully
Basic Flow 1 Actor click “brand management page” at navigation tab, website move to brand management page The brand management page will show all brands and their ids, names from database There are add button on top of the list, edits and deletes buttons on each brand line
2 Actor click update button on the line of the brand need to update The website opens new tab which display all the information of the brand selected Below the form there is a “edit” button
4 Actor click edit button to update information to database Then the website will redirect to brand management page (E2)
Exception flow E1: If actor leaves the Update page without clicking “Edit”, all changes will not be saved
E2: If actor does not enter all the text field A message
“Please fill out this field” will appear on the missing field
3.2.21 Describe use case delete brand
Table 25 : Describe Use Case Delete Brand
Short Description Allow actor to deleted brand
Pre-Condition Log in to the website with admin account
Post-Condition: The selected brand is removed from the database
Basic Flow 1 Actor click “brand management page” at navigation tab, website move to brand management page The brand management page will show all brands and their ids, names from database There are add button on top of the list, edits and deletes buttons on each brand line
2 Actor click “delete” button on the line of the brand need to delete
3 A message box “Are you sure you want to delete brand id selected?” will appear with “OK” and “Cancel” button
4 Click “OK” to confirm the deletion of the brand (E1)
Exception flow E1: If there are products which associate with selected brand, show error notification: “Product IDs associate with brand id: list product IDs” Then return step 1
3.2.22 Describe use case update order
Table 26 Describe Use Case Update Order
Use Case Update Invoice Information
Short Description Allows actor to edit the information of a selected invoice
Pre-Condition Log in to the website with admin account
Post-Condition: Invoice information is updated to the database
Basic Flow 1 Actor click “Invoice management” at navigation tab, website move to Invoice management page, which will show all Invoices information on lines from database There are add buttons on top of the list, edits and deletes buttons on each Invoice line
2 Admin click update button on the line of the Invoice need to update The website open new tab which display all the information of the Invoice selected Below the form there is a “edit” button
4 Actor click edit button to update information to database Then the website will redirect to product management page (E2)
Exception flow E1: If actor leaves the Update page without clicking “Edit”, all changes will not be saved
E2: If actor does not enter all the text field A message
“Please fill out this field” will appear on the missing field
3.2.23 Describe use case revenue statistics
Table 27 Describe Use Case Revenue Statistics
Short Description Allow actor view revenue statistics
Pre-Condition Log in to the admin page
Post-Condition: Show revenue by date on page
Basic Flow 1 Actor click “Revenue” at navigation tab, website move to Revenue page There is a tool box to select date
2 Actor select a date to see that day revenue
3 Website will show the list of Invoices of and total revenue of selected day (E1)
Alternative Flow 3.a Actor choose another day to see it revenue
Exception flow E1: If the selected day does not exist in database then return nothing, Use case return step 2
3.2.24 Describe use case update user
Table 28 Describe Use Case Update User
Use Case Update User Information
Short Description Allow actor to update user information
Pre-Condition Log in to the website with admin account
Post-Condition: Actor successfully update user information
Main Flow 1 Actor click “user management page” at navigation tab, website move to user management page User management page will show all user and their data from database There are add button on top of the list, edits and deletes buttons on each user line
2 Actor click update button on the line of the user need to update Website open new tab which displays all the information of the product selected Below the form there is a “edit” button
4 Actor click edit button to update information to database Then the website will move to user page (E1)
Exception flow E1: If actor does not enter all the text field A message
“Please fill out this field” will appear on the missing field
3.2.25 Describe use case delete user
Table 29 Describe Use Case Delete User
Short Description Allow actor to delete user
Pre-Condition Log in to the admin web
Post-Condition: The selected user is deleted from the database
Basic Flow 1 Actors click “User management” at navigation tab, website move to user management page User management page will show all users and their information on lines from database There are add buttons on top of the list, edits and deletes buttons on each user line
2 Admin click “delete” button on the line of the actor need to delete
3 A message box “Are you sure you want to delete user id selected?” will appear with “OK” and “Cancel” button
4 Click “OK” to confirm the deletion of the user (E1)
3.2.26 Describe use case add type
Table 30 Describe Use Case Add Type
Short Description Allows actor to add new type to the store
Pre-Condition Log in to the website with admin account
Post-Condition: Type with entered information are saved in the database
Basic Flow 5 Actor click “type management page” at navigation tab, website move to type management page The type management page will show all types and their ids, names from database There are add button on top of the list, edits and deletes buttons on each type line
6 Actor click “add” button on top of the list
7 Actor enter new type information
8 Actor click confirm to add to store
3.2.27 Describe use case update type
Table 31 Describe Use Case Update Type
Short Description Allows actor to edit the information of a selected type
Pre-Condition Log in to the website with admin account
Post-Condition: Type information is updated successfully
SYSTEM DESIGN
CLASS DIAGRAM
SEQUENCE DIAGRAM
Figure 11 Reset Password Sequence Diagram
Figure 12 Search Product Sequence Diagram
Figure 13 Filter Product Sequence Diagram
Figure 14 Detailed Product Sequence Diagram
Figure 15 View Cart Sequence Diagram
Figure 16 Add Product To Cart Sequence Diagram
4.2.9 Change quantity of cart item
Figure 17 Change Quantity Of Cart Item Sequence Diagram
Figure 18 Delete Product From Cart Sequence Diagram
Figure 20 Update User Personal Information Sequence Diagram
Figure 21 View Purchased History Sequence Diagram
Figure 22 Review Purchased Product Sequence Diagram
Figure 23 Chat Service Sequence Diagram
Figure 24 Update User Sequence Diagram
Figure 25 Delete User Sequence Diagram
Figure 26 Add Product to Store Sequence Diagram
Figure 27 Update Product Sequence Diagram
Figure 28 Delete Product Sequence Diagram
Figure 29 Add Brand Sequence Diagram
Figure 30 Update Brand Sequence Diagram
Figure 31 Delete Brand Sequence Diagram
Figure 32 Add Type Sequence Diagram
Figure 33 Update Type Sequence Diagram
Figure 34 Delete Type Sequence Diagram
Figure 35 Add Dial-Size Sequence Diagram
Figure 36 Delete Dial-Size Sequence Diagram
Figure 37 Update Dial-Size Sequence Diagram
Figure 38 Add Strap Sequence Diagram
Figure 39 Update Strap Sequence Diagram
Figure 40 Delete Strap Sequence Diagram
Figure 41 Update Invoice Sequence Diagram
DATABASE DESIGN
Table 36 User Table Detailed Description
2 role_id INT User role id
5 name VARCHAR User full name
7 phone_number VARCHAR User phone number
8 username VARCHAR User name for login
Table 37 Product Table Detailed Description
2 category_id INT Brand id
4 status INT Product available status
6 image1 VARCHAR Link of the product first image
7 image2 VARCHAR Link of the product second image
8 image3 VARCHAR Link of the product third image
10 type_id INT Product type id
11 dial_size_id INT Product dial-size id
12 gender INT Gender target of product
13 strap_id INT Product strap id
Table 38 Category Table Detailed Description Attribute Type Description
Table 39 Type Table Detailed Description Attribute Type Description
Table 40 Strap Table Detailed Description Attribute Type Description
Table 41 Dial-size Table Detailed Description Attribute Type Description
1 id INT Dial-size id
2 name VARCHAR Dial-size name
Table 42 Category Table Detailed Description Attribute Type Description
2 product_id INT Id of product get reviewed
3 review VARCHAR Content of feedback
4 user_id INT Id of reviewer
5 user_name VARCHAR Name of reviewer
Table 43 Invoices Table Detailed Description
2 user_id INT user id making this invoice
3 totalmoney DOUBLE Total money needs to be paid
6 phone VARCHAR User phone number
7 status VARCHAR Status of the order
8 payment_method VARCHAR Payment method on this order
9 create_date DATETIME Time making the purchase
10 create_by VARCHAR Username making the purchase
11 Update_by VARCHAR Employee in charge of updating
12 Update_date DATETIME Time making the update
Table 44 Invoice_infor Table Detailed Description
1 id int Invoice info id
2 amount int Quantity of a product in order
3 id_invoice int Id of the order (invoice)
4 id_product int Id of product
5 price double Price of product
Table 45 Roles Table Detailed Description Attribute Type Description
2 Role_name VARCHAR Name of role
USER INTERFACE DESGIN
Figure 44 Log in Page Table 46 Login Page Description
4 Link Move to sign up page
5 Link Move to reset password page 1
Figure 45 Register Page Table 47 Register Page Description
1 Input field Enter full name
5 Input field Enter password again to confirm
7 Link Move to sign in page
Figure 46 Reset Password Page 1 Table 48 Reset Password Page 1 Description
3 Link Move to Log in Page
Figure 47 Reset Password Page 2 Table 49 Reset Password Page 2 Description
1 Input field Enter OTP code
3 Link Move to Log in Page
Figure 48 Reset Password Page 3 Table 50 Reset Password Page 3 Description
1 Input field Enter new password
2 Input field Enter confirm password
4 Link Move to Log in Page
Figure 49 Homepage 1 Table 51 Homepage 1 Description
1 Link Move to home page
2 Link Move to shopping page
3 Link Move to cart page
5 Link Move to user profile page
6 Button Move to shopping page
Figure 50 Homepage 2 Table 52 Homepage 2 Description
1 Button Move to shopping page with brand is “Casio”
2 Button Move to shopping page with brand is “Seiko”
3 Button Move to shopping page with brand is “Gshock”
4 Button Move to shopping page with brand is “Fossil”
Figure 51 Chat Box Table 53 Chat Box Description
1 Input field Enter your message
3 Button Open/Close chat box
Figure 52 Shopping Page 1 Table 54 Shopping Page 1 Description
1 Input field Enter your search text
3 Link Move to product detail page
Figure 53 Shopping Page 2 Table 55 Shopping Page 2 Description
Figure 54 Shopping Page 3 Table 56 Shopping Page 3 Description
Figure 55 Product Detail Page 1 Table 57 Product Detail Page 1 Description
2 Button Add Product to Cart
Table 58 Product Detail Page 2 Description
2 Link Open selected detail product page
Figure 57 Cart Page Table 59 Cart Page Description
2 Button Delete product from cart
4 Button Move to check out page
Figure 58 Checkout Page Table 60 Checkout Page Description
1 Input field Enter full name
2 Input field Enter phone number
3 Input field Enter email address
6 Check box Using online payment
7 Button • Use online payment: Move to online payment page
• Not use online payment: Save order and redirect to shopping page
Figure 59 Online Payment Page Table 61 Online Payment Page Description
1 Input field Enter card number
2 Input field Enter card owner name
3 Input field Enter valid date
Figure 60 Admin User Management Page Table 62 Admin User Management Description
3 Button Open user detail information
Figure 61 Admin Invoice Management Page Table 63 Admin Invoice Management Description
2 Button Open invoice detail information
• User: move to user management page
• Invoice: move to invoice management page
• Product: move to product management page
• Brand: move to brand management page
• Strap: move to strap management page
• Type: move to type management pageDial-size: move to dial-size management page
Figure 62 Admin Product Management Page Table 64 Admin Product Management Description
1 Button Open form to add new product
3 Button Open product detail information
4 Combo box Select how many entries will be listed on a page
Figure 63 Admin Brand Management Page Table 65 Admin Brand Management Description
1 Button Open form to add new brand
3 Button Open brand detail information
Figure 64 Admin Strap Management Page Table 66 Admin Strap Management Description
1 Button Open form to add new strap
3 Button Open strap detail information
Figure 65 Admin Type Management Page Table 67 Admin Type Management Description
1 Button Open form to add new type
3 Button Open type detail information
4.4.15 Admin dial-size management page
Figure 66 Admin Dial-size Management Page Table 68 Admin Dial-size Management Description
1 Button Open form to add new dial-size
3 Button Open dial-size detail information
Figure 67 User Profile Information Page Table 69 User Profile Information Description
1 Button Move to Profile Information Page
2 Button Move to Security Page
3 Button Move to Billing Page
4 Input field Load user full name, able to change
5 Input field Load email, able to change
6 Input field Load address, able to change
Figure 68 User Security Page Table 70 User Security Page
1 Input field Enter current/old password
2 Input field Enter new password
3 Input field Enter new password again
Figure 69 User Billing Page Table 71 User Billing Page
1 Link Move to selected invoice detail page
Figure 70 User Invoice Detail Page Table 72 User Billing Page
2 Input field Enter your feedback about purchased product
IMPLEMENTATION AND TESTING
TOOLS IN PROJECT
• Front-end: HTML, CSS, Bootstrap, Javascript, Thymleaf
• Back-end: Spring Boot Framework
• Platform: Microsoft Edge, Google Chrome.
TEST PLAN
In this project, we use black box testing method to test main functions of the application Black box testing evaluates software based on user requirements without needing internal code knowledge It ensures thorough assessment of usability, performance, and functionality, detects issues early, and promotes team collaboration for better software quality and user satisfaction The functions will be tested are:
8 Change the quantity of product in cart
ID Description Step Expected Result Actual
TC_01 Test the Sign in function
-Select Sign In function -Sign In with registered account
Sign in success and move to homepage
-Select Sign In function -Input required field with validated information
Sign Up success and move to homepage
TC_03 Test the Show all products function
-Click See All at homepage
Move to show all product page all list out all the products
-Enter product name at search bar
Only products which name contain character in search bar will be listed out
TC_05 Test filter product by category function
-At shopping page select criteria and click filter button
Only products which suited with the criteria will be listed out
TC_06 Test the Show product detailed function
-At shopping page, click on a product
-Move to product detail page of that selected product
-The page contains: production image, product name, description and price
TC_07 Test the Add product to cart function
-At detailed product page, change the quantity as wish -Click add to cart button
-Product selected and quantity is added to cart
Change the quantity of product in cart function
-At cart page, change the quantity of a cart item
-The quantity is changed and update the total price
-At checkout page, input required field -Click checkout
-The data is saved to database
141 TC_10 Test the Add product to store function
-At admin product management page, click add product -Input required information -Click Add
-New product is add to database
Delete product from store function
-At admin product management page, click delete product
-Selected product is deleted from database
TC_12 Test Update product from store function
-At admin product management page, click update product -Input field need to update
TC_13 Test Update product from store function
-At admin user management page, click delete user
-Selected user is deleted from database
TC_14 Test Update product from store function
-At admin user management page, click update user -Input field need to update
TC_15 Test the Add brand to store function
-At admin brand management page, click add brand -Input required information -Click Add
-New brand is add to database
Delete brand from store function
-At admin brand management page, click delete brand
-Selected brand is deleted from database
TC_17 Test Update brand from store function
-At admin brand management page, click update brand -Input field need to update
CONCLUSIONS
RESULTS
Our group successfully designed and implemented a comprehensive e-commerce website with all essential functions for practical use Users can register, log in, explore products, add items to their cart, check out, and review purchase history The admin site simplifies the management of products, user accounts, and invoices, and includes a revenue calculation feature We also researched and applied new website development technologies and techniques, achieving the project's goals.
STRENGTHS
• Code is well-organized and easy to understand
DRAWBACKS
• The user interface lacks visual appeal and user-friendliness
• There is limited variety in the login methods available.
SOURCE CODE
You can find the source code by following this link: https://github.com/leythien2002/MPDS_StoreWeb
FUTURE WORKS
• Add machine learning algorithms to suggest the product that Authenticated user interested
• Enhance the project to make it more practical and usable in real-world scenarios.
[1] SpringBoot Framework: https://spring.io/projects/spring-boot https://viblo.asia/p/hoc-spring-boot-bat-dau-tu-dau-6J3ZgN7WKmB https://bluebirdinternational.com/spring-framework-vs-spring-boot/
[2] Using Thymleaf with Spring Boot Framework: https://viblo.asia/p/tat-tan-tat-ve-thymeleaf-thymeleaf-la-gi-so-sanh-thymealeaf-voi-jsp-jsf-XL6lAPqgZek https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
[3] MySQL database: https://vietnix.vn/mysql-la-gi/?gad_source=1&gclid=CjwKCAjw65-zBhBkEiwAjrqRML9mpSntfwo- ZNfK-J5IVFdT-zN1Q7CSBqTlQssRhYkYJ3n8nP7kQRoCdcwQAvD_BwE
[4] Openai API: https://platform.openai.com/docs/overview