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.
Table of Contents
- 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.