Pada tutorial sebelumnya kita sudah mencoba membuat sebuah formulir dengan beberapa inputan menggunakan ASP.NET MVC 5. Pada tutorial ASP.NET MVC 5 - [Part 05] Membuat Formulir kita sudah belajar bagaimana menangi request HTTP Post dan HTTP Get.
Dapat kita simpulkan bahwa HTTP Get adalah request yang meminta data, sedangkan HTTP Post adalah request yang digunakan untuk mengirim data. Sehingga pada saat kita membuat aplikasi web dengan ASP.NET MVC 5 dan mendesain action-action pada controller kita sudah tahu kapan kita akan menggunakan HTTP Get dan kapan kita menggunakan HTTP Post.
Pada tutorial ASP.NET MVC 5 kali ini kita akan mencoba membuat satu sirkulasi data yang utuh, mulai dari menampilkan data dengan collection atau list di ASP.NET MVC5, menginput data di ASP.NET MVC5, dan mengubah di ASP.NET MVC 5 data tanpa menggunakan database. Jika kita sudah memahi kosep sirkulasi data pada ASP.NET MVC 5, maka untuk penyimpanan data dengan menggunakan database di ASP.NET MVC 5 nanti akan sangatlah mudah.
Sebelum kita memulai tutorial ini, pastikan anda sudah mencoba dan mempraktekan dengan benar tutorial-tutorial sebelumnya dengan benar, sehingga kita akan dengan mudah untuk mengimplementasikan tutorial pada bagian ini.
1. ASP.NET MVC 5 - [Part 04] Membuat Model untuk menghasilkan model Profile.
dan View Detail.
2. ASP.NET MVC 5 - [Part 05] Membuat Formulir untuk menghasilkan Action AddProfile di ProfileController.
dan view AddProfile.
Jika kedua tutorial diatas sudah kita coba maka kita dapat memulai tutorial ASP.NET MVC 5 Membuat Collection. Adapun bagaimana cara menampilkan data dengan collection di ASP.NET MVC 5 adalah sebagai berikut.
1. Membuat variable static List Profile.
ASP.NET MVC 5 menggunakan teknologi .Net Framework sehingga library-library yang ada di .Net Framework dapat kita gunakan di ASP.NET MVC 5. Salah satu .Net Framework adalah library List. Kita tambahkan variable ListProfile pada ProfileController. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
2. Menggunakan ListProfile kedalam action Index.
Setelah kita membuat variable ListProfile dengan tipe List dari model class Profile, maka kita gunakan variable ListProfile kedalam Action Index dan data dari variable ListProfile kita tampilkan ke dalam view Index. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
3. Membuat View Index.
Mari kita buat view Index dengan Template List, dan Model class Profile. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
klik tombol Add untuk menambahkan View Index. Jika muncul dialog untuk konfirmasi untuk me-replace view Index, klik tombol Yes. Ini terjadi karena kita di view Index sudah buat atau sudah pada pada folder Views/Profile, jika view Index tidak ada di folder Views/Profile maka dialog konfirmasi tersebut tidak akan muncul.
Berikut hasil dari view Index.cshtml di folder Views/Profile.
Kita modifikasi link Create agar terhubung action AddProfile.
4. Memodifikasi Action AddProfile
Setelah berhasil menambahkan view Index.cshtml mari kita modifikasi action AddProfile yang menerima HTTP Post. Parameter model yang merupakan object dari class Models.Profile kita tambahkan kedalam ListProfile. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
pada gambar diatas kita menambahkan variable ListProfile dengan object model. ListProfile adalah List dari class Models.Profile dan objek model adalah objek dari class Models.Profile maka ini sudah sesuai sehingga object model dapat ditambahkan kedalam objek ListProfile.
5. Running Aplikasi.
Klik tombol Run untuk menjalankan aplikasi kedalam web browser. Kemudian kita langsung akses halaman AddProfile.
Kita isi datanya, dan klik tombol Create maka akan langsung menampilkan datanya dalam bentuk detail.
Klik link Back to List untuk masuk ke halaman Index.
Klik Link Create New untuk masuk ke halaman AddProfile.
Nah sekarang kita sudah mempunyai aplikasi dengan sirkulasi yang utuh, mulai dari menampilkan data dengan collection, menambahkan data, menampilkan detail data. Semoga pada tutotial ini dapat memperdalam pengertian kita tentang ASP.NET MVC 5, tentang Model, View, dan Controller.
Terimakasih telah bersedia membaca tutorial ini, silahkan beri pendapat anda tentang tutorial ini dengan menulis komentar dibawah ini. ^_^
Tidak ada komentar:
Posting Komentar