Spring Boot Backend Development Course, Blog Screen Composition Example, Adding Dependencies for Using Thymeleaf

Introduction

Spring Boot is a lightweight web application framework based on the Spring Framework, designed to help developers quickly build applications. In particular, Spring Boot offers many features in backend development, such as RESTful web services, database integration, and security management. In this tutorial, we will cover an example of configuring a blog screen using Spring Boot and learn about adding dependencies for Thymeleaf.

Blog Screen Configuration Example

1. Creating the Project

To create a Spring Boot project, we will use Spring Initializr. Please select the following settings.

Project: Gradle Project
Language: Java
Spring Boot: 2.7.0 (select the latest version)
Group: com.example
Artifact: blog
Name: blog
Description: Blog application
Package name: com.example.blog
Packaging: Jar
Java: 11

Next, add ‘Spring Web’, ‘Thymeleaf’, ‘Spring Data JPA’, and ‘H2 Database’ in the Dependencies section and generate the project.

2. Adding Dependencies

Once the Spring Boot project is created, let’s check the required dependencies in the build.gradle file. The dependencies should be added as shown below.

dependencies {
        implementation 'org.springframework.boot:spring-boot-starter-web'
        implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
        implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
        runtimeOnly 'com.h2database:h2'
    }

3. Designing the Blog Domain

Now, let’s design the domain model that will constitute the blog. A model representing blog posts is essential.

package com.example.blog.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Post {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private String content;

    // getters and setters
}

4. Adding the Repository

Let’s add the repository interface. This will contain the logic to interact with the database.

package com.example.blog.repository;

import com.example.blog.model.Post;
import org.springframework.data.jpa.repository.JpaRepository;

public interface PostRepository extends JpaRepository {
}

5. Adding the Service Layer

We will now add a service layer to manage blog posts. This will include methods for creating and retrieving posts.

package com.example.blog.service;

import com.example.blog.model.Post;
import com.example.blog.repository.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PostService {
    @Autowired
    private PostRepository postRepository;

    public List getAllPosts() {
        return postRepository.findAll();
    }

    public Post savePost(Post post) {
        return postRepository.save(post);
    }
}

6. Adding the Controller

Now, let’s add a controller to handle requests for the web application.

package com.example.blog.controller;

import com.example.blog.model.Post;
import com.example.blog.service.PostService;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/posts")
public class PostController {
    @Autowired
    private PostService postService;

    @GetMapping
    public String listPosts(Model model) {
        List posts = postService.getAllPosts();
        model.addAttribute("posts", posts);
        return "postList";
    }

    @GetMapping("/new")
    public String newPostForm(Model model) {
        model.addAttribute("post", new Post());
        return "postForm";
    }

    @PostMapping
    public String savePost(Post post) {
        postService.savePost(post);
        return "redirect:/posts";
    }
}

7. Configuring Thymeleaf Templates

Now, let’s configure the blog screen using Thymeleaf. Create postList.html and postForm.html files in the src/main/resources/templates folder.

postList.html

<!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
        <head>
            <title>Blog Post List</title>
        </head>
        <body>
            <h1>Blog Post List</h1>
            <a href="@{/posts/new}">Create New Post</a>
            <ul>
                <li th:each="post : ${posts}">
                    <h2 th:text="${post.title}"></h2>
                    <p th:text="${post.content}"></p>
                </li>
            </ul>
        </body>
    </html>

postForm.html

<!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
        <head>
            <title>Create New Post</title>
        </head>
        <body>
            <h1>Create New Post</h1>
            <form th:action="@{/posts}" method="post">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" required/>

                <label for="content">Content</label>
                <textarea id="content" name="content" required></textarea>

                <button type="submit">Save</button>
            </form>
        </body>
    </html>

Conclusion

In this tutorial, we learned how to create a simple blog application using Spring Boot. We implemented features for writing blog posts and retrieving the list of posts, as well as how to create HTML templates with Thymeleaf. Based on this tutorial, feel free to add more complex features to create your own blog.

Additional Resources

If you want to learn more, consider checking the following resources.