CRUD Tutorial With Spring, H2, Thymeleaf, Bootstrap, JQuery and MySQL (Step by Step Procedure)

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 Boot
  • Thymeleaf
  • JQuery/JavaScript
  • Bootstrap(CSS)
  • H2
  • MySQL
  • MVC

The final result of this application would be as shown below

End result of Crud with Thymeleaf

So let’s get started!

Note: While you could follow the procedure, you could also watch the video series to get a more detailed explanation

Step 1: Create a Spring Application

  • Go to start.spring.io
  • Create  a new application
  • Download the application
  • Extract and open the project in  Spring Tool Suite (sts)

 

Step 2: Add the necessary dependencies

  • Open the pom.xml
  • Ensure the following dependencies are there:
    • H2
    • mysql-connector-java
    • spring-boot-starter-data-JPA
    • spring-boot-starter-thymeleaf
    • spring-boot-starter-web
    • spring-web
    • spring-context
    • Bootstrap
    • JQuery
  • You can get dependencies from the Maven Repositories site. (watch the video step by step tutorial)

 

Step 3: Create the Model 

We’ll be creating a application to store records of countries

  • Create a class called Nationality. Put it in the models package
  • The class would have the following fields:
    • Id, Name, Capital, UpdatedBy, UpdatedOn
  • Annotate the class with the @Entity annotation
  • Annotate the Id field with the @Id annotation
  • Annotate the UpdatedOn date field with the @DateTimeFormat annotation as shown below
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date UpdatedOn;

 

As you take the following step, from Step 4, keep in mind the architecture we are working with as shown below:

Crud MVC Architecture

 

Step 4: Create the Repository

  • Create a class called NationalityRepository inside the repositories package
  • Annotate this class with the @Repository annotation
  • Specify the object class as Nationality and the primary key type as Integer

 

Step 5: Create the Service

  • Create the NationalityService class inside a services package
  • Annotate the class with the @Service annotation
  • Autowire the NationalityRepository into the NationalityService
  • Write the methods for the following operations:
    • GetNationalities
    • GetNationalityById
    • AddNationality
    • UpdateNationality
    • DeleteNationality

When completed, the NationalityService class would be as shown below:

@Service
public class NationalityService {
		
	@Autowired
	private  NationalityRepository nationalityRepository;

	public  List<Nationality> getNationalities() {
				
		return (List<Nationality>) nationalityRepository.findAll();
	}

	public void save(Nationality nationality) {
		nationalityRepository.save(nationality);
	}

	public Optional<Nationality> getNationalityById(Integer id) {
		return nationalityRepository.findById(id);
	}

	public void deleteById(Integer id) {
		nationalityRepository.deleteById(id);
	}

	public void updateNationality(Nationality nationality) {
		nationalityRepository.save(nationality);
		
	}

	public void addNationality(Nationality nationality) {
		nationalityRepository.save(nationality);
	}

}

 

 

Step 7: Build the Controller

  • Create class called NationalityController in the controllers package
  • Annotate this class with the @Controller annotation. (not @RestController!)
  • Write the the controller methods, same as the methods in the Service

At the end the NationlityController file would be as shown below:

@Controller
public class NationalityController {
	
	@Autowired
	private NationalityService nationalityService;
	
	@GetMapping("/nationalities")
	public String getNationalities(Model model) {
		model.addAttribute("nationalities", nationalityService.getNationalities());
		return "nationalities";
	}	
	
	@GetMapping("/onenationality")
	@ResponseBody
	public Optional<Nationality> getNationalityById(Integer Id, Model model ) {
		model.addAttribute("onenationality", nationalityService.getNationalityById(Id));
		return nationalityService.getNationalityById(Id);
	}
	
	@RequestMapping(value="/save", method = {RequestMethod.POST, RequestMethod.PUT, RequestMethod.GET})
	public String updateNationality(Nationality nationality) {
		nationalityService.updateNationality(nationality);
		return "redirect:/nationalities";
	}
	
	@RequestMapping(value="/addNew", method = {RequestMethod.POST, RequestMethod.PUT, RequestMethod.GET})
	public String addNationality(Nationality nationality) {
		nationalityService.addNationality(nationality);
		return "redirect:/nationalities";
	}
	
	@RequestMapping(value="/delete", method = {RequestMethod.DELETE, RequestMethod.PUT, RequestMethod.GET})
	public String deleteNationality(Integer Id) {
		nationalityService.deleteById(Id);
		return "redirect:/nationalities";
	}
	
}

 

Step 8: Add the HTML File

Create a html file in the templates folder. The name should be nationalities.html

 

Step 9: Test the Application

  • Run the application as a Spring Application
  • Visit http://localhost:8080/nationalities

Note: If you receive errors, don’t worry, we’ll fix it in the next lesson

Watch the video Series

In the next lesson, we would work on building the html file.

13 Comments on “CRUD Tutorial With Spring, H2, Thymeleaf, Bootstrap, JQuery and MySQL (Step by Step Procedure)”

  1. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery and MySQL(Step by Step) – Part 1 | Nikkies Tutorials
  2. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 13 | Nikkies Tutorials
  3. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 12 | Nikkies Tutorials
  4. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure – Part 5 | Nikkies Tutorials
  5. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure – Part 6 | Nikkies Tutorials
  6. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 10 | Nikkies Tutorials
  7. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 3 | Nikkies Tutorials
  8. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL (Step by Step Procedure) – Part 2 | Nikkies Tutorials
  9. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 11 | Nikkies Tutorials
  10. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure Part 4 | Nikkies Tutorials
  11. Pingback: CRUD With Spring, H2, Thymeleaf, Bootstrap, JQuery, MySQL Step by Step Procedure – Part 7 | Nikkies Tutorials
  12. I have followed this and other Tutorials and loved the way you teach Thanx for that
    There is one problem I got from this and its that the variables passed to the HTML is not “singletons” / i.e Scoped not Session variables that causes the returning data to be a new instance of the class to be created – so If you have a larger data-set than a mere 2-3 variables to edit the data NOT used/updated in the have to be merged with the original data class upon receiving the edited fields. If you used scoped or session you have a singular data class in memory that is updated and the original data class change can just be saved!
    Can you show us the scoped sample?
    Probably using the annotation
    @Scope(value = WebApplicationContext.SCOPE_SESSION, proxyMode = ScopedProxyMode.TARGET_CLASS)

Leave a Reply

Your email address will not be published. Required fields are marked *