Applying three-tier architecture to develop java web application for ashion shop

APPLYING THREE-TIER ARCHITECTURE TO DEVELOP JAVA

WEB APPLICATION FOR ASHION SHOP

SVTH: Trần Thị Mịn, Trần Diễm Quỳnh,

Phan Thị Hoài An, Nguyễn Thị Vâ n Anh,

Nguyễn Thị Cẩm Tú, Văn Tiến Huy.

GVHD: ThS Nguyễn Đình Trần Long

Abstract:

With the rapid advancement in technology, the world has become increasingly reliant on

software products. These products must not only function properly, but also be fast and scalable. The

development team will explore Three-Tier Architecture – an architecture that facilitates scalability – as

well as the reasons for using it and explaining the results in this paper.

Keywords: Multi-tier architecture, three-tier architecture, Java Servlet, Model-View-Controller,

Single-page web application

A. INTRODUCTION

Several years ago, web application still existed as a basic web, was built based on

Hypertext Markup Language (HTML), so it is genuinely inconvenient because it limited the

dynamics of a website content, navigation was lengthy and hard to scale. Right now, the users

don’t only require to have software products; specially web products; but also they want to

have systems which are able to extend; in particularly the developers with the reason is they

hope the number would increase over the world. Result, the good architecture appears, there

are good figure of architectures that can be used to maximize “separation of concerns”- the

fact that components of architectures can work independently instead of relying upon other

significantly. The most widely method is to apply Three-Tier Architecture for upgrading a

system’s scalability. Furthermore, the consumption of Three-Tier Architecture may be

associated with distributing the device in multiple servers in several organizations. This

paper’s main focus on explaining Three-Tier Architecture and demonstrating it in the

ECOMMERCE SYSTEM project. The topic was selected in the highest of the fashion’s

spread – when a good web application to update new trend.

B. MAIN CONTENT

a. Definition of Three-Tier Architecture.

A web application has traditionally been developed using a Client-Server architecture,

in which a client sends requests to the server, and the server does all else, from data retrieval

to HTML content creation for the client. That ensures that all appropriate codes for handling

data and serving markup content must be contained within a single server, making the server

difficult to manage and finding and resolving bugs in the system time consuming.

194

Three-Tier Architecture was created to aid in the development of a highly elastic

enterprise web framework. A three-tier architecture is a client-server architecture in which the

functional process logic, data access, machine data storage, and user interface are both built

and managed separately on different platforms. There are three separate tiers: Presentation

tier, Application tier, and Data tier in this structure. As a result, it is easier to handle source

code for the HTML generation node, and the code for the Application tier is simpler since it is

not responsible for HTML generation. The number of tiers is not restricted to two or three; n-

tier architectures are also available. However, it is not significantly more advantageous than

using Three-Tier architecture.

Figure 1: How the tiers of Three-Tier Architecture

The operation of Three-Tier Architecture is similar to that of Client-Server and Two-

Tier architectures. The client sends the request to the server, and the Presentation tier creates

HTML markup to act as the user's interface. Following that, whenever a client interacts with

the User Interface that requires data, the Presentation tier sends a request to the Application

server to fetch the data, and the Application server retrieves the data from the database and

prepares it in the most usable form that the Presentation tier requires. Finally, the Presentation

tier produces HTML material for display on the

b. Reasons for using Three-Tier Architecture.

• Firstly, it gives production teams a lot of leeway so they can upgrade or replace

specific aspects of the program without compromising the rest of the software. The platform

can be conveniently scaled up and down by detaching the front-end application from the

databases that are chosen based on the customer's specific needs. For instance, it is possible to

add user functionalities to management system in order to facilitate contact between

customers and admin without affecting the operation of the system as a whole.

• Secondly, Third, each of the three tiers will cover several servers, improving system

195

availability. For eg, if there is one server in the Presentation tier and two servers operate as

Application servers, the system would continue to function normally even if one of the two

Application servers is inaccessible due to maintenance. Furthermore, distributing the tiers

over many servers is a good way of handling total system load – the system must remain

responsive even though a significant number of users access it at the same time.

c. Three-Tier Architecture in action: ECOMMERCE SYSTEM project summary

ASHION SHOP web application is a web application created during the world's

breakthrough fashion era. This program includes the most recent fashion trends, as well as the

ability to view visualized data and perfect images. It also helps users to easily update fashion

data.

Our ASHION SHOP web framework was designed on a Three-Tier Architecture, with

the Presentation tier consisting of Servlet, JSP, and JBDC server, and the Application tier

consisting of Java technology and the Database. Both three servers are set up to run locally:

the presentation server on port 4433, the application server on port 8080, and MySQL on port

3306.

To access the web application, we access http://localhost:8080/FashionShop/:

196

197

Figure 2: Ashion Shop Homepage

While the page is being loaded, the presentation server makes requests to the application

server by fetching localhost:8080 using the JBDC to get data from MySQL database:

198

Figure 3: Code fragment calling from presentation tier to the Application layer.

Here, hostname= “http://localhost:8080”

Figure 4: Ashion Shop Application server (Tomcat Embedded 9.0.33)

The administrator user can generate or change the data of the clothes while using this

program. When the administrator conducts an operation on the files, the presentation server

will make a call to the application server along with the Servlet, JSP, or JBDC body, and the

application server will process 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.

d.

Development of Ashion Shop application

Traditionally, Java web applications have been largely developed using Java Server

Pages with Servlet. While this approach has been popular for a while, it has a severe

limitation: to deploy the application on a server, Tomcat must be properly set up on the

server, which may be time-consuming if the deployment server has not had Tomcat in

advance. Moreover, as both the front-end code and back-end code are in the same place, it is

difficult for the front-end and back-end team to work separately in parallel. In our project, we

have eliminated those disadvantages by using Tomcat Embedded as a back-end container, a

199

separate server for front-end, and a consistent API for communication between front-end and

back-end servers. The development process was divided into phases: Analysis, API design,

back-end design, front-end design, back-end implementation, front-end implementation, and

manual testing. Due to the length of this paper, only the most important and outstanding

diagrams and processes will be attached and discussed; more information can be found in the

project’s repository [Appendix 1].

Analysis: From the requirements given by the instructor, the project team has listed the

most important use cases for this system:

• Normal user: Login/Logout, view products, choose items, add to cart, check out,

manage orders, …

• Administrator user: Login/Logout, Manage orders, Manage products, Manage

account’s users,…

Based on the listed use cases, the team had an agreement on the entities in this system.

The entities include Admin representing administrator user, Record representing a disease

record at an arbitrary point of time for one location, and Point of Interest representing a

location that is having Coronavirus infected cases. Their relationships were modeled in the

following Entity-Relationship Diagram:

Figure 5: Ashion Shop Entity-Relationship Diagram.

API Design: In this project, we use API to store data and pass it to the user when there

200

is a query from the user. The application after being connected to the internet and sending

data to the server, then the server retrieves the data, interprets, executes and returns it to the

user. In our project, for example, the user asks to search for a $20 shirt, the application will

respond to the server, after interpreting, the server returns the results on the screen with a list

of products that have enough request. More details in Appendix[1].

Backend Design:

The backend was built using the Model-View-Controller (MVC) architecture pattern.

The Model-View-Controller (MVC) architecture pattern divides an application into three

major functional components: Model, View, and Controller. Each architecture component is

designed to manage a particular feature of an application's growth.

Frontend Design:

Boostrap is used to texture the main interface. This usage saves developers time and

quickly develop.

e. Ashion Shop – work results

After a long time working on this project, the project team released the first major

version of the ASHION SHOP app. This release has a home page for all users of the system

as outlined in the previous section, along with the functionality to log on as an administrator

to make changes to the data. As an administrator, users can create user profiles, update orders,

view-add-edit-delete product, ...

Figure 6: Login form for the system

201

Figure 8: Shop view.

Figure 8: Product Details view.

202

Figure 9: Cart view.

Figure 10: Order view.

203

Figure 11: Manage Products view.

In this view the administrator can: Add a new product, Update or delete existing products,

manage user, order, category and voucher data as well.

Figure 12: Find a product by product name or category.

Figure 13: Adding a new product.

204

f.Evaluation

oAdvantages:

- The system is clearly separated into three tiers, each taking up one server and one port.

- We have implemented all core functions: Login administrator, system manager, user

manager, order manager. We have also added a variety of search features for easy user use

with rich visuals. In addition to selling clothing products, we also expand on cosmetics and

accessories with the desire to ensure aesthetic integrity for users, helping users to have more

choices.

oLimitations:

- It is time-consuming to build the application, compared to building a plain JSP/Servlet

application. This should only adversely affect inexperienced teams but will not hold back

teams of experts.

oFuture work:

- In the future, it will upgrade the web, with a nicer interface, more user-friendly, in the

future, it will add the function of item suggestions for customers based on search analysis, ...

C. CONCLUSION

Today's software engineering is no longer focused on operating software products but

more on other metrics such as usability, ease of use, and most importantly scalability of

systems. Today's large scale is in great demand. In this article, the authors discussed the

Three-Layer Architecture, the reverse and reverse side of this architecture choice, along with

the application of the architecture to the Ecommerce web application. The three-tier

architecture is a powerful architecture for building secure, scalable web applications with

near-perfect availability; Therefore, it has been popular in recent years among businesses.

Developing applications based on this architecture is very beneficial because the back-end

group and the front-end group can work. Furthermore, in recent years, there has been a

tendency to build standalone web applications following the advent of libraries and

frameworks such as ASP.NET Core and Spring Boot.

The DAO User Party, unaffected with any specific country, even though it already uses

the ethereum network, can automate and scale the website quite quickly which has made the

website develop easily and help people easy to use. The resulting website - the ASHION

SHOP web app - may not be the fastest web application for development, and the

performance may not be good enough for a large number of users at once, but it has proven to

be. Where good architecture is, is the complete separation between front-end and back-end

service. In the future, more work will be done on this project to ensure high performance, and

205

more useful functions will be added to increase the usability of the application.

REFERENCES

[1] dzone.com. 2017. What Is N-Tier Architecture? - Dzone Devops. [online] Available

at: <https://dzone.com/articles/what-is-n-tier-architecture > [Accessed 6 May 2020].

[2] Patni, S., 2017. Pro Restful APIs., Chapter 2: API Design and Modelling.

APPENDIX

[1] Project repository: SE2_Spring2021_Project:

https://github.com/TranMinn/SE2-Project

206