2. Kata Pengantar
Alhamdulillah, puji syukur kepada Allah SWT. sehingga saya bisa menyelesaikan ebook yang
berjudul Panduan Dasar Microsoft WebMatrix dalam waktu yang relatif sangat singkat.
Ebook ini ditulis dengan tujuan untuk memberikan pengetahuan dasar tentang teknologi Microsoft
Web Platform yang ditulis untuk para developer yang sedang belajar membangun situs web.
Di dalam ebook ini dibahas mulai dari instalasi WebMatrix, Membuat situs web berbasis ASP.Net
dan PHP disertai database, sampai pada proses publikasi ke web hosting.
Silakan kirimkan kritik, saran ataupun koreksi tentang konten hingga tata bahasa dalam ebook ini
ke email ciebal745@gmail.com. Semuanya jelas akan saya terima dengan senang hati karena
saya sendiri masih dalam tahap pembelajaran.
Tidak lupa saya sampaikan terimakasih kepada komunitas Microsoft User Group Indonesia (MUGI
| http://mugi.or.id), Windows Server System Indonesia (WSS-ID | http://wss-id.org), .Net Indonesia
(INDC | http://geeks.netindonesia.net), SQL Server User Group Indonesia (SQLServer-Indo |
http://sqlserver-indo.org), Microsoft Student Partner Indonesia (MSP), dan para pembaca yang
sudah merelakan bandwidth-nya untuk mendownload ebook ini serta meluangkan waktu untuk
membacanya.
Bandung, November 2010
Mohamad Iqbal
1
3. Daftar Isi
Kata Pengantar......................................................................................................................................................... 1
Daftar Isi ..................................................................................................................................................................... 2
1. Pendahuluan.................................................................................................................................................. 3
2. Instalasi WebMatrix ..................................................................................................................................... 4
3. Membuat Situs Web dengan WebMatrix ............................................................................................. 7
4. Instalasi ASP.NET Web Helpers Library .............................................................................................. 12
5. Pengenalan ASP.NET Menggunakan Razor Syntax .......................................................................... 14
6. Bermain dengan Data ............................................................................................................................... 17
7. Menampilkan Data dari Database......................................................................................................... 19
8. Membangun Aplikasi PHP dengan Webmatrix ................................................................................. 21
9. Instalasi Orchard CMS Menggunakan WebMatrix ........................................................................... 28
10. Publikasikan Aplikasi Web ke Web Hosting...................................................................................... 33
11. Penutup......................................................................................................................................................... 37
12. Referensi ....................................................................................................................................................... 38
2
4. 1. Pendahuluan
WebMatrix adalah web development tool gratis dari Microsoft yang menyatukan server web, database,
dan programming frameworks menjadi satu. WebMatrix memungkinkan Anda untuk melakukan
penulisan program, pengujian sampai publikasi.
Versi Beta dirilis pada tanggal 7 Juli 2010. Diversibeta ini WebMatrix memberikan kemudian untuk para
developer dalam belajar membangun situs web dengan ASP.Net Razor Syntax. Dengan dirilisnya
WebMatrix ini terdapat 4 hoster yang tergabung dalam program ini yang memberikan Hosting Gratis
dengan ruang penyimpanan data sebesar 1GB.
Versi beta 2 dirilis pada tanggal 7 Oktober 2010. Pada versi ini WebMatrix menambahkan beberapa
template website dan melalui Microsoft connect para pengguna WebMatrix bisa memberikan feedback
dan laporan bug kepada tim developer WebMatrix.
Versi beta 3 dirilis pada tanggal 9 November 2010. Diversi ini WebMatrix bersama Web Platform
Installer merubah tampilannya dengan menambahkan bebeberapa fitur baru seperti; menambah
template website, Memperbaiki Bug, pengecekan kompatibilitas hoster, Pengaturan database, sampai
menambah kolom pencarian pada web gallery.
Pada ebook ini penulis menggunakan versi beta 2 dan beta 3 karena pada saat ebook akan di terbitkan
versi beta 3 sudah keluar.
3
5. 2. Instalasi WebMatrix
Karena Webmatrix merupakan bagian dari Microsoft Web Platform jadi untuk menginstal
WebMatrix dibutuhkan Web Platform Installer (Web PI) v3, jika sebelumnya anda sudah
menggunakan Web PI v2 silahkan update ke v3, Anda bisa mendownloadnya di
http://go.microsoft.com/fwlink/?LinkID=194638. Jika sudah mendownloadnya, jalankan file
wpilauncher.exe dan pastikan anda terkoneksi internet karena instalasi membutuhkan koneksi
internet. Saya anggap anda sudah menginstal Web PI.
Download WebMatrix disini : http://www.microsoft.com/web/webmatrix/download/, Pada Web
PI akan ada applikasi baru dengan nama Microsoft WebMatrix Beta 3
4
6. Selanjutnya instal WebMatrix dengan meng-klik tombol Add pada Microsoft Webmatrix Beta 3 (pada
saat tulisan ini dibuat WebMatrix sudah mencapai versi beta 3), kemudian klik Install.
Web PI akan menampilkan kebutuhkan aplikasi untuk instalasi Webmatrix, anda tidak perlu
bingung karena semua kebutuhan instalasi akan di tangani Web PI.
5
7. Jika tidak ada masalah, proses download dan instalasi Webmatrix selesai akan menampilkan pesan
“Congratulations! You have successfully installed the following products”. Klik Launch untuk
mulai menggunakan WebMatrix.
6
8. 3. Membuat Situs Web dengan
WebMatrix
Jika sebelumnya anda sudah terbiasa dengan tools atau code editor yang anda gunakan untuk
membangun sebuah halaman web, WebMatrix juga memungkinkan anda untuk membuat halaman
web berbasis asp.net dan php dengan mudah.
Pada bab ini kita coba membuat satu halaman sederhana menggunakan WebMatrix. Sekarang
Jalankan WebMatrix.
Pada halaman Quick Start anda pilih Site From Template. Terdapat beberapa template yang siap
anda gunakan untuk membuat situs web. Seperti :
Empty Site. Template ini dapat anda gunakan apabila anda ingin membuat situs web dari
awal.
Starter Site. Template ini memberikan Anda sebuah situs dengan tata letak yang dirancang
secara profesional dengan sistem login.
Bakery. Template ini dapat Anda gunakan untuk membangun sebuah situs yang berisi
database produk Anda seperti halnya took jual beli.
Link Directory. Template ini dapat anda gunakan untuk membuat situs direktori link
beserta deskripsinya.
Photo Gallery. Template ini dapat Anda gunakan untuk membuat sebuah situs galeri yang
memungkinkan pengguna dapat mengupload dan menampilkan foto dengan system login.
Wishlist. Template ini dapat anda gunakan untuk membuat seuatu planning atau harapan
yang ingin anda capai. Anda bisa membuat daftar produk yang ingin anda beli dan hanya
anda yang tau.
Calender. Template ini dapat anda gunakan untuk membuat sebuah kalender pribadi yang
bisa di sisipi event pada tanggal tertentu.
7
9. Karena kita akan membuat halaman baru maka anda pilih Empty Site dan ubah nama web sesuai
keinginan anda.
Di bagian atas, Anda melihat Quick Access Toolbar dan ribbon, seperti pada Microsoft Office 2010.
Di kiri bawah, terdapat WorkSpace. Di sebelah kanan terdapat konten, yang dapat anda gunakan
untuk mengedit dan melihat file, dsb.
8
10. Untuk membuat halaman baru anda pilih menu Files di WorkSpace, Kemudian klik Add a file to
your Site atau dengan klik New pada toolbar.
WebMatrix menampilkan daftar jenis file. Sebagian besar mungkin akrab dengan ekstenssi file
seperti HTML, CSS, ASP, Javascript, dan lain-lain.
9
11. Pilih CSHTML, dan pada kotak name isi default.cshtml. CSHTML adalah tipe khusus dari halaman
dalam WebMatrix yang dapat anda isi dengan pemrograman web html, javascript dan lain-lain.
Klik OK, WebMatrix akan membuat halaman baru dan membuka sebuah kode editor.
Seperti yang Anda lihat, ini adalah HTML markup. Anda bisa mengubahnya dengan tag HTML biasa.
Pada contoh saya menambahkan beberapa tag html sederhana :
10
12. Kemudian Save dan Run. Maka akan tampil di browser seperti gambar di bawah ini :
11
13. 4. Instalasi ASP.NET
Web Helpers Library
Sekarang anda sudah memiliki sebuat halaman web yang dibuat menggunakan WebMatrix,
sekarang kita coba meng-instal ASP.Net Web Helper Library, Library ini berisi komponen
pembantu yang mempermudah tugas pemrograman ASP.Net nantinya. Anda dapat menemukan
daftar semua helper tersedia di halaman http://bit.ly/dneDeG
Buka halaman default.cshtml yang sudah anda buat pada bagian sebelumnya, kemudian ganti
default.cshtml dengan _admin
Contoh : http://localhost:52839/default.cshtml ubah menjadi http://localhost:52839/_admin
Anda akan dibawa ke halaman yg memungkinkan anda untuk mengelola situs anda. Karena ini
adalah pertama kalinya Anda login ke halaman _Admin, anda akan diminta untuk membuat kata
sandi.
12
14. Setelah anda membuat kata sandi, anda akan masuk ke halaman administrator. Install microsoft-
web-helpers.
Jika anda berhasil meng-instalnya akan ada pesan bahwa paket Microsoft web helpers berhasil di
install. Jika anda ingin meng-uninstalnya anda bisa masuk ke halaman ini kembali.
13
15. 5. Pengenalan ASP.NET Menggunakan
Razor Syntax
Anda sudah berhasil meng-instal ASP.Net Web Helper Library, pada bab ini saya akan memberikan
Anda gambaran pemrograman ASP.NET menggunakan Razor syntax. ASP.NET merupakan
teknologi Microsoft untuk menjalankan halaman web dinamis pada server web.
Kita akan membuat sebuah halaman yang menggunakan kode sederhana untuk waktu dan tanggal.
Contoh di sini akan memperkenalkan kepada anda Razor syntax yang memungkinkan Anda
masukkan kode ke dalam HTML pada Halaman ASP.NET.
Buka default.cshtml dan tambahkan markup berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Belajar Menggunakan WebMatrix</title>
</head>
<body>
<h1>Hello World</h1>
<p>Saya berhasil membuat halaman web dengan WebMatrix</p>
<p>Waktu Menunjukan @DateTime.Now</p>
</body>
</html>
Simpan kemudian jalankan.
14
16. Pada gambar di atas terlihat bahwa @DateTime.Now akan menampilkan waktu saat ini pada
server. Selanjutnya kita sisipkan beberapa baris kode berikut :
@{ var nama = "Iqbal"; }
@{ var umur = 19; }
<p>Nama Saya: @nama </p>
<p>Umur Saya: @umur</p>
Maka akan tampil sebagi berikut :
Misal anda ingin membuat yang lebih kompleks dalam halaman yang anda buat, kita coba membuat
halaman untuk menampilkan list tweet user tertentu.
Anda buat file baru dengan nama twit.cshtml, Kemudian replace dengan kode berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter Feed</title>
</head>
<body>
<h1>Twitter Feed</h1>
<form action="" method="POST">
<div>
Enter the name of another Twitter feed to display:
<input type="text" name="TwitterUser" value=""/>
<input type="submit" value="Submit" />
</div>
<div>
@if (Request["TwitterUser"].IsEmpty()) {
@Twitter.Search("mugi_org")
}
else {
@Twitter.Profile(Request["TwitterUser"])
}
15
17. </div>
</form>
</body>
</html>
Dari kode di atas terdapat baris kode Request["TwitterUser"].IsEmpty dan
@Twitter.Search("mugi_org") yang akan menampikan jika form kosong akan menampilkan twit
dari mugi_org. Misal saya masukan user twitter ciebal, maka semua twit ciebal akan tampil.
16
18. 6. Bermain dengan Data
Tidak hanya membuat halaman web statis, WebMatrix juga dapat membuat sebuah situs dinamis
dengan menggunakan SQL Compaq Edition. Tapi sebagai cacatan, WebMatrix tidak hanya dapat
menggunakan SQL Compaq Edition, tapi juga dapat menggunakan SQL Server dan MySQL.
Kita mulai dengan membuat sebuah database baru.
Klik Databases pada WorkSpace, kemudian klik Add a Database to your site atau New Database
pada Ribbon. Kemudian beri nama database.
17
19. Selanjutnya anda bisa membuat table baru dengan meng-klik tombol New Table pada ribbon. Kita
akan membuat tiga kolom yaitu id, judul, dan tahun. Dengan Primery Key bernilai True adalah id.
Untuk menambah kolom, klik New Coloumn pada ribbon, kemudian ubah nama kolom dengan
merubah di bagian Coloumn Properties. Setelah membuat table, tekan CTRL+S untuk menyimpan
tabel. Kali ini saya memberi nama tabel dengan film.
Selanjutnya kita tambahkan data dengan cara klik icon Data pada ribbon kemudian isi data tabel.
Sekarang kita telah memiliki tabel dengan data film di dalamnya.
18
20. 7. Menampilkan Data dari Database
Anda telah memiliki database dengan data di dalamnya, Anda dapat menampilkan data dalam
sebuah halaman Web ASP.NET. Untuk memilih baris tabel untuk ditampilkan, Anda dapat
menggunakan pernyataan SQL sederhana.
Buat file baru dengan nama film.cshtml, kemudian replace dengan kode berikut ini :
Kemudian Save dan Run. Maka akan tampil sebagai berikut :
19
21. Karena kita sudah membuat kolom Tahun maka kita coba pergunakan untuk memfilter judul film
berdasarkan tahun. Berikut contoh kodenya :
Jika di jalankan maka akan tampil sebagai berikut :
20
22. 8. Membangun Aplikasi PHP dengan
Webmatrix
WebMatrix juga bisa membangun situs web berbasis PHP dengan MySQL sebagai database-nya. Kali
ini kita coba menginstal WordPress karena WordPress merupakan Aplikasi Web popular berbasis
PHP.
Jalankan WebMatrix seperti biasa.
Pada halaman Quick Start, pilih Site From Web Gallery, kemudian masuk kategori blog, dan pilih
WordPress
21
23. Jika sebelumnya anda belum menginstal MySQL anda akan diminta untuk menginstal MySQL
sebagai kebutuhan dari WordPress.
Kemudian tentukan kata sandi untuk MySQL.
22
24. WebMatrix akan menampilkan review kebutuhan software yang dibutuhkan untuk instalasi
WordPress, seperti MySQL dan PHP.
Ketika menekan tombol I Accept, WebMatrix akan mendownload dan menginstal semua kebutuhan
situs web. Kemudian anda diminta untuk mengisi beberapa form informasi databasae.
23
25. Ketika instalasi selesai, WebMatrix akan menampilkan daftar kebutuhan WordPress yang berhasil
di install. Klik OK untuk menutup Wizard Web Galley.
Anda dapat mengelola file WordPress dengan mudah.
24
26. Anda juga dapat mengelola database dengan mudah
Anda juga dapat membuat halaman web berbasis PHP dengan Empty Site. Sama seperti bab
sebelumya, anda buat sebuah situs baru.
25
27. Kemudian buat sebuah file dengan nama index.php
Anda bisa coba masukan beberapa kode php sederhana.
26
29. 9. Instalasi Orchard CMS
Menggunakan WebMatrix
Orchard CMS adalah CMS open source berbasis ASP.Net yang ringan, powerfull, dan mudah
digunakan. Pada Web Gallery, Orchard CMS belum masuk pada list CMS/Blog, namun anda bisa
menambahkannya sendiri dengan menambahkan Feed Orchard pada Web Platform Installer (Web
PI).
Jalankan Web Platform Installer
Pada Web PI, klik Option
28
30. Masukan link feed orchard :
WebPI v2 feed: http://orchardproject.net/webpi/v2/feed.xml
WebPI v3 feed: http://orchardproject.net/webpi/v3/feed.xml
klik Add Feed, kemudian OK.
Web PI akan membuat tab baru dengan nama Orchard, pilih versi orchard yang ingin anda install.
Klik tombol add kemudian Install.
29
31. Karena sebelumnya kita sudah meng-instal Webmatrix maka pada saat menginstal aplikasi web,
Web PI akan menampilkan dua pilihan. Apakah website akan di Instal menggunakan WebMatrix
(IIS Express) atau menggunakan IIS 7.
Seperti biasa pada saat install aplikasi dari Web gallery, Web PI akan menampilkan daftar
kebutuhan untuk menjalankan aplikasi.
30
32. Tunggu proses download Orchard CMS selesai. Jika sudah selesai maka akan tampil pemberitahuan
bahwa Orchard berhasil di Instal.
Orchard sudah terinstal di WebMatrix.
31
33. Klik Icon Run untuk melihat hasilnya.
Untuk mengetahui lebih jauh tentang Orchard CMS anda dapat langsung mengunjungi situs
http://orchardproject.net
32
34. 10. Publikasikan Aplikasi Web ke
Web Hosting
Setelah Anda membuat website, anda dapat mempublikasikan website anda ke web hosting agar
website buatan anda bisa dilihat orang lain. Dan sebagian layanan hosting untuk pengguna
WebMatrix ini adalah GRATIS.
Kita coba publikasikan apa yang telah kita buat yaitu website Belajar Webmatrix. Sebelumnya
pastikan ada telah mendaftar ke salah satu Web Hosting yang telah terdaftar dalam daftar situs
yang mendukung WebMatrix. Untuk info daftar hoster anda bisa memilihnya di
http://www.asp.net/webmatrix/hosts atau dengan meng-klik icon Publish kemudian Find Web
Hosting.
Saya menggunakan layanan hosting dari cytanium.com, silahkan daftar disini :
http://www.appliedi.net/webmatrix-signup/ Setelah mendaftar Cytanium Hosting akan mengirimkan
detail akun ke email anda. Jika sudah memilih hoster yang hendak anda gunakan, klik icon Publish
pada riboon, kemudian pilih Settings.
33
35. Kemudian isi form informasi akun sesuai detail akun hosting yang dikirim ke email.
Setelah semua diisi dengan benar, cek validasi koneksi apakah sudah benar atau belum. Untuk
Remote Connection String dibutuhkan jika website anda menggunakan SQL Server atau MySQL.
Biasanya hoster mengirimkan juga contoh Connection Stringnya. Berikut format Connection String
dari hoster cytanium.com :
SQL Server: Data Source=webmatrix01.cytanium.com;Initial Catalog={myDataBase};User
Id={myUsername};Password={myPassword};
MySQL:
Server=webmatrix01.cytanium.com;Database={myDataBase};Uid={myUsername};Pwd={m
yPassword};
Klik Publish, WebMatrix akan mengecek kompatibilitas hoster terhadap situs web kita.
34
36. Selanjutnya Webmatrix akan menampilkan daftar file dan database yang hendak anda upload.
Klik Continue untuk mulai mengupload.
Tunggu sampai proses upload selesai, jika sudah selesai maka akan menampilkan pesan complete.
35
37. Selamat, anda sudah berhasil membangun situs web yang dapat di akses oleh banyak orang di
dunia.
36
38. 11. Penutup
Demikian ebook yang sederhana ini saya buat. Isinya mungkin masih jauh dari apa yang namanya
bagus apalagi sempurna, namun mudah-mudahan apa yang saya tulis ini bisa bermanfaat,
terutama bagi teman-teman yang belum mengenal Microsoft Web Platform juga untuk memberikan
wawasan tentang WebMatrix. Apabila ada pertanyaan seputar WebMatrix, IIS 7, PHP on Windows
atau teknologi Microsoft lainnya, Anda dapat bertanya melalui:
Email: ciebal745@gmail.com
Milis: Mugi_Bandung@yahoogroups.com
Untuk update mengenai Microsoft WebMatrix atau teknologi Microsoft lainnya, silahkan kunjungi
situs:
Microsoft User Group Indonesia (MUGI):
http://mugi.or.id
Windows Server System Indonesia (WSS-ID):
http://wss-id.org
.Net Indonesia:
http://geeks.netindonesia.net
SQL Server User Group Indonesia:
http://sqlserver-indo.org
Students Portal
http://students.netindonesia.net
Blog Penulis:
http://www.ciebal.web.id
37
