Enhancing the Homepage to Display Blog Posts

Introduction
Content
Conclusion

Introduction

A well-designed homepage is crucial for user engagement. In this guide, we focus on enhancing the homepage of a Spring Boot application to display blog posts dynamically. This enhancement bridges backend logic and frontend presentation, improving user experience.

Key Objectives:

Navigate and modify the home.html file.
Ensure the HomeController.java serves blog post data.
Integrate backend models (Post.java) with the frontend.

Content

Exploring the Existing Setup

The existing structure includes:

Controller: HomeController.java manages routing and data serving.
Frontend Template: home.html serves as the base template.
Model: Post.java represents blog entities.

Updating the Homepage (home.html)

The home.html file dynamically displays blog content using Thymeleaf syntax.

Original Code:

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
</head>
<body>
    <h1>Welcome to the Blog</h1>
    <div>
        <p>No blog posts to display.</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Homepage</title>

</head>

<body>

<h1>Welcome to the Blog</h1>

<div>

<p>No blog posts to display.</p>

</div>

</body>

</html>

Updated Code:

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
</head>
<body>
    <h1>Welcome to the Blog</h1>
    <div>
        <ul>
            <!-- Loop through the list of posts -->
            <li th:each="post : ${posts}">
                <h2 th:text="${post.title}">Blog Title</h2>
                <p th:text="${post.content}">Blog Content</p>
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Homepage</title>

</head>

<body>

<h1>Welcome to the Blog</h1>

<div>

<ul>

<h2 th:text="${post.title}">Blog Title</h2>

<p th:text="${post.content}">Blog Content</p>

</li>

</ul>

</div>

</body>

</html>

Modifying HomeController.java

The HomeController is updated to fetch and pass blog data to the template.

Original Code:

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        return "home";
    }
}

@Controller

public class HomeController {

@GetMapping("/")

public String home(Model model) {

return "home";

}

Updated Code:

@Controller
public class HomeController {
    @Autowired
    private PostRepository postRepository;

    @GetMapping("/")
    public String home(Model model) {
        List posts = postRepository.findAll();
        model.addAttribute("posts", posts);
        return "home";
    }
}

@Controller

public class HomeController {

@Autowired

private PostRepository postRepository;

@GetMapping("/")

public String home(Model model) {

List posts = postRepository.findAll();

model.addAttribute("posts", posts);

return "home";

}

Connecting with the Blog Model

The Post.java entity defines the structure of blog posts.

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

    private String title;
    private String content;

    // Getters and Setters
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

@Entity

public class Post {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Long id;

private String title;

private String content;

// Getters and Setters

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getContent() {

return content;

}

public void setContent(String content) {

this.content = content;

}

Output and Final Verification

Start the application using mvn spring-boot:run and access the homepage at http://localhost:8080.

Expected Output:

Welcome to the Blog

1. Blog Title: Understanding Thymeleaf
   Blog Content: Thymeleaf is a modern server-side template engine for Java-based applications.

2. Blog Title: Exploring Spring Boot
   Blog Content: Spring Boot simplifies application development by offering pre-configured setups.

Welcome to the Blog

1. Blog Title: Understanding Thymeleaf

Blog Content: Thymeleaf is a modern server-side template engine for Java-based applications.

2. Blog Title: Exploring Spring Boot

Blog Content: Spring Boot simplifies application development by offering pre-configured setups.

Conclusion

This guide demonstrated how to enhance the homepage of a Spring Boot application to dynamically display blog posts.

Key Takeaways:

Utilized Thymeleaf for dynamic content rendering.
Integrated HomeController with PostRepository.
Ensured Post.java facilitated data handling.

S05L01 – Update homepage, for post links