Physical Address
14. How to Update Data in MySQL Table Using Spring Boot and Thymeleaf
In this tutorial, you will learn how to edit data on an HTML page and update the corresponding records in the database using Spring Boot.
Key files involved:
index.html (the main page displaying data)
index.html (the main page displaying data)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book Details System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Book Details System</h1>
<nav class="navbar navbar-dark bg-primary">
<span>
<a th:href="@{/index}" class="navbar-brand">Home</a>
<a th:href="@{/addnewbook}" class="navbar-brand">New Book</a>
<a th:href="@{/}" class="navbar-brand">Edit Book</a>
</span>
</nav>
<div class="container">
<table border="1" class="table">
<tr>
<th>Book Name</th>
<th>Author</th>
<th>Publisher</th>
<th>Description</th>
<th>Price</th>
<th>Update</th>
</tr>
<tr th:each="book:${books}">
<td th:text="${book.book_name}"></td>
<td th:text="${book.book_author}"></td>
<td th:text="${book.book_publisher}"></td>
<td th:text="${book.book_description}"></td>
<td th:text="${book.book_price}"></td>
<td><a th:href="@{/editbook/{book_id}(book_id=${book.book_id})}" class="btn btn-primary">Edit</a></td>
</tr>
</table>
</div>
</body>
</html>BookController.java (handles displaying the form to add a new book on the frontend)
BookController.java (handles the update logic on the backend)
package com.codersstash.book_details.controller;
import com.codersstash.book_details.entity.Book;
import com.codersstash.book_details.service.BookService;
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;
@Controller
public class BookController {
private final BookService bookService;
@Autowired
public BookController(BookService bookService) {
this.bookService = bookService;
}
@GetMapping("/index")
public String showAllBooks(Model model){
model.addAttribute("books", bookService.getAllBooks());
return "index";
}
@GetMapping("/addnewbook")
public String getNewBookForm(Model model){
Book book = new Book();
model.addAttribute("book", book);
return "addNewBookForm";
}
@PostMapping("/saveBook")
public String addNewBookForm(@ModelAttribute("book") Book book){
bookService.saveBook(book);
return "redirect:/index";
}
@GetMapping("/editbook/{book_id}")
public String updateBook(@PathVariable int book_id, Model model){
model.addAttribute("book", bookService.getBookById(book_id));
return "updateBookForm";
}
}Display the Edit button on index.html
updateBookForm.html (the form page for editing book details)
updateBookForm.html (the form page for editing book details)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book Details System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Book Details System</h1>
<nav class="navbar navbar-dark bg-primary">
<span>
<a th:href="@{/index}" class="navbar-brand">Home</a>
<a th:href="@{/addnewbook}" class="navbar-brand">New Book</a>
<a th:href="@{/}" class="navbar-brand">Edit Book</a>
</span>
</nav>
<div class="container col-4">
<h2>Edit Book</h2>
<form action="#" th:action="@{/saveBook}" th:object="${book}" method="post">
<input type="hidden" th:field="*{book_id}">
<input type="text" th:field="*{book_name}" placeholder="Book Name" class="form-control mb-4">
<input type="text" th:field="*{book_author}" placeholder="Author" class="form-control mb-4">
<input type="text" th:field="*{book_publisher}" placeholder="Publisher" class="form-control mb-4">
<input type="text" th:field="*{book_description}" placeholder="Description" class="form-control mb-4">
<input type="text" th:field="*{book_price}" placeholder="Price" class="form-control mb-4">
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</body>
</html>After editing the data, the updated information is displayed on the index.html page.
After editing the data, the updated information is saved to the database table in the schema.
View the complete implementation in the GitHub repository branch : book-details-edit-book
