Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan membuat web sederhana dari framework dan thymleaf. Editor yang saya gunkan yaitu netbeans. ok, langsung saja kita pada tahap-tahap membuat sederhana.
- hal yang pertama di lakukan mengenrate project dari "start.spring.io".
seperti pada gambar dibawah ini:
- kemudian buka buka editor aplikasi netbeans lalu open projeck hinnga tampil projeck dalam aplikasi tersebut:
- buat masing package dalam folder source pacakages, seperti pada gambar dibawah ini:
- script Mahasiswa.java :
- script Dosen.java :
- kemudian kita edit dalam folder package .dao
- script MahasiswaDao.java :
- Script untuk DosenDao.java
- Kemudai kita buat packagas .dao di dalam folder test packages, seperti pada gambar dibawah ini:
- Sciprt mahasiswadaotest :
- Script dosendaotest :
- Kemudian kita ke folder other sourcer > application.propertis:
- Edit application.properties tersebut seperti pada gambar dibawah ini:
- Kemudian kita clean and buil project tersebut. Tapi sebelumya buat terlebih dahulu database, seperti pada gambar diatas nama databasenya adalah db_absensi.
- Jiga hasil running sucsess kemudian kita cek di command promt apakah berhasil .
Dari gambar diatas kita sudah berhasil.
- Selanjutnya kita akan tampilkan di web dengan cara kita buat packages di source packages dengan nama controller > lalu buat file dengan nama mahasiswahtmlcotroller.
- Script file mahasiswahtmlcontroller :
@Controller
@RequestMapping("/mahasiswa")
public class MahasiswaHtmlController {
@Autowired
private MahasiswaDao md;
@RequestMapping("/list")
public void daftarMahasiswa (Model m){
m.addAttribute("daftarMahasiswa", md.findAll());
}
@RequestMapping("/hapus")
public String hapus (@RequestParam("id") String id){
md.delete(id);
return "redirect:list";
}
@RequestMapping(value = "/form", method = RequestMethod.GET)
public String tampilkanForm (@RequestParam(value = "id",
required = false) String id, Model m){
m.addAttribute("mahasiswa", new Mahasiswa ());
if (id != null && !id.isEmpty()){
Mahasiswa mhs = md.findOne(id);
if (mhs != null){
m.addAttribute("mahasiswa", mhs);
}
}
return "/mahasiswa/form";
}
@RequestMapping(value = "/form", method = RequestMethod.POST)
public String simpanData (@Valid Mahasiswa mhs,
BindingResult error){
if (error.hasErrors()){
return "/peserta/form";
}
md.save(mhs);
return "redirect:list";
}
- Kemudian kita buat file html di folder other sources
- List.html
- Form.html
- Ubah file list.html seperti dibawah ini:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>home</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<center>
<h1>Daftar Mahasiswa</h1>
<a herf="#" th:href="@{/mahasiswa/form}">
Tambah Data Mahasiswa</a>
<table border="1">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr th:each="mhs : ${daftarMahasiswa}">
<td th:text="${mhs.nim}"></td>
<td th:text="${mhs.nama}"></td>
<td th:text="${mhs.email}"></td>
<td>
<a herf="#" th:href="@{/mahasiswa/edit (id=${mhs.id})}">Edit</a>|
<a href="#" th:href="@{/mahasiswa/form(id=${mhs.id})}">Lihat</a>|
<a href="#" th:href="@{/mahasiswa/hapus(id=${mhs.id})}">Hapus</a>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
- Ubah form.html seperti tertulis dibawah ini:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>home</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Tamba Data Peserta</h1>
<form action="#" th:action="@{/mahasiswa/form}" th:object="${mahasiswa}" method="post">
<table border="1">
<tbody>
<tr>
<td>NIM</td>
<td><input type="text" th:field="*{nim}"/></td>
<td th:if="${#fields.hasErrors('nim')}"
th:error="*{nim}">Pesan Error</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" th:field="*{nama}"/></td>
<td th:if="${#fields.hasErrors('nama')}"
th:error="*{nama}">Pesan Error</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" th:field="*{email}"/></td>
<td th:if="${#fields.hasErrors('email')}"
th:error="*{email}">Pesan Error</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="center">
<input type="submit" value="simpan"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Kemudain kita clean and build dan juga kita running setelah berhasil, kita panggil dari browser :
- Kita coba untuk menambah data kita klik “Tambah Data Mahasiswa”
- Kita lihat hasilnya apakah berhasil disimpan:
Dari gambar diatas kita sudah berhasil membuat crud dari spring pramework.
