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

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:

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

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