In the tutorial, JavaSampleApproach will show you how to create a web application Kotlin SpringMVC Form Submmission with Thymeleaf, SpringBoot and Boostrap 4 Form.
I. Technologies
– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Spring Boot – 1.5.9.RELEASE
– Kotlin 1.1.61
– Thymeleaf
– Bootstrap 4
II. Goal
In the tutorial, We create a SpringBoot project as below structure:
Run and check result:
-> form submmission:
-> result:
III. Practice
Step to do:
– Create SpringBoot project
– Create data models
– Create Web Controller
– Create submission forms
1. Create SpringBoot project
We use SpringToolSuite to create a SpringBoot project with dependencies:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.spaipringframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-stdlib-jre8</artifactId>
<version>${kotlin.version}</version>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-reflect</artifactId>
<version>${kotlin.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory>
<testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<artifactId>kotlin-maven-plugin</artifactId>
<groupId>org.jetbrains.kotlin</groupId>
<version>${kotlin.version}</version>
<configuration>
<compilerPlugins>
<plugin>spring</plugin>
</compilerPlugins>
<jvmTarget>1.8</jvmTarget>
</configuration>
<executions>
<execution>
<id>compile</id>
<phase>compile</phase>
<goals>
<goal>compile</goal>
</goals>
</execution>
<execution>
<id>test-compile</id>
<phase>test-compile</phase>
<goals>
<goal>test-compile</goal>
</goals>
</execution>
</executions>
<dependencies>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-maven-allopen</artifactId>
<version>${kotlin.version}</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
2. Create data models
– Create Address model:
package com.javasampleapproach.formsubmission.model
data class Address(
var street : String? = null,
var postcode : String? = null
){}
– Create Customer model:
package com.javasampleapproach.formsubmission.model
data class Customer(
var name : String? = null,
var age :Int? = null,
var address: Address = Address()
){}
3. Create Web Controller
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.GetMapping
import org.springframework.web.bind.annotation.ModelAttribute
import org.springframework.web.bind.annotation.PostMapping
import com.javasampleapproach.formsubmission.model.Customer
@Controller
class WebController {
private val log = LoggerFactory.getLogger(WebController::class.java)
@GetMapping("/")
fun home(): String{
return "redirect:/form"
}
@GetMapping("/form")
fun customerForm(model: Model): String{
model.addAttribute("customer", Customer())
return "form"
}
@PostMapping("/form")
fun customerSubmit(@ModelAttribute("customer") customer: Customer, model: Model): String{
model.addAttribute("customer", customer)
val info = String.format("Customer Submission: name = %s, age = %d, street = %s, postcode = %s",
customer.name, customer.age, customer.address.street, customer.address.postcode)
log.info(info)
return "result"
}
}
4. Create submission forms
– Create submission form – form.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<title>Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h1>Customer Form</h1>
<div class="row">
<div class="col-md-4">
<form action="#" th:action="@{/form}" th:object="${customer}" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" placeholder="Enter Name" id="name" th:field="*{name}"/>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" class="form-control" placeholder="Enter Age" id="age" th:field="*{age}"/>
</div>
<div class="form-group">
<label for="street">Street:</label>
<input type="text" class="form-control" placeholder="Enter Street" id="street" th:field="*{address.street}"/>
</div>
<div class="form-group">
<label for="postcode">PostCode:</label>
<input type="text" class="form-control" placeholder="Enter PostCode" id="postcode" th:field="*{address.postcode}"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</form>
</div>
</div>
</body>
</html>
– Create result.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div class="row">
<div class="col-md-4" style="margin-top:10px">
<div class="jumbotron">
<h1>Customer Info</h1>
<p th:text="'Name: ' + ${customer.name}" />
<p th:text="'Age: ' + ${customer.age}" />
<p th:text="'Street: ' + ${customer.address.street}" />
<p th:text="'PostCode: ' + ${customer.address.postcode}" />
<a href="/form" class="btn btn-primary" role="button">Add Customer</a>
</div>
</div>
</div>
</body>
</html>
IV. Sourcecode
SpringBootKotlinFormSubmission
