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:

<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

54 thoughts on “Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery”

  1. It is truly a nice and helpful piece of information. I am glad
    that you shared this useful information with us.

    Please stay us up to date like this. Thanks for sharing.

  2. Attractive component to content. I just stumbled upon your site and in accession capital to assert that I
    get actually loved account your weblog posts. Anyway I’ll be subscribing on your feeds and even I fulfillment
    you get right of entry to persistently rapidly.

  3. Great weblog right here! Additionally your web site rather a lot up very fast!
    What web host are you the usage of? Can I get your associate link on your host?
    I want my website loaded up as quickly as yours lol

  4. Please let me know if you’re looking for a article author for your site.
    You have some really good posts and I think I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely love to write some articles
    for your blog in exchange for a link back to mine.

    Please blast me an e-mail if interested. Thank you!

  5. I was wondering if you ever thought of changing the layout of your website?
    Its very well written; I love what youve got
    to say. But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or 2 images.

    Maybe you could space it out better?

  6. Howdy! I know this is kind of off topic but I was
    wondering which blog platform are you using for this site?

    I’m getting sick and tired of WordPress because I’ve had
    issues with hackers and I’m looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of a good platform.

  7. I feel that is among the such a lot vital information for
    me. And i’m glad studying your article. But want to statement on some normal
    things, The site taste is wonderful, the articles is truly excellent : D.
    Good task, cheers

  8. What’s up i am kavin, its my first occasion to commenting anywhere, when i
    read this article i thought i could also make comment due to this brilliant piece of
    writing.

  9. I like the helpful information you provide in your articles.

    I will bookmark your weblog and check again here regularly.
    I am quite certain I will learn lots of new stuff
    right here! Best of luck for the next!

  10. Attractive portion of content. I simply stumbled upon your blog and in accession capital to
    say that I get actually enjoyed account your blog posts.
    Anyway I will be subscribing for your augment or even I achievement you get admission to persistently quickly.

  11. Thank you for the good writeup. It in fact
    was a amusement account it. Look advanced to far added agreeable
    from you! However, how could we communicate?

  12. Great blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really make my blog jump out.
    Please let me know where you got your theme.
    With thanks

  13. Attractive portion of content. I simply stumbled upon your web site and in accession capital
    to assert that I get actually loved account your weblog posts.
    Any way I’ll be subscribing to your feeds or even I fulfillment you get
    admission to persistently rapidly.

  14. obviously like your web site but you have to take a look
    at the spelling on quite a few of your posts.
    A number of them are rife with spelling issues
    and I in finding it very bothersome to tell the truth then again I’ll certainly come back again.

  15. Greate post. Keep writing such kind of info on your
    site. Im really impressed by it.
    Hi there, You’ve performed an excellent job. I will certainly digg it
    and for my part recommend to my friends. I’m confident they’ll be benefited from this
    web site.

  16. I have been browsing online more than three hours today, yet I
    never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all web owners
    and bloggers made good content as you did, the net will be much more useful
    than ever before.

  17. Hi! This post could not be written any better! Reading this post
    reminds me of my old room mate! He always kept chatting
    about this. I will forward this page to him. Fairly certain he will have a
    good read. Many thanks for sharing!

  18. Wonderful goods from you, man. I’ve understand your stuff previous to and you are just extremely magnificent.
    I really like what you’ve acquired here, really like what you
    are stating and the way in which you say
    it. You make it enjoyable and you still take care of to
    keep it sensible. I cant wait to read much more from you.
    This is really a great site.

  19. hello there and thank you for your information – I have
    definitely picked up something new from right here. I did however expertise some
    technical points using this website, as I experienced to reload the website many times previous to
    I could get it to load properly. I had been wondering if your web hosting is OK?
    Not that I’m complaining, but slow loading
    instances times will very frequently affect your placement
    in google and could damage your quality score if advertising and marketing
    with Adwords. Well I’m adding this RSS to my e-mail and can look out for much more of your respective intriguing content.
    Ensure that you update this again very soon.

  20. Hello there! I could have sworn I’ve been to this site before but after browsing through a few of the posts I realized it’s
    new to me. Nonetheless, I’m certainly delighted
    I stumbled upon it and I’ll be bookmarking it and checking back
    often!

  21. Wow, superb blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of your site is
    fantastic, let alone the content!

  22. Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something.

    I think that you could do with some pics to drive
    the message home a little bit, but instead of that, this is fantastic blog.
    An excellent read. I’ll certainly be back.

  23. hey there and thank you for your info – I’ve certainly picked up something
    new from right here. I did however expertise some technical issues using this website, as I experienced to reload the web site many times previous to I could get it to load correctly.
    I had been wondering if your web hosting is OK?
    Not that I’m complaining, but slow loading instances times will
    often affect your placement in google and could damage your high-quality score if ads and marketing with Adwords.

    Anyway I am adding this RSS to my e-mail and can look out for much more of your respective fascinating content.

    Ensure that you update this again soon.

  24. Hi there, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam
    comments? If so how do you prevent it, any plugin or anything you can suggest?
    I get so much lately it’s driving me mad so any support is
    very much appreciated.

  25. Hmm it looks like your blog ate my first comment (it was extremely long) so
    I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog blogger but I’m still new to everything.

    Do you have any tips for novice blog writers?
    I’d certainly appreciate it.

  26. If some one needs expert view regarding blogging and site-building after that i advise him/her
    to pay a quick visit this webpage, Keep up the fastidious work.

  27. Wonderful blog! I found it while surfing around on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!

    Cheers

  28. I truly love your website.. Excellent colors &
    theme. Did you develop this web site yourself?
    Please reply back as I’m attempting to create my own blog and want to
    find out where you got this from or what the theme is called.
    Thanks!

  29. Admiring the persistence you put into your site and detailed information you present.
    It’s good to come across a blog every once in a while that isn’t
    the same outdated rehashed material. Fantastic read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

  30. Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to more added agreeable from you! By
    the way, how can we communicate?

  31. My spouse and I absolutely love your blog and find many of your post’s to be precisely what I’m looking
    for. can you offer guest writers to write content for
    yourself? I wouldn’t mind publishing a post or
    elaborating on some of the subjects you write about here.

    Again, awesome web site!

  32. This is really interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more
    of your great post. Also, I have shared your site in my social
    networks!

Leave a Reply

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