Hello, dear friends, in this video, we will continue to integrate the template for our project. So, let's begin. In the previous video, we designed our AdminLayout page. Now, it's time to learn how to use the Thymeleaf component in Spring. So, what is Thymeleaf?

Thymeleaf is a Java-based library, used to create a web application. It provides good support for serving XHTML and HTML 5 and web applications. Thymeleaf converts your files into well-formed XML files. It contains six types of templates as XML: valid XML, XHTML, valid XHTML, HTML 5 and legacy HTML 5. All templates, except Legacy HTML 5, refer to well formed, valid XML files. Legacy HTML 5 allows us to render the HTML 5 tags in the web pages, including not closed tags. So, how can we put this to use? If you look at the pom.xml, you can see that we have already added this dependency to our project in the first video. Now, first, we have to define the Thymeleaf library path on the page. th=thymeleaf.org. Also, we'll be using Thymeleaf's layout tag.

So, I'll include the layout as well. This will be enough for the time being. This page is now complete. As you can see, there is now a content area. Now, we will fill the section on the other pages, therefore, we need to update this area as content. In Thymeleaf, we will use a layout fragment tag to determine the content area. And in pages, we will call the content with this tag; layout:fragment= "content." Done.

Let's add another HTML page and name it AdminHome. We must include Thymeleaf libraries on this page. Now, on this page, first we have to define our layout with the layout decorator. Layout:decorator = "AdminLayout." Now, in the body, let's define a div. In the div, we have to define the layout fragment as content. By doing so, the content section in the AdminLayout will match this area. Now in content, if you want, we can add a text, "Welcome to the Admin Home Page." For now, This will be enough. in the following videos, we can change them with the listing page. All right, done. Now, let's add the other layout page for employees, add a new HTML file and call it EmployeeLayout, now copy all elements from the AdminLayout. Now, paste it into the EmployeeLayout. On this page, we will only change the menu items. Actually, as I said before, if you want, we can use only one layout page with an if-else statement like, if the role is admin show, we can control these menu items. Nevertheless, we will create this in the microservice project. Now, let's change menu items. First one is the product again, and the product list. Delete this one. The second one will be sale. Now, in the sale submenu, this will be basket or sale basket.

Done. In the content area if you want, you can change this layout fragment, but you don't need to. Let's add another HTML page and name it EmployeeHome. Now, we can copy from AdminHome. Change layout with EmployeeLayout. Let's also change the text. Done. Let's take a break for now. In the following video, we will begin designing login pages and see our templates. So, I'll see you there.