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:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - project 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:

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:


	
		org.springframework.boot
		spring-boot-starter-thymeleaf
	
	
		org.springframework.boot
		spring-boot-starter-web
	
	
		org.jetbrains.kotlin
		kotlin-stdlib-jre8
		${kotlin.version}
	
	
		org.jetbrains.kotlin
		kotlin-reflect
		${kotlin.version}
	

	
		org.springframework.boot
		spring-boot-starter-test
		test
	



	${project.basedir}/src/main/kotlin
	${project.basedir}/src/test/kotlin
	
		
			org.springframework.boot
			spring-boot-maven-plugin
		
		
			kotlin-maven-plugin
			org.jetbrains.kotlin
			${kotlin.version}
			
				
					spring
				
				1.8
			
			
				
					compile
					compile
					
						compile
					
				
				
					test-compile
					test-compile
					
						test-compile
					
				
			
			
				
					org.jetbrains.kotlin
					kotlin-maven-allopen
					${kotlin.version}
				
			
		
	

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

 


	  Bootstrap 4 Image - Kotlin SpringBoot - JQuery
      
  	  
	  %MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf220%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf221%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf222%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf223%

 

1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI

2. Bootstrap 4 Image Gallery

3. Bootstrap 4 Aligning Images

JSA-About JSA-About
%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf224%
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



By grokonez | December 9, 2017.


Related Posts


Got Something To Say:

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

*