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
[email protected]. 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
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
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
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
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
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
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
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
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
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
Kemudian Save dan Run. Maka akan tampil di browser seperti gambar di bawah ini :
11
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
Setelah anda membuat kata sandi, anda akan masuk ke halaman administrator. Install microsoftweb-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
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 : <meta charset="utf-8" />
Belajar Menggunakan WebMatrix Hello World
Saya berhasil membuat halaman web dengan WebMatrix
Waktu Menunjukan @DateTime.Now
Simpan kemudian jalankan.
14
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; }
Nama Saya: @nama
Umur Saya: @umur
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 : <meta charset="utf-8" />
Twitter Feed Twitter Feed
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
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
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
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
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
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
Jika sebelumnya anda belum menginstal MySQL anda akan diminta untuk menginstal MySQL sebagai kebutuhan dari WordPress.
Kemudian tentukan kata sandi untuk MySQL.
22
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
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
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
Kemudian buat sebuah file dengan nama index.php
Anda bisa coba masukan beberapa kode php sederhana.
26
Jika anda berhasil maka akan tampil sebagai berikut :
27
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
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
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
Tunggu proses download Orchard CMS selesai. Jika sudah selesai maka akan tampil pemberitahuan bahwa Orchard berhasil di Instal.
Orchard sudah terinstal di WebMatrix.
31
Klik Icon Run untuk melihat hasilnya.
Untuk mengetahui lebih jauh tentang Orchard CMS anda dapat langsung mengunjungi situs http://orchardproject.net
32
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
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
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
Selamat, anda sudah berhasil membangun situs web yang dapat di akses oleh banyak orang di dunia.
36
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:
[email protected] Milis:
[email protected] 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
12. Referensi
http://www.asp.net/webmatrix/
http://www.microsoft.com/web/webmatrix/
http://blogs.iis.net
38
