Develop online banking website via java web application by applying three-tier architecture

DEVELOP ONLINE BANKING WEBSITE VIA JAVA WEB
APPLICATION BY APPLYING THREE-TIER ARCHITECTURE
SVTH: Vũ Ngọc Hà Minh, Tạ Minh Đức,
Trịnh Quang Huy, Nguyễn Hồng Long, Nghiêm Thị Xn
GVHD: ThS Nguyễn Hữu Cầm
Tóm tắt - Với sự tiến bộ theo cấp số nhân của công nghệ, hành tinh đã chứng kiến sự gia tăng
thị trường hàng hóa phần mềm. Các sản phẩm này khơng chỉ phải hoạt động mà cịn phải nhanh và
có thể mở rộng. Nhóm phát triển sẽ khám phá Kiến trúc ba tầng - một kiến trúc tạo điều kiện cho khả
năng mở rộng - trong bài viết này, cũng như lý do sử dụng kiến trúc và kết quả của việc áp dụng kiến
trúc trong ứng dụng web Trình theo dõi bệnh Coronavirus.
Abstract - With the exponential advancement in technology, the planet has seen an increase in
the market for software goods. These products must not only function, but also be fast and scalable.
The development team will explore Three-Tier Architecture – an architecture that facilitates scalability
– in this article, as well as the reasons to use the architecture and the results of applying the
architecture in the Coronavirus Disease Tracker web application.
Keywords: Multi-tier architecture, three-tier architecture, Java Servlet, Model-View-Controller,
Single-page web application

A. INTRODUCTION
The advent of e-banking applications in the modern world is a technological advance.
Especially during the most severe outbreak of Coronavirus (CoViD-19) in early 2020, the
need for an online website for required services, including money transfer, is critical. The
production team wanted to build a Web Application to satisfy the interests of clients as a
community of college students. As a group of college students, the development team agreed
to build a Web Application built on Java Web technologies to satisfy the needs of consumers
in the management and use of money at the bank. This application would enable people to
deposit and withdraw money from their homes, saving time and preventing the spread of
Covid disease. This article will include information about the status of the application. This
study would provide insight into the success of the program, including how it was designed,
what was done well and what was not, as well as future application enhancements.
B. MAIN CONTENT

I. Definition of Three-Tier Architecture.
Conventionally, a web application has been developed using Client-Server architecture,
in which a client sends requests to the server, and the server handles all else, from data
retrieval to HTML content development to serve the client. That is, all required codes for

157


handling data and serving markup content must be stored on a single server, making the
server itself difficult to maintain. That ensures that all necessary codes for handling data and
serving markup content must be stored on a single server, making the server difficult to
manage and, if there are bugs in the system, finding and resolving the problem can take a long
time.
There was a two-tier architecture in which the program logic is either buried within the
client's User Interface or within the server's cache (or both). In two-tier client/server systems,
the operating system interface is typically installed on the user's desktop, while database
administration facilities are typically located on a server, which is a more robust machine that
serves multiple customers.
Three-tier architecture is a client-server network architecture pattern with many
implementations in delivery. The core feature of this architecture is that it allows for the
reusability of program building blocks (also known as modules), such as exchanging software
components at run time, replicating the same object, managed code adaptation, or
autonomous adaptation of components.

Figure 1: How the tiers of Three-Tier Architecture
This pattern is made up of three logically independent layers: 1) the client-side
presentation layer, 2) the application layer (as well referred to as business reasoning,
controllers, and service management layer), and 3) the data layer (also known as data
storage). The presentation layer is responsible for the application's user interface. This layer is
where all human-computer communications (HCI) take place.

II. Reasons for using Three-Tier Architecture.
The below are the benefits of using a three-tier architecture:

158


1. Reusability: By using a modular component-function structure, multiple
users/developers may contribute to the development. This contribution is shared in a public
archive such that other people can reuse it with little to no modification.
2. Because of the use of distributed servers as well as the isolation aspect of three-tier
architecture, scalability (both horizontally and vertically) is another important function.
Horizontal scalability is accomplished by adding more nodes of the same kind as required.
Vertical scalability is accomplished by providing additional services to a host node on
request. Separating various tiers, on the other hand, helps each one to be scaled individually
based on the needs of any given time.
3. Flexibility: Since server nodes used in the application layer can be designed,
installed, and checked independently without disrupting the other layers, they can be
introduced to the framework on demand.
4. Reduced latency: Since the nodes are distributed in datacenters as close to the end
user as possible. This is primarily addressed by using an open PaaS (Platform as a Service)
model in which the technology sophistication of servers is managed and configured by
professionals.
5. Data transmission at any moment, regardless of the user's connection speed. The
relation between the application layer and the data layer is isolated from the presentation
layer, which reduces the user's bandwidth load.
III. Three-Tier Architecture in action: Online Banking Website project summary
Online Banking Website is a web application created during the world's largest
epidemic of CoViD-19 disease. This website enables users to transfer payments legally
immediately. Aside from the standard factors mentioned above, a range of prominent features
are also included, which are: deposit, loan, and savings. This program, in addition to

displaying visualized data, helps administrator users to easily edit bank account data
manually.
Our E-banking website was built based on Three-Tier Architecture, with Presentation
layer use HTML, CSS, JS and Live Server Extension from Visual Studio Code as server, and
the application tier using Java, and data tier using MySQL. All three servers run locally with
Presentation server on port 5500, Application tier on port 8000, and MySQL on port 3306.
To access the website, we access through http://127.0.0.1:5500/

159


Figure 2: Presentation tier code calling Api from Application tier
The administrator user may use this program to generate or edit database records. When
the administrator performs an operation on the files, the presentation server sends a call to the
application server with the JSON body, and the application server converts the request into a
database operation. The application server then returns a positive or failure status code, and
the presentation layer reloads its cache to accommodate changes in the database.
IV. Development of Online Banking Website
API Design:The back-end application programming interface was built based on the
resources-based REST API architecture. Firstly, we define all resources for the system. In this
project, we define about ten resources, including what we have used and what we have not
used yet, because of maintaining and improving later on. These resources include account,
bill, business, gift, investType, loan, normal, paymentMethod, save, service, transaction.
Then, we select suitable HTTP methods (POST, GET, DELETE, PUT) for these resources.
There are some examples of HTTP method from /account
● /account/addAccount (POST method) add an account to the database according to
body
● /account/getAllAccount (GET method) get the list of all account from the database
● /account/editAccount (PUT method) edit account have id provided from parameter
“id” from database

● /account/deleteAccountById (DELETE method) delete account have id provided from
parameter “id” from database
Backend Design: Our backend was implemented using Spring Data JPA Framework,
so our backend may be simple. Therefore, the UML class diagram has been used in our
project during the design process to give developers a clearer understanding of how the
interface is to be used. The class diagram illustrates how objects and their relationships are
implemented. UML Class Diagram is divided into a comprehensive set of criteria to execute
exactly what the requirements plan had previously provided.

160


Figure 3: Online Banking Website Backend Design
Frontend Design: In the section on user interface architecture: The frontend server
uses a live server from Visual Studio Code extensions to run. The views are divided into 3
main layouts depend on their belong to what role (admin, user, business), and written by
HTML, CSS, Javascript with a bootstrap template from Ela Admin

Figure 4: Online Banking Website Ela Admin

Implementation: In this project, we use Git and GitHub to control all changes of the
project. Mostly, we use Github on the website and Github Desktop as Git GUI. In Git, we
divide into 3 main branches, consisting of 2 branches for the frontend and 1 branch for the
backend. We do backend first then, do frontend later. However, due to some changes in the
idea, we have to make a change in the backend. Therefore, about 1/3 of project time, we do
backend and frontend simultaneously.
V. Online Banking Website - work results
The project team has launched the first big update of the Online Banking program after
a long period of work on it. As seen in the previous section, this release includes a homepage
for all device users, as well as the ability to log in as an administrator to make changes to the

161


files. As the administrator, the user can manually create a new account for a client, manually
change accounts, or manually delete an account if the customer so desires.

Figure 5: Login page of system

Figure 6: HomePage of system

Figure 7: Account list of system(Administrator view), admin can
edit and update the account in the database

162


Figure 8: A description of Bill
VI. Evaluation
1. Advantages
- The system is separated into three tiers, each taking up two servers (one for front, one
for back)
- The Application tier server, or the backend server, was designed with a consistent
Application Programming Interface
- We have implemented all the core functionalities, and also improve them with ecommerce like services
- Backend using framework to be easy to maintain and improve later
2. Disadvantages
- Compared to developing a simple JSP/Servlet application, it takes time to develop the
application. This should affect inexperienced teams only, but it will not prevent expert teams.
- Frontend not using any framework, it may take a longer time to make big changes

3. Future Work
- Redesign database, clean up code for better response time
- Changing the Presentation tier technology to a reactive frontend framework such as
ReactJS
- Improve to able to have more than one admin
- Give business more function
- Mobile version

163


C. CONCLUSION
Software engineering is famed for its fast-paced and innovative nature. And Three-Tier
Architecture is one the most popular architecture today , especially in web applications. In
this paper, we have discussed Three-Tier architecture, the pros and cons of this architecture
selection, along with E-Banking Management System web application. Three-tier architecture
is a well-established software application architecture with many strong points like reliability,
scalability or security. With this architecture, the back-end team and front-end team can do
and develop the app at the same time and the front-end developer can get data through API.
Moreover, in the E-Banking Management System web application, Spring Boot is used in
order to build self-contained web applications, which is one of most popular frameworks
written in Java. The application, E-Banking Management System, may have many weak
aspects but it demonstrated where the architecture is good at, which is complete separation
between front-end service and back-end service. In the future, the application will be better
and better, and more useful service will be applied in this application.
REFERENCES
Abdelrahman, M., Zhan, S., & Chong, A. (2020). A Three-Tier Architecture VisualProgramming Platform for Building-Lifecycle Data Management. Simaud.org. Retrieved 9
May 2021, from />APPENDIX
[1] Project repository: />
164