Pengenalan ASP.

NET Dan Web

1 Control
Objektif :

• Mengenal ASP.NET
• Mengaenal Web Form
• Mengenal Web Control

• Framework .NET
Microsoft .NET Framework (dibaca Microsoft Dot Net Framework) adalah sebuah komponen
yang dapat ditambahkan ke sistem operasi Microsoft Windows atau telah terintegrasi ke dalam
Windows (mulai dari Windows Server 2003 dan versi-versi Windows terbaru). Kerangka kerja
ini menyediakan sejumlah besar solusi-solusi program untuk memenuhi kebutuhan-kebutuhan
umum suatu program baru, dan mengatur eksekusi program-program yang ditulis secara
khusus untuk framework ini. .NET Framework adalah kunci penawaran utama dari Microsoft,
dan dimaksudkan untuk digunakan oleh sebagian besar aplikasi-aplikasi baru yang dibuat
untuk platform Windows.
Pada dasarnya, .NET Framework memiliki 2 komponen utama: CLR dan .NET Framework
Class Library. Program - program yang ditulis untuk .NET Framework dijalankan pada suatu
lingkungan software yang mengatur persyaratan-persyaratan runtime program. Runtime
environment ini, yang juga merupakan suatu bagian dari .NET Framework, dikenal sebagai
Common Language Runtime (CLR). CLR menyediakan penampilan dari application virtual
machine, sehingga para programmer tidak perlu mengetahui kemampuan CPU tertentu yang
akan menjalankan program. CLR juga menyediakan layanan-layanan penting lainnya seperti
jaminan keamanan, pengaturan memori, garbage collection dan exception handling /
penanganan kesalahan pada saat runtime. Class library dan CLR ini merupakan komponen inti
dari .NET Framework.

• ASP.NET
ASP.NET merupakan framework web open source untuk membangun aplikasi web modern
dan layanan. Dengan ASP.NET pengguna dapat dengan cepat membuat situs web berdasarkan
HTML, CSS dan JavaScript, skala ASP.Net ke jutaan pengguna dan mudah menambahkan
kemampuan yang lebih kompleks seperti API Web, form dengan banyak data atau komunikasi
secara real time.

• Web Form
Web Forms adalah bagian dari kerangka aplikasi web ASP.NET dan disertakan dengan Visual
Studio. Web Form adalah salah satu dari empat model pemrograman yang dapat digunakan
untuk membuat aplikasi web ASP.NET, yang lain ASP.NET MVC, ASP.NET Web Pages, dan
ASP.NET Page Single Aplikasi. Web Forms adalah halaman yang pengguna Anda minta untuk
menggunakan browser mereka. Halaman ini dapat ditulis dengan menggunakan kombinasi
HTML, client-server, kontrol server, dan kode server. Ketika pengguna meminta halaman,

1
dikompilasi dan dijalankan pada server dengan kerangka kerja, dan kemudian kerangka
menghasilkan markup HTML bahwa browser dapat membuat. Halaman Formulir Web
ASP.NET menyajikan informasi kepada pengguna dalam browser atau klien perangkat.

• Pembuatan Web Form dan Pengenalan Workspace

Pembuatan Proyek Web Form pada Visual Studio dapat dilakukan dengan membuka Visual
Studio, lalu pilih File → New → Project. Setelah itu pilih ASP.NET Web Application dan
tekan tombol OK.

Setelah membuat program baru, workspace yang ditampilkan adalah sebagai berikut :

B C
A
B1
D
2
Tampilan workspace sebenarnya dapat di atur sesuai keinginan, namun tampilan tersebut
adalah tampilan default dari Visual Studio. Berikut adalah penjelasan dari tampilan workspace
tersebut :
A. Toolbox : Berisi segala macam controls (web control) yang dapat di-drag and drop
untuk membuat aplikasi.
B. Main view : Dapat menampilkan desain tampilan, kode behind (C# code) dan markup
code (kode markup) dari sebuah file web form. Kita dapat berpindah ke mode desain
tampilan ataupun markup code (kode markup) dengan memilih tab yang berada pada
bagian B1.
C. Solution Explorer : Menampilkan struktur direktori dari proyek.
D. Properti : Menampilkan property dari setiap controls (web control) yang dipilih.
a. Pembuatan Web Form
Pembuatan web form dilakukan dengan melakukan klik kanan pada proyek pada Solution
Explorer, lalu pilih Add → New Item.

Setelah itu, pilih Web Form (Visual C#), berikan nama dari web form tersebut dan tekan OK.

Berikut adalah contoh Web Form (dengan nama coba.aspx) yang berhasil ditambahkan.
Tampilan dapat dilihat pada bagian Solutiun Explorer.

3
 b. View Design, View Markup dan View Designer
Setiap Web Form yang dibuat memiliki Markup, Code Behind dan Design. Kita dapat
membukanya dengan melakukan klik kanan pada nama Web Form tersebut.

c. Menjalankan Aplikasi
Setelah membuat Web Form, kita perlu menjalankan aplikasi untuk melihat output yang
dihasilkan. Menjalankan aplikasi dapat dilakukan dengan menekan tombol seperti pada gambar
berikut (atau dengan menekan F5) :

• Web Control
Web Control adalah komponen utama dari ASP.NET. Lebih mudahnya, Web Control adalah
Label, TextBox, CheckBox, dll yang kita sering temui dalam membuat aplikasi menggunakan
ASP.NET. Selain contoh web control yang telah disebutkan sebelumnya, ASP.NET memiliki
kira-kira 70 control yang dapat digunakan sesuai dengan kebutuhan.
Seluruh control tersebut dapat dikategorikan dalam 8 grup control sebagai berikut :
1. Standard Controls : berisi elemen standar, contohnya : button, input field, label, dll.
2. Validation Controls : berisi controls yang digunakan untuk validasi input. Contohnya
: RequiredFieldValidator, RangeValidator, dll.
3. Rich Controls : berisi gabungan controls yang umumnya digunakan untuk
menambahkan fitur yang lebih spesifik. Contohnya : calendar, file upload button,
rotating banner, advertisement, dll.
4. Data Controls : Berisi gabungan controls yang digunakan untuk koneksi database,
menampilkan data dari database. Contohnya : GridView, DataSource, dll.
5. Navigation Control : Berisi controls yang digunakan untuk navigasi, contohnya :
menu, tree view, dll.
6. Login Controls : Berisi controls untuk membuat form login, registration maupun
change password.
7. Web Part Controls : Berisi controls yang digunakan untuk membuat aplikasi yang
persolanizable, artinya control yang ditampilkan dapat dimodifikasi sesuai keinginan
user.

4
 8. HTML Controls : Berisi controls yang tersusun dari tag HTML. Contohnya : <table/>
untuk tabel, <b/> untuk bold, <p/> untuk paragraph, dll.
9. Chart Controls : Digunakan untuk menampilkan visualisasi data berupa chart.
Perlu diketahui bahwa ketika aplikasi ASP.NET menggunakan controls, maka pada code
behind dari aplikasi terseut pastinya membutuhkan impor library
System.Web.UI.WebControls.
Setiap controls memiliki property. Kita dapat mengubah tampilan dari controls tersebut
(misalnya mengubah ukuran font pada Label, mengubah background pada Form, mengubah
jenis font pada InputField) dengan menggunakan property. Hampir seluruh controls memiliki
property sebagai berikut :

• ID : Berguna untuk pengenal (identifier) dari sebuah control seperti halnya sebuah
nama variabel.
• BackColor : Berguna untuk mengatur warna latar pada suatu control.
• Enabled : Berguna untuk mengatur fungsional suatu control.
• Visible : Berguna untuk mengatur nampak atau tidaknya suatu control.
• Font : Berguna untuk mengatur font (ukuran, jenis font dan style).
• ForeColor : Berguna untuk mengatur warna font.
• BorderColor : Berguna untuk mengatur warna tepi pada suatu control.
• Width and Height : Berguna untuk mengatur lebar dan panjang suatu control.

Sebagai contoh, tampilan berikut adalah property untuk sebuah Button dengan ID Button1 :

5
• Standard Control
Pada bagian ini akan dipraktekan penggunaan server control standar sering digunakan.
d. Label
Control ini mempunyai Property tetapi tidak mempunyai event. Berikut adalah sebagian
Property yang dimiliki oleh control Label.
Fungsi control digunakan untuk menampilkan text yang ingin ditampilkan pada halaman web.
Dengan menggunakan control Label, text yang ditampilkan dapat ditulis secara
programmatically dari CodeBehind. Bukan hanya text yang akan ditampilkan tetapi property
juga dapat diubah secara programmatically.
Menggunakan Label
1. Buatlah sebuah File Web Form yang bernama “LabelExample”.
2. Drag sebuah label pada tampilan dan berikan property ID “Label_TodayDate”.
Selanjutnya pada Code Behind dari Web Form, tambahkan baris kode berikut :
LabelExample.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Label_TodayDate.Text = DateTime.Now.ToString();
Label_TodayDate.ToolTip = "Tanggal hari ini";
Label_TodayDate.ForeColor = System.Drawing.Color.Red;
}
3. Jalankan program dengan menekan F5.
4. Hasil dari program di atas adalah sebagai berikut :

e. TextBox
TextBox mempunyai satu event yang dapat digunakan yaitu TextChanged, event ini akan
dipanggil ketika nilai pada TextBox berubah.
Menggunakan TextBox
1. Buatlah sebuah File Web Form yang bernama “TextBoxExample”.
2. Drag sebuah TextBox dan berikan property ID “TextBox_Nama”.
3. Drag sebuah label pada tampilan dan berikan property ID “Label_Hasil”.

6
 4. Selanjutnya pada Code Behind dari Web Form, tambahkan baris kode berikut :
TextBoxExample.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label_Hasil.Text = String.Empty;
}
}

protected void TextBox_Nama_TextChanged(object sender, EventArgs e)

{
Label_Hasil.Text = "Hallo " + TextBox_Nama.Text + ", apa kabar?";
}
5. Jalankan program. Pada hasil yang ditampilkan, ketikkan sembarang teks pada
TextBox, lalu tekan Enter.

f. Button
Ada tiga jenis tombol yang dapat digunakan, yaitu Button, LinkButton, ImageButton.
Sedangkan event yang dimiliki oleh control ini adalah Click dan Command.
Menggunakan Button
1. Buatlah sebuah File Web Form yang bernama “ButtonExample”.
2. Drag sebuah Button dan berikan property ID “Button1”.
3. Drag sebuah label pada tampilan dan berikan property ID “Label1”.

4. Code file Button :

ButtonExample.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString() + " from Command event";
}

7
 5. Hasil dari ButtonExample

g. HyperLink
Hyperlink berguna untuk berpindah halaman dari suatu Web Form ke Web Form lainnya.
Hyperlink berfungsi seperti layaknya hyperlink yang dengan menggunakan tag <a></a> pada
HTML. Control ini hanya memilih satu data.
Menggunakan Hyperlink
1. Buatlah sebuah File Web Form yang bernama “HyperlinkExample”.
2. Drag sebuah Hyperlink dan berikan property ID “Hyperlink1” dan Navigate URL
“~/About.aspx”. Hyperlink tersebut nantinya akan membuka halaman About.

3. Properti dari Hyperlink

h. DropDownList
Layaknya Dropdownlist yang diketahui umumnya, dropdownlist digunakan pengguna untuk
memilih pilihan pada suatu daftar dan akan memungkinkan hanya satu pilihan saja. Berikut
antarmuka yang dibuat :
Menggunakan DropDownList
1. Buatlah sebuah File Web Form yang bernama “DropDownListExample”.
2. Drag sebuah DropDownList dan berikan property ID “DropDownList1”.
3. Drag sebuah Button dan berikan property ID “Button1”.
4. Drag sebuah Label dan berikan property ID “Label1”.

8
5. Untuk menambahkan item pada DropDownList, pilih DropDownList terlebih dahulu,
lalu klik pada property Items.

6. Pada tampilan Collection Editor, tekan “Add” untuk menambahkan item. Isikan item
dengan data berikut :
• Data 0
a. Text : Teknik Informatika
b. Value : 0
• Data 1
a. Text : Ilmu Komputer
b. Value : 1

9
 7. Code File :
DropDownListExample.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedValue + " " + DropDownList1.SelectedItem;
}

i. ListBox
ListBox memungkinkan nilai yang dipilih lebih dari satu.
Menggunakan ListBox
1. Buatlah sebuah File Web Form yang bernama “ListBoxExample”.
2. Drag sebuah ListBox dan berikan property ID “ListBox1”.
3. Drag sebuah Button dan berikan property ID “Button1”.
4. Drag sebuah Label dan berikan property ID “Label1”.

5. Untuk menambahkan item pada ListBox, klik pada ListBox yang telah dibuat terlebih
dahulu, lalu klik pada property Items.
6. Pada tampilan Collection Editor, tekan “Add” untuk menambahkan item. Isikan item
dengan data berikut :
• Data 0
a. Text : C#
b. Value : 0
• Data 1
a. Text : VB.NET
b. Value : 1

10
 7. Code file :
ListBoxExample.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Bahasa yang dipilih : <br/>";
foreach (ListItem li in ListBox1.Items)
{
if (li.Selected == true)
{
Label1.Text += li.Text + "<br/>";
}
}
}
8. Output dari control ini dapat dilihat pada tampilan berikut :

j. CheckBoxList
CheckBoxList memiliki fungsi yang sama seperti ListBox, hanya berbeda tampilan.
CheckBoxList memungkinkan kita membuat pilihan pada program.
Menggunakan CheckBoxList
1. Buatlah sebuah File Web Form yang bernama “CheckBoxListExample”.
2. Drag sebuah CheckBoxList dan berikan property ID “CheckBoxList1”.
3. Drag sebuah Button dan berikan property ID “Button1”.
4. Drag sebuah Label dan berikan property ID “Label1”.

5. Untuk menambahkan item pada CheckBoxList, klik pada CheckBoxList yang telah
dibuat terlebih dahulu, lalu klik pada property Items.

11
 9. Pada tampilan Collection Editor, tekan “Add” untuk menambahkan item. Isikan item
dengan data berikut :
• Data 0
a. Text : C#
b. Value : 0
• Data 1
a. Text : VB.NET
b. Value : 1
6. Code file :
CheckBoxList.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Bahasa yang dipilih : <br/>";
foreach (ListItem li in CheckBoxList1.Items)
{
if (li.Selected == true)
{
Label1.Text += li.Text + "<br/>";
}
}
}
7. Output dari control ini dapat dilihat pada tampilan berikut :

k. RadioButtonList
RadioButtonList memungkinkan kita untuk membuat pilihan, sama seperti CheckBoxList dan
ListBox. Perbedaannya adalah nilai yang dipilih pada RadioButtonList hanyalah satu.
Menggunakan RadioButtonList
1. Buatlah sebuah File Web Form yang bernama “RadioButtonListExample”.
2. Drag sebuah RadioButtonList dan berikan property ID “RadioButtonList1”.
3. Drag sebuah Button dan berikan property ID “Button1”.
4. Drag sebuah Label dan berikan property ID “Label1”.

12
 10. Untuk menambahkan item pada RadioButtonList, klik pada RadioButtonList yang telah
dibuat terlebih dahulu, lalu klik pada property Items. Isikan item dengan data berikut :
• Data 0
a. Text : C#
b. Value : 0
• Data 1
a. Text : VB.NET
b. Value : 1
5. Pada tampilan Collection Editor, tekan “Add” untuk menambahkan item.
6. Code file :
RadioButtonList.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Bahasa yang dipilih : ";
Label1.Text += RadioButtonList1.SelectedItem.ToString();
}
7. Output dari control ini dapat dilihat pada tampilan berikut :

13