ASP.NET MVC 5: Hello World | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

ASP.NET MVC 5: Hello World

Feb 15, 2016 by     No Comments    Posted under: I am Software Developer

Pattern MVC (Model-View-Controller) adalah termasuk sebagai Architectural Pattern. Sedangkan software design pattern yang digunakan pada ASP.NET MVC adalah Front Controller, artinya kontrol akan bersifat terpusat (center controller) pada sebuah class saja. Berbeda dengan ASP.NET Web Forms yang memiliki controller pada setiap halamannya.

Cara kerja MVC dapat dilihat pada gambar berikut ini.

image

Berikut ini akan dicontohnya membuat halaman ASP.NET MVC, dengan contoh tersebut akan dapat dilihat bagaimana cara kerja pattern ini pada framework ASP.NET MVC. Contoh akan diberikan dalam bentuk langkah-langkah pembuatan halaman ASP.NET MVC sampai bisa ditampilkan pada web browser. Akan dipaparkan beberapa hal tentang dasar-dasar ASP.NET MVC yang bermanfaat untuk diketahui di awal perkenalan dengan framework ini.

{Konfigurasi}

Pada ASP.NET MVC, alamat yang ditulis pada address bar web browser tidak menunjukkan sebagai file fisik yang benar ada, tetapi karena konfigurasi dan proses routing yang dapat dilihat pada file Global.asax.cs dan RouteConfig.cs (pada folder App_Start).

image

File Global.asax (Global.asax.cs) juga sering ditemui pada project ASP.NET Web Forms, file ini berfungsi sebagai file application yang bertanggung jawab pada event-event di level application yang dibangkitkan oleh ASP.NET atau HttpModules. Pada file ini dapat dilihat terdapat penanganan event saat aplikasi dijalankan yaitu pada method Appliation_Start. Pada method tersebut dapat dilihat pemanggilan method milik class RouteConfig. Berikut ini adalah isi dari class RouteConfig yang berada pada file RouteConfig.cs pada folder App_Start.

image

 

{Controller}

Dari kode di atas dapat dilihat bahwa nama controller default yang digunakan pada aplikasi ini adalah Home, artinya jika mengikuti kode tersebut perlu dibuat class controller dengan nama Home. Sesuai dengan aturan framework, class ini disimpan pada folder Controllers. Untuk menambahkan class ini klik kanan pada folder Controller kemudian pilih Add > Controller, maka akan ditampilkan window seperti berikut ini.

image

Pilih MVC 5 Controller – Empty kemudian klik tombol Add, maka akan ditampilkan window Add Controller yang berfungsi untuk memberi nama class controller yang akan dibuat. Berikan nilai HomeController pada kolom isian Controller name, kemudian klik tombol Add. Harus diperhatikan dalam pemberian nama class yang harus mengikuti aturan yang telah ditetapkan oleh framework ini.

image

Dan berikut ini adalah isi dari class controller HomeController yang telah dibuat tersebut. Pada class controller ini telah dibuatkan action Index yang berisi perintah untuk menambilkan View.

image

Jika pada framework ASP.NET Web Forms, cukup membuat sebuah halaman web saja kemudian sudah dapat dieksekusi dan dilihat pada web browser, maka pada framework ASP.NET MVC hal itu belum bisa dilakukan. Sebagai bukti jika jika project ini dieksekusi maka akan dilihat tampilan pada web browser seperti berikut ini.

image

 

{View}

Dari output diatas dapat dilihat jika controller yang dibuat telah dikenali dan telah menjalankan fungsinya yaitu memanggil method Index seperti yang terlihat dari pesan error di atas. Jika dilihat isi dari method Index pada class HomeController, dapat diketahui fungsi dari method ini adalah mengembalikan output dari method View yang berfungsi untuk menampilkan konten dari file yang berfungsi sebagai view.

Pesan kesalahan di atas memberikan informasi bahwa tidak ditemukan file yang view yang dimaksud. File view yang dimasud adalah salah satu dari file berikut ini :

  • ~/Views/Home/Index.aspx.
  • ~/Views/Home/Index.ascx.
  • ~/Views/Shared/Index.aspx.
  • ~/Views/Shared/Index.ascx.
  • ~/Views/Home/Index.cshtml.
  • ~/Views/Home/Index.vbhtml.
  • ~/Views/Shared/Index.cshtml.
  • ~/Views/Shared/Index.vbhtml

Pada contoh ini, akan dibuat view khusus untuk class HomeController pada folder Home dengan nama file Index.cshtml. File *.cshtml adalah file yang ditulis gabungan antara kode HTML dan sintaks Razor yang akan dibahas lebih lanjut pada bab selanjutnya. Untuk menambakan file view ini, klik kanan pada folder Home yang telah dibuatkan secara otomatis kemudian pilih Add > New item. Maka akan ditampilkan window seperti berikut ini, pilih MVC 5 View Page (Razor) dan berikan nama file yang diinginkan pada kolom input Name, kemudian klik tombol Add.

image

Kemudian modifikasi file Index.cshtml sehingga berisi baris kode seperti berikut ini.

image

Selanjutnya kembali dilakukan eksekusi project seperti yang dilakukan di atas maka akan dapat dilihat tampilan pada web browser seperti berikut ini.

image

Dari contoh ini maka class controller telah berfungsi sempurna dengan memanggil method Index yang memanggil dan menampilkan halaman Index.cshtml.

 

{Model}

Pada bagian ini akan diperkenalkan tentang model. Untuk itu akan diberikan contoh dengan membuat halaman aplikasi web sederhana yang mempunyai fungsi seperti halaman aplikasi web yang telah dibuat dengan framework ASP.NET Web Forms di atas. Akan dibuat halaman seperti pada gambar di bawah ini dengan ASP.NET MVC.

image

Untuk membuat halaman seperti gambar di atas dengan ASP.NET MVC, maka terlebih dahulu dibuat class model pendukung untuk membuat halaman seperti tersebut. Salah satu fungsi model pada framework ini adalah sebagai sarana untuk pertukaran informasi pada aplikasi.

Class model yang akan disimpan pada folder Models. Caranya adalah klik kanan pada folder Models kemudian Add > Class.

image

Pada window Add New Item berikan nama class model pada kolom Name kemudian klik tombol Add.

image

Selanjutnya perlu dilakukan modifikasi pada bagian view dan controller. Pada bagian view dilakukan modifikasi pada file Index.cshtml menjadi seperti berikut ini.

image

Hasil dari modifikasi kode di atas membuat tampilan halaman web seperti berikut ini.

image

Untuk membuat form seperti yang terlihat pada gambar digunakan sintaks Razor yang dapat dilihat pada kode di atas. Penjelasan lebih lanjut tentang Razor akan dijelaskan pada bagian selanjutnya.

Setelah langkah di atas perlu dilakuan modifikasi pada class controller untuk menangani aksi ketika tombol Kirim ditekan. Berikut ini adalah hasil modifikasi pada class controller HomeController.cs.

image

Pada kode di atas ditambahkan method baru untuk menangani aksi post ketika tombol Kirim diklik. Pada method ini terdapat perintah untuk menampung pesan pada ViewBag.Pesan yang nanti akan ditampilkan pada bagian View. Pada bagian selanjutnya akan dilakukan pembahasan lebih dalam tentang controller.

Selanjutnya adalah mencoba menjalankan halaman yang telah dibuat.

image

Setelah tombol Kirim diklik maka akan dieksekusi method Index yang baru ditambahkan. Pada percobaan ini dapat dilihat model yang dibuat memang dapat digunakan sebagai sarana pengiriman informasi. Dapat dilihat pada baris kode di bawah ini, objek data yang bertipe dari class model Visitor dikirimkan saat tombol Kirim diklik. Kemudian dilakukan pengambilan informasi yang diperlukan dari objek tersebut untuk mengisi nilai pada ViewBag.Pesan yang kemudian akan ditampilkan kembali pada halaman view.

image

Selamat mencoba :)

 

Untuk pembahasan tentang ASP.NET MVC lebih lengkap dapat mengunduh ebooknya di sini: http://www.rezafaisal.net/?p=2194

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: