{"id":167,"date":"2019-06-20T02:20:13","date_gmt":"2019-06-20T02:20:13","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?p=167"},"modified":"2019-06-20T02:20:13","modified_gmt":"2019-06-20T02:20:13","slug":"spring-boot-introduction-to-thymeleaf","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/spring-boot\/spring-boot-introduction-to-thymeleaf\/","title":{"rendered":"Spring Boot – Introduction to Thymeleaf"},"content":{"rendered":"

In this lesson, I would teach you how to display date in html form. We would use Thymeleaf to achieve this.<\/p>\n

 <\/p>\n

Overview of Thymeleaf<\/strong><\/p>\n

According to the Thymeleaf website<\/a>, “Thymeleaf is a modern server-side Java template engine for both web and standalone environment”. Thymeleaf is capable of processing JavaScript, HTML, XML, CSS and plain text.<\/p>\n

Before now, we use jsp (Java Server Pages) to process dynamic content. I would not spend time on why Thymeleaf is better than jsp. But we can be sure that Thymeleaf is easier to work with and likely would completely replace jsp.<\/p>\n

So let’s get started!<\/p>\n

 <\/p>\n

In this Tutorial…<\/strong><\/p>\n

First we are going to display all our entities in form (like a list).<\/p>\n

Next, we would add a data entry form for each of the entities.<\/p>\n

Finally we would add feature for Update and Delete of records<\/p>\n

Further in the tutorial, we would implement a login form using Spring Security.<\/p>\n

 <\/p>\n

Add Thymeleaf and other dependencies<\/strong><\/p>\n

Add the following Thymeleaf dependency to your pom.xml file
\n<\/p>\n

 <\/p>\n

<dependency><\/span>      \r\n   <groupId><\/span>org.springframework.boot<\/groupId><\/span>\r\n   <artifactId><\/span>spring-boot-starter-thymeleaf<\/artifactId><\/span>\r\n<\/dependency><\/span>\r\n\r\n<dependency><\/span>\r\n   <groupId><\/span>org.springframework<\/groupId><\/span>\r\n   <artifactId><\/span>spring-context<\/artifactId><\/span>\r\n<\/dependency><\/span>\r\n    \r\n<dependency><\/span>\r\n  <groupId><\/span>org.springframework<\/groupId><\/span>\r\n  <artifactId><\/span>spring-web<\/artifactId><\/span>\r\n<\/dependency><\/span>\r\n<\/pre>\n
 <\/p>\n
Save the file so the dependencies are downloaded to the classpath<\/p>\n
 <\/p>\n
Set up the Home Page<\/strong><\/p>\n
Create an index.html file inside the templates folder in the src\/main\/resources folder<\/p>\n
The content of the file would be as shown below:<\/p>\n
 <\/p>\n
<!DOCTYPE html><\/span>\r\n<html><\/span>\r\n<head><\/span>\r\n<meta<\/span> charset=<\/span>\"ISO-8859-1\"<\/span>><\/span>\r\n<title><\/span>Thymeleaf Tutorial<\/title><\/span>\r\n<\/head><\/span>\r\n<body><\/span>\r\n\r\n<h2><\/span>Welcome to Thymeleaf!<\/h2><\/span>\r\n\r\n<\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
 <\/p>\n
Create a file called HomeController inside the com.kindsonthegenius.social<\/strong> package.<\/p>\n
Annotate the class with @Controller directive<\/p>\n
Write a method inside this file to return the index page you created.<\/p>\n
The content of the HomeController file would be as shown below.<\/p>\n
<\/p>\n
@Controller<\/span>\r\npublic<\/span> class<\/span> HomeController<\/span> {<\/span>\r\n\t\r\n\t@RequestMapping<\/span>(<\/span>value=<\/span>\"\/home\"<\/span>)<\/span>\r\n\tpublic<\/span> static<\/span> String welcome<\/span>()<\/span> {<\/span>\r\n\t\treturn<\/span> \"index\"<\/span>;<\/span>\r\n\t}<\/span>\t\r\n}<\/span>\r\n<\/pre>\n
Save the file and launch the application<\/p>\n
Visit http:\/\/localhost:8080 and confirm that the page displays\u00a0 as shown below.<\/p>\n
 <\/p>\n
Add a navigation bar. This you do by modifying the index.html file as shown below. Just add the code below in the <body> <\/body> section<\/p>\n
 <\/p>\n
<div<\/span> align=<\/span>\"center\"<\/span>><\/span> \r\n\r\n<a<\/span> th:href=<\/span>\"@{posts}\"<\/span>><\/span>Posts<\/a><\/span> | \r\n<a<\/span> th:href=<\/span>\"@{students}\"<\/span>><\/span>Students<\/a><\/span> | \r\n<a<\/span> th:href=<\/span>\"@{users}\"<\/span>><\/span>Users<\/a><\/span>Users | \r\n<a<\/span> th:href=<\/span>\"@{locations}\"<\/span>><\/span>Locations<\/a><\/span> \r\n\r\n<\/div><\/span>\r\n<\/pre>\n
 <\/p>\n
Now, create four more html pages. Name them posts.html, students.html, users.html and location.html.<\/p>\n
Next, Copy across the content of index.html file into these pages.<\/p>\n
 <\/p>\n
We would start by working on the LocationController file. We would make the controller send a list of locations to the locations.html file.<\/p>\n
Open the LocationController file. Change the @RequestController annotation to @Controller<\/p>\n
Modify the getAllLocations function to the one below:<\/p>\n
 <\/p>\n
<\/p>\n
 @RequestMapping<\/span>(<\/span>value =<\/span> \"\/locations\"<\/span>)<\/span>\r\n public<\/span> String getAllLocations<\/span>(<\/span>Model model)<\/span> \r\n {<\/span>\t\t\t\t\r\n\tmodel.<\/span>addAttribute<\/span>(<\/span>\"locations\"<\/span>,<\/span> locationService.<\/span>getAllLocations<\/span>());<\/span>\t\t\r\n\treturn<\/span> \"locations\"<\/span>;<\/span>\t\t\r\n }<\/span>\r\n<\/pre>\n
 <\/p>\n
Finally, add the code below to the locations.html file.<\/p>\n
 <\/p>\n
<\/p>\n
<ul><\/span>\r\n    <li<\/span> th:each=<\/span>\"location : ${locations}\"<\/span>><\/span>\r\n        <span<\/span> th:text=<\/span>\"${location.name}\"<\/span>><\/span>Default<\/span><\/span>\r\n    <\/li><\/span>\r\n<\/ul><\/span>\r\n<\/pre>\n
 <\/p>\n
Launch the application and visit http:\/\/localhost:8080.<\/p>\n
Navigate to Locations and notice that you have list of locations displayed as a bulleted list.<\/p>\n
If you have challenges, I would recommend you watch the video.<\/p>\n
In the next lesson, we would see how work on other entities but I try to do it yourself first.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this lesson, I would teach you how to display date in html form. We would use Thymeleaf to achieve this.   Overview of Thymeleaf … <\/p>\n","protected":false},"author":1,"featured_media":169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[13],"class_list":["post-167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spring-boot-tutorials","tag-thymeleaf"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/167\/revisions\/170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media\/169"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\"Thymeleaf\"<\/a><\/p>\n