Simple Spring boot CRUD web-app using mysql database

1. What we will be making ?

We will be making a simple CRUD web application based on MVC architecture using Spring framework. (more specifically spring boot) and we will be using MySql as our database.

2. Prerequisites

For this project you need to have your favourite IDE/Editor set up for Spring boot (Eclipse, IntelliJ or VS code etc.) ~ Please refer to my spring boot setup article for more info.

So , lets’ begin! And may the force be with you!

First we will start off with our database, for this example I will use the a simple structure as below.

→ Student(id,firstname,lastname)

So our SQL code will be like this

CREATE TABLE `student` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`firstname` varchar(20) DEFAULT NULL,
`lastname` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Then we will create our spring-boot application and proceed with adding required Maven Dependencies

Since we added our spring-web , mysql , spring JPA at the project creation we will add the following additional dependencies to out pom.xml file,

<dependency>
 <groupId>org.apache.tomcat.embed</groupId>
 <artifactId>tomcat-embed-jasper</artifactId>
 <version>9.0.31</version>
</dependency>
<dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>jstl</artifactId>
</dependency>
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>4.0.0</version>
</dependency>

Here I will be using web-jar of Bootstrap 4 , but if you are having a custom Bootstrap ccs files you can add them to your resources/static folder and use the reference to link stylesheet.

And its better to use the matching tomcat-embed-jasper version with your tomcat-embed-core jar (Look in Maven Dependencies of your project on project explorer)

So since we are ready with our dependencies we will start building it, for this right click on your project → maven → click on update project → select your project and click update. and you might have to wait a minute or two till maven get down your dependencies for you!

Now we will edit our application.properties 🍃 file to supply our database connection credentials and to specify other required settings

you can find your application.properties in the following location

Application.properties

you can create a file called application.yaml if you are really interested to make things cleaner.

Since some of our computers have that mysterious application running on port 8080 I have changed the default server port to 8282 (well .. you should really check it out if you are hyper vigilant on security),

*Note → please change the mysql database port to the port on your computer , it might be 3306 ! and enter the name of the database , here MySQL port on my pc is 8889 ; and username and password is “root” in my case. The db I’m using is called “student”.

#Custom port for Apache Tomcat
server.port = 8282
#Database credentials
spring.datasource.url=jdbc:mysql://localhost:8889/student
spring.datasource.username=root
spring.datasource.password=root

#JPA Settings
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=none
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
#Location of jsp files and extention name
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

Yaay !! our configurations are over ,

So after the small celebration , we will create necessary packages(or folders, well.. both are quite same).

Project Explorer

So we will create Controller , Model , Repository , Services packages as above

Project Explorer

And create a webapp/WEB-INF/jsp folder to place our views , aka our JSP files.

first we will create a model of our student entity , for this , right click on model package → new → class , and we will name it as Student.java ,

And it should look like this, please notice the annotations!

And if you are using camelCase for the attributes please remember that hibernate will use snake_case by default. so if you have a attribute like

private String firstName ;

you should change the code like this →

@Column(name=”firstname”)

private String firstName;

*note that the name=”firstname” are in lowercase even-though the attribute name is in camel case.

Student.java

now we will create a interface using Spring Crud Repository (this makes us easier to access data from our database, we only need to extend spring crud repository to our own)

for this , right click on repository package → new → interface , and we will name it as StudentRepository.java

notice that we have passed the model and the data type of the primary key as <Student, Integer> (*Although we use int , we must specify it as Integer here, so if use use another data type replace it as necessary).

Now this is the time to create our service, to make things cleaner we will use a interface to declare our methods and then implement them in a separate class, for this we need two files as StudentService.java and StudentServiceImplementation.java , where one is a interface and the latter is a class.

so create files as necessary and they should look like this,

StudentService.java

StudentServiceImplementation.java

Now we will continue with the controller , here the controller is responsible for serving the incoming requests with model and view.

for this we will create a controller class on our controller package , so add a StudentController.java to the controller package and it should look like this.

StudentController.java

finally we will create our views , for this we will use Bootstrap 4 components as well as Spring form components.

One of our page will display a list of students with methods to edit and delete them and the other page will be a form which will be used to enter details to the database.

So create two jsp files in webapp/WEB-INF/jsp as student_list.jsp and student_form.jsp

The files should contain the followings.

*note that I have included taglibs from jstl and spring , you might have to include them to make use of some tags.

student_list.jsp

student_form.jsp

Aanndd !! We are done !!

Now fire up Internet Explore !! Nah… I’m kidding! Open up Firefox (or chrome)! and go to → localhost:8282/student/list

And you will be presented with a screen like this !

(If not please refer my most common errors on spring boot; article ! )

❤️

And here is the part I leave you my fellow comrades ! You have been brave ! above all , you have been an inspiration for the generations to come!

So let me know what you think about this article ! share it with your friends , give me a clap (or lots of claps if I deserve them). and above all if you find any error in my writing/or code , please feel free to correct me.

ps- I sometimes use Internet explorer