Developing ecommerce web applications using Springmvc

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. Mời các bạn cùng tham khảo chi tiết nội dung bài viết!

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

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

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

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

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

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

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

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

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

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

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