1.

Create and Setup Spring Boot Project

in Eclipse STS

1. Create Spring Boot Project

There are many ways to create a Spring Boot application. You can refer below
articles to create a Spring Boot application.

>> Create Spring Boot Project With Spring Initializer

>> Create Spring Boot Project in Spring Tool Suite [STS]

2. Maven Dependencies
<?xml version="1.0" encoding="UTF-8"?>
<project
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-
4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.7.RELEASE</version>
<relativePath/>
<!-- lookup parent from repository -->
</parent>
<groupId>net.javaguides</groupId>
<artifactId>springboot-thymeleaf-crud-web-app</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-thymeleaf-crud-web-app</name>
<description>Demo project for Spring Boot and thymeleaf</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
 <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
3. Project Structure
2. Database Setup
Create a database with the name "demo" in the MySQL database server.

We’ll need to configure MySQL database URL, username, and password so

that Spring can establish a connection with the database on startup. 

Open application.properties and add following MySQL database

configuration:

# DATASOURCE (DataSourceAutoConfiguration & DataSourceProperties)

spring.datasource.url=jdbc:mysql://localhost:3306/demo?
useSSL=false&serverTimezone=UTC&useLegacyDatetimeCode=false

spring.datasource.username=root

spring.datasource.password=root

# Hibernate

# The SQL dialect makes Hibernate generate better SQL for the chosen database

spring.jpa.properties.hibernate.dialect =
org.hibernate.dialect.MySQL5InnoDBDialect

# Hibernate ddl auto (create, create-drop, validate, update)

spring.jpa.hibernate.ddl-auto = update

logging.level.org.hibernate.SQL=DEBUG

logging.level.org.hibernate.type=TRACE

Make sure that you change

the spring.datasource.username and spring.datasource.password properties
as per your MySQL installation.

The spring.jpa.hibernate.ddl-auto = update  property makes sure that the

database tables and the domain models in your application are in sync.
Whenever you change the domain model, hibernate will automatically update
the mapped table in the database when you restart the application.

I have also specified the log levels for hibernate so that we can debug the SQL
queries executed by hibernate.

3. Create JPA Entity - Employee.java

package net.javaguides.springboot.model;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

@Entity

@Table(name = "employees")

public class Employee {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private long id;

@Column(name = "first_name")

private String firstName;

@Column(name = "last_name")

private String lastName;

@Column(name = "email")

private String email;

public long getId() {

return id;

public void setId(long id) {

 this.id = id;

public String getFirstName() {

return firstName;

public void setFirstName(String firstName) {

this.firstName = firstName;

public String getLastName() {

return lastName;

public void setLastName(String lastName) {

this.lastName = lastName;

public String getEmail() {

return email;

public void setEmail(String email) {

this.email = email;

}
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 2
author: Ramesh Fadatare

In this PART 2, we will implement end-to-end to "List Employee Feature" in

our Employee Management System project.

1. Back-end changes
First, we will complete the back-end changes.

EmployeeRepository.java

Create a EmployeeRepository interface under

"net.javaguides.springboot.repository" package and add the following content
to it:

package net.javaguides.springboot.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.stereotype.Repository;

import net.javaguides.springboot.model.Employee;

@Repository

public interface EmployeeRepository extends JpaRepository<Employee, Long>{

This will provide a CRUD database operations for the Employee entity.

EmployeeService.java

Create an EmployeeService interface under

"net.javaguides.springboot.service" and add the following content to it:

package net.javaguides.springboot.service;

import java.util.List;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List<Employee> getAllEmployees();

EmployeeServiceImpl.java

Create a EmployeeServiceImpl class under "net.javaguides.springboot.service"

and add following content to it:

package net.javaguides.springboot.service;

import java.util.List;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.repository.EmployeeRepository;
@Service

public class EmployeeServiceImpl implements EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

@Override

public List < Employee > getAllEmployees() {

return employeeRepository.findAll();

EmployeeController.java

Create a EmployeeServiceImpl class under

"net.javaguides.springboot.controller" and add following content to it:

package net.javaguides.springboot.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import net.javaguides.springboot.service.EmployeeService;

@Controller

public class EmployeeController {

 @Autowired

private EmployeeService employeeService;

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

model.addAttribute("listEmployees", employeeService.getAllEmployees());

return "index";

2. Front-end changes

index.html

Create index.html thymeleaf template under "resources/templates" folder and

add the following content to it:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

crossorigin="anonymous">
</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<table border="1" class = "table table-striped table-responsive-md">

<thead>

<tr>

<th>Employee First Name</th>

<th>Employee Last Name</th>

<th>Employee Email</th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 3
author: Ramesh Fadatare

In this PART 3, we will implement end-to-end to "Add Employee Feature" in

our Employee Management System project.

First, we will complete the back-end changes.

EmployeeService.java

Add "saveEmployee()" method to the EmployeeService interface. 

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List < Employee > getAllEmployees();

void saveEmployee(Employee employee);

EmployeeServiceImpl.java
The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.repository.EmployeeRepository;

@Service

public class EmployeeServiceImpl implements EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

@Override

public List < Employee > getAllEmployees() {

return employeeRepository.findAll();

@Override

public void saveEmployee(Employee employee) {

this.employeeRepository.save(employee);

}
index.html changes

Add below button to index.html:

<a th:href = "@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3"> Add

Employee </a>

The complete code:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-

3"> Add Employee </a>

<table border="1" class="table table-striped table-responsive-md">

<thead>
 <tr>

<th>Employee First Name</th>

<th>Employee Last Name</th>

<th>Employee Email</th>

<th> Actions </th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

EmployeeController changes

Add below method handler in EmployeeController class:

@GetMapping("/showNewEmployeeForm")

public String showNewEmployeeForm(Model model) {

// create model attribute to bind form data

Employee employee = new Employee();

model.addAttribute("employee", employee);

return "new_employee";

}
Create new_employee.html

Create new new_employee.html file under "resources/templates" folder and

add the following content to it:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

</head>

<body>

<div class="container">

<h1>Employee Management System</h1>

<hr>

<h2>Save Employee</h2>

<form action="#" th:action="@{/saveEmployee}" th:object="${employee}"

method="POST">

<input type="text" th:field="*{firstName}" placeholder="Employee

First Name" class="form-control mb-4 col-4">

<input type="text" th:field="*{lastName}" placeholder="Employee

Last Name" class="form-control mb-4 col-4">

<input type="text" th:field="*{email}" placeholder="Employee Email"

class="form-control mb-4 col-4">
 <button type="submit" class="btn btn-info col-2"> Save
Employee</button>

</form>

<hr>

<a th:href="@{/}"> Back to Employee List</a>

</div>

</body>

</html>

EmployeeController changes

Add below method handler to EmployeeController class:

@PostMapping("/saveEmployee")

public String saveEmployee(@ModelAttribute("employee") Employee employee) {

// save employee to database

employeeService.saveEmployee(employee);

return "redirect:/";

The complete EmployeeController class code:

package net.javaguides.springboot.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.service.EmployeeService;

@Controller

public class EmployeeController {

@Autowired

private EmployeeService employeeService;

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

model.addAttribute("listEmployees", employeeService.getAllEmployees());

return "index";

@GetMapping("/showNewEmployeeForm")

public String showNewEmployeeForm(Model model) {

// create model attribute to bind form data

Employee employee = new Employee();

model.addAttribute("employee", employee);

return "new_employee";

@PostMapping("/saveEmployee")

public String saveEmployee(@ModelAttribute("employee") Employee employee) {

// save employee to database

 employeeService.saveEmployee(employee);

return "redirect:/";

}
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 4
author: Ramesh Fadatare

In this PART 4, we will implement end-to-end to "Update Employee Feature"

in our Employee Management System project.

1. Back-end changes

EmployeeService.java interface change

Add below method in EmployeeSerivce interface:

Employee getEmployeeById(long id);

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List < Employee > getAllEmployees();

void saveEmployee(Employee employee);

Employee getEmployeeById(long id);

}
EmployeeServiceImpl.java class change

Override and implement "getEmployeeById()" method in EmployeeServiceImpl

class like:

@Override

public Employee getEmployeeById(long id) {

Optional < Employee > optional = employeeRepository.findById(id);

Employee employee = null;

if (optional.isPresent()) {

employee = optional.get();

} else {

throw new RuntimeException(" Employee not found for id :: " + id);

return employee;

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.repository.EmployeeRepository;
@Service

public class EmployeeServiceImpl implements EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

@Override

public List < Employee > getAllEmployees() {

return employeeRepository.findAll();

@Override

public void saveEmployee(Employee employee) {

this.employeeRepository.save(employee);

@Override

public Employee getEmployeeById(long id) {

Optional < Employee > optional = employeeRepository.findById(id);

Employee employee = null;

if (optional.isPresent()) {

employee = optional.get();

} else {

throw new RuntimeException(" Employee not found for id :: " + id);

return employee;

}
EmployeeController changes

@GetMapping("/showFormForUpdate/{id}")

public String showFormForUpdate(@PathVariable ( value = "id") long id, Model

model) {

// get employee from the service

Employee employee = employeeService.getEmployeeById(id);

// set employee as a model attribute to pre-populate the form

model.addAttribute("employee", employee);

return "update_employee";

The complete code:

package net.javaguides.springboot.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.service.EmployeeService;

@Controller
public class EmployeeController {

@Autowired

private EmployeeService employeeService;

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

model.addAttribute("listEmployees", employeeService.getAllEmployees());

return "index";

@GetMapping("/showNewEmployeeForm")

public String showNewEmployeeForm(Model model) {

// create model attribute to bind form data

Employee employee = new Employee();

model.addAttribute("employee", employee);

return "new_employee";

@PostMapping("/saveEmployee")

public String saveEmployee(@ModelAttribute("employee") Employee employee) {

// save employee to database

employeeService.saveEmployee(employee);

return "redirect:/";

@GetMapping("/showFormForUpdate/{id}")

public String showFormForUpdate(@PathVariable(value = "id") long id, Model

model) {
 // get employee from the service

Employee employee = employeeService.getEmployeeById(id);

// set employee as a model attribute to pre-populate the form

model.addAttribute("employee", employee);

return "update_employee";

2. Front-end changes
Add below button in actions column:

<td> <a th:href="@{/showFormForUpdate/{id}(id=${employee.id})}" class="btn btn-

primary">Update</a></td>

The complete code:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-

3"> Add Employee </a>

<table border="1" class="table table-striped table-responsive-md">

<thead>

<tr>

<th>Employee First Name</th>

<th>Employee Last Name</th>

<th>Employee Email</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>

<td><a th:href="@{/showFormForUpdate/{id}(id=$
{employee.id})}" class="btn btn-primary">Update</a></td>

</tr>

</tbody>

</table>

</div>
</body>

</html>

Create update_employee.html

Create update_employee.html file under "resources/templates" folder and add

the following content to it:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

</head>

<body>

<div class="container">

<h1>Employee Management System</h1>

<hr>

<h2>Update Employee</h2>

<form action="#" th:action="@{/saveEmployee}" th:object="${employee}"

method="POST">

<!-- Add hidden form field to handle update -->

 <input type="hidden" th:field="*{id}" />

<input type="text" th:field="*{firstName}" class="form-control mb-4

col-4">

<input type="text" th:field="*{lastName}" class="form-control mb-4

col-4">

<input type="text" th:field="*{email}" class="form-control mb-4

col-4">

<button type="submit" class="btn btn-info col-2"> Update

Employee</button>

</form>

<hr>

<a th:href="@{/}"> Back to Employee List</a>

</div>

</body>

</html>
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 5
author: Ramesh Fadatare

In this PART 5, we will implement end-to-end to "Delete Employee Feature" in

our Employee Management System project.

1. Back-end changes

EmployeeService.java interface change

Add below method in EmployeeService interface:

void deleteEmployeeById(long id);

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List < Employee > getAllEmployees();

void saveEmployee(Employee employee);

Employee getEmployeeById(long id);

void deleteEmployeeById(long id);

EmployeeServiceImpl class changes

Add below method in EmployeeServiceImpl class:

@Override

public void deleteEmployeeById(long id) {

this.employeeRepository.deleteById(id);

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.repository.EmployeeRepository;

@Service

public class EmployeeServiceImpl implements EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

@Override

public List < Employee > getAllEmployees() {

return employeeRepository.findAll();

}
 @Override

public void saveEmployee(Employee employee) {

this.employeeRepository.save(employee);

@Override

public Employee getEmployeeById(long id) {

Optional < Employee > optional = employeeRepository.findById(id);

Employee employee = null;

if (optional.isPresent()) {

employee = optional.get();

} else {

throw new RuntimeException(" Employee not found for id :: " + id);

return employee;

@Override

public void deleteEmployeeById(long id) {

this.employeeRepository.deleteById(id);

}
EmployeeController changes

Add below method to EmployeeController class:

@GetMapping("/deleteEmployee/{id}")

public String deleteEmployee(@PathVariable (value = "id") long id) {

// call delete employee method

this.employeeService.deleteEmployeeById(id);

return "redirect:/";

The complete code:

package net.javaguides.springboot.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.service.EmployeeService;

@Controller

public class EmployeeController {

 @Autowired

private EmployeeService employeeService;

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

model.addAttribute("listEmployees", employeeService.getAllEmployees());

return "index";

@GetMapping("/showNewEmployeeForm")

public String showNewEmployeeForm(Model model) {

// create model attribute to bind form data

Employee employee = new Employee();

model.addAttribute("employee", employee);

return "new_employee";

@PostMapping("/saveEmployee")

public String saveEmployee(@ModelAttribute("employee") Employee employee) {

// save employee to database

employeeService.saveEmployee(employee);

return "redirect:/";

@GetMapping("/showFormForUpdate/{id}")

public String showFormForUpdate(@PathVariable(value = "id") long id, Model

model) {

// get employee from the service

 Employee employee = employeeService.getEmployeeById(id);

// set employee as a model attribute to pre-populate the form

model.addAttribute("employee", employee);

return "update_employee";

@GetMapping("/deleteEmployee/{id}")

public String deleteEmployee(@PathVariable(value = "id") long id) {

// call delete employee method

this.employeeService.deleteEmployeeById(id);

return "redirect:/";

2. Front-end changes
Add "Delete" button in index.html file:

<a th:href="@{/deleteEmployee/{id}(id=${employee.id})}" class="btn btn-

danger">Delete</a>

The complete code:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">
 <title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-

3"> Add Employee </a>

<table border="1" class="table table-striped table-responsive-md">

<thead>

<tr>

<th>Employee First Name</th>

<th>Employee Last Name</th>

<th>Employee Email</th>

<th> Actions </th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>
 <td> <a th:href="@{/showFormForUpdate/{id}(id=$
{employee.id})}" class="btn btn-primary">Update</a>

<a th:href="@{/deleteEmployee/{id}(id=${employee.id})}"
class="btn btn-danger">Delete</a>

</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 6 | Pagination using Spring
Data JPA
author: Ramesh Fadatare

In this PART 6, we will implement Pagination for our employee list page using

Spring Data JPA and Thymeleaf.

Understand Spring Data JPA’s Pagination

APIs
To use paging and sorting APIs provided by Spring Data JPA, your repository
interface must extend the PagingAndSortingRepository interface which defines
the following couple of methods (T refers to an entity class):

@NoRepositoryBean

public interface PagingAndSortingRepository < T, ID > extends CrudRepository <

T, ID > {

/**

* Returns all entities sorted by the given options.

* @param sort

* @return all entities sorted by the given options

*/

Iterable < T > findAll(Sort sort);

/**

* Returns a {@link Page} of entities meeting the paging restriction

provided in the {@code Pageable} object.
 *

* @param pageable

* @return a page of entities

*/

Page < T > findAll(Pageable pageable);

JpaRepository interface extends PagingAndSortingRepository interface so if

your repository interface is of type JpaRepository, you don’t have to make a

change to it.

For example, use the following to get the first page from the database, with 5
items per page:

int pageNumber = 1;

int pageSize = 5;

Pageable pageable = PageRequest.of(pageNumber, pageSize);

Page<Product> page = repository.findAll(pageable);

Then you can get the actual content as follows:

List<Employee> listEmployees = page.getContent();

With a Page object you can know the total rows in the database and the total
pages according to the given page size:

long totalItems = page.getTotalElements();

int totalPages = page.getTotalPages();

This information is useful for implementing pagination in the view with the
Thymeleaf template.
1. Back-end changes

EmployeeService.java interface changes

Add below method to this interface:

Page<Employee> findPaginated(int pageNo, int pageSize);

The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import org.springframework.data.domain.Page;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List < Employee > getAllEmployees();

void saveEmployee(Employee employee);

Employee getEmployeeById(long id);

void deleteEmployeeById(long id);

Page < Employee > findPaginated(int pageNo, int pageSize);

EmployeeServiceImpl.java class changes

Add below method to EmployeeServiceImpl class:

@Override
public Page<Employee> findPaginated(int pageNo, int pageSize) {

Pageable pageable = PageRequest.of(pageNo - 1, pageSize);

return this.employeeRepository.findAll(pageable);

EmployeeController.java class changes

Add below handler method to EmployeeController class to perform

pagination:

@GetMapping("/page/{pageNo}")

public String findPaginated(@PathVariable(value = "pageNo") int pageNo, Model

model) {

int pageSize = 5;

Page < Employee > page = employeeService.findPaginated(pageNo, pageSize);

List < Employee > listEmployees = page.getContent();

model.addAttribute("currentPage", pageNo);

model.addAttribute("totalPages", page.getTotalPages());

model.addAttribute("totalItems", page.getTotalElements());

model.addAttribute("listEmployees", listEmployees);

return "index";

Also, we need to make a change to an existing method as below:

// display list of employees

@GetMapping("/")
public String viewHomePage(Model model) {
return findPaginated(1, model);
}
2. Front-end changes
Add below pagination code to index.html:

<div th:if="${totalPages > 1}">

<div class="row col-sm-10">

<div class="col-sm-2">

Total Rows: [[${totalItems}]]

</div>

<div class="col-sm-1">

<span th:each="i: ${#numbers.sequence(1, totalPages)}">

<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}}">[[${i}]]</a>

<span th:unless="${currentPage != i}">[[${i}]]</span> &nbsp; &nbsp;

</span>

</div>

<div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + $

{currentPage + 1}}">Next</a>

<span th:unless="${currentPage < totalPages}">Next</span>

</div>

<div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + $

{totalPages}}">Last</a>

<span th:unless="${currentPage < totalPages}">Last</span>

</div>

</div>

</div>
The complete code:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-

3"> Add Employee </a>

<table border="1" class="table table-striped table-responsive-md">

<thead>

<tr>

<th>Employee First Name</th>

 <th>Employee Last Name</th>

<th>Employee Email</th>

<th> Actions </th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>

<td> <a th:href="@{/showFormForUpdate/{id}(id=$

{employee.id})}" class="btn btn-primary">Update</a>

<a th:href="@{/deleteEmployee/{id}(id=${employee.id})}"
class="btn btn-danger">Delete</a>

</td>

</tr>

</tbody>

</table>

<div th:if="${totalPages > 1}">

<div class="row col-sm-10">

<div class="col-sm-2">

Total Rows: [[${totalItems}]]

</div>

<div class="col-sm-1">

<span th:each="i: ${#numbers.sequence(1, totalPages)}">

<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}}">[[${i}]]</a>

<span th:unless="${currentPage != i}">[[${i}]]</span> &nbsp; &nbsp;

</span>

</div>
 <div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/'

+ ${currentPage + 1}}">Next</a>

<span th:unless="${currentPage < totalPages}">Next</span>

</div>

<div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/'

+ ${totalPages}}">Last</a>

<span th:unless="${currentPage < totalPages}">Last</span>

</div>

</div>

</div>

</div>

</body>

</html>
Spring Boot Thymeleaf CRUD
Database Real-Time Project -
PART 7 | Sorting with Spring
Data JPA
author: Ramesh Fadatare

In this PART 7, we will implement Sorting for our employee list page using

Spring Data JPA and Thymeleaf.

Understand Spring Data JPA’s Sorting API

The Spring Data JPA provides PagingAndSortingRepository interface which
supports spring and pagination with the following APIs:

@NoRepositoryBean

public interface PagingAndSortingRepository < T, ID > extends CrudRepository <

T, ID > {

/**

* Returns all entities sorted by the given options.

* @param sort

* @return all entities sorted by the given options

*/

Iterable < T > findAll(Sort sort);

/**

* Returns a {@link Page} of entities meeting the paging restriction

provided in the {@code Pageable} object.

* @param pageable

* @return a page of entities

 */

Page < T > findAll(Pageable pageable);

The users will be able to sort the employee's list by clicking on the column
header of the table. 

First, create a Sort object like this:

Sort sort = Sort.by(“fieldName”).ascending();

This will sort the result by fieldName in ascending order. fieldName must

match a field name declared in the entity class. 

We can also sort by more than one field, for example:

Sort sort =
Sort.by("fieldName1").ascending().and(Sort.by("fieldName2").descending());

Then we pass the Sort object to create a Pageable as follows:

Pageable pageable = PageRequest.of(pageNum - 1, pageSize, sort);

Let's understand more in the example section.

1. Back-end changes

1. EmployeeService.java interface changes

Let's add two fields to the existing method:

Page<Employee> findPaginated(int pageNo, int pageSize, String sortField, String

sortDirection);
The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import org.springframework.data.domain.Page;

import net.javaguides.springboot.model.Employee;

public interface EmployeeService {

List < Employee > getAllEmployees();

void saveEmployee(Employee employee);

Employee getEmployeeById(long id);

void deleteEmployeeById(long id);

Page < Employee > findPaginated(int pageNo, int pageSize, String sortField,
String sortDirection);

2. EmployeeServiceImpl.java class changes

The sorting logic implemented in the below method:

@Override

public Page<Employee> findPaginated(int pageNo, int pageSize, String sortField,

String sortDirection) {

Sort sort = sortDirection.equalsIgnoreCase(Sort.Direction.ASC.name()) ?

Sort.by(sortField).ascending() :

Sort.by(sortField).descending();

Pageable pageable = PageRequest.of(pageNo - 1, pageSize, sort);

return this.employeeRepository.findAll(pageable);

}
The complete code:

package net.javaguides.springboot.service;

import java.util.List;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.domain.Page;

import org.springframework.data.domain.PageRequest;

import org.springframework.data.domain.Pageable;

import org.springframework.data.domain.Sort;

import org.springframework.stereotype.Service;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.repository.EmployeeRepository;

@Service

public class EmployeeServiceImpl implements EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

@Override

public List < Employee > getAllEmployees() {

return employeeRepository.findAll();

@Override

public void saveEmployee(Employee employee) {

 this.employeeRepository.save(employee);

@Override

public Employee getEmployeeById(long id) {

Optional < Employee > optional = employeeRepository.findById(id);

Employee employee = null;

if (optional.isPresent()) {

employee = optional.get();

} else {

throw new RuntimeException(" Employee not found for id :: " + id);

return employee;

@Override

public void deleteEmployeeById(long id) {

this.employeeRepository.deleteById(id);

@Override

public Page < Employee > findPaginated(int pageNo, int pageSize, String
sortField, String sortDirection) {

Sort sort = sortDirection.equalsIgnoreCase(Sort.Direction.ASC.name()) ?

Sort.by(sortField).ascending() :

Sort.by(sortField).descending();

Pageable pageable = PageRequest.of(pageNo - 1, pageSize, sort);

return this.employeeRepository.findAll(pageable);

}
3.EmployeeController.java changes

Let's change the existing method to provide a support for sorting:

@GetMapping("/page/{pageNo}")

public String findPaginated(@PathVariable(value = "pageNo") int pageNo,

@RequestParam("sortField") String sortField,

@RequestParam("sortDir") String sortDir,

Model model) {

int pageSize = 5;

Page < Employee > page = employeeService.findPaginated(pageNo, pageSize,

sortField, sortDir);

List < Employee > listEmployees = page.getContent();

model.addAttribute("currentPage", pageNo);

model.addAttribute("totalPages", page.getTotalPages());

model.addAttribute("totalItems", page.getTotalElements());

model.addAttribute("sortField", sortField);

model.addAttribute("sortDir", sortDir);

model.addAttribute("reverseSortDir", sortDir.equals("asc") ? "desc" :

"asc");

model.addAttribute("listEmployees", listEmployees);

return "index";

}
Also provide default sorting field and sorting direction for home page:

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

return findPaginated(1, "firstName", "asc", model);

The complete code:

package net.javaguides.springboot.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.domain.Page;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestParam;

import net.javaguides.springboot.model.Employee;

import net.javaguides.springboot.service.EmployeeService;

@Controller

public class EmployeeController {

 @Autowired

private EmployeeService employeeService;

// display list of employees

@GetMapping("/")

public String viewHomePage(Model model) {

return findPaginated(1, "firstName", "asc", model);

@GetMapping("/showNewEmployeeForm")

public String showNewEmployeeForm(Model model) {

// create model attribute to bind form data

Employee employee = new Employee();

model.addAttribute("employee", employee);

return "new_employee";

@PostMapping("/saveEmployee")

public String saveEmployee(@ModelAttribute("employee") Employee employee) {

// save employee to database

employeeService.saveEmployee(employee);

return "redirect:/";

@GetMapping("/showFormForUpdate/{id}")

public String showFormForUpdate(@PathVariable(value = "id") long id, Model

model) {

// get employee from the service

Employee employee = employeeService.getEmployeeById(id);

 // set employee as a model attribute to pre-populate the form

model.addAttribute("employee", employee);

return "update_employee";

@GetMapping("/deleteEmployee/{id}")

public String deleteEmployee(@PathVariable(value = "id") long id) {

// call delete employee method

this.employeeService.deleteEmployeeById(id);

return "redirect:/";

@GetMapping("/page/{pageNo}")

public String findPaginated(@PathVariable(value = "pageNo") int pageNo,

@RequestParam("sortField") String sortField,

@RequestParam("sortDir") String sortDir,

Model model) {

int pageSize = 5;

Page < Employee > page = employeeService.findPaginated(pageNo,

pageSize, sortField, sortDir);

List < Employee > listEmployees = page.getContent();

model.addAttribute("currentPage", pageNo);

model.addAttribute("totalPages", page.getTotalPages());

model.addAttribute("totalItems", page.getTotalElements());
 model.addAttribute("sortField", sortField);

model.addAttribute("sortDir", sortDir);

model.addAttribute("reverseSortDir", sortDir.equals("asc") ? "desc" :

"asc");

model.addAttribute("listEmployees", listEmployees);

return "index";

2. Front-end changes

1.index.html

We make the header columns of the table sortable by adding hyperlinks with
the following code:

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=firstName&sortDir='

+ ${reverseSortDir}}">

Employee First Name</a>

</th>

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=lastName&sortDir=' +

${reverseSortDir}}">

Employee Last Name</a>

</th>

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=email&sortDir=' + $

{reverseSortDir}}">

Employee Email</a>

</th>
 <th> Actions </th>

We also need to change pagination part to provide sorting support like:

<div th:if = "${totalPages > 1}">

<div class = "row col-sm-10">

<div class = "col-sm-2">

Total Rows: [[${totalItems}]]

</div>

<div class = "col-sm-1">

<span th:each="i: ${#numbers.sequence(1, totalPages)}">

<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField='

+ ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>

<span th:unless="${currentPage != i}">[[${i}]]</span> &nbsp; &nbsp;

</span>

</div>

<div class = "col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage

+ 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>

<span th:unless="${currentPage < totalPages}">Next</span>

</div>

<div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + $

{totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + $
{sortDir}}">Last</a>

<span th:unless="${currentPage < totalPages}">Last</span>

</div>

</div>

</div>
The complete code:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="ISO-8859-1">

<title>Employee Management System</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

crossorigin="anonymous">

</head>

<body>

<div class="container my-2">

<h1>Employees List</h1>

<a th:href = "@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3">

Add Employee </a>

<table border="1" class = "table table-striped table-responsive-md">

<thead>

<tr>

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=firstName&sortDir='

+ ${reverseSortDir}}">
 Employee First Name</a>

</th>

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=lastName&sortDir=' +

${reverseSortDir}}">

Employee Last Name</a>

</th>

<th>

<a th:href="@{'/page/' + ${currentPage} + '?sortField=email&sortDir=' + $

{reverseSortDir}}">

Employee Email</a>

</th>

<th> Actions </th>

</tr>

</thead>

<tbody>

<tr th:each="employee : ${listEmployees}">

<td th:text="${employee.firstName}"></td>

<td th:text="${employee.lastName}"></td>

<td th:text="${employee.email}"></td>

<td> <a th:href="@{/showFormForUpdate/{id}(id=${employee.id})}" class="btn

btn-primary">Update</a>

<a th:href="@{/deleteEmployee/{id}(id=${employee.id})}" class="btn

btn-danger">Delete</a>

</td>

</tr>

</tbody>

</table>

<div th:if = "${totalPages > 1}">

<div class = "row col-sm-10">

 <div class = "col-sm-2">

Total Rows: [[${totalItems}]]

</div>

<div class = "col-sm-1">

<span th:each="i: ${#numbers.sequence(1, totalPages)}">

<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField='

+ ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>

<span th:unless="${currentPage != i}">[[${i}]]</span> &nbsp; &nbsp;

</span>

</div>

<div class = "col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage

+ 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>

<span th:unless="${currentPage < totalPages}">Next</span>

</div>

<div class="col-sm-1">

<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + $

{totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + $
{sortDir}}">Last</a>

<span th:unless="${currentPage < totalPages}">Last</span>

</div>

</div>

</div>

</div>

</body>

</html>