{"id":1931,"date":"2019-06-25T12:00:00","date_gmt":"2019-06-25T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/crud-tutorial-with-spring-h2-thymeleaf-bootstrap-jquery-and-mysql-step-by-step-procedure\/"},"modified":"2026-07-05T03:23:51","modified_gmt":"2026-07-05T01:23:51","slug":"crud-tutorial-with-spring-h2-thymeleaf-bootstrap-jquery-and-mysql-step-by-step-procedure","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/crud-tutorial-with-spring-h2-thymeleaf-bootstrap-jquery-and-mysql-step-by-step-procedure\/","title":{"rendered":"CRUD Tutorial With Spring, H2, Thymeleaf, Bootstrap, JQuery and MySQL (Step by Step Procedure)"},"content":{"rendered":"<p>In this series, I am going to teach you how to build a data-driven page. <a href=\"#video\">Watch the video lesson<\/a><\/p>\n<p>We would use the following:<\/p>\n<ul>\n<li>Spring Boot<\/li>\n<li>Thymeleaf<\/li>\n<li>JQuery\/JavaScript<\/li>\n<li>Bootstrap(CSS)<\/li>\n<li>H2<\/li>\n<li>MySQL<\/li>\n<li>MVC<\/li>\n<\/ul>\n<p>The final result of this application would be as shown below<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-977 size-large\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2020\/09\/End-result-of-Crud-with-Thymeleaf-1024x545.jpg\" alt=\"End result of Crud with Thymeleaf\" width=\"735\" height=\"391\" \/><\/p>\n<p>So let&#8217;s get started!<\/p>\n<p><strong>Note<\/strong>: While you could follow the procedure, you could also watch the video series to get a more detailed explanation<\/p>\n<p><strong>Step 1: Create a Spring Application<\/strong><\/p>\n<ul>\n<li>Go to <a href=\"https:\/\/start.spring.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">start.spring.io<\/a><\/li>\n<li>Create\u00a0 a new application<\/li>\n<li>Download the application<\/li>\n<li>Extract and open the project in\u00a0 Spring Tool Suite (sts)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Step 2: Add the necessary dependencies<\/strong><\/p>\n<ul>\n<li>Open the pom.xml<\/li>\n<li>Ensure the following dependencies are there:\n<ul>\n<li>H2<\/li>\n<li>mysql-connector-java<\/li>\n<li>spring-boot-starter-data-JPA<\/li>\n<li>spring-boot-starter-thymeleaf<\/li>\n<li>spring-boot-starter-web<\/li>\n<li>spring-web<\/li>\n<li>spring-context<\/li>\n<li>Bootstrap<\/li>\n<li>JQuery<\/li>\n<\/ul>\n<\/li>\n<li>You can get dependencies from the Maven Repositories site. (watch the video step by step tutorial)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Step 3: Create the Model\u00a0<\/strong><\/p>\n<p>We&#8217;ll be creating a application to store records of countries<\/p>\n<ul>\n<li>Create a class called Nationality. Put it in the models package<\/li>\n<li>The class would have the following fields:\n<ul>\n<li>Id, Name, Capital, UpdatedBy, UpdatedOn<\/li>\n<\/ul>\n<\/li>\n<li>Annotate the class with the @Entity annotation<\/li>\n<li>Annotate the Id field with the @Id annotation<\/li>\n<li>Annotate the UpdatedOn date field with the @DateTimeFormat annotation as shown below<\/li>\n<\/ul>\n<pre style=\"margin: 0; line-height: 125%;\"><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<span style=\"color: #008800; font-weight: bold;\">private<\/span> Date UpdatedOn<span style=\"color: #333333;\">;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>As you take the following step, from Step 4, keep in mind the architecture we are working with as shown below:<\/p>\n<p><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2020\/09\/Crud-MVC-Architecture.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-978 size-medium\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2020\/09\/Crud-MVC-Architecture.jpg\" alt=\"Crud MVC Architecture\" width=\"222\" height=\"300\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 4: Create the Repository<\/strong><\/p>\n<ul>\n<li>Create a class called NationalityRepository inside the repositories package<\/li>\n<li>Annotate this class with the @Repository annotation<\/li>\n<li>Specify the object class as Nationality and the primary key type as Integer<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Step 5: Create the Service<\/strong><\/p>\n<ul>\n<li>Create the NationalityService class inside a services package<\/li>\n<li>Annotate the class with the @Service annotation<\/li>\n<li>Autowire the NationalityRepository into the NationalityService<\/li>\n<li>Write the methods for the following operations:\n<ul>\n<li>GetNationalities<\/li>\n<li>GetNationalityById<\/li>\n<li>AddNationality<\/li>\n<li>UpdateNationality<\/li>\n<li>DeleteNationality<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>When completed, the NationalityService class would be as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@Service<\/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;\">NationalityService<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\t\n\t<span style=\"color: #555555; font-weight: bold;\">@Autowired<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span>  NationalityRepository nationalityRepository<span style=\"color: #333333;\">;<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span>  List<span style=\"color: #333333;\">&lt;<\/span>Nationality<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">getNationalities<\/span><span style=\"color: #333333;\">()<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\t\t\t\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #333333;\">(<\/span>List<span style=\"color: #333333;\">&lt;<\/span>Nationality<span style=\"color: #333333;\">&gt;)<\/span> nationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">findAll<\/span><span style=\"color: #333333;\">();<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">void<\/span> <span style=\"color: #0066bb; font-weight: bold;\">save<\/span><span style=\"color: #333333;\">(<\/span>Nationality nationality<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">save<\/span><span style=\"color: #333333;\">(<\/span>nationality<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> Optional<span style=\"color: #333333;\">&lt;<\/span>Nationality<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">getNationalityById<\/span><span style=\"color: #333333;\">(<\/span>Integer id<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> nationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">findById<\/span><span style=\"color: #333333;\">(<\/span>id<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">void<\/span> <span style=\"color: #0066bb; font-weight: bold;\">deleteById<\/span><span style=\"color: #333333;\">(<\/span>Integer id<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">deleteById<\/span><span style=\"color: #333333;\">(<\/span>id<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">void<\/span> <span style=\"color: #0066bb; font-weight: bold;\">updateNationality<\/span><span style=\"color: #333333;\">(<\/span>Nationality nationality<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">save<\/span><span style=\"color: #333333;\">(<\/span>nationality<span style=\"color: #333333;\">);<\/span>\n\t\t\n\t<span style=\"color: #333333;\">}<\/span>\n\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">void<\/span> <span style=\"color: #0066bb; font-weight: bold;\">addNationality<\/span><span style=\"color: #333333;\">(<\/span>Nationality nationality<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">save<\/span><span style=\"color: #333333;\">(<\/span>nationality<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 7: Build the Controller<\/strong><\/p>\n<ul>\n<li>Create class called NationalityController in the controllers package<\/li>\n<li>Annotate this class with the @Controller annotation. (not @RestController!)<\/li>\n<li>Write the the controller methods, same as the methods in the Service<\/li>\n<\/ul>\n<p>At the end the NationlityController file would be as shown below:<\/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;\">NationalityController<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@Autowired<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">private<\/span> NationalityService nationalityService<span style=\"color: #333333;\">;<\/span>\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@GetMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/nationalities\"<\/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;\">getNationalities<\/span><span style=\"color: #333333;\">(<\/span>Model model<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tmodel<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"nationalities\"<\/span><span style=\"color: #333333;\">,<\/span> nationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getNationalities<\/span><span style=\"color: #333333;\">());<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"nationalities\"<\/span><span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\t\n\t\n\t<span style=\"color: #555555; font-weight: bold;\">@GetMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/onenationality\"<\/span><span style=\"color: #333333;\">)<\/span>\n\t<span style=\"color: #555555; font-weight: bold;\">@ResponseBody<\/span>\n\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> Optional<span style=\"color: #333333;\">&lt;<\/span>Nationality<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">getNationalityById<\/span><span style=\"color: #333333;\">(<\/span>Integer Id<span style=\"color: #333333;\">,<\/span> Model model <span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tmodel<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"onenationality\"<\/span><span style=\"color: #333333;\">,<\/span> nationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getNationalityById<\/span><span style=\"color: #333333;\">(<\/span>Id<span style=\"color: #333333;\">));<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> nationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getNationalityById<\/span><span style=\"color: #333333;\">(<\/span>Id<span style=\"color: #333333;\">);<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\t\n\t<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;\">\"\/save\"<\/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;\">POST<\/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\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">updateNationality<\/span><span style=\"color: #333333;\">(<\/span>Nationality nationality<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">updateNationality<\/span><span style=\"color: #333333;\">(<\/span>nationality<span style=\"color: #333333;\">);<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/nationalities\"<\/span><span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\t\n\t<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;\">\"\/addNew\"<\/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;\">POST<\/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\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">addNationality<\/span><span style=\"color: #333333;\">(<\/span>Nationality nationality<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">addNationality<\/span><span style=\"color: #333333;\">(<\/span>nationality<span style=\"color: #333333;\">);<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/nationalities\"<\/span><span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\t\n\t<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;\">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\t<span style=\"color: #008800; font-weight: bold;\">public<\/span> String <span style=\"color: #0066bb; font-weight: bold;\">deleteNationality<\/span><span style=\"color: #333333;\">(<\/span>Integer Id<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n\t\tnationalityService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">deleteById<\/span><span style=\"color: #333333;\">(<\/span>Id<span style=\"color: #333333;\">);<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"background-color: #fff0f0;\">\"redirect:\/nationalities\"<\/span><span style=\"color: #333333;\">;<\/span>\n\t<span style=\"color: #333333;\">}<\/span>\n\t\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 8: Add the HTML File<\/strong><\/p>\n<p>Create a html file in the templates folder. The name should be nationalities.html<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 9: Test the Application<\/strong><\/p>\n<ul>\n<li>Run the application as a Spring Application<\/li>\n<li>Visit http:\/\/localhost:8080\/nationalities<\/li>\n<\/ul>\n<p>Note: If you receive errors, don&#8217;t worry, we&#8217;ll fix it in the next lesson<\/p>\n<div id=\"video\">Watch the video Series<\/div>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/XzBENapJLlQ\" width=\"100%\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>In the next lesson, we would work on building the html file.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this series, I am going to teach you how to build a data-driven page. Watch the video lesson We would use the following: Spring &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":[311],"tags":[],"class_list":["post-1931","post","type-post","status-publish","format-standard","hentry","category-sql"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1931","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=1931"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions"}],"predecessor-version":[{"id":2099,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions\/2099"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}