Bagikan melalui

Menggunakan Visual Studio 2013 untuk membuat Halaman Formulir Web Dasar ASP.NET 4.5

oleh Erik Reitan

Untuk pengembangan aplikasi web baru, kami merekomendasikan Blazor.

Panduan ini memberi Anda pengenalan lingkungan pengembangan Web di Microsoft Visual Studio 2013 dan di Microsoft Visual Studio Express 2013 untuk Web. Panduan ini memandu Anda membuat halaman Formulir Web ASP.NET sederhana dan mengilustrasikan teknik dasar membuat halaman baru, menambahkan kontrol, dan menulis kode.

Tugas yang diilustrasikan dalam panduan ini meliputi:

  • Membuat proyek aplikasi Web Forms sistem file.
  • Membiasakan diri dengan Visual Studio.
  • Membuat halaman ASP.NET.
  • Menambahkan kontrol.
  • Menambahkan penanganan aktivitas.
  • Menjalankan dan menguji halaman dari Visual Studio.

Prasyarat

Untuk menyelesaikan panduan ini, Anda akan memerlukan:

  • Microsoft Visual Studio 2013 atau Microsoft Visual Studio Express 2013 untuk Web. .NET Framework diinstal secara otomatis.

    Catatan

    Microsoft Visual Studio 2013 dan Microsoft Visual Studio Express 2013 for Web sering disebut sebagai Visual Studio di seluruh seri tutorial ini.

    Jika Anda menggunakan Visual Studio, panduan ini mengasumsikan bahwa Anda memilih kumpulan pengaturan Pengembangan Web saat pertama kali Anda memulai Visual Studio. Untuk informasi selengkapnya, lihat Cara: Pilih Pengaturan Lingkungan Pengembangan Web.

Membuat proyek aplikasi Web dan Halaman

Di bagian panduan ini, Anda akan membuat proyek aplikasi Web dan menambahkan halaman baru ke dalamnya. Anda juga akan menambahkan teks HTML dan menjalankan halaman di browser Anda.

Untuk membuat proyek aplikasi Web

  1. Buka Microsoft Visual Studio.

  2. Pada menu File, pilih Proyek Baru.
    File Menu

    Kotak dialog Proyek Baru muncul.

  3. Pilih grup Templat ->Visual C# ->Templat web di sebelah kiri.

  4. Pilih templat Aplikasi Web ASP.NET di kolom tengah.

  5. Beri nama proyek Anda BasicWebApp dan klik tombol OK .
    Kotak dialog Proyek Baru

  6. Selanjutnya, pilih templat Formulir Web dan klik tombol OK untuk membuat proyek.
    Kotak dialog Proyek ASP.NET baru

    Visual Studio membuat proyek baru yang menyertakan fungsionalitas bawaan berdasarkan templat Formulir Web. Ini tidak hanya memberi Anda halaman Home.aspx , halaman About.aspx , halaman Contact.aspx , tetapi juga menyertakan fungsionalitas keanggotaan yang mendaftarkan pengguna dan menyimpan kredensial mereka sehingga mereka dapat masuk ke situs web Anda. Saat halaman baru dibuat, secara default Visual Studio menampilkan halaman dalam tampilan Sumber , tempat Anda dapat melihat elemen HTML halaman. Ilustrasi berikut ini memperlihatkan apa yang akan Anda lihat di tampilan Sumber jika Anda membuat halaman Web baru bernama BasicWebApp.aspx.
    Tampilan Sumber

Tur Lingkungan Pengembangan Web Visual Studio

Sebelum Anda melanjutkan dengan memodifikasi halaman, berguna untuk membiasakan diri dengan lingkungan pengembangan Visual Studio. Ilustrasi berikut menunjukkan jendela dan alat yang tersedia di Visual Studio dan Visual Studio Express untuk Web.

Catatan

Diagram ini memperlihatkan lokasi jendela dan jendela default. Menu Tampilan memungkinkan Anda menampilkan jendela tambahan, dan mengatur ulang dan mengubah ukuran jendela agar sesuai dengan preferensi Anda. Jika perubahan telah dilakukan pada pengaturan jendela, apa yang Anda lihat tidak akan cocok dengan ilustrasi.

Lingkungan Visual Studio

Lingkungan Visual Studio

Biasakan diri Anda dengan perancang Web

Periksa ilustrasi di atas dan cocokkan teks dengan daftar berikut, yang menjelaskan jendela dan alat yang paling umum digunakan. (Tidak semua jendela dan alat yang Anda lihat tercantum di sini, hanya yang ditandai dalam ilustrasi sebelumnya.)

  • Bilah alat. Berikan perintah untuk memformat teks, menemukan teks, dan sebagainya. Beberapa bilah alat hanya tersedia saat Anda bekerja dalam tampilan Desain .
  • Penjelajah Solusi jendela. Menampilkan file dan folder dalam aplikasi Web Anda.
  • Jendela dokumen. Menampilkan dokumen yang sedang Anda kerjakan di jendela bertab. Anda bisa beralih antar dokumen dengan mengklik tab.
  • Jendela properti . Memungkinkan Anda mengubah pengaturan untuk halaman, elemen HTML, kontrol, dan objek lainnya.
  • Lihat tab. Menyajikan tampilan berbeda dari dokumen yang sama. Tampilan desain adalah permukaan pengeditan hampir WYSIWYG. Tampilan sumber adalah editor HTML untuk halaman tersebut. Tampilan terpisah menampilkan tampilan Desain dan tampilan Sumber untuk dokumen. Anda akan bekerja dengan tampilan Desain dan Sumber nanti dalam panduan ini. Jika Anda lebih suka membuka halaman Web dalam tampilan Desain , pada menu Alat , klik Opsi, pilih simpul Desainer HTML, dan ubah opsi Mulai Halaman Dalam .
  • Kotak Alat. Menyediakan kontrol dan elemen HTML yang dapat Anda seret ke halaman Anda. Elemen Kotak Alat dikelompokkan menurut fungsi umum.
  • S erver Explorer. Menampilkan koneksi database. Jika Server Explorer tidak terlihat, pada menu Tampilan, klik Server Explorer.

Membuat Halaman Formulir Web ASP.NET baru

Saat Anda membuat aplikasi Web Forms baru menggunakan templat proyek Aplikasi Web ASP.NET, Visual Studio menambahkan halaman ASP.NET (halaman Formulir Web) bernama Default.aspx, serta beberapa file dan folder lainnya. Anda dapat menggunakan halaman Default.aspx sebagai beranda untuk aplikasi Web Anda. Namun, untuk panduan ini, Anda akan membuat dan bekerja dengan halaman baru.

Untuk menambahkan halaman ke aplikasi Web

  1. Tutup halaman Default.aspx . Untuk melakukan ini, klik tab yang menampilkan nama file lalu klik opsi tutup.
  2. Di Penjelajah Solusi, klik kanan nama aplikasi Web (dalam tutorial ini nama aplikasinya adalah BasicWebSite), lalu klik Tambahkan ->Item Baru.
    Kotak dialog Tambahkan Item Baru ditampilkan.
  3. Pilih grup Visual C# ->Templat web di sebelah kiri. Kemudian, pilih Formulir Web dari daftar tengah dan beri nama FirstWebPage.aspx.
    Kotak dialog Tambahkan Item Baru
  4. Klik Tambahkan untuk menambahkan halaman web ke proyek Anda.
    Visual Studio membuat halaman baru dan membukanya.

Menambahkan HTML ke Halaman

Di bagian panduan ini, Anda akan menambahkan beberapa teks statis ke halaman.

Untuk menambahkan teks ke halaman

  1. Di bagian bawah jendela dokumen, klik tab Desain untuk beralih ke tampilan Desain .

    Tampilan desain menampilkan halaman saat ini dengan cara seperti WYSIWYG. Pada titik ini, Anda tidak memiliki teks atau kontrol apa pun di halaman, sehingga halaman kosong kecuali untuk garis putus-putus yang menguraikan persegi panjang. Persegi panjang ini mewakili elemen div pada halaman.

  2. Klik di dalam persegi panjang yang diuraikan oleh garis putus-putus.

  3. Ketik Selamat Datang di Pengembang Web Visual dan tekan ENTER dua kali.

    Ilustrasi berikut ini memperlihatkan teks yang Anda ketik dalam tampilan Desain .

    Teks selamat datang dalam tampilan Desain

  4. Beralih ke tampilan Sumber .

    Anda dapat melihat HTML dalam tampilan Sumber yang Anda buat saat mengetik dalam tampilan Desain .
    Halaman Web dengan Teks Statis

Menjalankan Halaman

Sebelum melanjutkan dengan menambahkan kontrol ke halaman, Anda dapat terlebih dahulu menjalankannya.

Untuk menjalankan halaman

  1. Di Penjelajah Solusi, klik kanan FirstWebPage.aspx dan pilih Atur sebagai Halaman Mulai.

  2. Tekan CTRL+F5 untuk menjalankan halaman.

    Halaman ditampilkan di browser. Meskipun halaman yang Anda buat memiliki ekstensi nama file .aspx, halaman tersebut saat ini berjalan seperti halaman HTML apa pun.

    Untuk menampilkan halaman di browser, Anda juga bisa mengklik kanan halaman di Penjelajah Solusi dan memilih Tampilkan di Browser.

  3. Tutup browser untuk menghentikan aplikasi Web.

Menambahkan dan Memprogram Kontrol

Anda sekarang akan menambahkan kontrol server ke halaman. Kontrol server, seperti tombol, label, kotak teks, dan kontrol lain yang sudah dikenal, menyediakan kemampuan pemrosesan formulir umum untuk halaman Formulir Web Anda. Namun, Anda dapat memprogram kontrol dengan kode yang berjalan di server, bukan klien.

Anda akan menambahkan kontrol Tombol , kontrol TextBox , dan kontrol Label ke halaman dan menulis kode untuk menangani peristiwa Klik untuk kontrol Tombol .

Untuk menambahkan kontrol ke halaman

  1. Klik tab Desain untuk beralih ke tampilan Desain .

  2. Letakkan titik penyisipan di akhir teks Selamat Datang di Visual Web Developer dan tekan ENTER lima kali atau lebih untuk membuat beberapa ruang dalam kotak elemen div .

  3. Di Kotak Alat, perluas grup Standar jika belum diperluas.
    Perhatikan bahwa Anda mungkin perlu memperluas jendela Kotak Alat di sebelah kiri untuk melihatnya.

  4. Seret kontrol TextBox ke halaman dan letakkan di tengah kotak elemen div yang memiliki Selamat Datang di Pengembang Web Visual di baris pertama.

  5. Seret kontrol Tombol ke halaman dan letakkan di sebelah kanan kontrol Kotak Teks.

  6. Seret kontrol Label ke halaman dan letakkan pada baris terpisah di bawah kontrol Tombol.

  7. Letakkan titik penyisipan di atas kontrol TextBox, lalu ketik Masukkan nama Anda: .

    Teks HTML statis ini adalah keterangan untuk kontrol TextBox . Anda dapat mencampur html statis dan kontrol server pada halaman yang sama. Ilustrasi berikut menunjukkan bagaimana tiga kontrol muncul dalam tampilan Desain .

    Tiga kontrol dalam tampilan Desain

Mengatur Properti Kontrol

Visual Studio menawarkan berbagai cara untuk mengatur properti kontrol di halaman. Di bagian panduan ini, Anda akan mengatur properti dalam tampilan Desain dan tampilan Sumber .

Untuk mengatur properti kontrol

  1. Pertama, tampilkan jendela Properti dengan memilih dari menu Tampilan ->Jendela Windows ->Properti Lainnya. Anda dapat memilih F4 untuk menampilkan jendela Properti .

  2. Pilih kontrol Tombol, lalu di jendela Properti, atur nilai Teks ke Nama Tampilan. Teks yang Anda masukkan muncul pada tombol di perancang, seperti yang diperlihatkan dalam ilustrasi berikut.

    Atur teks Tombol

  3. Beralih ke tampilan Sumber .

    Tampilan sumber menampilkan HTML untuk halaman, termasuk elemen yang telah dibuat Visual Studio untuk kontrol server. Kontrol dinyatakan menggunakan sintaks seperti HTML, kecuali bahwa tag menggunakan awalan asp: dan menyertakan atribut runat="server".

    Properti kontrol dinyatakan sebagai atribut. Misalnya, saat Anda mengatur properti Teks untuk kontrol Tombol , di langkah 1, Anda benar-benar mengatur atribut Teks dalam markup kontrol.

    Catatan

    Semua kontrol berada di dalam elemen formulir , yang juga memiliki atribut runat="server". Atribut runat="server" dan asp: awalan untuk tag kontrol menandai kontrol sehingga diproses oleh ASP.NET di server saat halaman berjalan. Kode di luar <elemen form runat="server"> dan< script runat="server"> dikirim tidak berubah ke browser, itulah sebabnya kode ASP.NET harus berada di dalam elemen yang tag pembukanya berisi atribut runat="server".

  4. Selanjutnya, Anda akan menambahkan properti tambahan ke kontrol Label . Letakkan titik penyisipan langsung setelah asp:Label di <tag asp:Label>, lalu tekan SPACEBAR.

    Daftar drop-down muncul yang menampilkan daftar properti yang tersedia yang bisa Anda atur untuk kontrol Label . Fitur ini, disebut sebagai IntelliSense, membantu Anda dalam tampilan Sumber dengan sintaks kontrol server, elemen HTML, dan item lainnya di halaman. Ilustrasi berikut ini memperlihatkan daftar drop-down IntelliSense untuk kontrol Label .

    Atribut IntelliSense

  5. Pilih ForeColor lalu ketik tanda sama dengan.

    IntelliSense menampilkan daftar warna.

    Catatan

    Anda dapat menampilkan daftar drop-down IntelliSense kapan saja dengan menekan CTRL+J saat melihat kode.

  6. Pilih warna untuk teks kontrol Label . Pastikan Anda memilih warna yang cukup gelap untuk dibaca terhadap latar belakang putih.

    Atribut ForeColor diselesaikan dengan warna yang telah Anda pilih, termasuk tanda kutip penutup.

Memprogram Kontrol Tombol

Untuk panduan ini, Anda akan menulis kode yang membaca nama yang dimasukkan pengguna ke dalam kotak teks lalu menampilkan nama dalam kontrol Label .

Menambahkan penanganan aktivitas tombol default

  1. Beralih ke tampilan Desain .

  2. Klik dua kali kontrol Tombol.

    Secara default, Visual Studio beralih ke file code-behind dan membuat penanganan aktivitas kerangka untuk peristiwa default Kontrol tombol, peristiwa Klik. File code-behind memisahkan markup UI Anda (seperti HTML) dari kode server Anda (seperti C#).
    Kursor diposisikan untuk menambahkan kode untuk penanganan aktivitas ini.

    Catatan

    Mengklik dua kali kontrol dalam tampilan Desain hanyalah salah satu dari beberapa cara Anda dapat membuat penanganan aktivitas.

  3. Di dalam penanganan aktivitas Button1_Click , ketik Label1 diikuti dengan titik (.).

    Saat Anda mengetik periode setelah ID label (Label1), Visual Studio menampilkan daftar anggota yang tersedia untuk kontrol Label, seperti yang diperlihatkan dalam ilustrasi berikut. Anggota biasanya properti, metode, atau peristiwa.

    IntelliSense dalam tampilan Kode

  4. Selesaikan tombol Klik penanganan aktivitas untuk tombol sehingga dibaca seperti yang ditunjukkan dalam contoh kode berikut.

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
}

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. Beralih kembali untuk menampilkan tampilan Sumber markup HTML Anda dengan mengklik kanan FirstWebPage.aspx di Penjelajah Solusi dan memilih Tampilkan Markup.

  6. Gulir ke elemen asp:Button>.< Perhatikan bahwa <elemen asp:Button> sekarang memiliki atribut onclick="Button1_Click".

    Atribut ini mengikat peristiwa Klik tombol ke metode handler yang Anda kodekan di langkah sebelumnya.

    Metode penanganan aktivitas dapat memiliki nama apa pun; nama yang Anda lihat adalah nama default yang dibuat oleh Visual Studio. Poin pentingnya adalah bahwa nama yang digunakan untuk atribut OnClick dalam HTML harus cocok dengan nama metode yang ditentukan dalam kode di belakang.

Menjalankan Halaman

Anda sekarang dapat menguji kontrol server di halaman.

Untuk menjalankan halaman

  1. Tekan CTRL+F5 untuk menjalankan halaman di browser. Jika terjadi kesalahan, periksa kembali langkah-langkah di atas.

  2. Masukkan nama ke dalam kotak teks dan klik tombol Nama Tampilan.

    Nama yang Anda masukkan ditampilkan di kontrol Label . Perhatikan bahwa ketika Anda mengklik tombol, halaman diposting ke server Web. ASP.NET kemudian membuat ulang halaman, menjalankan kode Anda (dalam hal ini, kontrol Tombol Klik penanganan aktivitas berjalan), lalu mengirim halaman baru ke browser. Jika Anda menonton bilah status di browser, Anda dapat melihat bahwa halaman melakukan perjalanan pulang pergi ke server Web setiap kali Anda mengklik tombol .

  3. Di browser, lihat sumber halaman yang Anda jalankan dengan mengklik kanan halaman dan memilih Tampilkan sumber.

    Di kode sumber halaman, Anda akan melihat HTML tanpa kode server apa pun. Secara khusus, Anda tidak melihat asp:> elemen yang sedang Anda kerjakan dalam tampilan Sumber.< Saat halaman berjalan, ASP.NET memproses kontrol server dan merender elemen HTML ke halaman yang melakukan fungsi yang mewakili kontrol. Misalnya, <kontrol asp:Button> dirender sebagai elemen jenis input HTML <="submit> ".

  4. Tutup browser.

Bekerja dengan Kontrol Tambahan

Di bagian panduan ini, Anda akan bekerja dengan kontrol Kalender , yang menampilkan tanggal sebulan pada satu waktu. Kontrol Kalender adalah kontrol yang lebih kompleks daripada tombol, kotak teks, dan label yang telah Anda kerjakan dan mengilustrasikan beberapa kemampuan kontrol server lebih lanjut.

Di bagian ini, Anda akan menambahkan kontrol System.Web.UI.WebControls.Calendar ke halaman dan memformatnya.

Untuk menambahkan kontrol Kalender

  1. Di Visual Studio, beralihlah ke tampilan Desain .

  2. Dari bagian Standar kotak Alat, seret kontrol Kalender ke halaman dan letakkan di bawah elemen div yang berisi kontrol lain.

    Panel tag pintar kalender ditampilkan. Panel menampilkan perintah yang memudahkan Anda melakukan tugas yang paling umum untuk kontrol yang dipilih. Ilustrasi berikut ini memperlihatkan kontrol Kalender seperti yang dirender dalam tampilan Desain.

    Kontrol kalender dalam tampilan Desain

  3. Di panel tag pintar, pilih Format Otomatis.

    Kotak dialog Format Otomatis ditampilkan, yang memungkinkan Anda memilih skema pemformatan untuk kalender. Ilustrasi berikut ini memperlihatkan kotak dialog Format Otomatis untuk kontrol Kalender .

    Kotak dialog Format Otomatis (Kontrol kalender)

  4. Dari daftar Pilih skema, pilih Sederhana lalu klik OK.

  5. Beralih ke tampilan Sumber .

    Anda dapat melihat <elemen asp:Calendar> . Elemen ini jauh lebih panjang daripada elemen untuk kontrol sederhana yang Anda buat sebelumnya. Ini juga mencakup sublemen, seperti <WeekEndDayStyle>, yang mewakili berbagai pengaturan pemformatan. Ilustrasi berikut ini memperlihatkan kontrol Kalender dalam tampilan Sumber . (Markup persis yang Anda lihat di Tampilan sumber mungkin sedikit berbeda dari ilustrasi.)

    Kontrol kalender dalam tampilan Sumber

Memprogram Kontrol Kalender

Di bagian ini, Anda akan memprogram kontrol Kalender untuk menampilkan tanggal terpilih saat ini.

Untuk memprogram kontrol Kalender

  1. Dalam tampilan Desain , klik ganda kontrol Kalender .

    Penanganan aktivitas baru dibuat dan ditampilkan dalam file code-behind bernama FirstWebPage.aspx.cs.

  2. Selesaikan penanganan aktivitas SelectionChanged dengan kode berikut.

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

    Kode di atas mengatur teks kontrol label ke tanggal kontrol kalender yang dipilih.

Menjalankan Halaman

Sekarang Anda dapat menguji kalender.

Untuk menjalankan halaman

  1. Tekan CTRL+F5 untuk menjalankan halaman di browser.

  2. Klik tanggal di kalender.

    Tanggal yang Anda klik ditampilkan di kontrol Label .

  3. Di browser, lihat kode sumber untuk halaman tersebut.

    Perhatikan bahwa kontrol Kalender telah dirender ke halaman sebagai tabel, dengan setiap hari sebagai elemen td .

  4. Tutup browser.

Langkah berikutnya

Panduan ini telah mengilustrasikan fitur dasar perancang halaman Visual Studio. Sekarang setelah Anda memahami cara membuat dan mengedit halaman Formulir Web di Visual Studio, Anda mungkin ingin menjelajahi fitur lain. Misalnya, Anda mungkin ingin melakukan hal berikut: