Contoh Aplikasi Web Sederhana Menggunakan ASP.NET dan C#

Setelah kita sudah melakukan instalasi Visual Studio (2005/2008/2010), kini saatnya kita membuat sebuah aplikasi web dengan ASP.NET dan C# untuk pertama kali. Kita akan membuat sebuah aplikasi web interaktif yang memiliki fungsi yang cukup sederhana juga yaitu menerima masukan (input) dari pengguna (user) berupa nama dan memberikan keluaran (ouput) berupa ucapan kepada orang yang namanya diberikan. Meskipun terlihat sederhana, namun latihan ini mempunyai tujuan dan manfaat antara lain:

1. Memberikan contoh dasar pembuatan aplikasi web menggunakan ASP.NET dan C#.
2. Mengenal bentuk pemrograman aplikasi web menggunakan ASP.NET dan C#.
3. Memperkenalkan penggunaan beberapa control ASP.NET seperti TextBox, Button, dan Label.
4. Memperkenalkan pemrograman C# terkait pemrosesan kalimat (string).

Persiapan

Langkah pertama yang akan kita lakukan adalah membuat Web Project. Kita mulai latihan pertama ini dengan membuka Visual Studio. Setelah Visual Studio dibuka, ikuti langkah-langkah berikut:

1. Pilih menu File
2. Pilih menu New Project, maka Visual Studio akan memunculkan dialog New Project
3. Pada bagian Project Type, pilih Visual C#. Ini akan mengakibatkan perubahan daftar item yang ada di bagian Template.
4. Pada bagian Template, pilih ASP.NET Web Application.
5. Pada bagian Name, tuliskan PoertyWeb1, ini merupakan nama web project yang kita buat.
6. Pada bagian Location, pilih lokasi tempat penyimpanan file project kita. Saya sarankan untuk membuat sendiri lokasi penyimpanan file project misalnya yang saya buat diD:\VS2008.
7. Pada bagian Solution Name, secara otomatis, Solution name akan disesuaikan dengan nama web project kita yaitu PoetryWeb1. Ubah nama tersebut menjadi PoetrySolution1.
8. Pada bagian Create directory for solution, pastikan checkbox tersebut sudah dicentang.
9. Klik tombol OK. Maka project web pertama kita sudah siap untuk kita program dan file Default.aspx akan otomatis dibuka untuk kita dapat memulai bekerja.

Untuk memahami struktur file project yang dibuatkan oleh Visual Studio, silahkan buka direktori D:\VS2008\PoetrySolution1\PoetryWeb1. Anda akan melihat beberapa file yang dibuat secara otomatis oleh Visual Studio, salah satunya adalah Default.aspx yang akan menjadi fokus kita berikutnya.

Design, Coding, Compiling

Sekarang kita dapat memulai melakukan desain halaman web dan pemrogramannya. Sebagai informasi, setiap halaman ASP.NET akan selalu diakhiri oleh extension .aspx. Sekarang kita perhatikan halaman Default.aspx yang sudah dibuka secara ototmatis oleh Visual Studio. Pastikan bahwa tampilan Default.aspx adalah dalam mode Source. Jika belum, temukan tombol Source di bagian kiri bawah window Visual Studio. Sebagai informasi, ada 3(tiga) jenis mode tampilan halaman ASP.NET yaitu Design, Split, dan Source. Kita akan membahasnya lebih detil dalam artikel yang lain. Pada mode Source, yang kita lihat adalah tag-tag HTML dari halaman ASP.NET kita. Saya pribadi lebih menyukai mode Source karena lebih ringan, sederhana, dan dapat melakukan perubahan tag-tag ASP.NET maupun HTML secara langsung. Sekarang, sesuaikan code di halaman Default.aspx Anda dengan code berikut:

Default.aspx:

<form id="form1" runat="server">
  <div>
    <asp:Label ID="lblResponse" runat="server"></asp:Label><br />
    <asp:TextBox ID="txbName" runat="server"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit"
      onclick="btnSubmit_Click" />
  </div>
</form>

Selanjutnya, kita akan melakukan perubahan code C# pada file Default.aspx.cs. File ini merupakan file code dari halaman web Default.aspx. Jadi, untuk setiap halaman web ASP.NET (*.aspx) akan selalu mempunyai pasangan file CodeBehind C# nya (*.cs) yang namanya sama dengan nama halaman web ASP.NET nya. Misalnya: Default.aspx akan memiliki Default.aspx.cs, Home.aspx akan memiliki Home.aspx.cs, dll. Untuk memunculkan file C# ini, kita dapat melakukan klik kanan pada file ASPX di Solution Explorer kemudian pilih View Codepada menu yang muncul setelah klik kanan. Jika kita sudah membuka file ASPX maka kita dapat membuka file CodeBehind dengan mudah yaitu dengan menekal tombol F7 di keyboard. Setelah file Default.aspx.cs terbuka, lakukan penyesuaian dengan code berikut:

Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e) {
}

protected void btnSubmit_Click(object sender, EventArgs e) {
  lblResponse.Text = "Halo " + txbName.Text + ". Anda sedang belajar C# dan ASP.NET.";
}

Dengan demikian, desain dan coding sudah selesai. Tahap selanjutnya adalah melakukan kompilasi. Ada 3(tiga) cara yang dapat dilakukan untuk melakukan kompilasi yaitu:

• Cara I: Klik menu Build di toolbar, kemudian klik menu Build PoetryWeb1 yang muncul di bawahnya.
• Cara II: Klik kanan pada project PoetryWeb1 di Solution Explorer. Pilih menu Build pada daftar menu yang muncul.
• Cara III: Gunakan shortcut Ctrl+Shift+B. Caranya, tekan tombol Control dan Shift bersamaan kemudian ikuti dengan menekan tombol B.

Pastikan bahwa Anda akan mendapati pesan berikut di window Output untuk meyakinkan bahwa proses kompilasi telah berhasil dilakukan tanpa error:

------ Build started: Project: PoetryWeb1, Configuration: Debug Any CPU ------
PoetryWeb1 -> D:\JavaLangIT\Poetry\VS2008\PoetrySolution1\PoetryWeb1\bin\PoetryWeb1.dll
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========

Pengujian/Testing

Untuk menguji aplikasi yang sudah kita buat, kita dapat melakukannya dengan cara paling sederhana yaitu dengan memanfaatkan fungsi Debugging yang disediakan oleh Visual Studio. Fungsi Debugging dapat kita akses dari menu Debug lalu pilih Start Debugging atau tekan tombol F5 yang merupakan shortcut untuk fungsi Debugging. Fungsi Debugging pada dasarnya melakukan kompilasi terlebih dahulu kemudian memunculkan web browser default (biasanya Internet Explorer) untuk menampilkan aplikasi yang sudah dikompilasi. Jadi, ketika browser web sudah dimunculkan oleh Visual Studio maka kita dapat melakukan pengujian pada aplikasi yang sudah kita buat. Kita dapat memasukkan nama kita di form yang kita buat, misalnya kita memasukkan nama “Gatot”, setelah kita menekan tombol Submit maka kita akan mendapatkan balasan dari aplikasi kita berupa kalimat “Halo, Gatot. Anda sedang belajar C# dan ASP.NET.”. Nah, silahkan mencoba lagi dengan memasukkan nama Anda sendiri.

Sebenarnya ada cara lain yang lebih baik untuk melakukan pengujian aplikasi web yang kita buat. Namun, karena cara pengujian tersebut terkait dengan teknik instalasi aplikasi .Net di IIS, maka saya akan menjelaskannya lebih detil dalam artikel selanjutnya yaitu Instalasi Aplikasi ASP.NET di IIS.

Demikian penjelasan tahap demi tahap untuk membuat sebuah contoh aplikasi web sederhana menggunakan ASP.NET dan C#. Silahkan memanfaatkan source code yang terlampir atau silahkan bertanya jika Anda menemui kesulitan. Semoga bermanfaat.

Posted in: ASP