A java web-based application following mvc architecture

A JAVA WEB-BASED APPLICATION FOLLOWING

MVC ARCHITECTURE

SVTH: Vũ Hoàng Việt, Nguyễn Tiến Sơn,

Phạm Thu Dung, Bùi Thị Thanh Huyꢀn,

Phạm Thị Hằng, Nguyễn Thị Chung

GVHD: ThS Nguyễn Thùy Linh

Tó m tắt - Với sự phá t triển mạnh mẽ của cô ng nghệ 4.0 trên toàn thế giới, cá c ngô n ngữ lập

trình như Java, JavaScript, C ++, ... ngày càng được cải tiến và mở rộng. Do đó, có rất nhiều ứng

dụng đáng kinh ngạc được tạo ra bằng cá c ngô n ngữ lập trì nh này. Trong bài bá o này, nhó m phá t

triển sẽ thảo luận về Trang web thương mại điện tử DrinkStore - một ứng dụng dựa trên web Java

theo Kiến trúc MVC và chứng minh kết quả của việc triển khai kiến trúc.

Abstract - With the strong development of 4.0 technology in the whole world, programming

languages such as Java, JavaScript, C++,... are increasingly improved and expanded. Therefore,

there are a lot of incredible applications created using these programming languages. In this paper,

the development team will discuss about the DrinkStore Ecommerce Website - a Java web-based

application following MVC Architecture, and demonstrate the result of architecture implementation.

Keywords: Java,

Java Servlet, MVC Architecture, web-based application, DrinkStore

Ecommerce Website.

I. Introduction

Drinks are an indispensable part of everyone’s life, most grocery stores sell a variety of

drinks. Drinks quench people’s thirst, making the meal more enjoyable and delicious. From

1990 on, the total volume of drinks consumed globally each year is in excess of over twenty

billions of liters. Because of Covid-19, more and more people prefer online shopping instead

of going to the store to limit the contact with other people. Many stores have started to

develop an ecommerce website to sell products online. Ordering online has a lot of

advantages: (1) convenience - people do not need to go outside to buy drinks, the disabled can

buy products when they can not travel, (2) contact limitation - decrease contact with other

people, limit the spread of disease. As a group of 6 university students studying Software

Engineering II, the development group decided to create a Web application to support people

ordering drinks online, based on Java Web Technology. The application provides customers’

side for ordering products and administrators’ side for selling products and tracking orders.

This report will provide an insight into the development of the application itself: how the

application was developed, what was well done, and what was not, along with possible

improvements to the application in the future. The website will use SQL Server to store the

database and Glassfish Server 4.1.1 to run the application. This report will provide an insight

into the development of the application itself: how the application was developed, what was

122

well done, and what was not, along with possible improvements to the application in the

future.

II. Main content

1. Software Development Lifecycle (SDLC)

In this project, the project team decided that Waterfall SDLC should be used for

developing the application, as the Waterfall model is easy to understand and follow and the

steps in the model are clearly defined. However, the group did not apply Waterfall straight-

away but modified the model slightly to cope with the greatest downside of the SDLC which

is inflexibility. Therefore, the group applies a hybrid model, in which, while the steps remain

the same as in the Waterfall model, feedback is added in every phase – the result of a previous

phase can be changed if it does not work well with a later phase. Moreover, in later phases

like implementation and testing, there are additionally several iterations, which are to ensure

that features are working well on their own by testing and new features do not break the

operation of existing features. To sum up, here is the shortened list of phases in our project’s

SDLC:

●

Requirements Analysis

Design

Implementation (carried out in iterations)

Testing (carried out at the same time as Implementation and also in iterations)

Deployment

It is important to have knowledge of the development lifecycle chosen in developing

this project as the report will be going through every phase.

2. Requirements Analysis

The purpose of this part is to describe the business requirement of the system

completely accurately and unambiguously. All attempts have been made in using mostly

business terminology and business language while describing the requirements on this part.

Very minimal and commonly understood technical terminology is used. Use-case diagrams

were employed to capture the functionalities which are considered in the requirements of this

website.

This project requires designing a website application which is used to help users in

online shopping. As a result, there are two main users, which are the administrator and normal

user:

● The administrator: login into this system and play an essential role:

123

- Manage products: administrator can view, add, edit and delete products.

- Manage category: administrator can view, add, edit and delete categories.

- Manage orders: administrator can view list of orders from customers.

- Manage feedback: administrator can view list of feedback from customers.

- Manage account: administrator can update profile.

● The normal user: Users can access the website, register, login, and order products.

They can also update their profile, search for products, and track their orders.

3. Design

3.1. Database Design

In Database Design, data models of the system are identified based on Entity

Relationship Diagram.

Figure 1 – ER diagram

Each table represents different task with own attributes and relationship between other

tables:

● Users table: used to store the information of customers such as: username, password,

email, phone, and address.

● Orders table: used to store information about orders of customers with 5 attributes:

ID, quantity, total price, productID and username.

● Feedback table: used to contain the feedback of customers with username, phone,

email, content.

124

● Categories table: used to store information about categories, each category may

contain many products.

● Products table: used to store information about products.

3.2. Backend Design & Class Diagram

The backend was designed based on the Model-View-Controller (MVC) pattern with a

few modifications:

● The view in MVC is removed due to the Presentation layer being responsible for

View and it is totally separated from the application layer.

● The Controller Layer is divided into Controller and Use-case Layer.

In our project, the UML Class diagram was employed in the Design phase in order for

coders to have a better view of how they will implement the system. The Class Diagram

shows how objects will be implemented as well as their relationships. According to the MVC

design pattern, UML Class Diagram will be divided into a detailed package to implement

exactly what standards were given by the requirement plan before.

Figure 2 – DrinkStore source package

125

In the DrinkStore ecommerce website, there are three main packages: DAO, Model and

Servlet (Controller) which will represent the overview of the whole project. Each package

plays different roles but has a relationship with each other. The Model Package was

developed first and used by the DAO package. Subsequently, the Servlet package was

developed using two existing packages.

●Model package

Figure 3 - Model Package

Model package stores all of the application's data. Model shown in the form of a

database or sometimes simply an ordinary XML file. Model clearly shows operations with the

database such as allowing viewing, accessing, processing data, …

● DAO Package

Figure 4 - DAO Package

126

This package is a pattern in which objects are intended to communicate with the

Data Layer. These objects are usually initialized for the purpose of

"SessionFactories". And handles all of the logic behind communicating with the

database.

● Servlet package

Figure 5 - Servlet Package

Servlet plays a role in receiving the request and returning the response to the client. In

addition, servlet will direct the request to the controller to process and return back to servlet.

3.3. Frontend Design

In this project, the frontend design uses JSP (JavaServer Pages) consisting of HTML

markup embedded with JSP tags, together with CSS for style and a small part of JavaScript

client-side script to handle UI logic.

Java Server Pages (JSP) is a server-side programming technology that enables the

creation of dynamic, platform-independent methods for building Web-based applications. JSP

has access to the entire family of Java APIs, including the JDBC API to access enterprise

databases.

For example, an administrator view is created by some JSP file including view

feedback, update product, update category, manage product, manager order, manage user,

manager category, add category, add product, account, search.

127

Figure 6 - Product Management Page of Admin

Figure 7 - Home page of DrinkStore Website

4. Implementation

The implementation was carried out according to features of the website, for example

we implement the homepage and functions register, login, logout first, then then implement

the functions on the admin side and the customer side later. Because we have lessons together

almost every day, it is very convenient for discussing, assigning tasks , supervising each

member’s work.. The contribution of group members in each implementation phase can be

seen in the following table.

5. Testing

5.1. Testing Summary

In this project, two testing techniques were employed. JUnit Testing is used to

128

automatically test for backend components whether the components can run well or not.

There is also manual testing when the group completes a certain phase to make sure that this

stage does not have any errors and works in a similar way with visualization of the developer.

Finally, manual testing is also carried out to test user interaction with the application to ensure

that the application works perfectly in a production environment.

5.2. Test Plan & Test Evaluation

The test plan is done at the same time as the execution phase to test and ensure the

correct operation is required. Software components are checked and modified during

execution. The final plan includes test cases that compare expected results and actual test

results to present, summarize and evaluate the functionality of the final product. In our team

project, this test plan is written in the Excel file which is named “Test Case” in this folder.

Each test case contains 11 features: Test Case ID, Sprint, Purpose, Preconditions,

Precondition Details, Steps, Step Details, Expected Result, Actual Result, Status and

Comment. There are 45 test cases designed with 23 test cases for administrator and 22 test

cases for normal users, and all test cases are passed.

6. Evaluation

6.1. Advantages

- First, the system's interface is very user-friendly, with detailed and genuine images,

helping to increase the reliability of customers and help customers easily visualize the product

they are looking for.

- The system shows the products of the same type on the same page, helping customers

see the products they are interested in more overall. The website also has a search bar for

customers to have more options.

- Access time to the website is relatively fast, is constantly checked and repaired.

- Function of customer interaction with admin is built (feedback).

- The system has deployed core functions for admin and customer:

●Admin : Manage product, Manage category, Manage user, Manage order, Manage

feedback, Update profile.

●Customer: Login, Logout, Register, Make order, Leave feedback, and view product

details.

- Moreover, getting a near real-time update for the database is supported in the project.

6.2. Limitations

129

- Although there is a lot of time to plan or start working, the project still lacks certain

functions such as filters and payment methods.

- Teamwork has not reached the maximum efficiency, there are times of arguments and

disagreements, but we have all overcome this and did not cause too many difficulties during

the project implementation.

6.3. Future work

- A more complex, full attribute filter is applied: popularity (new product, best

seller, ..), price (high to low or low to high). Combining many attributes together will make it

easier for customers to find products.

- Various forms of payment such as card payment, payal or something like that will be

added so that customers can make purchases more convenient.

- Update to confirm order by phone or email to customers, to prevent many different

cases occurring from customers or objective factors (weather, shipping unit ...)

The development team also considers developing the website not only in a category

called "Drink Store" but also in adding many other related areas such as furniture, decorative

tools or creating a similar app that allows users to download electricity. mobile phone, giving

them more options in their shopping.

III. Conclusion

Software engineering is increasingly developed and expanded to match with the global

development of 4.0 technology. In this paper, we have discussed creating an Ecommerce

website for selling products. This website follows the MVC Architecture which contains

Model, View, Controller (Servlet), and DAO service. DrinkStore website uses Java

programming language which is built on NetBeans desktop-based application. We use SQL

Server to store the database and Glassfish Server 4.1.1 to run the project. Project’s front-end

is built with JSP which contains HTML, CSS and Java. The resulting website - the DrinkStore

Ecommerce Website - may not be the fastest web application for development, and

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

demonstrate where good architecture is, the complete separation between front-end and back-

end service. In the future, more work will be done to ensure high efficiency, and more useful

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

130