Membuat Halaman Web Sederhana dengan WebMatrix

1

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.

Jika anda belum tau apa itu WebMatrix, anda bisa membaca tulisan saya sebelumnya disini Thumbs up

Kali ini kita coba membuat satu halaman sederhana menggunakan WebMatrix. Sekarang Jalankan WebMatrix.

image

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.

Karena kita akan membuat halaman baru maka anda pilih Empty Site dan ubah nama web sesuai keinginan anda.

clip_image004

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.

clip_image006

Untuk membuat halaman baru anda pilih menu Files di WorkSpace, Kemudian klik Add a file to your Site atau dengan klik New pada toolbar.

clip_image008

WebMatrix menampilkan daftar jenis file. Sebagian besar mungkin akrab dengan ekstenssi file seperti HTML, CSS, ASP, Javascript, dan lain-lain.

clip_image010

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.

clip_image012

Seperti yang Anda lihat, ini adalah HTML markup. Anda bisa mengubahnya dengan tag HTML biasa. Pada contoh saya menambahkan beberapa tag html sederhana :

image

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

image

Selamat mencoba. Hot smile

Discussion1 Comment

  1. Pingback: Instalasi ASP.NET Web Helpers Library | Ciebal Site

Leave a Reply