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 applicaiton
  • 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.

11 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

Leave a Reply

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