Physical Address
12. Spring Boot MySQL CRUD: Display Data on Index Page with Thymeleaf and Bootstrap
This tutorial explains how to display data from a database table on an HTML page using Spring Boot.
First, run a select query on your database to retrieve all the data inserted into the table. You can view the data using tools like MySQL Administrator.
Search for Bootstrap on the web to find a reliable stylesheet link.
Copy the Bootstrap stylesheet link and paste it within the <head> section of your HTML page to style your webpage.
Create an anchor (href) inside a <span> element to navigate or link to pages as need
The referenced href shows how links appear on the index.html page, enabling navigation within your application.
In the controller class, include logic to load and send the data to the index.html page when it is accessed.
The following image illustrates how to code the display of data on an HTML table using Thymeleaf templating engine.
On the HTML page, all the data from the database is rendered and displayed in a tabular format for easy viewing.
The code snippets from the BookController.java class to demonstrate how to fetch and prepare data for the view.
BookController.java
package com.codersstash.book_details.controller;
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;
@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";
}
}The code snippets from the structure of the index.html page where the data is presented.
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="@{/}" 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>For a complete understanding, explore the code and implementation on the GitHub repository branch : book-details-viewallbooks
