Adding Fragments, Headers, and Footers in Spring Boot
Table of Contents:
- Introduction
- Understanding Fragments in Spring Boot
- Adding Headers and Footers in Web Pages
- Code Implementation and Example
- Conclusion
Introduction:
In modern web development, reusing components such as headers and footers across multiple pages helps maintain consistency and reduces repetitive code. In this article, we’ll explore how to add fragments (headers and footers) to your web pages using Spring Boot. You’ll learn how to structure your application, write code to achieve reusable layouts, and enhance your web pages effectively.
Understanding Fragments in Spring Boot:
Fragments in web development refer to reusable components like headers, footers, or any part of a page that you wish to include across multiple pages. Spring Boot, paired with Thymeleaf, offers an easy way to implement such fragments by allowing you to define these sections in separate files and include them as needed.
When to Use Fragments:
- Maintainability: Fragments ensure that any change to the header or footer is automatically applied to all pages.
- Reusability: Allows you to reuse code across different web pages.
- Consistency: Ensures a uniform look across your website.
Adding Headers and Footers in Web Pages:
Header and Footer Structure:
We’ll create a header, footer, and main content sections for your web pages. These sections will reside in separate files, and we’ll use Thymeleaf to include them dynamically in the main HTML file.
Code Implementation and Example:
Main Application Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
package org.studyeasy.SpringStarter; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringStarterApplication { public static void main(String[] args) { SpringApplication.run(SpringStarterApplication.class, args); } } |
This is a basic Spring Boot starter class, and it initiates the application using the SpringApplication.run() method.
Home Controller:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
package org.studyeasy.SpringStarter.Controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/home") public String home(Model model) { return "home"; } @GetMapping("/about") public String about(Model model) { return "about"; } @GetMapping("/book") public String book(Model model) { return "book"; } } |
This controller defines three routes:
- /home: Directs to the home page.
- /about: Displays the about page.
- /book: Navigates to a book page.
Fragment Inclusion Example:
In Thymeleaf, fragments are included using the th:replace or th:include directive.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Web Page with Fragments</title> </head> <body> <!-- Including the header fragment --> <div th:replace="fragments/header :: header"></div> <!-- Main content of the page --> <div> <h1>Welcome to the Home Page</h1> <p>This is the content of the home page.</p> </div> <!-- Including the footer fragment --> <div th:replace="fragments/footer :: footer"></div> </body> </html> |
This is an example of a basic HTML page where the header and footer are included as fragments from separate files.
Detailed Explanation:
1. Header and Footer Fragment Files:
You need to create two fragment files header.html and footer.html inside the resources/templates/fragments/ directory.
Header (header.html):
Website Header
Footer (footer.html):
These files represent the header and footer, which can be included in various pages.
2. Main Content Page:
In the example above, the home.html file includes the header and footer using th:replace. The th:replace directive dynamically inserts the content of the specified fragment into the location where it’s called.
Conclusion:
By using Thymeleaf fragments in Spring Boot, you can create a modular and maintainable web page structure, reusing code such as headers and footers across multiple pages. This not only improves maintainability but also ensures consistency across your site.