Kotlin SpringMVC Form Submission – with Thymeleaf + SpringBoot + Boostrap 4 Form

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:

Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - project structure

Run and check result:

-> form submmission:

Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - fill data to form

Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - logs request

-> result:

Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - results

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



By grokonez | December 7, 2017.

Last updated on May 2, 2021.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*