In this tutorial, we’ll learn how to develop a CRUD web application with Spring Boot and Thymeleaf.
Video Tutorial
This tutorial is very well explained in below YouTube video. Subscribe to our youtube channel for future updates at https://www.youtube.com/c/javaguides.
What we'll Build?
We are building a CRUD Web application for Student entity (create student, list students, update student and delete student) using Spring boot and Thymeleaf. Let's use an H2 database for quick setup and running this web application.
Tools and Technologies Used
- Spring Boot - 2.1.4 RELEASE
- Spring Framework - 5.1.6 RELEASE
- Spring Data JPA - 2.16 RELEASE
- Hibernate - 5.3.9.Final
- Thymeleaf - 3.0.11 RELEASE
- Maven - 3.2+
- IDE - Eclipse or Spring Tool Suite (STS)
- H2 Database - 1.4.99
Development Steps
- Creating a Spring Boot Application
- Project Structure
- Maven Dependencies - Pom.xml
- Domain Layer
- The Repository Layer
- The Controller Layer
- The View Layer
- Running the Application
- Demo
- Conclusion
1. Creating a Spring Boot Application
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]
>> Create Spring Boot Project in Spring Tool Suite [STS]
2. Project Structure
Following is the package or project structure for your reference -
3. Maven Dependencies - pom.xml
<?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 http://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.1.4.RELEASE</version>
<relativePath/>
<!-- lookup parent from repository -->
</parent>
<groupId>net.javaguides.springboot</groupId>
<artifactId>springboot-thymeleaf-crud-tutorial</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-thymeleaf-crud-tutorial</name>
<description>springboot-thymeleaf-crud-tutorial</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>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</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>
</plugin>
</plugins>
</build>
</project>
Note that we’re going with the default values, I haven’t added an application.properties configuration file.
4. Domain Layer
The domain layer is a collection of entity objects and related business logic that is designed to represent the enterprise business model.
Let's create a JPA Student entity:
Let's create a JPA Student entity:
package net.javaguides.springboot.tutorial.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.validation.constraints.NotBlank;
@Entity
public class Student {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
@NotBlank(message = "Name is mandatory")
@Column(name = "name")
private String name;
@NotBlank(message = "Email is mandatory")
@Column(name = "email")
private String email;
@Column(name = "phone_no")
private long phoneNo;
public Student() {}
public Student(String name, String email) {
this.name = name;
this.email = email;
}
public void setId(long id) {
this.id = id;
}
public long getId() {
return id;
}
public void setName(String name) {
this.name = name;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public String getEmail() {
return email;
}
public long getPhoneNo() {
return phoneNo;
}
public void setPhoneNo(long phoneNo) {
this.phoneNo = phoneNo;
}
}
5. The Repository Layer
Spring Data JPA allows us to implement JPA-based repositories (a fancy name for the DAO pattern implementation) with minimal fuss.
Spring Data JPA is a key component of Spring Boot’s spring-boot-starter-data-jpa that makes it easy to add CRUD functionality through a powerful layer of abstraction placed on top of a JPA implementation. This abstraction layer allows us to access the persistence layer without having to provide our own DAO implementations from scratch.
Let's create a StudentRepository class with the following code:
package net.javaguides.springboot.tutorial.repository;
import java.util.List;
import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Repository;
import net.javaguides.springboot.tutorial.entity.Student;
@Repository
public interface StudentRepository extends CrudRepository <Student, Long> {
List<Student> findByName(String name);
}
6. The Controller Layer or Web Layer
This layer responsible for processing the user’s input and returning the correct response back to the user. The web layer must also handle the exceptions thrown by the other layers. Because the web layer is the entry point of our application, it must take care of authentication and act as the first line of defense against unauthorized users.
In Spring, the controller class relies on some of Spring MVC’s key features. Let's create a StudentController class which internally invokes the repository layer:
package net.javaguides.springboot.tutorial.controller;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import net.javaguides.springboot.tutorial.entity.Student;
import net.javaguides.springboot.tutorial.repository.StudentRepository;
@Controller
@RequestMapping("/students/")
public class StudentController {
private final StudentRepository studentRepository;
@Autowired
public StudentController(StudentRepository studentRepository) {
this.studentRepository = studentRepository;
}
@GetMapping("signup")
public String showSignUpForm(Student student) {
return "add-student";
}
@GetMapping("list")
public String showUpdateForm(Model model) {
model.addAttribute("students", studentRepository.findAll());
return "index";
}
@PostMapping("add")
public String addStudent(@Valid Student student, BindingResult result, Model model) {
if (result.hasErrors()) {
return "add-student";
}
studentRepository.save(student);
return "redirect:list";
}
@GetMapping("edit/{id}")
public String showUpdateForm(@PathVariable("id") long id, Model model) {
Student student = studentRepository.findById(id)
.orElseThrow(() - > new IllegalArgumentException("Invalid student Id:" + id));
model.addAttribute("student", student);
return "update-student";
}
@PostMapping("update/{id}")
public String updateStudent(@PathVariable("id") long id, @Valid Student student, BindingResult result,
Model model) {
if (result.hasErrors()) {
student.setId(id);
return "update-student";
}
studentRepository.save(student);
model.addAttribute("students", studentRepository.findAll());
return "index";
}
@GetMapping("delete/{id}")
public String deleteStudent(@PathVariable("id") long id, Model model) {
Student student = studentRepository.findById(id)
.orElseThrow(() - > new IllegalArgumentException("Invalid student Id:" + id));
studentRepository.delete(student);
model.addAttribute("students", studentRepository.findAll());
return "index";
}
}
7. The View Layer
Under the src/main/resources/templates folder we need to create the HTML templates required for displaying the Student signup student, update student, and rendering the list of persisted Student entities. We will be using Thymeleaf as the underlying template engine for parsing the template files.
add-student.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Add User</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="../css/shards.min.css"> -->
</head>
<body>
<div class="container my-5">
<h3> Add Student</h3>
<div class="card">
<div class="card-body">
<div class="col-md-10">
<form action="#" th:action="@{/students/add}" th:object="${student}" method="post">
<div class="row">
<div class="form-group col-md-8">
<label for="name" class="col-form-label">Name</label> <input type="text" th:field="*{name}" class="form-control" id="name" placeholder="Name"> <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="email" class="col-form-label">Email</label> <input type="text" th:field="*{email}" class="form-control" id="email" placeholder="Email"> <span th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="phoneNo" class="col-form-label">Phone No</label> <input type="text" th:field="*{phoneNo}" class="form-control" id="phoneNo" placeholder="PhoneNo"> <span th:if="${#fields.hasErrors('phoneNo')}" th:errors="*{phoneNo}" class="text-danger"></span>
</div>
<div class="col-md-6">
<input type="submit" class="btn btn-primary" value="Add Student">
</div>
<div class="form-group col-md-8"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
List of Students - index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Users</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="../css/shards.min.css"> -->
</head>
<body>
<div class="container my-2">
<div class="card">
<div class="card-body">
<div th:switch="${students}" class="container my-5">
<p class="my-5">
<a href="/students/signup" class="btn btn-primary"><i
class="fas fa-user-plus ml-2"> Add Student</i></a>
</p>
<div class="col-md-10">
<h2 th:case="null">No Students yet!</h2>
<div th:case="*">
<table class="table table-striped table-responsive-md">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone No</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="student : ${students}">
<td th:text="${student.name}"></td>
<td th:text="${student.email}"></td>
<td th:text="${student.phoneNo}"></td>
<td><a th:href="@{/students/edit/{id}(id=${student.id})}" class="btn btn-primary"><i class="fas fa-user-edit ml-2"></i></a></td>
<td><a th:href="@{/students/delete/{id}(id=${student.id})}" class="btn btn-primary"><i class="fas fa-user-times ml-2"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Update Student - update-student.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Update User</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<h3> Update Student</h3>
<div class="card">
<div class="card-body">
<div class="col-md-8">
<form action="#" th:action="@{/students/update/{id}(id=${student.id})}" th:object="${student}" method="post">
<div class="row">
<div class="form-group col-md-6">
<label for="name" class="col-form-label">Name</label> <input type="text" th:field="*{name}" class="form-control" id="name" placeholder="Name"> <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="email" class="col-form-label">Email</label> <input type="text" th:field="*{email}" class="form-control" id="email" placeholder="Email"> <span th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="phoneNo" class="col-form-label">Phone No</label> <input type="text" th:field="*{phoneNo}" class="form-control" id="phoneNo" placeholder="phoneNo"> <span th:if="${#fields.hasErrors('phoneNo')}" th:errors="phoneNo" class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<input type="submit" class="btn btn-primary" value="Update Student">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
8. Running the Application
Finally, let’s define the application’s entry point. Like most Spring Boot applications, we can do this with a plain old main() method:
package net.javaguides.springboot.tutorial;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
9. Demo
Let's access the above-deployed web application using http://localhost:8080 Initially, you don't have any students in the list so let's add a new student first.
Add Student Screen
List of Students Screen
Update Student Screen
Delete Student Screen
10. Conclusion
In this tutorial, we learned how to build a basic CRUD web application with Spring Boot and Thymeleaf.
The source code of this tutorial is available on my GitHub Repository - https://github.com/RameshMF/springboot-thymeleaf-crud-tutorial.
The source code examples available on my
GitHub Repository.
Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours
Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course
You can download source code of this tutorial from my GitHub repository, the link has given at end of this tutorial.
ReplyDeleteplease can you show us the "application.properties" file for this project (:
ReplyDeleteI have configured default settings in this spring boot thymeleaf crud example tutorial so the application.properties file is not required. If you want to use MySQL database or other stuff to configure then you should use application.properties file. In this example tutorial, the application.properties file is empty. You can checkout source code of this tutorial at my GitHub repository.
DeleteHi I am having an error like this:
ReplyDeleteFailed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.
Reason: Failed to determine a suitable driver class
Action:
Consider the following:
If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).
What up ?
ReplyDeleteplease provide database connection system of this project...
ReplyDeleteWe are using H2 database with default configuration in this tutorial so the application.properties file is not required. If you want to use MySQL database or other stuff to configure then you should use application.properties file. In this example tutorial, the application.properties file is empty. You can checkout source code of this tutorial at my GitHub repository.
DeleteI am using Mysql so I added below details in application.properties
ReplyDeletespring.datasource.url = jdbc:mysql://localhost:3306/demo?useSSL=false
spring.datasource.username = root
spring.datasource.password = root
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.hibernate.ddl-auto = update
spring.jpa.show-sql=true
But I am facing this issue
Description:
Failed to bind properties under '' to com.zaxxer.hikari.HikariDataSource:
Property: driverclassname
Value: com.mysql.cj.jdbc.Driver
Origin: "driverClassName" from property source "source"
Reason: Failed to load driver class com.mysql.cj.jdbc.Driver in either of HikariConfig class loader or Thread context classloader
Action:
Update your application's configuration
We are using H2 database with default configuration in this tutorial so the application.properties file is not required.
DeleteIf you want to use MySQL database then add MySQL driver dependency to pom.xml.
i am not able to build this project
ReplyDeletei am sorry .. i am able to build now..
Deletei was getting this error "hibernate-commons-annotations-4.0.1.Final.jar; invalid LOC header (bad signature)"
But when i remove all jars in my repository .. and updated again ..
good job ramesh .. i just found your web site .. it is very help fulll to upgrade my skills as full stack developer
DeleteI am getting login page.. what i do...???
ReplyDeleteRemove Security dependency from your pom.xml or configure it.
Deletegood job!
ReplyDelete