Spring Boot Thymeleaf CRUD example
Tags: webdev, java, todayilearned, programming
Published: 2022-10-27 10:55:13

In this tutorial, we're gonna build a Spring Boot Thymeleaf CRUD example with Maven that use Spring Data JPA to interact with H2/MySQL/PostgreSQL database. You'll know:
<ul>
	<li>How to configure Spring Data, JPA, Hibernate to work with Database</li>
	<li>How to define Data Entity and Repository interfaces</li>
	<li>Way to create Spring Controller to process HTTP requests</li>
   	<li>Way to use Spring Data JPA to interact with H2/MySQL/PostgreSQL Database</li>
	<li>How to use Thymeleaf template engine for View layer</li>
</ul>

Full Article: [Spring Boot Thymeleaf CRUD example](https://www.bezkoder.com/spring-boot-thymeleaf-example/)

More Practice: [Spring Boot Thymeleaf Pagination example](https://www.bezkoder.com/thymeleaf-pagination/)

<h2><span id="Overview">Overview of Spring Boot Thymeleaf example</span></h2>
We will build a Spring Boot CRUD example using Thymeleaf template engine for View layer and Spring Data JPA with Database in that:
<ul>
	<li>Each Course (entity) has id, name, description, price, enabled status.</li>
	<li>CRUD operations are supported: create, retrieve, update, delete Courses.</li>
	<li>User can search Courses by name.</li>
</ul>

\- Create new entity object:

![spring-boot-thymeleaf-example-crud-create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkbmhzrfuqtp3lujt9xt.png)

\- Retrieve all objects:

![spring-boot-thymeleaf-example-crud-retrieve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pws69mhqvdiu2syqf464.png)

\- Update status of an item:

![spring-boot-thymeleaf-example-crud-update-status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7c5tbbw9vbt5aqb7n6x.png)

\- Update an object in its own page:

![spring-boot-thymeleaf-example-crud-update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwju5n4z6o3hht8ceoka.png)

\- Search by name:

![spring-boot-thymeleaf-example-crud-search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bilzr0m0dqyz08w2vltf.png)

\- Delete an item:

![spring-boot-thymeleaf-example-crud-delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8seq4vjqiow79wabppnt.png)

<h2><span id="Technology">Technology</span></h2>
<ul>
    	<li>Java 8</li>
    	<li>Spring Boot 2.7 (with Spring Web MVC, Spring Data JPA, Thymeleaf)</li>
    	<li>H2/MySQL/PostgreSQL Database</li>
    	<li>Maven 3.6.1</li>
	<li>Bootstrap 4</li>
	<li>jQuery 3.6.1</li>
	<li>Font Awesome</li>
</ul>

<h2><span id="Project_Structure">Project Structure</span></h2>

![spring-boot-thymeleaf-example-crud-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qo2v1cns3i1m912jo2o.png)

Let me explain it briefly.

- <code>Course</code> class corresponds to entity and table <em>courses</em>.
- <code>CourseRepository</code> is an interface that extends <a href="https://docs.spring.io/spring-data/jpa/docs/current/api/org/springframework/data/jpa/repository/JpaRepository.html">JpaRepository</a> for CRUD methods and custom finder methods. It will be autowired in <code>CourseController</code>.
- <code>CourseController</code> is a <a href="https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/stereotype/Controller.html">Controller</a> which has request mapping methods for RESTful requests such as: <em>getAll</em>, <em>addCourse</em>, <em>saveCourse</em>, <em>editCourse</em>, <em>deleteCourse</em>, <em>updateCourseEnabledStatus</em>.

- <code>static/css</code> contains custom css style.
- <code>template</code> stores HTML template files for the project.

- Configuration for Spring Datasource, JPA & Hibernate in <code>application.properties</code>.
- <code>pom.xml</code> contains dependencies for Spring Boot, Thymeleaf, Bootstrap and Database.

For more steps and Github source code, please visit:
[Spring Boot Thymeleaf CRUD example](https://www.bezkoder.com/spring-boot-thymeleaf-example/)

More Practice: [Spring Boot Thymeleaf Pagination example](https://www.bezkoder.com/thymeleaf-pagination/)

<h2><span id="Further_Reading">Further Reading</span></h2>
More Derived queries at:
<a href="https://www.bezkoder.com/jpa-repository-query/">JPA Repository query example in Spring Boot</a>

Custom query with <code>@Query</code> annotation:
<a href="https://www.bezkoder.com/spring-jpa-query/">Spring JPA @Query example: Custom query in Spring Boot</a>

To sort/order by multiple fields:
<a href="https://bezkoder.com/spring-data-sort-multiple-columns/">Spring Data JPA Sort/Order by multiple Columns | Spring Boot</a>

Handle Exception for this Rest APIs is necessary:
- <a href="https://bezkoder.com/spring-boot-controlleradvice-exceptionhandler/">Spring Boot @ControllerAdvice & @ExceptionHandler example</a>
- <a href="https://bezkoder.com/spring-boot-restcontrolleradvice/">@RestControllerAdvice example in Spring Boot</a>

Or way to write Unit Test:
- <a href="https://www.bezkoder.com/spring-boot-unit-test-jpa-repo-datajpatest/">Spring Boot Unit Test for JPA Repositiory</a>
- <a href="https://www.bezkoder.com/spring-boot-webmvctest/">Spring Boot Unit Test for Rest Controller</a>

Fullstack CRUD App:
- <a href="https://www.bezkoder.com/spring-boot-vue-js-crud-example/">Vue + Spring Boot example</a>
- <a href="https://www.bezkoder.com/angular-spring-boot-crud/">Angular 8 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/angular-10-spring-boot-crud/">Angular 10 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/angular-11-spring-boot-crud/">Angular 11 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/angular-12-spring-boot-crud/">Angular 12 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/spring-boot-angular-13-crud/">Angular 13 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/spring-boot-angular-14-crud/">Angular 14 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/spring-boot-angular-15-crud/">Angular 15 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/spring-boot-angular-16-crud/">Angular 16 + Spring Boot example</a>
- <a href="https://www.bezkoder.com/react-spring-boot-crud/">React + Spring Boot example</a>

More Practice:
- <a href="https://www.bezkoder.com/spring-boot-security-login-jwt/">Spring Boot with Spring Security & JWT Authentication</a>
- <a href="https://www.bezkoder.com/spring-boot-rest-xml/">Spring Boot Rest XML example – Web service with XML Response</a>
- <a href="https://www.bezkoder.com/spring-boot-file-upload/">Spring Boot Multipart File upload example</a>
- <a href="https://www.bezkoder.com/spring-boot-pagination-sorting-example/">Spring Boot Pagination and Sorting example</a>

Associations:
- <a href="https://www.bezkoder.com/jpa-one-to-one/">Spring Boot One To One example with JPA, Hibernate</a>
- <a href="https://www.bezkoder.com/jpa-one-to-many/">Spring Boot One To Many example with JPA, Hibernate</a>
- <a href="https://www.bezkoder.com/jpa-many-to-many/">Spring Boot Many to Many example with JPA, Hibernate</a>