WEB MATRIX

2

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

3

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.

4

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

5

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.

6

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.

7

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.

8

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.

9

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.

10

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 :

11

Kemudian Save dan Run. Maka akan tampil di browser seperti gambar di bawah ini :

12

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.

13

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.

14

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.

15

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"]) }

16

</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.

17

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.

18

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.

19

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 :

20

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 :

21

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

22

Jika sebelumnya anda belum menginstal MySQL anda akan diminta untuk menginstal MySQL

sebagai kebutuhan dari WordPress.

Kemudian tentukan kata sandi untuk MySQL.

23

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.

24

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.

25

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.

26

Kemudian buat sebuah file dengan nama index.php

Anda bisa coba masukan beberapa kode php sederhana.

27

Jika anda berhasil maka akan tampil sebagai berikut :

28

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

29

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.

30

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.

31

Tunggu proses download Orchard CMS selesai. Jika sudah selesai maka akan tampil pemberitahuan

bahwa Orchard berhasil di Instal.

Orchard sudah terinstal di WebMatrix.

32

Klik Icon Run untuk melihat hasilnya.

Untuk mengetahui lebih jauh tentang Orchard CMS anda dapat langsung mengunjungi situs

http://orchardproject.net

33

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.

34

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.

35

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.

36

Selamat, anda sudah berhasil membangun situs web yang dapat di akses oleh banyak orang di

dunia. J

37

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:

4 Email: ciebal745@gmail.com

4 Milis: Mugi_Bandung@yahoogroups.com

Untuk update mengenai Microsoft WebMatrix atau teknologi Microsoft lainnya, silahkan kunjungi

situs:

4 Microsoft User Group Indonesia (MUGI):

http://mugi.or.id

4 Windows Server System Indonesia (WSS-ID):

http://wss-id.org

4 .Net Indonesia: http://geeks.netindonesia.net

4 SQL Server User Group Indonesia:

http://sqlserver-indo.org

4 Students Portal

http://students.netindonesia.net

4 Blog Penulis: http://www.ciebal.web.id

38

12. Referensi

http://www.asp.net/webmatrix/

http://www.microsoft.com/web/webmatrix/

http://blogs.iis.net