Pengeditan Kode ASP.NET Formulir Web di Visual Studio 2013

oleh Erik Reitan

Di banyak halaman ASP.NET Formulir Web, Anda menulis kode di Visual Basic, C#, atau bahasa lain. Editor kode di Visual Studio dapat membantu Anda menulis kode dengan cepat sambil membantu Anda menghindari kesalahan. Selain itu, editor menyediakan cara bagi Anda untuk membuat kode yang dapat digunakan kembali untuk membantu mengurangi jumlah pekerjaan yang perlu Anda lakukan.

Panduan ini menggambarkan berbagai fitur editor kode Visual Studio.

Selama panduan ini, Anda akan mempelajari cara:

• Memperbaiki kesalahan pengkodan sebaris.
• Refaktor dan ganti nama kode.
• Ganti nama variabel dan objek.
• Sisipkan cuplikan kode.

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.

  Nota

  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.

Untuk membuat proyek aplikasi Web

1. Buka Microsoft Visual Studio.

2. Pada menu File, pilih Proyek Baru.
   

   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 .
   

6. Selanjutnya, pilih templat Formulir Web dan klik tombol OK untuk membuat proyek.
   

   Visual Studio membuat proyek baru yang menyertakan fungsionalitas bawaan berdasarkan templat Formulir Web.

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. 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.
2. Pilih grup Visual C# ->Templat web di sebelah kiri. Kemudian, pilih Formulir Web dari daftar tengah dan beri nama FirstWebPage.aspx.
   
3. Klik Tambahkan untuk menambahkan halaman Formulir Web ke proyek Anda.
   Visual Studio membuat halaman baru dan membukanya.
4. Selanjutnya, atur halaman baru ini sebagai halaman pengaktifan default. Di Penjelajah Solusi, klik kanan halaman baru bernama FirstWebPage.aspx dan pilih Atur Sebagai Halaman Mulai. Lain kali Anda menjalankan aplikasi ini untuk menguji kemajuan kami, Anda akan secara otomatis melihat halaman baru ini di browser.

Mengoreksi Kesalahan Pengkodan Sebaris

Editor kode di Visual Studio membantu Anda menghindari kesalahan saat menulis kode, dan jika Anda telah membuat kesalahan, editor kode membantu Anda memperbaiki kesalahan. Di bagian panduan ini, Anda akan menulis baris kode yang menggambarkan fitur koreksi kesalahan di editor.

Untuk memperbaiki kesalahan pengkodian sederhana di Visual Studio

1. Dalam tampilan Desain , klik dua kali halaman kosong untuk membuat handler untuk peristiwa Muat untuk halaman tersebut.
   Anda menggunakan penanganan aktivitas hanya sebagai tempat untuk menulis beberapa kode.

2. Di dalam handler, ketik baris berikut yang berisi kesalahan dan tekan ENTER:

   string myStr = "Loading..."
   

   Saat Anda menekan ENTER, editor kode menempatkan garis bawah hijau dan merah (biasanya memanggil baris "berlekuk"), di bawah area kode yang mengalami masalah. Garis bawah hijau menunjukkan peringatan. Garis bawah merah menunjukkan kesalahan yang harus Anda perbaiki.

   Tahan penunjuk mouse myStr untuk melihat tooltip yang berisi informasi tentang peringatan. Selain itu, tahan penunjuk mouse Anda di atas garis bawah merah untuk melihat pesan kesalahan.

   Gambar berikut menunjukkan kode dengan garis bawah.

   
   Kesalahan harus diperbaiki dengan menambahkan titik koma ; ke akhir baris. Peringatan hanya memberi tahu Anda bahwa Anda belum menggunakan myStr variabel.

   Nota

   Anda melihat pengaturan pemformatan kode Anda saat ini di Visual Studio dengan memilih Alat ->Opsi ->Font dan Warna.

Pemfaktoran ulang dan Penggantian Nama

Pemfaktoran ulang adalah metodologi perangkat lunak yang melibatkan restrukturisasi kode Anda untuk membuatnya lebih mudah dipahami dan dipertahankan, sambil mempertahankan fungsionalitasnya. Contoh sederhananya adalah Anda menulis kode dalam penanganan aktivitas untuk mendapatkan data dari database. Saat mengembangkan halaman, Anda menemukan bahwa Anda perlu mengakses data dari beberapa penangan data yang berbeda. Oleh karena itu, Anda melakukan refaktor kode halaman dengan membuat metode akses data pada halaman dan menyisipkan panggilan ke metode tersebut pada handler.

Editor kode menyertakan alat untuk membantu Anda melakukan berbagai tugas pemfaktoran ulang. Dalam panduan ini, Anda akan bekerja dengan dua teknik pemfaktoran ulang: mengganti nama variabel dan mengekstrak metode. Opsi refaktor lainnya termasuk merangkum bidang, mempromosikan variabel lokal ke parameter metode, dan mengelola parameter metode. Ketersediaan opsi pemfaktoran ulang ini tergantung pada lokasi dalam kode.

Refactoring Kode

Skenario refaktor umum adalah membuat (mengekstrak) metode dari kode yang ada di dalam anggota lain, seperti metode. Ini mengurangi ukuran anggota asli dan membuat kode yang diekstrak dapat digunakan kembali.

Di bagian panduan ini, Anda akan menulis beberapa kode sederhana, dan kemudian mengekstrak metode darinya. Pemfaktoran ulang didukung untuk C#, sehingga Anda akan membuat halaman yang menggunakan C# sebagai bahasa pemrogramannya.

Untuk mengekstrak metode di halaman C#

1. Beralih ke tampilan Desain .

2. Di Kotak Alat, dari tab Standar , seret kontrol Tombol ke halaman.

3. Klik dua kali kontrol Tombol untuk membuat handler untuk peristiwa Klik , lalu tambahkan kode yang disorot berikut:

   protected void Button1_Click(object sender, EventArgs e)
   {
   
       System.Collections.ArrayList alist = 
           new System.Collections.ArrayList();
       int i;
       string arrayValue;
       for(i=0; i<5; i++)
       {
           arrayValue = "i = " + i.ToString();
           alist.Add(arrayValue);
       }
       for(i=0; i<alist.Count; i++)
       {
           Response.Write("<br />" + alist[i]);
       };
   }
   

   Kode membuat objek ArrayList , menggunakan perulangan untuk memuatnya dengan nilai, lalu menggunakan perulangan lain untuk menampilkan konten objek ArrayList .

4. Tekan CTRL+F5 untuk menjalankan halaman, lalu klik tombol untuk memastikan bahwa Anda melihat output berikut:

   i = 0
   i = 1
   i = 2
   i = 3
   i = 4
   

5. Kembali ke editor kode, lalu pilih baris berikut di penanganan aktivitas.

   for(i=0; i<alist.Count; i++) 
   {
         Response.Write("<br />" + alist[i]);
   }
   

6. Klik kanan seleksi, klik Refaktor, lalu pilih Ekstraksi Metode.

   Kotak dialog Metode Ekstrak muncul.

7. Dalam kotak Nama Metode Baru , ketik DisplayArray, lalu klik OK.

   Editor kode membuat metode baru bernama DisplayArray, dan memanggil metode baru tersebut di handler Klik tempat perulangan awalnya.

   protected void Button1_Click(object sender, EventArgs e)
   {
       System.Collections.ArrayList alist = 
           new System.Collections.ArrayList();
       int i;
       string arrayValue;
       for(i=0; i<5; i++)
       {
           arrayValue = "i = " + i.ToString();
           alist.Add(arrayValue);
       }
       i = DisplayArray(alist, i);
   }
   

8. Tekan CTRL+F5 untuk menjalankan halaman lagi, dan klik tombol .

   Halaman berfungsi sama seperti sebelumnya. Metode DisplayArray ini sekarang dapat dipanggil dari mana saja di kelas halaman.

Mengganti Nama Variabel

Saat Anda bekerja dengan variabel, serta objek, Anda mungkin ingin mengganti namanya setelah direferensikan dalam kode Anda. Namun, mengganti nama variabel dan objek dapat menyebabkan kode rusak jika Anda melewatkan penggantian nama salah satu referensi. Oleh karena itu, Anda dapat menggunakan pemfaktoran ulang untuk melakukan penggantian nama.

Untuk menggunakan pemfaktoran ulang untuk mengganti nama variabel

1. Di penanganan aktivitas Klik , temukan baris berikut ini:

   System.Collections.ArrayList alist = 
       new System.Collections.ArrayList;
   

2. Klik kanan nama alistvariabel , pilih Refaktor, lalu pilih Ganti Nama.

   Kotak dialog Ganti Nama muncul.

3. Dalam kotak Nama baru , ketik ArrayList1 dan pastikan kotak centang Perubahan referensi pratinjau telah dipilih. Lalu klik OK.

   Kotak dialog Pratinjau Perubahan muncul, dan menampilkan pohon yang berisi semua referensi ke variabel yang Anda ganti nama.

4. Klik Terapkan untuk menutup kotak dialog Pratinjau Perubahan .

   Variabel yang merujuk khusus ke instans yang Anda pilih diganti namanya. Namun, perhatikan bahwa variabel alist dalam baris berikut tidak diganti namanya.

   private int DisplayArray(System.Collections.ArrayList alist, 
       int i)
   

   Variabel alist dalam baris ini tidak diganti namanya karena tidak mewakili nilai yang sama dengan variabel alist yang Anda ganti namanya. Variabel alist dalam DisplayArray deklarasi adalah variabel lokal untuk metode tersebut. Ini menggambarkan bahwa menggunakan refaktorisasi untuk mengganti nama variabel berbeda dari sekadar melakukan tindakan temukan dan ganti di editor; refaktorisasi mengganti nama variabel dengan pemahaman tentang semantik variabel yang sedang diolahnya.

Menyisipkan Cuplikan

Karena ada banyak tugas pengkodean yang sering perlu dilakukan pengembang Web Forms, editor kode menyediakan pustaka cuplikan, atau blok kode yang ditulis sebelumnya. Anda dapat menyisipkan cuplikan ini ke halaman Anda.

Setiap bahasa yang Anda gunakan di Visual Studio memiliki sedikit perbedaan dalam cara Anda menyisipkan cuplikan kode. Untuk informasi mengenai memasukkan cuplikan, lihat Cuplikan Kode IntelliSense Visual Basic. Untuk informasi tentang menyisipkan cuplikan di Visual C#, lihat Cuplikan Kode Visual C#.

Langkah Selanjutnya

Panduan ini telah mengilustrasikan fitur dasar editor kode Visual Studio 2010 untuk memperbaiki kesalahan dalam kode Anda, merefaktor kode, mengganti nama variabel, dan menyisipkan cuplikan kode ke dalam kode Anda. Fitur tambahan di editor dapat membuat pengembangan aplikasi cepat dan mudah. Misalnya, Anda mungkin ingin:

• Pelajari selengkapnya tentang fitur IntelliSense, seperti memodifikasi opsi IntelliSense, mengelola cuplikan kode, dan mencari cuplikan kode secara online. Untuk informasi selengkapnya, lihat Menggunakan IntelliSense.
• Pelajari cara membuat cuplikan kode Anda sendiri. Untuk informasi selengkapnya, lihat Membuat dan Menggunakan Cuplikan Kode IntelliSense
• Pelajari selengkapnya tentang fitur khusus Visual Basic dari cuplikan kode IntelliSense, seperti menyesuaikan cuplikan dan pemecahan masalah. Untuk informasi selengkapnya, lihat Cuplikan Kode Visual Basic IntelliSense
• Pelajari selengkapnya tentang fitur C#-spesifik IntelliSense, seperti pemfaktoran ulang dan cuplikan kode. Untuk informasi selengkapnya, lihat Visual C# IntelliSense.