Seluk-beluk WebMatrix: sebuah pengantar

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Tutorial ini memperkenalkan Microsoft WebMatrix, teknologi pengembangan web gratis yang memberikan salah satu pengalaman terbaik untuk web developer.

Apa yang Anda akan belajar:

Apa itu WebMatrix?
Cara Instal WebMatrix.
Bagaimana untuk memulai membuat website sederhana menggunakan WebMatrix.
Cara membuat halaman web dinamis menggunakan WebMatrix.
Bagaimana program halaman web Anda dalam Visual Studio untuk mengambil keuntungan dari fitur yang lebih canggih.

Apa itu WebMatrix?

WebMatrix adalah gratis, ringan set alat pengembangan web yang menyediakan cara termudah untuk membangun website.

Ini termasuk IIS Express (server web pengembangan), ASP.NET (kerangka web), dan SQL Server Compact (database tertanam). Ini juga mencakup alat sederhana yang arus pengembangan situs web dan membuatnya mudah untuk memulai website dari aplikasi open source yang populer. Keterampilan dan kode Anda mengembangkan dengan WebMatrix transisi mulus ke Visual Studio dan SQL Server.

Halaman web yang Anda buat menggunakan WebMatrix dapat dinamis — yaitu, mereka dapat mengubah konten atau gaya yang didasarkan pada input pengguna atau pada informasi lainnya, seperti informasi database. Program halaman Web dinamis, Anda menggunakan ASP.NET dengan sintaks pisau cukur dan dengan C# atau bahasa pemrograman Visual Basic.

Jika Anda sudah memiliki tool pemrograman yang Anda suka, Anda dapat mencoba alat WebMatrix atau Anda dapat menggunakan alat sendiri untuk membuat situs web yang menggunakan ASP.NET.

Tutorial ini menunjukkan kepada Anda bagaimana WebMatrix membuatnya mudah untuk memulai membuat website dan halaman web dinamis.

Menginstal WebMatrix

Untuk menginstal WebMatrix, Anda dapat menggunakan Microsoft Web Platform Installer, yang merupakan aplikasi gratis yang membuatnya mudah untuk menginstal dan mengkonfigurasi web yang berhubungan dengan teknologi.

Jika Anda belum memiliki Installer Platform Web, men-download dari URL berikut:
http://go.microsoft.com/fwlink/?LinkID=205867
Jalankan Web Platform Installer, pilih Spotlight, dan kemudian klik Tambahkan ke menginstal WebMatrix.

Catatan Jika Anda sudah menginstal versi WebMatrix Beta, Penginstal Platform Web meningkatkan penginstalan ke WebMatrix 1.0. Namun, situs yang Anda buat dengan edisi-edisi Beta sebelumnya mungkin tidak muncul dalam daftar situs saya ketika Anda pertama kali membuka WebMatrix. Untuk membuka sebuah situs yang telah dibuat sebelumnya, klik ikon situs dari Folder, browse ke situs, dan membukanya. Waktu berikutnya Anda membuka WebMatrix, situs akan muncul dalam daftar situs saya.

Memulai dengan WebMatrix

Untuk memulai, Anda akan membuat sebuah website baru dan halaman web sederhana.

Mulai WebMatrix.
Klik Situs Dari Templat. Template mencakup file dan halaman prebuilt untuk berbagai jenis situs web.
Pilih situs kosong dan nama situs baru Hello World.
Klik OK. WebMatrix menciptakan dan membuka situs baru.
Di atas, Anda melihat Toolbar akses cepat dan pita, seperti Microsoft Office 2010. Di bagian bawah kiri, Anda melihat kerja pemilih, yang berisi tombol-tombol yang menentukan apa yang tampak di atas mereka dalam pane kiri. Di sebelah kanan adalah panel konten, yang mana Anda melihat laporan, edit file, dan sebagainya. Akhirnya, di bagian bawah adalah pemberitahuan bar, yang menampilkan pesan yang diperlukan.

Membuat halaman Web

Di WebMatrix, pilih ruang kerja File. Ruang kerja ini memungkinkan Anda bekerja dengan file dan folder. Panel kiri menunjukkan struktur file situs Anda.
Pada pita, klik baru, dan kemudian klik File baru.

WebMatrix menampilkan daftar jenis file.
Pilih CSHTML, lalu dalam kotak nama, ketik default.cshtml. Halaman CSHTML adalah jenis khusus halaman di WebMatrix yang dapat berisi biasa isi dari halaman web, seperti kode HTML dan JavaScript, dan yang juga dapat berisi kode untuk pemrograman halaman web. (Anda akan mempelajari lebih lanjut tentang file CSHTML kemudian.)
Klik OK. WebMatrix menciptakan halaman dan membukanya dalam editor.

Seperti yang Anda lihat, ini adalah biasa HTML markup.

Tambahkan judul, judul, dan konten paragraf berikut ke halaman:

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />      
		<title>Hello World Page</title>
	</head>
	
	<body>
		<h1>Hello World Page</h1>
		<p>Hello World!</p>
	</body>
</html>

Di Quick Access Toolbar, klik Simpan.
Pada pita, klik Jalankan.

Catatan sebelum Anda klik Run, pastikan bahwa halaman web yang Anda ingin menjalankan dipilih di panel navigasi area kerja file. WebMatrix berjalan halaman yang dipilih, bahkan jika Anda sedang mengedit halaman yang berbeda. Jika tidak ada halaman yang dipilih, WebMatrix mencoba untuk menjalankan halaman default untuk situs (default.cshtml), dan jika ada halaman default tidak, peramban menampilkan kesalahan.

WebMatrix mulai web server (IIS Express) yang dapat Anda gunakan untuk menguji halaman pada komputer Anda. Halaman ditampilkan dalam browser default Anda.

Menginstal Pembantu dengan Alat Administrasi

Sekarang bahwa Anda memiliki WebMatrix diinstal dan sebuah situs yang dibuat, memiliki ide yang baik belajar bagaimana menggunakan alat administrasi halaman ASP.NET Web dan manajer paket untuk menginstal pembantu. WebMatrix berisi pembantu (komponen) yang menyederhanakan tugas pemrograman Umum dan bahwa Anda akan menggunakan seluruh tutorial ini. (Pembantu beberapa sudah disertakan dengan WebMatrix, tetapi Anda dapat menginstal lainnya juga.) Dalam lampiran Anda dapat menemukan referensi cepat untuk pembantu disertakan dan pembantu lain yang dapat Anda instal sebagai bagian dari sebuah paket yang disebut ASP.NET Web pembantu Perpustakaan. Prosedur berikut menunjukkan cara menggunakan alat administrasi untuk menginstal ASP.NET Web pembantu Perpustakaan. Anda akan menggunakan beberapa ini di tutorial ini dan tutorial lain dalam seri ini.

Di WebMatrix, klik situs kerja.
Di panel konten, klik Administrasi Halaman Web ASP.NET. Ini memuat halaman administrasi ke browser Anda. Karena ini adalah pertama kalinya Anda masuk ke halaman administrasi, itu meminta Anda untuk membuat kata sandi.
Buat sandi.

Setelah Anda mengklik buat sandi, pemeriksaan keamanan halaman yang tampak seperti berikut akan meminta Anda untuk mengubah nama file password untuk alasan keamanan. Jika ini adalah pertama kalinya Anda melihat Halaman ini, jangan mencoba untuk mengubah nama file belum. Lanjutkan ke langkah berikutnya dan ikuti petunjuk ada.
Meninggalkan browser terbuka pada halaman pemeriksaan keamanan, kembali ke WebMatrix, dan klik ruang kerja file.
Klik kanan folder Hello World untuk situs Anda dan kemudian klik Refresh. Daftar file dan folder sekarang menampilkan folder App_Data. Terbuka yang dan Anda melihat Admin folder. File sandi baru dibuat (_Password.config) dipajangkan di ./app_data/admin/ folder. Ilustrasi berikut menunjukkan struktur file diperbarui dengan file sandi dipilih:

Mengubah nama file ke Password.config dengan menghapus karakter garis bawah (_) terkemuka.
Kembali ke halaman pemeriksaan keamanan di browser, dan klik tautan Klik Di Sini di dekat akhir pesan tentang mengganti nama file kata sandi.
Login ke administrasi di halaman menggunakan password yang Anda buat. Halaman menampilkan Package Manager, yang berisi daftar paket add-on.

Jika Anda pernah ingin menampilkan lokasi pakan lainnya, klik tautan mengelola paket sumber untuk menambah, mengubah, atau menghapus feed.
Menemukan paket ASP.NET Web pembantu Perpustakaan. Untuk mempersempit daftar, mencari pembantu menggunakan kolom pencarian. Gambar berikut menunjukkan hasil dari mencari pembantu. Perhatikan bahwa beberapa versi paket ini tersedia.
Pilih versi yang Anda inginkan, klik tombol pasang, dan kemudian instal paket sebagai diarahkan. Setelah paket terinstal, manajer paket menampilkan hasilnya.

Halaman ini juga memungkinkan Anda menghapus paket, dan Anda dapat menggunakan halaman untuk memperbarui paket ketika versi yang lebih baru tersedia. Anda dapat pergi ke Tampilkan daftar drop-down dan klik dipasang untuk menampilkan paket-paket yang Anda telah terinstal, atau klik update untuk menampilkan update yang tersedia untuk paket-paket yang diinstal.

Catatan default template website (Bakery, kalender, galeri foto, dan lokasi Starter) tersedia dalam versi C# dan Visual Basic. Anda dapat menginstal template Visual Basic dengan menggunakan alat administrasi halaman ASP.NET Web di WebMatrix. Buka alat administrasi seperti yang dijelaskan dalam bagian ini dan mencari VB, dan kemudian instal template yang Anda butuhkan. Template website dipasang di root folder dari situs Anda dalam folder bernama Microsoft Templates.

Di bagian berikutnya, Anda akan melihat betapa mudahnya menambahkan kode ke halaman default.cshtml untuk membuat halaman dinamis.

Menggunakan ASP.NET Web halaman kode

Dalam prosedur ini, Anda akan membuat halaman yang menggunakan sederhana kode untuk menampilkan server tanggal dan waktu pada halaman. Contoh berikut akan memperkenalkan Anda ke sintaks pisau cukur yang memungkinkan Anda menanamkan kode ke HTML pada halaman ASP.NET Web. (Anda dapat membaca lebih lanjut tentang ini dalam tutorial berikutnya.) Kode memperkenalkan salah satu pembantu yang Anda membaca tentang sebelumnya dalam tutorial.

Buka file default.cshtml Anda.

Menambahkan markup ke halaman sehingga tampak seperti contoh berikut:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Hello World Page</title>
</head>

<body>
	<h1>Hello World Page</h1>
	<p>Hello World!</p>
	<p>The time is @DateTime.Now</p>
</body>
</html>

Halaman ini berisi markup HTML biasa, dengan satu tambahan: karakter @ menandai kode program ASP.NET.

Simpan halaman dan menjalankannya dalam browser. Anda sekarang melihat tanggal dan waktu pada halaman.

Satu baris kode telah ditambahkan melakukan semua pekerjaan menentukan waktu saat ini di server, format untuk layar dan mengirimnya ke browser. (Anda dapat menentukan pilihan pemformatan; ini adalah hanya default).

Misalnya Anda ingin melakukan sesuatu yang lebih kompleks, seperti menampilkan daftar bergulir tweets dari seorang pengguna Twitter yang Anda pilih. Anda dapat menggunakan penolong untuk itu; seperti diperhatikan sebelumnya, seorang penolong adalah komponen yang menyederhanakan tugas umum. Dalam hal ini, Semua pekerjaan yang Anda akan sebaliknya harus mengambil dan menampilkan Twitter feed.

Buat sebuah file CSHTML baru dan nama itu TwitterFeed.cshtml.

Di halaman, ganti kode yang ada 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: &nbsp; 
			<input type="text" name="TwitterUser" value=""/> &nbsp;
			<input type="submit" value="Submit" />
		</div>         
		
		<div>
			@if (Request["TwitterUser"].IsEmpty()) 
			{
				@Twitter.Search("microsoft")
			}
			else 
			{
				@Twitter.Profile(Request["TwitterUser"])
			}
		</div>
	</form>
</body>
</html>

HTML ini menciptakan bentuk yang menampilkan kotak teks untuk memasukkan nama pengguna, ditambah tombol kirim. Ini adalah antara set pertama<div>Tag.</div>

Antara set kedua<div>Tags ada di beberapa kode. (Seperti yang Anda lihat sebelumnya, untuk menandai kode dalam halaman ASP.NET Web, Anda menggunakan karakter @.) Pertama kali Halaman ini ditampilkan, atau jika pengguna mengklik Submit tetapi meninggalkan kotak teks kosong, ekspresi bersyarat permintaan ["TwitterUser"]. IsEmpty akan menjadi kenyataan.</div> Dalam hal ini, halaman menunjukkan berkicau feed bahwa pencarian untuk istilah "microsoft". Jika tidak, menunjukkan halaman kericau feed untuk pengguna apapun nama Anda dimasukkan dalam kotak teks.

Jalankan halaman di browser. Umpan Twitter menampilkan tweet dengan 'microsoft' di dalamnya.
Masukkan nama pengguna Twitter dan kemudian klik Kirim. Feed baru ditampilkan. (Jika Anda memasukkan nama tidak ada, Twitter feed masih ditampilkan, itu hanya kosong.)
Contoh ini telah menunjukkan Anda sedikit tentang bagaimana Anda dapat menggunakan WebMatrix dan bagaimana Anda dapat memprogram halaman web dinamis menggunakan ASP.NET sederhana kode menggunakan sintaks pisau cukur. Tutorial selanjutnya meneliti kode secara lebih mendalam. Tutorial berikutnya kemudian menunjukkan kepada Anda bagaimana menggunakan kode untuk berbagai jenis tugas website.

Pemrograman ASP.NET Razor Pages di Visual Studio

Selain menggunakan WebMatrix program ASP.NET Razor halaman, Anda juga dapat menggunakan Visual Studio 2010, baik satu edisi penuh atau edisi Visual Web Developer Express gratis. Jika Anda menggunakan Visual Studio atau Visual Web Developer untuk mengedit halaman ASP.NET Razor, Anda mendapatkan dua pemrograman alat yang dapat meningkatkan produktivitas Anda — IntelliSense dan debugger. IntelliSense bekerja dalam editor dengan menampilkan sesuai dengan konteks pilihan. Sebagai contoh, ketika Anda memasukkan elemen HTML, IntelliSense menunjukkan daftar atribut yang elemen dapat memiliki, dan itu bahkan dapat menunjukkan kepada Anda apa nilai-nilai Anda dapat menetapkan atribut tersebut untuk. IntelliSense berfungsi untuk HTML, JavaScript, dan C dan Visual Basic (bahasa pemrograman yang Anda gunakan untuk halaman ASP.NET Razor.)

Debugger memungkinkan Anda menghentikan program sementara itu berjalan. Anda kemudian dapat memeriksa hal-hal seperti nilai-nilai variabel, dan Anda dapat melangkah baris demi baris melalui program untuk melihat bagaimana itu berjalan.

Untuk bekerja dengan ASP.NET Razor halaman dalam Visual Studio, Anda memerlukan perangkat lunak berikut yang diinstal pada komputer Anda:

Visual Studio 2010 atau Visual Web Developer 2010 Express
ASP.NET MVC 3 RTM.

Catatan Anda dapat menginstal Visual Web Developer 2010 Express dan ASP.NET MVC 3 menggunakan Web Platform Installer.

Jika Anda memiliki Visual Studio diinstal, ketika Anda mengedit situs web dalam WebMatrix, Anda dapat meluncurkan situs dalam Visual Studio untuk mengambil keuntungan dari IntelliSense dan debugger.

Membuka situs yang Anda buat dalam tutorial ini dan kemudian klik file ruang kerja.
Di pita, klik tombol Peluncuran Visual Studio.

Setelah situs membuka di Visual Studio, Anda dapat melihat struktur situs dalam Visual Studio di panel solusi Explorer. Ilustrasi berikut menunjukkan website dibuka di Visual Web Developer 2010 Express:

Untuk Ikhtisar cara menggunakan IntelliSense dan debugger dengan ASP.NET Razor halaman dalam Visual Studio, lihat Lampiran item ASP.NET Web halaman Visual Studio.

Membuat dan menguji halaman ASP.NET menggunakan Editor teks Anda sendiri

iisexpress.exe /port:35896 /path:C:\BasicWebSite