Building system for selling laptop and accessories

INTRODUCTION

Why is this project?

As our nation embarks on a journey of industrialization and modernization, the economy is experiencing rapid growth, necessitating a foundational understanding of scientific principles among the populace to keep pace with contemporary trends Information technology stands out as a pivotal industry driving this development.

The integration of science and technology into daily life has significantly enhanced the quality of living As a fundamental necessity, shopping has evolved, with a growing trend towards online shopping to meet increasing consumer demands.

In response to current trends, programmers have developed a user-friendly website for selling laptops and electronic components, including CPUs, motherboards, and keyboards This platform simplifies management for administrators while enhancing the purchasing experience for customers Tailored to meet varying requirements, the website offers distinct features suitable for both large and small-scale operations.

Purposes of the project

The website serves as a vital platform for managers and clients, offering essential functionalities such as adding, deleting, and editing user information, along with managing products and brands Customers can efficiently search for product details, make purchases, and process payments directly through the site Key features include comprehensive user management and streamlined product transactions, enhancing the overall user experience.

-Display information, images of the products, items selling in website

- Allow user to login and register for their own account

- Allow user modify profile, address, tracking order

-Allow customer to order and checkout by COD or through e-pay wallet

- Allow admin to manage, modify all the things related to the website such as categories, brands, products, sales report, reviews…

-Manage user’s cart/user ordered

-Send invoice to user to confirm order successfully

-Statistics of sales, customers, users, brands, categories…

Object and scope of the project

- Research the products related to laptops, electronic devices, PC components

- A website focuses on researching interface components, features, operation methods, advantages and disadvantages

- Spring boot: Research how to use it for Back-end building purposes

- Bootstrap: Used for front-end website development

- MySQL: Exploit the advantages and outstanding features to build Database

THEORETICAL BASIS

SPRING BOOT

Spring Boot offers Java developers an efficient platform to build stand-alone, production-ready applications that can be deployed immediately With minimal configuration requirements, it eliminates the need for extensive Spring setup, allowing for a quicker start in application development.

Spring Boot provides developers with the following benefits

 Easy to comprehend and construct spring applications

Spring Boot was created with the following goals:

 Avoid cumbersome XML configuration in Spring

 Easily produce production-ready Spring applications

 Reduce the development time and run the application independently

 Provide an easier method of getting started with the application

Spring Boot is a good option because of the characteristics and benefits it provides:

 It allows to configure Java Beans, XML configurations and Database Transactions in a customizable fashion

 It maintains REST endpoints and offers robust batch processing

 In Spring Boot, everything is auto configured; no manual setups are required

 It offers annotation-based spring application

 It provides Embedded Servlet Container

MYSQL

Microsoft SQL Server is a versatile relational database management system developed by Microsoft, designed to store and retrieve data for various software applications, whether on a local machine or across a network, including the Internet It is offered in multiple editions tailored to different audiences and workloads, accommodating everything from small single-machine applications to large-scale Internet-facing systems that support numerous concurrent users.

The history of Microsoft SQL Server dates back to 1989 with the launch of SQL Server 1.0, a 16-bit server designed for the OS/2 operating system, and has evolved significantly to the present day.

2.2.3 Basic components in SQL Server

SQL Server's core components, including Reporting Services, Database Engine, Integration Services, Notification Services, and Full Text Search Service, work in unison to provide a robust solution for data analysis and storage, enhancing data accessibility.

A database engine is a powerful tool designed to store data of various sizes in structured formats such as tables It features self-adjusting capabilities, allowing it to release resources back to the operating system when users log off, while also utilizing additional machine resources as required.

Integration Services is a comprehensive suite of programming objects and graphical tools designed for efficient data management It enables users to copy, move, and transform data stored across various platforms, including Oracle, SQL Server, DB2, and Microsoft Access, ensuring seamless integration within large organizations.

Migrating data across servers is essential, and it's important to format the data before storing it in the database Integration Services can effectively facilitate this process, ensuring smooth and efficient data management.

2.2.4 Why we use SQL in web development

SQL is a highly interactive language in which users may quickly interface with utilities by sending SQL statements to the database and receiving database results.

BOOTSTRAP

Bootstrap is a mobile-first front-end framework that makes online development faster and easier It's elegant, intuitive, and powerful HTML, CSS, and Java-script are all used

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter It was released as an open-source product in August 2011 on GitHub

 Mobile first approach − Instead of having Mobile First styles in distinct files, the

Bootstrap 3 framework includes them across the entire library

 Browser Support − It is supported by all popular browsers

 Easy to get started − Anyone with a basic understanding of HTML and CSS can get started with Bootstrap The official Bootstrap site also provides excellent documentation

 Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and

Mobiles More about the responsive design is in the chapter Bootstrap Responsive Design

 Provides a simple and consistent solution for creating an interface for developers

 It comes with a number of attractive and functional built-in components that are simple to personalize

 It also offers web-based customization

 And above all it is an open source

 Scaffolding − Bootstrap comes with a basic framework that includes a Grid System, link styles, and a background The section Bootstrap Basic Structure goes over this in depth

Bootstrap offers global CSS settings, enhancing fundamental HTML elements through extensible classes and an advanced grid system, which are thoroughly discussed in the Bootstrap with CSS section.

 Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more This is covered in detail in the section Layout Components

 JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins You can easily include them all, or one by one This is covered in details in the section Bootstrap Plugins

 Customize − You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.

REQUIREMENT CAPTURING AND MODELING

Current status analysis

In the past decade, the electronic equipment and laptop market in Vietnam has rapidly evolved, establishing a strong presence among modern consumers, as evidenced by surveys from platforms like Thegioididong, Gearvn, and FPT Shop With increasing profitability, this sector has become highly competitive, prompting companies to adopt diverse promotional strategies to attract customers As GEARZ prepares to enter this market, effectively reaching a broad audience presents a significant challenge To address this, developing a user-friendly website is essential, aligning with contemporary consumer habits and enhancing visibility.

Our platform allows customers to easily access information about products, brands, and categories while facilitating seamless ordering Additionally, users with elevated roles such as admin, editor, and assistant can efficiently manage website operations, ensuring that customers enjoy an exceptional shopping experience.

Requirement analysis

- Categories: ID, Name, Tag, Image, Enabled, Parent_ID

- Districts: ID, Name, City_ID

- Wards: ID, Name, District_ID

- Customers: ID, Email, Password, Full_Name, Profile_Pic, Address_Line, Phone_Number, Enabled, Verification_Code, Created_Time, City_ID, District_ID, Ward_ID

- Product_Images: ID, Image, Product_Id

- Product_Specifications: Id, Name, Value, Product_Id

- Products: ID, Name, Tag, Short_Description, Full_Description, Created_Time, Updated_Time, Enabled, In_Stock, Price, Discount_Percentage, Length, Weight, Height, Width, Main_Image, Brand_ID, Category_ID

- Users_Roles: User_ID, Role_ID

- Users: ID, Email, Enabled, First_Name, Last_Name, Password, Profile_Pic

- Search all information about User such as ID, First_Name, Last_Name, Address, Phone, Birthday, …

- Search information about Categories such as ID, Name, Tag, Image, …

- Search information about Brands such as ID, Name, Description, Quantity, Image, …

- Search information about Products: ID, Description, Created_Time, Updated_Time, Price, In_Stock, …

- Product cost refers to the costs incurred to create a product

- We did not think of this when planning

- So, by default, we decided to let 'product cost of 1 product = selling price * 95%'

- Product cost will be used for calculating revenue in Sales report

- Customer cannot see the product cost

The system operates on LAN infrastructure of the website, customers and managers can access through provided accounts

-Manager: full rights to use the website

-Editor: have the rights with categories, products, brands

- Salesperson: have the right with orders, shipping rates, customers, product prices, sales report

- Shipper: have the right with orders and products

- Visitor: have the right with products

- Customer: have the right with products, payment, checkout, vote, address

The website can be edited and upgraded to acquire the requirements of users and the management needs of managers

-Function buttons are arranged not too complicated and easily see

- Functional screens interact well, bring users convenience and comfortable

- Database is stored securely and easily accessible

- The website works stably, fast access and processing speed

-Website can meet the user’s requirements without affecting the operation of other components of the computer

- Website designs and functions can be reused for future development

-The code can be used many times and applied to many different programs without having to change code too much

Define Use Case Actor and Function

- List of user, categories, brands, products, sales report

- Add, update and delete information about users, categories, brands, products

- Provide login information to customer and manager,

Actor and Function Description

1 Login Allow users to log into the system

Admin looks up information about user: ID, Email, Enabled, First_Name, Last_Name, Password, Profile_Pic

Admin and Editor look up information about categories: ID, Name, Tag, Image, Enabled, Parent_ID

4 Search brands Admin and Editor look up information about brands: ID, Logo, Name…

Admins and editors gather essential product information, including ID, name, tags, short and full descriptions, creation and update timestamps, availability status, stock levels, pricing details, discount percentages, dimensions (length, weight, height, width), main image, brand ID, and category ID.

Admin looks up information about the customer:

ID, Email, Password, Full_Name, Profile_Pic, Address_Line, Phone_Number, Enabled, Verification_Code, Created_Time, City_ID, District_ID, Ward_ID

7 Search sales report Admin and Salesperson look up information about

8 Search orders Admin and Shipper and Customer look up information about Orders

9 Search reviews Admin and Assistant look up information about

10 Add new user Admin add details about new user: : ID, Email,

Enabled, First_Name, Last_Name, Password, Profile_Pic

Manager and Editor add details about new categories: ID, Name, Tag, Image, Enabled, Parent_ID

12 Add new brands Admin and Editor add details about new brands: ID,

Admin and Editor add details about new products:

ID, Name, Tag, Short_Description,

Full_Description, Created_Time, Updated_Time, Enabled, In_Stock, Price, Discount_Percentage, Length, Weight, Height, Width, Main_Image, Brand_ID, Category_ID

14 Add orders Admin and Customer add details about new Orders

15 Update user’s information Admin edits user details and update to database

16 Update categories Admin and Editor edit categories details and update to database

17 Update brands Admin and Editor edits brands details and update to database

18 Update products Admin and Editor edits brands details and update to database

Admin edits customer details and updates to database

20 Update order status Admin and Shipper edit order status and update to database

21 Delete users Remove users from database

22 Delete categories Remove categories from database

23 Delete brands Remove brands from database

24 Delete products Remove products from database

25 Delete customer Remove customer from database

26 Delete order Remove order from database

List all information about users, categories, brands, products, customers,…

When a new user registers on the website, the admin has the ability to create an account with specific roles assigned These roles include Admin, Salesperson, Shipper, Editor, Assistant, Visitor, and Customer, each granting distinct permissions and access rights tailored to the user's function within the platform.

29 Delete account When a user no longer works at the company, the admin can delete the account

30 Logout When users finish their work, they can log out of the system

31 Change password All users can change the password of their own account

Use Case Diagrams

Pic 3- 2: Use Case Manage User

Pic 3- 3: Use Case User Authentication

Pic 3- 4: Use Case Manage Categories

Pic 3- 5: Use Case Manage Brands

Pic 3- 6: Use Case Manage Products

Pic 3- 7: Use Case View Product

Pic 3- 8: Use Case Manage Settings

Pic 3- 9: Use Case User Registration

Pic 3- 10: Use Case Manage Customers

Pic 3- 11: Use Case Customer Authentication

Pic 3- 12: Use Case Manage Shopping Cart

Pic 3- 13: Use Case Manage Shipping Rates

Pic 3- 14: Use Case Manage Orders

Description Allow user log into the system

Actor(s) Admin, Editor, Assistant, Customer, Shipper, Visitor

Pre-condition Have Username and Password

Flow of events (1)Access to the website

(4)Click button “Login” or press Enter

(5)If login failed, alert “Input wrong username or password” User login again

(6)If login succeed, show the home screen with all functions corresponding to each position

Table 3 4: Use Case Login Description Use Case Search User

Description Allow user looks for user’s information

Pre-condition User’s information have existed in Database

(4)Input details in search bar and Enter or Search button

(5)System will access to database and show the result on screen

Table 3 5: Use Case Search User description Use Case Search Categories

Description Allow user looks for category’s information

Pre-condition Categories information have existed in Database

Table 3 6: Use Case Search Category description Use Case Search Brands

Description Allow user looks for brand’s information

Pre-condition Brands information have existed in Database

Table 3 7: Use Case Search Brands description Use Case Search Products

Description Staff who want to look for product’s information

Actor(s) Admin, Editor, Shipper, Salesperson

Pre-condition Products existed in Database

Table 3 8: Use Case Search Product description Use Case Search Orders

Description Staffs who want to look for Order’s information

Pre-condition Order existed in Database

Table 3 9: Use Case Search Order description Use Case Search Customer

Description Staffs who want to look for Customer’s information

Pre-condition Customers existed in Database

Table 3 10: Use Case Search Customer description Use Case Search Shopping cart

Description Staffs who want to look for Cart’s information

Pre-condition Carts information existed in database

Table 3 11: Use Case Search Shopping Cart description Use Case Add new user

Description Admin adds new user into system

Pre-condition That user does not exist in database

Flow of events (1)Open website

(4)Click button “Add new user” below

(6)After inputting, click button “Save”

(7)If add successfully, alert “Added successfully” Else, alert error and input again

Table 3 12: Use Case Add New User description Use Case Add new category

Description Staff can add new categories into system

Pre-condition That category does not exist in database

(4)Click button “Add new category” below

Table 3 13: Use Case Add New Category description Use Case Add new brands

Description Staff can add new brands into system

Pre-condition That brand does not exist in database

(4)Click button “Add new brand” below

Table 3 14: Use Case Add New Brand description Use Case Add new product

Description Staff can add new product into system

Pre-condition That product does not exist in database

(4)Click button “Add new product” below

Table 3 15: Use Case Add New Product description Use Case Update customer information

Description Staff can update customer information

Pre-condition That customer does not exist in database

(4)Choose a customer that need updated

Table 3 16: Use Case Update Customer description Use Case Update user information

Description Staff can edit information of user

Pre-condition That user existed in database

(4)Choose a user that need updated

Table 3 17: Use Case Update User description Use Case Update category

Description Staff can edit category’s information

Pre-condition That category existed in database

(4)Choose a category that need updated

Table 3 18: Use Case Update Category description

Description Staff can edit brand’s information

Pre-condition That brand existed in database

(4)Choose a brand that need updated

Table 3 19: Use Case Update Brand description Use Case Update product

Description Staff can edit product information

Pre-condition That product existed in database

(4)Choose a product that need updated

Table 3 20: Use Case Update Product description Use Case Update Order

Description Staff can edit order’s information

Pre-condition That order existed in database

(4)Choose an order that need updated

Table 3 21: Use Case Update Order description Use Case Delete user

Description Staff want to remove user from system

(4)Click button “Remove” in User that you want to remove

(5)Request will be executed in database and show alert

Table 3 22: Use Case Delete User description Use Case Delete category

Description Staff want to remove category from system

(4)Click button “Delete” in Category that you want to remove

Table 3 23: Use Case Delete Category description Use Case Delete brand

Description Staff want to remove brand from system

Flow of events (1)Open and Log into website

(3)Click button “Remove” in Brand that you want to remove

Table 3 24: Use Case Delete Brand description Use Case Delete product

Description Staff want to remove product from system

(4)Click button “Remove” in Product that you want to remove

Table 3 25: Use Case Delete Product description Use Case Change Password

Description Staffs change account’s password in order to ensure security

Actor(s) Admin, Editor, Salesperson, Shipper, Assistant, Visitor

Pre-condition When the security is no more guaranteed, somebody could know the password

(3)Select “Your account” tab in the top right of screen

(4)Input password in Password field

(5)Click “Save” button after input

(6)Information will be saved in database and show alert if change password successfully

Table 3 26: Use Case Change Password description

Description Staff want to change or update personal account

Actor(s) Admin, Editor, Salesperson, Assistant, Customer, Shipper

Pre-condition A staff who had an account

Flow of events (1)Open software

(3)Select “Account” tab in the top right of screen

(5)Input details that need to update

(7)Information will be saved in database and show alert if save successfully

Table 3 27: Use Case Update Account description

SYSTEM DESIGN

Database Design

ID Attribute Type Range/Constraint Meaning Notes

1 ID Int Primary key Brand ID

3 Name Varchar Unique key Brand name

Brands_categories (brand_id, category_id)

1 brand_id Int Primary key Brand ID References to

2 category_id int Primary key Category ID References to

Categories (ID, name, tag, image, enabled, parent_id, all_parent_ids)

1 ID int Primary key Category ID

2 Name Varchar Unique key Category name

3 Tag Varchar Unique key Category tag

6 Parent_id Int Foreign key Parent categories ID

7 All_parent_ids Int All parent categories ID

1 ID Int Primary key City ID

2 Code Varchar Unique key City code

3 Name Varchar Unique key City name

Districts (ID, name, city_id)

1 ID Int Primary key District ID

2 Name Varchar Unique key District name

3 City_id Int Foreign key City ID References to Cities(ID)

Wards (ID, name, district_id)

1 ID Int Primary key Ward ID

2 Name Varchar Unique key Ward name

3 District_id Int Foreign key District ID References to Districts(ID)

Customers (ID, email, password, full_name, profile_pic, address_line, phone_number, enabled, verification_code, created time, city_id, district_id, ward_id)

1 ID Int Primary key Customer

2 Email Varchar Unique key Customer’s email

4 Full_name Varchar Customer’s full name

5 Profile_pic Varchar Customer’s profile picture

6 Address_line Varchar Customer’s address

7 Phone_number Varchar Customer’s phone number

9 Verification_code Varchar Customer’s verification code

10 Created_time Datetime Customer’s created time

13 Ward_Id Int Foreign key Ward ID References to Wards(ID)

Product_images (ID, image, product_id)

1 ID int Primary key Product image

3 Product_id Int Foreign key Product ID References to

Product_specifications (ID, name, value, product_id)

1 ID Int Primary key Product specification ID

2 Name Varchar Name of product specification

3 Value Varchar Value of product specification

4 Product_ID Int Foreign key Product ID References to Products(ID)

Products (ID, name, tag, short_description, full_description, created_time, updated_time, enabled, in_stock, price, discount_percentage, length, weight, height, width, main_image, brand_id, category_id)

ID Attribute Type Range/Con straint

1 ID Int Primary key Product ID

2 Name Varchar Unique key Product name

3 Tag Varchar Unique key Product tag

4 Short_description Varchar Product short description

5 Full_description Varchar Product full description

6 Created_time Datetime Product created time

7 Update_time Datetime Product updated time

9 In_stock Bit Product status

16 Main_image Varchar Product main image

17 Brand_id Int Foreign key Brand ID References to Brands(ID )

18 Category_id Int Foreign key Category ID References to Categories (ID)

1 ID int Primary key Role ID

2 Name Varchar Unique key Role name

1 ID int Primary key Settings key

Users (ID, email, enabled, first_name, last_name, password, profile_pic)

1 ID int Primary key Users ID

2 Email Varchar Unique key User email

4 First_name Varchar Users first name

5 Last_name Varchar Users last name

7 Profile_pic Varchar User profile picture

User_role (user_id, role_id)

1 User_id Int Primary key User’s role ID References to

2 Role_id Int Primary key Product image References to

Processing Design

Pic 4- 5: Sequence Diagram User management

4.2.3 Sequence diagram of Category management

Pic 4- 6: Sequence Diagram Category management

4.2.4 Sequence diagram of Brand management

Pic 4- 7: Sequence Diagram Brands management

4.2.5 Sequence diagram of Product management

Pic 4- 8: Sequence Diagram Product management

4.2.6 Sequence diagram of Customer management

Pic 4- 9: Sequence Diagram Customer management

4.2.7 Sequence diagram of Shopping cart management

Pic 4- 10: Sequence Diagram Shopping cart management

4.2.8 Sequence diagram of Shipping rate management

Pic 4-11: Sequence Diagram Shipping rate management

4.2.9 Sequence diagram of Order management

Pic 4- 12: Sequence Diagram Order management 4.2.10 Sequence diagram of Checkout

Pic 4-14: Sequence Diagram Register 4.2.12 Activity diagram of Login

Pic 4-15: Activity diagram of Login

4.2.13 Activity diagram of User management

Pic 4-16: Activity diagram of User management 4.2.14 Activity diagram of Categories management

Pic 4-17: Activity diagram of Categories management

4.2.15 Activity diagram of Brands management

Pic 4-18: Activity diagram of Brands management 4.2.16 Activity diagram of Products management

Pic 4-19: Activity diagram of Products management

4.2.17 Activity diagram of Customer management

Pic 4-20: Activity diagram of Customer management 4.2.18 Activity diagram of Shipping rate management

Pic 4-21: Activity diagram of Shipping rate management

4.2.19 Activity diagram of Order management

Pic 4-22: Activity diagram of Order management 4.2.20 Activity diagram for Register new account

Pic 4-23: Activity diagram of Register

Pic 4-24: Activity diagram of Order product 4.2.22 Activity diagram of Checkout

Pic 4-25: Activity diagram of Checkout

4.2.23 Class diagram of User management

Pic 4-26: Class diagram of User management

4.2.24 Class diagram of User authentication

Pic 4-27: Class diagram of User authentication

4.2.25 Class diagram of Update account detail

Pic 4-28: Class diagram of Update account detail

4.2.26 Class diagram of Category management

Pic 4-29: Class diagram of Category management

4.2.27 Class diagram of Check category existing

Pic 4-30: Class diagram of Check if category existed 4.2.28 Class diagram of Brand management

Pic 4-31: Class diagram of Brand management

4.2.29 Class diagram of Product management

Pic 4-32: Class diagram of Product management 4.2.30 Class diagram of Product listing

Pic 4-33: Class diagram of Product listing

4.2.31 Class diagram of Category listing

Pic 4-34: Class diagram of Category listing

4.2.32 Class diagram of Setting module

Pic 4-35: Class diagram of Setting module

4.2.33 Class diagram of Customer overview

Pic 4-36: Class diagram of Customer overview

4.2.34 Class diagram of Verify account

Pic 4- 37: Class diagram of Verify account

4.2.35 Class diagram of Customer management

Pic 4- 38: Class diagram of Customer management

4.2.36 Class diagram of Customer authentication

Pic 4-39: Class diagram of Customer authentication

4.2.37 Class diagram of Login with Facebook and Google

Pic 4-40: Class diagram of Login with Facebook and Google

4.2.38 Class diagram of Cart management

Pic 4-41: Class diagram of Cart management

4.2.39 Class diagram of Address book

Pic 4-42: Class diagram of Address book

4.2.40 Class diagram of Order management

Pic 4-43: Class diagram of Order management

Pic 4-44: Class diagram of Checkout 4.2.42 Class diagram of Review product

Pic 4-45: Class diagram of Review product

4.2.43 Class diagram of Update review and average rating

Pic 4-46: Class diagram of Update review and average rating

4.2.44 Class diagram of Write review

User Interface Design

Pic 4- 48: Client home page screen

1 Logo Image After clicking, the page returns to Home page

2 Categories Button After clicking, sub categories will be dropped down

3 Search field Textbox Click and input to search products

4 Profile Button After clicking, sub selections will drop down

5 Adver products FlowCard Click to navigate to categories page

Image After clicking, the page goes to Categories detail page

7 Products itemCard After clicking, the page goes to Product details

Table 4 15: Client home page screen 4.3.2 Categories of website

2 Home Link After clicking, the page goes to Home page

4 Sub Categories Link After clicking, the page goes to Categories detail page

6 Shop now Link After clicking, the page goes to Categories detail page

Table 4 16: Categories of website screen 4.3.3 Category’s detail screen

Link After clicking, the page goes to Product details page

Table 4 17: Categories page screen 4.3.4 Detail product screen

1 Breadcrumbs Link After clicking, the page goes to corresponding pages

2 Select quantity Textbox Click and input or click ‘+’ to increase or ‘-‘ to decrease the quantity

3 Add to cart Button Click to add the current product to shopping cart

4 Main image Image After clicking, the image is widen

5 Sub images Image After clicking, the page is widen

Table 4 18: Detail product page screen 4.3.5 Shopping cart screen

1 Shopping Cart Button After clicking, added items will drop down

2 Product name Link After clicking, page goes to the selected product

4 Delete product Button Click to clear product from cart

Button Click to goes to Checkout page

Table 4 19: Shopping cart page screen 4.3.6 Checkout screen with COD

Link After clicking, navigate to My Adrress book page

Click to mark select the COD method

3 Confirm order Button Navigate to Order completed page

Table 4 20: Checkout with COD screen 4.3.7 Checkout screen with Paypal or Credit card

Pic 4- 54: Paypal or Credit card checkout screen

Link After clicking, navigate to Edit profile page

Select box Click to select Paypal or Credit card method

3 Paypal Button Click to popup Paypal checkout window

4 Debit or Credit card Button Click to popup Paypal checkout window

Table 4 21: Checkout with Paypal or Credit card screen

1 Select your card Select box Click to select your card

2 Select pay later method Select box Click to select if paying later

3 Pay now Button Click to finish the checkout process

Pic 4- 56: Credit card checkout screen

1 Card number Input Click to input card number

2 Expires / CSC Input Click to input Expires date and CSC

3 First name/Last name Input Click to input first name/last name

4 ZIP code Input Click to input ZIP code number

6 Mobiles Input Click to input phone number

Table 4 23: Credit card checkout screen

1 Click here Link Click to navigate to home page

2 Categories Button Sub categories will drop down to be selected

3 Search field Input Click and input to search

4 Profile icon Button Click to show more about profile

5 Shopping cart Button Click to show cart items

4 Shopping cart icon Button Click to show cart items

5 Search item in cart Input Click to input and search item in cart

6 View order Button Click to pop up Order details window

7 Page pagination Button Click to change page

1 Email Input Click to input email

2 Full Name Input Click to input full name

3 Telephone Input Click to input phone number

4 Address Input Click to input address

5 Province Select Click to select province

6 District Select Click to select district

7 Ward Select Click to select ward

8 Update Button Click to update information

Table 4 26: Personal details page screen

1 Current address Button Click to navigate to Edit profile page

2 Add new address Button Click to create a new address

Table 4 27: Address book page screen 4.3.14 Reviews screen

Pic 4- 62: Mail template screen 4.3.16 Login screen

1 Login with Facebook Button Click to navigate to Facebook login

2 Login with Google Button Click to navigate to Google login

3 Email Input Click to input email/username

4 Password Input Click to input password

5 Remember me Checkbox Click to mark to remember login information

6 Lost password Link Click to navigate to Recover password

7 Login Button Click to Login

9 Password Input Click to input Password

10 Retype Password Input Click to input password again

11 Full name Input Click to input full name

13 Full address Input Click to input address

14 City Select Click to select City

15 District Select Click to select District

16 Ward Select Click to select Ward

Pic 4- 64: Admin home page screen

1 Dashboards Tab Click to move to Dashboard tab

2 Users Tab Click to move to Users tab

3 Categories Tab Click to move to Categories tab

4 Brands Tab Click to move to Brands tab

5 Products Tab Click to move to Products tab

6 Customers Tab Click to move to Customers tab

7 Shipping Tab Click to move to Shipping tab

8 Orders Tab Click to move to Orders tab

9 Sale Reports Tab Click to move to Sale Reports tab

10 Articles Tab Click to move to Articles tab

11 Settings Tab Click to move to Settings tab

Click to show Account and Logout

Table 4 29: Admin home page screen 4.3.18 Users management screen (Admin)

Pic 4- 65: Users management screen (Admin)

1 Add new user Button Click to pop up Add user

2 Export to CSV Button Click to export CSV file

3 Export to XLSX Button Click to export XLSX file

4 Export to PDF Button Click to export PDF file

5 Search field Textbox Click to input to search user

6 User enable Checkbox Click to enable/disable user

7 Edit Button Click to pop up Edit user window

8 Delete Button Click to delete User

Table 4 30: Users management tab screen 4.3.19 Categories management screen (Admin)

Pic 4- 66: Categories management screen (Admin)

1 Add new category Button Click to pop up Add new category

4 Categories enable Checkbox Click to enable/disable category

6 Delete Button Click to delete categories

8 Select entries show Select Click to select number of entries showed

Table 4 31: Categories management tab screen 4.3.20 Brands management screen (Admin)

Pic 4- 67: Brands management screen (Admin)

1 Add new brand Button Click to pop up Add new brand

Table 4 32: Brands management tab screen 4.3.21 Products management screen (Admin)

Pic 4- 68: Products management screen (Admin)

1 Add new product Button Click to pop up Add new product

6 Product enable Checkbox Click to enable/disable product

7 View product details Button Click to pop up Product detail window

9 Delete Button Click to delete product

Table 4 33: Products management tab screen 4.3.22 Customers management screen (Admin)

Pic 4- 69: Customers management screen (Admin)

3 Customers enable Checkbox Click to enable/disable customer

4 View customer details Button Click to pop up Customer detail window

5 Delete Button Click to delete customer

Table 4 34: Customers management tab screen 4.3.23 Shipping rate management screen (Admin)

Pic 4- 70: Shipping rate management (Admin)

1 Add new shipping rate Button Click to Add new shipping rate

4 Shipping rate enable Checkbox Click to enable/disable shipping rate

Table 4 35: Shipping rate tab screen

Pic 4- 71: Order management screen (Admin)

3 Customer name Link Click to pop up Customer detail window

4 View order details Button Click to pop up Order detail window

5 Edit Button Click to pop up Edit order window

6 Delete Button Click to delete order

Table 4 36: Order management tab screen

4.3.25 Sales report management screen (Admin)

Pic 4- 72: Sales report management screen (Admin) 4.3.26 Reviews management screen (Admin)

Pic 4- 73: Reviews management screen (Admin)

3 View order details Button Click to pop up Review detail window

4 Edit Button Click to pop up Edit review window

Table 4 37: Reviews management tab screen 4.3.27 Settings management screen (Admin)

Pic 4- 74: Setting management screen (Admin)

1 General Tab Move to General tab

2 Cities Tab Move to Cities tab

3 Districts Tab Move to Districts tab

4 Wards Tab Move to Wards tab

5 Mail Server Tab Move to Mail Server tab

6 Mail Template Tab Move to Mail template tab

7 Payment Tab Move to Payment tab

8 Site name Textbox Input site name

10 Site logo Upload Select logo and upload

11 Save Button Click to Save changes

IMPLEMENTATION AND TESTING

Website backend implementation

5.1.1 Understand the Spring Boot Web Application a.Spring boot

Spring Boot is an opinionated addition to the Spring platform, focused on convention over configuration — highly useful for getting started with minimum effort and creating standalone, production-grade applications

Developing a Spring MVC application prior to Spring Boot often involves extensive boilerplate code for setup, which is a common requirement across many projects This repetitive task consumes valuable programmer time that could be better utilized for implementing the application's business logic.

Spring Boot simplifies the development process by automatically handling configurations through auto-configuration with sensible defaults This allows developers to quickly focus on building business logic without the burden of managing configuration details Additionally, Maven's multi-module project structure enhances project organization and management.

A multi-module project is structured around an aggregator POM, which oversees a collection of submodules Typically, this aggregator resides in the root directory of the project and is required to have a packaging type of POM.

The submodules are regular Maven projects, and they can be built separately or through the aggregator POM

By building the project through the aggregator POM, each project that has packaging type different than pom will result in a built archive file

A typical scenario of a multi-module Spring Boot Maven project, described with our project:

Pic 5- 1: Maven's Multi-module Project

So there would be 3 projects that correspond to 3 modules, as illustrated in the follow picture:

Pic 5- 2: Maven's Multi-module Project 2

Pic 5- 3: Web Application architecture 5.1.2 Implementing Spring MVC for the Project

After creating the multi-module project as described above, create the entity classes to generate the database tables automatically using Hibernate forward engineering instead of creating tables manually beforehand

To achieve that, first we create a database with schema name ‘gearzdb’ and add the Spring Data JPA dependency and a database dependency in the GearZWebParent’s pom.xml

To enable a Spring Boot application to connect to a MySQL database server, it is essential to configure specific properties after adding the necessary dependencies Additionally, JPA/Hibernate properties must be set to instruct the Hibernate Framework to generate database tables based on the defined entity classes.

105 After configuration, move on to create entity classes

After that, we start the project to generate all the created entity classes to MySQL database tables

Testing

Access to the website -> Hover in User profile button -> Click Sign button -> After move to Login page, select or input all requried field -> Click Register button

Pic 5- 9: Successfully Register screen 5.2.2 Cart checkout module testing

Access to the website -> Login -> Add a product to shopping cart -> View cart -> Proceed to Checkout -> Select COD checkout method -> Click Confirm COD and Place order button

Pic 5- 11: Order confirmation mail screen 5.2.3 Export file in Admin site module testing

Access to the Admin website -> Login -> Click to Users tab -> Click Export to XLSX

Pic 5- 12: Export to XLSX screen

5.2.4 Export file in Admin site module testing

Access to the Admin website -> Login -> Click to Brands tab -> Click Edit button of a brand -> Select some categories in Edit branch pop up -> Save button

Pic 5- 13: Brands modifying saved successfully screen

CONCLUSION

Results achieved

Through the implementation of the e-commerce website, I have accumulated extremely useful knowledge and experiences:

- Knowledge of software development and design processes

- Practice interviewing and teamwork skills

- Practice programming in MySQL, Spring Boot, Bootstrap

- Successfully built an e-commerce website for selling Laptops, PC components, …

- Built user interfaces based on Bootstrap

- Built complete APIs to create Web API using Spring Boot technology

- Some main features of website and application:

 Login / register with email and phone number, password and basic personal information

 Pay online via Paypal Sandbox

 Send email to confirm order payment

 Build functions such as manage orders, customers, brands, categories, products, checkout, sale reports

Advantages

The program has the following advantages:

 Operation on the system is simple, friendly and easy

 User-friendly interface for client site, easy to view, order and pay for products

 The functions in admin site are managed by tabs, so users can easily manipulate them

 The program provides many functions, fully meeting the requirements of users

 Function buttons are attached to icons, creating recall and attracting users

Limitations

 Some functions still in development and not ready to use such as Compare items, Sale Reports

 No chat box for communicating between buyers and sellers

 Have not created an article function to support SEO.

1: Use Case Specification

Pic 3- 2: Use Case Manage User

Pic 3- 3: Use Case User Authentication

Pic 3- 4: Use Case Manage Categories

Pic 3- 5: Use Case Manage Brands

Pic 3- 6: Use Case Manage Products

Pic 3- 7: Use Case View Product

Pic 3- 8: Use Case Manage Settings

Pic 3- 9: Use Case User Registration

Pic 3- 10: Use Case Manage Customers

Pic 3- 11: Use Case Customer Authentication

Pic 3- 12: Use Case Manage Shopping Cart

Pic 3- 13: Use Case Manage Shipping Rates

Pic 3- 14: Use Case Manage Orders

Pic 4- 5: Sequence Diagram User management

Pic 4- 6: Sequence Diagram Category management

Pic 4- 7: Sequence Diagram Brands management

Pic 4- 8: Sequence Diagram Product management

Pic 4- 9: Sequence Diagram Customer management

Pic 4- 10: Sequence Diagram Shopping cart management

Pic 4-11: Sequence Diagram Shipping rate management

Pic 4- 12: Sequence Diagram Order management 4.2.10 Sequence diagram of Checkout

Pic 4-14: Sequence Diagram Register 4.2.12 Activity diagram of Login

Pic 4-15: Activity diagram of Login

Pic 4-16: Activity diagram of User management 4.2.14 Activity diagram of Categories management

Pic 4-17: Activity diagram of Categories management

Pic 4-18: Activity diagram of Brands management 4.2.16 Activity diagram of Products management

Pic 4-19: Activity diagram of Products management

Pic 4-20: Activity diagram of Customer management 4.2.18 Activity diagram of Shipping rate management

Pic 4-21: Activity diagram of Shipping rate management

Pic 4-22: Activity diagram of Order management 4.2.20 Activity diagram for Register new account

Pic 4-23: Activity diagram of Register

Pic 4-24: Activity diagram of Order product 4.2.22 Activity diagram of Checkout

Pic 4-25: Activity diagram of Checkout

Pic 4-26: Class diagram of User management

Pic 4-27: Class diagram of User authentication

Pic 4-28: Class diagram of Update account detail

Pic 4-29: Class diagram of Category management

Pic 4-30: Class diagram of Check if category existed 4.2.28 Class diagram of Brand management

Pic 4-31: Class diagram of Brand management

Pic 4-32: Class diagram of Product management 4.2.30 Class diagram of Product listing

Pic 4-33: Class diagram of Product listing

Pic 4-34: Class diagram of Category listing

Pic 4-35: Class diagram of Setting module

Pic 4-36: Class diagram of Customer overview

Pic 4- 37: Class diagram of Verify account

Pic 4- 38: Class diagram of Customer management

Pic 4-39: Class diagram of Customer authentication

Pic 4-40: Class diagram of Login with Facebook and Google

Pic 4-41: Class diagram of Cart management

Pic 4-42: Class diagram of Address book

Pic 4-43: Class diagram of Order management

Pic 4-44: Class diagram of Checkout 4.2.42 Class diagram of Review product

Pic 4-45: Class diagram of Review product

Pic 4-46: Class diagram of Update review and average rating

Pic 4-47: Class diagram of Write review 4.3 User Interface Design

Pic 4- 48: Client home page screen

Pic 4- 54: Paypal or Credit card checkout screen

Pic 4- 56: Credit card checkout screen

Pic 4- 62: Mail template screen 4.3.16 Login screen

Pic 4- 64: Admin home page screen

Pic 4- 65: Users management screen (Admin)

Pic 4- 66: Categories management screen (Admin)

Pic 4- 67: Brands management screen (Admin)

Pic 4- 68: Products management screen (Admin)

Pic 4- 69: Customers management screen (Admin)

Pic 4- 70: Shipping rate management (Admin)

Pic 4- 71: Order management screen (Admin)

Pic 4- 72: Sales report management screen (Admin) 4.3.26 Reviews management screen (Admin)

Pic 4- 73: Reviews management screen (Admin)

Pic 4- 74: Setting management screen (Admin)

Developing a Spring MVC application prior to the introduction of Spring Boot often involved extensive boilerplate code for setup, a necessity for nearly every project This repetitive process can consume valuable programming time that could otherwise be dedicated to implementing the application's business logic.

Spring Boot simplifies the development process by automatically handling configurations through auto-configuration with sensible defaults This allows developers to quickly focus on building business logic without the hassle of intricate configuration details Additionally, leveraging Maven’s multi-module project structure enhances project organization and management.

A multi-module project is structured around an aggregator POM, which oversees a collection of submodules Typically, this aggregator resides in the root directory of the project and is required to have a packaging type of POM.

Pic 5- 1: Maven's Multi-module Project

Pic 5- 2: Maven's Multi-module Project 2

Pic 5- 3: Web Application architecture 5.1.2 Implementing Spring MVC for the Project

To enable a Spring Boot application to connect to a MySQL database server, it is essential to configure specific properties after adding the necessary dependencies Additionally, JPA/Hibernate properties must be set to instruct the Hibernate Framework to generate database tables from the defined entity classes.

105 After configuration, move on to create entity classes

Pic 5- 9: Successfully Register screen 5.2.2 Cart checkout module testing

Pic 5- 11: Order confirmation mail screen 5.2.3 Export file in Admin site module testing

Pic 5- 12: Export to XLSX screen

Pic 5- 13: Brands modifying saved successfully screen

 Have not created an article function to support SEO

 Adding the feature of creating articles for the web to assist in SEO promoting products

 Provide “Related products” for better shopping experience

 Integrate chat box for easier contact with sellers

 Using AI or machine learning in terms of calculation of shipping cost

 Build a function to manage promotions

[1] JavaScript ã Bootstrap (getbootstrap.com) (Last access date: 06/07/2023)

[2] Building an Application with Spring Boot (Last access date: 06/07/2023)

[3] Spring Boot with Hibernate (Last access date: 06/07/2023)

[4] Maven - How to create a multi module project (Last access date: 06/07/2023)

[5] Owl Carousel | 2.3.4 (owlcarousel2.github.io) (Last access date: 06/07/2023)

[6] Serving Web Content with Spring MVC (Last access date: 06/07/2023)

[7] Spring Boot file upload example with Ajax (Last access date: 06/07/2023)

[8] Learn MySQL Tutorial - javatpoint (Last access date: 06/07.2023)

3: Use Case User Authentication

5: Use Case Manage Brands

7: Use Case View Product

9: Use Case User Registration

11: Use Case Customer Authentication

13: Use Case Manage Shipping Rates

15: Use Case Checkout

2: Decentralization

3: Relationship Diagram

4: Sequence Diagram Login

5: Sequence Diagram User management

6: Sequence Diagram Category management

7: Sequence Diagram Brands management

8: Sequence Diagram Product management

9: Sequence Diagram Customer management

10: Sequence Diagram Shopping cart management

11: Sequence Diagram Shipping rate management

13: Sequence Diagram Checkout

15: Activity diagram of Login

17: Activity diagram of Categories management

19: Activity diagram of Products management

21: Activity diagram of Shipping rate management

23: Activity diagram of Register

25: Activity diagram of Checkout

26: Class diagram of User management

27: Class diagram of User authentication

28: Class diagram of Update account detail

29: Class diagram of Category management

31: Class diagram of Brand management

33: Class diagram of Product listing

34: Class diagram of Category listing

35: Class diagram of Setting module

36: Class diagram of Customer overview

37: Class diagram of Verify account

38: Class diagram of Customer management

39: Class diagram of Customer authentication

40: Class diagram of Login with Facebook and Google

41: Class diagram of Cart management

42: Class diagram of Address book

43: Class diagram of Order management

45: Class diagram of Review product

46: Class diagram of Update review and average rating

47: Class diagram of Write review

48: Client home page screen

49: Categories of website

50: Categories's detail screen

51: Detail product screen

52: Shopping cart screen

53: Checkout screen

54: Paypal or Credit card checkout screen

55: Paypal checkout screen

56: Credit card checkout screen

57: Finish order screen

58: Tracking order screen

59: Personal detail screen

60: Address book screen

61: Reviews screen

62: Mail template screen

63: Login screen

64: Admin home page screen

65: Users management screen (Admin)

66: Categories management screen (Admin)

67: Brands management screen (Admin)

68: Products management screen (Admin)

69: Customers management screen (Admin)

70: Shipping rate management (Admin)

71: Order management screen (Admin)

72: Sales report management screen (Admin)

73: Reviews management screen (Admin)

74: Setting management screen (Admin)

Developing a Spring MVC application prior to Spring Boot often involves extensive boilerplate code for setup, which is common across nearly all projects This repetitive task consumes valuable programmer time that could be better utilized for implementing the application's business logic.

Spring Boot simplifies the development process by automatically handling configurations through auto-configuration with sensible defaults, allowing developers to focus on building business logic without the hassle of managing configuration details Additionally, utilizing Maven’s multi-module project structure enhances project organization and efficiency.

A multi-module project is structured around an aggregator POM that oversees a collection of submodules Typically, this aggregator is positioned in the root directory of the project and is required to have a packaging type of POM.

1: Maven's Multi-module Project

2: Maven's Multi-module Project 2

3: Web Application architecture

4: Website pom.xml

To enable a Spring Boot application to connect to a MySQL database server, it's essential to configure specific properties after adding the necessary dependencies Additionally, configuring JPA/Hibernate properties is crucial for instructing the Hibernate Framework to generate the database tables based on the defined entity classes.

5: Web Hibernate

105 After configuration, move on to create entity classes.

6: Web entity classes

7: User entity

8: Database tables

9: Successfully Register screen

10: Order completed screen

11: Order confirmation mail screen

12: Export to XLSX screen

13: Brands modifying saved successfully screen