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. E-

commerce 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 Entity-

Relationship (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, request-

driven, 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 @Service-

annotated 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

https://vietnamtimes.org.vn/three-main-trends-for-vietnams-e-commerce-in-2021-28792.html .

APPENDIX

[1] Project repository: QuocHieuNguyen/EcommerceJava:

https://github.com/QuocHieuNguyen/EcommerceJava/tree/master

184