Mengenal ASP - NET MVC - Edisi Beta PDF

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.
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.
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
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.
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.
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
{
{
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>.
{
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" %>
<asp:Content ID="indexContent"
ContentPlaceHolderID="MainContent"
runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
</asp:Content>
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<T>, 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.
<div id="header">
<div id="title">
<h1>My Sample MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LoginUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index",
"Home")%></li>
<li><%= Html.ActionLink("About Us", "About",
"Home")%></li>
</ul>
</div>
</div>
L ISTING 8 M ELAKUKAN R ENDERING P ARTIAL V IEW
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.
<p>
Name: <%= Html.TextBox("name") %>
</p>
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<Product> 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<Product>
{
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<List<Product>> 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
... %>
<asp:Content ID="productsContent"
runat="server">
<h2><%= Html.Encode(ViewData["Title"]) %></h2>
<table border="1">
<thead>
<td>Id</td>
<td>Name</td>
<td>Unit Price</td>
<td>Description</td>
</thead>
<% foreach (var product in ViewData.Model) { %>
<tr>
<td><%= product.Id %></td>
<td><%= product.Name %></td>
<td><%= product.UnitPrice %></td>
<td><%= product.Description %></td>
</tr>
<% } %>
</table>
</asp:Content>
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<List<Product>>
{
}
}
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
Method Helper
<%= Html.TextBox("myTextBox") %>
<%= Html.CheckBox("myCheckBox") %>
<%= Html.RadioButton("myRadioButton", 1) %>
<%= Html.DropDownList("myDropDownList", new
SelectList(new List<string> {"One", "Two"})) %>
<%= Html.ListBox("myListBox", new
SelectList(new List<string> {"satu", "dua"}))
%>
<%= Html.TextArea("myTextArea") %>
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"
... %>
<asp:Content ID="employeesContent"
runat="server">
<form method="post" action="/home/employeeform">
<div class="flabel">Name</div>
<div class="fcontent">
<%= Html.TextBox("name",
string.Empty,
new Dictionary<string, object>
{
{ "size", "25"}
}) %>
</div>
<div class="flabel">Gender</div>
<%= Html.RadioButton("gender", "male") %> male
31
<%= Html.RadioButton("gender", "female") %> female

</div>
<div class="flabel">Hobby</div>
<%= Html.CheckBox("sport") %> sport
<%= Html.CheckBox("reading") %> reading
<%= Html.CheckBox("movies") %> movies
</div>
<div class="flabel" style="padding-top:10px">
<input type="submit" value="submit" />
</div>
</form>
</asp:Content>
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#"
... %>
<asp:Content ID="ajaxDemoContent"
runat="server">
<script language="javascript"
src="../../Scripts/MicrosoftAjax.js"
type="text/javascript"></script>
<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();
}
</script>
Enter a number (1-5):
<input type="text" id="random" size="2"/>
<br /><input type="button" onclick="getServerData();"
35
value="Get Data" />

<br /><br />
You enter <strong><span id="message">none</span></strong>
</asp:Content>
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.
<asp:Content ID="actCalendarContent"
runat="server">
<script src="../../Scripts/MicrosoftAjax.debug.js"

<script type="text/javascript">
Sys.Application.add_init(appInit);
function appInit() {
$create(AjaxControlToolkit.CalendarBehavior,
null, null, null, $get("date"));
}
</script>
<h2>Calendar Behavior</h2>
40
<p>
<input type="text" id="date" size="10" />
</p>
</asp:Content>
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#" ... %>
<asp:Content ID="jqueryDemoContent"
runat="server">
<script src="../../Scripts/jquery-1.2.6.js"
<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);
});
});
});
</script>
<h2>jQuery Demo</h2>
Enter a number (1-5):
42
<input type="text" id="random" size="2"/>

<br /><input type="button" id="jbutton"
value="Get Data" />
<br /><br />
<div id="messageArea">
You enter <strong><span id="message">none</span></strong>
</div>
</asp:Content>
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 </asp:Content>
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#" ... %>
<asp:Content ID="datePickerContent"
runat="server">
<link href="/content/smoothness/ui.datepicker.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript"
src="/scripts/jQueryUI/ui.datepicker.js">
</script>
<script language="javascript"
type="text/javascript">
$(document).ready(function(){
45
$("#date").datepicker({
showOn: "both",
buttonImage:
"/content/calendar.gif",
buttonImageOnly: true,
duration: "slow"
});
});
</script>
<h2>DatePicker Demo</h2>
<p>
<input type="text" id="date" size="10" />
</p>
</asp:Content>
L ISTING 22 HTML S OURCE D ATE P ICKER . ASPX
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
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" ... %>
<asp:Content ID="tddDemoContent"
runat="server">
<h2>Product Details</h2>
Product Id: <%= ViewData.Model.Id %><br />
Name: <%= ViewData.Model.Name %><br />
Unit Price: <%= ViewData.Model.UnitPrice %><br />
Description: <%= ViewData.Model.Description %><br />
</asp:Content>
L ISTING 24 HTML S OURCE V IEW T DD D EMO . ASPX
public partial class TddDemo : ViewPage<Product>
{
}
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,
};
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<HttpContextBase>();
var request = new Mock<HttpRequestBase>();
var response = new Mock<HttpResponseBase>();
var session = new Mock<HttpSessionStateBase>();
var server = new Mock<HttpServerUtilityBase>();
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.
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.
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" %>
<asp:Content ID="gridDemoContent"
runat="server">
<% 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);
}); %>
</asp:Content>
L ISTING 33 HTML S OURCE G RID D EMO . ASPX
public partial class GridDemo : ViewPage<List<Product>>
{
}
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<Product>
{
new Product
{
Id = 1,
Name = "Ice cream",
UnitPrice = 1000m,
},
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
<configSections>
<section name="spark"
type="Spark.Configuration.SparkSectionHandler,
Spark"/>
</configSections>
<spark>
<compilation debug="true">
<assemblies>
<add assembly="HelloWorld"/>
<add assembly="System.Web.Mvc,
Version=1.0.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
<pages>
<namespaces>
<add namespace="System"/>
<add namespace="System.Web.Mvc"/>
<add namespace="HelloWorld.Models"/>
</namespaces>
</pages>
</spark>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Spark Demo</title>
</head>
<body>
<div>
<p>Product Id:
${(ViewData.Model as Product).Id}
</p>
<p>Product Name:
${(ViewData.Model as Product).Name}
</p>
</div>
</body>
</html>
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,
};
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}",
);
routes.MapRoute(
"Default.aspx",
"",
);
}
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: agus.suhanto@gmail.com
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.
72

Mengenal ASP - NET MVC - Edisi Beta PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mengenal ASP - NET MVC - Edisi Beta PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Pengantar

Jakarta, 11 Desember 2008

G AMBAR 1 D IAGRAM A RSITEKTUR MVC

Interaksi user dengan program digambarkan dengan arah panah besar

sebuah proses bisnis. Sedangkan Controller menerima input dari View,

mengembangkan Model tidak perlu tahu sama sekali bagaimana bentuk

M EMAHAMI ASP.NET MVC

G AMBAR 2 D IAGRAM ASP.NET MVC

Komponen-komponen utama ASP.NET MVC masih sama dengan

dengan .NET Framework 3.5 SP1 ataupun di-install terpisah dengan

Microsoft telah memiliki model pemrograman web yang sudah matang

controller, dimana setiap request

akan di-handle oleh sebuah page

central-controller, dimana setiap

request akan di-handle oleh

Form server-side dalam Web Form

Skenario posting sebuah form

post-back terhadap page itu

secara default akan melakukan

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

stateless dan menjadikan model

menerapkan rich client behavior.

mendukung mekanisme ini.

pun tidak diperlukan lagi.

View-state diperlukan untuk

Web Form menerapkan abstraksi

ASP.NET MVC lebih dekat kepada

mekanisme pemrograman web

seperti yang terdapat dalam ASP

pemrograman web yang native

dibungkus dalam komponen-

klasik, PHP, dan Ruby on Rails.

komponen yang bisa

Developer memiliki keleluasaan

model pemrograman yang bersifat

untuk melakukan sesuatu dalam

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.

Development (TDD), namun dalam

komponennya disamping telah

Keberadaan Web Form yang sudah

Kemunculan ASP.NET MVC yang

komponen, control, tool, dan

banyak komponen, tool, dan sub-

lama menyebabkan banyak