Spring Boot Based Online Shopping Web Application

Data Persistence Layer: it is handled using the MyBatis framework, and this framework makes the 
connectivity of data easier instead of using a traditional JDBC connection. This layer will be called by 
business layer and interact with the database to request and store data. 
Business Logic Layer: It is handled using the Spring framework and Spring MVC pattern. It 
comprises two sub-layers such as service layer and controller layer. The service layer will call the data 
persistence layer and the controller layer will call the service layer using annotation @Autowired. It 
also helps handle the interaction with MyBatis persistence layer with help of DAO components [2]. 
2.2.1 E-commerce Data Processing 
Figure 8 Data Processing 
We have a lot of data to process when we develop a web application. The priority of data 
processing depends on how the complexity of the data. We usually deal with the simple data first and 
then work on complex ones. In this application, I deal with user data first since users' data do not have 
any dependency. And then I will process product category and product items. It has a lot of product 
items under each category so it has a dependent relationship between those two collections of data. In 
addition, shopping carts and watch list data are more complex, and the reason is they need to interact 
with the user data tables and product item tables. 
7 

---

2.2.2 Function Components 

Login Function 
Figure 9 Login UI 
This is login page and users can use their credential to login the E-commerce application. 

Register function 
Figure 10 Registration UI 
This is Registration UI page, users can use this page to create user account with their username and 
password, it will redirect to login page when account is created successfully. 
8 

---


Main Page 
Figure 11 Main page part1 
This main page of the E-commerce application. On the left-hand side, we have the “TW” logo, 
this logo exists on different UI pages, and if users click this logo and it will help users redirect to the 
main page. Our home button and cart button in the right-hand side, and there are user management 
functions such as update info and address management under the home button. Users can also check 
the items in the shopping cart before they purchase those items. In addition, the display advertisement 
board will randomly display some popular item for users. 
Figure 12 Main page part2 
In the main page of application, there are two sections such as New products and Best match parts for 
users to choose best product. 
9 

---


Update Password 
Figure 13 Update password UI 
Users are able to update the password in the update password UI, and the password will be saved in the 
t_user database. 
