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:

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.

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