1 2 Pengantar Puji syukur alhamdulillah penulis ucapkan kepala Allah SWT Tuhan Yang Maha Esa atas selesainya e-book Mengenal ASP.NET MVC Edisi Beta in...
Pengantar Puji syukur alhamdulillah penulis ucapkan kepala Allah SWT Tuhan Yang Maha Esa atas selesainya e-book “Mengenal ASP.NET MVC – Edisi Beta” ini. Sesuai dengan versi framework ASP.NET MVC yang dipakai dalam penjelasan dan demo edisi ini yaitu versi Beta, maka edisi ini bernama Edisi Beta. e-Book ini penulis tujukan bagi para developer ASP.NET classic yang hendak mengenal ASP.NET MVC, maupun bagi para developer baru yang hendak belajar ASP.NET MVC. Developer dari dunia pemrograman lain terutama Ruby on Rails, Django, PHP, dan yang menyukai client-side scripting juga dipersilakan untuk membaca e-book ini untuk dijadikan perbandingan maupun awal untuk belajar. Walaupun sudah berusaha sebaik mungkin penulis yakin bahwa pepatah “Tak ada gading yang tak retak” berlaku juga untuk penulisan e-book ini. Atas kekurangan-kekurangan tersebut penulis mengharapkan komentar dan feedback dari para pembaca sekalian untuk perbaikan e-book ini pada edisi berikutnya. Penulis tidak lupa mengucapkan terimakasih kepada istri tercinta Ike Sri Kartika Chandra, dan dua buah hati tersayang Muhammad Bima Dirgantara, dan Yaqub Hangga Wirayudha yang selalu memberikan dukungan dan menjadi cahaya semangat penulis dalam menyelesaikan ebook ini. Juga kepada Wely W dan Naren W dari Microsoft yang memberikan kesempatan kepada penulis untuk mengkontribusikan ebook ini ke dalam website geeks.netindonesia.net. Terimakasih juga untuk Umi Fadilah yang telah mendesain cover e-book ini dengan sangat menarik. Akhir kata, semoga e-book ini bisa memberikan manfaat sebesarbesarnya bagi kita semua.
Jakarta, 11 Desember 2008 Agus Suhanto, penulis
D AFTAR I SI Arsitektur MVC ...................................................................................................................... 1 Memahami ASP.NET MVC....................................................................................................... 4 ASP.NET MVC vs Web Form .................................................................................................... 6 Hello World ........................................................................................................................... 9 Routing ............................................................................................................................... 14 ASP.NET MVC Controller ...................................................................................................... 18 ASP.NET MVC View .............................................................................................................. 22 ASP.NET MVC Model ............................................................................................................ 26 Control / Component .......................................................................................................... 30 ASP.NET MVC dan AJAX ....................................................................................................... 35 ASP.NET MVC dan jQuery .................................................................................................... 42 ASP.NET MVC dan TDD ........................................................................................................ 48 MVCContrib ........................................................................................................................ 55 Grid ................................................................................................................................. 55 SparkViewEngine .............................................................................................................. 58 Deployment ........................................................................................................................ 62 Deployment ke IIS 6 ......................................................................................................... 63 Deployment ke IIS 7 Integrated Mode ............................................................................... 67 Konfigurasi IIS 6 untuk Request-Path Tanpa Ekstensi ....................................................... 68 Penutup .............................................................................................................................. 71 Tentang Pengarang ............................................................................................................. 72
A RSITEKTUR MVC MVC adalah singkatan dari Model, View, Controller, yang merupakan sebuah arsitektur untuk membuat sebuah program. Arsitektur ini menekankan kepada pembagian dari komponen-komponen program menjadi tiga bagian utama yaitu Model, View, dan Controller. Diagram dalam Gambar 1 memberikan gambaran konseptual tentang arsitektur MVC.
G AMBAR 1 – D IAGRAM A RSITEKTUR MVC
Interaksi user dengan program digambarkan dengan arah panah besar yang menuju View. Kemudian View memanggil Controller. Selanjutnya Controller akan membuat atau memanipulasi Model. Model ini akan diberikan kepada View untuk ditampilkan kepada user. Dengan demikian tugas View adalah menangani tampilan program dan interaksi antara user dengan program. Controller melakukan koordinasi antara View dan Model. Sedangkan Model adalah bagian yang bekerja di belakang layar untuk memenuhi permintaan user dalam sebuah interaksi. Tujuan dari pembagian program ke dalam tiga bagian besar ini adalah untuk memisahkan fokus perhatian, tanggung jawab, dan logic ke dalam bagian masing-masing. View hanya fokus kepada tampilan dan menangani interaksi dengan user. Model hanya fokus kepada manipulasi objek-objek non-visual dan logic di dalamnya untuk memenuhi skenario 1
sebuah proses bisnis. Sedangkan Controller menerima input dari View, membuat dan memanipulasi Model, lalu memberikan Model kepada View untuk ditampilkan ke user. Cara mudah untuk memahami arsitektur MVC ini adalah dengan menggunakan analogi organisasi bisnis dan peran yang terdapat di dalamnya. Sebuah organisasi bisnis biasanya memiliki staf marketing, mandor, dan staf operasional. Staf marketing melakukan segala upaya untuk memikat calon pelanggan. Tugasnya adalah ‘menjual’ produk kepada calon pelanggan. View dalam MVC ibarat staf marketing ini. Tugasnya adalah ‘menjual’ dengan memberikan presentasi yang menarik kepada user. Peran lain yang terdapat dalam sebuah organisasi bisnis adalah staf produksi yang bekerja di belakang layar memenuhi target yang telah ditetapkan untuk bisa memenuhi permintaan pelanggan. Pekerjaan staf produksi tidak tampak oleh pelanggan itu sendiri. Staf produksi juga tidak bertanggung jawab untuk langsung bertemu dengan pelanggan. Model dalam MVC ibarat staf produksi ini. Tugasnya adalah ‘bekerja’ dengan memberikan segala daya dan upayanya untuk memberikan hasil. Peran terakhir dalam sebuah organisasi bisnis adalah supervisor yang mengurusi manajemen antara staf marketing dan staf produksi. Berdasarkan masukan dari staf marketing, supervisor menetapkan target produksi yang kemudian akan dikerjakan oleh staf operasi. Supervisor kemudian mempertemukan antara staf produksi dan staf marketing untuk melakukan koordinasi sebelum produk-nya dipresentasikan kepada pelanggan. Setelah oke, supervisor kemudian memerintahkan staf marketing untuk melakukan presentasi produk kepada calon pelanggan. Controller dalam MVC ibarat supervisor. Tugasnya adalah melakukan manajemen dan koordinasi kerja antara View dan Model. Hubungan ketiga komponen Model, View, dan Controller menciptakan dependensi antar komponen. View bergantung kepada Model, tetapi Model tidak bergantung kepada View. Designer View perlu mengetahui bagaimana struktur data dari Model untuk bisa menampilkan Model tersebut dengan benar dalam View, sebaliknya developer yang 2
mengembangkan Model tidak perlu tahu sama sekali bagaimana bentuk tampilan dari Model tersebut. Controller dan View saling bergantung satu sama lain. View memerlukan Controller untuk ‘meneruskan’ input dari user ke Model, sedangkan Controller memerlukan View untuk meng-update tampilan setelah Model selesai dengan tugasnya. Controller bergantung kepada Model karena perlu memanggil Model dan memberikannya kepada View. Sebaliknya Model tidak bergantung kepada Controller. Dengan demikian, arsitektur MVC memberikan pemisahan tugas dan tanggung jawab yang jelas antara Model, View, dan Controller. Sehingga developer sesuai dengan keahliannya bisa memusatkan perhatian kepada
logic proses bisnis di dalam Model. Designer yang mumpuni dalam grafik dan tampilan bisa fokus mengembangkan tampilan yang akan memikat user. Kedua komponen tersebut bisa bekerja dengan harmonis yang diatur oleh Controller. Pemisahan yang jelas ini juga akan memudahkan pengetesan terhadap masing-masing komponen.
3
M EMAHAMI ASP.NET MVC ASP.NET MVC adalah implementasi arsitektur MVC ke dalam framework pemrograman ASP.NET. Secara fisik ia berbentuk library yang terdiri atas beberapa assembly yang bisa di-install di atas .NET Framework 3.5. Ia dibuat sebagai pilihan bagi developer yang menyukai arsitektur MVC. Ia tidak menggantikan arsitektur Web Form yang selama ini dikenal dan dipakai oleh para developer ASP.NET. Secara diagram, ASP.NET MVC bisa digambarkan sebagai berikut:
G AMBAR 2 – D IAGRAM ASP.NET MVC
Komponen-komponen utama ASP.NET MVC masih sama dengan arsitektur pokok MVC, yaitu Model, View, dan Controller. Beberapa komponen tambahannya adalah web server, Routing, dan dispatcher. Web server selalu menjembatani interaksi antara user dengan sebuah program web. Kita bisa memakai IIS web server, atau personal web server selama program masih dalam fase pengembangan. Versi IIS yang bisa dipakai beragam dari versi 5 sampai dengan versi 7. Routing adalah tabel pemetaan antara URL yang diketikkan user dalam web browser dengan Controller yang akan menanganinya. Secara fisik Routing diimplementasikan sebagai assembly System.Web.Routing.dll. Selain itu ASP.NET MVC juga bergantung kepada assembly System.Web.Abstractions.dll. Keduanya bisa di-install bersama 4
dengan .NET Framework 3.5 SP1 ataupun di-install terpisah dengan cara melakukan registrasi kedua assembly tersebut secara manual ke GAC. Sedangkan dispatcher adalah sebuah ASP.NET HTTP handler yang fungsinya menginisialisasi dan mengatur Controller mana yang akan diaktifkan berdasarkan URL tertentu. Mekanisme kerja dispatcher ini sama dengan ASP.NET HTTP handler klasik. ASP.NET MVC diimplementasikan dalam bentuk assembly-assembly yang terpisah dari assembly ASP.NET. Kita bisa meng-install-nya menggunakan paket installer yang tersedia untuk di-download. Paket installer ini akan meng-install assembly-assembly ASP.NET MVC ke dalam GAC sehingga siap digunakan, sekaligus meng-install ASP.NET MVC project-template ke dalam Visual Studio 2008. ASP.NET MVC menyediakan base-class untuk Controller dan View, sehingga mekanisme-mekanisme umum untuk keduanya bisa memakai properti maupun method yang didefinisikan dalam base-class tersebut. Lain halnya Model yang bentuknya bisa bebas tanpa terikat aturan tertentu. Lebih detail tentang Model, View, dan Controller akan dibahas satu per satu secara lebih rinci dalam bab masing-masing. Dari sisi development tool, Visual Studio 2008 adalah tool yang disarankan untuk mengembangkan program web ASP.NET MVC. Fiturfitur standard seperti syntax-coloring, intellisense, dan debugging akan sangat membantu produktivitas developer dalam mengembangkan program web ASP.NET MVC. Apalagi dalam beberapa edisi tertentu, Visual Studio 2008 dilengkap dengan kemampuan unit testing yang terpadu sebagai bagian dari program web yang sedang dikembangkan. Sebagai kesimpulan, ASP.NET MVC adalah implementasi arsitektur MVC ke dalam pemrograman web ASP.NET yang selama ini sudah ada. ASP.NET MVC tersedia sebagai salah satu pilihan disamping model Web Form yang sudah sukses dan teruji selama bertahun-tahun.
5
ASP.NET MVC
VS
W EB F ORM
Microsoft telah memiliki model pemrograman web yang sudah matang dan banyak digunakan untuk mengembangkan berbagai macam aplikasi web. Model pemrograman ini lebih dikenal dengan nama Web Form. Lalu kenapa Microsoft mengeluarkan model pemrograman baru yaitu ASP.NET MVC? Jawabannya terletak kepada perbedaan-perbedaan mendasar yang terdapat antara keduanya. Masing-masing memiliki keunggulan dan kelemahan. Dan yang jelas masing-masing memiliki pendukung dalam komunitas pemrograman web. Tabel berikut ini menjabarkan perbedaanperbedaan antara Web Form dan ASP.NET MVC secara rinci. Web Form Web Form menggunakan page-
controller, dimana setiap request
akan di-handle oleh sebuah page yang filenya ada secara fisik.
ASP.NET MVC ASP.NET MVC menggunakan
central-controller, dimana setiap
request akan di-handle oleh sebuah objek logical berupa
Controller.
Form server-side dalam Web Form
Skenario posting sebuah form
post-back terhadap page itu
Controller.
secara default akan melakukan sendiri.
selalu ditujukan kepada
Page bisa digunakan untuk
Tampilan dan logic proses bisnis
user, sekaligus juga mengerjakan
komponen View dan Model.
menampilkan informasi kepada
logic proses bisnis.
Web Form mengemulasikan sifat
statefull ke dalam model
pemrograman web agar bisa
terpisah dengan jelas dalam dua
ASP.NET MVC menerima apa adanya protokol HTTP yang
stateless dan menjadikan model
menerapkan rich client behavior.
pemrogramannya menyesuaikan terhadap hal ini. View-state
mendukung mekanisme ini.
pun tidak diperlukan lagi.
View-state diperlukan untuk
6
Web Form menerapkan abstraksi
ASP.NET MVC lebih dekat kepada
mekanisme pemrograman web
seperti yang terdapat dalam ASP
component-model dimana
pemrograman web yang native
dibungkus dalam komponen-
klasik, PHP, dan Ruby on Rails.
komponen yang bisa
Developer memiliki keleluasaan
aplikasi.
model pemrograman yang bersifat
mempercepat pengembangan
untuk melakukan sesuatu dalam
native.
Web Form bisa di-test
ASP.NET MVC lebih cocok untuk
menggunakan berbagai macam
TDD karena kejelasan tugas dan
metode testing yang ada seperti
tanggung jawab masing-masing
Walaupun Web Form bisa
dirancang untuk lebih mudah
unit testing maupun web testing. digunakan dalam Test Driven
Development (TDD), namun dalam pelaksanaannya akan terasa lebih
komponennya disamping telah dilakukan unit testing terhadapnya.
sulit.
Keberadaan Web Form yang sudah
Kemunculan ASP.NET MVC yang
komponen, control, tool, dan
banyak komponen, tool, dan sub-
lama menyebabkan banyak
belum lama menyebabkan belum
sub-framework yang telah dibuat
framework yang bisa bekerja di
sangat bagus untuk
satu tantangan untuk
di atasnya. Hal ini tentu saja
mengembangkan program web
yang bersifat Rapid Application Development (RAD).
atasnya. Hal ini bisa menjadi salah mengembangkan aplikasi RAD
terutama dalam aplikasi-aplikasi Line of Business (LOB).
Seperti yang kita lihat dalam tabel di atas, baik Web Form maupun ASP.NET MVC memiliki kelebihan dan kekurangan masing-masing yang mendukung kecocokannya untuk diterapkan terhadap program web tertentu. Banyak developer yang menyukai Web Form, namun banyak juga yang lebih memilih arsitektur MVC. Sebelum kemunculan ASP.NET MVC, arsitektur MVC telah diterapkan dalam framework Ruby on Rails dan Django. Popularitas arsitektur MVC mulai mendapatkan perhatian besar terutama sejak munculnya Ruby on 7
Rails. ASP.NET MVC muncul sebagai solusi yang disediakan Microsoft bagi para developer yang menyukai arsitektur MVC dan juga scripting, termasuk bagi para developer PHP, Ruby on Rails, dan Django. Sebagai kesimpulan, Web Form dan ASP.NET MVC memiliki beberapa perbedaan mendasar yang membuat masing-masing lebih cocok untuk diterapkan dalam skenario tertentu. ASP.NET MVC juga merupakan dukungan Microsoft terhadap arsitektur MVC yang disediakan bagi para developer yang lebih menyukai arsitektur ini dan juga scripting, seperti para developer PHP, Ruby on Rails, dan Django.
8
H ELLO W ORLD Untuk memberikan gambaran awal tentang ASP.NET MVC, marilah kita membuat sebuah program Hello World. Program ini sangat sederhana, hanya menampilkan kalimat “Hello World” ke dalam sebuah web page. Untuk keperluan demo program ini, kita perlu mempersiapkan tool dan semua library yang diperlukan sebagai berikut: 1. Microsoft Visual Studio 2008, bisa menggunakan versi apa saja. Versi Express tersedia untuk di-download dari http://www.microsoft.com/express/download/. 2. Microsoft .NET Framework 3.5 yang bisa di-download dari http://www.microsoft.com/downloads/details.aspx?familyid=333325 FD-AE52-4E35-B531-508D977D32A6&displaylang=en, dan SP1-nya dari http://www.microsoft.com/downloads/details.aspx?FamilyID=ab9934 2f-5d1a-413d-8319-81da479ab0d7&displaylang=en. 3. ASP.NET MVC Beta installer yang bisa di-download dari http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?Rele aseId=18764. Setelah di-download, lakukan instalasi untuk masing-masing tool dan library di atas sesuai dengan urutannya. Apabila instalasi telah selesai, ASP.NET MVC project-template akan terpasang secara otomatis dalam Visual Studio 2008, dan library ASP.NET MVC akan tersalin ke folder C:\Program Files\Microsoft ASP.NET\ASP.NET MVC Beta\Assemblies. Ikuti langkah-langkah berikut ini untuk memulai membuat program Hello World: 1. Buka Visual Studio 2008, pilih menu File ► New ► Project.
9
G AMBAR 3 – K OTAK D IALOG N EW P ROJECT ASP.NET MVC
Kotak dialog New Project akan muncul seperti dalam Gambar 3. Di bagian Templates, pilih ASP.NET MVC Web Application, lalu ubah nama project-nya menjadi HelloWorld. Klik tombol OK. 2. Sebuah kotak dialog akan muncul menanyakan apakah kita akan membuat Test Project, seperti terlihat dalam Gambar 4.
G AMBAR 4 – K OTAK D IALOG M ENANYAKAN T EST P ROJECT
Untuk keperluan program HelloWorld ini, pilih No. Klik tombol OK.
10
3. Visual Studio 2008 akan membuat solution HelloWorld.sln dengan sebuah web project. Solution explorer akan tampak seperti dalam Gambar 5.
G AMBAR 5 – S OLUTION E XPLORER H ELLO W ORLD
4. Masuk ke dalam folder Controllers, double-click file HomeController.cs, lalu ubah source code class HomeController sehingga tampak seperti dalam Listing 1. Perhatikan bahwa bagian yang diubah hanya yang di-highlight, dimana kalimat “Welcome to ASP.NET MVC!” kita ganti dengan kalimat “Hello World”. [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData["Title"] = "Home Page"; ViewData["Message"] = "Hello World"; return View(); } public ActionResult About() { ViewData["Title"] = "About Page"; return View(); } } L ISTING 1 – M ENGUBAH H OME C ONTROLLER
11
5. Pencet tombol F5 atau klik icon ► pada toolbar Visual Studio 2008 untuk memulai proses Start Debugging. Jika kotak dialog “Debugging Not Enabled” muncul seperti tampak pada Gambar 6, biarkan pilihan berada pada nilai default-nya, lalu klik tombol OK.
G AMBAR 6 – K OTAK D IALOG D EBUGGING N OT E NABLED
6. Hasil program Hello World akan ditampilkan dalam browser Internet Explorer seperti terlihat dalam Gambar 7.
G AMBAR 7 – P ROGRAM H ELLO W ORLD
DALAM I NTERNET
E XPLORER
12
Mudah dan sederhana! ASP.NET MVC project-template telah menyediakan mekanisme dasar seperti Routing, Controller, dan View yang bisa kita gunakan langsung di dalam program Hello World di atas tanpa harus mengubah atau hanya dengan sedikit mengubah code. Kita akan mengupas satu per satu mekanisme ASP.NET MVC tersebut agar program Hello World yang sederhana bisa kita mengerti. Selanjutnya kita bisa menggunakan ASP.NET MVC untuk membuat program kita sendiri.
13
R OUTING Routing adalah fitur baru dari .NET Framework 3.5, dan di-install di dalam SP1. Di dalam ASP.NET MVC, fungsi Routing adalah melakukan pemetaan antara request-path dengan Controller/action. Dalam ASP.NET MVC, pemetaan ini diperlukan mengingat sebuah web request tidak akan ditangani oleh sebuah file ASPX yang harus ada secara fisik. Alamat web beserta file dan parameter query string yang kita ketikkan di dalam address bar sebuah browser disebut dengan request-path. Contoh-contoh request path adalah sebagai berikut: •
/home/index.aspx
•
/home/index?page=2
•
/home/about
•
/catalog/product/microsoft-office
Di dalam Web Form, sebuah request terhadap page biasanya memiliki ekstensi ASPX, misalnya /home/index.aspx. Sebuah file akan ada secara fisik dalam struktur folder program yang merupakan resource yang menangani request tersebut. Dalam ASP.NET MVC, mindset ini harus diubah. Request-path tidak dipetakan terhadap resource fisik melainkan resource logic. Resource logic yang menangani request ini adalah Controller/action. Mengenai Controller akan dijelaskan lebih lanjut dalam bagian berikutnya. Saat ini cukup untuk memahami bahwa Controller adalah sebuah class sedangkan action adalah method dari class Controller, oleh karena itu sering disebut juga action-method. Pemetaan antara request-path dengan Controller/action akan disimpan di dalam sebuah tabel route, yang prosesnya bisa dilakukan pada saat program baru berjalan. Dalam program Hello World di atas, proses pemetaan ini dilakukan di dalam Global.asax.cs. Bukalah Global.asax.cs dan perhatikan method RegisterRoutes() seperti terlihat dalam Listing 2. public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(
14
"Default", "{controller}/{action}/{id}", new { controller = "Home", action = "Index", id = "" } ); } protected void Application_Start() { RegisterRoutes(RouteTable.Routes); } L ISTING 2 – R OUTING
Pemetaan dilakukan dengan memanggil method MapRoute() dari objek RouteTable.Routes. Method ini terdiri atas beberapa overload. Yang dipakai dalam Listing 2 adalah method yang menerima tiga parameter dengan penjelasan masing-masing sebagai berikut: •
Nama routing; dalam contoh diisi dengan nilai "Default".
•
URL dengan parameter; dalam contoh diisi dengan nilai "{controller}/{action}/{id}".
•
Parameter default, bertipe objek, gunanya adalah sebagai pemberi nilai default apabila parameter tidak dijumpai dalam URL; dalam contoh diisi dengan nilai new { controller = "Home", action = "Index", id = "" }.
Untuk mengerti bagaimana proses pemetaan antara request-path dan URL dengan parameter, perhatikan Gambar 8.
G AMBAR 8 – C ONTOH P EMETAAN
DALAM
R OUTING
Request path /catalog/product/microsoft-office akan dipetakan terhadap “URL dengan parameter” yang ada dalam tabel Routing. Request-path tersebut akan cocok dengan entri {controller}/{action}/{id} dengan pencocokan seperti arah panah dalam Gambar 8. Kata catalog cocok dengan {controller}, product cocok dengan {action}, dan microsoft-office cocok dengan {id}.
15
“URL dengan parameter” terdiri atas bagian-bagian yang jumlahnya bisa tidak terhingga, dipisahkan oleh / (karakter garis miring). Untuk menunjukkan bahwa sebuah bagian adalah “variabel” ditandai dengan kurung kurawal buka dan tutup “{}”. Sedangkan kata yang diletakkan di situ tanpa kurung kurawal berarti literal biasa. Kemudian ASP.NET MVC runtime akan mencari Controller dengan nama CatalogController. Secara konvensi nama dari ASP.NET MVC Controller selalu memiliki akhiran Controller. Kemudian memanggil actionmethod Product(string id). Action-method yang dipanggil memiliki satu parameter dengan nama id, yang akan diberikan value "microsoftoffice". Apabila dalam request path tidak semua bagian bisa dicocokkan, maka bagian yang nilainya tidak diberikan dalam request path akan diambilkan dari nilai parameter default-nya seperti terlihat dalam Gambar 9. {action} akan diisi dengan nilai default barupa Index, sedangkan {id} akan diisi dengan nilai default berupa string kosong.
G AMBAR 9 – P ENGGUNAAN P ARAMETER D EFAULT
Entri Routing lain yang cukup penting adalah IgnoreRoute(). Method ini bisa digunakan untuk meng-exclude request-path dengan pola tertentu agar tidak ditangani oleh proses pemetaan atau Routing ini, melainkan diteruskan ke runtime ASP.NET untuk ditangani oleh handler lain bila ada. Dalam Listing 2 kita bisa menjumpai penggunaan method ini untuk meng-exclude semua request path yang diakhiri dengan ekstensi AXD. Dalam Web Form, AXD adalah ekstensi yang diperuntukkan bagi HTTP handler. 16
Routing hanya akan bekerja apabila request-path tidak berkorespondensi dengan file fisik yang ada dalam struktur direktori web server. Jika sebuah file secara fisik terdapat dalam struktur direktori server, maka pemrosesan akan dibiarkan untuk diserahkan kepada web server. Hal ini untuk menghindari overhead yang tidak perlu pada saat memproses filefile statik seperti image, CSS, dan JavaScript. Namun, behavior ini bisa diubah apabila kita menginginkan Routing untuk menangani semua request-path. Sebagai kesimpulan, Routing memerankan fungsi pemetaan antara request-path dengan Controller/action yang akan menanganinya. Pemetaan ini diperlukan karena dalam ASP.NET MVC, sebuah requestpath tidak berkorespondensi dengan satu file ASPX yang ada secara fisik dalam struktur direktori web server, melainkan oleh resource logic berupa Controller/action.
17
ASP.NET MVC C ONTROLLER Controller dalam ASP.NET MVC adalah class-class yang didefinisikan di dalam sebuah program yang inherit dari base-class System.Web.Mvc.Controller. Di dalam solution explorer Visual Studio 2008, Controller diletakkan dalam sebuah folder bernama Controllers seperti terlihat dalam Gambar 10.
G AMBAR 10 – F OLDER C ONTROLLERS
Dalam program Hello World kita di atas, terdapat dua Controller yang digenerate secara otomatis oleh ASP.NET MVC project-template, yaitu HomeController dan AccountController. HomeController digunakan untuk menangani request-path yang pattern-nya ditentukan dalam route-table. Sedangkan AccountController digunakan dalam proses autentikasi user. Bukalah HomeController.cs, source code-nya akan terlihat seperti dalam Listing 3. [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData["Title"] = "Home Page"; ViewData["Message"] = "Hello World"; return View(); } public ActionResult About() {
18
ViewData["Title"] = "About Page"; return View(); } } L ISTING 3 – H OME C ONTROLLER
Controller terdiri atas beberapa action-method, yaitu berupa method dari class Controller tersebut. Terlihat dalam HomeController terdapat dua action-method yaitu Index() dan About(). Keduanya adalah method biasa yang tidak memerlukan persyaratan apa pun untuk bisa digunakan di dalam ASP.NET MVC. Jumlah parameter yang bisa ditempatkan dalam sebuah method juga tergantung kebutuhan. Class Controller bisa di-dekorasi dengan beberapa atribut. Dalam HomeController, terdapat satu atribut yaitu [HandleError]. Dengan memasang atribut tersebut dalam sebuah Controller, maka jika terjadi exception atau error yang tidak ditangani di dalam code, program tidak akan langsung crash menampilkan pesan error yang teknis, melainkan akan dibelokkan ke sebuah View tertentu yang akan menampilkan pesan error yang user-friendly. Kita coba masuk lebih detail lagi ke action-method Index() seperti terlihat dalam Listing 4. Yang dilakukan di dalam action-method ini adalah memberikan beberapa nilai dalam variabel dictionary ViewData, dan memanggil method View(). ViewData adalah object yang digunakan untuk komunikasi antara Controller dan View. Tipe datanya adalah ViewDataDictionary yang merupakan abstraksi lebih lanjut dari Dictionary<string, object>. public ActionResult Index() { ViewData["Title"] = "Home Page"; ViewData["Message"] = "Hello World"; return View(); } L ISTING 4 – A CTION - METHOD I NDEX ()
DALAM
H OME C ONTROLLER
ViewData diciptakan secara otomatis oleh Controller, dan akan tersedia juga secara otomatis di dalam View yang dipanggil oleh Controller tersebut. Tipe data Dictionary<string,object> memungkinkan kita 19
menyimpan objek dengan tipe apa pun ke dalam entri ViewData, tidak terbatas pada string seperti terlihat dalam Listing 4. Secara statistik, 90% atau lebih action-method akan memanggil method View() untuk menampilkan sebuah View. Di sisi browser, sebuah View identik dengan output dengan content-type text/html. Dalam sebuah program web, content-type dari output bisa saja berupa text/xml, file, image, ataupun redirection ke alamat web yang lain. Oleh karena itu selain method View(), Controller juga memiliki method-method lain untuk memberikan output dengan content-type yang bermacam-macam. Berikut ini beberapa method dalam controller yang bisa kita gunakan untuk mengarahkan tipe output yang diinginkan: •
View(), digunakan untuk meng-output-kan View ke dalam browser.
•
Content(), digunakan untuk meng-output-kan content dengan content-type yang kita spesifikasikan sebagai parameter.
•
Json(), digunakan untuk meng-output-kan JSON (javascript object notation).
•
RedirectToAction(), digunakan untuk memberikan arahan kepada browser untuk melakukan redirection ke action-method yang lain.
•
RedirectToRoute(), digunakan untuk memberikan arahan kepada browser untuk melakukan redirection ke entri route yang lain.
Listing 5 memberikan contoh bagaimana kita menggunakan method Content() untuk mengoutputkan text dalam web browser, seperti terlihat dalam Gambar 11. public ActionResult Content() { return Content("This is text content"); } L ISTING 5 – A CTION -M ETHOD
YANG
M ENG - OUTPUT - KAN C ONTENT
20
G AMBAR 11 – O UTPUT
DARI
A CTION -M ETHOD C ONTENT
Controller dalam ASP.NET MVC sebaiknya tidak memuat logic proses bisnis, karena tugas Controller adalah mengkoordinasikan input dan aliran data dari View, membuat dan memanipulasi Model, kemudian memberikan Model kepada View untuk ditampilkan kepada user. Logic proses bisnis lebih tepat ditangani oleh Model. Kita akan melihat penerapan prinsip ini nanti dalam pembahasan tentang Model. Sebagai kesimpulan, Controller dalam ASP.NET MVC adalah class-class yang diturunkan dari base class System.Web.Mvc.Controller yang bertugas melakukan koordinasi antara View dan Model. Sebagai panduan praktek pemrograman yang baik, Controller bukanlah tempat untuk meletakkan logic proses bisnis karena tempat yang lebih tepat untuk melakukan hal tersebut adalah Model.
21
ASP.NET MVC V IEW View adalah bagian yang bertanggung jawab menangani tampilan. Dalam sebuah program web, tampilan yang dimaksud adalah HTML yang akan di-render dalam sebuah browser. View menangani bagaimana sebuah data atau informasi disajikan kepada user melalui browser, bagaimana user bisa berinteraksi dengan program melalui mekanisme HTML yang ada seperti mengisi form, kemudian mengklik sebuah tombol untuk mengirimkan data kembali ke server. Di dalam solution explorer Visual Studio 2008, View diletakkan dalam sebuah folder bernama Views seperti terlihat dalam Gambar 12.
G AMBAR 12 – F OLDER V IEWS
Di dalam folder Views terdapat beberapa sub-folder yang penamaannya sama dengan nama Controller-nya. Sub-folder Home untuk HomeController, dan sub-folder Account untuk AccountController. Perkecualian untuk hal ini adalah sub-folder Shared, yang berisi ViewView yang dipakai di banyak tempat. Nama file dari sebuah View, default-nya sama dengan nama actionmethod yang memanggil View tersebut, terkecuali apabila action-method tersebut memanggil View dengan menyebutkan nama View secara eksplisit. Misalnya dalam HomeController action-method Index() akan memanggil view dengan nama Index.aspx. 22
ASP.NET MVC juga mengenal konsep Master dan Content. View Master digunakan untuk menentukan template layout, sedangkan View Content digunakan untuk menyajikan isi dari View. View Master secara default bernama Site.Master dan berada di dalam sub-folder Shared. Listing 6 dan Listing 7 masing-masing memperlihatkan HTML source dan code-behind dari index.aspx. Bagi yang sudah terbiasa dengan Web Form, hal tersebut tentu bukanlah hal yang baru. Bedanya, View dalam ASP.NET MVC inherit dari System.Web.Mvc.ViewPage. Namun secara tidak langsung tetap inherit ke System.Web.UI.Page seperti page-page dalam Web Form. ViewPage menambahkan behavior Page dengan mekanisme yang diperlukan oleh ASP.NET MVC. <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="HelloWorld.Views.Home.Index" %>
L ISTING 6 – HTML S OURCE I NDEX . ASPX using System.Web.Mvc; namespace HelloWorld.Views.Home { public partial class Index : ViewPage { } } L ISTING 7 – C ODE - BEHIND I NDEX . ASPX
ViewPage juga memiliki versi generic. Dalam versi generic, View bisa inherit dari ViewPage, dimana T adalah tipe data dari class yang akan kita jadikan sebagai Model. Kelebihan versi generic ini ada pada sifat strongly-type dari property ViewData.Model yang bisa diakses dari dalam View. Dengan demikian kita bisa mengambil manfaat dari 23
intellisense Visual Studio 2008 dalam mengakses properti dan method dari Model. Selain ViewPage, ASP.NET MVC juga mendefinisikan ViewUserControl sebagai konsep yang identik dengan UserControl dalam Web Form. Bedanya, dalam Web Form konsep UserControl lekat dengan component-model dimana UserControl adalah sebuah komponen dari sebuah page, dalam ASP.NET MVC ViewUserControl adalah salah satu mekanisme untuk me-render sebagian dari area View. View yang diciptakan untuk me-render sebagaian area ini dalam ASP.NET MVC dikenal dengan istilah partial-view. Dalam program Hello World kita di atas, sebuah ViewUserControl bernama LoginUserControl telah di-generate secara otomatis oleh ASP.NET project-template. Kita bisa melihat penggunaannya dalam View Login.aspx, dimana deklarasi dari penggunaan partial view ini sifatnya bukan deklaratif, namun berupa statement server-side yang dipanggil dari HTML source Site.master, seperti terlihat dalam Listing 8.
Sampai saat ini ASP.NET MVC belum memiliki komponen yang bersifat deklaratif seperti yang sudah banyak tersedia dalam Web Form. Komponen-komponen seperti textbox, radiobutton, checkbox dan lainlain yang sudah ada dalam Web Form juga tidak bisa digunakan dalam ASP.NET MVC view karena perbedaan arsitektur antara keduanya. Yang 24
ada saat ini adalah method helper yang bisa digunakan dalam HTML source secara server-side. Listing 9 menunjukkan contoh penggunaan helper method untuk me-render sebuah HTML textbox.
Name: <%= Html.TextBox("name") %>
L ISTING 9 – C ONTOH H ELPER M ETHOD
UNTUK
T EXTBOX
View dalam ASP.NET MVC sifatnya sangat modular. Hal ini karena arsitektur MVC memberikan batasan yang jelas terhadap tugas dan tanggung jawab dari Model, View, dan Controller. View hanya bertanggung jawab terhadap tampilan, dan sama sekali tidak melakukan tugas-tugas yang berkaitan dengan logic proses bisnis. Sifat modular ini memungkinkan View bisa dihasilkan oleh templateengine yang berbeda-beda. Dalam ASP.NET MVC, template-engine ini disebut juga dengan view engine. Secara default, ASP.NET MVC menggunakan WebFormViewEngine, dimana sintaks penulisan HTML source-nya sama dengan page dalam Web Form. Selain WebFormViewEngine, terdapat beberapa jenis view engine lain yang bisa digunakan. Kita akan membahas hal ini secara detail dalam bab tentang MvcContrib. Sebagai kesimpulan, View dalam ASP.NET MVC direpresentasikan dengan objek-objek yang akan menampilkan content ke user, tanpa memikirkan
logic proses bisnisnya. Secara default, View dalam ASP.NET MVC menggunakan template-engine yang sama dengan Page dalam Web Form. Walaupun demikian, sifat modular dari arsitektur MVC memungkinkan template-engine yang lain digunakan untuk menggantikan WebFormViewEngine sebagai template-engine default.
25
ASP.NET MVC M ODEL Model adalah komponen MVC yang bekerja di belakang layar. Pekerjaan model bervariasi dari melakukan query data ke database, mengolah data menurut logic proses bisnis, mengalirkan ke modul workflow apabila diperlukan, dan lain-lain. Dalam melakukan semuanya itu, Model tidak peduli bagaimana informasi nantinya akan ditampilkan, karena hal itu sudah menjadi urusan komponen MVC yang lain. Di dalam solution explorer Visual Studio 2008, secara default Model diletakkan dalam sebuah folder bernama Models seperti terlihat dalam Gambar 13. Namun, tidak seperti Controller dan View, bentuk dan penempatan Model ini tidak mengikat. Model kita bisa berbentuk POCO (plain old CLR object), active-record, repository, LINQ to SQL, dan lainlain. Kita bisa saja menempatkan Model sebagai project lain dalam solusi Visual Studio 2008 yang sama tanpa mengubah konfigurasi.
G AMBAR 13 – F OLDER M ODELS
Kita akan menambahkan Model dalam program Hello World kita. Model ini berupa list dari objek dalam internal memory, dimana datanya kita hard-code dalam source code. Tujuan kita adalah menampilkan produk yang kita definisikan dalam sebuah List ke dalam sebuah View. Product adalah class yang kita definiskan sendiri sebagai abstraksi dari entitas produk. Ikutilah 26
langkah-langkah berikut ini untuk menambahkan dan menampilkan Model ini dalam program Hello World kita. 1. Buatlah class Product yang kita tempatkan di dalam folder Models. Class ini adalah POCO sederhana yang menampilkan beberapa atribut produk yaitu Id, Name, UnitPrice, dan Description. Listing 10 menampilkan definisi dari class Product ini. public class Product { public int Id { get; set; } public string Name { get; set; } public decimal UnitPrice { get; set; } public string Description { get; set; } } L ISTING 10 – D EKLARASI C LASS P RODUCT
2. Kemudian di dalam HomeController, tambahkan satu action-method bernama Products() dengan isi seperti terlihat dalam Listing 11. public ActionResult Products() { ViewData["Title"] = "List of Products"; var products = new List { new Product { Id = 1, Name = "Ice cream", UnitPrice = 1000m, Description = "Delicious ice cream" }, new Product { Id = 2, Name = "Hotdog", UnitPrice = 1200m, Description = "Special hotdog" }, }; return View(products); } L ISTING 11 – A CTION -M ETHOD P RODUCTS ()
3. Buatlah sebuah View dengan nama Product.aspx. Deklarasi View ini inherit dari ViewPage> yang merupakan versi generic dari ViewPage. HTML source dan code-behind dari Product.aspx bisa dilihat dalam Listing 12 dan Listing 13. <%@ Page Title="Products"
27
... %>
<%= Html.Encode(ViewData["Title"]) %>
Id
Name
Unit Price
Description
<% foreach (var product in ViewData.Model) { %>
<%= product.Id %>
<%= product.Name %>
<%= product.UnitPrice %>
<%= product.Description %>
<% } %>
L ISTING 12 – HTML S OURCE P RODUCTS . ASPX using System.Collections.Generic; using System.Web.Mvc; using HelloWorld.Models; namespace HelloWorld.Views.Home { public partial class Products : ViewPage> { } } L ISTING 13 – C ODE -B EHIND P RODUCTS . ASPX
Yang dilakukan oleh View Products.aspx adalah menampilkan list dari Product ke dalam sebuah tabel. 4. Jalankan program Hello World kita dalam mode debug, lalu arahkan browser ke /home/products. List dari produk kita akan ditampilkan seperti terlihat dalam Gambar 14.
28
G AMBAR 14 – V IEW P RODUCTS . ASPX
DALAM I NTERNET
E XPLORER
Sebagai kesimpulan, Model adalah komponen ASP.NET MVC yang memproses logic program, dan menghasilkan output yang akan ditampilkan oleh View. Model merepresentasikan data dan proses yang terdapat dalam sebuah program. Struktur data dari Model ini akan dibaca oleh View dan akan ditampilkan oleh View sebagai output.
29
C ONTROL / C OMPONENT Saat ini ASP.NET MVC belum memiliki control yang sifatnya deklaratif seperti yang sudah ada dalam Web Form. ASP.NET MVC tidak membuat abstraksi component-model seperti Web Form. Yang ada saat ini dalam ASP.NET MVC adalah beberapa method helper yang merupakan wrapper dari penulisan HTML secara server-side. Tabel berikut ini berisi deklarasi beberapa contoh method helper untuk control-control yang biasa kita gunakan dalam sebuah form. Control
Perhatikan bahwa method-method helper tersebut adalah server-side, dipanggil di dalam tag <%= %>. Hampir semua method-method di atas memiliki overload yang menerima parameter untuk menentukan atribut dari tag HTML yang akan dihasilkan dalam browser. Kita juga bisa menggunakan elemen-elemen HTML dari client langsung dalam sebuah form HTML untuk melakukan request dengan method POST ke server. Bahkan kita pun bisa menggunakan komponen-komponen client yang dihasilkan oleh framework JavaScript tertentu, misalnya ExtJs dan jQuery UI. Fleksibilitas seperti ini adalah salah satu kelebihan ASP.NET MVC bagi developer untuk melakukan kontrol yang besar dalam memanipulasi HTML.
30
Dalam Web Form kita sudah mengenal beberapa control yang cukup kompleks misalnya GridView yang dibuat untuk memudahkan developer yang hendak menampilkan data dalam bentuk tabular. Saat ini ASP.NET MVC belum memiliki komponen semacam yang sebanding. Alternatif yang bisa dilakukan oleh developer ASP.NET MVC saat ini salah satunya adalah dengan memanfaatkan hasil perkembangan teknologi ASP.NET AJAX yang saat ini sudah menawarkan client-side data-binding dengan model client-template. Kita akan melihat lebih jauh kaitan antara ASP.NET MVC dan ASP.NET AJAX nanti dalam bagian ASP.NET MVC dan AJAX. Beberapa project open source juga menambahkan control seperti GridView yang bisa digunakan dalam ASP.NET MVC. Salah satunya adalah project MvcContrib yang menyediakan helper method Grid() untuk membuat sebuah tampilan grid dalam View dengan menerima parameter Model, dan spesifikasi kolom-kolom yang akan ditampilkan dalam grid tersebut. Kita akan menambahkan sebuah View dalam program Hello World kita, dimana di dalam View ini kita akan mendemokan penggunaan helper method untuk membuat sebuah form sederhana. Buka kembali solusi HelloWorld.sln dan ikuti langkah-langkah berikut ini: 1. Buatlah sebuah view bernama EmployeeForm.aspx. Listing 14 menunjukkan HTML source dari EmployeeForm.aspx. <%@ Page Title="Employee Form" ... %> L ISTING 14 – HTML S OURCE E MPLOYEE F ORM . ASPX
Perhatikan bahwa View tersebut menggunakan helper method TextBox(), RadioButton(), dan CheckBox() sebagai komponen form. 2. Di dalam HomeController, buatlah action-method untuk menampilkan EmployeeForm dalam sebuah View, dan juga untuk menangani apabila form tersebut dikirim kembali dari browser. [AcceptVerbs("GET")] public ActionResult EmployeeForm() { return View(); } [AcceptVerbs("POST")] public ActionResult EmployeeForm(FormCollection form) { ViewData["name"] = form["name"]; ViewData["gender"] = form["gender"]; var hobby = string.Empty; hobby += form["sport"].IndexOf("true") > -1 ? ", sport" : ""; hobby += form["reading"].IndexOf("true") > -1 ? ", reading" : ""; hobby += form["movies"].IndexOf("true") > -1 ? ", movies" : ""; ViewData["hobby"] = hobby.Length > 0 ? hobby.Substring(2) : "none"; return View("DisplayEmployee"); } L ISTING 15 – A CTION -M ETHOD E MPLOYEE F ORM ()
Dalam Listing 15 terdapat dua action-method dengan nama yang sama yaitu EmployeeForm(). Perhatikan action-method yang pertama didekorasi dengan atribut [AcceptVerb("GET")], artinya action-method tersebut hanya bisa dipanggil oleh request HTTP dengan method GET. Sedangkan yang kedua, didekorasi dengan 32
atribut [AcceptVerb("POST")], dipanggil pada saat form di-submit dengan method POST. Yang dilakukan action-method versi GET sederhana saja yaitu menampilkan form dalam View untuk diisi oleh user. Form ini terlihat seperti dalam Gambar 15. Sedangkan action-method versi POST akan memproses data-data yang dikirim user lewat form. Kita memasukkan data-data tersebut ke dalam ViewData untuk ditampilkan di dalam view yang lain. View yang digunakan untuk menampilkan hasil dari pemrosesan data form adalah DisplayEmployee.aspx. View ini sederhana, hanya menampilkan data-data yang dikirim melalui EmployeeForm.aspx melalui ViewData, seperti terlihat dalam Gambar 16.
G AMBAR 15 – V IEW F ORM E MPLOYEE . ASPX
33
G AMBAR 16 – V IEW D ISPLAY E MPLOYEE . ASPX
Dalam demo di atas kita telah melihat bagaimana method helper untuk me-render element HTML diimplementasikan dalam ASP.NET MVC. Demo ini sekaligus juga menunjukan skenario posting sebuah form dalam ASP.NET MVC. Untuk saat ini ASP.NET MVC belum menyediakan control yang bersifat deklaratif untuk memudahkan penggunaan control dalam sebuah view.
34
ASP.NET MVC
DAN
AJAX
Program web yang interaktif saat ini sudah banyak yang menerapkan AJAX di dalamnya. Seperti kita ketahui bersama AJAX adalah suatu mekanisme dalam komunikasi antara user-agent (browser) dan server yang membuat interaksi antara user dan program menjadi lebih baik, salah satunya dengan membuat program web tersebut menjadi lebih interaktif. ASP.NET MVC memudahkan kita untuk membuat program web yang sudah menerapkan AJAX di dalamnya. Salah satu fasilitas yang disediakan oleh ASP.NET MVC adalah tersedianya method Json() di dalam Controller. Method ini akan memberikan result berupa JSON (JavaScript Object Notation) kepada browser untuk dimanipulasi lebih lanjut di dalam browser oleh client-script. Untuk memudahkan pemahaman kita akan ASP.NET MVC dan AJAX, kita akan melakukan demo dengan cara menambahkan kemampuan AJAX ke dalam program Hello World. Buka HelloWorld.sln, lalu ikuti langkahlangkah berikut ini: 1. Buatlah sebuah view bernama AjaxDemo.aspx. HTML source view tersebut terlihat dalam Listing 16. <%@ Page Title="Ajax Demo" Language="C#" ... %> <script language="javascript" src="../../Scripts/MicrosoftAjax.js" type="text/javascript"> <script language="javascript" type="text/javascript"> function getServerData() { var x = new Sys.Net.WebRequest(); var id = $get("random").value; x.set_url("/Home/GetJson/" + id); x.add_completed(function(e) { $get("message").innerText = e.get_object().Message; }); x.invoke(); } Enter a number (1-5):
35
value="Get Data" />
You enter <strong><span id="message">none L ISTING 16 – V IEW A JAX D EMO . ASPX
Tujuan kita adalah membuat sebuah View yang akan menerima masukan angka antara 1 s/d 5, kemudian mengirimkan masukan tersebut ke server untuk mendapatkan tulisan huruf-huruf dari angka tersebut. Misalnya angka 1 akan mendapatkan jawaban ‘One’ dari server, angka 2 dijawab ‘Two’, dan seterusnya sampai dengan angka 5. Memang cukup sederhana, dan kita bisa melakukan hal ini cukup engan JavaScript, namun untuk keperluan demo ini kita mengambil contoh yang sederhana agar mekanisme AJAX dapat dipahami dengan mudah. Untuk bisa menggunakan ASP.NET AJAX, kita perlu menambahkan referensi terhadap library JavaScript MicrosfotAjax.js yang terdapat dalam folder Scripts. ASP.NET MVC project-template memasukkan versi debug dan versi kompresi dari script library tersebut. Kita bisa menggunakan versi debug pada saat development, dan menggantinya dengan versi kompresi pada saat di-deploy ke mesin produksi. Perhatikan dalam Listing 16 di atas, kita membuat satu fungsi JavaScript bernama getServerData(). Fungsi ini menggunakan ASP.NET AJAX, dan akan memanggil URL /Home/GetJson/{id}, dimana {id} akan diisi dengan angka yang diketikkan oleh user di dalam View. Kemudian kita menambahkan satu function sebagai callback apabila pemanggilan terhadap method di server berhasil. Yang dilakukan fungsi callback ini cukup sederhana yaitu mengisi elemen html message dengan hasil kembalian dari method di server. Gambar 17 menunjukkan view AjaxDemo.aspx dijalankan dalam browser Internet Explorer.
36
G AMBAR 17 – V IEW A JAX D EMO . ASPX
DALAM I NTERNET
E XPLORER
2. Buatlah satu action-method dalam HomeController untuk menangani request yang dikirim dari view AjaxDemo.aspx. Actionmethod tersebut akan mengirimkan objek JSON ke browser. Kita bisa memakai method Json() yang sudah tersedia dalam Controller. Parameter dari method ini adalah integer yang dikirim dari client. Dalam Listing 17 terlihat bahwa kita mengirimkan objek anonymous dengan satu properti yaitu Message sebagai return-value. Properti tersebut kita isi dengan isi array dari hasil pencocokan dengan parameter dan indeks array. public ActionResult GetJson(int id) { var values = new[] {"One", "Two", "Three", "Four", "Five"}; return Json(new { Message = values[id-1] }); } L ISTING 17 – A CTION -M ETHOD G ET J SON ()
3. Jalankan program Hello World, lalu ketikkan /home/ajaxdemo dalam web browser. Masukkan angka 1 dalam input yang tersedia, lalu klik tombol “Get Data”. Perhatikan bahwa label di bawah tombol “Get 37
Data” akan berubah menjadi “You enter One” seperti terlihat dalam Gambar 18. Perhatikan bahwa dengan AJAX, berubahnya label tersebut tidak perlu me-refresh seluruh layar walaupun web browser melakukan pemanggilan ke server.
G AMBAR 18 – M ENJALANKAN A JAX D EMO
Satu lagi yang akan kita demokan berkaitan dengan AJAX adalah penggunaan AjaxControlToolkit (ACT). ACT menyediakan mekanisme extender untuk control-control ASP.NET yang berjalan di atas Win Form dengan menambahkan behaviour client di atasnya. ASP.NET MVC bisa mengambil manfaat dari ACT dengan cara mengambil behavior client-nya secara langsung. Bagaimana pun juga implementasi behavior client ini adalah objek JavaScript, sehingga kita bisa menggunakannya secara terpisah tanpa kita menggunakan mekanisme control-extender ACT. Untuk menggunakan ACT, kita perlu mend-download library-nya secara terpisah. Download library tersebut dari alamat berikut ini: http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.a spx?ReleaseId=16488. Gambar 19 menunjukkan pilihan download ACT.
38
Pilihlah AjaxControlToolkit-ScriptFilesOnly.zip karena kita hanya membutuhkan behavior client-nya saja.
G AMBAR 19 – P ILIHAN D OWNLOAD A JAX C ONTROL T OOLKIT
Kita akan menggunakan behavior dari calendar dalam ACT untuk ditambahkan ke dalam sebuah input textbox. Kita bisa lihat behavior ini mendekorasi sebuah textbox seperti terlihat dalam Gambar 20. Jika textbox kita click, di bawahnya akan muncul calendar dimana kita bisa memilih sebuah tanggal dan secara otomatis pilihan tanggal kita akan mengisi textbox.
G AMBAR 20 – B EHAVIOR C ALENDAR
Ikuti langkah-langkah berikut ini untuk menambahkan satu View yang bisa memunculkan calendar ACT. 39
1. Extract file AjaxControlToolkit-ScriptFilesOnly.zip lalu masukkan file-file JavaScript yang diperlukan ke dalam folder Script, subfolder Act. Masukkan file-file CSS dan image ke dalam folder Content. Gambar 21 menunjukkan penempatan file-file tersebut dalam proyek HelloWorld kita.
G AMBAR 21 – P ENEMPATAN L IBRARY A JAX C ONTROL T OOLKIT
2. Buatlah sebuah view bernama ActCalendar.aspx. Listing 18 menunjukkan HTML source dari view ActCalendar.aspx. <script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"> <script type="text/javascript"> Sys.Application.add_init(appInit); function appInit() { $create(AjaxControlToolkit.CalendarBehavior, null, null, null, $get("date")); }
Calendar Behavior
40
L ISTING 18 – HTML
SOURCE
A CT C ALENDAR . ASPX
3. Di dalam HomeController, buatlah action-method untuk memanggil view ActCalendar.aspx, seperti terlihat dalam Listing 19. public ActionResult ActCalendar() { return View(); } L ISTING 19 – A CTION - METHOD A CT C ALENDAR ()
4. Jalankan program HelloWorld, lalu arahkan browser ke alamat /home/actcalendar. Kalau biasanya kita memakai Internet Explorer, kali ini kita akan melihat bagaimana tampilan View tersebut dalam browser Firefox. Buka Firefox, lalu arahkan browser Firefox ke alamat yang sama di atas. Tampilan ActCalendar akan terlihat seperti dalam Gambar 22.
G AMBAR 22 – T AMPILAN A CT C ALENDAR
DALAM
B ROWSER F IREFOX
41
ASP.NET MVC
DAN J Q UERY
jQuery adalah library JavaScript yang bisa kita gunakan untuk membuat program web yang banyak menggunakan JavaScript untuk pemrosesan dalam browser. Dibuat oleh John Resig pada awal tahun 2006, saat ini jQuery merupakan salah satu library JavaScript yang banyak dipakai, bahkan oleh Microsoft didukung penggunaannya. Kemampuan jQuery untuk membuat instruksi JavaScript yang singkat dan jelas merupakan salah satu keunggulannya. Project-template ASP.NET MVC juga memasukkan library jQuery secara otomatis di dalam folder Scripts bersama-sama dengan library ASP.NET AJAX. Visual Studio 2008 juga bisa menampilkan intellisense terhadap jQuery setelah diterapkan patch KB958502 dan memasukkan file dokumentasi jQuery sebagai bagian dari project. Kita akan melihat penggunaan jQuery di dalam ASP.NET MVC dengan melakukan demo hal yang sama dengan demo dalam bab tentang ASP.NET AJAX. Pertama kita akan melihat penggunaan jQuery untuk memanggil sebuah method di server yang mengembalikan objek JSON. Kita akan memakai method yang sama dengan method yang dipakai dalam demo sebelumnya tentang ASP.NET AJAX. Ikuti langkah-langkah berikut ini untuk membuat demo pemakaian jQuery dalam project ASP.NET MVC. 1. Buatlah sebuah view dengan nama jQueryDemo.aspx. HTML source view tersebut terlihat dalam Listing 20. <%@ Page Title="jQuery Demo" Language="C#" ... %> <script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"> <script type="text/javascript"> $(document).ready(function() { $("#jbutton").click(function() { $.getJSON("/Home/GetJson/"+ $("#random").val(), function(json) { $("#message").html(json.Message); $("#messageArea") .animate({ fontSize: "18px" }, 1200); }); }); });
jQuery Demo
Enter a number (1-5):
42
You enter <strong><span id="message">none
L ISTING 20 – HTML S OURCE J Q UERY D EMO . ASPX
View jQueryDemo.aspx akan melakukan hal yang sama dengan view AjaxDemo.aspx. Bedanya, jQueryDemo.aspx melakukannya dengan library jQuery. Perhatikan bahwa library jQuery memiliki fungsi builtin untuk memanggil JSON yaitu fungsi getJSON(). jQuery juga memiliki fungsi lebih generic untuk memanggil method di server yang bernama ajax(). Dengan fungsi ini kita bisa menentukan tipe data dan format data yang hendak diambil dari server. Untuk keperluan ini kita menggunakan fungsi getJSON() yang lebih spesifik. Dalam Listing 20 terlihat bahwa selain mengisi elemen message dengan hasil dari pemanggilan fungsi JSON, jQuery juga bisa digunakan untuk menambahkan efek animasi terhadap area tertentu. Dalam contoh di atas, yang dilakukan adalah memperbesar ukuran font sampai dengan 18px dalam faktu 1,2 detik. 2. Dalam HomeController, tambahkan sebuah action-method untuk memanggil view jQueryDemo.aspx. public ActionResult jQueryDemo() { return View(); } L ISTING 21 – A CTION -M ETHOD J Q UERY D EMO ()
3. Jalankan program Hello World dalam Internet Explorer dan arahkan ke /home/jQueryDemo. Masukkan angka 5 dalam textbox yang disediakan kemudian tekan tombol “Get Data”. Sesaat kemudian label di bawahnya akan berubah menjadi “You enter Five”, dan font-nya membesar perlahan-lahan. 43
G AMBAR 23 – M ENJALANKAN J Q UERY D EMO
Kita juga akan melakukan hal yang sama dengan jQuery untuk menampilkan calendar dalam sebuah view. Kalau dalam demo AJAX kita menyebutnya dengan behavior calendar, dalam demo jQuery ini kita menyebutnya dengan DatePicker, sesuai dengan nama library jQuery yang akan digunakan untuk keperluan demo ini. Library DatePicker tidak di-bundle bersama library jQuery, oleh karena itu kita harus men-download-nya secara terpisah dari alamat berikut ini: http://marcgrabanski.com/pages/code/jquery-ui-datepicker. DatePicker juga bisa didekorasi dengan berbagai macam theme sesuai dengan kebutuhan tampilan dalam layar. Theme DatePicker bisa di-dowload dari alamat berikut ini: http://marcgrabanski.com/resources/uidatepicker/theme-pack.zip. Ikuti langkah-langkah berikut ini untuk bisa menampilkan DatePicker dalam program Hello World kita:
44
1. Setelah kita men-download file-file yang diperlukan, masukkan filefile tersebut ke dalam project Hello World. Masukkan file ui.datepicker.js ke dalam sub-folder jQueryUI dalam folder Scripts. Untuk theme, ekstrak theme-pack.zip, pilih folder smoothness, lalu masukkan ke folder Content. Carilah icon calendar dengannama calendar.gif yang bisa kita search di web, lalu masukkan ke dalam folder Content. Secara keseluruhan susunan folder kita akan tampak seperti Gambar 24.
G AMBAR 24 – S USUNAN F ILE
DAN
F OLDER
UNTUK
D ATE P ICKER
2. Buatlah sebuah view bernama DatePicker.aspx. HTML Source dari view ini tampak seperti dalam Listing 22. <%@ Page Title="DatePicker Demo" Language="C#" ... %> <script type="text/javascript" src="/scripts/jquery-1.2.6.js"> <script type="text/javascript" src="/scripts/jQueryUI/ui.datepicker.js"> <script language="javascript" type="text/javascript"> $(document).ready(function(){
Perhatikan dalam Listing 22 bahwa kita melakukan “chaining” fungsi datepicker() ke dalam selector $(“#date”). Dengan cara demikian behavior JavaScript dari fungsi datepicker() ini akan ditempelkan atau ditambahkan ke dalam elemen HTML dengan id bernama date. Kita bisa menentukan nilai dari beberapa properti pada saat mendeklarasikan DatePicker. DatePicker bergantung kepada library jQuery, oleh karena itu kita masih tetap perlu menambahkan referensi terhadap file library dari jQuery ini agar program bisa berjalan dengan benar. 3. Di sisi Controller, kita hanya menambahkan satu action-method sederhana yang berfungsi memanggil View DatePicker.aspx, seperti terlihat dalam Listing 23. public ActionResult DatePicker() { return View(); } L ISTING 23 – A CTION -M ETHOD D ATE P ICKER ()
4. Seperti dalam demo tentang AJAX, kita akan menggunakan Firefox untuk melihat hasil yang ditampilkan oleh view DatePicker ini. Buka Firefox dan arahkan ke /home/datepicker. Hasilnya akan terlihat seperti dalam Gambar 25.
46
G AMBAR 25 – T AMPILAN D ATE P ICKER
DALAM
B ROWSER F IREFOX
47
ASP.NET MVC
DAN
TDD
TDD atau Test Driven Development adalah suatu disiplin proses pembuatan software yang bersifat iteratif berdasarkan skenario testing yang telah dibuat sebelum penulisan source-code software dilakukan. Konsep kunci dalam TDD adalah adanya test yang telah dibuat terlebih dahulu sebelum sebuah fungsi dalam program dibuat. Keberadaan fungsi atau modul dalam program harus dibenarkan oleh adanya test yang dibuat berdasarkan suatu skenario. Visual Studio 2008 menawarkan fitur-fitur untuk testing, khusus untuk edisi-edisi tertentu. Kita bisa menggunakan Visual Studio 2008 dengan fitur testing untuk melakukan test yang terotomatisasi. Namun sebagai pilihan lain, kita juga bisa menggunakan framework testing terpisah seperti nUnit. Dengan tool yang ada kita bisa melakukan pendekatan TDD terhadap program-program yang kita tulis. ASP.NET MVC adalah framework yang dirancang untuk mudah digunakan dengan TDD. Hal ini didukung oleh arsitektur dasar MVC sendiri yang melakukan pembagian tugas yang jelas antara Model, View, dan Controller. Setiap unit, baik itu Model, View, maupun Controller bisa ditest sebagai unit terpisah dan berfokus kepada tanggung jawab dan pekerjaan masing-masing. Framework ASP.NET MVC sendiri telah dirancang agar mudah digunakan dengan objek mock yang diperlukan dalam unit testing tertentu. Mock adalah objek-objek yang sengaja diciptakan untuk meniru objek yang sesungguhnya, namun jauh lebih sederhana dan bisa dikondisikan dengan konteks test unit tertentu. Objek-objek yang sering di-mock dalam sebuah program web diantaranya adalah HTTP Context, HTTP Request, dan HTTP Response. Kita akan mendemokan bagaimana melakukan test unit terhadap program ASP.NET MVC yang sederhana. Mungkin demo ini tidak cukup untuk menggambarkan ASP.NET MVC dalam konteks proses pengembangan program yang menganut metodologi TDD, namun bisa mewakili salah satu aktifitas penting dalam TDD yaitu unit-testing.
48
Kita akan menggunakan library Moq untuk keperluan pembuatan mocking terhadap objek. Library Moq versi 2.6.1 bisa di-download dari alamat berikut ini: http://moq.googlecode.com/files/Moq.2.6.1014.1bin.zip. Setelah di-download, ekstrak assembly Moq.dll lalu masukkan sebagai referensi lokal dalam project test dari solusi HelloWorld.sln kita. Ikuti langkah-langkah berikut ini untuk mendemokan unit-testing dalam ASP.NET MVC: 1. Buka solusi HelloWorld.sln, lalu tambahkan View dengan nama TddDemo.aspx. View ini akan menggunakan class Product sebagai Model yang sudah pernah kita tambahkan sebelumnya. HTML source dan code-behind dari View ini bisa dilihat dalam Listing 24 dan Listing 25. <%@ Page Title="TDD Demo" ... %>
Product Details
Product Id: <%= ViewData.Model.Id %> Name: <%= ViewData.Model.Name %> Unit Price: <%= ViewData.Model.UnitPrice %> Description: <%= ViewData.Model.Description %> L ISTING 24 – HTML S OURCE V IEW T DD D EMO . ASPX public partial class TddDemo : ViewPage { } L ISTING 25 – C ODE -B EHIND V IEW T DD D EMO . ASPX
View ini akan menampilkan detail dari produk yang diberikan oleh Controller dalam action-method TddDemo(). Perhatikan bahwa View ini memiliki Model yang strongly-typed, yaitu Product. 2. Dalam HomeController, buatlah sebuah action-method baru bernama TddDemo(), seperti terlihat dalam Listing 26. public ActionResult TddDemo() { var product = new Product { Id = 1,
49
Name = "Ice Cream", UnitPrice = 1.2m, Description = "Delicious ice cream" }; return View(product); } L ISTING 26 – A CTION -M ETHOD T DD D EMO ()
Yang dilakukan oleh action-method TddDemo() ini cukup sederhana, yaitu menginisialisasi sebuah objek dari class Product, kemudian memberikannya kepada View TddDemo. 3. Dalam Solution Explorer klik kanan pada nama solusi-nya untuk memunculkan dialog menambahkan project baru seperti terlihat dalam Gambar 26. Pilih template Test Project, lalu ubah nama project-nya menjadi TestProject. Kemudian klik tombol OK. Visual Studio 2008 secara otomatis akan membuatkan test project yang menjadi bagian dari solusi HelloWorld.sln. Dalam test project yang baru saja di-generate terdapat beberapa file yang dibuat secara otomatis untuk keperluan test manual. Kita tidak akan menggunakan test manual saat ini, oleh karena itu hapuslah file ManualTest dari TestProject.
G AMBAR 26 – K OTAK D IALOG T EST P ROJECT
4. Tambahkan referensi terhadap assembly Moq.dll yang sudah kita download sebelumnya ke dalam TestProject. Lalu ubah nama 50
UnitTest1.cs menjadi UnitTest.cs. Di dalam UnitTest.cs, tambahkan method static FakeHttpContext() seperti terlihat dalam Listing 27. Jangan lupa untuk menambahkan using Moq dalam source code. public static HttpContextBase FakeHttpContext() { var context = new Mock(); var request = new Mock(); var response = new Mock(); var session = new Mock(); var server = new Mock(); context.Expect(ctx => ctx.Request) .Returns(request.Object); context.Expect(ctx => ctx.Response) .Returns(response.Object); context.Expect(ctx => ctx.Session) .Returns(session.Object); context.Expect(ctx => ctx.Server) .Returns(server.Object); response.Expect(r => r.StatusCode).Returns(0); response.Expect(r => r.Output) .Returns(new StringWriter()); return context.Object; } L ISTING 27 – M ETHOD F AKE H TTP C ONTEXT ()
Method FakeHttpContext() menggunakan library Moq untuk membuat objek-objek tiruan atau mock dari HTTP Context, HTTP Request, HTTP Response, HTTP Session, dan HTTP Server Utility. Setiap objek mempunyai implementasi default yang sudah dibuatkan oleh library Moq. 5. Tambahkan dua variable private dalam class UnitTest bernama controller dan actionResult. Kemudian di dalam constructor dari class UnitTest, buatlah sebuah instance dari FakeHttpContext dan HomeController. Perhatikan Listing 28 yang memperlihatkan bagaimana kita melakukan hal ini. private HomeController controller; private ActionResult actionResult; public UnitTest() { var fakeContext = FakeHttpContext(); controller = new HomeController(); Assert.IsNotNull(controller); controller.ControllerContext =
51
new ControllerContext(fakeContext, new RouteData(), controller); actionResult = controller.TddDemo(); Assert.IsNotNull(actionResult); } L ISTING 28 – C ONSTRUCTOR U NIT T EST ()
Di dalam constructor, kita memanggil action-method TddDemo() secara ekplisit dengan memberikan ControllerContext yang sengaja kita buat dengan fakeHttpContext dan data routing kosong. Ketiadaan data routing di sini tidak menjadi masalah karena fokus test-nya sendiri ada pada Controller, View, dan Model. 6. Buatlah sebuah test-method untuk melakukan pengecekan terhadap hasil dari pemanggilan action-method TddDemo(), seperti terlihat dalam Listing 29. [TestMethod] public void Controller_Test() { Assert.IsInstanceOfType(actionResult, typeof(ViewResult)); Assert.IsInstanceOfType(controller.ViewData.Model, typeof(Product)); } L ISTING 29 – T EST T ERHADAP T DD D EMO ()
Dalam Listing 29 kita melakukan pengecekan apakah tipe data dari actionResult sama dengan ViewResult. Hal ini karena actionresult TddDemo() seharusnya berupa ViewResult. Selain itu, kita juga melakukan pengecekan terhadap tipe data Model yang di-assign ke dalam variable controller.ViewData.Model yang seharusnya bertipe Product. 7. Buatlah sebuah test-method untuk melakukan pengecekan terhadap model, seperti terlihat dalam Listing 30. [TestMethod] public void Model_Test() { var model = controller.ViewData.Model as Product; Assert.IsNotNull(model); Assert.AreEqual(1, model.Id); } L ISTING 30 – T EST T ERHADAP M ODEL
52
Di sini kita bisa melakukan asersi terhadap nilai properti-properti dari Model. 8. Untuk melakukan test terhadap View, kita buat implementasi View sederhana yang akan mensubstitusi View default ASP.NET. Dalam unit testing kita tidak memerlukan View yang benar-benar melakukan rendering ke dalam output karena kita akan kesulitan melakukan asersi terhadap tampilan. Yang dilakukan dalam View substitusi adalah memberikan nilai yang kita harapkan, sehingga kita bisa melakukan asersi terhadap nilai ini. Listing 31 menunjukkan definisi dari class TestView. class TestView : IView { public void Render(ViewContext viewContext, TextWriter writer) { Mock.Get(viewContext.HttpContext.Response) .Expect(r => r.StatusCode).Returns(200); } } L ISTING 31 - T EST V IEW
Yang kita lakukan dalam TestView adalah memberikan StatusCode 200 kepada FakeHttpContext yang bisa kita pakai dalam asersi nanti. 9. Buatlah sebuah test-method untuk melakukan pengecekan terhadap View, seperti terlihat dalam Listing 32. Pengecekan yang dilakukan sederhana saja, yaitu dengan membandingkan StatusCode dari objek Response dengan 200. [TestMethod] public void View_Test() { var viewResult = actionResult as ViewResult; viewResult.View = new TestView(); viewResult.ViewName = "TddDemo"; viewResult.ExecuteResult(controller.ControllerContext); Assert.AreEqual(200, controller.Response.StatusCode); } L ISTING 32 – P ENGECEKAN T ERHADAP V IEW
53
10. Kita jalankan semua test-method yang sudah kita definisikan di atas dalam Visual Studio 2008. Jika hasilnya sukses, test-result akan terlihat seperti dalam Gambar 27.
G AMBAR 27 – H ASIL T EST
DALAM
V ISUAL S TUDIO 2008
Seperti kita lihat dalam demo di atas, ASP.NET MVC memudahkan kita untuk melakukan unit-testing. Pembagian tugas dan tanggung jawab yang jelas antar komponen MVC memungkinkan kita melakukan test terhadap masing-masing komponen. Hal ini mendukung pengembangan software dengan metodologi TDD.
54
MVCC ONTRIB MVCContrib adalah project open source yang menambahkan beberapa fitur dan ekstensi ke dalam ASP.NET MVC. Fitur-fitur tambahan ini misalnya beberapa method helper untuk memudahkan pengolahan form, mekanisme dependency injection, sub-controller, view engine tambahan, dan lain-lain. Dari semua hal yang terdapat dalam project MVCContrib kita akan menyinggung dua hal saja yaitu method helper untuk membuat Grid, dan mencoba salah satu view engine yang ditawarkan MVCContrib yaitu SparkViewEngine. Fitur-fitur lain bisa dicoba sendiri dengan cara mendownload source code-nya yang menyediakan sample-sample yang bisa dijadikan acuan.
GRID Grid adalah suatu komponen user-interface (UI) yang menyajikan informasi dalam bentuk tabular, lengkap dengan kemampuan editing dan paging. Grid termasuk komponen yang sudah pasti dibutuhkan oleh developer yang mengerjakan program LOB (Line-of-Business). ASP.NET sudah menyediakan GridView dalam Web Form, dan telah menjadi salah satu komponen yang banyak dipakai. ASP.NET MVC saat ini belum memiliki komponen semacam GridView yang tersedia out-of-the-box dan tinggal dipakai oleh developer. Filosofi ASP.NET MVC saat ini masih memilih pendekatan yang tidak menambahkan terlalu banyak abstraksi di atas model pemrograman web yang stateless. Sehingga model programming komponen seperti yang ada dalam Web Form masih belum kita jumpai dalam ASP.NET MVC. Grid dalam MVCContrib adalah sebuah fungsi helper yang cara penggunaannya mirip dengan fungsi helper HTML lain dalam library ASP.NET MVC. Kita akan mendemokan penggunaannya dalam program Hello World. Ikuti langkah-langkah berikut ini: 1. Download binary MvcContrib dari alamat berikut ini: http://www.codeplex.com/MVCContrib/Release/ProjectReleases.aspx ?ReleaseId=18695. Ekstrak binary MvcContrib.dll dari file yang di55
download, lalu masukkan dalam project Hello World sebagai referensi lokal. 2. Buka solusi HelloWorld.sln, lalu tambahkan View dengan nama TddDemo.aspx. View ini akan menggunakan class Product sebagai model yang sudah pernah kita tambahkan sebelumnya. HTML source dan code-behind dari view ini bisa dilihat dalam Listing 33 dan Listing 34. <%@ Page Title="Grid Demo" ... %> <%@ Import Namespace="HelloWorld.Models"%> <%@ Import Namespace="MvcContrib.UI.Html.Grid" %> <% Html.Grid(ViewData.Model, column => { column.For(p => p.Id); column.For(p => p.Name); column.For(p => p.UnitPrice); column.For(p => p.Description); }); %> L ISTING 33 – HTML S OURCE G RID D EMO . ASPX public partial class GridDemo : ViewPage> { } L ISTING 34 – C ODE -B EHIND G RID D EMO . ASPX
3. Dalam HomeController, tambahkan action-method bernama GridDemo(). Action method ini akan menginisialisasi sebuah list dari dua produk yang sengaja ditambahkan secara hard-coded. Listing 35 menunjukkan source code dari action-method GridDemo(). public ActionResult GridDemo() { var products = new List { new Product { Id = 1, Name = "Ice cream", UnitPrice = 1000m, Description = "Delicious ice cream" }, new Product { Id = 2, Name = "Hotdog", UnitPrice = 1200m, Description = "Special hotdog" },
56
new Product { Id = 3, Name = "Noodle", UnitPrice = 100m, Description = "Spicy noodle" }, new Product { Id = 4, Name = "Ribs", UnitPrice = 1800m, Description = "Baked ribs" }, new Product { Id = 5, Name = "Sozis", UnitPrice = 700m, Description = "Creamy sozis" }, }; return View(products); } L ISTING 35 – A CTION - METHOD G RID D EMO ()
4. Jalankan program Hello World, lalu arahkan browser ke /home/griddemo, hasilnya akan terlihat seperti dalam Gambar 28.
G AMBAR 28 – G RID D EMO
DALAM I NTERNET
E XPLORER
57
SPARKVIEWENGINE Arsitektur ASP.NET MVC memberikan pemisahan tanggung jawab yang jelas antara Model, View, dan Controller. Masing-masing komponen bisa menggunakan mekanisme sendiri atau framework yang sudah ada selama interface-nya bisa bekerja sama dengan ASP.NET MVC. Salah satu pengembangan yang ada di area View adalah View Engine. View Engine memungkinkan View untuk menggunakan mekanisme template-engine yang berbeda-beda, sesuai dengan dialek dan spesifikasi masingmasing. ASP.NET MVC di-bundle dengan View Engine default yaitu WebFormViewEngine. View Engine ini menggunakan mekanisme template yang sama dengan page yang dikenal dalam Web Form, sehingga sintaks, notasi, mekanisme code-behind, page master dan content sama dengan apa yang biasa digunakan dalam page ASPX dalam Web Form. MVCContrib datang dengan berbagai jenis View Engine lain yang bisa digunakan selain WebFormViewEngine. Berikut ini daftar View Engine yang di-bundle dalam project MVCContrib yang bisa kita gunakan dalam project-project ASP.NET MVC: •
BrailViewEngine Sebelumnya terkenal dalam dunia Ruby on Rails, dan secara original merupakan bagian dari project Castle Monorail.
•
NHamlViewEngine Sama seperti BrailViewEngine, NHamlViewEngine berasal dari project Castle Monorail yang bernama Haml, yang kemudian diporting ke .NET sebagai View Engine ASP.NET MVC dengan menambahkan prefiks N di depan namanya.
•
NVelocityViewFactory NVelocityViewFactory adalah hasil porting dari Velocity view factory dalam project Castle Monorail.
•
SparkViewEngine View Engine lain yang dirancang untuk bisa bekerja dengan ASP.NET MVC dan Ruby on Rails.
58
•
XsltViewEngine View Engine sederhana yang melakukan transformasi XML dengan XSLT menjadi HTML.
Kalau kita lihat banyak di antara View Engine yang di-bundle dalam MVCContrib berasal dari project Castle Monorail. Hal ini tidak mengherankan karena salah satu bagian dari project Castle Monorail adalah framework MVC yang diterapkan dalam bahasa Ruby, yang dinamakan dengan Ruby on Rails. Framework ini sudah lebih dahulu populer dibandingkan dengan ASP.NET MVC sehingga sudah banyak View Engine yang dibuat di atasnya. Kita akan melakukan demo untuk menggunakan SparkViewEngine dalam project ASP.NET MVC. Ikuti langkah-langkah berikut ini untuk melakukan demo tersebut. 1. Ekstrak binary Spark.dll, Spark.Web.Mvc.dll, dan MvcContrib.dll dari file yang kita download dari alamat http://www.codeplex.com/MVCContrib/Release/ProjectReleases.aspx ?ReleaseId=18695, lalu masukkan sebagai referensi lokal dari project Hello World. 2. Masukkan setting SparkViewEngine dalam Web.config, seperti terlihat dalam Listing 36. <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/> <spark> <pages> L ISTING 36 – S ETTING W EB . CONFIG
UNTUK
S PARK V IEW E NGINE
59
3. Buatlah sebuah View bernama SparkDemo.spark. Visual Studio 2008 tidak memiliki template untuk file-file dengan ekstensi spark, oleh karena itu pertama kali tambahkan sebagai file HTML biasa, kemudian ganti nama menjadi SparkDemo.spark. Perhatikan bahwa Visual Studio 2008 pun akan kehilangan fitur multi warna dan intellisensenya pada file-file yang tidak didukung secara native. Spark Demo
Product Id: ${(ViewData.Model as Product).Id}
Product Name: ${(ViewData.Model as Product).Name}
L ISTING 37 – V IEW S PARK D EMO . SPARK
Yang dilakukan dalam View SparkDemo.spark adalah menampilkan Id dan Nama dari produk yang diberikan oleh Controller sebagai Model. Perhatikan bahwa dalam SparkViewEngine, kita tidak lagi menggunakan notasi <% dan %> untuk menandai satu blok sebagai server-side, melainkan menggunakan notasi ${}. 4. Di dalam HomeController, buatlah action-method baru yang bernama SparkDemo() seperti terlihat dalam Listing 38. public ActionResult SparkDemo() { var product = new Product { Id = 1, Name = "Ice cream", UnitPrice = 1000m, Description = "Delicious ice cream" }; return View(product); } L ISTING 38 – A CTION -M ETHOD S PARK D EMO ()
60
Yang dilakukan dalam action-method SparkDemo() juga sederhana, yaitu menginisialisasi sebuah objek Product, kemudian memberikannya kepada View untuk ditampilkan. 5. Sebagai langkah terakhir, jangan lupa untuk memberitahu ASP.NET MVC bahwa program kita menggunakan SparkViewEngine. Langkah ini bisa dilakukan dalam Global.asax, dalam method Application_Start(), seperti terlihat dalam Listing 39. protected void Application_Start() { RegisterRoutes(RouteTable.Routes); ViewEngines.Engines.Add(new SparkViewFactory()); } L ISTING 39 – R EGISTRASI S PARK V IEW E NGINE
6. Jalankan program Hello World, lalu arahkan browser ke alamat /home/SparkDemo. Hasil dari demo SparkViewEngine kita akan terlihat seperti dalam Gambar 29.
G AMBAR 29 – S PARK D EMO V IEW
DALAM I NTERNET
E XPLORER
61
D EPLOYMENT Sejauh ini kita menjalankan semua demo dalam solusi HelloWorld.sln hanya dengan ASP.NET Development Server bawaan Visual Studio 2008 yang akan otomatis dipanggil apabila kita menjalankan solusi kita dari Visual Studio 2008. Nah, aplikasi yang akan dijalankan untuk melayani pelanggan dalam dunia nyata pasti akan dijalankan di atas web server kelas produksi, bukan kelas development. Untuk ASP.NET MVC, kita punya pilihan untuk melakukan deployment ke web server IIS. Berkaitan dengan deployment ASP.NET MVC, kita juga perlu menyinggung fitur baru dari .NET Framework 3.5 SP1 yaitu modul Routing. Salah satu kelebihan modul Routing adalah kemampuannya dalam menangani request-path tanpa ekstensi. Sebelumnya kita telah terbiasa memanggil file-file yang ber-ekstensi ASPX sebagai bagian dari request-path. Dengan penerapan modul Routing, ekstensi ASPX maupun ektensi lainnya bukanlah sesuatu yang harus ada dalam sebuah requestpath. Kemampuan untuk menangani request-path tanpa ekstensi dalam modul Routing mengharuskan sebuah request ditangani oleh engine ASP.NET. Apabila IIS tidak dapat menentukan bahwa sebuah request harus ditangani oleh engine ASP.NET maka IIS akan mencoba menangani request tersebut. Nah, kalau ternyata IIS sendiri ternyata tidak dapat menangani request tersebut maka IIS akan memberikan kode status 404 kepada user-agent, yang berarti resource yang diminta oleh request tersebut tidak dapat ditemukan di dalam web server. Hal ini menimbulkan masalah yang perlu kita perhatikan pada saat mencoba melakukan deployment sebuah program web ASP.NET MVC ke dalam IIS, terutama untuk IIS 6, dan IIS 7 classic mode yang memerlukan setting khusus apabila hendak dibuat untuk bisa mengenali request-path tanpa ekstensi. Kita akan membahas masalah deployment ini ke dalam tiga bagian besar. Yang pertama adalah deployment IIS 6, dan IIS 7 classic mode yang akan diwakili dengan pembahasan deployment ke IIS 6 pada Windows Server 2003. Sedangkan yang kedua adalah deployment ke IIS 7 integrated 62
mode. Terakhir adalah melakukan deployment terhadap IIS 6 agar bisa mengenali request-path tanpa ekstensi.
DEPLOYMENT
KE
IIS 6
IIS 6 berjalan di atas sistem operasi Windows Server 2003. Dengan setting-an default, IIS 6 tidak mengenali request-path tanpa ekstensi. Kita akan melakukan dua tipe deployment program ASP.NET MVC ke IIS 6, yaitu deployment dengan konfigurasi ekstensi ASPX/MVC, dan deployment konfigurasi tanpa ekstensi. Bagian ini akan membahas yang pertama. Dalam deployment dengan konfigurasi pertama, kita akan memakai ekstensi MVC untuk menandai request-path yang akan ditangani oleh program web kita. Sebenarnya kita bisa menggunakan ekstensi apa saja, termasuk ekstensi ASPX. Namun untuk keperluan ini kita menggunakan ekstensi MVC agar sekaligus bisa didemokan setting-an apa yang diperlukan ditambahkan di IIS. Terlebih dahulu buatlah sebuah virtual directory bernama HelloWorld di bawah website root.
G AMBAR 30 – V IRTUAL D IRECTORY H ELLO W ORLD
Klik kanan pada virtual directory HelloWorld untuk memunculkan properties-nya. Kemudian, dalam tab Virtual Directory klik tombol Configuration. 63
G AMBAR 31 – A PPLICATION C ONFIGURATION
Klik tombol Add untuk menambahkan ekstensi baru. Kemudian kotak dialog dalam Gambar 32 akan ditampilkan.
G AMBAR 32 – K OTAK D IALOG A DD /E DIT A PPLICATION E XTENSION M APPING
64
Masukkan path terhadap dll ASP.NET ISAPI ke dalam textbox Executable. Letak file ini tergantung konfigurasi pada saat instalasi Windows dan .NET Framework 2. Dalam demo ini, letak file tersebut ada dalam folder: C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi. dll. Masukkan MVC ke dalam textbox Extension. Jangan lupa untuk meng-uncheck checkbox “Verify that file exists”. Hal ini penting karena dalam MVC sistem tidak akan melakukan pengecekan terhadap file secara fisik. Oke, kita sudah selesai melakukan konfigurasi dari sisi IIS. Sekarang kita perlu mengubah konfigurasi routing dalam program HelloWorld kita agar memberikan tambahan ekstensi MVC ke dalam setiap Controller. Buka Global.asax.cs, lalu edit definisi routing dalam method RegisterRoutes() seperti terlihat dalam Listing 40. public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", "{controller}.mvc/{action}/{id}", new { controller = "Home", action = "Index", id = "" } ); routes.MapRoute( "Default.aspx", "", new { controller = "Home", action = "Index", id = "" } ); } L ISTING 40 – P ENAMBAHAN .MVC
DALAM
R OUTING
Yang kita lakukan dalam Listing 40 adalah menambahkan literal .mvc pada entri route “Default”. Kita juga perlu menambahkan entri baru yaitu “Default.aspx” untuk mencocokkan request-path kosong untuk meng-handle request / (home). Hal ini karena entri route “Default” telah ditambahkan literal sehinggal tidak bisa mencocokkan request-path kosong. Selanjutnya bukalah file Default.aspx.cs, lalu edit baris pertama pada method Page_Load() sehingga menjadi seperti terlihat dalam Listing 41. Langkah ini diperlukan untuk mencegah kesalahan referensi pada file CSS saat runtime sehingga view bisa di-render dengan benar. 65
HttpContext.Current.RewritePath(Request.ApplicationPath, false); L ISTING 41 – R EWRITE P ATH
DALAM
D EFAULT . ASPX . CS
Gambar 33 dan Gambar 34 menunjukkan hasil pemanggilan requestpath /helloworld/home.mvc/index, & /helloworld/home.mvc/about.
G AMBAR 33 - / HELLOWORLD / HOME . MVC / INDEX
G AMBAR 34 - / HELLOWORLD / HOME . MVC / ABOUT
66
DEPLOYMENT
KE
IIS 7 I N T E G R A T E D M O D E
Deployment ke IIS 7 Integrated mode relatif lebih mudah dibandingkan dengan deployment ke IIS 6. Kita tidak perlu mengubah definisi routing maupun melakukan setting terhadap IIS. Cukup lakukan perubahan terhadap Default.aspx.cs seperti terlihat dalam Listing 41 di atas. Langkah ini tetap diperlukan karena hal ini merupakan salah satu bug yang terdapat dalam ASP.NET MVC versi Beta. Diharapkan bug ini akan segera dibetulkan pada rilis pertama ASP.NET MVC. Langkah pertama adalah membuat Virtual Directory HelloWorld. Gambar 35 menunjukkan properties untuk HelloWorld.
G AMBAR 35 – V IRTUAL D IRECTORY H ELLO W ORLD
DI
IIS 7
Perhatikan bahwa application pool yang dipakai adalah DefaultAppPool. Hal ini penting karena behavior masing-masing application pool berbeda sehingga kita perlu memilih application pool yang tepat. Apabila kita memilih application pool Classic .NET AppPool berarti kita melakukan konfigurasi terhadap IIS 7 classic mode yang behavior-nya dalam konteks ini sama dengan behavior IIS 6. Kemudian lakukan deployment seperti biasa. Lalu jalankan solusi HelloWorld dalam Internet Explorer. Gambar 36 dan Gambar 37 menunjukkan hasil terhadap pemanggilan request-path /helloworld/home/index dan /helloworld/home/about. 67
G AMBAR 36 – / HELLOWORLD / HOME / INDEX
G AMBAR 37 - / HELLOWORLD / HOME / ABOUT
K O N F I G U R A S I IIS 6
UNTUK
R E Q U E S T -P A T H T A N P A E K S T E N S I
IIS 6 bisa dikonfigurasi untuk bisa mengenali request-path tanpa ekstensi. Terdapat beberapa cara yang bisa dilakukan untuk melakukan hal ini, tetapi di sini kita akan membahas konfigurasi dengan 68
menggunakan wilcard mapping. Cara ini bekerja dengan membuat semua web request ditangani oleh engine ASP.NET, termasuk request-request terhadap file static (HTML, JPG, CSS, JavaScript). Salah satu kelemahan cara ini adalah pengaruhnya terhadap performa aplikasi karena adanya overhead dari pemrosesan oleh engine ASP.NET untuk file-file statik. Kita mulai melakukan konfigurasi wildcard mapping dalam IIS 6. Pertama, buatlah sebuah virtual directory baru bernama HelloWorld2. Kemudian klik kanan untuk melihat properties-nya. Pada tab Virtual Directory, klik tombol “Configuration” untuk menampilkan dialog box seperti dalam Gambar 38.
G AMBAR 38 – A PPLICATION C ONFIGURATION P ADA IIS 6
Klik tombol Insert seperti untuk menambahkan Application Extension Mapping seperti terlihat dalam Gambar 39.
69
G AMBAR 39 – A DD /E DIT A PPLICATION E XTENSION M APPING
Masukkan path terhadap dll ASP.NET ISAPI ke dalam textbox Executable. Letak file ini tergantung konfigurasi pada saat instalasi Windows dan .NET Framework 2. Dalam demo ini, letak file tersebut ada dalam folder: C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi. dll. Jangan lupa untuk meng-uncheck checkbox “Verify that file exists”. Kemudian lakukan publishing project HelloWorld dari Visual Studio 2008 ke dalam virtual directory HelloWorld2 ini. Dan program HelloWorld2 pun sudah bisa diakses dari Internet Explorer seperti dalam Gambar 40.
G AMBAR 40 – H ELLO W ORLD 2
70
P ENUTUP ASP.NET MVC adalah implementasi arsitektur MVC pada lingkungan pemrograman web ASP.NET. ASP.NET MVC memberikan pilihan kepada developer ASP.NET selain model pemrograman yang sudah ada yaitu Web Form. e-Book ini telah memberikan pemaparan tentang arsitektur MVC, implementasi arsitektur MVC pada ASP.NET, penjelasan masing-masing komponen MVC dimulai dari Controller, View, sampai dengan Model. Tidak ketinggalan pembahasan tentang AJAX dan jQuery dalam konteks ASP.NET MVC juga mendominasi beberapa bab. Demo yang disertakan dalam e-book ini sengaja penulis buat mudah dan sederhana agar konsep dasarnya bisa disampaikan dengan singkat dan mudah. Apabila ada pertanyaan, saran, koreksi, feedback, maupun tanggapan, silakan kontak pengarang melalui media-media berikut ini: 1. Website: http://suhanto.com 2. Suhanto @geeks: http://geeks.netindonesia.net/blog/suhanto 3. ASP.NET MVC geeks forum: http://geeks.netindonesia.net/forums/11107.aspx 4. Email: [email protected] 5. Facebook: http://www.facebook.com/people/Agus_Suhanto/1055552821
71
T ENTANG P ENGARANG Agus Suhanto menekuni dunia komputer terutama pengembangan aplikasi web sekaligus sebagai hobi dan pekerjaan sehari-hari. Lulus dari Teknik Informatika Institut Teknologi Bandung pada tahun 2000, Agus langsung terjun ke dunia industri mengembangkan berbagai sistem web dalam dunia bisnis. Pengetahuan dan keterampilan IT-nya ditunjang oleh pengalaman mengembangkan berbagai sistem web dalam perusahaan yang memiliki karyawan sampai belasan ribu dengan lokasi yang tersebar di seluruh dunia. Mulai tertarik kepada arsitektur MVC dan implementasinya dalam ASP.NET MVC sejak kemunculan ASP.NET MVC Preview 3. Ketertarikan ini membawa Agus pada keikutsertaannya dalam forum global tentang ASP.NET MVC yang akhirnya dibawa dalam forum geeks.netindonesia.net. Keaktifan di geeks juga membuat Agus menulis banyak posting tentang ASP.NET MVC dalam geeks blog. Berawal dari posting berseri di geeks blog inilah Agus kemudian membawa ide untuk menulis e-book tentang ASP.NET MVC kepada rekan-rekan geeks community leaders. Ibarat gayung bersambut, ide ini didukung sepenuhnya oleh geeks community leaders, sehingga jadilah buku tentang ASP.NET MVC yang berjudul “Mengenal ASP.NET MVC”. Menulis juga sudah merupakan salah satu hobi baru Agus sehingga ke depannya diharapkan akan muncul beberapa e-book baru tentang pengembangan sistem web maupun dunia IT pada umumnya.
