PRAKTIKUM ASP 5 MENGGUNAKAN SERVER CONTROL Praktikum diambil berdasar Buku Pemrograman Web Dinamis dengan ASP.NET 4.5. ASP.NET Control merupakan komponen utama dari ASP.NET Framework yang dieksekusi di server kemudian hasilnya ditampilkan ke browser client. Controlcontrol tersebut dideklarasikan seperti HTML biasa, perbedaannya yaitu menuliskan tag <asp:> pada awal jenis control yang akan ditambahkan. Catatan : Untuk menampilkan Line Number ikuti langkah dibawah ini A. Menangani Event OnClik 1. Tekan New Project -> language C# -> Web -> ASP.NET Website Empty App -> Namakan dengan Bab2 dan tempatkan di Folder Pelajaran Anda.
Maka akan tampil seperti dibawah ini, jika Solution Anda tidak keluar, maka hierarki tertinggi pada Nama Project (Bab2) 2. Kemudian di Tab PROJECT -> Add New Item -> Web Form -> beri nama EventOnClick.aspx. Langkah-langkah seperti dibawah ini:
3. Ketikkan kode dan perhatikan lingkaran-lingkaran merah dibawah: 2 3 4 1 4. Klik 2x pada Button, dan ketikkan kode seperti contoh dibawah ini:
5. Setelah selesai mengetikkan code, tekan CTRL+F5 maka akan tampil tampilan program di browser dan klik tombol maka akan tampil hasilnya. B. Menggunakan ViewState 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama UseViewState.aspx
2. Klik Split View dan tambahkan Control dari Toolbox, Button dan Label ke preview design web, dan atur properties seperti kode dibawah ini: 4 2 5 3 2 1 3. Kemudian klik 2x Button Add maka akan tampil halaman source code C# dan ketikkan contoh kode dibawah ini:
Setelah itu tekan CTRl+F5 dan perhatikan hasilnya. C. Menggunakan Label Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama LabelControl.aspx seperti contoh dibawah ini: 2. Setelah itu tampak halaman Source Code seperti dibawah ini :
3. Drag dan Drop Control Label seperti dibawah ini ke dalam HalamanSource Code atau Design 4. Tambahkan kode CSS dan properties dari Label Control seperti contoh dibawah ini:
5. Klik kanan Halaman dan pilih View Code
6. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya. D. Menggunakan Jenis TextBox Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama JenisTextBox.aspx kemudian ketikkan kode seperti contoh dibawah ini: 2. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya.
E. Menggunakan AutoPostBack 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama AutoPostBack.aspx kemudian ketikkan kode seperti contoh dibawah ini: 2. Lihat sisi Design dengan Split View 3. Klik kanan Halaman dan pilih View Code, dan ketikkan kode dibawah ini:
4. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya. F. Menggunakan CheckBox Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama CheckBox.aspx kemudian ketikkan kode seperti contoh dibawah ini: Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code.
2. Klik Split View jika ingin melihat preview Design-nya
3. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya.
G. Menggunakan RadioButton Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama RadioButton.aspx kemudian ketikkan kode seperti contoh dibawah ini: Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code.
2. Klik Split View jika ingin melihat preview Design-nya 3. Klik 2 x pada Button SUBMIT, dan ketikkan kode seperti contoh berikut ini:
4. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya. H. Menggunakan Cross-Page Post 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama CrossPage.aspx kemudian ketikkan kode seperti contoh dibawah ini: Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code. 2. Klik Split View jika ingin melihat preview Design-nya 3. Buat New Item di Projet, pilih Web Form, beri nama CrossPageResult.aspx dan ketikkan kode dibawah ini:
4. Klik kanan pada halaman pilih View Code, dan ketikkan kode dibawah ini: 5. Setelah itu tekan CTRl+F5 pada CrossPage.aspx dan perhatikan hasilnya. I. Menggunakan Command Event
1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama CommandEvent.aspx kemudian ketikkan kode seperti contoh dibawah ini: Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code. 2. Klik kanan pada Halaman, kemudian ketikkan kode dibawah ini:
3. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya. J. Menggunakan Image Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama ImageControl.aspx kemudian ketikkan kode seperti contoh dibawah ini:
Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code. 2. Klik Kanan pada halaman pilih View Code dan ketikkan kode dibawah ini: 3. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya.
J. Menggunakan Panel Control 1. Klik Tab PROJECT -> New Item, tambahkan Web Form dan beri nama ImageControl.aspx kemudian ketikkan kode seperti contoh dibawah ini: Atau drag dan drop Control di Toolbox ke Source Code, kemudian atur propertiesnya di Source Code. 2. Klik 2 x Button Submit dan ketikkan kode dibawah ini: 3. Setelah itu tekan CTRl+F5 dan perhatikan hasilnya.
Selamat Mencoba
TUGAS 1. Praktekkan satu persatu contoh diatas dengan inputan berbeda (kreasi sendiri). Jika praktikum lengkap, maka project Anda seperti dibawah ini: 2. Buat Inputan Form untuk mengisi BIODATA seperti contoh berikut: INPUTAN BIODATA Nama Lengkap : Jenis Kelamin : L P Email : Password : Alamat : Cita-Cita : Presiden Menteri Lainnya SUBMIT 3. Buat Tampilan Hasil Resume dari inputan Form diatas dengan cara yang sudah dicontohkan penggunaan macam-macam Control diatas! Anda dapat menambahkan ide lain dalam inputan form diatas. 4. Share di blog Anda masing-masing, dan notifikasi ke email hadhiee@gmail.com. Selamat Mengerjakan. Salam Hangat, Hadi Wijaya