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
- 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:
|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.
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.