Langsung ke konten utama

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/

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

whois

  Pengertian:  whois adalah tools yang digunakan untuk melihat informasi mengenai kepemilikan domain dan website. ICANN meregulasikan domain name dan kepemelikian, tapi record listnya di adakan di semua company dikenal sebagai registrasi.  jadi orang bisa query list of records, dan register akan menghandle request anda dan mengirim detail dari whois record yang sesuai. How to Install whois :  sudo apt-get install whois How to use:  whois cnn.com dan hasilnya akan seperti ini. Domain Name: CNN.COM Registry Domain ID: 3269879_DOMAIN_COM-VRSN Registrar WHOIS Server: whois.corporatedomains.com Registrar URL: http://www.cscglobal.com/global/web/csc/digital-brand-services.html Updated Date: 2018-04-10T16:43:38Z Creation Date: 1993-09-22T04:00:00Z Registry Expiry Date: 2026-09-21T04:00:00Z Registrar: CSC Corporate Domains, Inc. Registrar IANA ID: 299 Registrar Abuse Contact Email: domainabuse@cscglobal.com Registrar Abuse Contact Phone: 8887802723 Domain Status: clien...
1 komentar
Baca selengkapnya

Membuat export dan import Excel di spring boot

Membuat export dan import Excel  di spring boot           Adakalanya seorang developer diminta untuk membuat fitur export dan import berbentuk excel dan sebenarnya java sudah menyediakan suatu liblary yang memudahkan kita untuk bekerja dengan MS-Office yaitu Apache POI. Disini saya akan menggunakan Apache POI untuk membaca dan menulis Excel. Catatan : Disini saya sarankan untuk belajar Apache POI Excel terlebih dahulu agar anda mengerti kode yang saya buat di bawah ini. Bahan : -  IntelliJ IDEA -  PostgreSQL -  Maven -  Java 8 Jika sudah tersedia bahan - bahan di atas langsung saja kunjungi situs ini Tambahkan dependency Apache POI di pom.xml seperti di bawah ini. <?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 http://maven.apache.org/xsd/maven-4.0.0...
Posting Komentar
Baca selengkapnya

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://loc...
4 komentar
Baca selengkapnya