April 9, 2021

Complete Application with Spring Boot From the Scratch (Step by Step)

In this practical tutorial we would build a complete application. A Vehicle Management System. We would start from the scratch, take it step by step until the end.

Note: This procedure goes strictly with the video course. See the link below

What you will learn:

  • Java Programming
  • JavaScript programming
  • Spring Security – User Login
  • Spring Data Jpa
  • Hibernate ORM
  • MySQL Database – basic command
  • Thymeleaf Template Engine
  • HTML and Basic CSS
  • Debugging Skills
  • Bootstrap and JQuery
  • Source Control using GitHub
  • Hosting, publishing and marketing our application!
  • And more!

 

The tools you need:

  • Spring Tool Suit (STS). Get is free here https://spring.io/tools (download it, unzip it and run the SpringToolSuite4.exe file). No installation needed
  • MySQL Server 5.x. Get it free here https://dev.mysql.com/downloads/installer/
  • A computer with good internet connection!
  • Optionally, Any graphics application (Fireworks, Photoshop, CorelDraw etc)
  • Firefox or Google Chrome or Internet Explorer

 

Step 1: Prepare your tools and assets

(Optional): Prepare a brief paragraph and sketches of what your application is all about.

I’ll provide you with all the files for the completed project. So you can use it to check if you have any bugs in your code. Download and unzip them from the links below.

 

Step 2: Set up the project (a SpringBoot project)

Create the project in www.start.spring.io. Download it and open it in spring boot.

Ensure to add the following dependencies:

DependencyDescription
lombokHelps to generate POJO codes
mysql-connector-javaManages connection to MySQL Database
spring-boot-starter-webFunctionality for web applications created in Spring Boot
spring-boot-starter-data-jpaJava Persistence API, helps handle data access
spring-boot-starter-thymeleafTemplate engine for rendering html pages
spring-boot-starter-securityHandles security, for instance user login, authentication and authorization (defer this till 10)
thymeleaf-extras-springsecurity5from org.thymeleaf.extras. Helps you add logged-in username to the html page

Create the package structure: the controllers, repositories, models and services packages.

 

Step 3:  Configure MySQL database

Open MySQL command line and create a database called fleetdb.

Enter the database parameters in the application.properties file. The database parameters is given below:

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.password=root
spring.datasource.username=root
spring.datasource.url=jdbc:mysql://localhost:3301/fleetdb?serverTimezone=UTC
spring.jpa.hibernate.ddl-auto=update

 

Step 4: Obtain and Setup the Template

Download the template from here. Then set it up. Adjust the links to make sure it works.

Add the ApplicationController file and write the method that serves in index page.

Test the application to make sure it’s ok

 

Step 5: Do the Object Oriented Design

Decide the objects that make up your application. Make a brief write-up of what roles they play.

Optionally, draw a relationship diagram.

I have identified the following objects for the Fleet Management System (FLEETMS) application

1. Auditable *7. EmployeeType13. State (Or Region or Province)19. VehicleMaintenance
2. Client8. Invoice14. Supplier20. VehicleMake
3. CommonObject *9. InvoiceStatus15.User21. VehicleModel
4. Contact10. JobTitle16. UserPrincipal (defer till 10)22. VehicleMovement
5. Country11. Location17.Vehicle23. VehicleStatus
6. Employee12. Person *18. VehicleHire24. VehicleType

Now based on these objects, plan the structure of your application.

 

Step 6: Create the models

Now you can create the entities you have identified from step 5.

You place the entities in the Models package.

You can find all the Models here (zip file with all the models)

 

Step 7: Create all the Controllers

It may be faster to create on controller and then copy across.

 

Step 8: Create all the Services

 

Step 9: Create all the Repositories

 

Step 10: Work on html Pages

First create and test the country.html page. It would be a blank page for now.

Then write the controller method to return this page. Test it.

Now create the link in the home page (index.html) to link to the country.html file. Test it

Create all the other html pages.

 

Step 11: Background image to the home page

You can get the backgroud image bg-11.jpg from here.

Open the index.html page.

Locate the panel-body-map div.

Delete it and replace it with this one below (Optional)

<div >
    <div style="background-image: url('img/bg-1.jpg'); background-size:100% 100%; height:400px;"></div>
</div>

Then go ahead to delete the headers of this panel.

Test the app to make sure.

 

Step 12: Plan the Navigation

Basically, you need to layout the navigation pattern to ensure that all object can be reached.

Open the index.html file and locate the sidebar.

The redesign the sidebar using the navigation structure given below.

Navigation Structure
Navigation Structure

 

 

Step 13: Display list of Countries in the html page

We start with the Country model.

First complete the country model (Country.java)

Then open the CountryService.java file and write a method to return all the countries

Write the CountryController method to get all the countries (talking about Model.addAttribute());

Then insert a country manually in MySQL. The code for inserting a new country into MySQL database is given below. You can execute it a couple of time to add few records

 insert into country values (1, 'Washington', '01', 'North America', 'United States', 'American');

 

Then Open the country.html page, adjust the markup to display a list of countries

Test this page to see if it displays the country you inserted in MySQL

 

Step 14: Inserting a New Country

Then open the CountryService.java file and write a method to insert a country

Write the CountryController method to save a new country

Open the html page  and add the modal add form and button. Test it

 

Step 15: Updating a Country

Add the update button to the html table in country.html file

Add the edit modal form as well and remember to set the th:action attribute.. Then test it.

Set the th:href attribute to link to the findById() method in the controller

Then open the CountryService.java file and write a method to update a country

Write the CountryController method to update a country

 

Step 16: Deleting a Country

Add the delete button to the table

Then add the delete modal to the page.

Write the javascript code in the country.js file to display the delete modal

You can test it at this point

Write the delete function in the CountryService and CountryController

Write the code to assign the delete url to the “Yes, Delete” button

Now test the delete function and make sure a record is deleted.

 

Continue to Part 2 – Showing Images and Thumbnails

 

4.3 3 votes
Article Rating
Subscribe
Notify of
guest
33 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] Build a Complete Spring Boot Application From the Scratch (Step by Step) […]

trackback
Introduction to Complete Application in Spring Boot (Step by Step Tutorial) | Nikkies Tutorials
1 year ago
trackback

[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]

trackback
45 – Validation in HTML Form With Regular Expression | Host your Website
1 year ago

[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]

Lamine BADJI
Lamine BADJI
11 months ago

Hello Mr. Kindson, my name is Lamine BADJI, student and living in Senegal. Your Complete Application with Spring Boot From the Scratch (Step by Step) course was of paramount importance to me, that’s why I’m writing these some lines to thank you and encourage you in what you do. Know that you are helping people who are in need and who cannot always afford quality courses.
This during that would be important if you implement the notifications part, that is to say if there is a message arriving from a client, that a notification is highlighted when opening the application for get the manager’s attention. Thank you in advance.

ANUSHA GHOLE
ANUSHA GHOLE
10 months ago

Hi,
I am working on an assignment to build a passport application based on spring MVC. can you please give me some reference application.
Thanks,
Anusha.

damilare
damilare
10 months ago

Hi kindson
after setting @RequestBody to event.preventDefault(); in my JS file is not picking up edit form again rather redirected me to Json page…. i observed that you experience the same thing towards the end of this video but i dont know how you get it fixed in the next video….i would be glad if can assistance me on this

Lamine BADJI
Lamine BADJI
10 months ago

Hello this is lamin BADJI, I already wrote you a message to thank you for your course on Complete Application with Spring Boot From the Scratch (Step by Step).
Again I thank you for the work you have done. Know that it helps people who do not necessarily have the means to pay for quality courses.
Regarding the hearing with the creation and modification dates it works wonderfully when I make the recording. On the other hand if I modify the same element, I lose the values ​​of the fields created_by and created_date. Thank you for helping me move forward.

john
john
10 months ago

hi kindson am john ilike you video an i apreciate for doing all those stafs freels and thanks.
ma quation is that in the controller when i redirect to the view page it doesnot work it pop ups alogin page what could be its problem

adel
adel
5 months ago
Reply to  john

Hie monsieur essaie d’obtenir les modèles sur l’étape 6, il dit que le fichier est dans la corbeille de l’utilisateur …

tynoex
tynoex
10 months ago

(spring boot)
Hie sir am trying to get the models on stage 6 its saying the file is in user’s trash…please may i get files want to follow the steps on your videos

ChandraShekhar Saraiya
ChandraShekhar Saraiya
9 months ago

Hi sir,
In step 14, inserting a country after following the steps I getting NULL values in MySQL table.

Please help me out i am stuck since 1 week.I am following your videos too.

Thanks and Regards,
Chandra

George Silker
George Silker
9 months ago

i am having problem with my database connection its saying
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure

Abdul Kather
Abdul Kather
9 months ago

I got the below exception when I create the country.html page.
——————————————

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: “country.id” (template: “country” – line 416, col 11)

————————————

but if I change property country model private into public, then it is working.

please help me on this.

Abdul Kather
Abdul Kather
9 months ago

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: “country.id” (template: “country” – line 416, col 11)

——————————————

I am facing the above issue when I am go w to /countries URL. While create and fetch data for country page I got this exception.

Please help me on this.

Vinotha
Vinotha
9 months ago

Hi Sir,

I m facing errors in UserPrinciples model class,that
The method getUsername() & getPassword() is undefined for the type User,
Returns the username used to authenticate the user. Cannot return null.

(Note: I haven’t changed anything,just added the java files of models.zip)

Help me out to solve this error.

Paras Sahu
Paras Sahu
9 months ago

sir please provide all files of models and controller class ….there is no zip folder there when i am clicking the link it is showing …”No preview available file is owner’s trash”

Manoj Kumar Sharma
Manoj Kumar Sharma
7 months ago

Dear Kindson, Tutorial is really great it’s very helpful for every level beginner, mid level and for expert also.

trackback

[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]

Parag patil
Parag patil
7 months ago

sir please provide all files of models and controller class ….there is no zip folder there when i am clicking the link it is showing …”No preview available file is owner’s trash”

Parag patil
Parag patil
7 months ago

sir please provide all files of models and controller class ….there is no zip folder there when i am clicking the link it is showing …”No preview available file is owner’s trash”
please provide the link

Parag
Parag
7 months ago

please provide the link of models and controlers java class

keshab bashyal
keshab bashyal
7 months ago

Hello,I am followig your toutrials, while displaying country list from table, it doesn’t show the list. and bootstrap button also not work properly. what is the error plz. my code on controller:
@GetMapping(“/countries”)

public String getCountries(Model model) {

List countryList =countryService.getCountries();
model.addAttribute(“countries”, countryList);

return “country”;
}
code on countryservice:
@Service
public class CountryService {

@Autowired
private CountryRepository countryRepository;

public List getCountries(){
return countryRepository.findAll();
}

}

model is ok, because while running program it creates table automatically

country.html:

Id
Description
Details

Joe
Joe
5 months ago

What is the purpose of the CommonObject class ? Why do we even need this ?

Vinayak
Vinayak
5 months ago

Getting below Error :

***************************
APPLICATION FAILED TO START
***************************

Description:

Field countryRepository in com.kindthesongenius.fleetapp.services.CountryService required a bean of type ‘com.kindsonthegenius.fleetms.repositories.CountryRepository’ that could not be found.

The injection point has the following annotations:
– @org.springframework.beans.factory.annotation.Autowired(required=true)

Action:

Consider defining a bean of type ‘com.kindsonthegenius.fleetms.repositories.CountryRepository’ in your configuration.

Luqman
Luqman
4 months ago

Hello Sir, how are you? Hope this message find your good health. I have one problem. I am using the Intellij Idea. you can see the screenshot. PropertyGenerator problem Cannot resolve symbol ‘PropertyGenerator’

111.jpg
Sabben
Sabben
3 months ago

Hi ,can you talk about more file upload function in fleetapp project.
thank you very much.