Membuat website thymeleaf menggunakan spring boot di netbeans
Buat project.
Dengan cara buka browser kemudain masuk di URL start.spring.io
Setelah itu generate (download)
Kemudian buka Netbeans
Kemudian Open Project . untuk membuka projext yang sudah di download tadi
Klik open project
Kemudain klik Other Sources -> src/main/resources -> <default package> -> application.properties
application.properties
disini adalah tempat untuk mengkoneksikan project dengan database, namun sebelum itu kita harus membuat nama database, cukup nama database saja. Disini nama database saya adalah k
Setelah itu masuk di Source Packages
Disini buat package baru yang bernama
Com.uts.tugasUTS.entity
Dengan cara klik kanan di package com.uts.tugasUTS ->new-> java package
Tulisan yang berwarna biru yang tertulis newpackage ganti dengan entity, kemudian didalam package entity buat dua kelas java dosen dan mahasiswa. Cara membuat class java dengan cara klik kanan di package entity kemudain pilih java class
Disini kita akan membuat dua table.
ketikan di :
Dosen.java
package com.uts.tugasUTS.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import org.hibernate.annotations.GenericGenerator;
@Entity
public class Dosen {
@Id
@GeneratedValue(generator = "uuid")
@GenericGenerator(name = "uuid", strategy = "uuid2")
private String id;
@Column(nullable = false)
private String nama;
@Column(nullable = false, unique = true)
private String email;
@Column(nullable=false, length = 50)
private String nidn;
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 getNidn() {
return nidn;
}
public void setNidn(String nidn) {
this.nidn = nidn;
}
}
Mahasiswa.java
package com.uts.tugasUTS.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import org.hibernate.annotations.GenericGenerator;
@Entity
public class Mahasiswa {
@Id
@GeneratedValue(generator = "uuid")
@GenericGenerator(name = "uuid", strategy = "uuid2")
private String id;
@Column(nullable = false)
private String nama;
@Column(nullable=false, length = 50)
private String nim;
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 getNim() {
return nim;
}
public void setNim(String nim) {
this.nim = nim;
}
public void addAttribute(String mahasiswa, Mahasiswa m) {
throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}
}
Setelah itu buat package baru lagi bernama package dao. Cara buatnya sama seperti diatas Cuma nama yang berbeda
Didalam package dao buat dua class lagi yaitu class :
DosenDao.java
package com.uts.tugasUTS.dao;
import com.uts.tugasUTS.entity.Dosen;
import org.springframework.data.repository.PagingAndSortingRepository;
public interface DosenDao extends PagingAndSortingRepository<Dosen, String> {
}
MahasiswaDao.java
package com.uts.tugasUTS.dao;
import com.uts.tugasUTS.entity.Mahasiswa;
import org.springframework.data.repository.PagingAndSortingRepository;
public interface MahasiswaDao extends PagingAndSortingRepository<Mahasiswa, String> {
}
Buat satu lagi package untuk menghubungkan dengan web
DosenHtmlController.java
package com.uts.tugasUTS.controller;
import com.uts.tugasUTS.dao.DosenDao;
import com.uts.tugasUTS.entity.Dosen;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
/**
*
* @author lab-soft16
*/
@Controller
@RequestMapping("/dosen")
public class DosenHtmlController {
@Autowired
private DosenDao pd;
@RequestMapping("/lihat")
public void daftarDosen(Model m) {
m.addAttribute("daftarDosen", pd.findAll());
}
@RequestMapping("/hapus")
public String hapus(@RequestParam("id") String id) {
pd.delete(id);
return "redirect:lihat";
}
@RequestMapping(value = "/tambah", method = RequestMethod.POST)
public String prosesTambah(@Valid Dosen g, BindingResult errors) {
if (errors.hasErrors()) {
return "/dosen/tambah";
}
pd.save(g);
return "redirect:lihat";
}
@RequestMapping(value = "/tambah", method = RequestMethod.GET)
public String lihatTambah(@RequestParam(value = "id", required = false) String id, Model m) {
//defaultnya isi dengan object baru
m.addAttribute("dosen", new Dosen());
if (id != null && !id.isEmpty()) {
Dosen g = pd.findOne(id);
if (g != null) {
m.addAttribute("dosen", g);
}
}
return "/dosen/tambah";
}
}
MahasiswaHtmlController.java
package com.uts.tugasUTS.controller;
import com.uts.tugasUTS.dao.MahasiswaDao;
import com.uts.tugasUTS.entity.Mahasiswa;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
/**
*
* @author Lab-Soft16
*/
@Controller
@RequestMapping("/mahasiswa")
public class MahasiswaHtmlController {
@Autowired
private MahasiswaDao pd;
@RequestMapping("/lihat")
public void daftarMahasiswa(Model m) {
m.addAttribute("daftarMahasiswa", pd.findAll());
}
@RequestMapping("/hapus")
public String hapus(@RequestParam("id") String id) {
pd.delete(id);
return "redirect:lihat";
}
@RequestMapping(value = "/tambah", method = RequestMethod.POST)
public String prosesTambah(@Valid Mahasiswa mh, BindingResult errors) {
if (errors.hasErrors()) {
return "/mahasiswa/tambah";
}
pd.save(mh);
return "redirect:lihat";
}
@RequestMapping(value = "/tambah", method = RequestMethod.GET)
public String lihatTambah(@RequestParam(value = "id", required = false) String id, Model m) {
//defaultnya isi dengan object baru
m.addAttribute("mahasiswa", new Mahasiswa());
if (id != null && !id.isEmpty()) {
Mahasiswa mh = pd.findOne(id);
if (m != null) {
m.addAttribute("mahasiswa", mh);
}
}
return "/mahasiswa/tambah";
}
}
Maka hasilnya akan seperti ini jika sudah membuat 3 package
Kemudian buat tampilan web di :
Buat dua tamplate :
Tamplate.dosen dan tamplate.mahasiswa
Didalam package tampale.dosen dan tamplate.mahasisa buat dua html java yaitu lihat.html dan tambah.html
Template.dosen
Lihat.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Daftar Dosen</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Daftar Dosen</h1>
<a href="#" th:href="@{/dosen/tambah}">Tambah</a>
<table border="1">
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr th:each="p : ${daftarDosen}">
<td th:text="${p.nama}"></td>
<td th:text="${p.email}"></td>
<td>
<a href="edit.html" th:href="@{/dosen/edit(id=${p.id})}">
Edit
</a>
<a href="#" th:href="@{/dosen/hapus(id=${p.id})}">
Hapus
</a> |
</td>
</tr>
</tbody>
</table>
</body>
</html>
Tambah.html
<!DOCTYPE html>
<html>
<head>
<title>Tambah</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Tambah Data</h1>
<form action="#" th:action="@{/dosen/tambah}" th:object="${dosen}" method="post">
<table border = "1">
<tbody>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="nama" th:field="*{nama}" /></td>
<td th:if="${#fields.hasErrors('nama')}" th:errors="*{nama}">Pesan Error</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" placeholder="Email Valid" th:field="*{email}" /></td>
<td th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Pesan Error</td>
</tr>
<tr>
<td colspan="3" align="right"><button type="submit">Simpan</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Template.mahasiswa
Lihat.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Daftar Mahasiswa</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Daftar Mahasiswa</h1>
<a href="#" th:href="@{/mahasiswa/tambah}">Tambah</a>
<table border="1">
<thead>
<tr>
<th>Nama</th>
<th>Nim</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr th:each="p : ${daftarMahasiswa}">
<td th:text="${p.nama}"></td>
<td th:text="${p.nim}"></td>
<td>
<a href="edit.html" th:href="@{/mahasiswa/edit(id=${p.id})}">
Edit
</a>
<a href="#" th:href="@{/mahasiswa/hapus(id=${p.id})}">
Hapus
</a> |
</td>
</tr>
</tbody>
</table>
</body>
</html>
Tambah.html
<!DOCTYPE html>
<html>
<head>
<title>Tambah</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Tambah Data</h1>
<form action="#" th:action="@{/mahasiswa/tambah}" th:object="${mahasiswa}" method="post">
<table border = "1">
<tbody>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="nama" th:field="*{nama}" /></td>
<td th:if="${#fields.hasErrors('nama')}" th:errors="*{nama}">Pesan Error</td>
</tr>
<tr>
<td>Nim</td>
<td><input type="text" placeholder="nim" th:field="*{nim}" /></td>
<td th:if="${#fields.hasErrors('nim')}" th:errors="*{nim}">Pesan Error</td>
</tr>
<tr>
<td colspan="3" align="right"><button type="submit">Simpan</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Setelah membuat template, kemudian clean and build
Setelah mucul tulisan success lalu klik tombol Run
Buka browser
Masukkan URL localhost:8080/dosen/lihat
Akan di uji coba, menambahkan data klik tambah
Kemudian isikan data dosen
Kemudian Simpan
Maka hasilnya akan seperti ini
Kemudian coba isikan data dengan data mahasiswa
Data berhasil di inputkan
Sekian dari saya .
