{"id":1932,"date":"2019-06-28T12:00:00","date_gmt":"2019-06-28T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/thymeleaf-spring-boot-complete-tutorial-step-by-step-with-source-codes\/"},"modified":"2026-07-05T03:23:53","modified_gmt":"2026-07-05T01:23:53","slug":"thymeleaf-spring-boot-complete-tutorial-step-by-step-with-source-codes","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/thymeleaf-spring-boot-complete-tutorial-step-by-step-with-source-codes\/","title":{"rendered":"Thymeleaf + Spring Boot \u2013 Complete Tutorial (Step by Step with Source Codes)"},"content":{"rendered":"<h5><strong><span style=\"color: #008000;\">1. Introduction to Thymeleaf<\/span> <a href=\"https:\/\/youtu.be\/kmvJbs3-Rg8\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>In this walk-through, we would build an application to store student records. Users would be able to:<\/p>\n<ul>\n<li>access list of students in html page<\/li>\n<li>add new student<\/li>\n<li>update student<\/li>\n<li>delete student<\/li>\n<\/ul>\n<p>We would learn the following technologies:<\/p>\n<ul>\n<li>Springboot<\/li>\n<li>JPA Repository<\/li>\n<li>H2 In-Memory Database<\/li>\n<li>Thymeleaf<\/li>\n<li>Javascript, Bootstrap and JQuery<\/li>\n<li>and more!<\/li>\n<\/ul>\n<p><strong>What is Thymeleaf?<\/strong> Thymeleaf is a server side template engine for processing pages (HTML5, XML, XHTML)<\/p>\n<p><strong>Thing to install: <\/strong><\/p>\n<p><strong><a href=\"https:\/\/dev.mysql.com\/downloads\/windows\/installer\/8.0.html\" target=\"_blank\" rel=\"noopener\">MySQL<\/a> <\/strong>&#8211; The free community edition can be gotten from <a href=\"https:\/\/dev.mysql.com\/downloads\/windows\/installer\/8.0.html\" target=\"_blank\" rel=\"noopener\">here<\/a><\/p>\n<p><strong><a href=\"https:\/\/download.springsource.com\/release\/STS\/3.9.9.RELEASE\/dist\/e4.12\/spring-tool-suite-3.9.9.RELEASE-e4.12.0-win32-x86_64.zip\" target=\"_blank\" rel=\"noopener\">Spring Tool Suite<\/a><\/strong> &#8211; download for free from <a href=\"https:\/\/download.springsource.com\/release\/STS\/3.9.9.RELEASE\/dist\/e4.12\/spring-tool-suite-3.9.9.RELEASE-e4.12.0-win32-x86_64.zip\" target=\"_blank\" rel=\"noopener\">here<\/a><\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">2. Project Setup in Spring Initializr<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/vPRBWw8MHEo\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Goto start.spring.io\u00a0 and create a project. Use the following settings:<\/p>\n<ul>\n<li>Project: Maven Project<\/li>\n<li>Language: Java<\/li>\n<li>Spring Boot: 2.1.6<\/li>\n<li>Group: com.kindsonthegenius (you can change this )<\/li>\n<li>Artifact: thymeleaf-app<\/li>\n<li>Name: thymeleaf-app<\/li>\n<li>Description: Thymeleaf Application<\/li>\n<li>Package Name:\u00a0com.kindsonthegenius.thymeleaf-app<\/li>\n<li>Packaging: Jar<\/li>\n<li>Java: 8<\/li>\n<\/ul>\n<p>Add the following dependencies: H2 Database, MySql Driver, Spring Data JPA, Thymeleaf,\u00a0 Spring web starter<\/p>\n<p>Generated the project. So the the project is downloaded as as zip file<\/p>\n<p>Unzip the file and open it in Spring Tool Suite<\/p>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>3. Add Additional Dependencies\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/RMKjN3_vnvc\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Open the pom.xml file to ensure the dependencies are specified<\/p>\n<p>Add the following additional dependencies:<\/p>\n<ul>\n<li>spring-web<\/li>\n<li>spring-context<\/li>\n<li>Bootstrap (4.3.1)<\/li>\n<li>JQuery (3.4.1)<\/li>\n<\/ul>\n<p>This dependencies are gotten from <a href=\"https:\/\/mvnrepository.com\/\" target=\"_blank\" rel=\"noopener\">Maven Repository<\/a><\/p>\n<p>Remove the versions tag from spring-web and spring-context<\/p>\n<p>Save the project<\/p>\n<p>&nbsp;<\/p>\n<p>The general architecture or our application is given below<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-993 aligncenter\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2020\/09\/Spring-Boot-Thymeleaf-Architecture-300x290.jpg\" alt=\"Spring Boot Thymeleaf Architecture\" width=\"300\" height=\"290\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">4. Create a html and Test Thymeleaf<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/BUdhluL_K7c\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create a class called HomeController in the com.kindsonthegenius.thymeleafapp package<\/p>\n<p>Annotate this class with the @Controller annotation<\/p>\n<p>Write a String method called test to return &#8220;index&#8221;.<\/p>\n<p>Annotate this method with @RequestMapping(&#8220;\/home&#8221;)<\/p>\n<p>The content of the HomeController.java file is as shown below<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@Controller<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #008800; font-weight: bold;\">class<\/span> <span style=\"color: #bb0066; font-weight: bold;\">HomeController<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/home\"<\/span><span style=\"color: #333333;\">)<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">test<\/span><span style=\"color: #333333;\">()<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"index\"<\/span><span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Create a html file inside the templates folder. The templates folder is inside the src\/main\/resources folder.<\/p>\n<p>The content of the html file is as shown below<\/p>\n<p>Run the application<\/p>\n<p>Then visit http:\/\/localhost:8080\/home and ensure the page displays<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">5. Setup and test H2 Database<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/5P3UDEsg5SA\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Open the application.properties file and add the following directives<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">spring<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">h2<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">console<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">enabled<\/span><span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">true<\/span>\nspring<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">datasource<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">platform<\/span><span style=\"color: #333333;\">=<\/span>h2\nspring<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">datasource<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">url<\/span><span style=\"color: #333333;\">=<\/span><span style=\"color: #997700; font-weight: bold;\">jdbc:h2:mem:<\/span>studentdb\nspring<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">jpa<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">hibernate<\/span><span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">ddl<\/span><span style=\"color: #333333;\">-<\/span>auto<span style=\"color: #333333;\">=<\/span>update\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Run the application<\/p>\n<p>Then visit http:\/\/localhost:8080\/h2-console<\/p>\n<p>Ensure the name of the database is studentdb<\/p>\n<p>Then click on connect. You will now see the h2-console open up.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">6. Setup MySQL Database<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/H6pb18qbv80\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Open the application.properties file again<\/p>\n<p>Add the following code to configure MySQL datasource<\/p>\n<p>Note the the datasource configuration for H2 database has been commented out. This is because you can have two datasources at the same time<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">#H2 Database Configuration<\/span>\n<span style=\"color: #888888;\">#spring.h2.console.enabled=true<\/span>\n<span style=\"color: #888888;\">#spring.datasource.platform=h2<\/span>\n<span style=\"color: #888888;\">#spring.datasource.url=jdbc:h2:mem:studentdb<\/span>\n<span style=\"color: #888888;\">#spring.jpa.hibernate.ddl-auto=update<\/span>\n\n<span style=\"color: #888888;\">#MySQL Database Configuration<\/span>\nspring.datasource.driver<span style=\"color: #333333;\">-<\/span>class<span style=\"color: #333333;\">-<\/span>name<span style=\"color: #333333;\">=<\/span>com.mysql.cj.jdbc.Driver\nspring.datasource.password<span style=\"color: #333333;\">=<\/span>root\nspring.datasource.username<span style=\"color: #333333;\">=<\/span>root\nspring.datasource.url<span style=\"color: #333333;\">=<\/span>jdbc:mysql:<span style=\"color: #333333;\">\/\/<\/span>localhost:<span style=\"color: #0000dd; font-weight: bold;\">3307<\/span><span style=\"color: #333333;\">\/<\/span>student\nspring.jpa.hibernate.ddl<span style=\"color: #333333;\">-<\/span>auto<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">update\n<\/span>spring.datasource.initialization-mode=<span style=\"color: #008800; font-weight: bold;\">always<\/span>\n\n<span style=\"color: #888888;\">#if you receive Timezone error, then replace the datasource url with the one below<\/span>\n<span style=\"color: #888888;\">#spring.datasource.url=jdbc:mysql:\/\/localhost:3301\/student?useUnicode=true&amp;useJDBCCompliantTimezoneShift=true&amp;useLegacyDatetimeCode=false&amp;serverTimezone=UTC<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>7.\u00a0 Create the Model (the Student class)\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/d41SQ_nu-Ls\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create a class called Student in the models package<\/p>\n<p>The class should have the following member variables:<\/p>\n<ul>\n<li>Id (Integer)<\/li>\n<li>name (String)<\/li>\n<li>department (String)<\/li>\n<li>updatedBy (String)<\/li>\n<li>updatedOn (Date<\/li>\n<\/ul>\n<p>Annotate the class with the @Entity annotion<\/p>\n<p>Annotate the Id field with the @Id annotation<\/p>\n<p>Annotate the updatedOn field with the @DataTimeFormat(pattern=&#8221;yyyy-MM-dd&#8221;) annotation<\/p>\n<p>The class would be as shown below<\/p>\n<p>&nbsp;<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@Entity<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #008800; font-weight: bold;\">class<\/span> <span style=\"color: #bb0066; font-weight: bold;\">Student<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@Id<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> Integer Id<span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> String name<span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> String department<span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> String updatedBy<span style=\"color: #333333;\">;<\/span>\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@DateTimeFormat<\/span><span style=\"color: #333333;\">(<\/span>pattern<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"yyyy-MM-dd\"<\/span><span style=\"color: #333333;\">)<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> String updatedOn<span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Generated the constructors, getter and setters and the toString method<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">8. Write and Test Database Initialization Query<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/hxK3eeJKrg0\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create a file called data.sql in the src\/main\/resources folder<\/p>\n<p>Write a query the insert some initial data. The content of the file would be as shown below;<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">insert<\/span> <span style=\"color: #008800; font-weight: bold;\">into<\/span> student <span style=\"color: #008800; font-weight: bold;\">values<\/span>(<span style=\"color: #0000dd; font-weight: bold;\">1<\/span>, <span style=\"background-color: #fff0f0;\">'Kindson Munonye'<\/span>, <span style=\"background-color: #fff0f0;\">'Computer Science'<\/span>, <span style=\"background-color: #fff0f0;\">'The Tech Pro'<\/span>, <span style=\"background-color: #fff0f0;\">'2019-06-27'<\/span>);\n<span style=\"color: #008800; font-weight: bold;\">insert<\/span> <span style=\"color: #008800; font-weight: bold;\">into<\/span> student <span style=\"color: #008800; font-weight: bold;\">values<\/span>(<span style=\"color: #0000dd; font-weight: bold;\">2<\/span>, <span style=\"background-color: #fff0f0;\">'Kate Winston'<\/span>, <span style=\"background-color: #fff0f0;\">'Managment'<\/span>, <span style=\"background-color: #fff0f0;\">'The Tech Pro'<\/span>, <span style=\"background-color: #fff0f0;\">'2019-06-27'<\/span>);\n<span style=\"color: #008800; font-weight: bold;\">insert<\/span> <span style=\"color: #008800; font-weight: bold;\">into<\/span> student <span style=\"color: #008800; font-weight: bold;\">values<\/span>(<span style=\"color: #0000dd; font-weight: bold;\">3<\/span>, <span style=\"background-color: #fff0f0;\">'Solace Okeke'<\/span>, <span style=\"background-color: #fff0f0;\">'Data Science'<\/span>, <span style=\"background-color: #fff0f0;\">'The Tech Pro'<\/span>, <span style=\"background-color: #fff0f0;\">'2019-06-27'<\/span>);\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Now, test the application.<\/p>\n<p>First, check that the the Student table is created in the mySQL server and the data is inserted<\/p>\n<p>Next, do the same for the H2 database<\/p>\n<p>Remember to modify the application.properties file before you test each of the databases;<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">9. Create the Crude Repository<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/qvgadIL3UEM\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create an interface called StudentRepository in the repositories folder<\/p>\n<p>Make this interface extend CrudRepository<\/p>\n<p>Specify the class and Id type as Student and Integer respectively<\/p>\n<p>Annotate the class with the @Repository annotation<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">10. Create the Business Service<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/AU1_73EixSk\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create a class called StudentService in the services folder<\/p>\n<p>Annotate this class with the @Service annotation<\/p>\n<p>Autowire the StudentRepository into the StudentService<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">11. Create the Controller<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/i8wxexR2Njs\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Create a class called StudentController<\/p>\n<p>Annotate the class with the @Controller annotation<\/p>\n<p>Annotate this class with the @RequestMapping(&#8220;\/students&#8221;)<\/p>\n<p>Autowire the StudentService into the StudentController<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">12. Write the getAll() Method<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/0TmerRJFOU8\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p><strong>In the StudentService,<\/strong> write a GetAll method . This method should call the findAll() method of the repository.<\/p>\n<p>This method should return a List&lt;Student&gt;<\/p>\n<p><strong><span style=\"font-size: 1rem;\">\u00a0I<\/span><\/strong><span style=\"font-size: 1rem;\"><strong>n the StudentController,<\/strong> w<\/span>rite the getAll method. This method should call the getAll method of the service<\/p>\n<p>Annotate this method with @RequestMapping(&#8220;\/getAll&#8221;)<\/p>\n<p>This method should return a string of &#8220;<em>students<\/em>&#8221;<\/p>\n<p>The code is shown below<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/getAll\"<\/span><span style=\"color: #333333;\">)<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">getAll<\/span><span style=\"color: #333333;\">(<\/span>Model model<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\tList<span style=\"color: #333333;\">&lt;<\/span>Student<span style=\"color: #333333;\">&gt;<\/span> students <span style=\"color: #333333;\">=<\/span> studentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getAll<\/span><span style=\"color: #333333;\">();<\/span>\n\tmodel<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"students\"<\/span><span style=\"color: #333333;\">,<\/span> students<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"students\"<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">13. Setup and test the html page<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/ESK2btvQu8A\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>To ensure that that StudentController can serve a page using Thymeleaf;<\/p>\n<p>Create a html page in the templates folder and call it students.html<\/p>\n<p>Write some text in the page.<\/p>\n<p>The go ahead to run the application.<\/p>\n<p>Navigate to http:\/\/localhost:8080\/students\/getAll. Confirm that the html page display<\/p>\n<p><strong>Optional<\/strong>: Change the @Controller annotation to @RestController. Also modify the function to return List&lt;Student&gt;. Then test if it actually return the data.<\/p>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>14. Setup Bootstrap and JQuery\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/twJsiX7A280\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>In the html page, include in the header section:<\/p>\n<ul>\n<li><span style=\"color: #ff6600;\">the link to bootstrap.css<\/span><\/li>\n<li><span style=\"color: #ff6600;\">jquery.js script<\/span><\/li>\n<li><span style=\"color: #ff6600;\">bootstrap.js script<\/span><\/li>\n<\/ul>\n<p>For me, it is as shown below:<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;link<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"\/webjars\/bootstrap\/4.3.1\/css\/bootstrap.css\"<\/span> <span style=\"color: #0000cc;\">rel=<\/span><span style=\"background-color: #fff0f0;\">\"stylesheet\"<\/span> <span style=\"color: #007700;\">\/&gt;<\/span>\n<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"\/webjars\/bootstrap\/4.3.1\/js\/bootstrap.min.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"\/webjars\/jquery\/3.4.1\/jquery.min.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n<\/pre>\n<p>Create a simple table and test it using table table-stripped class<\/p>\n<p><strong>Note<\/strong>: if the link and script doesn&#8217;t work, try using the CDN links\u00a0 from the website<\/p>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>15. Send data from Controller to View\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/Asq8CkO6Rr4\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Modify the getAll method in the controller, add a model object as parameter<\/p>\n<p>Now call the service to return a\u00a0 list of students.<\/p>\n<p>Then assign this list as an attribute to the model object. In this way, this list would be available in the view.<\/p>\n<p>The method would then be as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/getAll\"<\/span><span style=\"color: #333333;\">)<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">getAll<\/span><span style=\"color: #333333;\">(<\/span>Model model<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\tList<span style=\"color: #333333;\">&lt;<\/span>Student<span style=\"color: #333333;\">&gt;<\/span> students <span style=\"color: #333333;\">=<\/span> studentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getAll<\/span><span style=\"color: #333333;\">();<\/span>\n\tmodel<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"students\"<\/span><span style=\"color: #333333;\">,<\/span> students<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"students\"<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">16. Receive data in the View (html page)<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/-2IiS-fY8Ec\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Modify the table in the html page to have five columns and two rows.<\/p>\n<p>Then add the Thymeleaf markup to display the data from the models.<\/p>\n<p>The final table would be as shown below<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;table<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"table table-stripped\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;thead&gt;<\/span>\n<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td&gt;<\/span>Id<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td&gt;<\/span>Name<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td&gt;<\/span>Department<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td&gt;<\/span>Updated By<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td&gt;<\/span>Updated On<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/thead&gt;<\/span>\n<span style=\"color: #007700;\">&lt;tr<\/span> <span style=\"color: #0000cc;\">th:each=<\/span><span style=\"background-color: #fff0f0;\">\"student:${students}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${student.Id}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Id<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${student.name}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Name<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${student.department}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Department<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${student.updatedBy}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Updated By<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${student.updatedOn}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Updated On<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/table&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Run the application and check that the data is displayed in the page<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">17. Write and test the getOne() method<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/wmfgPQrqiRs\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>In the Service class, write a the method getOne() to return a single record.<\/p>\n<p>In the Controller class, write the method getOne()<\/p>\n<p>It is going to return a single Student. Also, it would take an Integer parameter, Id.<\/p>\n<p>Annotate this method with @RequestMapping(&#8220;\/getOne&#8221;)<\/p>\n<p>At the the, the getOne method in the controller would look like this:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/getOne\"<\/span><span style=\"color: #333333;\">)<\/span> \n<span style=\"color: #555555; font-weight: bold;\">@ResponseBody<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> Optional<span style=\"color: #333333;\">&lt;<\/span>Student<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">getOne<\/span><span style=\"color: #333333;\">(<\/span>Integer Id<span style=\"color: #333333;\">)<\/span>\n<span style=\"color: #333333;\">{<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> studentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getOne<\/span><span style=\"color: #333333;\">(<\/span>Id<span style=\"color: #333333;\">);<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>18. Write the addNew Method\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/KV-saMZEIjI\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>In the StudentService, write the addNew method.<\/p>\n<p>This method would take a Student object and save it to the repository.<\/p>\n<p>In the StudentController, writhe the addNew method<\/p>\n<p>Annotate the method with the @RequestMapping(value=&#8221;\/addNew&#8221; method=&#8221;post&#8221;)<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@PostMapping<\/span><span style=\"color: #333333;\">(<\/span>value<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"\/addNew\"<\/span><span style=\"color: #333333;\">)<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">addNew<\/span><span style=\"color: #333333;\">(<\/span>Student student<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\tstudentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addNew<\/span><span style=\"color: #333333;\">(<\/span>student<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/students\/getAll\"<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p><span style=\"color: #ff6600;\"><strong>Note<\/strong>: there is not spaces in the redirect statement!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">19. Set up the AddModal Dialog<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/S33opx5Kfm4\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>The easiest way to do this is to go to the Bootstrap website and get a modal form template. Copy and add the code to the students.html page.<\/p>\n<p>Copy the code for the button as well<\/p>\n<p><span style=\"color: #ff6600;\">Move the form tag to the uppermost level div tag!<\/span><\/p>\n<p>Modify the name and text in the add button.<\/p>\n<p>Then modify the form to add the textfields.<\/p>\n<p>Change the Ids of the textfield to something relevant.<\/p>\n<p>Test the application to see the appearance<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">20. Complete and Test the Insert operation<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/5FtvBc8X74I\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Give the textfields name attributes that corresponds to the name used in the model.<\/p>\n<p>Change the type of button for the Save operation from &#8220;button&#8221; to &#8220;submit&#8221;<\/p>\n<p>Set the th:action of the form to @&#8221;{\/students\/addNew}&#8221;.<\/p>\n<p>Set the method to post<\/p>\n<p>Test the application and try to insert data into the database. <span style=\"color: #008000;\">If it works, congrats!<\/span><\/p>\n<p>If not, watch the video and leave me a comment to let me know so I can help you.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">21. Write the Update Methods<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/RFE-y0kxdcI\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>In the Student Service, write the update method. This method should call the save() method of the repository.<\/p>\n<p>Also, in the Controller, write the update method.<\/p>\n<p>This method take a single parameter of Student.<\/p>\n<p>Annotates this method with @RequestMapping&#8230;&#8230;.<\/p>\n<p>It returns a redirect to the students\/findAll url<\/p>\n<p>The final update() method for the controller is shown below<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span>value<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"\/update\"<\/span><span style=\"color: #333333;\">,<\/span> method <span style=\"color: #333333;\">=<\/span> <span style=\"color: #333333;\">{<\/span>RequestMethod<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">PUT<\/span><span style=\"color: #333333;\">,<\/span> RequestMethod<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">GET<\/span><span style=\"color: #333333;\">})<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">update<\/span><span style=\"color: #333333;\">(<\/span>Student student<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\tstudentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">update<\/span><span style=\"color: #333333;\">(<\/span>student<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/students\/getAll\"<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>22. Setup the Edit Modal\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/8c0OYbtfGa8\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>The easiest way to do this is to make a copy of the existing addModal. Then change the name to editModal<\/p>\n<p>Change the names of the textfields to something relevant<\/p>\n<p>Set the action of the editModal like this &#8211; th:action = &#8220;@{\/students\/update}&#8221;<\/p>\n<p>Now, in the table, add a sixth column and name it Edit.<\/p>\n<p>Then add a button and set its data-target attribute to #editModal (we would later change it to a link)<\/p>\n<p>Set the class of this button to &#8220;btn btn-warning&#8221;<\/p>\n<p>Test the application to ensure that the modal displays<\/p>\n<p>Then change the button to an anchor tag<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">23. Create the Custom js File<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/GQY53Q0_xxo\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Now, if you test the application, you will see that nothing happens when we click on the Edit button. We would write a custom script that runs when the button is clicked.<\/p>\n<p>Inside the static folder of the src\/main\/resources, create a folder js.<\/p>\n<p>Then create a file called main.js.<\/p>\n<p>In the students.html page, add a link to this file in the head section. The link would be as follows:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"..\/static\/js\/main.js\"<\/span> <span style=\"color: #0000cc;\">th:src=<\/span><span style=\"background-color: #fff0f0;\">\"@{\/js\/main.js}\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n<\/pre>\n<p><span style=\"color: #ff6600;\">Note: Make sure to get this right!<\/span><\/p>\n<p>Inside this file, write a function to display the editModal. The file would be as follows:<\/p>\n<p>&nbsp;<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">$(<span style=\"background-color: #fff0f0;\">'document'<\/span>).ready(<span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\t\n\t$(<span style=\"background-color: #fff0f0;\">'.table #editButton'<\/span>).on(<span style=\"background-color: #fff0f0;\">'click'<\/span>,<span style=\"color: #008800; font-weight: bold;\">function<\/span>(event){\t\n\t\t\n\t\tevent.preventDefault();\n\t\t\n\t\t$(<span style=\"background-color: #fff0f0;\">'#editModal'<\/span>).modal();\t\t\t\t\n\t});\t\n});\n<\/pre>\n<p><span style=\"color: #ff6600;\">Note: no space between &#8216;click&#8217; and function<\/span><\/p>\n<p>Note: the event.preventDefault() stops the link from navigating to a response page. Try to remove it an rerun the application so you understand how it works.<\/p>\n<p>Then test the application and ensure the editModal form displays<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">24. Complete and Test the Edit Method<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/XiQ9OzLgEds\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Two things should when the editButton is clicked:<\/p>\n<ul>\n<li>request is sent to \/students\/getOne?Id={Id} to retrieve a particular record<\/li>\n<li>the values retrieved are assigned to the edit text fields<\/li>\n<\/ul>\n<p>Add the href attribute to the editButton. The attribute is as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"> th:href=\"@{\/students\/getOne\/(Id=${student.Id})}\"\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Now modify the <em>main.js<\/em> file. Write the codes to assign the values of the student record to the textfields.\u00a0 At the end the final code would be:<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">25. Write the Delete Method<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/U_qoeP3qqsg\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Write the delete method in the studentService.<\/p>\n<p>Also write the delete method in the StudentController file<\/p>\n<p>The delete method would take on parameter which is the Id of record to be deleted.<\/p>\n<p>The delete() method is shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@RequestMapping<\/span><span style=\"color: #333333;\">(<\/span>value<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"\/delete\"<\/span><span style=\"color: #333333;\">,<\/span> method <span style=\"color: #333333;\">=<\/span> <span style=\"color: #333333;\">{<\/span>RequestMethod<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">DELETE<\/span><span style=\"color: #333333;\">,<\/span> RequestMethod<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">GET<\/span><span style=\"color: #333333;\">})<\/span>\t\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">delete<\/span><span style=\"color: #333333;\">(<\/span>Integer Id<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\tstudentService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">delete<\/span><span style=\"color: #333333;\">(<\/span>Id<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/students\/getAll\"<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">26. Setup\u00a0 the Delete Modal<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/ZncqXIrwBxQ\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Now that the add and update is working well, I&#8217;l say congrats to you!<\/p>\n<p>To add the delete we would a modal from the bootstrap website.<\/p>\n<p>Place the modal in the page and give it an id of deleteModal<\/p>\n<p>Change the texts on it to something relevant.<\/p>\n<p><span style=\"color: #ff6600;\">Change button to an anchor tag and add the href set to &#8220;&#8221;<\/span><\/p>\n<p>Add a delete link in the table just like the Edit link, but this time to the \/delete endpoint<\/p>\n<p>Modify the main.js file to display the deleteModal<\/p>\n<p>Test the application and check that the modal displays.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong><span style=\"color: #008000;\">27. Complete and Test the Delete Modal<\/span>\u00a0<\/strong><strong><a href=\"https:\/\/youtu.be\/o45S3j7MUPE\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>Now give the button in the deleteModal an id of delRef<\/p>\n<p>In the main.js file, write the code to complete the delete operation<\/p>\n<p>The js code for the deleteButton is shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">$(<span style=\"background-color: #fff0f0;\">'.table #deleteButton'<\/span>).on(<span style=\"background-color: #fff0f0;\">'click'<\/span>,<span style=\"color: #008800; font-weight: bold;\">function<\/span>(event){\n\tevent.preventDefault();\t\t\n\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> href <span style=\"color: #333333;\">=<\/span> $(<span style=\"color: #008800; font-weight: bold;\">this<\/span>).attr(<span style=\"background-color: #fff0f0;\">'href'<\/span>);\n\t$(<span style=\"background-color: #fff0f0;\">'#deleteModal #delRef'<\/span>).attr(<span style=\"background-color: #fff0f0;\">'href'<\/span>, href);\t\t\n\t$(<span style=\"background-color: #fff0f0;\">'#deleteModal'<\/span>).modal();\n});\n<\/pre>\n<p>Test the application to make sure it works.<\/p>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>28. Display Logged In Username with Thymeleaf\u00a0<\/strong><\/span><strong><a href=\"https:\/\/youtu.be\/mHyWTIu1vgQ\" target=\"_blank\" rel=\"noopener noreferrer\">(Video)<\/a><\/strong><\/h5>\n<p>User authentication and authorization are covered under spring security. I&#8217;m currently working on the tutorials on Spring Security and would publish it in the next few day.<\/p>\n<p>For now, the easiest way to pass the logged in user details to the view is to place it in the model. This can be done in the getAll function since that is the only page we are working with.<\/p>\n<p>Just write this one line of code in the getAll() method:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">String username <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"Kindson\"<\/span><span style=\"color: #333333;\">;<\/span>\nmodel<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"username\"<\/span><span style=\"color: #333333;\">,<\/span> username<span style=\"color: #333333;\">);<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Then in the students.html page, you can retrieve the value using the code below:<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\">Welcome,  <span style=\"color: #007700;\">&lt;span<\/span> <span style=\"color: #0000cc;\">th:text=<\/span><span style=\"background-color: #fff0f0;\">\"${username}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Welcome guest!\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #008000;\"><strong>29. Using BootStrap for UI<\/strong><\/span><\/h5>\n<h5><strong><a href=\"https:\/\/youtu.be\/-8rwHFh1l2s\" target=\"_blank\" rel=\"noopener noreferrer\">(Only Video!)<\/a><\/strong><\/h5>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction to Thymeleaf (Video) In this walk-through, we would build an application to store student records. Users would be able to: access list of &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1932","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1932"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1932\/revisions"}],"predecessor-version":[{"id":2100,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1932\/revisions\/2100"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}