ch7 10 bind
TRANSCRIPT
VII
CRUD Application : Model
Model
Seperti telah dijelaskan sebelumnya dalam MVC, model menggambarkan informasi atau data beserta
aturan bisnisnya seperti validasi, relasi, tipe data, dan lain-lain. Ada dua jenis model, yaitu
1. Suatu model yang disimpan dan dikumpulkan ke dalam database
2. Suatu model yang setelah dipakai tidak disimpan ke dalam database.
Jika kita menggunakan model yang setelah dipakai tidak disimpan ke dalam database, maka kita dapat
menggunkan Form Model untuk mendefinisikannya. Sedangkan untuk model yang disimpan dan
dikumpulkan ke dalam database, kita dapat menggunakan Active Record
.
A. Analisa Kasus
B. Membuat Model Data Master
1. Membuat project baru dengan nama project myapp seperti langkah dalam gambar berikut.
2. Integrasi dengan IDE Netbeans, lakukan perintah perikut pada command prompt
play netbeansify myapp 3. Lakukanlah testing dengan menjalan aplikasi dengan reintah run.
4.Jika tidak ada masalah dengan framework maka tampilan yang akan muncul adalah seperti dibawah ini:
5. Pengkodean dengan IDE Netbeans dilakukan dengan cara sebagai berikut
6. Pertama bukalah project dengan menu File-> Open Project. Bukalah project myapp seperti pada gambar berikut.
Membuat Model oCabang
Model oCabang adalah merupakan menggambarkan informasi atau data tentang Cabang. Model Cabang seperti halnya controller merupakan sebuah java class juga. Untuk membuat lakukan lakukan langkah berikut. 1.Pada package models lakukan click kanan kemudian membuat class baru seperti pada gambar berikut.
2. Lakukan pemberian nama class baru dengan nama oCabang seperti gambar berikut.
3. Ketikan script kode berikut untuk menyusun struktur data cabang:
4. Isi dari class oCabang.class adalah seperti berikut.
5. Simpanlah kode script diatas
C. Test Model
Membuat Customize Controller
1. Buatlah class baru pada package contoller dengan melakukan click kanan submenu New=>Java
Class.
2. Berilah nama controller class tersebut dengan nama Cabang.
Membuat Halaman Index
3. Membuat folder Cabang pada folder /app/view/
4. Pada controller Cabang.java tambahkan method index() sebagai berikut.
5. Buatlah sebuah template view dengan nama index untuk halaman index
6. Lakukan setting configurasi routing untuk halaman index sebagai berikut.
7. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
Membuat Halaman Form Cabang
8. Pada controller Cabang.java tambahkan method getForm() sebagai berikut.
9. Buatlah sebuah template view dengan nama formNew.html untuk halaman form
10. Lakukan setting configurasi routing untuk halaman form sebagai berikut.
11. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
Membuat Halaman Detail Data Cabang
Halaman detail cabang sebagai test parameter untuk data yang masuk melalui form.
11. Tambah method sebagai dengan script berikut pada class Controller.java.
12. Buatlah sebuah template view dengan nama Detail.html sebagai berikut
Membuat Method Posting Form Cabang
13. Pada controller Cabang.java tambahkan method setAdd() sebagai berikut.
Method ini berfungsi sebagai penerima data dari form Cabang untuk kemudian di sampakian ke model
oCabang untuk disimpan dengan perintah data.save(). Argument selanjutnya adalah melakukan redirect
ke halaman detail dengan memanggil method getDetail(Long id)
14. Lakukan setting configurasi routing untuk halaman post form sebagai berikut.
15. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
D. Maping Aplikasi
E. Tugas V
1. Rancanglah ER Diagram kasus anda 2. Rancanglah Model Untuk sebuah Data Master anda (Ciri data master adalah jika entitas tersebut akan menjadi acuan dari entitas lainya dan entitas tersebut tidak terdapat field kunci tamu/ foreign key)
VIII
CRUD Application : Iterasi
A. Membuat View List Data
1. Bukalah kembali project myapp dengan IDE Netbeans
Menambah Kompunen Model
2. Lakukan update pada model Cabang dengan membuka file /app/model/oCabang.java
3. Tambahkan sebuah method getAll() dengan statement sebagai berikut.
JPA ORM melakukan pembungkusan dengan library yang dimiliki. Statement tersebut indentik dengan.
Sehingga susunan Model class oCabang menjadi sebagai berikut.
Menambah Kompunen Controler
4. Lakukan update pada controller Cabang dengan membuka file /app/controller/Cabang.java
5. Lakukan penambahan methode getList(), method ini berfungsi menampilakan halaman daftar
Cabang yang sudah di masukan, dengan ini method adalah sebagai berikut.
6. Tambahkan statment berikut pada method index().
Susunan lengkap method menjadi sebagai berikut.
Menambah Template View
6. Buatlah sebuah template view dengan nama list.html untuk pada folder /app/views/Cabang. Dengan script sebagai berikut.
7. Hasil lengkap dari script diatas adalah sebagai berikut.
Setting Konfigurasi Routes
8. Lakukan setting configurasi routing untuk halaman list sebagai berikut.
9. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
Hasil Keluaran
10. Bukalah kembali file /app/view/main.html tambahkan statement link page sebagai penghubung ke
halaman daftar cabang. Simpan update script html.
11. Tampilan awal
12. Tampilan daftar cabang masih kosong
13. Tampilan ketika tambah data cabang di klik akan menuju ke form isian data cabang.
14. Tampilan jika pengisian form sudah selesai dan akan menuju ke halaman daftar cabang.
15. Tampilan ketika link detail salah satu baris table data di klik maka akan menuju halaman detail.
IX
Play CRUD Application : Update Data
A. Fitur Update
Pada modul sebelumnya kita sudah membuat fitur untuk pegisian data. Maka pada modul berikut ini
kita akan tambahkan fasilitas untuk update dan penghapusan data yang sudah masuk.
1. Bukalah kembali project myapp dengan IDE Netbeans
Fitur Update Data
1. kemudian buka Controller Cabang di /app/controller/Cabang.java.
2. Ubahlah method getForm() dari yang sebelumnya hanya mengarahkan ke satu template.
Sehingga memiliki kemampuan seleksi berdasarkan parameter id
Jika parameter tersebut bernilai 0 atau null maka akan diarah ke template pengisian data baru yaitu di
formNew.html. Sebaliknya jika parameter id bernilai diatas 1 maka hal tersebut menandakan update
data. Aksi akan dilakukan ke template formUpd.html. Berikut ini adalah maping untuk halaman form
3. Hasil lengkap script Cabang.java
4. Karena template pengisian data baru yang terdapat di newForm sudah ada maka langkah berikutnya
adalah membuat form update FormUpd.html. Dengan menggunakan menu new=> other => html
file
5. Berilah nama file html tersebut dengan nama formUpd
6. Lengkapilah script berikut pada file /app/view/Cabang/formUp.html
7. Script lengkap dari file /app/view/Cabang/formUpd.html adalah sebagai berikut
8. Bukalah kembali script /app/view/Cabang/list.html. Lengkapilah menjadi sebagi berikut.
9. Simpanlah semua script yang sudah ter-update. Jalankan browser arahkan url ke
http://localhost:9000/cabang/list. JIka link update dieksekusi maka anda akan diarahkan ke halaman
X
Play CRUD Application : Hapus Data
A. Fitur Update dan Hapus Data
1. Bukalah kembali Controller Cabang di /app/controller/Cabang.java. tambahkan method
setHapus() sebagai berikut.
2. Isi lengkap dari script Cabang.java adalah sebagai berikut.
3. Jangan lupa melakukan update pada file list.html pada folder berikut:
4 Tambahkan link penghapusan data sebagai berikut.
5. Script lengkap list.html adala sebagai berkut.
6. Update file route jika perlu.
7. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
B. Hasil Keluaran
1. List ketika data kosong
2. Jika link tambah data di pilih makan akan dibawa ke form isi data baru