ASP.NET MVC, Guest Book Application (1)

Setelah agak lama tidak post tulisan baru, akhirnya saya menulis tulisan baru, masih dari dunia pemrograman tapi bukan Java lagi melainkan dotnet, setelah bekerja diperusahaan baru yang menggunakan teknologi Microsoft, saya pun belajar untuk membuat sebuah program menggunakan teknologi Microsoft seperti ASP, C#, ASP.NET MVC, Sharepoint, dan banyak lagi.

Oke, Pada post kali ini kita membuat sebuah aplikasi guest book menggunakan   ASP.NET MVC. Mungkin kalian bertanya kenapa harus ASP.NET MVC, kenapa bukan servlet, kenapa saya ganteng (oke yang ini fitnah), jawabanya simple, karena saya masuk project yang menggunakan ASP.NET MVC, thats it! hehehe

Sebelum tutorial ada baiknya kita mengetahui apa itu ASP.NET MVC agar tidak tersesat ditengah jalan. ASP.NET MVC adalah sebuah web application framework dari Microsoft, pertama kali diluncurkan pada November 2007.  Beberapa keunggulan dari ASP.NET MVC, antara lain :

• Full control over HTML
• Full control over URLs
• Better separation of concern
• Extensibility
• Testability

untuk penjelasanya cari di google aja ya :p .

ASP.NET MVC menggunakan Model-View-Controller pattern, hubungan antara Model-View-Controller bisa dilihat pada gambar dibawah ini 

Komponen-komponen dari MVC antara lain:

• Model : model adalah 'sesuatu' dimana software kita dibangun didalamnya, untuk kasus guest book, model kita bisa merupakan post atau comment.
• View : merupakan representasi virtual dari model, biasanya dibuat dari HTML
• Controller : adalah sebuah mediator, render sebuah view, act pada model, dan menentukan apa yang harus dilakukan.

Selanjutnya kita langsung praktek saja.

Hal yang pertama dilakukan adalah membuat sebuah project baru di visual studio dengan tipe ASP.NET MVC 2 Web Application, jangan lupa untuk memilih .net framework 3.5. Kemudian akan muncul dialog box untuk memilih unit tes projecy, kita pilih yang no, lalu OK.

Setelah membuat project pada solution explorer terdapat beberapa folder yang merupakan folder-folder yang digunakan diseluruh aplikasi ASP.NET MVC. Folder-folder yang ada antara lain :

 - Content : folder untuk menyimpan file seperti CSS dan image.

 - Controllers : folder untuk menyimpan kelas Controller

 - Models : folder untuk menyimpan kelas model

 - Scripts : folder untuk menyimpan file-file Javascript

 - Views : folder untuk menyimpan view (aspx files)

Setelah itu kita jalankan saja dengan menekan F5 kalau ingin sekalian debug atau ctrl+F5 kalau hanya ingin menjalankan saja. maka akan terlihat tampilan default dari aplikasi seperti di bawah ini.

selanjutnya untuk membuat aplikasi guest book kita buka sebuah controller baru, sebenarnya kita bisa saja menambahkan action untuk menampilkan guest book dari home controller, tapi alangkah lebih baik apabila kita membuat controller baru untuk aplikasi guest book.  pada solution explorer kita pilih folder controller, kita klik kanan -> Add ->Controller.

kemudian akan muncul kotak dialog seperti ini

                                         

beri nama GuesbookController.

Maka akan muncul class GuestBookController seperti gambar di atas. Untuk setiap kelas controller harus mempunyai nama yang diakhiri Controller seperti GuestbookController, inherit dari System.Web.Mvc.Controller (atau mengimplementasikan IController), mempunyai public method yang return ActionResult (yang disebut action).

Setelah membuat controller kita buat view untuk action Indek dari Guestbook. kita tinggal block/klik return statement dari ActionResult Index, klik kanan dan pilih AddView

maka akan muncul dialog box seperti ini 

disini kita pilih select master page agar tampilan UI bisa menyertakan tampilan master page. kemudian kita pilih Add. dan kemudian kita isikan kode agar seperti ini.

Bagi yang asing dengan kode seperti <%= Html.Label("Name" %)> , kode ini merupakan kode HTML helper, HTML helper merupakan class khusus yang terdapat pada ASP.NET MVC yang berfungsi untuk rendering HTML control di dalam sebuah view.

Setelah selesai kita build, kita run lagi, jangan lupa tambahkan /GuestBook pada url agar langsung mengakses halaman yang telah kita buat

nah, berhasil kan, selanjutnya bagaimana agar kita bisa menampilkan data hasil inputan. pada index kita telah  menambahkan action Guestbook/Sign pada form, action inilah yang akan kita tambahkan pada Guestbook Controller. 

di dalam kode kita menggunakan ViewData, ini merupakan sebuah dictionary object (dimana kita bisa memasukan objek ke dalam sebuah struktur data yang mempunyai reference dengan sebuah key, kalau di Java disebut dengan hash map). Di dalam action ini kita me-return sebuah specific view dengan nama ThankYou, dimana view ini belum kita buat. Sama seperti membuat view di Index, kita membuat view ThankYou. setelah membuat view tersebut kita buat agar seperti ini. 

Setelah selesai kita Build lagi dan kemudian kita jalankan lagi GuestBooknya, kita coba isi masing-masing text box.

 lalu kita sign,  dan hasilnya akan seperti ini.

Untuk sekarang cukup seperti ini, nanti akan saya lanjutkan lagi, terima kasih, sampai jumpa lagi

Sumber : ASP.NET MVC In action