Spring Boot CRUD Thymeleaf-Pagination + Bootstrap Dynamic Modals

Spring Boot CRUD Thymeeaf-Pagination + Bootstrap Dynamic Modals

               Sebelumnya saya sudah sharing bagaimana cara membuat Spring Boot CRUD sederhana di artikel sebelumnya yang blum lihat silahkan lihat disini. Sekarang saya akan membuat Spring Boot CRUD lagi ala pagination dan Dynamic Modals dengan bootstrap.

Bahan :
- IntelliJ IDEA
- PostgreSQL
- Maven
- JDK1.8

Jika bahan nya sudah tersedia agan bisa kunjungi situs resmi spring nya https://start.spring.io/  buat seperti ini lalu download dan exract.

Buat database yang bernama "springbootcrud2" disini saya menggunakan pgadmin4.

Buka intelliJ atau IDE kesayangan kalian buka file application.properties di dalam resources dan isikan ini untuk configurasi databasenya sesuai kan dengan database kalian lalu save.

## Spring DATASOURCE (DataSourceAutoConfiguration & DataSourceProperties)
spring.datasource.url=jdbc:postgresql://localhost:5432/springbootcrud2
spring.datasource.username=postgres
spring.datasource.password=postgres

# The SQL dialect makes Hibernate generate better SQL for the chosen database
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect

# Hibernate ddl auto (create, create-drop, validate, update)
spring.jpa.hibernate.ddl-auto=update

Buat 3 package didalam src/springbootcrud2/ yaitu controller, dao, dan model seperti ini.

Buat class model yaitu Siswa.java di package model.

package com.fluex404.springbootcrud2.model;

import com.fasterxml.jackson.annotation.JsonFormat;

import javax.persistence.*;

@Entity
@Table(name = "siswa")
public class Siswa {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int id;
    private String nama;
    private String jurusan;

    public Siswa(String nama, String jurusan) {
        this.nama = nama;
        this.jurusan = jurusan;
    }

    public Siswa() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getJurusan() {
        return jurusan;
    }

    public void setJurusan(String jurusan) {
        this.jurusan = jurusan;
    }

    @Override
    public String toString() {
        return "Siswa{" +
                "id=" + id +
                ", nama='" + nama + '\'' +
                ", jurusan='" + jurusan + '\'' +
                '}';
    }

}

Buat interface SiswaDao.java di package dao.

package com.fluex404.springbootcrud2.dao;

import com.fluex404.springbootcrud2.model.Siswa;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface SiswaDao extends JpaRepository<Siswa, Integer> {
}

Buat class HttpMappingController.java di package controller.

package com.fluex404.springbootcrud2.controller;

import com.fluex404.springbootcrud2.dao.SiswaDao;
import com.fluex404.springbootcrud2.model.Siswa;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
public class HttpMappingController {
    @Autowired
    private SiswaDao siswaDao;

    @GetMapping("/")
    public String createIndex(Model model, @RequestParam(defaultValue = "0", name = "page") int page) {
        model.addAttribute("siswas", siswaDao.findAll(new PageRequest(page, 4)));
        model.addAttribute("buatPage", page);
        model.addAttribute("buatSiswa", new Siswa());
        return "index";
    }

    @PostMapping("/save")
    public String save(Siswa siswa) {
        siswaDao.save(siswa);

        return "redirect:/";
    }

    @GetMapping("/delete")
    public String deleteSiswa(@RequestParam("id") int id) {
        siswaDao.deleteById(id);

        return "redirect:/";
    }
}

Buat class HttpMappingRestController.java di package controller.

package com.fluex404.springbootcrud2.controller;

import com.fluex404.springbootcrud2.dao.SiswaDao;
import com.fluex404.springbootcrud2.model.Siswa;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HttpMappingRestController {
    @Autowired
    private SiswaDao siswaDao;

    @GetMapping("/findOne")
    public Siswa createFindOne(@RequestParam("id") Integer id) {
        Siswa s = new Siswa();
        Siswa tmp = siswaDao.getOne(id);

        //init
        s.setId(tmp.getId());
        s.setNama(tmp.getNama());
        s.setJurusan(tmp.getJurusan());

        return s;
    }

}

Buat index.html di dalam resources/templates.

<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>Pendataan Siswa | Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Image -->
    <link rel="icon" th:href="@{/img/ubuntu.png}"/>


     <!--Online-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin="anonymous"></script>

    <script th:src="@{/js/main.js}"></script>
</head>
<body>
<div class="container">
    <button class="btn btn-primary nBtn">New</button>
    <table class="table table-hover">
        <thead class="bg-dark text-white">
        <tr>
            <td>Nama</td>
            <td>Jurusan</td>
            <td>Action</td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="s : ${siswas}">
            <td th:text="${s.nama}"></td>
            <td th:text="${s.jurusan}"></td>
            <td>
                <a class="btn btn-primary text-white eBtn"
                   th:href="@{http://localhost:8080/findOne/(id=${s.id})}">Edit</a>
                <a class="btn btn-danger text-white rBtn" th:href="${'/delete?id='+s.id}">Remove</a>
            </td>
        </tr>
        </tbody>
    </table>
    <ul class="nav nav-pills">
        <li class="nav-item" th:each="i : ${#numbers.sequence(0, siswas.totalPages-1)}">
            <a th:href="${'?page='+i}" th:text="${i}" class="nav-link"
               th:classappend="${buatPage}==${i}?'active':''"></a>
        </li>
    </ul>
</div>

<!-- Modal Edit n New-->
<div class="myForm">
    <form th:action="@{/save}" method="post" th:object="${buatSiswa}">
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
             id="exampleModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Save or Update</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="form-control" id="id" name="id" value="" th:field="*{id}">
                        <div class="form-group">
                            <label for="nama" class=" label">Nama</label>
                            <input type="text" class="form-control" id="nama" name="nama" value="" th:field="*{nama}">
                        </div>
                        <div class="form-group">
                            <label for="jurusan" class=" label">Jurusan</label>
                            <input type="text" class="form-control" id="jurusan" name="jurusan" value=""
                                   th:field="*{jurusan}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal Edit n Remove-->
<div class="myRemove">
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
         id="exampleModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Save or Update</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert-danger text-dark p-2">Apakah anda yakin ?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <a class="btn btn-danger dBtn" href="">Delete</a>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

Buat main.js di dalam resources/static/js ( sebelumnya buat dulu package didalam static yaitu js)

$(document).ready(function(){

    $('.nBtn, .table .eBtn').click(function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        var text = $(this).text();

        if(text == 'Edit') {
            $.getJSON(href, function(response){
                $('.myForm #id').val(response.id).hide();
                $('.myForm #nama').val(response.nama);
                $('.myForm #jurusan').val(response.jurusan);
            });
            $('.myForm #exampleModal').modal();
        } else {
            $('.myForm #id').val('0').hide();

            $('.myForm #nama').val('');
            $('.myForm #jurusan').val('');
            $('.myForm #exampleModal').modal();
        }

    });

    $('.rBtn').click(function(event){
        event.preventDefault();
        var href=$(this).attr('href');
        $(".myRemove .dBtn").attr('href',href);
        $('.myRemove #exampleModal').modal();

    });

});

Buka Browser kalian http://localhost:8080/

Penjelasan :

1. application.properties.  = berguna untuk menconfigurasi database agar applikasi bisa terhubung dengan database
   - spring.datasource.url = url database
   - spring.datasource.username = username database
   - spring.datasource.password= password database
   - spring.jpa.properties.hibernate.dialect = configurasi database dialect bisa agan liat di hibernate_configuration = di bagian dialect nya sesuai dengan DBMS yang kalian pakai
   - spring.jpa.hibernate.ddl-auto = membuat aksi di database ada beberapa aksi yaitu : 
       update : akan mengupdate table database yang lama pada DBMS
       create : tidak akan mengupdata table database yang lama melain akan menghapus dan membuat table baru.
2. package model. = berguna untuk menyimpan model - model
 Siswa.java. = berguna untuk membuat suatu model yang berfungsi untuk intraksi dengan database. Ada beberapa annotations yang akan saya jelaskan sedikit yaitu :
   - @Entity = yang berguna untuk mendefinisikan bahwa Siswa.java adalah sebuah model dan akan di tambahkan menjadi table pada database (default nya adalah nama dari class itu sendiri). 
  - @Table = annotatins ini berguna untuk menconstomize sesuai yang kita inginkan disini saya ingin merubah nama dari table nya yaitu "siswa" defaultnya adalah "Siswa".
  - @Id = annotations ini berguna untuk mendifinisikan bahwa variable dibawah ini adalah primary key.
  - @GeneratedValue(strategy = GenerationType.AUTO) = annotations ini berguna untuk auto generated pada primary key.
3. package controller = berguna untuk menyimpan class controlle. Disini saya memiliki 2 class yaitu HttpMappingController.java dan HttpMappingRestController.java yang mana HttpMappingController.java adalah class controller dan HttpMappingRestController.java adalah class restful controller.
HttpMappingController.java :
- @Controller = annotations ini berguna untuk mendifinisikan bahwa kelas ini adalah sebuah class controller dimana yang di return kan dalam @RequestMapping adalah sebuah nama templates.
- @Autowire = annotations ini berguna untuk DI(Definisi Injection)/memanggil interface dao dengan cara spring.
- @GetMapping = untuk mendifinisikan bahwa method dibawah ini memappingkan url "/" yang menggunakan method GET dan memberikan cookie dengan mode.addattribute(nama, value)
- @PostMapping = untuk mendifinisikan bahwa method di bawah ini memampingkan url "/save" yang menggunakan method POST untuk memberikan action save ketika user mengirim object ke server
HttpMappingRestController.java :
- @RestController = annotations ini berguna untuk mendifinisikan bahwa kelas ini adalah sebuah restful dimana yang di returnkan adalah nilai asli yang di returnkan dari method nya.
4. terakhir untuk view nya saya menggunakan bootstrap dan jquery dimana bootstrap untuk tampilan dan jQuery untuk membuat view menjadi dynamic.

Kalau masih kurang jelas bisa di tanyakan di kolom komentar atau bisa tanya langsung melalui facebook saya www.facebook.com/fluex404. Untuk source nya bisa di download di github saya https://github.com/fluex404/springbootcrud2