Development

Thymeleaf로 동적 웹 페이지를 만드는 방법

sonpro 2023. 3. 10. 16:10
반응형

Thymeleaf

How to Create Dynamic Web Pages with Thymeleaf

Thymeleaf is a modern server-side Java template engine that allows developers to create dynamic web pages. It is a popular choice for web developers because it is easy to use, flexible, and integrates well with other Java frameworks. In this blog post, we will explore how to create dynamic web pages with Thymeleaf.

Getting Started with Thymeleaf

Before we dive into creating dynamic web pages with Thymeleaf, let's first understand what Thymeleaf is and how it works. Thymeleaf is a server-side Java template engine that allows developers to create web pages by combining HTML, CSS, and JavaScript with dynamic data. Thymeleaf templates are processed on the server-side, which means that the final HTML is generated and sent to the client's browser.

To get started with Thymeleaf, you need to add the Thymeleaf dependency to your project. You can do this by adding the following code to your pom.xml file:

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>

Once you have added the Thymeleaf dependency to your project, you can start creating dynamic web pages with Thymeleaf.

Creating Dynamic Web Pages with Thymeleaf

To create a dynamic web page with Thymeleaf, you need to create a Thymeleaf template. A Thymeleaf template is an HTML file that contains Thymeleaf expressions. Thymeleaf expressions are enclosed in curly braces {} and can be used to display dynamic data, iterate over collections, and conditionally display content.

Let's take a look at an example Thymeleaf template:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Dynamic Web Page with Thymeleaf</title>
</head>
<body>
    <h1 th:text="${pageTitle}"></h1>
    <ul>
        <li th:each="item : ${items}" th:text="${item}"></li>
    </ul>
</body>
</html>

In this example, we have created a simple HTML page that displays a title and a list of items. The dynamic data is displayed using Thymeleaf expressions. The th:text attribute is used to display the dynamic data, and the th:each attribute is used to iterate over the items collection.

To render this Thymeleaf template, you need to create a controller that returns the model data. Here's an example controller:

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("pageTitle", "My Dynamic Web Page");
        model.addAttribute("items", Arrays.asList("Item 1", "Item 2", "Item 3"));
        return "home";
    }
}

In this example, we have created a controller that returns the home view. The home view is the name of the Thymeleaf template that we created earlier. The Model object is used to pass data to the view. We have added two attributes to the model: pageTitle and items.

When the user visits the home page, the home method in the HomeController class is called, and the model data is added to the Model object. Thymeleaf then processes the home.html template and generates the final HTML, which is sent to the client's browser.

Conclusion

Thymeleaf is a powerful and flexible server-side Java template engine that allows developers to create dynamic web pages. In this blog post, we have explored how to create dynamic web pages with Thymeleaf. We have seen how to create a Thymeleaf template and how to render it using a controller. Thymeleaf is a great choice for web developers who want to create dynamic web pages quickly and easily.

반응형