Physical Address
13. Spring Boot Save Data to MySQL with Thymeleaf Form and Bootstrap
This post explains the process of saving data from an HTML page into a database table using Spring Boot.
The index.html page includes a navigation link labeled New Book that directs users to the add new book form. This link uses Thymeleaf syntax: <a th:href="@{/addnewbook}" class="navbar-brand">New Book</a>.
In the Spring Boot controller class, a method handles the request to load the addnewbook.html form page.
The addNewBookForm.html contains the HTML form where users enter book details.
The form submits data using a POST request with the form action defined as <form action="#" th:action="@{/saveBook}" th:object="${book}" method="post">.
The add new book interface provides a user-friendly form for inputting book information.
The controller defines a save function that captures the submitted form data, processes it, and saves it in the database.
After inserting the data, the newly added records are displayed back on the index.html page for user confirmation.
The inserted data is stored persistently in the MySQL database table.
This post also references the relevant code files including BookController.java, index.html, and addNewBookForm.html to provide full context on the implementation.
BookController.java
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.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";
}
}index.html
<!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>
</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>
</tr>
</table>
</div>
</body>
</html>addNewBookForm.html
<!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>Add New Book</h2>
<form action="#" th:action="@{/saveBook}" th:object="${book}" method="post">
<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">Save</button>
</form>
</div>
</body>
</html>For complete implementation details, refer to the GitHub repository branch : book-details-newbook
