INTRODUCTION
Introduction about the project subject
This is an open topic and interesting topic in the field of e-commerce website
Project objectives
Build an e-commerce website that sells electronic component parts.
Project outcomes
- Assist the shop manager in managing customers, province, product, orders, system, and news
An effective website should prioritize user-friendliness, featuring an intuitive interface that is visually appealing It is crucial to present visitors with the information they seek, along with relevant content that enhances their experience.
- The program must be diverse and attractive to attract the interests, needs of many users
- The program must also be easy to be used, maintained, and updated for better, high-quality management from the shop's staff and manager
Website administrators must consistently oversee product information, efficiently manage user requests, ensure accurate data entry, and facilitate smooth data management processes.
- The user’s experience is always top-notch.
Project plan
- Get to know the technology and practice with it (2 weeks)
- Finishing administrator system (page) (2 months)
CURRENT STATUS SURVEY
Executive Board
- Manage and distribute store operations
- Decide the official price for each item.
Sales Department
- Selling online is a new form that shoppers must manually manipulate through each step to be able to buy goods
The products are organized into various categories, allowing users to easily navigate through a diverse selection of items This structure also simplifies the process for administrators to manage product listings by adding, removing, or updating items Users can effortlessly select a product from each category, where they will find detailed information including the product name, image, price, and description, along with a convenient link to add the item to their shopping cart.
The products are organized into various categories, allowing users to easily navigate through a diverse selection of items This structure simplifies the process for administrators to manage inventory by adding, removing, or replacing products as needed Users can effortlessly choose their desired item from the list of each product category.
The product page will display seven key pieces of information, including the product name, image, price, and a detailed description Additionally, a convenient link will be provided to easily add the product to your shopping cart.
- The shopping cart contains the information and the quantity of the goods purchased by the user and can be added to the cart
- When the customer wants to place an order, the system displays the order confirmation page with information about the customer and the goods.
Administration department
The job of this department is to perform network administration tasks, manage customer information, update product information, etc to ensure that the database is always updated quickly.
Requirements of the online sales system
To effectively meet customer needs, a website must prioritize product search functionality, enabling users to quickly and efficiently locate the items they wish to purchase.
- The program must be diverse and attractive to attract the interest of many people about your company
An effective website should prioritize user-friendliness, featuring an intuitive interface that is visually appealing It is crucial to ensure that visitors can easily access the information they seek, along with related content that enhances their experience.
When engaging in online buying and selling, it is crucial to prioritize the security of user information throughout the ordering and payment processes Additionally, ensuring timely and accurate delivery of goods to the correct location is essential for a successful transaction.
Website administrators must consistently oversee product information, efficiently address user requests, ensure accurate data entry, and simplify data management tasks for optimal functionality.
- It is allowed to edit and delete incorrect and inappropriate information
- Keep track of the buying and selling process
- Track the information customers enter when making a purchase, to ensure safety, security, and accuracy
- Follow up, process orders, and update information related to customer orders
- Can delete all databases after a specified time
2.4.3 Non-functional requirements of the online sales system
- The site should be compatible with other operating systems So moving from one operating system to another operating systems does not create any problem
- The site should load in 3 seconds when the number of simultaneous users is >
- Can function 24/7/365 and respond to users’ actions quickly
- Users need to create a strong password and enter the correct username and password for security purposes
THEORETICAL BASICS
Introduction
Spring Boot is a powerful framework that streamlines application development through its Rapid Application Development (RAD) capabilities Previously, creating a Spring project involved complex tasks like defining dependencies in the pom.xml file and extensive customization with XML or advanced annotations However, Spring Boot simplifies this process, enabling developers to quickly build and set up Spring applications with ease Key features of Spring Boot enhance its usability and efficiency in application development.
Here are some outstanding features of Spring Boot:
● Has many benefits of Spring Framework features
● Create an application that can be run with java -jar (for java web)
● Provides a wide range of non-functional features common to large projects such as direct embedding web servers such as Tomcat, Jetty, etc
● Reducing time for configuration, automatic configuration whenever possible (Reduce coding time, increase productivity)
● Does not require XML config
● The standard for Microservices (Cloud support; reduce setup, config; support libraries )
Introduce RESTFUL Webservice
RESTful Web Services, built on REST architecture, offer a lightweight and easily maintainable alternative to traditional SOAP and WSDL-based Web Services This approach has gained popularity for its simplicity and extensibility.
In recent years, REST has become the leading architectural design paradigm for web services, significantly influencing the landscape of network services Its simplicity and ease of use have led to a decline in the popularity of SOAP and WSDL, making REST the preferred choice for developers.
● Rules for creating a Webservice application that follows these four basic design rules:
- POST method to create a resource on the server
- GET method to retrieve the data from the server
- PUT method to update the data on the server
- DELETE method to delete the data on the server
A key characteristic of REST is its statelessness, meaning it does not retain client information between requests For instance, if you request the second page of a document and then wish to view the next page, REST will not remember the previous request This design implies that REST does not handle sessions, ensuring each request is treated independently.
● Display directory structure as URLs
● Transport JavaScript Object Notation (JSON), XML, or both
Presentation Layer: The presentation layer processes HTTP requests, converts JSON parameters to objects, authenticate requests, and sends them to the business layer
Business Layer: The business layer is in charge of all business logic It is made up of service classes and makes use of data access layer services
Persistence Layer: All storage logic is included in the persistence layer, which also converts business objects from and to database rows
Database Layer: Perform CRUD (create, retrieve, update, delete)
- The HTTP requests are made by the client (PUT or GET)
- The request is routed to the controller, which maps and processes the request
If necessary, it then invokes the service logic
- All business logic takes place at the service layer It executes logic on data that has been mapped to JPA using model classes
- If no errors occur, the user is presented with a JSP page
React is a popular open-source JavaScript library developed by Facebook, designed for building user interfaces It enables developers to create reusable UI components and effectively manage the view layer for both web and mobile applications Initially launched on Facebook in 2011 and later on Instagram in 2012, React has become a go-to choice for developers looking to enhance user experience.
Here are some magnificent features of React:
● Allows developers to create huge web applications that can change data without reloading the page
● It’s downright fast and scalable because React uses Virtual DOM
● It can combine other JavaScript libraries or frameworks like Angular JS in MVC
● Anyone with a basic previous knowledge of programming can easily understand React Technically, developers just need basic knowledge of CSS, HTML, and JavaScript
● It is very well-known and is supported by Facebook and Instagram engineering teams, plus external experts Moreover, React GitHub repository has over
1100 contributors, while users can ask their questions on Stack Overflow, Discussion forum, React flux Chart (discord), social media platforms, and many others
● Components have their logic and controls, and they are reusable throughout the application, which in turn dramatically reduces the application’s development time
React utilizes a unidirectional data flow, which leads developers to nest child components within parent components when building applications This approach simplifies the debugging process, making it easier to identify and resolve issues within the application.
Redux is a predictable state container designed for JavaScript applications, particularly when used with React, enabling developers to create applications that are easy to test and maintain consistent behavior across various environments, including client, server, and native Additionally, Redux enhances the developer experience through features like live code editing and a time-traveling debugger.
Here are the benefits of Redux:
● Predictable state updates make it easier to understand how the data flow works in the application
● The use of pure reducer functions makes logic easier to test and enables useful features Technically, Redux makes debugging the application easier to process
● Centralizes all data and makes it straightforward for components to get the state it requires and implement things like persisting data when reloading page, logging changes to the data
● Redux is used for improving the performance by skipping such unnecessary re-renders and ensuring that a given component re-renders only when its data has altered
Redux is commonly utilized for storing long-term data that remains accessible throughout the user's navigation in an application, such as API-loaded data and form submissions, as it persists until a page refresh In contrast, React is better suited for managing short-term data that is subject to rapid changes, including form inputs and toggles.
3.2.5.2.1 Definitions of state, store, reducer, action, Redux thunk middleware
● The state is a major concept of React components It determines how the component’s current situation state should be rendered on the client-side throughout many state updates
An action dispatched from the client UI carries essential information for the reducer, which determines the action type and initiates a state update This process involves retrieving the current state and modifying it to produce a new state.
● A reducer is just a function that takes two arguments: the application’s current state and an action dispatched from somewhere else of the client to return a new state
Redux centralizes the state of all components in a single location known as the store To modify the application's state, actions must be dispatched to the reducer.
Redux typically handles state changes synchronously; however, when integrating external APIs, utilizing Redux Thunk Middleware is the most effective method for managing both asynchronous and synchronous operations.
Redux Thunk is a middleware that enables developers to create actions that return functions for handling asynchronous operations, which are then followed by dispatching actions to reducers to update the state synchronously.
● Dispatched actions determine what is being modified and where, this operation happens right inside the reducer
3.2.5.3 The dataflow of Redux (Thunk Middleware)
1) When an event gets dispatched from UI which responses to user interaction, user inputs, API calls, or even form submissions…, it will be handled and create an action thunk that describes the event which is dispatched
2) Action thunk will be dispatched to Redux thunk middleware
3) Performing the asynchronous task first and receiving data back After that, the data will be sent to the reducer and performed state update
4) The Redux store runs the reducer function to calculate a new state
5) The UI reads the new state to display the new values
Ant Design streamlines webpage and layout design, minimizing time investment with its extensive and highly customizable components Widely adopted by major tech companies such as Alibaba, Tencent, and Baidu, it offers enterprise-class UI tailored for web applications and robust theme customization options that allow for detailed personalization.
Ant Design offers valuable tools for developers, enabling them to create visually appealing and user-friendly applications using antd components Its convenience enhances the development process, making it a best practice for developers to incorporate Ant Design in their projects.
PostgreSQL is a robust, open-source object-relational database system that enhances the SQL language and incorporates numerous features to securely store and efficiently scale complex data workloads.
SYSTEM ANALYSIS AND DESIGN
System analysis and design
- Customer who wants to buy an electronic part (End-User)
- Admin manager who wants to work on managing website by changing data, which is displayed on the client’s page, and inspecting, changing orders’ states
- Super admin who is in charge of managing all from other admins and users’ functionalities
- Company or retail store that wants to use this website for managing, controlling, and selling electronic parts
Students often require electronic components for their project work, prompting an online electronics store to establish a dedicated platform catering specifically to their needs The website will focus on providing a wide range of electronic products essential for student projects, ensuring easy access and convenience for its users.
Efficiently oversee orders, products, and customer accounts with robust management tools designed for Super Admins and Admins Streamline product organization within categories, handle customer account management, and facilitate order processing seamlessly Stay updated with news management and ensure effective oversight of both admins and customers under the Super Admin role Additionally, manage provincial settings to enhance customer engagement and service delivery.
Create a user-friendly website for purchasing electronic components that allows customers to register and log in, view detailed product information, place and track orders, and cancel them if needed Users can manage their addresses, search for products, choose payment methods like PayPal or mainland delivery, and manage their profiles Additionally, customers can easily add products to their cart and manage their shopping experience efficiently.
4.1.3 Actor Description and featured functionalities
Brief Description The way system’s admin logouts
Actor(s) All admins log out into the system
This use-case starts when the user wants to access the system
1 User select “Log out” function on the system
2 The system displays the “Log out” form
3 User enter correct username and password then click "Log in"
4 The system will return the user to the main UI
Brief Description The way system’s super admin logins
Actor(s) All admins login into the system
This use case starts when the user wants to access the system
5 User select “Login” function on the system
6 The system displays the “Login” form
7 User enter correct username and password then click "Log in"
8 The system will return the user to the main UI
Enter the wrong login information
● The system will view failed message to the user
● The system will ask the user to re-enter the password and username
The user already has an account on the system
Success Log in successfully, the user accesses the system
Failure Log in failed, the user cannot log in
Brief Description The way admin views a profile
Actor(s) All admins log out into the system
This use case starts when the admin chooses the function to view the profile:
1 The admin click on the view profile function
2 The system displays an input form
3 The admin types order id
4 The admin click on the “Search” button
5 The system displays the admin’s profile form by that id
Fill out the information missing
1 The system requires an admin to type id input field
Cannot find any admin by id
2 The system cannot find admin information:
- Displays box message that cannot find any order that
- System view input field again to admin re-fill
Title Description admins who have their admin id
Success Admin’s detailed information is displayed
Failure Cannot find any admin information that matches the id
Brief Description The way admin manage order
This use case starts when the admin chooses the function to manage order information
1 Admin choose the “List Order” button to view all list of order
2 The admin will select the order list by name and gender
3 The notification system will display a list of orders who satisfy the conditions
1 The system retrieves the database of order conditions and displays them
Admin successfully accessed the order information page
Success view list of orders on the screen
Failure Raise error cannot get data order on the screen
Brief Description The way admin edits profile
This use case starts when the admin chooses the function to edit the profile
1 Admin chooses the "Edit profile" function in the system after choosing the student who wants to edit
2 Admin edit profile and press the "Edit" button
3 The notification system has successfully edited the profile
1 The system returns the profile page
Admin successfully accessed the Profile page
Success Edit successful, admin edit profile successfully
Brief Description The way admin manage product
This use case starts when the admin chooses the function to manage product information
1 Admin choose the “List Product” button to view all list of product
2 The admin will select the product list by name and gender
3 The notification system will display a list of products that satisfy the conditions
1 The system retrieves the database of product conditions and displays them
Admin successfully accessed the product information page
Success view list of products on the screen
Failure Raise error cannot get data product on the screen
Brief Description The way admin manage category
This use case starts when the admin chooses the function to manage category information
1 Admin choose the “List Category” button to view all list of category
2 The admin will select the category list by name and gender
3 The notification system will display a list of categories that satisfy the conditions
1 The system retrieves the database of category conditions and displays them
Admin successfully accessed the category information page
Success view list of categories on the screen
Failure Raise error cannot get data category on the screen
Brief Description The way super admin manage account
This use case starts when the super admin chooses the function to manage account information
1 Super admin choose the “List Account” button to view all list of account
2 The super admin will select the account list by name and gender
3 The notification system will display a list of accounts that satisfy the conditions
1 The system retrieves the database of account conditions and displays them
Super admin successfully accessed the account information page
Success view list of accounts on the screen
Failure Raise error cannot get data account on the screen
Brief Description The way super admin manage role
This use case starts when the super admin chooses the function to manage role information
1 Super admin choose the “List Role” button to view all list of role
2 The super admin will select the role list by name and gender
3 The notification system will display a list of roles that satisfy the conditions
1 The system retrieves the database of role conditions and displays them
Super admin successfully accessed the role information page
Success view list of roles on the screen
Failure Raise error cannot get data role on the screen
Brief Description The way super admin manage permission
This use case starts when the super admin chooses the function to manage permission information
1 Super admin choose the “List Permission” button to view all list of permission
2 The super admin will select the permission list by name and gender
3 The notification system will display a list of permissions that satisfy the conditions
1 The system retrieves the database of permission conditions and displays them
Super admin successfully accessed the permission information page
Success view list of permissions on the screen
Failure Raise error cannot get data permission on the screen
Brief Description The way super admin manage setting
This use case starts when the super admin chooses the function to manage setting information
1 Super admin choose the “List Setting” button to view all list of setting
2 The super admin will select the setting list by name and gender
3 The notification system will display a list of settings that satisfy the conditions
1 The system retrieves the database of setting conditions and displays them
Super admin successfully accessed the setting information page
Success view list of settings on the screen
Failure Raise error cannot get data setting on the screen
Brief Description The way system’s customer logouts
Actor(s) All customers log out into the system
This use case starts when the user wants to access the system
1 User select “Log out” function on the system
2 The system displays the “Log out” form
3 User enter correct username and password then click "Log in"
4 The system will return the user to the main UI
The user already has an account on the system
Success Log out successfully, the user ends access to the system
Brief Description The way system’s customer logins
Actor(s) All customers login into the system
This use case starts when the user wants to access the system
5 User select “Login” function on the system
6 The system displays the “Login” form
7 User enter correct username and password then click "Log in"
8 The system will return the user to the main UI
Enter the wrong login information
● The system will view failed message to the user
● The system will ask the user to re-enter the password and username
The user already has an account on the system
Success Log in successfully, the user accesses the system
Failure Log in failed, the user cannot log in
Brief Description The way customer view all their profile
This use case starts when the customer chooses the function to View the profile
2 The customer clicks the "View profile" button
3 The notification system has been successful
The user already has an account on the system
Success Customer view profile successfully
Brief Description The way customer view all their order history
This use case starts when the customer chooses the function to View order history
4 Customer access View order history
5 The customer clicks the "View order history" button
6 The notification system has been successful
The user already has an account on the system
Success Customer views order history successfully
Failure Customer view order history failure
4.1.5.2.5 View product by category Name View product by category
Brief Description The way customer view all their product by category
This use case starts when the customer chooses the function to View product by category
7 Customer access View product by category
8 The customer clicks the "View product by category" button
9 The notification system has been successful
If the products of that category are not sold out or available
Success Delete successful, customer view product by category successfully
Failure Delete failed, customer view product by category failure
Brief Description The way customer view all their category
This use case starts when the customer chooses the function to View category
11 The customer clicks the "View category" button
12 The notification system has been successful
Brief Description The way customers view product
This use case starts when the customer chooses the function to View the product
1 Customers choose the product that they want to read more detail
2 The system redirects the customer to the view product detail
Brief Description The way customer view all their cart
This use case starts when the customer chooses the function to View the cart
2 The customer clicks the "View cart" button
3 The notification system has been successful
4.1.5.2.9 Add product to cart Name Add product to cart
The way customers add the product to the cart
This use case starts when the customer chooses the function to add the product to the cart
1 The customer chooses the product that the customer wants to add to the cart
2 The system displays the information of the product that the customer wanted to buy
3 The customer fills out the information (quantity) and presses the "Add product to cart" button
4 The notification system has successfully been added to the cart
Fill out the information missing
1 The system requires a re-fill and full information of the product
The customer successfully login into the website and the type of product that a customer searches for exists on the website
Success Add successfully, customer add the product to cart successfully
Failure Add failed, customer add the product to cart failure
Brief Description The way customers choose the order payment method
This use case starts after the customer chooses the order payment method
1 The customer chooses the "Payment method" function in the system
2 The customer clicks the "Yes" button after selecting the payment method
3 The notification system has successfully made the order
1 The system returns the manager to the "Manage cart" page
The customer successfully accessed the “Manage cart” page
4.1.5.2.11 Search product Name Search products
The way customers want to search the product they are interested in to see detail
This use case starts after the customer uses the search bar
1 The customer enters the product name
2 Customer clicks the "Search" button after they’re done typing
3 The website will return the product detail
The product is available or exists in the system
PROGRAM BUILDING
Build System
5.1.1.1 Construct Layout for the entire project
The master layout is very important since it defines the structure of the project
An example code of Master Layout
5.1.1.1.2 Container to show a list of data
The container is to show data in the form of JSON into multiple data and render out multiple items of the same property
Example code of the container
Example container in client page that show a list of products
Example of container in an admin page that shows a list of products
Saga is commonly utilized to send API calls directly from the user interface to the backend controller Upon a successful process, it returns the data to the reducer for state updates; otherwise, it triggers an error handler.
An example of Saga call API to get a category list of product
5.1.1.3 Reducer (for updating the state of the web)
A reducer plays a crucial role in managing data for display on the client’s page by receiving information sent from the saga It combines the current state with the new data from the saga to generate an updated state, which is then stored in Redux.
An example of a reducer in product
Redux storage is a specialized storage solution that retains updated states from the reducer It efficiently manages and stores the constantly changing state returned by the reducer This updated state can then be utilized to populate data through mapping techniques or the specialized hook useSelector().
Utilizing Selectors to retrieve data from Redux storage allows for seamless integration of the latest state updates This data is then assigned to component properties, ensuring that the UI automatically refreshes in response to changes in the virtual DOM of React, which in turn updates the real DOM.
Example of Selector in product
5.1.1.6 Route (For multiple page support)
Routing is essential for handling multiple-page websites It allows the website to change page simultaneously with the predefined component data it directs to
AdminForm +Create, read, update, and delete admin information
LoginForm +Access the website by entering username and password
GroupPermissionForm +Give or change permission for users
+Search name of the permission
CustomerForm +Create, read, update, and delete customers’ information
ProductCategoryForm +Create, read, update, and delete product categories
NewsCategoryForm +Create, read, update, and delete news categories
ProductForm +Create, read, update, delete the product
NewsForm +Create, read, update, and delete news
ChangePasswordForm +Change password if needed
LoginForm +Access the website by entering username and password register for +Create a new account
+Request the server to send mail to change the password if the user forgets the old password
VerifyForm enables users to recover forgotten passwords or activate their accounts by verifying an email sent by the website, granting them the permissions assigned by the admin.
CartForm +Add product to customer’s cart
+Remove products from the cart
+Increase or decrease the number of items in the cart
5.1.2.1 Deploy the application with the Maven project
Maven is a software project management and automation tool Maven supports the automation of initial project creation, compilation, testing, packaging, and product deployment
Maven generates a pom file for every project, which outlines essential tasks for testing and building This file serves as a crucial reference for Maven, guiding it in managing the project effectively during execution.
A Data Transfer Object (DTO) is designed to minimize the transfer of unnecessary information while enhancing security It is commonly used to return status responses from the server, accompanied by the relevant object.
Controller: The controller is the place to receive the request, handle business logic for the application and return the response to the client
com.nails.root
, , Triple information to describe the name and version of the project
defines the format when packaging the component, which can be jar, war, ear… jar (packaged as jar )
where to declare the libraries used in the project
org.springframework.boot
spring-boot-starter-data- jpa
Interceptor: The Interceptor will check the request information (login information, session, IP ) to allow the request to pass or deny the request, redirect the request
Handle Exception: Handle exceptions when an error occurs
● Create entities associated with the Database through annotations in the javax.persistence library
● Supports the creation of simple queries when extending JpaRepository
" OR c.account.email = :phoneOrEmail)") public Customer findBy(@Param("phoneOrEmail") String phoneOrEmail);
@Query(value = "SELECT COALESCE(count(*), 0)" +
" WHERE c.account.phone = :phone") public Long countBy(@Param("phone") String phone);
5.1.2.5 CRUD process with 4 Mapping API methods
JSON Web Token (JWT) is an open standard (RFC 7519) that enables secure message transmission between parties through a JSON object, with its authenticity ensured by a "signature." This signature is generated using HMAC or RSA encryption methods, allowing the information to be validated and trusted.
The salient features of JWT:
1 Small size: JWTs can be transmitted via the URL, or the POST protocol, or stuffed inside the HTTP header Smaller size corresponds to faster transmission work
2 Self-contained: The Payload section (roughly understood as a block of goods) contains all the information we need
Integrating JWT in Spring Framework:
JWT returns after successful login:
Spring Security is a prominent project in the Spring ecosystem Spring Security provides comprehensive security services for Java EE-based enterprise applications
@Override public Collection