Memulai ASP.NET

oleh Tom FitzMacken

Untuk pengembangan aplikasi web baru, kami merekomendasikan Blazor.

Catatan

WebMatrix tidak lagi direkomendasikan sebagai lingkungan pengembangan terintegrasi untuk halaman web ASP.NET. Gunakan Visual Studio atau Visual Studio Code.

Panduan dan aplikasi ini memberi Anda gambaran umum tentang ASP.NET Web Pages (versi 2 atau yang lebih baru) dan sintaks Razor, kerangka kerja ringan untuk membuat situs web dinamis. Ini juga memperkenalkan WebMatrix, alat untuk membuat halaman dan situs.

Tingkat: Baru ASP.NET Halaman Web.
Keterampilan diasumsikan: HTML, lembar gaya bertingkat dasar (CSS).

Apa yang akan Anda pelajari dalam tutorial pertama dari set:

• Apa itu teknologi ASP.NET Web Pages dan tujuannya.
• Apa itu WebMatrix.
• Cara menginstal semuanya.
• Cara membuat situs web dengan menggunakan WebMatrix.

Fitur/teknologi yang dibahas:

• Alat Penginstal Platform Web Microsoft.
• WebMatrix.
• Halaman .cshtml

Mike Pope awalnya menulis tutorial ini. Tom FitzMacken memperbaruinya untuk Microsoft WebMatrix 3.

Versi perangkat lunak yang digunakan dalam tutorial

• ASP.NET Web Pages (Razor) 2
• WebMatrix 3

Apa yang Harus Anda Ketahui?

Kami berasumsi bahwa Anda terbiasa dengan:

• HTML. Tidak diperlukan keahlian mendalam. Kami tidak akan menjelaskan HTML, tetapi kami juga tidak menggunakan apa pun yang kompleks. Kami akan menyediakan tautan ke tutorial HTML di mana kami merasa berguna.
• Lembar gaya berskala (CSS). Sama seperti HTML.
• Ide database dasar. Jika Anda telah menggunakan spreadsheet untuk data dan mengurutkan dan memfilter data, itulah tingkat keahlian yang umumnya kami asumsikan untuk set tutorial ini.

Kami juga berasumsi bahwa Anda tertarik untuk mempelajari pemrograman dasar. ASP.NET Halaman Web menggunakan bahasa pemrograman yang disebut C#. Anda tidak perlu memiliki latar belakang dalam pemrograman, hanya minat di dalamnya. Jika Anda pernah menulis JavaScript apa pun di halaman web sebelumnya, Anda memiliki banyak latar belakang.

Perhatikan bahwa jika Anda terbiasa dengan pemrograman, Anda mungkin menemukan bahwa set tutorial ini awalnya bergerak lambat sementara kami mempercepat programmer baru. Namun, ketika kita melewati beberapa tutorial pertama, akan ada pemrograman yang kurang mendasar untuk dijelaskan dan hal-hal akan bergerak bersama pada klip yang lebih cepat.

Apa yang Anda butuhkan?

Berikut inilah yang Anda perlukan:

• Komputer yang menjalankan Windows 8, Windows 7, Windows Server 2008, atau Windows Server 2012.
• Koneksi internet langsung.
• Hak istimewa administrator (diperlukan untuk proses penginstalan).

Apa itu Halaman Web ASP.NET?

ASP.NET Web Pages adalah kerangka kerja yang bisa Anda gunakan untuk membuat halaman web dinamis. Halaman web HTML sederhana bersifat statis; kontennya ditentukan oleh markup HTML tetap yang ada di halaman. Halaman dinamis seperti yang Anda buat dengan halaman web ASP.NET memungkinkan Anda membuat konten halaman dengan cepat, dengan menggunakan kode.

Halaman dinamis memungkinkan Anda melakukan semua hal. Anda dapat meminta input kepada pengguna dengan menggunakan formulir lalu mengubah tampilan halaman atau tampilannya. Anda dapat mengambil informasi dari pengguna, menyimpannya dalam database, lalu mencantumkannya nanti. Anda dapat mengirim email dari situs Anda. Anda dapat berinteraksi dengan layanan lain di web (misalnya, layanan pemetaan) dan menghasilkan halaman yang mengintegrasikan informasi dari sumber tersebut.

Apa itu WebMatrix?

WebMatrix adalah alat yang mengintegrasikan editor halaman web, utilitas database, server web untuk halaman pengujian, dan fitur untuk menerbitkan situs web Anda ke Internet. WebMatrix gratis, dan mudah diinstal dan mudah digunakan. (Ini juga berfungsi hanya untuk halaman HTML biasa, serta untuk teknologi lain seperti PHP.)

Anda sebenarnya tidak perlu menggunakan WebMatrix untuk bekerja dengan Halaman Web ASP.NET. Anda dapat membuat halaman dengan menggunakan editor teks, misalnya, dan menguji halaman dengan menggunakan server web yang dapat Anda akses. Namun, WebMatrix membuatnya sangat mudah, sehingga tutorial ini akan menggunakan WebMatrix di seluruh.

Tentang Tutorial Ini

Set tutorial ini adalah pengantar cara menggunakan halaman web ASP.NET. Ada total 9 tutorial dalam set tutorial pengantar ini. Ini adalah bagian dari serangkaian set tutorial yang membawa Anda dari ASP.NET pemula Halaman Web untuk membuat situs web nyata yang tampak profesional.

Tutorial pertama ini menetapkan konsentrasi pada menunjukkan kepada Anda dasar-dasar cara bekerja dengan ASP.NET Web Pages. Setelah selesai, Anda dapat bekerja dengan set tutorial tambahan yang mengambil tempat yang satu ini berakhir dan yang menjelajahi Halaman Web secara lebih mendalam.

Kami sengaja pergi mudah pada penjelasan mendalam. Dan setiap kali kita menunjukkan sesuatu, untuk set tutorial ini kita selalu memilih cara yang kita pikir paling mudah untuk dipahami. Set tutorial selanjutnya masuk ke lebih mendalam dan menunjukkan kepada Anda pendekatan yang lebih efisien atau lebih fleksibel (juga lebih menyenangkan). Tetapi tutorial tersebut mengharuskan Anda untuk memahami dasar-dasarnya terlebih dahulu.

Set tutorial yang baru saja Anda mulai mencakup fitur-fitur halaman web ASP.NET ini:

• Pengantar dan menginstal semuanya. (Itu dalam tutorial yang Anda baca.)
• Dasar-dasar pemrograman Halaman Web ASP.NET.
• Membuat database.
• Membuat dan memproses formulir input pengguna.
• Menambahkan, memperbarui, dan menghapus data dalam database.

Apa yang akan Anda buat?

Tutorial ini mengatur dan yang berikutnya berputar di sekitar situs web di mana Anda dapat mencantumkan film yang Anda suka. Anda akan dapat memasukkan film, mengeditnya, dan mencantumkannya. Berikut adalah beberapa halaman yang akan Anda buat dalam set tutorial ini. Yang pertama memperlihatkan halaman daftar film yang akan Anda buat:

Dan inilah halaman yang memungkinkan Anda menambahkan informasi film baru ke situs Anda:

Set tutorial berikutnya dibangun pada set ini dan menambahkan lebih banyak fungsionalitas, seperti mengunggah gambar, memungkinkan orang masuk, mengirim email, dan mengintegrasikan dengan media sosial.

Lihat Aplikasi ini Berjalan di Azure

Ingin melihat situs yang sudah selesai berjalan sebagai aplikasi web langsung? Anda dapat menyebarkan versi lengkap aplikasi ke akun Azure Anda hanya dengan mengklik tombol berikut.

Anda memerlukan akun Azure untuk menyebarkan solusi ini ke Azure. Jika Anda belum memiliki akun, Anda memiliki opsi berikut:

• Buka akun Azure secara gratis - Anda mendapatkan kredit yang dapat Anda gunakan untuk mencoba layanan Azure berbayar, dan bahkan setelah habis, Anda dapat menyimpan akun dan menggunakan layanan Azure gratis.
• Mengaktifkan manfaat pelanggan MSDN - Langganan MSDN Anda memberi Anda kredit setiap bulan yang dapat Anda gunakan untuk layanan Azure berbayar.

Menginstal Semuanya

Anda dapat menginstal semuanya dengan menggunakan Alat Penginstal Platform Web dari Microsoft. Akibatnya, Anda menginstal alat penginstal, lalu menggunakannya untuk menginstal yang lain.

Untuk menggunakan Halaman Web, Anda harus menginstal setidaknya Windows XP dengan SP3, atau Windows Server 2008 atau yang lebih baru.

Pada halaman Halaman Web situs web ASP.NET, klik Instal.

Anda diminta untuk menerima persyaratan lisensi dan pernyataan privasi sebelum menginstal WebMatrix.

Klik Jalankan untuk memulai penginstalan. (Jika Anda ingin menyimpan alat penginstal, klik Simpan lalu jalankan alat penginstal dari folder tempat Anda menyimpannya.)

Penginstal Platform Web muncul, siap untuk menginstal WebMatrix. Klik Pasang.

Proses penginstalan mencari tahu apa yang harus diinstal di komputer Anda dan memulai proses. Tergantung pada apa yang sebenarnya harus diinstal, prosesnya dapat berlangsung dari beberapa saat hingga beberapa menit. Pilih Saya Terima untuk menerima ketentuan lisensi.

Halo, WebMatrix

Setelah selesai, proses penginstalan dapat meluncurkan WebMatrix secara otomatis. Jika tidak, di Windows, dari menu Mulai , luncurkan Microsoft WebMatrix.

Saat meluncurkan WebMatrix untuk pertama kalinya, Anda diberi kesempatan untuk masuk ke Microsoft Azure dengan akun Microsoft Anda. Dengan masuk, Anda akan menerima 10 aplikasi web gratis melalui Azure. Aplikasi web gratis ini menyediakan cara mudah untuk menguji aplikasi Anda. Jika Anda belum memiliki akun Azure, tetapi Anda memiliki langganan MSDN, Anda dapat mengaktifkan manfaat langganan MSDN Anda. Jika tidak, Anda dapat membuat akun uji coba gratis hanya dalam beberapa menit. Untuk detailnya, lihat Uji Coba Gratis Azure.

Anda tidak perlu masuk sekarang untuk melanjutkan tutorial ini. Jika Anda tidak masuk sekarang, Anda masih akan memiliki opsi untuk masuk nanti. Topik terakhir dalam seri tutorial ini mencakup cara menyebarkan situs web Anda ke Azure; oleh karena itu, Anda harus masuk untuk menyelesaikan topik tersebut.

Pada titik ini, masuk dengan akun Microsoft Anda atau pilih Tidak Sekarang di sudut kanan bawah.

Untuk memulai, Anda akan membuat situs web kosong dan menambahkan halaman. Dalam tutorial selanjutnya dalam set ini Anda akan bermain dengan salah satu templat situs web bawaan.

Di jendela mulai, klik Baru.

Templat adalah file dan halaman bawaan untuk berbagai jenis situs web. Untuk melihat semua templat yang tersedia secara default, pilih opsi Galeri Templat.

Di jendela Mulai Cepat, pilih Situs Kosong dari grup ASP.NET dan beri nama situs baru "WebPagesMovies".

Klik Berikutnya.

Jika Anda telah masuk ke akun Microsoft, Anda akan diberi kesempatan untuk membuat situs di Azure. Berdasarkan nama situs Anda, nama default WebPagesMovies.azurewebsites.net disarankan; namun, tanda seru menunjukkan bahwa nama ini tidak tersedia di Windows Azure. Untuk kesederhanaan, pilih Lewati untuk melewati pembuatan situs web di Azure sekarang. Nanti dalam seri ini, kami akan menerbitkan situs ke Azure.

WebMatrix membuat dan membuka situs:

Di bagian atas, ada Toolbar Akses Cepat dan pita. Di kiri bawah, Anda akan melihat pemilih ruang kerja tempat Anda beralih antar tugas (Situs, File, Database, Laporan). Di sebelah kanan adalah panel konten untuk editor dan untuk laporan. Dan di bagian bawah Anda kadang-kadang akan melihat bilah pemberitahuan untuk pesan.

Anda akan mempelajari lebih lanjut tentang WebMatrix dan fitur-fiturnya saat Anda melalui tutorial ini.

Membuat Halaman Web

Agar terbiasa dengan WebMatrix dan halaman web ASP.NET, Anda akan membuat halaman sederhana.

Di pemilih ruang kerja, pilih ruang kerja File . Ruang kerja ini memungkinkan Anda bekerja dengan file dan folder. Panel kiri memperlihatkan struktur file situs Anda. Pita berubah untuk memperlihatkan tugas terkait file.

Di pita, klik panah di bawah Baru lalu klik File Baru.

WebMatrix menampilkan daftar tipe file. Pilih CSHTML, dan dalam kotak Nama , ketik "HelloWorld". Halaman CSHTML adalah halaman Halaman Web ASP.NET.

Klik OK.

WebMatrix membuat halaman dan membukanya di editor.

Seperti yang Anda lihat, halaman berisi sebagian besar markup HTML biasa, kecuali untuk blok di bagian atas yang terlihat seperti ini:

@{ 

}

Itu untuk menambahkan kode, seperti yang akan Anda lihat segera.

Perhatikan bahwa berbagai bagian halaman — nama elemen, atribut, dan teks, ditambah blok di bagian atas - semuanya dalam warna yang berbeda. Ini disebut penyorotan sintaksis, dan membuatnya lebih mudah untuk menjaga semuanya tetap jelas. Ini adalah salah satu fitur yang memudahkan untuk bekerja dengan halaman web di WebMatrix.

Tambahkan konten untuk <head> elemen dan <body> seperti dalam contoh berikut. (Jika mau, Anda bisa menyalin blok berikut dan mengganti seluruh halaman yang ada dengan kode ini.)

@{

}

<!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 Toolbar Akses Cepat atau di menu File , klik Simpan.

Menguji Halaman

Di ruang kerja File, klik kanan halaman HelloWorld.cshtml lalu klik Luncurkan di browser.

WebMatrix memulai server web bawaan (IIS Express) yang dapat Anda gunakan untuk menguji halaman di komputer Anda. (Tanpa IIS Express di WebMatrix, Anda harus menerbitkan halaman Anda ke server web di suatu tempat sebelum Anda dapat mengujinya.) Halaman ditampilkan di browser default Anda.

Perhatikan bahwa ketika Anda menguji halaman di WebMatrix, URL di browser adalah sesuatu seperti http://localhost:33651/HelloWorld.cshtml. Nama localhost mengacu pada server lokal, yang berarti bahwa halaman dilayani oleh server web yang ada di komputer Anda sendiri. Seperti yang disebutkan, WebMatrix menyertakan program server web bernama IIS Express yang berjalan saat Anda meluncurkan halaman.

Angka setelah localhost (misalnya, localhost:33651) mengacu pada nomor port di komputer Anda. Ini adalah jumlah "saluran" yang digunakan IIS Express untuk situs web khusus ini. Nomor port dipilih secara acak dari rentang 1024 hingga 65536 saat Anda membuat situs Anda, dan berbeda untuk setiap situs yang Anda buat. (Ketika Anda menguji situs Anda sendiri, nomor port hampir pasti akan menjadi angka yang berbeda dari 33561.) Dengan menggunakan port yang berbeda untuk setiap situs web, IIS Express dapat terus lurus situs mana yang dibicarakannya.

Kemudian ketika Anda menerbitkan situs Anda ke server web publik, Anda tidak lagi melihat localhost di URL. Pada saat itu, Anda akan melihat URL yang lebih umum seperti http://myhostingsite/mywebsite/HelloWorld.cshtml atau apa pun halamannya. Anda akan mempelajari selengkapnya tentang menerbitkan situs nanti dalam seri tutorial ini.

Menambahkan beberapa kode sisi server

Tutup browser dan kembali ke halaman di WebMatrix.

Tambahkan baris ke blok kode sehingga terlihat seperti kode berikut:

@{
   var currentDateTime = DateTime.Now;
}

Ini adalah sedikit kode Razor. Mungkin jelas bahwa ia mendapatkan tanggal dan waktu saat ini dan menempatkan nilai tersebut ke dalam variabel bernama currentDateTime. Anda akan membaca selengkapnya tentang sintaks Razor dalam tutorial berikutnya.

Di isi halaman, setelah <p>Hello World!</p> elemen , tambahkan yang berikut ini:

<p>Right now it's @currentDateTime</p>

Kode ini mendapatkan nilai yang Anda masukkan ke currentDateTime dalam variabel di bagian atas dan menyisipkannya ke markup halaman. Karakter @ menandai kode Halaman Web ASP.NET di halaman.

Jalankan halaman lagi (WebMatrix menyimpan perubahan untuk Anda sebelum menjalankan halaman). Kali ini Anda melihat tanggal dan waktu di halaman.

Tunggu beberapa saat lalu refresh halaman di browser. Tampilan tanggal dan waktu diperbarui.

Di browser, lihat sumber halaman. Terlihat seperti markup 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>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Perhatikan bahwa @{ } blok di bagian atas tidak ada. Perhatikan juga bahwa tampilan tanggal dan waktu menunjukkan string karakter yang sebenarnya (1/18/2012 2:49:50 PM atau apa pun), tidak @currentDateTime seperti yang Anda miliki di halaman .cshtml . Apa yang terjadi di sini adalah bahwa ketika Anda menjalankan halaman, ASP.NET memproses semua kode (sangat sedikit dalam hal ini) yang ditandai dengan @. Kode menghasilkan output, dan output tersebut dimasukkan ke dalam halaman.

Inilah yang dimaksud halaman web ASP.NET

Saat Anda membaca bahwa ASP.NET Web Pages menghasilkan konten web dinamis, apa yang telah Anda lihat di sini adalah idenya. Halaman yang baru saja Anda buat berisi markup HTML yang sama dengan yang pernah Anda lihat sebelumnya. Ini juga dapat berisi kode yang dapat melakukan semua jenis tugas. Dalam contoh ini, itu melakukan tugas sepele untuk mendapatkan tanggal dan waktu saat ini. Seperti yang Anda lihat, Anda dapat menyela kode dengan HTML untuk menghasilkan output di halaman. Ketika seseorang meminta halaman .cshtml di browser, ASP.NET memproses halaman saat masih berada di tangan server web. ASP.NET menyisipkan output kode (jika ada) ke dalam halaman sebagai HTML. Ketika pemrosesan kode selesai, ASP.NET mengirim halaman yang dihasilkan ke browser. Semua browser yang pernah didapatkan adalah HTML. Berikut diagramnya:

Idenya sederhana, tetapi ada banyak tugas menarik yang dapat dilakukan kode, dan ada banyak cara menarik di mana Anda dapat secara dinamis menambahkan konten HTML ke halaman. Dan ASP.NET halaman .cshtml , seperti halaman HTML apa pun, juga dapat menyertakan kode yang berjalan di browser itu sendiri (kode JavaScript dan jQuery). Anda akan menjelajahi semua hal ini dalam set tutorial ini dan di yang berikutnya.

Berikutnya

Dalam tutorial berikutnya dalam seri ini, Anda menjelajahi ASP.NET Pemrograman Halaman Web sedikit lebih banyak.

Sumber Tambahan

Buat situs web ASP.NET dari awal. Ini adalah tutorial yang khusus tentang menggunakan WebMatrix (bukan ASP.NET Halaman Web). Ini masuk ke sedikit lebih detail tentang beberapa fitur tambahan WebMatrix yang tidak akan kita bahas dalam set tutorial ini.

Berikutnya