15. How to Delete Data from MySQL Table Using Spring Boot and Thymeleaf

In this tutorial, you will learn how to delete data directly from an HTML page and update the corresponding database table using Spring Boot.

Key files involved:

index.html (the web page with delete functionality)

<!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>
            <th>Delete</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>
            <td><a th:href="@{/deletebook/{book_id}(book_id=${book.book_id})}" class="btn btn-danger">Delete</a></td>
        </tr>
    </table>
</div>
</body>

</html>

BookController.java (handles the delete request in 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";
    }
    @GetMapping("/deletebook/{book_id}")
    public String deleteBook(@PathVariable int book_id){
        bookService.deleteBook(book_id);
        return "redirect:/index";
    }
}

Explore the complete code and implementation in the GitHub repository branch : book-details-delete-book

Leave a Reply

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