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

16. Tampilan form data cabang

16. Tampilan halaman detail

17. Script lengkap untuk controller Cabang.java adalah sebagai berikut

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.

C. Penjelasan

View Iterasi (Grovy Template)

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

form update

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

3. Halaman list yang sudah terisi