Spring Web + Bootstrap 5.1
Hai hyvercoder! kali ini kita akan membuat aplikasi Spring web application dengan framework css yang sudah umum yaitu Bootstratp 5.1 dimana aplikasi ini berisikan data tamu atau member, aplikasi kali ini akan mengunakan
- Spring Web Application
- Thymeleaf
- Bootstrap 5.1
- Java 8/11
- Maven
Buat project spring boot menggunakan Spring Initializr dependency yang akan kita gunakan adalah :
- spring-boot-starter-thymeleaf
- spring-boot-starter-web
- bootstrap
Install dependencies dengan perintah mvn clean install, tanpilan struktur project seperti berikut
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.6</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>11</java.version>
</properties>
<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.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Sekarang kita buat file html pada dir resources-templates
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/styles.css}"/>
<title>Belajar Spring Boot Web</title>
</head>
<body>
<div class="container">
<h1>Buku Tamu</h1>
<a class="btn btn-primary" href="/bukutamu" >Buku Tamu</a>
<a class="btn btn-primary" href="/daftar-bukutamu" >List Buku Tamu</a>
</div>
</body>
<script type="text/javascript" th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</html>bukutamu.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/styles.css}"/>
<title>Belajar Spring Boot Web</title>
</head>
<body>
<div>
<div class="container">
<a href="/"><h1>Buku Tamu</h1></a>
<form action="/bukutamu/simpan" method="post">
<label for="fname">Nama</label>
<input type="text" class="form-control" id="fname" name="firstname" placeholder="Masukan nama">
<label for="lname">Telepon</label>
<input type="text" id="lname" name="lastname" class="form-control" placeholder="Masukan nomor telepon">
<label for="subject">Alamat</label>
<textarea id="subject" name="subject" class="form-control" placeholder="Masukan alamat"></textarea>
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</body>
<script type="text/javascript" th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</html>daftar-bukutamu.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/styles.css}"/>
<title>Belajar Spring Boot Web</title>
</head>
<body>
<div class="container">
<a href="/"><h1>Daftar Buku Tamu</h1></a>
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Telepom</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>087885876037</td>
<td>Cisauk Tangerang Selatan</td>
</tr>
<tr>
<td>Mary</td>
<td>087885876045</td>
<td>Cisauk Tangerang Selatan</td>
</tr>
<tr>
<td>July</td>
<td>021-5098680</td>
<td>Cisauk Tangerang Selatan</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</html>Setelah kita membuat file ht kita juga bisa menambahkan custom css yaitu dengan cara membuat file css pada directory resources-static-css seperti berikut :
styles.css
h1{
color:red;
}selain file css, kita juga bisa menambahkan file js (javascript) pada directory yang sama.
Sekarang kita masuk ke controller dimana controller ini berfungsi sebagai pengatur atau navigation , selain itu juga file controller inilah yang nantinya akan digunakan sebagai file java / class java yang bertugas mengelola logic aplikasi yang kita buat, buka class Main aplikasi ini class main adalaha class DemoApplication, kemudain tambahn route controller sebagai berikut :
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@SpringBootApplication
@Controller
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
@GetMapping("/")
public String index(){
return "index.html";
}
@GetMapping("/bukutamu")
public String book(){
return "bukutamu.html";
}
@GetMapping("/daftar-bukutamu")
public String daftar(){
return "daftar-bukutamu.html";
}
}
pada class ini terdapat @Controller atau Annotation yang menandakan bahwa class ini digunakan sebagai controller index,bukutamu dan daftar-bukutamu dimana methode yang digunakan adalah GET , bisa kita lihat pada methode yang dibuat mengunakan Annotaion @GetMapping . dan mengembalikan nilai yaitu file-file html yg sebelumnya telah kita buat. Setelah itu sekarang kita coba jalankan aplikasi kita dengan perintan mvn spring-boot:run, jika tidak ada kesalahan makan akan terlihan halam index seperti berikut :
http://localhost:8080/
disini kita sudah melihat framewrok bootstrap sudah teintegrasi dengan thymeleaf bisa dilihat dari button yang digunakan adalah class button dari bootstrap dan file css yang kita buat juga terlihat pada h1 dengan warna merah.
Jikakedua button kita klick makan akan menmapilkan halaman seperti berikut :
http://localhost:8080/bukutamu
http://localhost:8080/daftar-bukutamu
The project source code can be downloaded on the GitHub  spring-boot-web-bootstrap
