Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

In the tutorial, JavaSampleApproach will show how to show images on web-view from Kotlin SpringBoot RestAPI with Bootstrap 4 Image and Jquery.

I. Technologies

– Java 1.9
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap 4
– Kotlin 1.1.61
– Spring Boot – 1.5.9.RELEASE

II. Goal

We create a SpringBoot project as below structure:

We create a Kotlin RestAPI:

@GetMapping(value = "/api/image")
fun getImage(): ResponseEntity{

	val imgFile = ClassPathResource("image/jsa_about_img.png")

	return ResponseEntity
			.ok()
			.contentType(MediaType.IMAGE_JPEG)
			.body(InputStreamResource(imgFile.getInputStream()))
}

We use Bootstrap 4 Image to style data on web-view, with results:

Bootstrap 4 Image provides useful classes to style with images:
– .rounded class adds rounded corners to an image

– .rounded-circle shapes the image to a circle

– .img-thumbnail shapes the image to a thumbnail (bordered)

We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:

Bootstrap 4 Aligning Images with 2 classes: {.float-right, .float-left}

Bootstrap 4 Responsive Images with .img-fluid class that applies max-width: 100% and height: auto.

III. Practice

Step to do:
– Create Kotlin SpringBoot project
– Create index controller
– Implement Kotlin RestAPI
– Create index.html view
– Create JQuery script

1. Create Kotlin SpringBoot project

Use SpringToolSuite to create a Kotlin SpringBoot project with dependencies:

<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>
	<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 Index controller

package com.javasampleapproach.bootstrap4image.controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
class WebController {
	
	@GetMapping(value="/")
    fun homepage(): String{
        return "index"
    }
}

3. Implement Kotlin RestAPI

package com.javasampleapproach.bootstrap4image.controller

import org.springframework.core.io.ClassPathResource
import org.springframework.core.io.InputStreamResource
import org.springframework.http.MediaType
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class RestAPI {
	
    @GetMapping(value = "/api/image")
    fun getImage(): ResponseEntity{
 
        val imgFile = ClassPathResource("image/jsa_about_img.png")
 
        return ResponseEntity
                .ok()
                .contentType(MediaType.IMAGE_JPEG)
                .body(InputStreamResource(imgFile.getInputStream()))
    }
}

4. Create index.html view

<!DOCTYPE HTML>
 
<html>
<head>
	  <title>Bootstrap 4 Image - Kotlin SpringBoot - JQuery</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>
	  <script src="/js/jquery.js"></script>
</head>
<body class="container">
 
<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI</h1>
<div>
	<div id="loadImageBootstrapStyleDiv">
		<a href="/api/image">
	        <img src="/api/image" id="jsaAboutImageId" class="rounded img-fluid" alt="JSA-About Image" />
	        <div class="caption">
	          <p>JSA-About Image</p>
	        </div>
	    </a>
	</div>
	<div class="btn-group">
  		<button id="roundedCornersBtn" type="button" class="btn btn-primary">Rounded Corners</button>
  		<button id="circleBtn" type="button" class="btn btn-primary">Circle</button>
  		<button id="thumbnailBtn" type="button" class="btn btn-primary">Thumbnail</button>
	</div>
</div>
<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">2. Bootstrap 4 Image Gallery</h1>
<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image">
        <img src="/api/image" class="rounded" alt="JSA-About rounded" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-rounded</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image">
        <img src="/api/image" class="rounded-circle" alt="JSA-About rounded-circle" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-circle</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image">
        <img src="/api/image" class="img-thumbnail" alt="JSA-About img-thumbnail" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-thumbnail</p>
        </div>
      </a>
    </div>
  </div>
</div>
<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">3. Bootstrap 4 Aligning Images</h1>
<div>
    <img src="/api/image" class="float-left" alt="JSA-About" width="320" /> 
	<img src="/api/image" class="float-right" alt="JSA-About" width="320" /> 
</div>

</body>
</html>

5. Create JQuery script

$( document ).ready(function() {
	$("#roundedCornersBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('rounded img-fluid');
	});
	
	$("#circleBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('rounded-circle img-fluid');
	});
	
	$("#thumbnailBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-fluid');
	});
})

IV. Sourcecode

KotlinSpringBootstrap4Image

Last updated on May 21, 2021.