Nama : Edil M. Aras
Nim : 131315010
Kelas : A Semester 5
M.K : Pemr. Framework II
Nim : 131315010
Kelas : A Semester 5
M.K : Pemr. Framework II
Laporan : Tugas UTS
Kemarin kami ditugaskan untuk membuat sebuah tampilan html berbentuk tabel didalam project netbeans. Berikut ini saya akan menjelaskan tentang cara - cara membuat project.
Langkah pertama yang saya lakukan adalah mendownload project maven di link https//:start.spring.io contohnya seperti dibawah ini :
Didalam project ini saya menggunakan spring boot versi 158 dan dependencies-nya saya menggunakan WEB, MYSQL, JPA, dan Thymeleaf. Nama project-nya saya berinama “Tugas_UTS” Untuk mendownload file tersebut klik generate project.
Setelah selesai mendownload sekarang kita open project yang kita download tadi kedalam netbeans
Setelah itu kita download m2 didalam project netbeans fungsi m2 sendiri adalah sebagai pendukung pembuatan project.
Setelah selesai mendownload m2 sekarang kita buat package entity, controller dan dao didalam source package
- Entity
Fungsi dari package entity adalah sebagai tempat untuk membuat sebuah tabel, dan attribute didalam database.
Fungsi dari @Entity adalah untuk membuat attribute
@Id
@GeneratedValue(generator = "uuid")
@GenericGenerator(name = "uuid", strategy = "uuid2")
private String id;
Setiap table pasti memiliki inputan id sebagai primary key, dan primary key tidak boleh ada yang sama. Untuk menghindari primary key yang sama ada baiknya kita gunakan ,coding yang ada diatas karena fungsi dari codingan diatas adalah untuk menghindari primary key yang sama. Intinya kita tidak perlu menginputkan id, karena id-nya akan terinput sendiri.
Fungsi get dan set adalah menyimpan data dan mengambil data
- Controller
Fungsi dari package controller adalah untuk membuat control dalam tampilan html baik manembah data, menghapus data, pemenggilan data, dan lain – lain.
Dibawah ini adalah controller untuk table siswa :
@Controller
@RequestMapping("/siswa")
public class SiswaHtmlController {
//load model tabel siswa
@Autowired
private SiswaDao pd;
//menampilkan list siswa
@RequestMapping("/tampilan")
public void daftarSiswa(Model m) {
m.addAttribute("daftarSiswa", pd.findAll());
}
//menghapus data siswa
@RequestMapping("/hapus")
public String hapus(@RequestParam("id") String id) {
pd.delete(id);
return "redirect:tampilan";
}
//Tambah Data Siswa
@RequestMapping(value = "/tambah", method = RequestMethod.POST)
public String prosesTambah(@Valid Siswa s, BindingResult errors) {
if (errors.hasErrors()) {
return "/siswa/tambah";
}
pd.save(s);
return "redirect:tampilan";
}
//Tambah Data Siswa
@RequestMapping(value = "/tambah", method = RequestMethod.GET)
public String tampilkanTambah(@RequestParam(value = "id", required = false) String id, Model m) {
//defaultnya isi dengan object baru
m.addAttribute("siswa", new Siswa());
if (id != null && !id.isEmpty()) {
Siswa s = pd.findOne(id);
if (s != null) {
m.addAttribute("siswa", s);
}
}
return "/siswa/tambah";
}
}
- Dao
Data Access Object yang biasanya disebut DAO, merupakan pattern yang biasa digunakan oleh para developer ketika membuat aplikasi berbasis database. DAO biasanya digunakan oleh para developer untuk menerapkan “separation of concern” atau pemisahan kode program berdasarkan fungsinya, dan DAO itu sendiri berfungsi untuk memanipulasi data yang terdapat didalam database.
Siswadao.java
package edilaras.com.Tugas_UTS.dao;
import edilaras.com.Tugas_UTS.entity.Guru;
import org.springframework.data.repository.PagingAndSortingRepository;
/**
*
* @author Aras
*/
public interface GuruDao extends PagingAndSortingRepository<Guru, String>{
}
- Koneksi database
Setelah selesai membuat entity, controller, dan dao. Sekarang kita akan buat koneksi data basenya didalam folder other source. Contohnya dibawah ini :
Untuk membuat tampilannya kita buat file html didalam folder seperti di bawah ini :
Didalam folder saya membuat file tambah.html, dan tampilan,html
templates.siswa
- Tampilan.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Daftar Siswa</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Daftar Siswa</h1>
<a href="#" th:href="@{/siswa/tambah}">Tambah Data Siswa</a>
<table border="1">
<thead>
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr th:each="p : ${daftarSiswa}">
<td th:text="${p.nama}"></td>
<td th:text="${p.jurusan}"></td>
<td>
<a href="edit.html" th:href="@{/siswa/edit(id=${p.id})}">
Edit
</a>
<a href="#" th:href="@{/siswa/hapus(id=${p.id})}">
Hapus
</a> |
</td>
</tr>
</tbody>
</table>
</body>
</html>
- Tambah.html
<!DOCTYPE html>
<html>
<head>
<title>Tambah Daftar Siswa</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Tambah Data Siswa</h1>
<form action="#" th:action="@{/siswa/tambah}" th:object="${siswa}" method="post">
<table border = "1">
<tbody>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="Nama Lengkap" th:field="*{nama}" /></td>
<td th:if="${#fields.hasErrors('nama')}" th:errors="*{nama}">Pesan Error</td>
</tr>
<tr>
<td>Jurusan</td>
<td><input type="text" placeholder="Jurusan Valid" th:field="*{jurusan}" /></td>
<td th:if="${#fields.hasErrors('jurusan')}" th:errors="*{jurusan}">Pesan Error</td>
</tr>
<tr>
<td colspan="3" align="right"><button type="submit">Simpan</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Baiklah tadi saya sudah menjelaskan sinkat cara saya membuat project ini semoga yang saya buat ini bisa bermanfaat buat pembaca.
0 komentar:
Posting Komentar