Spring Boot Backend Development Course, Blog Screen Layout Example, Creating HTML View

Introduction

In this course, we will learn how to develop a backend web application using Spring Boot. Spring Boot is a framework that helps build Spring applications quickly without complex configurations. This course will particularly use a blog web application as an example, and we will explain in detail about screen composition and creating HTML views.

What is Spring Boot?
Blog Screen Composition
Project Setup
Creating HTML Views
Testing and Deployment

What is Spring Boot?

Spring Boot is a project built on the Spring Framework that simplifies the configuration of traditional Spring applications, allowing developers to quickly create and deploy prototypes. The main features of Spring Boot are as follows:

Auto-configuration: Spring Boot performs many configurations automatically by default, preventing developers from being tied down by complex settings.
Starter Dependencies: It helps easily add required dependencies with a single declaration.
Embedded Server: By using embedded servers such as Tomcat and Jetty, applications can be run without separate server setups.
Easy Profile Management: It provides the ability to configure settings differently as needed in various environments.

Blog Screen Composition

The structure of the blog application is very simple. It basically consists of pages where users can view and create posts. Additionally, each post can include features such as comments and tags. In this course, we will be creating a simple screen layout.

Screen Components

Header: Includes the blog title and logo, along with the navigation menu.
Post List: Displays a preview of the title, author, creation date, and content.
Post Detail View: Shows the content and comments of the selected post.
Footer: Provides copyright information and additional information about the blog.

Project Setup

The project we will use in this course is based on Spring Boot and manages required dependencies using Maven. First, we will add the necessary dependencies to the `pom.xml` file.


<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

Creating HTML Views

HTML views play an important role in displaying data to users. In Spring Boot, we can create dynamic HTML views using Thymeleaf. Below is an example showing the basic HTML structure of a blog.

Basic Layout of the Blog


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Blog Title</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>

    <header>
        <h1>My Blog</h1>
        <nav>
            <a th:href="@{/}">Home</a>
            <a th:href="@{/posts}">Post List</a>
            <a th:href="@{/new}">Create Post</a>
        </nav>
    </header>

    <main>
        <section class="posts">
            <h2>Recent Posts</h2>
            <div th:each="post : ${posts}">
                <h3 th:text="${post.title}"></h3>
                <p>Author: <span th:text="${post.author}"></span> | <span th:text="${post.createdDate}"></span></p>
                <p th:text="${post.content}"></p>
                <a th:href="@{/posts/{id}(id=${post.id})}">View More</a>
            </div>
        </section>
    </main>

    <footer>
        <p>Copyright © 2023 My Blog</p>
    </footer>

</body>
</html>

Post Detail View


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Post Detail View</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>

    <header>
        <h1 th:text="${post.title}"></h1>
        <nav>
            <a th:href="@{/}">Home</a>
            <a th:href="@{/posts}">Post List</a>
        </nav>
    </header>

    <main>
        <article>
            <h2 th:text="${post.title}"></h2>
            <p>Author: <span th:text="${post.author}"></span> | <span th:text="${post.createdDate}"></span></p>
            <p th:text="${post.content}"></p>
        </article>

        <h3>Comments</h3>
        <div th:each="comment : ${post.comments}">
            <p><span th:text="${comment.author}"></span>: <span th:text="${comment.content}"></span></p>
        </div>

        <h3>Write a Comment</h3>
        <form th:action="@{/posts/{id}/comments(id=${post.id})}" method="post">
            <input type="text" name="author" placeholder="Author" required />
            <textarea name="content" placeholder="Enter your comment" required></textarea>
            <button type="submit">Submit Comment</button>
        </form>
    </main>

    <footer>
        <p>Copyright © 2023 My Blog</p>
    </footer>

</body>
</html>

Testing and Deployment

After writing the Spring Boot application, testing and deployment stages are important. Spring Boot supports unit testing using JUnit and Mockito. Moreover, it can be easily deployed using AWS, Heroku, and other cloud services.

Unit Test Example


import static org.mockito.Mockito.*;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.mockito.InjectMocks;
import org.mockito.Mock;
import org.mockito.MockitoAnnotations;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;

public class PostControllerTest {

    @InjectMocks
    private PostController postController;

    @Mock
    private PostService postService;

    @Autowired
    private MockMvc mockMvc;

    @BeforeEach
    public void setup() {
        MockitoAnnotations.openMocks(this);
        mockMvc = MockMvcBuilders.standaloneSetup(postController).build();
    }

    @Test
    public void testGetPost() throws Exception {
        // Mock setup to return post information
        when(postService.getPostById(1L)).thenReturn(new Post(1L, "Test Title", "Author", "Content"));

        mockMvc.perform(get("/posts/1"))
            .andExpect(status().isOk())
            .andExpect(model().attributeExists("post"))
            .andExpect(view().name("post/view"));
    }
}

Conclusion

In this course, we learned how to build the backend of a blog application using Spring Boot and how to create basic HTML views. We were able to develop efficiently by leveraging the advantages of Spring Boot. Through practical exercises, we understood the basic principles of Spring Boot and Thymeleaf, laying the groundwork to apply them in real projects. I hope to add more features and broaden my understanding of Spring Boot by applying it to various projects in the future.