Spring Boot thymeleaf Update form




Hey guys in this post, we will discuss Spring boot Thymeleaf updating the form data to the database with full coding example.

Overview


  • th:each is a thymeleaf special attribute, used to iteration over collections
  • th:text attribute evaluates the value expression and sets the value to the tag
  • th:href attribute in the <a> tag used to construct a URLs using link expression @{...}, basically it reference to a URI.
  • th:action attribute in the <form> tag reference to a URI using link expression @{...}
  • th:object attribute in the <form> tag reference to the model object which we added in the controller
  • th:field attribute in the <input> tag reference to the fields in the model object, we will reference to the fields using the expression *{...}

Complete Example


We will create this example step by step, follow this tutorial till the end

Read More:

Create spring boot project


There are many different ways to create a spring boot application, you can follow the below articles to create one –

>> Create spring boot application using Spring initializer
>> Create spring boot application in Spring tool suite [STS]
>> Create spring boot application in IntelliJ IDEA

Add maven dependencies


Open pom.xml and add the following 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.5.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>in.bushansirgur</groupId>
	<artifactId>springbootthymeleaf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>SpringBootThymeleaf</name>
	<description>Spring boot thymeleaf web app for Employee Management</description>
	<properties>
		<java.version>11</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.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

spring-boot-starter-web dependency for building web applications using Spring MVC. It uses the tomcat as the default embedded container. spring-boot-devtools dependency for automatic reloads or live reload of applications. spring-boot-starter-thymeleaf dependency for using the thymeleaf template engine





lombok dependency is a java library that will reduce the boilerplate code that we usually write inside every entity class like setters, getters, and toString(). mysql-connector-java dependency is to store the data into the database.

Configure the datasource


Open application.properties file and add the following contents

spring.datasource.url=jdbc:mysql://localhost:3306/springbootdb
spring.datasource.username=root
spring.datasource.password=scbushan05

spring.jpa.hibernate.ddl-auto=update

Create an Entity


Create Employee.java class inside in.bushansirgur.springbootthymeleaf.entity package and add the following content

package in.bushansirgur.springbootthymeleaf.entity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Entity
@Table(name="tbl_employees")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
	
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Long id;
	
	private String name;
	
	private String email;
	
	private String department;
}

Create a Repository


Create EmployeeRepository.java interface inside in.bushansirgur.springbootthymeleaf.dao package and add the following content

package in.bushansirgur.springbootthymeleaf.dao;

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

import in.bushansirgur.springbootthymeleaf.entity.Employee;

@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long>{

}

Create a Controller


Create EmployeeController.java class inside in.bushansirgur.springbootthymeleaf.controller package and add the following content

package in.bushansirgur.springbootthymeleaf.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import in.bushansirgur.springbootthymeleaf.dao.EmployeeRepository;
import in.bushansirgur.springbootthymeleaf.entity.Employee;

@Controller
public class EmployeeController {
	
	@Autowired
	private EmployeeRepository eRepo;
	
	@GetMapping({"/list", "/"})
	public ModelAndView getAllEmployees() {
		ModelAndView mav = new ModelAndView("list-employees");
		mav.addObject("employees", eRepo.findAll());
		return mav;
	}
	
	@GetMapping("/addEmployeeForm")
	public ModelAndView addEmployeeForm() {
		ModelAndView mav = new ModelAndView("add-employee-form");
		Employee newEmployee = new Employee();
		mav.addObject("employee", newEmployee);
		return mav;
	}
	
	@PostMapping("/saveEmployee")
	public String saveEmployee(@ModelAttribute Employee employee) {
		eRepo.save(employee);
		return "redirect:/list";
	}
	
	@GetMapping("/showUpdateForm")
	public ModelAndView showUpdateForm(@RequestParam Long employeeId) {
		ModelAndView mav = new ModelAndView("add-employee-form");
		Employee employee = eRepo.findById(employeeId).get();
		mav.addObject("employee", employee);
		return mav;
	}
}

We are calling the repository method findById() and adding the employee object to the ModeAndView so that we can pre populate the employee details inside the Thymeleaf form.

Create view template


Create list-employees.html page inside the templates folder and add the following content

<html lang="en" xmlns:th="http://www.thymeleaf.org">
	
	<head>
		<title>List Employees</title>
		
		<link rel="stylesheet" 
			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
			integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
			crossorigin="anonymous" />
	</head>
	
	<body>
		
		<div class="container">
		
			<h3>List Employees</h3>
			
			<hr/>
			<a th:href="@{/addEmployeeForm}" class="btn btn-primary">Add Employee</a>
			<br/><br/>
			<table class="table table-bordered table-striped">
			
				<thead>
					<tr>
						<th>Name</th>
						<th>Email</th>
						<th>Department</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="employee: ${employees}">
						<td th:text="${employee.name}" />
						<td th:text="${employee.email}" />
						<td th:text="${employee.department}" />
						<td>
							<a th:href="@{/showUpdateForm(employeeId=${employee.id})}" class="btn btn-info">Update</a>
						</td>
					</tr>
				</tbody>
				
			</table>
		</div>
		
		
	</body>
	
</html>

We will pass the employeeId in the query param, so that we can get the id from the URL using @RequestParam annotation inside the controller

We are iterating the list employees using thymeleaf attribute th:each, each time loop runs thymeleaf creates temporary variable employee and we are printing the employee fields using thymeleaf attribute th:text

Create add-emplooyee-form.html inside templates folder and add the following content

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

	<head>
		<title>Add Employee</title>
		
		<link rel="stylesheet" 
			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
			integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
			crossorigin="anonymous" />
	</head>
	<body>
		
		<div class="container">
		
			<h3>Add New Employee</h3>
			<hr/>
			
			<form th:action="@{/saveEmployee}" th:object="${employee}" method="POST">
				
				<input type="text" th:field="*{name}" class="form-control col-4 mb-4" placeholder="Enter Name" />
				
				<input type="text" th:field="*{email}" class="form-control col-4 mb-4" placeholder="Enter email" />
				
				<input type="text" th:field="*{department}" class="form-control col-4 mb-4" placeholder="Enter department" />
				
				<button type="submit" class="btn btn-primary col-2">Save</button>
				<input type="hidden" th:field="*{id}" />
			</form>
			<hr/>
			<a th:href="@{/list}">Back to list</a>
		</div>
		
	</body>
</html>

We are creating hidden <input> tag to track the employee id. We are accessing the employee object using th:object attribute and we are accessing the employee fields using th:field attribute.

Run the app


Run the application using the below maven command –

mvn spring-boot:run

Open the Browser and enter the following URL –

  • localhost:8080/

Screenshot-2021-08-21-at-8-08-47-PM

Screenshot-2021-08-21-at-8-09-25-PM

Screenshot-2021-08-21-at-8-09-37-PM

That’s it for this post, if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *