ozenero | Mobile & Web Programming Tutorials

Web Form Submission is regular task when developing a Web page. In the tutorial, JavaSampleApproach will introduce you how to use Spring Form Submission when building a Spring MVC Web page.

I. Technology for Spring Form Submission tutorial

– Java 1.8
– Maven: 3.3.9
– Editor: Spring Tool Suite – Version 3.7.3.RELEASE
– Spring Boot: Version: 3.8.0.RELEASE

II. Overview

1. Project Structure

Spring Form Submission - Project Structure

2. Step to do

– Create Spring Boot project
– Create a Customer model
– Create a simple Web Controller.
– Create a html views.
– Run & Check result

III. Practices

1. Create a Spring Boot project

Open Spring Tool Suite, choose File -> New -> Spring Starter Project, input project’s info. Press Next button, then add needed dependencies:
– For Thymeleaf, choose Template Engines, select Thymeleaf
– For Spring Web MVC, choose Web, then select Web.

Press Finish, Spring Boot project will be created successfully.
Check pom.xml file for dependencies:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. Create Customer model

package com.javasampleapproach.formsubmission.model;

public class Customer {
	 
    private long id;
    private String firstname;
    private String lastname;
     
 
    public long getId() {
        return id;
    }
 
    public void setId(long id) {
        this.id = id;
    }
 
    public String getFirstname() {
        return firstname;
    }
 
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
 
    public String getLastname() {
        return lastname;
    }
 
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
 
}

3. Create a Simple Web Controller.

Create SimpleWebController with 2 RequestMappings:
– @RequestMapping(value=”/form”, method=RequestMethod.GET): return a html view: form

– @RequestMapping(value=”/form”, method=RequestMethod.POST): to submit customer form, then a html view: “result “

package com.javasampleapproach.formsubmission.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.javasampleapproach.formsubmission.model.Customer;
 
 
@Controller
public class SimpleWebController {
 
    Logger log = LoggerFactory.getLogger(this.getClass());
     
    @RequestMapping(value="/form", method=RequestMethod.GET)
    public String customerForm(Model model) {
        model.addAttribute("customer", new Customer());
        return "form";
    }
 
    @RequestMapping(value="/form", method=RequestMethod.POST)
    public String customerSubmit(@ModelAttribute Customer customer, Model model) {
         
        model.addAttribute("customer", customer);
        String info = String.format("Customer Submission: id = %d, firstname = %s, lastname = %s", 
                                        customer.getId(), customer.getFirstname(), customer.getLastname());
        log.info(info);
         
        return "result";
    }
 
}

4. Create html views.

– Create 2 html views: “result” & “form”
Place them at: /src/main/resources/template

– form.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Customer Form</h1>
    <form action="#" th:action="@{/form}" th:object="${customer}" method="post">
    	<p>Id: <input type="text" th:field="*{id}" /></p>
        <p>First Name: <input type="text" th:field="*{firstname}" /></p>
        <p>Last Name: <input type="text" th:field="*{lastname}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
</body>
</html>

– result.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Result</h1>
    <p th:text="'id: ' + ${customer.id}" />
    <p th:text="'First Name: ' + ${customer.firstname}" />
    <p th:text="'Last Name: ' + ${customer.lastname}" />
    <a href="/form">Submit another Customer Form</a>
</body>
</html>