Ch7 10 bind
0 likes285 views
Dokumen ini menjelaskan tentang pengembangan aplikasi CRUD menggunakan model MVC, termasuk cara membuat model, controller, dan view serta pengujian aplikasi. Ada penjabaran rinci tentang pembuatan, pembaruan, dan penghapusan data, serta pengaturan konfigurasi routing. Selain itu, terdapat instruksi untuk membuat halaman detail dan formulir data cabang.
Ch7 10 bind
- 1. 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. 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
- 3. 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.
- 4. 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. 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.
- 6. 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
- 7. 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
- 8. 10. Lakukan setting configurasi routing untuk halaman form sebagai berikut. 11. Simpan semua script dan konfigurasi anda lakukan testing dengan web browser
- 9. 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
- 10. 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
- 11. 16. Tampilan form data cabang 16. Tampilan halaman detail
- 12. 17. Script lengkap untuk controller Cabang.java adalah sebagai berikut
- 14. 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)
- 15. 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
- 16. 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.
- 17. 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.
- 18. 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.
- 19. 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.
- 20. 11. Tampilan awal 12. Tampilan daftar cabang masih kosong 13. Tampilan ketika tambah data cabang di klik akan menuju ke form isian data cabang.
- 21. 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.
- 22. C. Penjelasan View Iterasi (Grovy Template)
- 23. 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
- 24. 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.
- 25. 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
- 26. 5. Berilah nama file html tersebut dengan nama formUpd 6. Lengkapilah script berikut pada file /app/view/Cabang/formUp.html
- 27. 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
- 28. form update
- 30. 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:
- 31. 4 Tambahkan link penghapusan data sebagai berikut. 5. Script lengkap list.html adala sebagai berkut. 6. Update file route jika perlu.
- 32. 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
- 33. 3. Halaman list yang sudah terisi