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.

Contents

I. Technologies
II. Goal
III. Practice
IV. Sourcecode

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:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - project structure

We create a Kotlin RestAPI:

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

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

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

@GetMapping(value = "/api/image")

fun getImage(): ResponseEntity<InputStreamResource>{

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:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - results

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

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - rounded shape

– .rounded-circle shapes the image to a circle

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - circle shape

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

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - thumnail shape

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

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - image gallary

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

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - Aligning Images

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>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.jetbrains.kotlin</groupId>

<artifactId>kotlin-stdlib-jre8</artifactId>

<version>${kotlin.version}</version>

</dependency>

<groupId>org.jetbrains.kotlin</groupId>

<artifactId>kotlin-reflect</artifactId>

<version>${kotlin.version}</version>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

</dependencies>

<build>

<sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory>

<testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

<artifactId>kotlin-maven-plugin</artifactId>

<groupId>org.jetbrains.kotlin</groupId>

<version>${kotlin.version}</version>

<plugin>spring</plugin>

</compilerPlugins>

</configuration>

<id>compile</id>

<phase>compile</phase>

<goals>

<goal>compile</goal>

</goals>

</execution>

<id>test-compile</id>

<phase>test-compile</phase>

<goals>

<goal>test-compile</goal>

</goals>

</execution>

</executions>

<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"
    }
}

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<InputStreamResource>{
 
        val imgFile = ClassPathResource("image/jsa_about_img.png")
 
        return ResponseEntity
                .ok()
                .contentType(MediaType.IMAGE_JPEG)
                .body(InputStreamResource(imgFile.getInputStream()))
    }
}

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<InputStreamResource>{

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>

<!DOCTYPE HTML>

<html>

<head>

<title>Bootstrap 4 Image - Kotlin SpringBoot - JQuery</title>

</head>

<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI</h1>

<div>

<p>JSA-About Image</p>

</div>

</a>

</div>

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

<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">2. Bootstrap 4 Image Gallery</h1>

<p>JSA-About img-rounded</p>

</div>

</a>

</div>

<p>JSA-About img-circle</p>

</div>

</a>

</div>

<p>JSA-About img-thumbnail</p>

</div>

</a>

</div>

<h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">3. Bootstrap 4 Aligning Images</h1>

<div>

</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');
	});
})

$( 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

By grokonez | December 9, 2017.

Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

I. Technologies

II. Goal

III. Practice

1. Create Kotlin SpringBoot project

2. Create Index controller

3. Implement Kotlin RestAPI

4. Create index.html view

5. Create JQuery script

IV. Sourcecode

Post Tags

Got Something To Say: Cancel reply

I. Technologies

II. Goal

III. Practice

1. Create Kotlin SpringBoot project

2. Create Index controller

3. Implement Kotlin RestAPI

4. Create index.html view

5. Create JQuery script

IV. Sourcecode

Related Posts

Post Tags

Got Something To Say: Cancel reply