Developing e-learning application with java web technologies

DEVELOPING E-LEARNING APPLICATION WITH JAVA WEB

TECHNOLOGIES

SVTH: Nguyễn Cô ng Quang

GVHD: TS Nguyễn Xuâ n Thắng

Tó m tắt - Bài bá o này thảo luận về sự phá t triển của Dịch vụ Web RestAPI sử dụng Spring Boot

và sự tí ch hợp của nó với ReactJs - một thư viện Javascript. Đây là một khung cô ng tá c nhẹ và mạnh

mẽ có cá c cô ng cụ và giao diện được xác định rõ ràng để cá c nhà phá t triển triển khai ứng dụng. Để

trì nh bày, chúng tô i sử dụng khuô n khổ để triển khai ứng dụng E-Learning dựa trên web.

Abstract - This paper discusses the development of A RestAPI Web Service using Spring Boot

and its integration with ReactJs - a Javascript library. This is a powerful and lightweight framework that

has well-defined tools and interfaces for developers to implement the application. For representation,

we use the framework to implement a web-based E-Learning application.

Keyword: Java Web, Spring Boot, ReactJS, E-Learning platform

1. INTRODUCTION

Along with the number of programming languages and rapid web application

technologies that are growing rapidly, Java is well known for “write once run anywhere” still

is one of the most used programming languages nowadays and this language also has a large

ecosystem with a bunch of frameworks for the different purposes.

Spring is the most popular framework for building web applications and is widely used

over the world. This is a powerful and lightweight framework that has well-defined tools and

interfaces for developers to implement the application. The main drawback of Spring

framework is the complexity of configuration and sometimes it is painful for developers to set

up a Spring application. This concern has vanished because of the appearance of Spring Boot

which has provided auto-configuration options to run the application. Hence, developers

focus on building the logic of the application and reduces a lot of time for setting up and

identifying dependencies and required libraries to run the project.

REST stands for Representational State Transfer and is restful means it must follow

some predefined guidelines and constraints. REST API acts as a bridge between the consumer

and the producer, it allows requesting the systems (the producer) to access and modify the

resource by using a set of rules. Hence a client can serve web service by calling HTTP calls. It

is convenient and straightforward to build a REST API using Spring Boot because this

framework has a lot of features and minimizes the effort for developers when developing a

web service that follows REST architectural style.

We are all witness that Javascript and its frameworks are the first choices for building

front-end applications because Javascript is the only programming language that runs in the

343

web browser. Nowadays modern web application is migrating from multiple-page application

to single-page application cause with previous technologies users must travel to many pages

and the content of the application is required to reload many times whenever the contents are

changed. In contrast, users do not need to navigate through many pages and the web

application is no longer needs to be reloaded when the content is changed or some user’s

action is fired off(submit the form or mouse events) when it comes to a single-page web

application. Javascript and React make developing single page application with minimum

fuss, furthermore in combination with Redux - a Javascript library assists developers in

managing the state of the application. The main advantage of using React and Redux is the

displayed information/contents will be changed based on the states or user’s action without

reloading the entire page.

This paper presents the integration of these two popular frameworks Spring Boot and

React. As a result, A Restful API is built to exchange data between the client and the data

access layer.

2. MAIN CONTENT

2.1. Java Spring

The Spring Framework is a Java platform application framework and inversion of

control holders. While the framework's core features can be used by any Java application,

there are extensions for developing web applications on top of the Java EE (Enterprise

Version) platform. Althoughthe system does not require any specific programming model, it

has become popular as an addition to the Enterprise JavaBeans (EJB) model. The Spring

Framework is open source. Core concepts of Java Spring frameworks are listed below.

• Inversion of Control (IoC)

• Dependency Injection (DI)

• Aspect Oriented Programming (AOP)

• Java persistence API (JPA)

The IoC (dependency injection) container, which offers a clear way of configuring and

handling Java objects using reflection, is at the heart of the Spring Framework. The container

is in charge of handling the object life cycles of individual objects, including designing them,

calling their initialization methods, and wiring them together. In conclusion, Ioc is a design

pattern and Dependency Injection(DI) is a way to follow Inversion of Control. The AOP is

based on the conception(Object Oriented Programming Concept) that moves forward both

modularity and the structure of code. The JPA is responsible for mapping object states (Java

objects) into database tables and columns and providing a set of tools that help show the

relationship between objects and query data.

344

Figure 1: The Spring Framework architecture

2.2. Spring Boot

Spring Boot is an open-source micro-framework maintained by a company called

Pivotal. It provides Java developers with a platform to get started with an auto configurable

production-grade Spring application. With it, developers can get started quickly without

losing time on preparing and configuring their Spring application. Most key features of

Spring Boot are:

•

Automatic configuration - configure applications as standard Spring applications

Starter dependences - integrate required dependencies automatically

The command-line-interpreter - enables application control via console

The actuator - show information about events in the application.

Firstly, the level of configuration sophistication in any Spring-based program is a

challenge. Spring Boot simplifies the development and deployment of stand-alone,

production-grade Spring applications with minimal Spring configuration. For instance, when

using the Spring Model-View-Controller (MVC) framework, we must configure the

345

dispatcher servlet, web jars, a view resolver, and component scan, among other things. To

address this, Spring Boot offers several Auto-Configuration options for configuring the

application with any necessary dependencies.

Secondly, identifying the system dependencies and related library versions needed to

build a web application is another challenge. In comparison to CRUD web applications,

Spring Boot simplifies dependency management by combining a comprehensive but versatile

system and associated libraries into a single dependency that contains all of the Spring-related

technology you'll need for starter projects. This architecture includes many extra features that

are common to many projects, including an embedded server and security.

Moreover, web applications are typically packed as war files and deployed to a web

server, but Spring Boot applications may be packaged as war or jar files, allowing the

program to be run without the need to install and/or configure the application server.

2.3. Application architecture

2.3.1. Client-Server Architecture using Servlet and JSP

Traditionally, a web application has been built upon Client-Server architecture, in

which a client makes requests to the server, and in the server, everything else is done, from

getting data to creating HTML content to serve the client. That means, all necessary codes for

managing data and serving markup content must be located within one server only, which

makes the server itself hard to maintain, and should there be bugs in the system, it would take

a long time to find and resolve the bug.

As mentioned above, a servlet listens for incoming requests from the client and redirects

to JSP (Java Server Page) pages. JSP is a server-side rendering that allows embedding Java

code into an HTML page. After successfully redirects to JSP pages, data will be added and

the output, which is HTML is sent back to the client(browser). To get a different page, it must

ask for servlet again to process data, which will be resulting in another HTML page. Those

are two main drawbacks of this approach, using a two-tier architecture with JSP and Servlet.

In this approach, there is also the Application server which gets the data from the database

and creates HTML(JSP pages)content. While this approach is still relatively popular, it is by

no means the optimal approach for building modern web applications because nowadays

demanding a single-page application and easy to scale up when required. If a web application

needs a new look, it may be hard for developers to change only the view layer of the system

because both layers are developed by Java technologies.

To solve this problem and adapt to a highly scalable enterprise web application, Three-

Tier Architecture was born.

346

2.3.2. Three-Tier Architecture

In this architecture, there are three separate tiers: Presentation tier, Application tier, and

Data tier. It can be seen that the Presentation server has been separated from the Application

server. Therefore, it is easier to manage source code for the HTML generation node, and also

codes for the Application tier are cleaner since it does not have to take care of HTML

generation. The number of tiers is not limited to 2 or 3; there are n-tier architectures available.

However, it is not much more beneficial than using Three-Tier architecture.

Figure 2: How the tiers of Three-Tier Architecture works

The way Three-Tier Architecture works is not much different from that of Client-server

and Two-Tier architectures. The client sends the request to the server, then the Presentation

tier generates HTML markup as the User Interface to the user. Afterward, whenever a client

makes any interaction with the User Interface that needs data, the Presentation tier sends a

request to the Application server to fetch the data, then the Application server takes the data

from the database and prepares it in the most usable form that the Presentation tier demands.

Finally, the Presentation tier generates appropriate HTML content to be displayed on the

client’s browser.

2.4. E-learning application

From the year 2020 until now, Covid-19 has changed the lives of every person in the

world, making the world and our lives change significantly. Especially for us as students, our

traditional methods of studying and examination have been shifted to virtual ones, and this

has affected us, students, in a bad way. Realizing this, we have come up with the idea of

designing a website that can assist students in their online learning by purchasing online

courses taught by excellent students to keep learning not to interrupt. Students can learn to

maintain, consolidate, and improve their knowledge. Besides that, user log in as guest can

also see which course appear in the website, however, if they are interested in learning or just

looking inside the online course, they will have to pay for it.

347

Figure 3: Home Screen of the E-Learning application

2.5. Requirement analysis

2.5.1. Functional requirements

Functional requirements describe the specifications of the application or, in other

words, what the application can do. Firstly, as mentioned on this website, you will be able to

buy courses taught by good students by recording videos and then assembling them in a

course, through those students can easily select and find the right course for themselves. Not

only that, these courses will be integrated with a payment gateway so that students can easily

pay online fees most conveniently. The second is equally important that the administrator can

add and delete courses, can distinguish between admin, normal user, and visitors. A special

feature here is that the administrators have been assigned to the default accounts, so they will

not be able to grant administrator rights to other accounts, avoiding the case of malicious

users trying to destroy the webpage. Last but not least, it is the product evaluation function.

Initially, when we created this website, we intended to build a website that could help

students improve their learning, provide knowledge, and fees were what we considered last

and was also difficult because we don’t know this form of tuition fees will interest users or

not. At last, we noticed, this thing is indispensable because it is the effort of everyone who

has spent a lot of time and brainpower to create these online courses so that every person's

rating will be essential for us to improve the product, make it better, and help future buyers.

2.5.2. Non-functional requirements

Non-functional requirements refer to the criterion that can be used to evaluate the

operation of the application or, in other words, the properties of the application. Firstly, is the

front-end and the back-end run independently of each other. This separation makes the

website easier to maintain and more stable, and in the future, it can be developed on many

348

different platforms (e.g., mobile). Secondly, this website will have an easy-to-use,

minimalistic and user-friendly interface. The reason for this design is simply because we

understand who we are targeting, then we evaluate what an interface is reasonable and then

we get the results. a minimalistic and easy-to-use interface is the best fit. In the end, what we

bring, and maybe the very important thing on our website is downtime. The Downtime here is

that we will always make sure the website is always stable so that everyone can learn without

interruption and the lowest downtime possible. This will be very important if a new website

like us, with a minimum number of users, cannot guarantee this will surely get negative

reviews on the quality of the website before receiving any assess the quality of online courses.

2.6. Application Design

From the requirements, the development team has listed use cases for the system.

Admin:

• Add/edit/delete courses

User (logged in):

• Add/remove courses from cart

• Pay for the course. When making a payment, you need to fill in personal information

(full name, phone number, home address) and billing information (account number)

• View course information:

oWithout purchasing a course, users can only view course information and section

names. If you haven't purchased the course but intentionally use the link to download the

course material, you will be blocked and the message "You need to buy this course to unlock

this material!"

oOnce the course has been purchased, the user can view the full course material

grouped by section. At this point, users can completely download learning materials without

getting the error message above

• View a list of purchased courses

User (Not logged in):

• View information of all courses, of each course like a person who has not purchased

the course

• Log in or register an account

API design:

349

The application programming interface follows RESTful API design. Firstly

development team defined resources for the system: courses, users, orders are three main

resources. Then, based on RESTful API rules, we defined the appropriate HTTP method for

resources. Here are several examples of our API.

• GET /api/courses: return all courses from databases.

• POST /api/courses: create a new course.

• GET /api/courses/:id: get a course by id.

• PUT /api/courses/:id: update a course by id.

• DELETE /api/courses/:id: delete a course by id.

• POST /api/orders: make an order.

• GET /api/orders/:id: Get order by id.

2.7. Application Implementation

2.7.1. API implementation

As discussed above, DispatcherServlet plays an important role in mapping requests and

find the correct controller for handling. In our application, we omitted the views so there is

only data is sent back when users making requests, later the development team used a front-

end framework(React) to serve those data. Hence, DispatcherServlet bypasses the view

resolvers and returns the data right in the HTTP response body. In Spring Boot we can simply

map the requests and return data by using two annotations @RequestMapping and

@RestController respectively.

350

Figure 4: Example of Course Controller

Figure 5: Example of one endpoint

2.7.2. 5. Serving the API

The front-end uses Javascript with React and Redux to serve RestAPI which is built in

Spring Boot. The client has responsibility for calling Web Service and rendering data that is

returned from RestAPI. The views are divided into small components thanks to React.

Figure 6: Example Course Component

The main idea of React is components and each component has its state and it will be

changed if there any data is passed into it. With Redux, developers have great tools for

351

manage state. State management is essentially a way to facilitate communication and sharing

of data across components. The way Redux works is simple. There is a central store that holds

the entire state of the application. There are three building parts: actions, store, and reducers:

•

Actions: Simply say, actions are events. You can only send data to Redux store

through actions: The data can be from user interactions, API calls, or even form

submissions. An action must contains : type(action name) and payload(data to be

sent).

•

Reducers: Reducers functions that take the current state of an application, based

on the action, it returns a new state.

Store: The store holds the application state.

2.6. Work result

Figure 7: Course details screen

352

Figure 8: Order Screen

Figure 9: Payment Screen

353

Figure 10: Learning Screen

3. Conclusion

Java remains cutting-edge technology for building web applications but using old

technology like Servlet and JSP has some limitations. By applying three-tier architecture and

Javascript with some front-end frameworks will solve this problem and make the application

is more reusable, more scalable, and easier to maintain.

REFERENCES

1. Do Hai Binh, Nguyen Cong Quang, Quan Trong Tu, Truong Ngoc Quynh (2020). Applying

Three-tier Architecture to Develop Java Web Application for Tracking Coronavirus, in

Proceeding of Student Conference on Information & Communication Technology 2020,

Faculty of Information Technology, Hanoi University.

2. Spring.io. (2021, April 10). https://spring.io

3. Blog.logrocket.com: Why use Redux? A tutorial with examples. (2021, May 01).

https://blog.logrocket.com

354