CRUD Menggunakan Spring Data JPA dan Thymeleaf

CRUD menggunakan Spring Data JPA

Untuk melakukan CRUD, setiap entitas didefinisikan dengan beberapa tahap yaitu :

Membuat Model.Di model ini akan terdapat atribut-atribut yang nantinya akan ditrasformasikan menjadi tabel pada Database.

Membuat DAO.Dia yang bertugas mendefinisikan metode apa saja yang dibutuhkan oleh Controller.

Membuat Controller.Controller ini berfungsi untuk mengatur apa yang akan ditampilkan ke view, apa yang akan disimpan ke database dan melakukan mapping url.

Membuat View (List dan Form).View ini akan menjadi apa yang akan dilihat oleh user.Jadi Struktur foldernya akan seperti ini :Struktur foldernya akan seperti berikut :

XML

Copy

src
 └── main
 |    ├── java
 |       └── com
 |           └── example
 |               ├── DemoApplication.java
 |               ├── controllers
 |               ├── dao
 |               └── model
 └── resources
         ├── application.properties
         ├── static
         │   ├── css
         │   ├── fonts
         │   └── js
         └── templates

CRUD sendiri dapat dibagi menjadi 2 tipe tergantung dimana menggenerate contenya, yaitu client side dan server side. Dalam mengiplementasikanya, bentuk Model dan Dao nya tetap sama, yang membedakan adalah controller dan viewnya saja.

Membuat Model

Membuat class untuk model

Java

Copy

@Entity
public class Peserta {
}

Keterangan :

Untuk setiap kelas yang ingin dibuat menjadi model, harus diberi anotasi Entity pada bagian atasnya.

Menambahkan atribut

Java

Copy

@Entity
public class Peserta {
    private String id;
    private String nama;
    private String email;
    private String noHp;
}

Menambahkan validasi tiap atribut

Java

Copy

@Entity @Table(name = "tabel_peserta") 
public class Peserta {
  @Id @GeneratedValue(generator = "uuid") 
	@GenericGenerator(name = "uuid", strategy = "uuid2") 
	private String id;
  
	@Column(nullable = false) 
	@NotNull @NotEmpty @Size(min = 1, max = 150) 
	private String nama;
  
	@Column(nullable = false, unique = true) 
	@Email @NotNull @NotEmpty 
	private String email;
  
	@Column(nullable = false, unique = true) @NotNull @NotEmpty 
	private String noHp;
}

Validasi di spring sendiri menggunkan JSR-303. Setiap variabel dapat didefinisikan secara spesifik menggunakan validasi. Sebagai Table, NotNull, NotEmpty dll.

Menambahkan getter dan setter

Kotlin

Copy

public String getId() {
  return id;
}
public void setId(String id) {
  this.id = id;
}
public String getNama() {
  return nama;
}
public void setNama(String nama) {
  this.nama = nama;
}
public String getEmail() {
  return email;
}
public void setEmail(String email) {
  this.email = email;
}
public String getNoHp() {
  return noHp;
}
public void setNoHp(String noHp) {
  this.noHp = noHp;
}

Membuat DAO

Membuat interface dao dan menginherit class PagingAndSortingRepository

Kotlin

Copy

public interface PesertaDao extends PagingAndSortingRepository<Peserta, String>{}

Dengan menginherit class PagingAndSortingRepository kita dapat menggunakan method yang biasa digunakan untuk CRUD seperti findAll, findOne, save, delete dll.

Membuat methode untuk searching (optional)

Kotlin

Copy

public interface PesertaDao extends PagingAndSortingRepository < Peserta, String > {
  @Query(value = "select p from Peserta p where p.kelas.id = ?1 ORDER BY id_kelas") 
	public Page < Peserta > findByKelasId(String id_kelas, Pageable pageable);
}

Selain spring sudah mendefinisikan method yang sering digunakan, spring juga memperbolehkan kita untuk membuat method sesuai yang kita inginkan. Sebagai contoh diatas kita membuat Page yang berisi daftar peserta berdasar kelas tertentu. Dalam pembuatanya spring juga memperbolehkan menggunakan query sql atau query jpa.

Membuat controller (src/main/java/domain/controller/PesertaPagingController.java)

Kotlin

Copy

@Controller @RequestMapping("/peserta") 
public class PesertaPagingController {
  @Autowired PesertaPagingDao pesertaPagingDao;

  @RequestMapping("/list") 
	public String listPeserta(ModelMap modelMap) {
    modelMap.put("peserta", pesertaPagingDao.findAll());
    return "/peserta/list";
  }

  @RequestMapping(value = "/form", method = RequestMethod.GET) 
	public void tampilkanForm(@RequestParam(required = false, name = "id") PesertaPaging peserta, ModelMap mm) {
    if (peserta != null) {
      mm.addAttribute("peserta", peserta);
    } else {
      mm.addAttribute("peserta", new PesertaPaging());
    }
  }
  
	@RequestMapping(value = "/form", method = RequestMethod.POST) 
	public String prosesForm(@ModelAttribute @Valid PesertaPaging p, BindingResult hasilValidasi) {
    if (hasilValidasi.hasErrors()) {
      return "/peserta/form";
    }
    pesertaPagingDao.save(p);
    return "redirect:list";
  }

  @RequestMapping(value = "/hapus") 
	public String hapusPeserta(@RequestParam(name = "id") String id, ModelMap modelMap) {
    pesertaPagingDao.delete(id);
    return "redirect:list";
  }
}

Membuat UI untuk list(src/main/resources/templates/peserta/list.html)

Kotlin

Copy

<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <title>Aplikasi Spring Boot</title>
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"  media="screen"/>
      <link rel="stylesheet" th:href="@{/css/starter-template.css}" media="screen"/>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" th:href="@{/}">ciazhar</a>        </div>
            <div id="navbar" class="collapse navbar-collapse">
               <ul class="nav navbar-nav">
                  <li class="active"><a th:href="@{/peserta}">Daftar Peserta</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
               </ul>
            </div>
            <!--/.nav-collapse -->    
         </div>
      </nav>
      <div class="container">
         <h1>Daftar Peserta</h1>
         <div th:if="${not #lists.isEmpty(peserta)}">
            <table class="table table-striped">
               <tr>
                  <th>Nama</th>
                  <th>Email</th>
                  <th>No Hp</th>
                  <th>Action</th>
               </tr>
               <tr th:each="pesertas : ${peserta}">
                  <td th:text="${pesertas.nama}"></td>
                  <td th:text="${pesertas.email}"></td>
                  <td th:text="${pesertas.noHp}"></td>
                  <td>                    <a th:href="@{/peserta/form(id=${pesertas.id})}"><span class="glyphicon glyphicon-edit"></span></a>                    <a th:href="@{/peserta/hapus(id=${pesertas.id})}"><span class="glyphicon glyphicon-remove"></span></a>                </td>
               </tr>
            </table>
         </div>
         <div>        <a class="btn btn-default" th:href="@{/peserta/form}">New</a>    </div>
      </div>
      <script th:src="@{/js/jquery.min.js}"></script><script th:src="@{/js/bootstrap.min.js}"></script>
   </body>
</html>

Membuat UI untuk form(src/main/resources/templates/peserta/form.html)

Kotlin

Copy

<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <title>Aplikasi Spring Boot</title>
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"  media="screen"/>
      <link rel="stylesheet" th:href="@{/css/starter-template.css}" media="screen"/>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" th:href="@{/}">ciazhar</a>        </div>
            <div id="navbar" class="collapse navbar-collapse">
               <ul class="nav navbar-nav">
                  <li class="active"><a th:href="@{/peserta}">Daftar Peserta</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
               </ul>
            </div>
            <!--/.nav-collapse -->    
         </div>
      </nav>
      <div class="container">
         <h1>Form Peserta</h1>
         <div class="row">
            <div class="col-sm-8">
               <form class="form-horizontal" th:object="${peserta}" th:action="@{/peserta/form}" method="post">
                  <input type="hidden" th:field="*{id}"/>                
                  <div class="form-group">
                     <label class="col-sm-2 control-label">Nama:</label>                    
                     <div class="col-sm-10">                        <input type="text" class="form-control" th:field="*{nama}"/>                    </div>
                  </div>
                  <div class="form-group">
                     <label class="col-sm-2 control-label">Email:</label>                    
                     <div class="col-sm-10">                        <input type="email" class="form-control" th:field="*{email}"/>                    </div>
                  </div>
                  <div class="form-group">
                     <label class="col-sm-2 control-label">Nomer HP:</label>                    
                     <div class="col-sm-10">                        <input type="text" class="form-control" th:field="*{noHp}"/>                    </div>
                  </div>
                  <div class="form-group">                    <button type="submit" class="btn btn-deffault">Simpan</button>                </div>
               </form>
            </div>
         </div>
      </div>
      <script th:src="@{/js/jquery.min.js}"></script><script th:src="@{/js/bootstrap.min.js}"></script>
   </body>
</html>