Developing ecommerce web applications using Springmvc

DEVELOPING ECOMMERCE WEB APPLICATIONS
USING SPRINGMVC
SVTH: Nguyễn Quốc Hiếu, Đinh Quang Tiến
GVHD: ThS Nguyễn Thị Hương
Tóm tắt: Cùng với cuộc cách mạng internet trên thế giới, các trang web phục vụ con người ngày
càng phát triển về số lượng và chất lượng. Công nghệ được ứng dụng vào đời sống con người giúp
cho các hoạt động của con người trở nên dễ dàng và thuận tiện hơn, cùng với đó là thúc đẩy kinh tế
phát triển. Thương mại điện tử là một trong những lĩnh vực rất phát triển, vì vậy một trang web được
tạo ra để bán hàng trực tuyến là điều cần thiết. Trong bài báo này, chúng tôi sẽ thảo luận về kỹ thuật
sử dụng Spring framework, cách thức hoạt động và kết quả của chúng tôi khi sử dụng kỹ thuật này.
Abstract: Along with the internet revolution around the world, websites for the purpose of
serving people are growing in quantity and quality. Technology is applied to human life to make
human activities easier and more convenient, along with promoting economic development. Ecommerce is one of the most developed fields, so a website created for selling online is essential. In
this paper, we will discuss about the technique of using Spring framework, the way it works and our
result using the technique.
Keywords: Spring MVC, Waterfall Lifecycle, Java Servlet, Model-View-Controller, View
Resolver ,Spring MVC Dispatcher Servlet.

A.

INTRODUCTION

E-commerce is becoming a common thing in the world. According to Malie Nguyen the
e-commerce market in Vietnam grew 18 per cent, reaching $11.8 billion last year. It also
entails exchanging data and funds electronically between two or more individuals. Simply
placed, it is internet shopping in the traditional sense. Any website on the internet, in a
broader sense, is an E-Commerce website. It may be a forum, a store, a portal, an app, an
entertainment website, a. Because of that, this research is dedicated to the purpose of
developing an ecommerce website. The development group decided to create a Web
Application, a replica of what has been used by hundreds of millions people in the world, that
contains all necessary features. This research will provide an insight into the development of

the application along with all the strength and vulnerability of it.
B. MAIN CONTENT
I. Development
1. Software Development Lifecycle (SDLC)
Initially, the project team opted to use the Waterfall SDLC to design the application
because the Waterfall model is simple to grasp and follow, and the steps in the model are well

175


described. However, the team did not immediately implement Waterfall, but first tweaked the
model to address the SDLC's biggest flaw: inflexibility. This lifecycle is therefore appropriate
for an instructional setting so the risk of continuous change in consumer requirements is
eliminated. As a result, the community uses a hybrid approach in which, although the steps
are the same as in the Waterfall process, input is applied in each process – a previous phase's
result may be modified if it doesn't fit well in a later phase. Therefore, the hybrid Lifecycle
was a better option, there are multiple iterations in later stages such as development and
testing to ensure that features perform well on their own and that new features do not break
the function of existing features. The team returned to the first phase and started each time all
of the processes were finished. The team also feel excited when see the project get finished
step by step. The lifecycle could be sum up as multiple, but smaller Waterfall-like phase:
Requirements & Analysis, Design, Implementation, Testing.
2. Requirements Analysis
An e-commerce site's main aim is to offer products over the internet. This project is
about creating an e-commerce platform for an online clothing sale. In offering a list of various
items available for purchase in the shop to the buyer. This initiative aids in the creation of a
simple website on which a customer is presented with a shopping cart functionality as well as
information on technology. Any of the fundamental technology used to build and execute an
e-commerce website will be discussed in this paper.
The Use-case diagram also describes this in the business requirement language. Below

is an example of it.

Example of a use case diagram

176


There are two types of positions available: admin and client. They play various roles in
the process of internet trading and website sales. There are, however, certain distinctions
between them.
We market five different categories of goods on our websites. “Woman,” “Man,”
“Boy,” “Girl,” and “Sell” are the names of the characters. “Manage products,” which includes
CRUD (Create, Read, Update, and Delete) and search products for service admins to obtain
and review information from consumer orders, is another popular use case.
It enables the administrator to make several crucial changes, such as selecting new
viable goods for future sale on websites and devising new trading strategies. First, the
administrator generates new items for databases, after which the system receives and displays
databases on the website. Additionally, the administrator has the ability to read, edit, and
uninstall products on the website by upgrading.
Normal user: They will browse the items, add them to their cart, and decide whether
or not to buy them, much like a customer in a physical store. They can also choose between
cash on arrival and online payment through PayPal. Customers should build a personal
account when they visit our website. This not only assists administrators in managing
customer profiles, but it also provides additional incentives to users. If a customer has an
account, he or she can simply purchase and pay for the items they want. Tap the "user" button
in the upper right corner of the homepage and choose "sign up."
Customers browse the clothing store's website for the items they wish to purchase. They
will add items to their cart and check out later. Users can quickly locate the "add to cart" icon
when viewing product data. Shift the mouse to the cart icon in the right corner of the
homepage, then press view cart to see all of the items they've added.

2.2. ER diagrams
The data models are described appropriately in the ER diagrams. An EntityRelationship (ER) Diagram is a type of flowchart that shows how “entities” within a structure,
such as individuals, events, or ideas, interact with one another.Users that are able to purchase
will do so by clicking the order button in the display cart. The checkout form appears on the
computer, and the next move is to complete it. Users must fill out three categories to complete
the form: contact, mailing, and payment process. Finally, they will go back to their cart and

177


finish the transaction. Below is an ER diagram of the project.

ER Diagram
II. Design
Architecture overview
A web application was developed. In a client-server architecture, a client sends requests
to the server, which does all else, from data retrieval to HTML content development for the
client. That ensures that the necessary code for managing data and providing markup content
must be contained within a single folder, making the server difficult to manage and
troubleshoot in the event of a bug. All the code will be located on the server, along with all
the data stored in the database and file system.

Diagram of client-server architecture

178


Logical architecture overview
The architecture components of the MVC pattern are designed to handle different
aspects of an application in development. The MVC design pattern serves to separate the

presentation layer from the business logic. The Model View Controller design pattern
separates concerns into one of 3 buckets: Model, View, and Controller. The Model View
Controller architectural pattern separates concerns into one of 3 buckets: Model stores &
manages data. Often a database, in our quick example we’ll use local web storage on a
browser to illustrate the concept. The view act as a Graphical User Interface. The view is a
visual representation of the data- like a chart, diagram, table, form. The view contains all
functionality that directly interacts with the user - like clicking a button, or an enter event. The
controller is the brains of the application. The controller connects the model and view. The
controller converts inputs from the view to demands to retrieve/update data in the model.
The controller receives input from view, uses logic to translate the input to a demand for
the model, the model grabs the data, and the controller passes data from the model back to the
view for the user to see in a nice display.
Apart from the traditional MVC paradigm, there are some modifications. Generally the
DAO is as light as possible and exists solely to provide a connection to the DB, sometimes
abstracted so different DB backends can be used. The service layer is there to provide logic to
operate on the data sent to and from the DAO and the client. Very often these 2 pieces will be
bundled together into the same module, and occasionally into the same code, but you'll still
see them as distinct logical entities. Another reason is security - If you provide a service layer
that has no relation to the DB, then is it more difficult to gain access to the DB from the client
except through the service. If the DB cannot be accessed directly from the client (and there is
no trivial DAO module acting as the service) then all an attacker who has taken over the client
can do is attempt to hack the service layer as well before he gets all but the most sanitized
access to your data.
Spring MVC Dispatcher Servlet Design
Spring's web MVC framework is, like many other web MVC frameworks, requestdriven, designed around a central servlet that dispatches requests to controllers and offers
other functionality that facilitates the development of web applications. Spring's
DispatcherServlet however, does more than just that. It is completely integrated with the
Spring IoC container and as such allows you to use every other feature that Spring has.
The request processing workflow of the Spring Web MVC DispatcherServlet is
illustrated in the following diagram. The pattern-savvy reader will recognize that the

DispatcherServlet is an expression of the “Front Controller” design pattern (this is a pattern

179


that Spring Web MVC shares with many other leading web frameworks). The Controller then
will take the request and call appropriate service on the GET and POST method. Following
that, the DispatcherServlet will handle the requests with the ViewResolver to pick up the new
defined view. Finally, the DispatcherServlet passes the data to the browser to render.
Class Diagram
The project is built by multiple continuous iterations to satisfies the requirment and
assure that the project is suitable for it. Below is an example of Class Diagram Iteration 5.

Frontend Design & User Interface
The project frontend uses mainly bootstrap template with html, css and javascript to
enhance user experience. There are 2 views corresponding to 2 types of users: administrator
view and customer view. The views contain three main layouts: header (navigation menu and
search box), content and footer. Each page or view component is contained in a jsp file, all
JSP file are included in a folder named views.

180


List of JSP
In the admin page, a menu represents 4 features: manage user, mange product, mange
voucher, mange promotion. In each feature include information for managing this element
such as create, retrieve, update and delete. On the others side, the Customer page has more
complicated view to meet complicated requirements.

Administrator table view

181


Customer view
III. Design Pattern
1. Singleton Pattern
This project uses some of the design patterns learnt from the course and the instructor.
The Singleton Pattern is one of the examples. Singleton is a creational design pattern that lets
you ensure that a class has only one instance, while providing a global access point to this
instance. It will be better for the memory handling since objects are saved in stack and heap,
and by Singleton Pattern, no duplicate objects is made, hence save all the performance.
In this project, Singleton Pattern is used along with Spring Framework; one of the
examples is the Singleton Scope in the annotation @Service for business rules. As mentioned
above, the modern MVC architecture has an additional layer called Service Layer in between
the DAO and the Controller. Since services should be stateless, they shouldn't need more than
one case. To save time instantiating and wiring, the Spring Architecture describes them as
Singletons. The data extracted from the database then will be manipulated by @Serviceannotated Classes.
Services should be stateless, and hence they don't need more than one instance.
Therefore, the Spring Architecture defines them as Singleton to save time instantiating and
wiring.

182


2. Chain of Responsibility Pattern
Chain of Responsibility is a behavioral design pattern that lets you pass requests along a
chain of handlers. Upon receiving a request, each handler decides either to process the request
or to pass it to the next handler in the chain. In this project, this pattern is used for
authentication and authorization.

The requests are passed through filters, which have jobs of monitoring that requests,
and then passed to the corresponding handlers. The Spring Security uses this interceptor as a
method of processing user requests. Spring Security then decided whether there are existence
of threats like attack from hackers and will be able to authenticate and authorize that request.
IV. SQA Plan
4.1. Unit testing:
All code will be tested to ensure that each individual unit (class) performs the necessary
functions and produces the desired results (reliability and functionality within a unit-level).
Unit testing is typically white box testing and may require the use of software debuggers. In
the project, Test-Driven Development method will be used; testing modules will be created
before ensuring the tested code. Junit 4.12 will be the tool to perform testing.
4.2. Integration testing:
Several classes will be tested together to ensure adequate execution and compliance
with the requirements, and it will determine how efficiently the units run together. This level
of testing is intended to detect interface flaws between modules/functions.
4.3. System testing:
The first level of testing is system testing, which involves testing the entire application
as a whole. At this level, the goal is to determine whether the system met all of the
requirements and whether it meets quality standards.
4.4. Acceptance testing:
Acceptance testing (also known as User Acceptance Testing) is the final stage that
determines if the device is ready for release. Changes in specifications can be misinterpreted
during the Software Development Life Cycle, resulting in software that does not meet the
users' intended needs. During this final step, the customer can test the device to see whether it
satisfies their company's requirements. The application will be transferred to production after
this phase is finished and the software has passed.
C. CONCLUSION
As technology is used in every aspect of people, the development support technology

183

platforms for website creation are becoming more and more popular. In this paper, we focus
on using a main framework called Spring MVC and using bootstrap for the frontend. We
delivered a brief discussion of the SpringMVC and it's technique. About Here is a sample
project on Spring MVC and can be accessed by anyone using the Github link in the Appendix
section.
REFERENCES
[1] Malie Nguyen, Three main trends for Vietnam's e-commerce in 2021. Retrieve from
/>APPENDIX
[1] Project repository: QuocHieuNguyen/EcommerceJava:
/>
184