Tuan Nguyen

E-COMMERCE WEB SHOP

VAASAN AMMATTIKORKEAKOULU
UNIVERSITY OF APPLIED SCIENCES
Information Technology

ABSTRACT

Author Tuan Nguyen

Title E-Commerce WebShop
Year 2021
Language English
Pages 75
Name of Supervisor Anna-Kaisa Saari

The research background related to the advantages of digitalization and E-com-

merce supplying to end customers in the integration of technology era.

The theorical review introduces the concept of e-commerce, introducing Spring, its
outstanding features and advantages in creating applications that require modulari-
zation and high reusability. At the same time, some technologies such as MySQL,
Spring Boot, ReactJS, Bootstrap are currently being used by software companies
to create an enterprise web application with Spring Framework.

After studying, the results will be applied to build an application for the purpose of
illustrating the presented theory. A web-based commerce management application
will be built. The application will be designed into two main modules, the client
module and the server module. In this thesis, the concentration will emphasize the
design and construction of the client module.

By implementing and testing the web-based, the research study will provide the
understanding how the communication mechanism between client and server in
modern RESTful service-oriented web model works and how to communication
between components of a system.

Keywords E-commerce web-based, technology and architecture

2
CONTENTS

ABSTRACT
1 INTRODUCTION ............................................................................................ 6
1.1 Research Background ............................................................................... 6
1.2 E-Commerce ............................................................................................. 6
1.2.1 Four Types of E-commerce ........................................................... 7
1.2.2 Advantages of E-commerce Website ............................................ 8
1.2.3 Drawbacks of E-commerce Website ............................................. 9
1.3 PayPal ....................................................................................................... 9
2 REQUIREMENTS ......................................................................................... 10
2.1 Requirements for end-user perspective are the following: ..................... 10
2.2 Requirements for admin perspective are the following: ......................... 10
3 USED TECHNOLOGY ................................................................................. 12
3.1 Front-end Side:........................................................................................ 12
3.1.1 HTML5 ....................................................................................... 12
3.1.2 Creating Responsive User Interface with Bootstrap ................... 12
3.1.3 JavaScript/ES6 ............................................................................ 13
3.1.4 ReactJs Framework ..................................................................... 13
3.2 Back-end side .......................................................................................... 14
3.2.1 Spring Framework and Spring Boot ........................................... 15
3.2.2 RESTful API ............................................................................... 16
3.2.3 MySQL ........................................................................................ 17
3.2.4 NGINX ........................................................................................ 18
4 SYSTEM ARCHITECTURE MODEL .......................................................... 20
4.1 Back-end Side ......................................................................................... 20
4.2 Front-end Side ......................................................................................... 20
4.3 Data Flow Model of the Web Page ......................................................... 23
5 DESIGN ......................................................................................................... 25
5.1 Class Diagram ......................................................................................... 25
5.2 Sequence Diagram .................................................................................. 26
5.2.1 Login ........................................................................................... 26
5.2.2 Logout ......................................................................................... 27

3
 5.2.3 Changing Password ..................................................................... 28
5.2.4 Add Product ................................................................................ 28
5.2.5 Update Product ............................................................................ 29
5.2.6 Add Categories ............................................................................ 30
5.2.7 Update Categories ....................................................................... 30
5.2.8 Add User ..................................................................................... 31
5.2.9 Assign Role. ................................................................................ 32
5.2.10 Chat Room .................................................................................. 32
5.2.11 Order ........................................................................................... 33
6 MODEL .......................................................................................................... 34
6.1 Functional Hierarchy Chart..................................................................... 34
6.2 Use Case Diagram................................................................................... 34
6.3 Use Case Specification ........................................................................... 35
6.3.1 Login Use Case Specification ..................................................... 35
6.3.2 Logout Use Case Specification ................................................... 36
6.3.3 Changing Password Use Case Specification ............................... 37
6.3.4 Product Management Use Case Specification ............................ 37
6.3.5 Categories Management Use Case Specification ........................ 40
6.3.6 User Management Use Case Specification ................................. 42
7 DESIGN THE MOCKUP............................................................................... 45
7.1 List of Pages ............................................................................................ 45
7.2 Detailed Description of Pages ................................................................. 46
7.2.1 Login ........................................................................................... 46
7.2.2 Admin Page ................................................................................. 47
7.2.3 Register Page ............................................................................... 47
7.2.4 Add/ Update Product Page .......................................................... 48
7.2.5 Categories Admin Page ............................................................... 49
7.2.6 Staff Page .................................................................................... 49
7.2.7 Room Page .................................................................................. 50
7.2.8 Categories List Page .................................................................... 51
7.2.9 Best Deal Page ............................................................................ 52
7.2.10 Change Password Page ............................................................... 52

4
 7.2.11 Checkout Page ............................................................................. 53
7.2.12 Compare Page ............................................................................. 55
7.2.13 Wish Page.................................................................................... 56
7.2.14 Message Form ............................................................................. 56
8 IMPLEMENTATION .................................................................................... 57
8.1 Deployment ............................................................................................. 57
8.1.1 Back-end and Front-end Side. ..................................................... 57
8.2 Implementation ....................................................................................... 58
9 TESTING ....................................................................................................... 69
10 CONCLUSION .............................................................................................. 73
11 REFERENCES ............................................................................................... 74

5
1 INTRODUCTION

1.1 Research Background

Nowadays, the world of e-commerce is developing very strongly. Digitalization helps

people to save more costs transported through intermediaries, transaction costs and it
significantly helps to save time to invest in other activities. Moreover, e-commerce also
allows people to search for many different purposes, provide information according to
human needs and preferences. Customers can sit at home and buy everything they want
using online sales websites. Open-source technologies are very important in building
sales websites efficiently with low costs. Usually open-source technologies are so
widely used that there is excellent support available on the Internet. The provided sup-
port enables building user-friendly sales websites quickly. Therefore, the topic: “Build-
ing an E-commerce Website” was selected for this thesis. An e-commerce website is a
simple but powerful enough system which allows rapid construction of sales applica-
tions on the Internet.

1.2 E-Commerce

Over the past decade, consumers have continuously changed the way they want to
shop, especially in terms of shopping behavior on e-commerce channels and websites,
forcing businesses to find ways to adapt to this trend. With the support of newest tech-
nology, it is easier for consumers to find, compare and purchase from online websites,
e-commerce markets, mobile applications, and physical stores and social sites, rather
than following traditional commercial models.

According to research by Get App (Factory 2021), the leading review software in the
world, they have given the following Figures about consumer needs and habits of cus-
tomers:

- Customers like to research and buy products online with 53.1%.

- Customers prefer to research online and buy offline with 28.9%.

6
 - Only 18% of customers say they prefer to going to stores.

Figure 1. E-commerce Research (Factory 2021).

1.2.1 Four Types of E-commerce

B2C: BUSINESS TO CONSUMERS

B2C e-commerce includes transactions made between businesses and consumers. This
is one of the most widely used sales models in the e-commerce landscape. For example,
when customers buy shoes online from the manufacturer Nike, this is a business-to-con-
sumer transaction.

B2B: BUSINESS TO BUSINESS

B2B e-commerce involves commercial activities carried out between businesses, such
as between manufacturers and dealers or retailers. Typically, business-to-business sales
will often focus on raw materials, or packaged products.

C2C: CONSUMER TO CONSUMER

One of the earliest established e-commerce business models is the C2C e-commerce
business model (The-Future-Of Customer Engagement and Experience 2021; Bloom-
idea, 2021). This includes customer-to-customer relationships, for example on Shopee,
Amazon, and Lazada, Alibaba.

C2B: CONSUMER TO ENTERPRISE

C2B is a business model that reverses the traditional e-commerce model. C2B means
the individual consumer produces the product or service, the business will be the one

7
who buys it.(The-Future-Of Customer Engagement and Experience 2021; Bloomidea,
2021).

1.2.2 Advantages of E-commerce Website

• Increased profits

E-commerce websites biggest advantage is that E-commerce is not limited in time and
space like a traditional form of sales. Via e-commerce websites businesses can actively
look for customers to their products and services. In addition, in order to increase prof-
its, businesses must provide products with guaranteed quality, in accordance with the
needs of users, reasonable prices with enthusiastic support.

• Cost savings

Cost savings are the benefits that attract many businesses to invest in owning an e-com-
merce website. Because businesses do not need to spend a large amount of money to
hire and train staff but it still gets high profits if they know how to combine with some
online marketing strategies.

• Increased interactivity with customers

When customers visit an e-commerce website, it is easier for them to update prices,
product information and services. Besides, any time the customer needs advice, the cus-
tomer care team will give advice on time, customer does not have to wait for support.
This will show the respect, professionalism and reputation of the company in the heart
of customers, helping to increase interaction with customers.

• Improved competitiveness with competitors

The competition in the technology sales market is getting fiercer. If businesses know
how to take advantage of an own e-commerce websites with a unique and easy-to-see
interface, it will help to earn money and to attract more customers.

• Brand promotion

8
In the digital age, customers can use social media, so it will be very convenient to pro-
mote the brand in the international market. Therefore, the design of an e-commerce
websites will help businesses easily reach potential customers more quickly and effec-
tively (The-Future-Of Customer Engagement and Experience 2021).

1.2.3 Drawbacks of E-commerce Website

Sometimes E-commerce cannot create a relationship between brands and buyers like
physical stores. This lack of communication can be a disadvantage for many types of
services and products, such as interior design or jewelry business. Also, from the secu-
rity point of view, there have been many attacks of security breach in the world. Cus-
tomer or credit information and identities can be stolen, . (The-Future-Of Customer En-
gagement and Experience 2021).

1.3 PayPal

PayPal is understood to be an intermediary service used to make international payments

and money transfers over the Internet. With PayPal, customers can pay when they shop
online.

PayPal can be seen as an electronic wallet or similar to Internet Banking of banks: cus-
tomers can transfer, withdraw to another PayPal account, pay for online purchases if the
place of sale supports PayPal, or receive international payment.

PayPal was founded in 1998, is headquartered in San Jose, California, USA. PayPal was
founded by Peter Thiel. PayPal works on e-commerce via the Internet, and it charges fees
when money is transfer or withdraw. (Henderson, R.2021).

9
2 REQUIREMENTS

Requirements for an e-commerce website to meet the needs of customers in terms of

support as well as ensure the basic criteria of buying and selling products on an e-com-
merce site. The requirements of this website are presents next.

2.1 Requirements for end-user perspective are the following:

- Product information :
o Product is always updated, introducing the latest generation.
o Information about a product must be detailed so that customers can
grasp information about the product they choose. Especially the
items that many customers are interested in.
o Allows customers to search quickly and accurately according to
many criteria.
- The interface is easy to use and highly aesthetically pleasing.
- Allow customers to register for membership and ensure confidentiality of
information
- View and change account information.
- Payment methods must be accurate.

2.2 Requirements for admin perspective are the following:

- General management: related information of employees, customers,

items.
- Updating items information online.
- Easily update and regularly change pictures, details, prices of the items for
sale regularly changed.
- Manage online orders.
- Admin page store activities associated with customers of the store. All the
activities related to customers and customers can be done remotely, re-
gardless of geographical location.
- Statistics of which items are sold out.

10
- Synthesizing storing feedback from customers so that customers can re-
spond to customers quickly and accurately.
- Products: Can add, edit and delete information, categories
- Receive and respond to customer requests.

11
3 USED TECHNOLOGY

3.1 Front-end Side:

The front end (also known as the client-side) is all about what a user sees when visit a
website, including design and languages like HTML or CSS.

3.1.1 HTML5

HTML (Hypertext Markup Language) is a platform similar to Microsoft Word that

helps users to design websites elements, structure pages, categories or design applica-
tions. The main function of HTML platform is to create websites layout and format (Tu-
torialspoint 2021).

3.1.2 Creating Responsive User Interface with Bootstrap

Bootstrap is the front-end framework, which is a free collection of tools for creating
websites and web applications. Bootstrap includes HTML and CSS based design tem-
plates for typography, forms, buttons, and other interface elements, as well as extended
JavaScript options (W3Schools 2021).

Bootstrap defines CSS classes available to help websites designers to save a lot of time.
Bootstrap libraries have code ready to apply to websites without having to spend too
much time writing it ourselves. With Bootstrap, developing websites interfaces to fit
multiple devices becomes easier than ever. Bootstrap is the trend of developing websites
interface which is very popular today. The websites is self-scalable to be compatible
with all devices, from mobile phones to tablets, laptops, desktops. Another aspect is that
responsive web design makes the websites a great experience for users across different
screen sizes and devices (W3Schools 2021).

Responsive web design is very important since the devices and screen sizes that will be
used to access websites cannot be predicted. A page that can perform well regardless of
variation will provide a better and more consistent user experience than a page designed
for a particular type of device and screen size (W3Schools 2021).

12
3.1.3 JavaScript/ES6

JavaScript is a programming language with the ability to bring life to websites design.
The JavaScript scripting language is based on a built-in development object, or self-de-
fined. JavaScript is the convenient and efficient because it is a dynamic programming
language. Besides, JavaScript works based on HTML and CSS to a create dynamic con-
tent on the website. Moreover, JavaScript is mainly used in client-side programming
without installing environment settings whereas with Java or Python environment set-
tings would have to be installed. Therefore, JavaScript programming language is trusted
more and more and widely applied on effective websites (Developer Mozilla 2021).

The use of the JavaScript language can be applied to all different browsers, now com-
monly used as Chrome, or Firefox. Moreover, JavaScript is also an effective program-
ming language, fully supported on mobile device browsers. Therefore, the use is diver-
sified and can well meet many different needs and requirements of users (Developer
Mozilla 2021).

JavaScript is simple, easy to learn and use. With the syntax quite similar to English, the
use of JavaScript becomes much easier and more accessible. Through the used DOM
model, it provides many useful features, which are pre-written to better respond to dif-
ferent needs and requirements of the user. With many useful features that the JavaScript
programming language brings, it becomes easier to be able to develop scripts to solve
certain requirements or purposes (Developer Mozilla 2021).

3.1.4 ReactJs Framework

ReactJS is a library which contains a lot of open source JavaScript and it is maintained
by Facebook and a community of individual developers and companies. The purpose of
ReactJS was to create compelling websites applications with high speed and efficiency
with minimal coding. The key purpose of ReactJS is that every website, when using Re-
actJS, has to run smoothly, fast and is highly scalable and simple to implement.

In general, ReactJS allows functional developers to separate the user interface from a
complex way and turn it into simpler parts which means that rendering data is not only
done at a server location but also at the client using ReactJS.

13
The basic components of React are called components. The React components are eas-
ier to write because using JSX, JavaScript's optional syntax extension. JSX allows
HTML to be combined with JavaScript. JSX is a blend of JavaScript and HTML. Re-
actJS clarifies the whole process of writing websites structure. In addition, the extension
also makes rendering more options easier. JSX may not be the most popular syntax ex-
tension, ReactJS can be effective for developing special components or high- volume
applications (Facebook Inc 2021).

Redux Thunk

Redux is a library that acts as a container of states and helps manage application data
flow. Redux was introduced back in 2005 at the React Europe conference.

Redux Thunk is a middleware that allows a user to write Actions that return a function
instead of a plain JavaScript object by delaying the action to be sent to a reducer. Redux
Thunk is used to handle complex asynchronous logic that requires access to the Store or
simply retrieving data like an Ajax request.

In Redux, actions can also be sent from other parts of the system. This action is sent di-
rectly to a Store. This is the biggest difference between Redux and Flux. The logic that
determines how directly the data changes in functions is called Reducers. When the
Store receives an Action, it asks the Reducers the latest State information to be updated
by sending the current state and Action information. Reducers need to return a new
State with the format Immutable. The Store will perform its internal State update. The
last step, React Component will do the render again (Reduxjs 2021).

3.2 Back-end side

Backend programming is the handling of all complex business, hidden behind a website,
application, system to help the system operate smoothly. The backend usually consists of
three parts: the server, the application, and the database. Any product has two places
where the code works to make things run smoothly: the client side and the server side.

14
3.2.1 Spring Framework and Spring Boot

Spring is a framework that was created to help developers build systems and run appli-
cations on the JVM conveniently, simply and quickly. Spring Framework is open source
developed and used widely in developing websites. Spring framework is a collection of
many different small projects, such as Spring MVC (used to build web-based applica-
tions), Spring Data and Spring Boot.

Spring Boot is the fastest way to create a standalone REST service. Spring Boot simpli-
fies configuration, in particular, Spring Boot configures all by itself by providing spe-
cific behaviors. Spring Boot simplifies deploying, packing application into a jar package
and it can be easily integrated into web containers. Earlier the initialization of a Spring
project was hard when dependencies needed to be declared in pom.xml file using XML
or other complex annotations. With Spring Boot Spring application creation is quick
and the configuration is also simpler.

The benefits of Spring Boot are:

• Easy to create Spring-based applications with Java or Groovy.

• Spring Boot does not write a huge of standard Code, Annotations, and
XML configuration.
• With Spring Boot it is simple to communicate applications with Spring
ecosystems, for example, Spring JDBC, Spring ORM, Spring Data,
Spring Security and so forth
• Spring Boot gives Embedded HTTP like Tomcat to create and test web
applications rapidly and without any problem.
• Spring Boot gives a CLI (Command Line Interface) device to create and
test Spring Boot (Java or Groovy) applications from order brief effec-
tively and rapidly.
• Spring Boot gives a great deal of modules to create and test Spring Boot
applications rapidly utilizing build instruments like Maven.
• Based on Annotations to make beans rather than XML.
• Tomcat can be installed in the JAR fabricate record and can be run any-
place java environment(Spring Boot. 2021)

15
3.2.2 RESTful API

RESTful API is a standard used in designing API for web applications (designing Web
services) to facilitate the management of resources. RESTful focuses on system re-
sources, such as text files, images, audio, video or dynamic data, including resource
states which are formatted and transmitted over HTTP. Figure 2 below shows the REST
API (Maxoffsky 2021).

Figure 2. Rest API (Maxoffsky 2021).

APIs are methods and protocols to connect with other libraries and applications. API
stands for Application Programming Interface. Moreover, the API provides the ability
to provide access to a set of frequently used functions and exchange data between appli-
cations. The API can return the data for application in common data types such as JSON
or XML.

REST (Representational State Transfer) is a standard of web service. RESTful can use
JSON, XML, plain text, html as the structure of the returned data, with clear convention
on how to write a URL and HTTP method. But RESTful does not provide information
protection mechanism in endpoints like SOAP, instead it uses Json Web Token in com-
bination with RESTful to solve the problem. Besides, REST sends an HTTP request like
GET, POST, DELETE to a URL to process the data. RESTful does not specify applica-
tion code logic and is not limited to an application programming language. Any lan-
guage or structure can be utilized to plan a RESTful API. Figure 3 below shows the
flowing of REST API (Tram 2021).

16
 Figure 3. Flowing of REST API (Tram.2021).

3.2.3 MySQL

MySQL is an open source database management system (referred to as RDBMS) that

operates in a client-server model. RDBMS stands for Relational Database Management
System. MySQL is combined with Apache or Php MySQL. MySQL manages data
through databases. Each database can have many relational tables containing data.
MySQL also has the same access and code as the SQL language.

As shown in Figure 5, How MySQL running.

- MySQL creates tables to store data, and also defines the relationships
between those tables.
- Client sends SQL requests with a special command on MySQL.
- The application on the server receives and responds to the information
and returns the results to the client (Herawan Dwika, P.2021).

Figure 4. MySQL Flowing (Elated, 2021).

17
Benefits of MySQL:

- Ease of Use: MySQL is simple, easy to use. In addition, this software

can operate on many operating systems to provide many powerful utility
functions.
- High security: MySQL has a lot of security features, including high-level
security types.
- Multi-function: MySQL provides many features that any relational data-
base management system should expect.
- Powerful and easily scalable: MySQL is capable of handling large
amounts of data. Besides, users can expand it if the need arises.
- Fast: MySQL is faster than other software thanks to built-in standards.
- Data recovery possible: MySQL allows users to recover data from the ef-
fects of crashes.

Drawbacks of MySQL:

- Restricted: MySQL is limited to a few features that applications may

need
- Reliability is not too high: Compared with other relational database man-
agement systems, the reliability of MySQL is not too high.
- Limited capacity: The more records in MySQL, the more difficult it be-
comes to retrieve data due to capacity limitation (Blue Clawdb, 2021).

3.2.4 NGINX

NGINX is a powerful open source web server. NGINX uses a single threaded, event-
driven architecture, so it is more efficient than the Apache server. NGINX can also do
other important things, such as load balancing and HTTP caching. NGINX can also be
used as a reverse proxy. Moreover, Nginx can be deployed to serve dynamic HTTP con-
tent on the network using FastCGI, SCGI for scripting, WSGI application server or
Phusion Passenger module and it can act as a part load balancer. NGINX uses an asyn-

18
chronous event-driven approach, rather than threads to handle requests. Nginx's modu-
lar event-driven architecture can provide more predictable performance under high load.
Nginx's default configuration file is nginx.conf (F5 2021).

19
4 SYSTEM ARCHITECTURE MODEL

4.1 Back-end Side

The Three Tier Architecture model is very popular in Spring Boot. The presentation
layer is the communication layer with the end user. All data sent from the server to the
client parallelly here only checks the correctness of the data. In REST, three tier has the
HTTP Method like GET, POST, PUT, DELETE with the purpose of getting data, add-
ing data, updating data, deleting. The Controller contains all the logic of the program.
Moreover, the Data access layer interacts with the database, returning the results to the
business logic layer (Controller). Specifically, the project is divided into 3 floors (tier or
layer) as shown in Figure 5 (Yaghini 2021).

Figure 5. Three Tier Architecture.

4.2 Front-end Side

React is a JavaScript library. React has no constraints in the project directory layout and
structure. React gives the freedom to refer to different methods and to apply appropri-
ate. Figure 6 illustrates the structure of ReactJS used in the thesis.

20
 Figure 6. ReactJS Structure.

The operating principle of Redux is illustrated in Figure 7,

Figure 7. Redux Architecture (Reduxjs 2021).

Figure 8 shows the Action file: the action sends information from the application to the
Store, describing what jobs will be done with this store. This information is an object
describing what happened. The action consists of two parts, the type which describes
the action and the value of the parameter passed.

21
 Figure 8. Action File.

Figure 9 shows the Reducer file: Action describes what happened but does not specify
which part of the response state has changed and how this will be done by the Reducer.
The Reducer takes two parameters: the old state and action information is sent.

Figure 9. Reducer File.

22
Figure 10 shows that the store is an object that stores all state of the application, access
state via getState (), update state via dispatch (action). The store contains a dispatcher
which is responsible for implementing actions inside the reducer; the reducer is respon-
sible for handling incoming actions. When an action is executed, the dispatcher is im-
plemented and sends an action to the reducer. The reducer now takes action based on
the action sent. At the same time, the value of the new state is saved in the store and that
new state returned. The dispatcher is the middleware manager, usually used to call
APIs, logs.

Figure 10. Store.

4.3 Data Flow Model of the Web Page

The data flow model of the web site is shown in Figure 11. First the user will go to
View to view and interact on the page. When the user starts to load data, for example,
by clicking the Reload button, a request from View is sent to the Controller. The Con-
troller receives the request and begins to ask service (in the code is called the method of
Service). The Service receives the request from the Controller, for a simple code that
can be calculated and returned. But for operations that need to touch the database, the
Service must call the Repository to get data in the database. The Repository receives a
request from the Service, will manipulate DB. The data retrieved from the database is
mapped by the Object Relational Mapping system (like JPA or Hibernate) into objects
(in Java). These objects are called Entities.

The Service receives Entities returned by the Repository. The transformation here is
able to perform calculations, add or remove fields, and finally return Entity via the
Model. The Model will be returned to the Controller. The Controller receives the Model

23
and returns to the View. There are two ways, one is to use the template engine to pass
Model data into the HTML page, and then return the HTML department (already with
the data) to the client.

Figure 11. Data flow model.

24
5 DESIGN

5.1 Class Diagram

Figure 12 shows the class diagram of the application.

Users: The user table is responsible for containing the necessary information when start-
ing to register a member of a website. The fields in the user table are suitable for each
user's role.

Roles: The roles table is used to store role information and the roles table has a rela-
tionship with the users table to determine which role each user belongs to.

Order: The order table is used to store order information, including shipping infor-
mation fields, such as name, address, and phone number when a user starts an order
from the website.

Products: The products table is used to store information of a product including fields
such as name, price, and quantity. The field information in the product table is relevant
for the different product categories.

Rating: The rating table is used to contain user rating information about the product.

Categories: The product category table is used to contain product type information in-
cluding field name and category type codes. All category type codes are unique.

Store: The store table is used to store all store information for each branch.

Brands: The product brand table is used to contain manufacturer information and all
manufacturer-related information such as image and the manufacturer's name.

25
 Figure 12. Class Diagram.

5.2 Sequence Diagram

5.2.1 Login

The sequence diagram in Figure 13 shows sequences in login-functionality. First of all,

the user will enter the email and password, and then click on the login button. The system
will check that the email and password in the database are correct. If the login is not

26
successful, the user will need to log in again. In case the user logs in successfully, the
system grants permissions to access the feature of the website, the user can use the func-
tions in the website.

Figure 13. Login.

5.2.2 Logout

The sequence diagram in Figure 14 shows the sequence in logout functionality. The user
can log out from the account by clicking the logout button. After the user logout, the
system will automatically redirect the user to the home page.

Figure 14. Logout.

27
5.2.3 Changing Password

The sequence diagram in Figure 15 shows the steps to change the password. The user
must login to the system before the user is able to change the password. The web page
has a link to change the password. The user clicks the link and fills in the old password,
the new password and confirm password -fields. Finally, the user submits the form and
the notifications will announce the successful change of the password successfully.

Figure 15. Change Password.

5.2.4 Add Product

The sequence diagram in Figure 16 shows the steps to add a product. The staff must
login to the management page and click the add product button to enter the product in-
formation. If the product information is wrong, the system will notify the user to enter
the information again. The system will save the product to the database when the infor-
mation is correct.

28
 Figure 16. Add Product.

5.2.5 Update Product

The sequence diagram in Figure 17 shows the steps to update a product. The staff must
login to the management page and click the update product button to be able to edit
product information. If the update information is wrong, the system will notify the user
to enter the information again. The system will update the product to the database when
the information is correct.

Figure 17. Update Product.

29
5.2.6 Add Categories

The sequence diagram in Figure 18 shows the steps to add a category. The staff must
login to the management page and click the add category button to add the category in-
formation to be added. If the category information is wrong, the system will notify the
user to enter the information again. The system will save the category to the database
when the is information correct.

Figure 18. Add Categories.

5.2.7 Update Categories

The sequence diagram in Figure 19 shows the steps to update a category. The staff must
login to the management page and click the update category button to edit the category
information to be edited. If the category information is wrong, the system will notify the
user to enter the information again. The system will update the category to the database
when is information correct.

30
 Figure 19. Update Categories.

5.2.8 Add User

The sequence diagram in Figure 20 shows the steps in adding a user. The user accesses
the account registration page to fill in the account information. If the account infor-
mation is valid, it is updated to the database. In case, the information is wrong, the sys-
tem will request to review the account information.

Figure 20. Add User.

31
5.2.9 Assign Role.

The sequence diagram in Figure 21 shows the steps in assigning roles. The Admin
logins to the system to decentralize accounts for users. Admin is allowed to grant per-
missions for the role manager and the author permissions for the product management.
After the admin adds, modifies and deletes accounts for the user and if that account in-
formation is valid, it is allowed to update the database.

Figure 21. Assign Role.

5.2.10 Chat Room

The sequence diagram in Figure 22 shows the steps in adding a chat room. The user
does not have to be logged into the system. The user clicks icon message and needs to
fill the information before starting a chat with the staff. If the user information is wrong
such as email, the system will notify the user to enter the information again with the
correct email format. The system will send a message to the staff when the information
is correct

32
 Figure 22. Add Room.

5.2.11 Order

The sequence diagram in Figure 23 shows the steps in order confirm. The user needs to
login to the system to make the payment; the user clicks check out button and needs to
fill the information before starting payment for the user’s order. If the user information is
wrong, the system will notify the user to enter the information again. The system will
send an email to the user when the information is correct.

Figure 23. Order and Payment.

33
6 MODEL

6.1 Functional Hierarchy Chart

The functional hierarchy chart in Figure 24 is represents a simple hierarchical decompo-

sition of tasks to be performed. Each job is divided into sub jobs, the number of division
depends on the size and complexity of the system.

Figure 24. Functional hierarchy chart.

6.2 Use Case Diagram

The use case modal in Figure 25 shows the use case modal relationship diagram be-
tween actor and actor, actor with use case and use case.

34
 Figure 25. Use case modal.

6.3 Use Case Specification

6.3.1 Login Use Case Specification

The table 1 shows the use case specification for Login functionality

Table 1. Login.

Name Login

Summary Function log into the system.

Event 1. The system displays the login form.

2. Enter your username and account (both fields are re-

quired) and click "Login".

3. The system checks the login information

(Other event stream: Wrong credentials).

4. The system displays the main form.

1. Wrong password or Email

35
 Other Event The system displays a message that the login account is not
valid.

Special Required Not available

System state before use Actor: all of the actors

case execution
Require: Not available

System state after use The user who logs into the system can use all the permis-
case execution sion of the system allowed.

6.3.2 Logout Use Case Specification

The table 2 shows the use case specification for Logout functionality.

Table 2. Logout.

Name Logout

Summary Function log out to the system.

Event 1. The user clicks on log out

2. The system logs out and returns to the home page

Other Event Not available

Special Required Not available

System state before use Actor: all of actors

case execution
Require: The user has logged on to the system.

System state after use User logs out of the system.

case execution

36
6.3.3 Changing Password Use Case Specification

The table 3 shows the use case specification for changing password functionality.

Table 3. Change Password.

Name Change Password

Summary Change the password for the user account.

Event 1. The user clicks on his or her account and selects

"Change Password."

2. User enters the old password, new password and confirm

new password

Other Event Not available

Special Required The new password must match the confirmation password.

System state before use Actor: all of the actors

case execution
Require: The user has logged on to the system

System state after use User changes the password.

case execution

6.3.4 Product Management Use Case Specification

The table 4 shows the use case specification for adding functionality.

Table 4. Add Product.

Name Add product

Summary Add product information such as: product name, model

name, manufacturer, supplier and other details.

Event 1. Go to product management, press the button “Add prod-

uct”.

37
 2. The user enters the necessary information (including
some required information) and presses "Save".

3. The system checks the information, if the information is

valid, the next step will be taken.

(Other event stream: Invalid information).

4. The system saves the data and reports it successfully.

(Other event: Cannot add product to database).

Other Event 1. Invalid information:

The system displays a red message on the spot of an error

and asks to re-enter information.

2. Cannot save to database: Error while adding => Ask user

to re-enter information, if still error contact the develop-
ment team.

Special Required Not available

System state before use Actor: Admin, Staff

case execution
Require : The user has logged into the system and has the
right to use this function.

System state after use User successfully added product information to the system.
case execution

The table 5 shows the use case specification for editing product functionality.

Table 5. Edit Product.

Name Update product information

38
Summary Update product information

The system allows updating most of the information.

Event 1. Enter the product list item, click the edit button for a
product model

2. The user enters the necessary information (including

some required information) and presses "Save".

3. The system checks the information, if the information is

valid, the next step will be taken.

(Other event stream: Invalid information).

4. The system saves the data and notify it of success.

(Other event: Cannot update to the database)

Other Event 1. Invalid information:

The system displays a message asking for information re-

input.

2. Cannot update the database: Error while updating =>

Request user to re-enter information; if still error, contact
the development team.

Special Required Not available

System state before use Actor: Staff, Admin

case execution
Require: The user has logged into the system and has the
right to use this function.

System state after use User successfully updated product information to the sys-
case execution tem.

39
6.3.5 Categories Management Use Case Specification

The table 6 shows the use case specification for adding category functionality.

Table 6. Add Categories.

Name Add categories type

Summary Add categories type information such as name, code.

Event 1. Go to the product category manager, click the button

“Add categories.”’

2. The user enters the necessary information (including

some required information) and presses "Save".

3. The system checks the information, if the information is

valid, the next step will be taken.

(Other event: Invalid information).

4. The system saves the data and notify it of success.

(Other event stream: Cannot update to the database)

Other Event 1. Invalid information:

The system displays a message asking for information re-

input.

2. Cannot update the database: Error while updating =>

Request user to re-enter information; if still error, contact
development team.

Special Required Not available

System state before use Actor: Staff, Admin

case execution

40
 Require: The user has logged into the system and has the
right to use this function.

System state after use User successfully added the information to the system.
case execution

The table 7 shows the use case specification for editing category functionality.

Table 7. Edit Categories.

Name Update Categories information

Summary Update categories information

The system allows updating most of the information.

Event 1. Enter the categories list item, click the edit button for
category model

2. The user enters the necessary information (including

some required information) and presses "Save".

3. The system checks the information, if the information is

valid, the next step will be taken.

(Other event: Invalid information).

4. The system saves the data and notify it of success.

(Other event: Cannot update to the database)

Other Event 1. Invalid information:

The system displays a message asking for information re-

input.

41
 2. Cannot update the database: Error while updating =>
Request user to re-enter information; if still error, contact
development team.

Special Required Not available

System state before use Actor: Staff, Admin

case execution
Require: The user has logged into the system and has the
right to use this function.

System state after use The user successfully updated category information to the
case execution system.

6.3.6 User Management Use Case Specification

The table 8 shows the use case specification for adding staff functionality.

Table 8. Add Staff.

Name Add Staff

Summary Add employee Information

Event 1. Go to the staff management section, click the button

"Add employee".

2. The user enters the necessary information (including

some required information) and presses "Save"

3. The system checks the information, if the information is

valid, the next step will be taken

(Other event stream: Invalid information)

4. The system saves the data and reports it successfully.

42
 5. After successfully adding an employee, the system will
send an email to verify the account.

Other Event 1. Invalid information: The system displays a message ask-

ing for information re-input.

2. Cannot update the database: Error while updating =>

Request user to re-enter information; if still error, contact
development team.

Special Required Not available

System state before use Actor: Admin, Customer.

case execution
Require: The user has logged into the system and has the
right to use this function.

The table 9 shows the use case specification for editing staff functionality.

Table 9. Edit Staff.

Name Update Staff

Summary Update employee information. The system only allows up-

dating almost all of the information.

Event 1. Go to the employee management section, click on the

employee button

2. The system will display the interface for the list of em-
ployees

3. The user selects the employee you want to edit and clicks
the button "Edit"

4. User enter the necessary information (including some

required information) and click "Save".

43
 5. The system checks the information, if the information is
valid, the next step will be taken.

(Other event stream: Invalid information)

6. The system saves the data and reports it successfully.

(Other event: Cannot update to the database)

Other Event 1. Invalid information: The system displays a message ask-

ing for information re-input.

2. Cannot update the database: Error while updating =>

Request user to re-enter information, if still error, contact
development team.

Special Required Not available

System state before use Actor: Admin, Customer.

case execution
Require: The user has logged into the system and has the
right to use this function.

44
7 DESIGN THE MOCKUP

7.1 List of Pages

The table 10 shows the pages that were implemented for the E-commerce web shop.

Table 10. Page List.

STT Page

1 Login

2 Admin Page

3 Register Page

4 Product List Page

5 Add/ Update Product Page

6 Categories Page Admin

7 Add/ Update Categories Page

9 List of staffs

10 Add/ Update Staff Page

11 Message Room

12 Categories Page

13 BestDeal Page

14 Store Page

15 Change Password Page

16 Cart Page

17 Checkout Page

45
 18 Compare Page

19 Wish Page

20 Message Chat Form

7.2 Detailed Description of Pages

7.2.1 Login

The Login page which is shown in Figure 26 allows users to log in to the websites using
email and password when user want to order products through websites store. After suc-
cessfully logging in, the user can buy products.

Input: Email, password.

Process: Enter your username and password and check if the username and password
are valid.

Output: If the username and password are correct, the user can use the system. If wrong,
the system will request to re-enter.

Figure 26. Login Page.

46
7.2.2 Admin Page

The admin page which is shown in Figure 27 allows admin to manage products data for
some method add, update and remove product through websites admin. After success-
fully logging in, admin has full control data of website.

Input: Email, password.

Process: Enter your username and password and check if the username and password
are valid.

Output: If the username and password are correct, the admin can use the system. If
wrong, the system will request to re-enter.

Figure 27. Admin Page.

7.2.3 Register Page

The register page which is shown in Figure 28 allows user can register their account.
After successfully register, user can receive an email to active account.

Input: Name, Email. Password, Confirm Password.

Process: Enter information necessary and check if the information are valid.

Output: If the user information are correct, the user will be received an email.

47
 Figure 28. Register Page.

7.2.4 Add/ Update Product Page

The Add/Update page, which is shown in Figure 29 allows admin to add or update
product through websites admin.

Input: product information.

Output: If the product information is correct, the admin will be received notification.

Figure 29. Add/Update Page.

48
7.2.5 Categories Admin Page

The category page which is shown in Figure 30 allows admin to manage categories data
for some methods such as add, update and remove categories through websites admin.
After successfully logging in, admin has full control data of website.

Input: Email, password.

Process: Enter your username and password and check if the username and password
are valid.

Output: If the username and password are correct, the admin can use the system. If
wrong, the system will request to re-enter.

Figure 30. Categories Admin Page.

7.2.6 Staff Page

The staff page which is shown in Figure 32 allows admin to assign the role for user. To
start assign role for user. The admin need to login the admin page and click the button
update which shown in Figure 31.

Input: Check box role.

Output: The system shows a notification.

49
 Figure 31. Staff Page.

Figure 32. Update Role Page.

7.2.7 Room Page

The room page which is shown in Figure 33 allows staff who can reply the message
when client send messages.

Process: The system will receive any message from user when client has question by us-
ing socket manager.

50
 Figure 33. Room Page.

7.2.8 Categories List Page

The category list page which is shown in Figure 34 allows admin to manage categories
data for some methods such as add, update and remove categories through websites ad-
min. After successfully logging in, admin has full control data of website.

Input: Email, password.

Process: Enter your username and password and check if the username and password
are valid.

Output: If the username and password are correct, the admin can use the system. If
wrong, the system will request to re-enter.

51
 Figure 34. Categories Page.

7.2.9 Best Deal Page

The Best Deal page which is shown in Figure 35 shows to customers that all products
are on sale or have the best prices. Products on the highest discount will be time reduce.

Figure 35. Best Deal Page.

7.2.10 Change Password Page

The Chang password page which is shown in Figure 36 allows user to manage their in-
formation data for change password method through web page. The system requires cli-
ent who had login already.

52
Input: old password, new password, confirm password.

Process: The system will check if the username and password are valid.

Output: If the username and password are correct, the information will b. If wrong, the
system will request to re-enter.

Figure 36. Change Password Page.

7.2.11 Checkout Page

The Checkout page which is shown in Figure 37 allows user to enter their information
data for order product through web page. Client can review all products which was or-
dered already.

Input: Information fields.

Process: The system will save client information in database.

Output: The system will be redirect to payment page.

53
 Figure 37. Check out Page.

After placing an order, login page to PayPal payment is opened as shown in Figure 38.
PayPal allows user to enter their information data for payment through PayPal page.
Client can review the total price to pay. After login to PayPal system will be redirect to
payment page and client will receive an email.

54
 Figure 38. Login PayPal

7.2.12 Compare Page

The compare page which is shown in Figure 39 allows user allows users to search and
compare the selling price of the products which are interested before making a purchase.

Input: Click to add compare page.

55
 Figure 39. Compare Page.

7.2.13 Wish Page

The Wish page which is shown in Figure 39 allows where users can review all the prod-
ucts which were interested in before adding them to the shopping cart.
Input: Click to add wish page.

Figure 40. Wish Page.

7.2.14 Message Form

The Message Form which is shown in Figure 41 allows user to chat with sales staff to
ask for product information or other information.
Input: Enter name and email.

Figure 41. Message Form.

56
8 IMPLEMENTATION

8.1 Deployment

8.1.1 Back-end and Front-end Side.

a. Init Script
The purpose of script is to read the .jar file following path name “ExecStart” when
Spring Boot application start on reboot and run file service by command : “system-
ctl start”. Figure 42 shows the Init Script.

Figure 42. Init Script.

b. Swagger UI
Swagger UI is a tool that allows anyone - from developers to end users - to visual-
ize and interact with project API resources. This tool automatically generates API
documents from the Swagger config file, with a visual view and easier client-side
deployment. Figure 43 shows all APIs that were implemented for e-commerce web
shop (2021 SmartBear).

57
 Figure 43. Swagger UI

8.2 Implementation

a) User Register

The class save method to create a new user is shown in Figure 44. When user enter
all the necessary information which were required and click on submit, an email
will send to user’s mail. The user information will be saved to database. Class
method is shown in Figure 45 which used to validation information before register
such as name, password and email.

58
Figure 44. Method for user registration.

59
 Figure 45. Method for handling register.

a. Load User

The method to load userName and passWord when user would like to login the
web-page is shown in Figure 46. This method has a function to find email in data-
base and check the role of user when login. This is very important method help to
get all user data from database.

Figure 46. Method for LoadUserByUserName.

b. Login

The method to login the web-page using email and password is shown in Figure 49.
This is the method to login by using email and password. By default, Spring adds and
additional filter in the Spring security filter chain which is capable of persisting the Se-
curity Context. The filter uses the repository in order to load and store the security con-
text before and after the execution of the rest of defined filters in the chain, but it uses a
custom wrapper over the response which is passed to the chain.

60
 Figure 47. Method for Log In.

The Figure 47 shows the method using for using Facebook account to login. This
method requires the input token from Facebook account, the method will find the infor-
mation getting from token such as: id, email, name, gender. Moreover, this method will
check email with database and if the info does not match. The system will create a new
user with email and generate a token for user to login using Facebook.

Figure 48. Method for Facebook Login.

61
c. Add Product

The method to add product when admin would like to add more products to the
web-page is shown in Figure 49. This method requires the admin have to login to
the management page and press the add product button, when filled in, the infor-
mation will be saved to the database. In case, there are some errors the information
won’t save to database.

Figure 49. Method for adding product.

62
 Figure 50. Handling add product.

d. Sending Email
The method to send email when user would like to register an account on the web-page
is shown in Figure 51.

Figure 51. Method for sending email.

e. Chatting Support
The method to chat supporting when user would like to ask some information about the
product on the web-page is shown in Figure 52. Chatting support is a important method

63
to conFigure Spring to enable WebSocket and STOM messaging. The EnableWebSock-
etMessageBroker annotation is to enables WebSocket message handling, backed by a
message broker.
The conFigureMessageBroker method was implemented from WebSocketMessage-
BrokerConFigure to conFigure message. It will start enableSimpleBroker a simple
memory-based message broker to implement the messages back to client on destinations
by prefix with /topic. The /app prefix for messages that are bound for methods Message-
Mapping annotation. This prefix will be used to define all the message mappings.

The registerStomEnpoint() method registers the /ws endpoint. The client will connect to
/ws and use the best available transport websocket.

Figure 52. Web Socket Configuration.

The method will connect with backend API via web-page is shown in Figure 53. Con-
necting the socket from backend is done by using the endpoint /ws. Moreover, the
socket.instace.onChannel() method is uses to listening the message from this user to that
user real time.

64
 Figure 53. Connect WebSocket Configuration.

Figure 54. On listening message.

The method is to save message when user send message is shown in Figure 54. This is
the method save message which means that the message will be saved on database when
the user or staff sent message.

The method is to list all message when admin log in to admin page is shown in Figure
55. This is the method get message which means that the message will be showed on
admin page.

65
 Figure 55. Sending message and list message.

f. Order
The method is to order product when user would like to order a product on the web-
page is shown in Figure 56. Method saves order information to the database when the
user presses the checkout button to pay and will subtract the quantity in stock.

Figure 56. Method for order product.

66
 Figure 58. Handling submit order.

g. Chat Room
The method is to create a chat room to start chat with staff on the web-page is shown in
Figure 59. User needs to fill their information and the system will automatically release
unique room for user and staff. Each client will have different room to chat with staff.
The staff will receive message from client through admin page.

Figure 59. Method for creating chat room.

h. Upload Files

67
The method is to upload files when admin would like to upload image of product on the
admin-page is shown in Figure 60. The method uploads the image to the server and re-
turns a image URL to the client. In addition, same method is used to save avatar images
when users log in with their Facebook account.

Figure 60. Method for upload picture.

68
9 TESTING

Table 12 shows a important part of the project in verifying the functionalities. This project
is in the process of commissioning and with functions and techniques that suitable to
business needs. For testing purposes, this project has been deployed and running on Nginx
and accessed on a web browser. For simplicity, the test sample in Table 12 has been used
for the test.

Table 1. Testing Content.

S/N Test Description Steps Response Status

1. View products by cate- Click menu bar The list of products Pass
gory to choose cate- by category
gory

2. Checking for email exist- Enter email to The status will show Pass
ing when registration an register an ac- the email has been
account count. Click register already.
button submit.

3. Checking for input infor- Enter pass- The system will Pass
mation change password. word infor- show message if the
mation in- old password which
cluded old and was not match.
new password

4 Check out with PayPal Click place or- The application will Pass
payment der on order be redirect to login
page page.

5 CRUD product Enter product The product will be Pass

information showed on the top of
and click but- list product after
ton added.

69
6 Remove item from cart Click remove The item of the list Pass
product icon. cart will be remove
and update total
price again.

7 Checking form message Enter infor- The system will be Pass

mation to start showed the fields
chat with staff which were required
input.

8 Add product to cart Slide button to The number of prod- Pass

add product to ucts will be show on
cart. the right top page.

9 Add product to wish list Click icon The number of prod- Pass
wish list to add ucts will be show on
product to the right top page.
wish page.

10 Add product to compare Click icon The number of prod- Pass

comparation to ucts will be show on
add product to the right top page.
compare page.

11 Access admin page. Enter account The page will be Pass

information to showed notification
login admin if account do not
page. have right

12 Send email register Enter email ac- The system will sent Pass
count to regis- an email to user ac-
ter. count to verify.

70
13 Forgot Password Click forgot The system will sent Pass
password page an email to user re-
and input ceive password reset.
email to re-
ceive password
link reset.

14 Receiving message from Click menu bar The system will be Pass
client chat box and updated immediately
get the list of
client message

15 Login with Facebook ac- Access login The system will Pass
count page and click check email, if email
Facebook icon had been existed.
to login by Fa- Client can login. In-
cebook ac- case, the email does
count not exits, the system
will be automatically
created an account
and save to database.

16 Update information ac- Access user User can receive the Pass
count profile to up- notification update
date infor- successfully.
mation

17 Sale time end. The admin can The system will re- Pass
update product turn the time end of
the time end product.
for sale.

18 Search product Enter the name The system will re- Pass
of product or turn product.

71
 choose cate-
gory to search
product name

19 Sort product Click the sort The system will ar- Pass
product by range the product by
price, newest user sort.
and name.

20 Assign role Check box the The system will up- Pass
role which ad- date role of users on
min want to database.
change.

21 Register with already Enter infor- The system will re- Failed
Email mation into turn a message from
register form backend and front-
end will get the error
500 and message
“The email has been
already exist”. Front-
end will show the
message for client

22 Insert Product with same Enter infor- The system will re- Failed
code mation into turn a message from
add product backend and front-
form end will get the error
500 and message
“The code has been
already exist”. Front-
end will show the
message for client.

72
10 CONCLUSION

After implementing the topic and systematically presenting the basic contents of Spring
Boot, ReactJS, MySQL and a number of other technologies and techniques in building
enterprise Java applications on the web, helping to understand overview of Spring
Framework as well as the basic principles and working mechanism of this framework.
On the other hand, the websites has a three tier web model architecture in Spring and
the mechanisms for securing a web application are supported in the Spring Security
module. The thesis gave understanding how the communication mechanism between
client and server in modern RESTful service-oriented web model works and how to
communication between components of a system.

Commercial web design with separate web server and data server model to increase per-
formance accessing the website. The websites is built to communicate with the server
through a RESTful service with the help of ReactJS. UI design with Bootstrap with re-
sponsive support makes the websites responsive and user experienced. Building a suc-
cessful e-commerce website with full basic functions so that users can buy product eas-
ily. The web application is simple, elegant and functional with important features for an
online store.

The theme of E-commerce web shop is quite popular and highly capable in practical ap-
plication. However, due to the limited time of research and experience, the E-commerce
web only develops at the level of completing the requirements of the topic, the pro-
cessing speed is not yet completed. The further research will focus on understanding the
method of managing the system as well as handling large data blocks with high effi-
ciency, expanding the scope of this project.

73
11 REFERENCES

1) F5. 2021. What is NGINX? Accessed 22.04.2021. https://www.nginx.com/re-

sources/glossary/nginx/
2) SmartBear. 2021. API Development Accessed 22.04.2021. https://swagger.io/
3) Facebook Inc. 2021. Getting Started. Accessed 22.04.2021. https://re-
actjs.org/docs/getting-started.html
4) Yaghini, V. 2021. Organize your application code in three-tier architecture.
OpenClassRooms. Accessed 22.04.2021. https://openclass-
rooms.com/en/courses/5684146-create-web-applications-efficiently-with-the-
spring-boot-mvc-framework/6156961-organize-your-application-code-in-three-
tier-architecture
5) The-Future-Of Customer Engagement and Experience. 2021. What is e-com-
merce Definition, benefits, examples. Accessed 22.04.2021. https://www.the-fu-
ture-of-commerce.com/2020/01/19/what-is-e-commerce-definition-examples/
6) Henderson, R.2021. What is PayPal and how does it work ?. Access 22.04.2021.
https://www.pocket-lint.com/apps/news/138438-what-is-paypal-and-how-does-
it-work
7) Spring Boot. 2021. Overview. Access 22.03.2021. https://spring.io/pro-
jects/spring-boot.
8) Tutorialspoint. 2021. HTML Tutorial. Accessed 22.04.2021 https://www.tutori-
alspoint.com/html/
9) W3Schools. 2021. CSS Tutorial. Accessed 22.04.2021
https://www.w3schools.com/css/
10) Developer Mozilla. 2021. What is JavaScript ?. Assessed 13.05.2021. https://de-
veloper.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaS-
cript
11) Factory. 2021. Benefits of E-commerce for businesses and consumers. Accessed
13.05.2021. https://factory.hr/blog/benefits-of-E-commerce-for-businesses-and-
consumers
12) BloomIdea. 2021. Types of e-commerce. Accessed 13.05.2021. https://bloom-
idea.com/en/blog/types-e-commerce

74
13) Maxoffsky. 2021. Building RESTful API in Laravel. Assessed 13.05.2021.
https://maxoffsky.com/code-blog/building-restful-api-in-laravel-start-here/
14) Tram, H.2021. What is the RESTful API ? Assessed 13.05.2021.
https://itzone.com.vn/en/article/what-is-the-restful-api/
15) Herawan Dwika, P.2021. What is MySQL: MySQL Explained For Beginers.
Assessed 13.05.2021. https://www.hostinger.com/tutorials/what-is-mysql
16) Elated. 2021. MySQL for Absolute Beginners. Assessed 13.05.2021.
https://www.elated.com/mysql-for-absolute-beginners/
17) BlueClawdb. 2021. MySQL Advantages and Disadvantages. Assessed
13.05.2021. https://blueclawdb.com/mysql/advantages-disadvantages-mysql/
18) Reduxjs. 2021. Redux Fundamentals., Part 6 Async Logic and data Fetching.
Assessed 13.05.2021. https://redux.js.org/tutorials/fundamentals/part-6-async-
logic

75