ASP.NET MVC, Guest Book Application (4) (Simple CRUD)

Setelah kurang lebih 1 bulan lamanya post terakhir http://www.ridwanfansuri.com/2012/06/aspnet-mvc-guest-book-application-3.html keluar. Kali ini saya akan melanjutkan lagi aplikasi Guest Book yang kemarin telah kita kerjakan tepat pada hari pertama bulan ramadhan ini (ga ada hubunganya sih). 

Kali ini kita akan membuat  Update, dan Delete method pada aplikasi, kemarin kita sudah membuat aplikasi yang bisa menyimpan data dari buku tamu, sekarang akan kita tambahkan method untuk update data dan menghapus. Setelah kita buka project yang kemarin yang pertama kita lakukan adalah membuat sebuah halaman yang menampilan semua data buku tamu yang telah dimasukan. Pertama-tama kita buat sebuah method pada GuestBookReporsitory.cs yang mendapatkan semua data dari database. kita tulis seperti gambar dibawah ini.

Lalu kita tambahakan sebuah action didalam GuestBookController

Kemudian kita buat view untuk menampilkanya. kita beri nama GuestBookList, strongly-typed, dan data classnya kita tambahkan IEnumerable karena data yang yang akan kita tampikan berupa list jadi modelnya harus bertipe IEnumerable.

Kemudian kita buat seperti ini.

Coba jalankan dengan menambahkan GuestBookList pada url (ex: http://localhost:2443/GuestBook/GuestBookList)

Kemudian kita tambahkan beberapa action seperti edit, details, dan delete pada halaman ini. kita tambahkan kolom action pada table header dan link action pada kolom bodinya.

table header

link actionya

Selanjutnya kita akan membuat implementasi untuk masing-masing action tersebut. Kita mulai dari yang paling mudah yaitu action details. action details ini menampilkan data berdasarkan id dari data tersebut, jadi kita akan membuat sebuah method yang mengambil data dari database berdasarkan id. Karena kita sudah mempunyai method GetData pada kelas reporsitory kita gunakan itu saja. kita hanya perlu membuat sebuah action result pada Controller.

Action in sama dengan action ThankYou yang telah kita buat, tetapi kita akan membuat sebuah view baru jadi kita harus membuat sebuah action baru. kemudian kita buat View. kita buat strongly-typed dan view content Details.

Setelah jadi kita hilangkan field Id pada view,dan kita ubah action-link pada Back to list dari Indek menjadi GuestBookList. buat seperti ini

Kemudian kita build dan coba jalankan lagi halaman GuestBookList.

halaman yang telah ditambahkan link action

Kita klik link details pada salah satu baris, maka akan masuk kehalaman details seperti dibawah ini, apabila kita klik pada back to list maka akan kembali kehalaman GuestBookList.

Action selanjutnya adalah action edit, action ini mengambil data berdasarkan id, kemudian ditampilkan untuk diedit lalu di save. Kita tambahkan action result pada controller untuk edit entry.

Kemudian kita buat View untuk edit. View Content nya pilih yang edit ya.

Kita edit view ini, kita hilangkan field id, karena tidak perlu edit Id, kemudian kita build dan jalankan lagi. Hasilnya akan seperti dibawah ini.

Namun apabila kita save, kita belum bisa menyimpan hasil perubahan data karena action kita hanya action GET saja, jadi hanya mengambil data, sedangkan untuk menyimpan kita memerlukan action POST. Jadi kita buat sebuah overload method edit pada controller dengaj jenis method POST.

Pada bagian akhir action kita tambahkan method RedirectToAction, jadi ketika action tersebut selesai maka kita akan menjalankan method details dengan inputan Id dari data yang kita edit tersebut. Hasilnya setelah kita save adalah seperti dibawah ini, kita langsung di-direct ke halaman details dari data yang telah kita edit.

Pada action result Edit, kita meng-assign nilai dari tiap-tiap field, hal ini tentu akan sangat merepotkan apabila fieldnya berjumlah banyak. Untungnya asp mvc mempunyai sebuah helper method yang bernama UpdateModel() pada cotroller base class. helper ini men-support updating properti-properti dari sebuah object yang kita pass. method edit kita akan seperti ini.

Action yang terakhir adalah action delete, action ini mengambil data berdasarkan id untuk kemudian dihapus. karena belum mepunyai method delete kita tambahkan dulu kedalam kelas reporsitory method delete.

Kemudian kita tambahkan action delete kedalam kelas controller. Action ini mengambil data berdasarkan id untuk kemudian ditampilkan kedalam view delete.

Kemudian kita tambahkan view untuk delete. Pilih strongly-typed ke GuestBookEntry dan view content delete.

Setelah selesai, hapus field untuk Id dan ubah action back to list dari Index menjadi GuestBookList. Kemudian kita coba build dan jalankan lagi. ketika kita klik link delete maka akan masuk kehalaman seperti ini

Tetapi kita masih belum bisa menghapus record tersebut dikarenkan action kita pada controller hanya berpua action get, jadi kita perlu membuat sebuah action tambahan yang bertipe POST, kita buat lagi action delete bertipe post.

Disini kita akan mereturn action kepada sebuah view (deleted) yang belum kita buat, yang akan berisi halaman konfirmasi bahwa record tersebut sudah terhapus. Kita buat view deleted. View ini tidak kita jadikan strongly-typed karena kita tidak membutuhkan model apapun untuk ditampilkan.

Kita buat seperti dibawah ini.

Setelah kita jalankan dan kita coba hapus sebuah record, maka hasilnya akan seperti ini.

Apabila kita kembali kehalaman list, maka record tersebut sudah terhapus.

Mungkin cukup sekian post kali ini. Semoga bermanfaat, selamat puasa dan sampai jumpa

kalau mau download sourcenya bisa disini http://code.google.com/p/guestbookpart4/source/browse/Blog.GuestBook.zip