Spring Boot CRUD JPA + PostgreSQL + thymeleaf

Spring Boot CRUD JPA + PostgreSQL + thymeleaf

Image result for spring boot

Di artikel kali ini saya akan memberikan tutorials cara membuat CRUD(Create Read Update Delete) di Spring boot menggunakan JPA + PostgreSQL + Thymeleaf.

Bahan :
- Eclipse IDE
- PostgreSQL
- Maven
- JDK

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

Lalu import ke eclipse nya File -> Open Project from File System seperti ini.

Buat database nya dengan nama "springbootcrud" disini saya pakai pgAdmin4.

Jika sudah siap buat package di src yaitu

com.fluex404.springboot.model
com.fluex404.springboot.controller
com.fluex404.springboot.repository

Buat class Student.java di package com.fluex404.springbootcrud.model

package com.fluex404.springboot.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Version;

@Entity
@Table(name="student")
public class Student {
 @Id
 @GeneratedValue(strategy=GenerationType.AUTO)
 private Integer id;
 private String name;
 private String jurusan;
 @Version
 @Column(columnDefinition="") //integer DEFAULT 0
 private Integer version;
 
 public Student() {}
 public Student(String name, String jurusan) {
  this.name = name;
  this.jurusan = jurusan;
 }
 public Integer getId() {
  return id;
 }
 public void setId(Integer id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getJurusan() {
  return jurusan;
 }
 public void setJurusan(String jurusan) {
  this.jurusan = jurusan;
 }
 public Integer getVersion() {
  return version;
 }
 public void setVersion(Integer version) {
  this.version = version;
 }
}

Buat Interface StudentRepo.java di package com.fluex404.springbootcrud.repository

package com.fluex404.springboot.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.fluex404.springboot.model.Student;

public interface StudentRepository extends JpaRepository<Student, Integer> {

}

Isikan script ini di application.properties didalam resources

## Spring DATASOURCE (DataSourceAutoConfiguration & DataSourceProperties)
spring.datasource.url=jdbc:postgresql://localhost:5432/springbootcrud
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

Disini saya menggunakan bootstrap jadi agan bisa download source nya di https://getbootstrap.com/ lalu buat folder di dalam static bernama css dan js untuk menyimpan script bootstrap seperti ini lalu copas semua script nya ke dalam css dan js itu sesuai dengan format nya.

sekarang buat home.html didalam templates

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

<head>
<title>Spring Boot CRUD Example</title>

<meta charset="utf-8">
<meta name="viewport"
 content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link rel="icon" th:href="@{/img/ubuntu.png}">

<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
</head>
<body>
 <div class="container"><h2>STUDENT DATA</h2></div>
 <div class="container"><a class="btn btn-info" th:href="@{/create}" role="button">New</a></div>
 <div class="container">
  <table class="table">
   <thead class="thead-dark">
    <tr>
     <th scope="col">Name</th>
     <th scope="col">Jurusan</th>
     <th scope="col">Action</th>
    </tr>
   </thead>
   <tbody>
    <tr th:each="s : ${student}">
     <td scope="col" th:text="${s.name}"></td>
     <td scope="col" th:text="${s.jurusan}"></td>
     <td scope="col">
      <a th:href="${'/edit/'+s.id}" role="button" class="btn btn-primary"><span>Edit</span></a>
      <a th:href="${'/hapus/'+s.id}" role="button" class="btn btn-danger"><span>Remove</span></a>
     </td>
    </tr>
   </tbody>
  </table>
 </div>

</body>
</html>

Buat fromStudent.html di dalam templates

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

<head>
<title>Spring Boot CRUD Example</title>

<meta charset="utf-8">
<meta name="viewport"
 content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link rel="icon" th:href="@{/img/ubuntu.png}">

<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
</head>
<body>

 <div class="container">
  <h2>Form Student</h2>
 </div>

 <div class="container">
  <div class="row">
   <div class="col-sm-8">
    <form class="form-horizontal" th:object="${student}"
     th:action="@{/create}" method="post">
     <input type="hidden" th:field="*{id}" />
     <input type="hidden" th:field="*{version}" />

     <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="*{name}">
      </div>
     </div>

     <div class="form-group">
      <label class="col-sm-2 control-label">Jurusan:</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" th:field="*{jurusan}">
      </div>
     </div>
     
     <div class="form-group">
      <input type="submit" class="btn btn-success" value="Save">
      <a class="btn btn-danger" th:href="@{/}" role="button">Back</a>
     </div>
    </form>
   </div>
  </div>
 </div>

</body>
</html>

Sekarang kita mapping kan template-template dengan suatu controller. buat class HttpMapping1.java didalam com.fluex404.springbootcrud.controller.

package com.fluex404.springboot.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.fluex404.springboot.model.Student;
import com.fluex404.springboot.repository.StudentRepository;

@Controller
public class HttpMapping1 {
 @Autowired
 private StudentRepository repo;

 @RequestMapping("/")
 public String createHome(Model model) {  
  model.addAttribute("student", repo.findAll());
  return "home";
 }
 
 @RequestMapping(value="/create", method=RequestMethod.GET)
 public String create1(Model model) {
  model.addAttribute("student", new Student());
  return "formStudent";
 }
 
 @RequestMapping(value="/create", method=RequestMethod.POST)
 public String create2(Model model, Student student) {
  model.addAttribute("student", repo.save(student));
  return "redirect:/";
 }
 
 @RequestMapping(value="/edit/{id}", method=RequestMethod.GET)
 public String edit(@PathVariable Integer id, Model model) {
  model.addAttribute("student", repo.getOne(id));
  return "formStudent";
 }
 
 @RequestMapping(value="/hapus/{id}", method=RequestMethod.GET)
 public String hapus(@PathVariable Integer id) {
  repo.deleteById(id);
  return "redirect:/";
 }
}

Jika sudah selesai rangkaian folder nya akan seperti.

fluex404@android-jf2e0j2fncvx02n3:~/java/projects/springbootcrud$ tree
.
├── mvnw
├── mvnw.cmd
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── fluex404
│   │   │           └── springboot
│   │   │               ├── controller
│   │   │               │   └── HttpMapping1.java
│   │   │               ├── model
│   │   │               │   └── Student.java
│   │   │               ├── repository
│   │   │               │   └── StudentRepository.java
│   │   │               └── SpringbootcrudApplication.java
│   │   └── resources
│   │       ├── application.properties
│   │       ├── static
│   │       │   ├── css
│   │       │   │   └── bootstrap.min.css
│   │       │   ├── img
│   │       │   │   └── ubuntu.png
│   │       │   └── js
│   │       │       ├── bootstrap.min.js
│   │       │       ├── jquery-3.3.1.slim.min.js
│   │       │       └── popper.min.js
│   │       └── templates
│   │           ├── formStudent.html
│   │           └── home.html
│   └── test
│       └── java
│           └── com
│               └── fluex404
│                   └── springboot
│                       └── SpringbootcrudApplicationTests.java
└── target
    ├── classes
    │   ├── application.properties
    │   ├── com
    │   │   └── fluex404
    │   │       └── springboot
    │   │           ├── controller
    │   │           │   └── HttpMapping1.class
    │   │           ├── model
    │   │           │   └── Student.class
    │   │           ├── repository
    │   │           │   └── StudentRepository.class
    │   │           └── SpringbootcrudApplication.class
    │   ├── META-INF
    │   │   ├── MANIFEST.MF
    │   │   └── maven
    │   │       └── com.fluex404
    │   │           └── springbootcrud
    │   │               ├── pom.properties
    │   │               └── pom.xml
    │   ├── static
    │   │   ├── css
    │   │   │   └── bootstrap.min.css
    │   │   ├── img
    │   │   │   └── ubuntu.png
    │   │   └── js
    │   │       ├── bootstrap.min.js
    │   │       ├── jquery-3.3.1.slim.min.js
    │   │       └── popper.min.js
    │   └── templates
    │       ├── formStudent.html
    │       └── home.html
    └── test-classes
        └── com
            └── fluex404
                └── springboot
                    └── SpringbootcrudApplicationTests.class

41 directories, 32 files
fluex404@android-jf2e0j2fncvx02n3:~/java/projects/springbootcrud$

Tinggal jalankan dengan klick kanan SpringbootcrudApplication.java lalu run as spring boot didalam package com.fluex404.springbootcurd seperti ini.

Sekian Terimkasih ☺. Source nya bisa di download di https://github.com/fluex404/springbootcrud/

Cara Mudah Konfigurasi Maven Agar Bisa Diakses di CMD

Jika kamu sudah punya Maven dalam bentuk file ZIP dan ingin menggunakannya langsung di Command Prompt (CMD), berikut langkah-langkah simpel untuk mengonfigurasinya: Jika kamu belum memiliki file zip maven, kamu bisa mengunduhnya di tautan berikut: Download Maven 1. Ekstrak File Maven ZIP Ekstrak file ZIP Maven ke lokasi yang kamu inginkan. Misalnya: C:\Tools\maven Setelah ekstrak, kamu akan melihat folder dengan struktur seperti ini: C:\Tools\maven\apache-maven-<versi> 2. Temukan Lokasi Folder bin Masuk ke folder hasil ekstrak Maven, lalu cari sub-folder bernama bin . Lokasinya kira-kira seperti ini: C:\Tools\maven\apache-maven-<versi>\bin Salin path lengkap folder bin ini. Path ini akan kita tambahkan ke variabel lingkungan (environment variables). 3. Tambahkan Maven ke Variabel Lingkungan Buka Pengaturan Variabel Lingkungan Klik kanan pada This PC (atau My Computer ) dan pilih Properties . Klik Advanced system settings di bagian kiri. Pilih tombol Environme...

Baca selengkapnya

Isa Subani

Cari Blog Ini

Spring Boot CRUD JPA + PostgreSQL + thymeleaf

Label

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara dualboot phoenix os dengan Linux Mint, Ubuntu

Membuat export dan import Excel di spring boot

Cara Mudah Konfigurasi Maven Agar Bisa Diakses di CMD