Building scalable, fast and quick web application should be easier to realize your idea. I moved from Rails to Spring recently and trying to learn Spring as-fast-as-possible. I thought it could be helpful to publish practical steps, tips and tricks while building an example web application.

There are excellent tutorials on https://spring.io/guides but the reason I am writing this tutorial is because there are lots of missing information to build a web MVN app for the first time. For example, directory structure etc.

What Technology I am Using ?
First Things First

Make sure you have installed Oracle Java 7 (JDK) and Maven on your machine. I am assuming you are familiar with basics of Java.

Lets Start Project

First you should create a standard maven+spring directory structure as shown on left-side .

Project Structure

spring_mvcsrc/main contains all java and resournces

  • src/main/resources contains your html, images, css
  • src/main/resournces/application.properties is app configuration e.f. port to run

pom.xml represents the project is a Maven project, this file contains all dependencies and defines project resource management. You can learn more at http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html.

pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
<!-- parent is spring as we are using spring to build our app -->
    <groupId>org.springframework</groupId>
    <artifactId>com.yourappname</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>yourappname</name>
    <url>http://maven.apache.org</url>
    <parent>
<!-- following enables you to create standalone app, with embedded tomcat, auto-configuration etc -->
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.1.10.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
<!-- required as template engine -->
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
<!-- enables project packing, as jar or war, and running application -->
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>spring-milestone</id>
            <url>https://repo.spring.io/libs-release</url>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>spring-milestone</id>
            <url>https://repo.spring.io/libs-release</url>
        </pluginRepository>
    </pluginRepositories>
</project>
Create a Controller and View

create package names dreamjob under src/main/com directory and create following class (a simple controller) .

package dreamjob;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class DreamController {
//this means you have a controller to receive requests on route localhost:8080/
    @RequestMapping("/")
    public String dreamjob(@RequestParam(value="title", required=false, defaultValue="World") String title, Model model) {
        model.addAttribute("title", title);
        return "dreamjob";
    }
}
 return "dreamjob";
It is important to understand what above line of code is doing. It returns template when you call localhost:8080/. In our case
dreamjob.html, which is defined under src/main/templates/ .
 public String dreamjob(@RequestParam(value="title", required=false, defaultValue="World") String title, Model model) 
Above is to map/translate your request e.g. localhost:8080?title=doctor. It takes parameter sent to the
method dreamjob(....) and it maps title to String title, which eventually is used to set model 
property.
Build and Package

Navigate to your project root folder and execute following command. It will take some time to download all dependencies for the first time

mvn clean package
Running and Accessing Controller

when you execure mvn clean package it will generate a jar under target folder. You can simply run application (jar) with following command

java -jar target/<your_jar>.jar

By default the application will run on port 8080, you can accessing from browser using localhost:8080.

Running Application On A Different Port

You can run application on a different port by changing application.properties file, should be under src/main/resources folder. Make sure you package run .jar again.

server.port = 8090
Create a Controller and ThymeLeaf View (With bootstrap)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>DreamJob</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link href="bootstrap/3.3.2/css/bootstrap.min.css"
        th:href="@{/bootstrap/3.3.2/css/bootstrap.min.css}" rel="stylesheet" />

        <link href="bootstrap/3.3.2/css/bootstrap-theme.min.css"
        th:href="@{/bootstrap/3.3.2/css/bootstrap-theme.min.css}" rel="stylesheet" />

        <script src="http://code.jquery.com/jquery-2.1.3.min.js"
        th:src="@{/bootstrap/3.3.2/js/jquery-2.1.3.min.js}"></script>

        <script src="bootstrap/3.3.2/js/bootstrap.min.js"
        th:src="@{/bootstrap/3.3.2/js/bootstrap.min.js}"></script>

    </head>
    <body>
        <p th:text="'Hello, ' + ${title} + '!'" />
        <div class="container container">
            <form class="form-horizontal" action="#" th:action="@{/add}" th:object="${dreamjob}" method="get">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" >
                        </input>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </input>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                </input> Remember me </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">
                            Sign in
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
 Spring 4 Examples

https://github.com/spring-projects/spring-boot/tree/master/spring-boot-samples

Advertisements

2 thoughts on “Building MVC Web Application With Spring+Hibernate+Thymeleaf From Scratch

  1. hibernate is implementation of JPA, you have to set in application.properties that dialect
    jdbc.driverClassName= com.mysql.jdbc.Driver
    jdbc.dialect=org.hibernate.dialect.MySQLDialect

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s