[Web] Spring Boot Web Application

Posted on |

Building a Spring Boot Web Application for movie ticket and service website.

movie ticket and service website demo

★Source codes here (Commits on May 23, 2017)
Note: this post focuses on the front end part of Project: Movie Ticket and Service Website without any complex business logic. The code will be updated as the project progresses.

Overview

Only several steps are needed to build such a simple application:

  1. Initialize a Spring Boot project with IntelliJ IDEA. Be sure to check “Web” and “Thymeleaf”. (Refer to PART 1 - Spring Initializer)
  2. Download two web templates:
  3. Serving web content with Spring MVC – write htmls and controllers. Also need to combine two web templates. (Refer to Serving Web Content with Spring MVC, PART 2 - Using Thymeleaf and PART 4 - Spring MVC)
  4. Including Thymeleaf fragments to make code neat and compact. (Refer to PART 4 - Spring MVC)

What you will use in this application are:

  • Spring
  • Spring MVC for the web part (without database currently)
  • Thymeleaf for the template engine
  • Tomcat server

Spring

Spring is a framework which can be used to build JVM-based systems and applications. Spring MVC Framework is used for developing Web application. Spring Boot can free us from complex configuration.
We use Boot because it’s fast. We use framework because we don’t want to reinvent the wheel (e.g. session management, templating frameworks, database access…) and focus on business logic methods. We use Model–view–controller (MVC) because it modularized code and promotes code reuse. We use Spring because it has many features to make it “simple, portable, fast and flexible”.

Spring MVC

The Model-View-Controller (MVC) software design pattern is a method for separating concerns within a software application. In principal, the application logic, or controller, is separated from the technology used to display information to the user, or the view layer. The model is a communications vehicle between the controller and view layers. (link)

Model

Model refers to a data model, or some type of data structure.

For example, in movie ticket and service website, the ‘model’ would contain a list of movie data and user data (username, password..).
Here we skip this part.

View – Thymeleaf

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

In Spring, Thymeleaf is a view technology. It performs server-side redering of the HTML.
Here I use an example to show some basic use of Thymeleaf. In this case, Thymeleaf parses the utils.html template below and evaluates the th:* expressions to render corresponding parameters.

HTML in Standalone Environment

We write a page utils.html containing header and footer (also the head of html) that will be reused across web pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head lang="en">
    <link href="../../static/css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="full">
    <div class="main">
        <div class="error-content">
            <div class="top-header span_top">
                <div class="logo">
                    <a href="index.html">
                        <img src="../../static/images/logo.png" alt="" />
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="error-404 text-center"></div>
            <div class="footer">
                <div class="copyright">
                    <p> Template by  <a href="http://w3layouts.com">  W3layouts</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Directly open the utils.html in browser:

HTML in Web Environment

Spring Boot configures the Thymeleaf template engine to read template files from /resources/templates by default. Following is the directory structure we use:

But run the web application we will get this utils page:

It fails to find the link of stylesheet and logo image while still shows the text. This is because we haven’t configured Thymeleaf.

The complete code of utils.html is as follow. Details will show below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:fragment="head">
    <link href="../../static/css/bootstrap.css"
          th:href="@{css/bootstrap.css}" rel='stylesheet' type='text/css' />
    <link href="../../static/css/style.css"
          th:href="@{css/style.css}" rel="stylesheet" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="full">
    <div class="main">
        <div class="error-content">
            <div class="top-header span_top" th:fragment="header">
                <div class="logo">
                    <a href="index.html"><img src="../../static/images/logo.png"
                                              th:src="@{images/logo.png}" alt="" /></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="error-404 text-center"></div>
            <div class="footer" th:fragment="footer">
                <div class="copyright">
                    <p> Template by  <a href="http://w3layouts.com">  W3layouts</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

For utils.html, you need to configure (th:* attributes):

  • Line 2 -> Declare a Thymeleaf namespace indicating use of the Thymeleaf extensions: <html xmlns:th="http://www.thymeleaf.org">
  • Line 5/7/18 -> Link URLs by th:href and th:src attributes. E.g. use th:href="@{css/style.css}" to link stylesheet and th:src="@{images/logo.png}" to link logo image. Note the root of the relative path is resources/static.

Now the page can be normally rendered in web application.

Including Template Fragments

Define Thymeleaf Fragments

Use the th:fragment attribute to define the fragments available for inclusion.

  • Line 3 -> Define head fragment: <head lang="en" th:fragment="head">
  • Line 15 -> Define header fragment: <div class="top-header span_top" th:fragment="header">
  • Line 25 -> Define footer fragment: <div class="footer" th:fragment="footer">
Including Fragments in Pages

In the block you want to use fragment, use code like <!--/*/ <th:block th:include="fragments/utils :: head"></th:block> /*/-->.
For example, the following code implement the Log In page based on the three fragments we defined above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Movie Ticket and Service Website | Contact</title>
    <!--/*/ <th:block th:include="fragments/utils :: head"></th:block> /*/-->
</head>
<body>
<div class="full">
    <div class="main">
        <div class="contact-content">
            <div class="top-header span_top">
                <!--/*/ <th:block th:include="fragments/utils :: header"></th:block> /*/-->
            </div>
            <div class="main-contact">
                <div class="contact-form">
                    <form>
                        <input type="text" placeholder="Email" required="required" />
                        <input type="password" placeholder="Password" required="required"/>
                        <input type="submit" value="Log In"/>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer">
            <!--/*/ <th:block th:include="fragments/utils :: footer"></th:block> /*/-->
        </div>
    </div>
</div>
</body>
</html>

Controller

In order to visit the website, we need to design urls. For example, the application will accept HTTP GET requests at both http://localhost:8080/ and http://localhost:8080/index.html and respond with the index page displaying HTML.

HTTP requests are handled by a controller. In the following example, the IndexController handles HTTP requests for / (web root path) and /index by returning the name of a View, in this case, “index” (index template). A View is responsible for rendering the HTML content:

1
2
3
4
5
6
7
8
9
10
11
12
package team.legendary.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
    @RequestMapping("/")
    String root() {return  "index";}
    @RequestMapping("/index")
    String index() {return  "index";}
}
  • @Controller annotation indicates that IndexController class is a “Controller”.
  • @RequestMapping annotation ensures that HTTP requests to / and /index are mapped to the root() and index() method respectively.

Reference & Futher Reading

  1. Serving Web Content with Spring MVC
  2. Tutorial series – SPRING BOOT WEB APPLICATION: PART 1 - Spring Initializer, PART 2 - Using Thymeleaf, PART 3 - Spring Data JPA, PART 4 - Spring MVC and PART 5 - Spring Security.
  3. Cinema a Entertainment Category Flat Bootstrap Responsive Web Template
  4. Movie Ticket Booking Widget Flat Responsive Widget Template
  5. (Spring) Web MVC framework
  6. 打造功能完整的博客系统：Spring MVC实战入门
  7. 新一代Java模板引擎Thymeleaf