Spring Boot - Thymeleaf with Example

Thymeleaf is a server-side Java-based template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. It is more powerful than JPS and responsible for dynamic content rendering on UI. The engine allows a parallel work of the backend and frontend developers on the same view. It can directly access the java object and spring beans and bind them with UI. And it is mostly used with spring MVC when we create any web application. So let's start with an example to understand how Thymeleaf works with the Spring framework. 

Project Setup

Here we are going to perform crud operation on Employee dataset. So for building this we have to add certain dependencies which are listed in bulleted form or also in pom.xml. 

• Spring Web (Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container.)
• Spring Data JPA (Persist data in SQL stores with Java Persistence API using Spring Data and Hibernate.)
• Spring Boot Devtools (Provides fast application restarts, LiveReload, and configurations for enhanced development experience)
• MySQL Driver (MySQL JDBC and R2DBC driver)
• Thymeleaf ( server-side Java template engine for both web and standalone environments. Allows HTML to be correctly displayed in browsers and as static prototypes.)

POM.XML

application.properties file

spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/emp
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLInnoDBDialect
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type=TRACE

Employee Pojo

This is the simple pojo class which is used to store the data of Employee. 

Employee Service interface and EmployeeServiceImpl class

EmployeeServiceImpl class which implements EmployeeSerivce interface methods

EmployeeRepository Interface

Here we are using JPA for communicating and saving the object into database.

EmployeeController class

This is the controller class it basically controls the flow of the data. It controls the data flow into model object and updates the view whenever data changes. So here we are mapping our object data with Thymeleaf. 

• When user type the URL localhost:8080/ on browser than request goes to the viewHomePage() method and in this method we are fetching the list of employee and added it into the modal with key, value pair and return the index.html page. In index.html page the key (allemplist) is identified as a java object and Thymeleaf iterate over the list and generate dynamic content as per the user provided template.
• /addNew -  when user clicks on Add Employee button than request goes to addNewEmployee() method. And in this method we simply create the empty object of the employee and send it back to newemployee.html so that user can fill the data in this empty object and when user hits on save button than /save mapping runs and get the object of the employee and save that object into database.
• /showFormForUpdate/{id} - This mapping is for updating the existing employee data.
• /deleteEmployee/{id} - This mapping is for deleting the existing employee data.

index.html

This page is used to displaying the list of employee. Here we are iterating over the allemplist object which is sent by our controller from viewHomePage() method. 

newemployee.html

This page is used to add new employee in the database. Here we simply provide the value in empty fields and click the submit button. Than the data of the employee goes to the saveEmployee() method and save the data into database. 

update.html

This page is used to update the data of existing employee. 

Output: