An example Spring Web MVC app that can store/retreive/edit address book entries (CRUD functionality). For myself it is a way to learn Spring Framework and database storage. For people who are a little bit familiar with Spring MVC and would like to learn more, they can run project on their machine and explore how it is built. I added as much comments in code files as possible to help reader understand how everything works.
When application runs you have following functionalities:
Home screen -> Create Entry -> fill in details -> Add Entry -> a list of entries is displayed
Home screen -> Search For Entries -> type letters to search for -> Find Entry -> list of entries opens -> Edit -> edit details -> Update Entry -> updated list is displayed
Home screen -> Get All Entries (alternatively Search For Entry) -> a list of entries is displayed -> Delete -> updated list is displayed
It Utilises following technologies:
- Spring MVC
- Spring Annotations, Java Configuration
- JSP, Bootstrap
- Maven (version 3.5) Build Tool
- Tomcat (version 8.5)
- H2 (version 1.4.195) database to store Address Book Entries
I guess, newer versions of tools can be used as well, but just for stable experience I would stick with versions I used.
- Download and install latest Java SE (if you haven't done so already)
- Download and install Maven build Tool
- Download and unzip Tomcat application Server
- Download and install/unzip STS(it's a flavour of Eclipse IDE)
- Download and unzip H2 database.
- Run STS and create a workspace
- Download and extract AddressBook_SpringMVC_H2DB project to workspace folder
- In STS in Project Explorer right-click -> Import -> Maven -> Existing Maven Projects -> select the project you've just downloaded -> Finish -> selected project will appear in workspace
- Done!
This application is run on Tomcat Server from within STS. In order to do so, we need to create a Server entry withing STS.
- right-click in Servers tab on the bottom left of STS -> New -> Server -> Apache -> pick Tomcat with version you downloaded, 8.5 in my case -> Next -> Click on imported project and click Add -> Finish -> in servers tab newly created Tomcat server will be listed
Let's create address_book database and ENTRIES table in it. Without this application won't work.
- Navigate to downloaded and unzipped h2 folder /h2/bin/ and run h2-1.4.195.jar or it may have different numbers in name due to a different version
- A database console login page should open up in the browser. Fill it with details as follows:
- Press Connect
- A H2 Console should open up:
- Enter following query and press Run:
CREATE TABLE ENTRIES (
ID INT PRIMARY KEY AUTO_INCREMENT,
NAME VARCHAR(255),
SURNAME VARCHAR(255),
ADDRESS VARCHAR(255),
PHONE_NUMBER VARCHAR(255),
EMAIL VARCHAR(255),
ZIP VARCHAR(255)
);
- It should table named "ENTRIES" (look at top left):
- Now press red button in very top-left of H2 Console to disconnect from database. IT IS IMPORTANT TO DO THIS! Otherwise Application won't work, I guess because it uses same connection(login details) as we used to enter H2 Console.
- click on Tomcat server in Servers tab
- click button with play icon in Servers tab
- server will start (takes about 15 seconds)
- cross the fingers, hope everythings works fine
- once Server startup finished the console will display something like INFO: Server startup in 12508 ms
- go to application URL: http://localhost:8080/AddressBook_SpringMVC_H2DB/home.html
- use the app
- Set some breakpoints in all ApplicationController.java methods
- Start Tomcat as debug (bug icon button to the left from play button in Servers Tab)
- Go to URL: http://localhost:8080/AddressBook_SpringMVC_H2DB/home.html
- click on any application buttons
- STS should stop at debugging breakpoints you set
- Explore the application structure by traversing in/out through application methods
- config package contains Spring configuration
- controller package contains MVC controller. Basically it handles any button clicks from the browser. You can debug it's methods with STS to explore method calls and overall application architecture
- persistence handles database layer of the app
- persistence/jdbc contains specific JDBC calls to the database
- service is a glue between persistence and controller layers of the app. It's responsibility is to pass and modify entries between controller, which handles UI, and persistence to store to/retreive from the database.
Webpages that we see in the browser are compiled from JSP files (JSP stands for Java Server Pages. They get compiled on the server into HTMLs and sent to the browser) JSP files are located in src/main/webapp/WEB-INF/jsp/ folder They contain HTML + JSTL tags for use of if/else statements + Spring forms for sumbiting data to Spring Controllers
Resources can be folders with CSS, JavaScript files etc.. They are located in src/main/webapp/resources/
- Browser button is clicked ->
- ApplicationController ->
- ApplicationService ->
- AddressBookRepositoryJdbcImpl ->
- DAO files Store entry to database or retreive entry from database DAO stands for Data Access Object class. In this applciation they are classes with single responsibility, e.g. AddEntryDAO only adds new entry to database, GetAllEntriesDAO retreives all entries from the database
- DAO file returns entry ->
- AddressBookRepositoryJdbcImpl ->
- ApplicationService ->
- ApplicationController stores entry in Model object ->
- JSP's html tables and values get populated by entry data ->
- Browser
I think, the hardest part in creating Spring application is the configuration. Once it's done and the application is running - the rest is just pure joy of developing functionalities: adding webpages, styling them, creating Controller and Service methods to support UI calls, writing SQL queries to store/modify/retreive database data. In this project Spring configuration is scattered over 3 classes inside config package:
- PersistenceConfig - contains database configuration. It will create database on startup if doesn't exist yet.
- WebApplicationInitializerImpl - creates dispatcher servlet. It will handle URL requests that end with .html
- WebConfig - adds to application: folder with JSP views, folders with JS, CSS resources
Spring Configuration is the hardest part for me and I will need to spend some more time understanding it.