by 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:
| Dependency | Description |
| lombok | Helps to generate POJO codes |
| mysql-connector-java | Manages connection to MySQL Database |
| spring-boot-starter-web | Functionality for web applications created in Spring Boot |
| spring-boot-starter-data-jpa | Java Persistence API, helps handle data access |
| spring-boot-starter-thymeleaf | Template engine for rendering html pages |
| spring-boot-starter-security | Handles security, for instance user login, authentication and authorization (defer this till 10) |
| thymeleaf-extras-springsecurity5 | from 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. EmployeeType | 13. State (Or Region or Province) | 19. VehicleMaintenance |
| 2. Client | 8. Invoice | 14. Supplier | 20. VehicleMake |
| 3. CommonObject * | 9. InvoiceStatus | 15.User | 21. VehicleModel |
| 4. Contact | 10. JobTitle | 16. UserPrincipal (defer till 10) | 22. VehicleMovement |
| 5. Country | 11. Location | 17.Vehicle | 23. VehicleStatus |
| 6. Employee | 12. Person * | 18. VehicleHire | 24. 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.
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
Hey everyone, please find the completed application and files below
Complete Application on zip file – https://drive.google.com/file/d/19Kf-ZvVqSAeN8OJIMArkELQW6vDlTO6g/view?usp=sharing
This is the git repository https://github.com/KindsonTheGenius/fleetmsv1.git
Hi kindsonthegenius! Could you do one with Kotlin framework?
[…] Build a Complete Spring Boot Application From the Scratch (Step by Step) […]
[…] ➡️The tutorial page is here: https://www.kindsonthegenius.com/spring-boot/2020/01/16/build-a-complete-spring-boot-application-fro… […]
[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]
[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]
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.
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.
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
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.
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
Hie monsieur essaie d’obtenir les modèles sur l’étape 6, il dit que le fichier est dans la corbeille de l’utilisateur …
Ici….https://drive.google.com/drive/folders/11qLcJ_0z3PmzdxstyGokg7161d83ziZw?usp=sharing
(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
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
i am having problem with my database connection its saying
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
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.
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.
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.
I am also facing The method getPassword() is undefined for the type User
did you get answer for this issue.
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”
Dear Kindson, Tutorial is really great it’s very helpful for every level beginner, mid level and for expert also.
Thanks Manoj!
[…] Complete Application with Spring Boot From the Scratch (Step by Step) […]
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”
Here all the assets, and let me know if you can access them
https://drive.google.com/drive/folders/11qLcJ_0z3PmzdxstyGokg7161d83ziZw?usp=sharing
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
please provide the link of models and controlers java class
Here all the assets, and let me know if you can access them
https://drive.google.com/drive/folders/11qLcJ_0z3PmzdxstyGokg7161d83ziZw?usp=sharing
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
Reach my via Instagram or Facebook so I can assist you
What is the purpose of the CommonObject class ? Why do we even need this ?
The CommonObject class is not compulsory but it makes help reduce the codes you’ll have to write. For instance, many entities have the fields id, description and details. With CommonObject, you have to just define the is fields in one class and other classes inherits it.
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.
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’
Hi ,can you talk about more file upload function in fleetapp project.
thank you very much.
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.
Showing this error, why?
Error creating bean with name ‘invoiceStatusRepostiory’ defined in com.sts.repositories.InvoiceStatusRepostiory defined in @EnableJpaRepositories declared on JpaRepositoriesRegistrar.EnableJpaRepositoriesConfiguration: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: Not a managed type: class com.sts.models.InvoiceStatus
Do 3 things:
The complete application here –
This is the complete application for Version 1 – https://drive.google.com/file/d/19Kf-ZvVqSAeN8OJIMArkELQW6vDlTO6g/view?usp=sharing
This is the git repository – https://github.com/KindsonTheGenius/fleetmsv1.git
Hi Kindson, thanks a bunch man on this tutorial/training sessin. Feel blessed as I go thru the stages, blessings man
[…] Complete Application with Spring Boot From the Scratch … […]
Hi. Could you have the original bootstrap zip file?
Hi Sir, thanks for the course but on stage 11 i could not find the “panel-body-map” from the index.html. Kindy assist
Whitelabel Error PageThis application has no explicit mapping for /error, so you are seeing this as a fallback.
Wed May 24 15:47:28 IST 2023
There was an unexpected error (type=Not Found, status=404).
No message available
I am getting this kind of error when I edit and delete the country id. Why is it so? Can you guide me on this error?
hello i like your tutorial but i have a problem with my code not adding the modal
Hi Kindson, the link to the NiceAdmin template is leading to some other template and the html files in the shared git repository and google drive are not displaying properly. Can you share the NiceAdmin zip you used for this project?
MR kindsonthegenius please give us the database of your project please sir 🙂
Best Regards
Please see link to the database https://drive.google.com/file/d/1oC6Tp-cQJj9NHdb6uHb-UZElwZ-qXcAW/view?usp=drive_link.
It’s also available in github
Please see link to the database https://drive.google.com/file/d/1oC6Tp-cQJj9NHdb6uHb-UZElwZ-qXcAW/view?usp=drive_link.
It’s also available in github
Hello Kindson,
Thank you very much for the work you’ve done. I really appreciate that.
But the video #44 seems missing!
And i’d like to have a video as well on chart as it is displayed on the dashboad of the application.
Regards