Information Technology Inspiration: Belajar Membuat Web Menggunakan Spring Boot

Berikut adalah tahapan membuat web menggunakan Spring boot

1. Konfigurasi Spring Boot

Isikan file pom.xml :

<dependencies>

<dependency>

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

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

</dependency>

<dependency>

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

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

</dependency>

<dependency>

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

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

<scope>test</scope>

</dependency>

</dependencies>

2. Buat File HTML

Kemudian buat file html sebagai view : index.html. File tersebut dibuat di dalam folder resources/templates.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Selamat Datang Spring Boot</title>

</head>

<body>

<h2>Belajar Membuat Web Menggunakan Spring Boot</h2>

</body>

</html>

Untuk menjalankan buka browser : http://localhost:8081/ pada port 8081 disesuaikan pada file application.properties pada folder resources. jika membuat web dinamis, silahkan tambahkan depedensi berikut

<dependency>

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

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<scope>runtime</scope>

</dependency>

<dependency>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

</dependency>

3. Menambahkan Entitas

@Entity

@Data

public class Mahasiswa {

@Id

@GeneratedValue(generator = "uuid2")

@GenericGenerator(name = "uuid2", strategy = "uuid2")

private String id;

@NotNull

@NotBlank

@Column(unique = true)

private String nim;

@NotNull

@NotBlank

private String nama;

private float ipk;

@NotNull

@NotBlank

private String jurusan;

}

Keterangan :

@Entity : mendeklarasikan bahwa class Mahasiswa adalah berupa entitas yang akan di-mapping ke dalam sebuah tabel dalam database.
@Data : menandai class Mahasiswa akan diberikan method getter dan setter
@Id, @GeneratedValue(generator = "uuid2"), @GenericGenerator(name = "uuid2", strategy = "uuid2") digunakan untuk field id digunakan sebagai primary di database dengan nilai diisi menggunakan UUID.
@Column(unique = true), maksudnya adalah agar field nim dibuat unik pada database
@NotNull dan @NotBlank, field yang mendapatkan anotasi itu tidak boleh kosong ataupun NULL.

4. Migrasi Database

Membuat entitas, bisa langsung dibuatkan struktur tabel, tetapi kali ini akan membuat struktur tabel dengan file sql, Spring Boot dapat melakukan database migrasi menggunakan depedency Flyway. TTambahkan depedency tersebut pada file pom.xml seperti berikut ini

<dependency>

<groupId>org.flywaydb</groupId>

<artifactId>flyway-core</artifactId>

</dependency>

Pada file application.properties juga perlu ditambahkan lokasi file sql yang akan dieksekusi, konfigurasi seperti dibawah :

spring.flyway.locations=classpath:db/migration

Keterangan :

file sql terdapat di dalam folder resources/db/migration, tetapi disini bisa mengganti lokasi file sql tersebut dengan mengubah nilai pada spring.flyway.locations=[lokasi file sql]. Jangan lupa menambahkan file sql tersebut pada direktori tersebu.

Format : mengikuti flyway yaitu V<VERSION>__<NAME>.sql.

Contoh V1.0__init_tables.sql. Kemudian dijalankan maka akan membuatkan schema sesuai dengan file sql dan akan terbentuk tabel flyway_schema_history dalam database.

5. Membuat Controller

Controller dalam aplikasi web merupakan pintu masuk dari request client, tugasnya adalah meneruskan ke model atau mengembalikan request ke client.

@Controller

public class MahasiswaController {

@Autowired

private MahasiswaDao mahasiswaDao;

@GetMapping("/index")

public ModelMap getAll(Pageable pageable) {

return new ModelMap().addAttribute("mahasiswas", mahasiswaDao.findAll(pageable));

}

@GetMapping("/")

public String index() {

return "redirect:/index";

}

Keterangan :

@Controller, menandai bahwa class MahasiswaController adalah sebuah controller yang akan dilakukan scan oleh Spring
@Autowired, untuk meng-inisiasi objek mahasiswaDao.
@GetMapping("/index"), method di bawahnya berarti menggunakan http request GET. Sedangkan parameter objek pageable agar support paging.
redirect:/index, berarti ketika memanggil pada path "/" maka akan diteruskan ke path "/index" pada browser.

6. Buat Template Thymeleaf

Template Thymeleaf merupakan salah satu template engine yang tersedia pada Spring Boot, karena ketika menggunakan jsp dianggap kurang menarik sehingga menggunakan template engine. File index.html perlu disesuaikan seperti dibawah

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title>Spring Boot</title>

</head>

<body>

<h2>Web Template Engine Thymeleaf Menggunakan Spring Boot</h2>

<h2>List Mahasiswa</h2>

<table>

<tr>

<th>Nim</th>

<th>Nama</th>

<th>IPK</th>

<th>Jurusan</th>

<th>Action</th>

</tr>

<tr th:each="mhs : ${mahasiswas}">

<td th:text="${mhs.nim}"> </td>

<td th:text="${mhs.nama}"> </td>

<td th:text="${mhs.ipk}"> </td>

<td th:text="${mhs.jurusan}"> </td>

<td>

<a href="#">Edit</a> |

<a href="#">Hapus</a> |

<a href="#">Detail</a>

</td>

</tr>

</table>

</body>

</html>

Jalan browser http://localhost:8081

7. Implementasi Paging

Pada controller yang telah dibuat support untuk paging, kebetulan sudah ada yang membuat untuk kebutuhan tersebut. dan bisa didownload pada link download. Kemudian tambahkan depedency pada file pom.xml

<dependency>

<groupId>io.github.jpenren</groupId>

<artifactId>thymeleaf-spring-data-dialect</artifactId>

<version>3.4.0</version>

</dependency>

Selain itu, dibutuh juga untuk mendefiniskan sebuah @Bean untuk melakukan konfigurasi. Tambahkan kode berikut ini pada class yang memiliki anotasi @SpringBootApplication, contoh class DemoThymeleafApplication.

@Bean

public SpringDataDialect springDataDialect() {

return new SpringDataDialect();

}

Lalu tambahkan css bootstrap dan script untuk menampilkan icon paging pada file yang akan diberikan paging, tambahkan menggunakan BootStrapCDN dan script tersebut seperti berikut ini

<div class="row">

<div class="col-sm-6">

<div sd:pagination-summary="">info</div>

</div>

<div class="col-sm-6">

<nav class="pull-right">

<ul class="pagination" sd:pagination-split="7" sd:pagination="full">

<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>

<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>

</ul>

</nav>

</div>

Jjalankan aplikasi yang telah ditambahkan paging pada browser.

Tes untuk menerapkan paging dengan mengetik alamat ini pada browser http://localhost:8081/index?size=1. Pagingnya seharusnya akan berubah