Modul as pdot-net-2015

Pemrograman Web
Menggunakan ASP.NET
LABKOM STIKOM Poltek Cirebon oleh iid anwar hidayat
Ref 2015
MODUL PRAKTIKUM

Pemrograman Web Menggunakan ASP.NET 1
DAFTAR ISI
DAFTAR ISI........................................................................................................................... 1
PENDAHULUAN...................................................................................................................... 4
Apa itu ASP.NET................................................................................................................. 4
Webserver IIS (Internet Information Service)........................................................................ 4
.NET Framework................................................................................................................. 5
Konfigurasi IIS ................................................................................................................... 5
Uji Coba melalui localhost.................................................................................................... 5
Menggunakan Microsoft Visual Studio 2010 .............................................................................. 8
DASAR PEMROGRAMAN C# .................................................................................................. 11
Control Event dan Subroutines........................................................................................... 11
Page Event ...................................................................................................................... 12
Variabel........................................................................................................................... 13
Array............................................................................................................................... 15
Function .......................................................................................................................... 16
Operator.......................................................................................................................... 17
Conditional Logic .............................................................................................................. 19
Loops.............................................................................................................................. 21
Membangun Aplikasi Web ASP.NET ....................................................................................... 25
Web Forms ...................................................................................................................... 25
HTML Server Controls ....................................................................................................... 25
Menggunakan HTML Server Control.................................................................................... 26
Web Server Control .......................................................................................................... 29
Standard Web Server Controls ........................................................................................... 29
Label............................................................................................................................ 29

TextBox........................................................................................................................ 30
HiddenField .................................................................................................................. 30
Button.......................................................................................................................... 30
ImageButton................................................................................................................. 31
LinkButton.................................................................................................................... 31
HyperLink..................................................................................................................... 32
CheckBox ..................................................................................................................... 32
RadioButton.................................................................................................................. 32
Image.......................................................................................................................... 32
PlaceHolder .................................................................................................................. 32
Panel ........................................................................................................................... 33
DropDownList ............................................................................................................... 33
ListBox......................................................................................................................... 34
Latihan: ....................................................................................................................... 37
Form Validation Control..................................................................................................... 38
Desain Database.................................................................................................................. 40
Membuat Database........................................................................................................... 40
Membuat Table ................................................................................................................ 43
Manajemen Data Melalui Table Editor................................................................................. 45
Mengubah struktur Table .................................................................................................. 46
Menjalankan Perintah SQL................................................................................................. 47
ADO.NET (ActiveX Data Objects .NET) ................................................................................... 49
Pengenalan ADO.NET ....................................................................................................... 49
Mengatur Authentikasi Database........................................................................................ 52
Mengatur Konfigurasi ConnectionString............................................................................... 52
Menggunakan Control Repeater ......................................................................................... 53

Repeater ...................................................................................................................... 53
Menggunakan DataList...................................................................................................... 55
Menggunakan GridView dan DetailsView untuk memanage data............................................ 57
Menggunakan DetailsView untuk menampilkan data ............................................................ 61
Mendesain Tampilan DetailsView........................................................................................ 63
Edit Data dengan DetailsView ............................................................................................ 63
Menghapus Data pada GridView......................................................................................... 67
Menginput Data dengan DetailsView................................................................................... 69
Master Page........................................................................................................................ 73
Membuat Master Page ...................................................................................................... 73
Menggunakan Master Page................................................................................................ 73
Membuat Laporan................................................................................................................ 74
Tugas Akhir......................................................................................................................... 77

PENDAHULUAN
ASP.NET adalah salah satu teknologi pengembangan web yang paling menarik yang ditawarkan
saat ini. ASP.NET adalah platform handal yang dilengkapi dengan banyak sekali fungsi built-in,
tingkat kinerja yang mengagumkan, dan merupakan salah satu IDE (Integrated Development
Environment) terbaik yang ditelah terintegrasi dalam paket Visual Studio.
Apa itu ASP.NET
ASP.NET merupakan teknologi server-side untuk mengembangkan aplikasi web berbasis Microsoft
.NET Framework.
Pada saat browser meminta (request) halaman web yang dibuat dengan teknologi Client-side
seperti HTML, javascript dan Cascading Style Sheet (CSS), web server hanya mengirimkan balik
file-file tersebut pada browser tanpa melakukan proses apapun. Kemudian browserlah yang
bertanggung jawab sepenuhnya untuk membaca dan menterjemahkan script atau markup pada
file-file tersebut.
Sedangkan teknologi Server-side seperti ASP.NET berbeda, script atau kode tidak diterjemahkan
disisi client tapi diinterpretasikan oleh server web. Sehingga kode pada halaman dibaca oleh server
dan digunakan untuk menghasilkan HTML, JavaScript dan CSS yang kemudian dikirim ke browser.
Sebelum belajar ASP.NET, pastikan Anda telah menginstal komponen-komponen software yang
dibutuhkan dan telah berjalan dengan baik pada komputer Anda.
Webserver IIS (Internet Information Service)
IIS adalah web server bawaan Microsoft Windows yang dapat digunakan untuk menjalankan
aplikasi web ASP.NET. Anda dapat menginstal IIS melalui CD master Windows seperti Windows
2000 Professional, Server dan Advances Server, Windows XP Professional, Windows Vista, Windows
7 dan semua versi Windows Server.
Untuk menginstal IIS ikuti langkah dibawah ini:
1. Masukkan CD master Windows
2. Buka Control Panel dan pilih Add or Remove Programs
3. Pilih Add/Remove Windows Components. Daftar komponen window akan ditampilkan
4. Pada daftar komponen berikan tanda ceklis pada Internet Information Service (IIS)
5. Klik Next untuk menginstal IIS
1

.NET Framework
Untuk memulai membuat aplikasi ASP.NET Anda perlu menginstal .NET Framework dan Software
Development Kit (SDK). NET Framework berisi file-file yang diperlukan untuk menjalankan dan
melihat halaman ASP.NET, sedangkan SDK berisi file-file contoh, dokumentasi dan berbagai
peralatan pendukung.
.NET Framework dan SDK dapat didownload melalui situs www.asp.net.
Selain itu untuk lebih mudahnya Anda dapat menginstal Microsoft Visual Studio .NET atau Microsoft
Visual Web Developers 2010 Express include SQL Server Express.
Konfigurasi IIS
Untuk membuka konfigurasi IIS dapat dilakukan melalui jendela Control Panel, System and
Security, Administrative Tools kemudian klik dua kali pada shortcut Internet Information Service
(IIS) Manager.
Klik dua kali pada Menu Bindings untuk mengubah port default HTTP, kemudian pada jendela Site
Bindings pilih http dan klik tombol edit kemudian ketik port yang diinginkan. Misalnya 81 sehingga
untuk mengakses HTTP melalui Web Server IIS dari browser adalah http://localhost:81
Uji Coba melalui localhost
Klik menu Basic Settings untuk melihat root direktori dan untuk mengatur user akses klik pada
tombol Connect as..
Isilah user dan password administrator komputer kemudian klik OK.
Untuk menguji pengaturan yang baru klik pada tombol Test Settings..

Agar dapat menyimpan file asp.net yang Anda buat pada folder C:Inetpubwwwroot aturlah hak
akses dengan cara klik kanan pada folder wwwroot, kemudian buka tab Security, pilih Users pada
komputer dan pastikan semua ter-centang pada Permissions for Users.
Sekarang buatlah file asp.net menggunakan notepad dengan isi sebagai berikut :
File : testing.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First ASP.NET 2.0 Page</title>
<script runat="server" language="C#">
void Page_Load(Object s, EventArgs e){
timeLabel.Text = DateTime.Now.ToString();
}
</script>
</head>
<body>
<p>Selamat Datang di ASP.NET</p>
<p>Waktu sekarang adalah:
<asp:Label runat="server" id="timeLabel" /></p>
</body>
</html>
Untuk melihat hasilnya bukalah browser dan ketikkan pada address bar
http://localhost/testing.aspx

Menggunakan Microsoft Visual Studio 2010
Membuat file aspx bisa dilakukan melalui notepad dengan mengetikkan semua script baik html
maupun bahasa pemrogramannya, akan tetapi kita bisa memanfaatkan Tools yang dikeluarkan
oleh Microsoft khusus untuk men-develop aplikasi berbasis .NET Framework yaitu Microsoft Visual
Studio.
Setelah terinstal dengan baik, jalankan Ms Visual Studio melalui Start > Program Files, kemudian
buat website baru untuk menampung file-file latihan yang akan kita buat selama praktikum.
Pilih menu File > New > Website
Kemudian pilih Visual C# pada Installed Templates, pilih ASP.NET Web Site dan tentukan lokasi
file-file website akan disimpan

Klik OK untuk membuat website baru, kemudian akan tampil pada Editor Visual Studio file
Default.aspx yang merupakan file default website.
Untuk menambahkan file baru pilih icon Add New Item pada toolbars
Dan pilih Visual C# pada Installed Templates, pilih HTML Page dan ketik nama file yang akan kita
buat dengan ekstensi .aspx

Klik tombol Add dan sesuaikan isi file testing.aspx dengan yang ada pada modul.
Klik icon Start Debugging pada toolbars untuk menjalankan file testing.aspx pada browser.

DASAR PEMROGRAMAN C#
Control Event dan Subroutines
Event merupakan aksi yang dibangkitkan kemudian code program dijalankan untuk merespon aksi
tersebut. Sebagai contoh, pada script dibawah ini terdapat label dan tombol, perhatikan
penggunaan atribut onClick pada tombol. Saat tombol diklik maka Subroutines button_Click akan
dijalankan.
File: ClickEvent.aspx
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Click the Button</title>
public void button_Click(Object s, EventArgs e) {
messageLabel.Text = "Hello World";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button id="button" runat="server" OnClick="button_Click" Text="Click Me" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>
Ada banyak event yang dapat digunakan meskipun beberapa event hanya ditemukan pada kontrol
tertentu, berikut ini adalah event yang dapat Anda gunakan.
OnClick
Subrutin ini akan dijalankan saat sebuah tombol di klik.
OnCommand
Seperti OnClick, subrutin ini akan dijalankan pada saat sebuah tombol diklik.
OnLoad
Subroutine ini akan dijalankan ketika tombol diload, biasanya ketika halaman pertama kali diload.
OnInit
Ketika tombol diinisialisasi, setiap subrutin yang diberikan dalam atribut ini akan jalankan.
OnPreRender
Kita dapat menggunakan atribut ini untuk menjalankan script sebelum tombol ditampilkan.
OnUnload
Subrutin ini akan dijalankan ketika kontrol dihapus dari memori/buffer, dengan kata lain ketika
pengguna berpindah kehalaman lain atau saat menutup browser.
OnDisposed
Subroutine yang ditentukan oleh atribut ini dijalankan ketika tombol dilepaskan dari memori.
2

OnDataBinding
Atribut ini dinyalakan secara otomatis ketika tombol terikat ke sumber data.
Latihan :
Buatlah halaman seperti dibawah ini dengan fungsi tombol masing-masing adalah:
Nama untuk menampilkan nama
Alamat untuk menampilkan alamat
Clear untuk membersihkan layar
Page Event
Selain event diatas yang dapat dibangkitkan melalui kontrol, ada event jenis lain yaitu page event
dimana semua event dihasilkan oleh sebuah halaman.
Berikut ini event pada halaman yang sering digunakan.
Page_Init
Dijalankan ketika halaman diinisialisasi
Page_Load
Dijalankan pada saat pertama kali browser memproses permintaan (request) halaman, dan semua
kontrol didalamnya diperbarui.
Page_PreRender
Dijalankan pada saat pertama kali sebuah halaman dipanggil, tetapi sebelum browser menerima
respon apapun dari server
Page_UnLoad
Dijalankan ketika halaman tidak lagi dibutuhkan oleh server dan tidak ada aktifitas apapun.
Urutan diatas sesuai dengan peristiwa mereka dieksekusi. Dengan kata lain, event Page_Init
merupakan event pertama yang dipanggil oleh halaman, diikuti oleh Page_Load, Page_PreRender,
dan akhirnya Page_UnLoad.

Contoh dibawah ini menggambarkan cara kerja page event, Anda tidak perlu menentukan urutan
subroutine yang akan dijalankan karena secara default subroutine akan dijalankan sesuai dengan
nama-nama event tersebut.
File : pageEvent.aspx
<html>
<head>
<title>Event Page</title>
void Page_Init(Object s, EventArgs e)
{
messageLabel.Text = "1. Page_Init <br/>";
}
void Page_Load(Object s, EventArgs e)
{
messageLabel.Text += "2. Page_Load <br/>";
}
void Page_PreRender(Object s, EventArgs e)
{
messageLabel.Text += "3. Page_PreRender <br/>";
}
void Page_UnLoad(Object s, EventArgs e)
{
messageLabel.Text += "4. Page_UnLoad <br/>";
}
</script>
</head>
<body>
</form>
</body>
</html>
Variabel
Variabel merupakan hal yang mendasar dalam pemrograman dan Anda harus mengetahui
aturannya dengan baik. Anda harus memberikan nama suatu variabel atau mengidentifikasikannya
untuk item data tertentu, selanjutnya variabel dapat digunakan untuk menyimpan suatu nilai,
memproses/memodifikasi nilainya atau mengkosongkannya kembali.

Ada banyak macam tipe data, seperti string, integer, dan floating. Sebelum menggunakan variabel
Anda harus menentukan tipe data apa yang akan ditampung sebuah variabel, apakah string,
integer ataukah desimal.
Perhatikan contoh dibawah ini:
String nama;
Int umur;
Baris diatas mendeklarasikan tipa data string untuk variabel nama dan integer untuk variabel umur.
Kadang-kadang kita ingin memberikan nilai awal untuk sebuah variabel yang kita deklarasikan,
perhatikan contoh dibawah ini:
String jenisMobil = “BMW”;
Atau kita dapat mendeklarasikan lebih dari satu variabel dalam satu grup dan sekaligus
memberikan nilai awal seperti contoh dibawah ini.
string carType, carColor = "blue";
Tabel 2.1: Daftar Tipe data yang bisa digunakan
Tipe Data Keterangan
Int Bilangan bulat antara -2.147.483.648 s/d 2.147.483.647
Decimal Angka dengan bilangan desimal hingga 28 digit
String Semua nilai dengan jenis huruf/teks
Char Karakter tunggal
Bool True atau false
Object Tipe umum untuk sebuah objek
Dalam penggunaannya ketika Anda mendeklarasikan suatu tipe data pada variabel maka hanya
tipe data tersebut yang dapat ditampung oleh variabel itu, jadi Anda tidak dapat memberikan nilai
integer pada variabel dengan tipe data string. Untuk itu perlu dilakukan konversi suatu data
kedalam tipe data lain. Perhatikan kasus dibawah ini;
int intX;
string strY = "35";
intX = strY + 6;
skrip diatas akan menampilkan pesan kesalahan, untuk memperbaikinya perhatikan solusi dibawah
ini.
void Page_Load(){
int intX;
string strY = "35";
intX = Convert.ToInt32(strY) + 6;
txtLabel.Text = Convert.ToString(intX);
}
</script>
<asp:Label id="txtLabel" runat="server" />
</form>

Array
Array merupakan jenis variabel yang spesial karena dapat menyimpan beberapa nilai dengan tipe
data yang sama dimana setiap nilai item dalam array dapat dipanggil menggunakan nama variabel
array tersebut dengan menentukan posisi itemnya.
Ketiklah perintah dibawah ini dan simpan dengan nama array.aspx
File: array.aspx
<html>
<head>
<title>Arrays</title>
void Page_Load() {
// Declare an array
string[] drinkList = new string[4];
// Place some items in it
drinkList[0] = "Es Jeruk";
drinkList[1] = "Jus Strawberry";
drinkList[2] = "Teh Manis";
drinkList[3] = "Kopi";
// Access an item in the array by its position
drinkLabel.Text = drinkList[1];
}
</script>
</head>
<body>
<asp:Label id="drinkLabel" runat="server" />
</form>
</body>
</html>
Perhatikan penggunaan variabel array diatas, deklarasinya menggunakan kurung siku dengan
diikuti tipe datanya kemudian menentukan jumlah item yang akan dimiliki oleh variabel array
tersebut (pada contoh diatas adalah 4) dengan menggunakan kata kunci ‘new’.
Pada variabel array, item pertama selalu pada posisi 0, item kedua pada posisi 1 dan seterusnya.
Untuk itu kita dapat menentukan nilai setiap itemnya seperti berikut:

Function
Function merupakan satu baris perintah atau lebih yang dibungkus (encapsulate) dengan nama
yang telah didefinisikan. Selain itu function dapat mengembalikan nilai.
Skrip dibawah merupakan contoh sederhana sebuah function.
File : function.aspx
<html>
<head>
<title>ASP.NET Functions</title>
// Here's our function
string getName() {
return "Nafisa Alfah";
}
// And now we'll use it in the Page_Load handler
void Page_Load() {
messageLabel.Text = getName();
}
</script>
</head>
<body>
</form>
</body>
</html>
Jika skrip diatas dijalankan melalui browser, maka saat event Page_Load dijalankan fungsi dengan
nama getName akan dipanggil. Perhatikan hasil yang ditampilkan pada browser.
Perintah ‘return’ pada fungsi getName akan mengembalikan nilai dimana fungsi itu dipanggil.
Namun perlu diperhatikan saat mendeklarasikan function, kita harus memastikan tipe data apa
yang akan dihasilkan function tersebut. Perhatikan contoh kasus dibawah ini:
File: function2.aspx

<html>
<head>
int addUp(int x, int y){
return x + y;
}
void Page_Load() {
messageLabel.Text = addUp(8,4);
}
</script>
</head>
<body>
</form>
</body>
</html>
Jika dijalankan skrip diatas akan menampilkan pesan kesalahan karena nilai yang dikembalikan
function addUp ber-tipe data integer sedangkan objek messageLabel.Text ber-tipe data string,
maka untuk memperbaikinya tambahkan perintah konversi pada saat memanggil function addUp()
messageLabel.Text = addUp(8,4).ToString();
atau
messageLabel.Text = Convert.ToString(addUp(8,4));
sehingga hasilnya pada browser adalah sebagai berikut:
Operator
Tabel 2.2: Daftar Operator dalam ASP.NET
Operator Keterangan
> Lebih besar
>= Lebih besar sama dengan
< Lebih kecil
<= Lebih kecil sama dengan
!= Tidak sama dengan

== Sama dengan
= Menentukan nilai suatu variabel
|| Atau
&& Dan
+ Menggabungkan string
New Membuat objek atau array
* Kali
/ Bagi
+ Tambah
- kurang
<html>
<head>
void Page_Load() {
string user="Naf";
int itemsBought=10;
if (user == "Naf" && itemsBought != 0) {
messageLabel.Text = "Hallo “ + user + “, Apakah Anda ingin melanjutkan ke proses " +
"pembayaran?";
}
}
</script>
</head>
<body>
</form>
</body>
</html>

Contoh diatas menggunakan operator sama dengan, tidak sama dengan dan operator logical “and”
dalam perintah If untuk menampilkan pesan konfirmasi pembayaran. Operator sama dengan ‘==’
digunakan untuk membandingkan dua nilai apakah sama atau tidak, sedangkan tanda ‘=’
digunakan untuk menentukan atau memberikan nilai kepada suatu variabel.
Latihan :
Buatlah fungsi untuk menghitung umur seseorang. Gunakan script dibawah ini untuk mendapatkan
tahun sekarang.
DateTime skr = DateTime.Now;
string tahunSkr = skr.ToString("yyyy");
return Convert.ToInt32(tahunSkr)
Conditional Logic
Dalam sebuah aplikasi akan ada suatu aksi/perintah yang akan dijalankan hanya jika suatu kondisi
sesuai dengan yang telah ditentukan, misalnya jika pengguna memilih sebuah checkbox atau
memilih salah satu item dari DropDownList atau bisa juga mengetikkan suatu kata pada TextBox.
Kita cek pilihan tersebut menggunakan kondisi, secara sederhana kita dapat menggunakan
perintah if dimana perintah ini sering dipasangkan dengan kondisi else yang akan dijalankan jika
kondisinya tidak sesuai.
File: logical.aspx
<html>
<head>
<title>View State Example</title>
void Click(Object s, EventArgs e) {
if(userName.Text == "pageEvent"){
Response.Redirect("pageEvent.aspx");
}else{

messageLabel.Text = userName.Text;
}
}
</script>
</head>
<body>
<asp:TextBox id="userName" runat="server" />
<asp:Button id="submitButton" runat="server"
Text="Click Me" OnClick="Click" />
</form>
</body>
</html>
Seringkali kita harus mengecek suatu nilai untuk beberapa kemungkinan dan menentukan perintah
yang berbeda untuk beberapa kondisi/kasus. Untuk menangani hal semacam ini kita dapat
menggunakan perintah switch:
File: switch.aspx
<html>
<head>
<title>View State Example</title>
void Click(Object s, EventArgs e) {
switch (jurusan.Text) {
case "mi":
messageLabel.Text = "Manajemen Informatika";
break;
case "ti":
messageLabel.Text = "Teknik Informatika";
break;
case "si":
messageLabel.Text = "Sistem Informasi";
break;
default:
messageLabel.Text = "Jurusan tidak terdaftar";
break;
}
}
</script>
</head>
<body>
<asp:TextBox id="jurusan" runat="server" />
<asp:Button id="submitButton" runat="server"
Text="Click Me" OnClick="Click" /><br />
Jurusan Anda adalah : <asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>

Latihan :
Buatlah halaman login seperti dibawah ini dan buat script untuk memeriksanya dengan ketentuan
sebagai berikut:
Jika username: admin dan password: 1234 maka akan masuk ke halaman admin
Jika username: user dan password: 1234 maka akan masuk ke halaman user
Jika login tidak memenuhi kedua syarat diatas maka akan muncul pesan kesalahan dibawahnya.
Loops
Loops yang dimaksud adalah baris perintah yang dijalankan secara berulang-ulang selama kondisi
pengulangannya bernilai benar. Ada dua macam pengulangan yaitu :
1. While loops, atau Do loops
2. For loops, termasuk perintah For Next dan For Each
While loop merupakan jenis pengulangan yang paling sederhana dimana baris perintah akan
dijalankan berulang-ulang selama kondisinya bernilai benar. Berikut ini adalah contohnya:

File: whileloop.aspx
<head>
<title>Loops</title>
void Page_Load()
{
// nilai awal counter
int counter = 0;
while (counter <= 10) {
// berikan nilai counter pada label
messageLabel.Text += counter.ToString();
// counter ditambah 1
counter++;
}
}
</script>
</head>
<body>
<asp:Label id="messageLabel" runat="server"/>
</form>
</body>
</html>
Bentuk lain dari While loop adalah Do While loop, dimana pengecekan kondisinya berada pada
akhir perintah pengulangan bukan pada awal pengulangan itu akan dijalankan seperti pada While
loop:
void Page_Load()
{
int counter = 0;
do {
messageLabel.Text += counter.ToString();
counter++;
}
while (counter <= 10);
}
Pengulangan For mirip dengan While loop, tapi biasanya kita menggunakannya ketika sudah
mengetahui berapa kali pengulangan yang akan dijalankan. Contoh dibawah ini akan menampikan
hasil yang sama dengan perintah pengulangan sebelumnya:
int i;
for (i = 1; i <= 10; i++) {
messageLabel.Text = i.ToString();
}
Pertama kita berikan nilai awal (i = 1) kemudian nilai ini akan di cek setiap kali pengulangan (i <=
productList.Items.Count), dan ditentukan berapa tingkat pertambahannya setiap kali pengulangan
(i++).
Bentuk lain dari pengulangan jenis For adalah For Each, dimana banyaknya pengulangan ditentukan
oleh jumlah item dalam variabel bertipe array. Contoh berikut adalah pengulangan terhadap array
dengan nama drinkList:
File: for_each.aspx

<head>
void Page_Load()
{
string[] drinkList = new string[4];
int i=1;
messageLabel.Text = "Daftar Menu Minuman : <br>";
foreach(string item in drinkList){
messageLabel.Text += i + ". " + item + "<br>";
i++;
}
}
</script>
</head>
<body>
<asp:Label id="messageLabel" runat="server"/>
</form>
</body>
</html>
Anda dapat keluar dari pengulangan dengan menggunakan perintah break seperti contoh dibawah
ini:
File: break.aspx
<head>
void Page_Load()
{
int i;
for (i = 0; i <= 10; i++) {
if (i == 5) {
Response.Write("i bernilai " + i);
break;
}
}
}
</script>
</head>
<body>
</body>
</html>

Pada contoh diatas, pengulangan akan dihentikan ketika kondisi i = 5, dan menampilkan pesan
seperti pada contoh gambar diatas.

Membangun Aplikasi Web ASP.NET
Web Forms
Web Form merupakan komponen penting dalam sebuah aplikasi berbasis web dimana dalam
pelaksanaanya ini dapat digunakan sebagai alat untuk berkomunikasi antara pengguna dengan
aplikasi. Setiap Web Form harus memiliki tag <form runat=”server”> dan terdapat element-
element ASP.NET sesuai dengan kebutuhan. Dalam satu halaman web tidak boleh ada lebih dari
satu Web Form.
Untuk menggunakan dan memanipulasi web form, kita dapat menggunakan class bawaan Net
Framework yaitu System.Web.UI.page.
Kita dapat menggunakan beberapa tipe element dalam form termasuk tag HTML standar, tetapi
ada pertimbangan lain agar suatu element dapat diidentifikasi dan dimanipulasi baik nilai maupun
atributnya pada saat pertama kali halaman web dijalankan (load) atau pada saat sebuah web form
disubmit. Element-element ini dalam ASP.NET disebut control, yang terdiri dari:
 HTML Server Controls
 Web server controls
 Web user controls
 Master pages
Ada perbedaan yang signifikan antar jenis control tersebut, namun apa yang membuat mereka
mirip adalah semua control dapat mudah diintegrasikan dan digunakan berulangkali pada aplikasi
yang kita buat.
HTML Server Controls
HTML Server Control sangat mirip dengan HTML pada umumnya hanya ada penambahan atribut
runat=”server”. Hal ini dilakukan agar tag HTML yang kita gunakan dapat dikontrol secara dinamis
melalui bahasa pemrograman seperti VB atau C#. Lihat pada table daftar Server Controls.
Table 3.1: HTML Server Controls
Class Associated Tag
HtmlAnchor <a runat=”server” >
HtmlButton <button runat="server">
HtmlForm <form runat="server">
HtmlImage <img runat="server">
3

HtmlInputButton <input type="submit" runat="server">
<input type="reset" runat="server">
<input type="button" runat="server">
HtmlInputCheckBox <input type="checkbox" runat="server">
HtmlInputFile <input type="file" runat="server">
HtmlInputHidden <input type="hidden" runat="server">
HtmlInputImage <input type="image" runat="server">
HtmlInputRadioButton <input type="radio" runat="server">
HtmlInputText <input type="text" runat="server">
<input type="password" runat="server">
HtmlSelect <select runat="server">
HtmlTable <table runat="server">
HtmlTableRow <tr runat="server">
HtmlTableCell <td runat="server">
<th runat="server">
HtmlTextArea <textarea runat="server">
HtmlGenericControl <span runat="server">
<div runat="server">
Semua tag HTML lainnya
Semua class HTML Server Control terdapat pada namespace System.Web.UI.HtmlControls.
Menggunakan HTML Server Control
Kita akan membuat halaman web yang berisi HtmlForm, HtmlButton, HtmlInputText dan
HtmlSelect. Ketiklah script dibawah ini dan simpan dengan nama buku.aspx
File: buku.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Using ASP.NET HTML Server Controls</title>
</head>
<body>
<h2>Data Buku</h2>
<p>
ID Buku: <input type="text" id="id_buku" runat="server" />
</p>
<p>
Judul: <input type="text" id="judul" runat="server" />
</p>
<p>
Jenis Buku<br />
<select id="jenis" runat="server" multiple="false">
<option>Komputer</option>
<option>Agama Islam</option>
<option>Novel</option>

<option>Bisnis</option>
<option>Anak-anak</option>
</select>
</p>
<p>
Penerbit: <input type="text" id="penerbit" runat="server" />
</p>
<p>
Tahun cetak: <input type="text" id="tahun" runat="server" />
</p>
<p>
Pengarang: <input type="text" id="pengarang" runat="server" />
</p>
<p>
Keterangan: <input type="text" id="keterangan" runat="server" />
</p>
<p>
<button id="confirmButton"
runat="server">Confirm</button>
</p>
<p>
</p>
</form>
</body>
</html>
Jika file buku.aspx dipanggil melalui browser maka hasilnya akan tampak seperti gambar dibawah
ini;

Tombol Confirm digunakan untuk menampilkan inputan yang telah diberikan oleh pengguna
melalui element messageLabel.Text, agar tombol ini berfungsi maka tambahkan atribut
OnServerClick="Click" pada element button sehingga lengkapnya menjadi seperti dibawah ini;
<button id="confirmButton" OnServerClick="Click"
runat="server">Confirm</button>
dan sisipkan script dibawah ini pada file buku.aspx dibagian head;
void Click(Object s, EventArgs e)
{
messageLabel.Text = "Data Buku dengan ID: " + id_buku.Value + "<br />";
messageLabel.Text += "Judul: " + judul.Value + "<br />";
messageLabel.Text += "Jenis Buku: ";
for (int i = 0; i <= jenis.Items.Count - 1; i++) {
if (jenis.Items[i].Selected) {
messageLabel.Text += jenis.Items[i].Text + "<br />";
}
}
messageLabel.Text += "Penerbit: " + penerbit.Value + "<br />";
messageLabel.Text += "Tahun Cetak: " + tahun.Value + "<br />";
messageLabel.Text += "Pengarang: " + pengarang.Value + "<br />";
messageLabel.Text += "Keterangan: " + keterangan.Value + "<br />";
}
</script>
Ketika tombol Confirm diklik maka akan tampil informasi yang diinputkan pada form.

Web Server Control
Web Server Control dapat dikatakan sebagai HTML Server Control versi mahir. Web Server Control
akan secara otomatis meng-generate tag HTML sehingga Anda tidak perlu lagi menggunakan tag-
tag HTML secara standar, namun jika Anda telah mengenal dengan baik tag-tag HTML maka tidak
akan menemukan kesulitan yang berarti ketika menggunakan Web Server Control.
Perhatikan contoh dibawah ini, misal tag HTML untuk input text;
<input type="text" name="usernameTextBox" size="30" />
Dalam Web Server Control perintahnya menjadi;
<asp:TextBox id="usernameTextBox" runat="server" Columns="30">
</asp:TextBox>
Perlu diingat, tidak seperti tag HTML standar yang biasa digunakan pada Web Form, web server
control diproses pertama kali oleh engine ASP.NET dengan mentransformasikan kedalam bentuk
HTML (client side), sehingga Anda perlu memastikan setiap element harus ditutup dengan tag
</asp:TextBox> jika tidak maka proses akan mengalami kegagalan sejak pertama kali diproses.
Cara lain untuk menutup tag web server control dengan menambahkan garis miring ‘/’ diakhir tag
element tersebut. Sehingga tag web server control diatas akan terlihat seperti dibawah ini;
<asp:TextBox id="usernameTextBox" runat="server" Columns="30" />
Untuk memudahkan pada saat menggunakan web server control ada baiknya memperhatikan hal-
hal berikut:
 Web server control harus ditempatkan didalam tag <form runat=”server” > agar dapat
berfungsi dengan baik
 Web server control harus memiliki atribut runat=”server”
 Selalu menggunakan prefik asp: setiap menambahkan element web server control
Standard Web Server Controls
ASP.NET telah memberikan standarisasi terhadap Web Server Control yang dapat dilihat pada .NET
Framework 2.0 SDK Documentation. Berikut ini akan dijelaskan beberapa web server control;
Label
Cara mudah untuk menampilkan teks statis pada halaman web dan dapat juga untuk memodifikasi
nilainya melalui script ASP.NET.
<asp:Label id="messageLabel" Text="" runat="server" />
Untuk menambahkan nilai pada label diatas dapat dilakukan dengan cara:
public void Page_Load() {

}
TextBox
TextBox digunakan untuk membuat inputan yang dapat digunakan pengguna untuk mengetikkan
teks atau menampilkan teks standar. Gunakan properti TextMode untuk mengatur apakah isinya
akan ditampilkan dalam baris tunggal atau banyak baris, selain itu dapat juga digunakan untuk
menyembunyikan teks yang diinput seperti pada inputan password. Perhatikan beberapa contoh
penggunaannya dibawah ini.
<p>
Username: <asp:TextBox id="userTextBox" TextMode="SingleLine"
Columns="30" runat="server" />
</p>
<p>
Password: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30" runat="server" />
</p>
<p>
Comments: <asp:TextBox id="commentsTextBox"
TextMode="MultiLine" Columns="30" Rows="10"
runat="server" />
</p>
HiddenField
Element ini sering digunakan untuk inputan default yang tidak akan tampil pada halaman web,
namun isinya sangat berpengaruh pada jalannya proses aplikasi. Hanya properti value yang dapat
kita atur nilainya pada element ini.
<asp:HiddenField id="txtHidden" value="hello word" runat="server" />
Untuk mengakses nilainya dapat dilakukan dengan cara:
messageLabel.Text = txtHidden.Value;
Button
Secara default, button akan bersifat Submit dimana ketika Button diklik semua isi form dikirimkan
ke server untuk diproses lebih lanjut. Contoh:
File: button.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
public void WriteText(Object s, EventArgs e) {
}
</script>
</head>
<body>
<asp:Button id="submitButton" Text="Submit" runat="server"
OnClick="WriteText" />

</form>
</body>
</html>
ImageButton
ImageButton berfungsi sama seperti Button hanya pada ImageButton menggunakan gambar.
Contoh:
File: imagebutton.aspx
<head>
<title></title>
public void WriteText(Object s, ImageClickEventArgs e) {
messageLabel.Text = "Coordinate: " + e.X + "," + e.Y;
}
</script>
</head>
<body>
<asp:ImageButton id="myImgButton" ImageUrl="myimage.jpg" runat="server" OnClick="WriteText" />
</form>
</body>
</html>
LinkButton
LinkButton memiliki fungsi yang sama dengan button. Contoh:
<asp:LinkButton id="myLinkButon" Text="Click Here"

runat="server" />
HyperLink
Element ini akan menampilkan hyperlink yang akan mengarah pada suatu alamat URL sesuai
dengan yang telah ditentukan pada properti navigateUrl. Tidak seperti LinkButton yang memiliki
banyak fitur seperti event Click dan validitas, HyperLink hanya mengarahkan navigasi dari satu
halaman kehalaman lain. Contoh:
<asp:HyperLink id="myLink" NavigateUrl="http://www.stikompoltek.ac.id/"
ImageUrl="slogo.gif" runat="server">STIKOM Poltek Cirebon</asp:HyperLink>
CheckBox
CheckBox dapat Anda gunakan untuk menampilkan pilihan yang hanya memiliki dua kondisi,
checked (terpilih) atau unchecked (tidak terpilih)
<asp:CheckBox id="surveyCek" Text="Ya, saya suka ASP.NET”
Checked=”True” runat=”server” />
Event utama pada control ini adalah CheckChanged yang dapat dikondisikan melalui atribut
onCheckChanged. Properti checked akan bernilai True jika objek di ceklis dan jika tidak di ceklis
maka properti checked bernilai False.
RadioButton
RadioButton merupakan pilihan yang dapat di grup dimana pilihannya hanya boleh satu dari
beberapa pilihan yang ada. RadioButton di grup dengan memberikan nilai yang sama pada properti
GroupName. Contoh:
<asp:RadioButton id="mi" GroupName="jurusan" Text="Manajemen Informatika" runat="server" /><br />
<asp:RadioButton id="ti" GroupName="jurusan" Text="Teknik Informatika" runat="server" /><br />
<asp:RadioButton id="si" GroupName="jurusan" Text="Sistem Informasi" runat="server" /><br />
Image
Control ini akan menampilkan gambar seperti pada HTML pada umumnya, hanya saja pada control
ini atribut dan propertisnya dapat dimanipulasi melalui skrip ASP.NET. contoh:
<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server"
AlternateText="description" />
PlaceHolder
PlaceHolder dapat kita gunakan untuk menambahkan element pada halaman web kapanpun secara
dinamis melalui skrip ASP.NET. contoh:
File: placeholder.aspx
<head>
<title></title>

public void Page_Load()
{
HtmlButton myButton = new HtmlButton();
myButton.InnerText = "My New Button";
placeHolder.Controls.Add(myButton);
}
</script>
</head>
<body>
<asp:PlaceHolder id="placeHolder" runat="server" />
</form>
</body>
</html>
Panel
Panel berfungsi seperti div pada HTML, didalamnya dapat dimanipulasi sebegai grup. Contoh
dibawah ini akan menunjukkan bahwa panel dapat menampilkan dan menyembunyikan objek
melalui event Click.
File: panel.aspx
<head>
<title></title>
public void HidePanel(Object s, EventArgs e) {
myPanel.Visible = false;
}
</script>
</head>
<body>
<asp:Panel id="myPanel" runat="server">
<p>Username: <asp:TextBox id="usernameTextBox" Columns="30"
runat="server" /></p>
<p>Password: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30" runat="server" />
</p>
</asp:Panel>
<asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel"
runat="server" />
</form>
</body>
</html>
DropDownList
DropDownList mirip dengan tag select pada HTML. Element ini membolehkan pengguna untuk
memilih melalui list menu. Contoh:
<asp:DropDownList id="warnaFav" runat="server">
<asp:ListItem Text="Merah" value="merah" />
<asp:ListItem Text="Biru" value="biru" />
<asp:ListItem Text="Hijau" value="hijau" />
</asp:DropDownList>

CheckBox List
CheckBox List adalah element checkbox namun dalam group, sehingga penggunaannya lebih tepat
untuk pilihan yang lebih dari satu. Contoh :
<asp:CheckBoxList ID="ekskul" runat="server">
<asp:ListItem Value="pramuka">Pramuka</asp:ListItem>
<asp:ListItem Value=”paskibra”>Paskibra</asp:ListItem>
<asp:ListItem Value=”taekwondo”>Tekwondo</asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Label ID="msgLabel" runat="server" Text="Label"></asp:Label>
CS script
msgLabel.Text = "";
for (int n = 0; n < ekskul.Items.Count; n++) {
if (ekskul.Items[n].Selected) {
msgLabel.Text += ekskul.Items[n].Text;
}
}
//atau dengan cara dibawah ini
msgLabel.Text += "<br>";
foreach (ListItem item in ekskul.Items) {
if (item.Selected)
msgLabel.Text += item.Text + "<br>";
}
ListBox
ListBox mirip dengan tag select pada HTML dengan multiselect dan size untuk menampilkan kotak
pilihan lebih dari satu baris. Jika atribut SelectMode diisi multiselect maka pengguna dapat memilih
lebih dari satu dari pilihan yang tersedia. Contoh:
<asp:ListBox id="listTechnologies" runat="server"
SelectionMode="Multiple">
<asp:ListItem Text="ASP.NET" Value="aspnet" />
<asp:ListItem Text="JSP" Value="jsp" />
<asp:ListItem Text="PHP" Value="php" />
<asp:ListItem Text="CGI" Value="cgi" />
<asp:ListItem Text="ColdFusion" Value="cf" />
</asp:ListBox>

Contoh Form dengan beberapa Elements
Buatlah form dengan element sebagai berikut:
Element ID Element Keterangan
TextBox txtNama
RadioButtonList txtJkel
Text: Laki-laki, Value: 1; Text:
Perempuan, Value: 2
DropDownList txtAgama
Islam:1, Katolik: 2, Protestan:
3, Hindu: 4, Budha: 5, Kong Hu
Cu: 6
CheckBoxList txtMateri
Button Submit
Label msgLabel
Klik dua kali pada button Submit dan ketik script nya seperti dibawah ini:
protected void Submit_Click(object sender, EventArgs e)
{
msgLabel.Text = "Nama : " + txtNama.Text + "<br />";
if (txtJkel.SelectedItem != null)
{
msgLabel.Text += "Jenis Kelamin : " + txtJkel.SelectedItem.Value + "<br />";
}
else
{
msgLabel.Text += "Jenis Kelamin : <br />";
}
msgLabel.Text += "Agama : " + txtAgama.Text + "<br />";
String materi = "";
foreach (ListItem item in txtMateri.Items)

{
if (item.Selected)
materi += item.Text + " ,";
}
// materi.Substring(0,10);
if (materi.Length > 0)
{
msgLabel.Text += "Materi Kursus : " + materi.Substring(0, materi.Length - 2) + "<br />";
}
else
{
msgLabel.Text += "Materi Kursus : ";
}
}

Latihan:
Duplikasikan file buku.aspx menjadi buku2.aspx dan rubah isinya menggunakan Web Server
Control.
Buat melalui Editor (Visual Studio / Ms Visual Web Dev 2010 Express).
Menu File, New File, C#, Web Form
Table, Insert Table
Tambahkan TextBox, DropDownList, Label dan Button

Form Validation Control
ASP.NET dilengkapi dengan kontrol validasi (validation controls) yang dapat digunakan dengan
mode server-side sehingga lebih aman. Kontrol validasi pada ASP.NET menghasilkan javascript
yang akan memvalidasi secara standar kemudian ketika halaman web dikirimkan ke server
(submitted) validasi disisi server dapat dijalankan walaupun validasi di sisi client telah sukses.
Untuk menggunakan ASP.NET validation controls, Anda hanya perlu menambahkan objek validasi
ke halaman web dan mengkonfigurasinya dengan mudah melalui jendela properties.
<asp:TextBox ID="id_buku" runat="server" Width="120px" BackColor="#FFFFCC"
ForeColor="#0066FF"></asp:TextBox>
<asp:RequiredFieldValidator id="id_bukuReq" runat="server"
ControlToValidate="id_buku"
ErrorMessage="ID Buku harus diisi"
SetFocusOnError="True" />
<asp:CompareValidator id="id_bukuNumReq" runat="server"
Operator="GreaterThan" Type="Integer"
ControlToValidate="id_buku" ValueToCompare="0"
ErrorMessage="ID Buku harus angka" />
untuk mengaturnya melalui properties, perhatikan item-item dibawah ini

RequiredFieldValidator digunakan untuk memvalidasi agar suatu inputan seperti textbox harus
diisi atau tidak boleh dikosongkan
CompareValidator digunakan untuk membandingkan nilai yang diinput
RangeValidator digunakan untuk memvalidasi nilai dari minimal sampai maximal
RegularExpressionValidator digunakan untuk memvalidasi inputan sesuai dengan aturan
format yang telah ditentukan, misal: nomor telepon, email, kode pos dan lain-lain
CustomValidator digunakan jika ingin validasi dilakukan melalui fungsi yang telah dibuat
ValidationSummary digunakan untuk menampilkan hasil validasi secara keseluruhan

4
Desain Database
Database adalah bagian penting dalam sebuah aplikasi yang akan menentukan baik dan tidaknya
output suatu aplikasi, selain itu menentukan juga efektifitas proses dalam aplikasi itu sendiri,
sehingga seringkali para programer lebih mengkhususkan dalam desain database sebelum proses
coding dan developing aplikasi dimulai lebih lanjut.
Membuat Database
Untuk membuat database dapat dilakukan dengan berbagai cara tergantung menggunakan apa
database itu akan dibuat, apakah melalui Visual Web Developer Express Edition atau menggunakan
SQL Server Management Studio.
Dibawah ini akan dijelaskan cara membuat database melalui Microsoft Visual Web Developer 2010
Express Edition.
Jalankan Microsoft Visual Web Developer 2010 Express Edition.
Buka tab Database Explorer pada panel sebelah kanan..

Kemudian klik kanan pada Data Connection dan pilih Add Connection...
Maka akan muncul jendela wizard Add Connection, pada isian Server name pilihlah server yang ada
atau dapat juga diketik secara manual yaitu [NAMA_KOMPUTER]SQLEXPRESS

Karena akan membuat database baru maka ketikkan nama database yang akan dibuat pada kotak
isian Select or enter a database name:
Klik OK.
Klik Yes.
Maka database dengan nama perpustakaan akan muncul pada Database Explorer

Membuat Table
Setelah database terbentuk barulah kita dapat membuat table-table didalamnya sesuai dengan
kebutuhan sistem.
Struktur table yang akan dibuat adalah sebagai berikut:
Nama Field Tipe Data Atribut
id_buku nvarchar(5) Primary key
jenis nvarchar(20)
judul nvarchar(50)
penerbit nvarchar(50)
tahun_cetak Nchar(4)
pengarang nvarchar(50)
keterangan nvarchar(50)
Untuk membuatnya klik pada segitiga disamping kiri database kemudian klik kanan pada Table dan
pilih Add New Table

Pada panel utama akan ditampilkan sheet kosong untuk membuat tabel baru, ketikkan sesuai
dengan struktur tabel diatas.
Untuk mengatur id_table sebagai primary key, klik kanan pada field id_table dan pilih Set Primary
Key...
Jika sudah selesai, untuk menyimpannya klik icon save pada toolbar, kemudian ketikkan nama
table dan klik OK.

Manajemen Data Melalui Table Editor
Setelah table buku terbentuk maka akan muncul nama table pada database perpustakaan. Untuk
membuka data pada table buku klik kanan pada nama table kemudian pilih Show Table Data.
Untuk menambah dan mengubah data dapat dilakukan dengan langsung mengetik pada kolom-
kolom table buku tersebut.
Untuk menghapus satu baris data pada table buku, pilih terlebih dahulu baris yang ingin dihapus
dengan klik tanda segitiga pada sebelah kiri table kemudian klik kanan dan pilih Delete

Mengubah struktur Table
Untuk mengubah struktur table baik menambah, menghapus, mengubah nama dan mengubah
type field dapat dilakukan dengan cara klik kanan pada nama table kemudian pilih Open Table
Definition.
Ubah struktur table sesuai dengan kebutuhan, kemudian pilih menu File, Save atau klik icon Save
untuk menyimpan perubahannya.
Jika muncul pesan error pada saat menyimpan hasil perubahan maka ubahlah pengaturan dengan
menghilangkan centang Prevent saving changes that require table re-creation yang terdapat pada
pengaturan Table and Database Designer melalui Menu Tool, Options.

Menjalankan Perintah SQL
SQL adalah bahasa standar internasional yang hampir dimiliki oleh semua platform database,
seperti SQL Server, Oracle, DB2, MySQL dan sebagainya. Struktur bahasa SQL didukung oleh
Server SQL yang disebut Transact-SQL (T-SQL).
Pada BAB ini akan kita pelajari tentang dasar-dasar bahasa SQL yang akan sering digunakan pada
BAB-BAB berikutnya.
Adapun perintah SQL yang sering digunakan terbagi menjadi empat perintah dasar yaitu SELECT,
INSERT, UPDATE dan DELETE.
Untuk menjalankan perintah SQL dapat dilakukan melalui Microsoft SQL Manajemen Studio.
Dengan memilih nama database yang telah kita buat kemudian pilih menu File > New > Database
Engine Query
Ketiklah perintah SQL Pada jendela query kemudian klik icon Execute atau tekan tombol F5 pada
keyboard
Perintah SELECT

SELECT * FROM buku
SELECT judul,penerbit,pengarang FROM buku
SELECT * FROM buku WHERE id_buku=’001’
SELECT * FROM buku WHERE judul LIKE ‘%pemrograman%’
SELECT * FROM buku ORDER BY judul
Perintah INSERT
INSERT INTO buku (id_buku,jenis,judul,penerbit,tahun_cetak,pengarang,keterangan) VALUES
('003','komputer','Web Dinamis dengan ASP.NET 4.5','Penerbit Andi','2011','Erick Kurniawan','-')
Perintah UPDATE
UPDATE buku SET judul=’Pemrograman Web dengan ASP.NET’,tahun_cetak=’2011’ WHERE
id_buku=’002’
Perintah DELETE
DELETE FROM buku WHERE id_buku=’001’

5
ADO.NET (ActiveX Data Objects .NET)
ADO.NET (ActiveX Data Objects .NET) adalah teknologi microsoft modern yang mengijinkan
pengaksesan database dari code aplikasi. Dengan ADO.NET kita dapat menampilkan data buku dan
membolehkan pengguna untuk menambah, mengupdate atau menghapus melalui aplikasi web
yang kita buat.
Pada bab ini akan dipelajari:
 Bagaimana cara koneksi ke database perpustakaan menggunakan ADO.NET
 Bagaimana menjalankan Query SQL dan menerima hasilnya dengan ADO.NET
 Bagaimana menampilkan data dari database
Pengenalan ADO.NET
Untuk menggunakan ADO.NET kita perlu menentukan terlebih dahulu platform database yang akan
digunakan, kemudian import namespace yang mengandung class untuk platform database
tersebut. Karena kita menggunakan SQL Server maka yang harus kita import adalah namespace
System.Data.SqlClient yang menampung semua class Sql yang kita perlukan. Diantaranya yang
paling penting adalah class Sql dibawah ini:
SqlConnection, yang akan digunakan untuk koneksi ke Server Database SQL
SqlCommand, class ini digunakan untuk menangani query SQL dan stored procedure yang akan
dijalankan pada Server Database SQL
SqlDataReader, Data dari database akan diterima melalui class SqlDataReader.
Ada 6 langkah yang perlu diperhatikan dalam menggunakan ADO.NET untuk mengakses database
dari aplikasi, yaitu:
1. Import namespace yang dibutuhkan
2. Buat koneksi ke database menggunakan SqlConnection
3. Jika ingin memanipulasi data pada database, buat perintahnya melalui SqlCommand
4. Buat koneksi dan jalankan query SQL untuk menerima hasilnya ke SqlDataReader
5. Ekstrak data dari SqlDataReader dan tampilkan pada halaman web
6. Tutup koneksi database
Untuk mencobanya silahkan tambahkan file baru melalui menu Website, Add New Item… kemudian
pada jendela template yang muncul pilih Web Form dan ubah namanya menjadi adonet.aspx
kemudian klik tombol Add

Setelah tombol Add diklik maka akan terbentuk dua file yaitu adonet.aspx yang digunakan untuk
menyimpan desain interface (berisi script HTML) dan adonet.aspx.cs yang digunakan untuk
menyimpan script-script bahasa pemrograman C#.
tambahkan label pada file adonet.aspx
<asp:Label ID=”messageLabel” runat=”server”></asp:Label>

File: adonet.aspx
Kemudian buka file adonet.aspx.cs dan ketikkan script dibawah ini
File : adonet.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
// menentukan koneksi database
SqlConnection conn = new SqlConnection("Server=asani75-ci7SqlExpress;Database=perpustakaan;Integrated Security=True");
// membuat perintah / query SQL
SqlCommand comm = new SqlCommand( "SELECT judul,tahun_cetak,penerbit FROM buku", conn);
// membuka koneksi
conn.Open();
// menjalankan perintah
SqlDataReader reader = comm.ExecuteReader();
// menampilkan hasilnya
while (reader.Read())
{
messageLabel.Text += reader["judul"] + "<br />";
}
// menutup reader dan koneksi
reader.Close();
conn.Close();
}
Setelah selesai Save All... untuk menyimpan kedua file tersebut kemudian jalankan melalui
browser.
Jika Anda menjalankan melalui IIS dan koneksi ke SQL Server menggunakan Integrated Windows
Authentication (dengan mengatur Integrated Security=True) kemungkinan aplikasi Anda akan
menampilkan pesan error Cannot open database “perpustakaan” requested by the login.

Mengatur Authentikasi Database
Ketika aplikasi dijalankan melalui IIS maka program akan dijalankan dengan user bawaan yaitu
ASPNET sehingga Anda perlu memberikan hak akses user ASPNET untuk database perpustakaan.
Ikuti langkah dibawah ini dengan teliti:
Bukalah SQL Server Management Studio dan koneksikan ke SQL Server yang kita gunakan atau klik
kanan pada nama koneksi dan pilih New Query, jika Anda diminta untuk memilih table, silahkan
klik saja tombol Close. Kemudian ketiklah perintah dibawah ini dengan menggantikan kata
MachineName dengan nama komputer Anda atau dengan nama sistem yang tampil pada pesan
error.
EXEC sp_grantlogin 'MachineNameASPNET'
USE Dorknozzle
EXEC sp_grantdbaccess 'MachineNameASPNET'
EXEC sp_addrolemember 'db_owner', 'MachineNameASPNET'
Jika menggunakan Authentikasi SQL Server maka Anda perlu mengetikkan username dan password
pada SqlConnection. Contoh:
// Define database connection
SqlConnection conn = new SqlConnection(
"Server=ServerNameInstanceName;" +
"Database=DatabaseName;User ID=Username;" +
"Password=Password");
Mengatur Konfigurasi ConnectionString
Pada script koneksi diatas digunakan perintah sqlConnection yang diikuti dengan parameter-
parameter penting seperti nama server, nama database, user ID dan password agar dapat
terkoneksi dengan database yang akan kita akses.
Agar lebih aman kita dapat menggunakan konfigurasi ConnectionString yang terdapat dalam file
Web.config. Pada elemen Configuration terdapat sub element ConnectionStrings yang didalamnya
harus kita sertakan tiga paramater penting yaitu

 name untuk nama connectionStrings yang akan kita panggil dari script,
 connectionString diisi parameter koneksi ke database
 providerName yang diisi dengan jenis provider data yang digunakan
Web.Config
<configuration>
⋮
<connectionStrings>
<add name="Perpustakaan"
connectionString="Server=localhostSqlExpress;
Database=perpustakaan;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
⋮
</configuration>
Menggunakan Control Repeater
.NET Framework menyediakan banyak sekali control untuk menampilkan data yang kompleks,
diantaranya adalah Repeater, DataList, GridView, DetailsView dan FormView. Control-control ini
memudahkan Anda untuk mengatur bagaimana data ditampilkan pada halaman web.
Repeater
Repeater sangat mudah digunakan untuk menampilkan data dari sumbernya, perhatikan contoh
dibawah ini:
<asp:Repeater id="myRepeater" runat="server">
<ItemTemplate>
<%# Eval("Name") %>
</ItemTemplate>
</asp:Repeater>
Repeater memiliki sub tag <ItemTemplate> -biasa disebut sebagai Child tag- yang berada didalam
tag utama <asp:Repeater> sebagai parent tag. Pada Child tag terdapat item data yang ingin
ditampilkan melalui Repeater. Sebelum data ditampilkan Anda harus mem-bind SqlDataReader
untuk Repeater melalui proses yang disebut Data Binding.
Agar lebih fleksibel, Repeater memiliki beberapa template untuk menampilkan data yaitu:
<HeaderTemplate> : digunakan untuk menampilkan header seperti tag <th> pada table HTML
<ItemTemplate> : template yang harus ada pada Repeater, berfungsi untuk menampilkan item
data seperti tag <td> pada table HTML.
<AlternatingItemTemplate> : template ini digunakan bersamaan dengan <ItemTemplate>
sebagai baris alternatif, misalnya untuk membedakan warna baris pada table.
<SeparatorTemplate> : digunakan untuk memberikan batas antar data source. Template ini
tidak akan tampil sebelum item pertama atau item terakhir.

<FooterTemplate> : template ini digunakan sebagai penutup (footer) yang akan tampil setelah
semua data ditampilkan. Jika menggunakan table HTML Anda dapat menyisipkan tag penutup
</table> pada template ini.
Untuk lebih memahaminya silahkan buat file repeater.aspx dengan skrip seperti dibawah ini.
File: repeater.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<head runat="server">
<title>Menggunakan Repeater</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="myRepeater" runat="server">
<HeaderTemplate>
<table width="800" border="1">
<tr>
<th>ID Buku</th>
<th>Jenis</th>
<th>Judul</th>
<th>Pengarang</th>
<th>Penerbit</th>
<th>Tahun</th>
<th>Keterangan</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("id_buku") %></td>
<td><%# Eval("jenis") %></td>
<td><%# Eval("judul") %></td>
<td><%# Eval("pengarang") %></td>
<td><%# Eval("penerbit") %></td>
<td><%# Eval("tahun_cetak") %></td>
<td><%# Eval("keterangan") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
repeater.aspx.cs
using System;
using System.Collection.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControl;
using System.Data.SqlClient;
using System.Configuration;
public partial class repeater : System.Web.UI.Page
{

{
// Deklarasi objects
SqlConnection conn;
SqlCommand comm;
SqlDataReader reader;
// Inisialisasi koneksi
conn = new SqlConnection("Server=asani75-ci7SqlExpress;" +
"Database=perpustakaan;Integrated Security=True");
// menentukan query SQL
comm = new SqlCommand(
"SELECT id_buku, jenis, judul, penerbit, tahun_cetak, pengarang, keterangan " +
"FROM buku", conn);
// jalankan dalam pengujian kesalahan
try
{
// buka koneksi
conn.Open();
// jalankan perintah SQL
reader = comm.ExecuteReader();
// Bind repeater ke data source
myRepeater.DataSource = reader;
myRepeater.DataBind();
// tutup data reader
reader.Close();
}
catch
{
// tampilkan pesan kesalahan
Response.Write("Gagal mengambil data.");
}
finally
{
// tutup koneksi
conn.Close();
}
}
}
Menggunakan DataList
Perbedaan yang paling mendasar antara Repeater dengan DataList adalah kemampuan dalam
memodifikasi data. Jika data hanya ingin ditampilkan misal untuk keperluan pencetakan maka
Repeater lebih tepat digunakan, tapi jika data ditampilkan untuk keperluan pengeditan dan
penghapusan maka Anda harus menggunakan DataList.
Untuk memahaminya pelajari dan pahami contoh dibawah ini.

File: datalist.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<script runat="server">
{
// Deklarasi objects
SqlConnection conn;
SqlCommand comm;
// Inisialisasi koneksi
conn = new SqlConnection("Server=asani75-ci7SqlExpress;" +
"Database=perpustakaan;Integrated Security=True");
// menentukan query SQL
comm = new SqlCommand(
"SELECT id_buku, jenis, judul, penerbit, tahun_cetak, pengarang, keterangan " +
"FROM buku", conn);
// jalankan dalam pengujian kesalahan
try
{
// buka koneksi
conn.Open();
// jalankan perintah SQL
// Bind repeater ke data source
bukuList.DataSource = reader;
bukuList.DataBind();
// tutup data reader
reader.Close();
}
catch
{
// tampilkan pesan kesalahan
Response.Write("Gagal mengambil data.");
}
finally
{
// tutup koneksi
conn.Close();
}
}
</script>
<head runat="server">
<title>Menggunakan DataList</title>
</head>
<body>
<h2>Data Buku Perpustakaan</h2>
<form id="form1" runat="server">
<div>
<asp:DataList ID="bukuList" runat="server">
<ItemTemplate>
ID Buku : <%# Eval("id_buku") %><br />
Jenis : <%# Eval("jenis") %><br />
Judul : <%# Eval("judul") %><br />
Pengarang : <%# Eval("pengarang") %><br />
Penerbit : <%# Eval("penerbit") %><br />
Tahun Cetak : <%# Eval("tahun_cetak") %><br />
Keterangan : <%# Eval("keterangan") %><br />
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>

</asp:DataList>
</div>
</form>
</body>
</html>
Menggunakan GridView dan DetailsView untuk memanage data
GridView menghasilkan table HTML sederhana sehingga data yang disajikan mudah dibaca, tidak
memiliki format yang rumit dan dalam bentuk tabular. Seperti halnya Repeater, gridView dapat
juga menampilkan semua isi data yang terdapat dalam SqlDataReader pada sebuah halaman
berdasarkan pengaturan style (css).
gridView memiliki fitur yang lebih banyak dibanding Repeater, adapun fitur-fitur yang dimiliki
gridView adalah sebagai berikut:
1. memiliki Header dan Footer Table
2. Paging (menyajikan data per halaman)
3. Sorting (pengurutan data)
4. Modifikasi tampilan melalui Cascading Style Sheet (css)
5. Kustomisasi kolom untuk edit data

Agar lebih memahami silahkan buat file dengan nama gridview.aspx kemudian ketik script dibawah
ini.
Gridview.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="gridview.aspx.cs"
Inherits="gridview" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Data Buku</h1>
<asp:GridView id="grid" runat="server" />
</asp:Content>
Klik dua kali untuk membuka file gridview.aspx.cs dan tambahkan 2 namespace dibawah ini
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
kemudian ketik script dibawah ini didalam event Page_Load
{
//inisialisasi variabel
SqlConnection conn;
SqlCommand comm;
//membaca konfigurasi connectionstring dari web.config
string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString;
// menentukan koneksi database
conn = new SqlConnection(connectionString);
// membuat perintah / query SQL
comm = new SqlCommand("SELECT * FROM buku", conn);
// membuka koneksi
try
{
conn.Open();
// menjalankan perintah
//mengisi grid dengan data
grid.DataSource = reader;
grid.DataBind();
// tutup reader
reader.Close();
}
finally
{
//tutup koneksi
conn.Close();
}
}
Jalankan file gridview.aspx dengan menekan tombol F5 pada keyboard
Modifikasi Kolom GridView

Untuk memodifikasi kolom dapat dilakukan dengan mengubah element GridView seperti dibawah
ini
<asp:GridView ID="grid" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="id_buku" HeaderText="ID Buku" />
<asp:BoundField DataField="jenis" HeaderText="Kategori" />
<asp:BoundField DataField="judul" HeaderText="Judul Buku" />
<asp:BoundField DataField="penerbit" HeaderText="Penerbit" />
<asp:BoundField DataField="tahun_cetak" HeaderText="Tahun" />
<asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" />
<asp:BoundField DataField="keterangan" HeaderText="Keterangan" />
</Columns>
</asp:GridView>
Sehingga hasilnya akan tampak seperti dibawah ini
Mendesain GridView dengan Cascading Style Sheet
Untuk mendesain tampilan gridview melalui Cascading Style Sheet, ikuti langkah-langkah dibawah
ini.
Buka file css yang ada di folder Style kemudian tambahkan script dibawah ini dibaris paling bawah
.GridMain
{
border-right: gainsboro thin solid;
border-top: gainsboro thin solid;
border-left: gainsboro thin solid;
border-bottom: gainsboro thin solid;
background-color: #333333;
width: 100%;
}
.GridRow
{
background-color: #FFFAFA;
}
.GridSelectedRow
{
background-color: #E6E6FA;
}
.GridHeader
{
background-color: #ADD8E6;
font-weight: bold;
text-align: left;
}

Kemudian sesuaikan element gridView menjadi seperti dibawah ini
<asp:GridView ID="grid" runat="server"
CssClass="GridMain" CellPadding="4" GridLines="None"
AutoGenerateColumns="False">
<RowStyle CssClass="GridRow" />
<SelectedRowStyle CssClass="GridSelectedRow" />
<HeaderStyle CssClass="GridHeader" />
<Columns>
<asp:BoundField DataField="tahun_cetak" HeaderText="Tahun" />
</Columns>
</asp:GridView>
Jika berhasil maka tampilan gridView akan berubah seperti dibawah ini
Memilih baris Record pada GridView
Untuk memilih baris record terlebih dahulu kita tambahkan kolom Pilih pada gridView dengan cara
menambahkan script dibawah ini setelah kolom keterangan
…
<asp:ButtonField CommandName="Select" Text="Pilih" />
</Columns>
</asp:GridView>
<br />
<asp:Label ID="messageLabel" runat="server"></asp:Label>
</asp:Content>
Selanjutnya buka mode Desain dan klik dua kali pada event SelectedIndexChanged melalui
properties gridView.

Kemudian ketik script dibawah ini
protected void grid_SelectedIndexChanged(object sender, EventArgs e)
{
//mendeteksi index baris yang dipilih
int selectedRowIndex;
selectedRowIndex = grid.SelectedIndex;
// baca kolom judul dari grid
GridViewRow row = grid.Rows[selectedRowIndex];
string judul = row.Cells[2].Text;
// tampilkan di label
messageLabel.Text = "Anda memilih judul " + judul;
}
Setelah dijalankan maka baris record dapat dipilih dengan meng-klik pada link Pilih, selanjutnya
akan dibahas bagaimana menampilkan detail data dari baris record yang dipilih melalui control
DetailsView.
Menggunakan DetailsView untuk menampilkan data
Data yang ditampilkan pada gridView dapat kita pilih field mana saja yang ingin ditampilkan,
sehingga untuk table yang memiliki jumlah field banyak hanya tertentu saja yang ditampilkan agar
tidak merusak tampilan halaman.

Ketika salah satu baris record pada gridView dipilih kita dapat menampilkan semua field yang
terdapat pada suatu table, bahkan kita dapat menampilkannya dengan terlebih dahulu merelasikan
table tersebut dengan table lain sesuai dengan nilai referensi yang ingin ditampilkan. Hal ini dapat
dilakukan dengan menggunakan control DetailsView.
Untuk mengimplementasikannya, silahkan duplikasi file gridview.aspx dengan cara klik kanan pada
nama file gridview.aspx dan klik kanan pada root folder kemudian pilih Paste, maka akan
ditambahkan file dengan nama Copy of gridview.aspx, ganti namanya menjadi detailsview.aspx.
Buka file detailsview.aspx dan tambahkan control detailsView dibawah gridView
…
</asp:GridView>
<br />
<asp:DetailsView id="detailBuku" runat="server" />
</asp:Content>
Selanjutnya tambahkan data key pada control grid yang berguna untuk menyimpan id_buku untuk
masing-masing record.
…
grid.DataSource = reader;
grid.DataKeyNames = new string[] { "id_buku" };
grid.DataBind();
…
Kemudian buka file detailsview.aspx.cs dan tambahkan namespace System.Data
…
using System.Data;
selanjutnya ganti script dalam fungsi grid_SelectedIndexChanged dan tambahkan satu fungsi
dengan nama BindDetails sehingga isinya menjadi seperti dibawah ini.
protected void grid_SelectedIndexChanged(object sender, EventArgs e)
{
BindDetails();
}
private void BindDetails()
{
int selectedRowIndex = grid.SelectedIndex;
string idBuku = (string) grid.DataKeys[selectedRowIndex].Value;
SqlConnection conn;
SqlCommand comm;
comm = new SqlCommand("SELECT * FROM buku WHERE id_buku=@id_buku", conn);
comm.Parameters.Add("id_buku", SqlDbType.NVarChar, 10);
comm.Parameters["id_buku"].Value = idBuku;
try
{
conn.Open();
detailBuku.DataSource = reader;
detailBuku.DataKeyNames = new string[] { "id_buku" };
detailBuku.DataBind();
reader.Close();

}
finally
{
conn.Close();
}
}
Mendesain Tampilan DetailsView
Untuk mengubah desain DetailsView modifikasi scriptnya menjadi seperti dibawah ini
<asp:DetailsView id="detailBuku" runat="server" AutoGenerateRows="false"
CssClass="GridMain" CellPadding="4" GridLines="None" FieldHeaderStyle-Width="200px">
<Fields>
<asp:BoundField DataField="tahun_cetak" HeaderText="Tahun Cetak" />
</Fields>
<HeaderTemplate>
<%#Eval("judul")%>
</HeaderTemplate>
</asp:DetailsView>
Edit Data dengan DetailsView
Untuk menambahkan fungsi Edit Data pada control DetailsView lakukan langkah-langkah dibawah
ini:
Tambahkan script dibawah ini untuk tombol edit
…
<asp:CommandField ShowEditButton="True" />
</Fields>
…
Kemudian buka file detailsview.aspx pada mode Desain dan pastikan control detailsView dalam
kondisi terpilih, kemudian klik icon Event (symbol petir) pada properties dan klik dua kali pada
event ModeChanging

Kemudian ketik script dibawah ini
protected void detailBuku_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
// ubah mode pada data terpilih
detailBuku.ChangeMode(e.NewMode);
// refresh data buku
BindDetails();
}
DetailsView memiliki tiga mode tampilan yaitu
1. DetailsViewMode.ReadOnly untuk menampilkan data secara readonly
2. DetailsViewMode.Edit untuk mengubah data
3. DetailsViewMode.Insert untuk menginput data baru
ketika event ModeChanging dipanggil maka detailsView akan mengirimkan parameter dengan
nama e yang berisi DetailsViewMode.Edit jika tombol Edit yang kita pilih.
Agar nilai untuk masing-masing DetailsViewMode dapat kita manipulasi melalui script maka objek-
objek dalam detailsView harus di konversi kedalam TemplateFields, selain itu dapat mempermudah
untuk mengakses nama dari masing-masing objek tersebut.
Pilih mode Desain dan klik kanan pada DetailsView kemudian pilih Show Smart Tag
Kemudian klik Edit Field
Kemudian akan muncul dialog Fields, konversi field-field yang ada dengan cara pilih field dan klik
pada Convert this field into a TemplateField.

Klik OK untuk menutup dialog Fields.
Jika kita lihat hasilnya melalui mode Source maka akan terdapat tiga template untuk masing-
masing field yaitu EditItemTemplate, InsertItemTemplate dan ItemTemplate. Untuk mempermudah
mengingat ID untuk masing-masing field ubahlah semua ID sesuai dengan template dan nama
fieldnya, sehingga script detailsView akan tampak seperti dibawah ini.
<asp:DetailsView id="detailBuku" runat="server" AutoGenerateRows="False"
CssClass="GridMain" CellPadding="4" GridLines="None"
FieldHeaderStyle-Width="200px" onmodechanging="detailBuku_ModeChanging"
onitemupdating="detailBuku_ItemUpdating">
<FieldHeaderStyle Width="200px"></FieldHeaderStyle>
<Fields>
<asp:TemplateField HeaderText="ID Buku">
<EditItemTemplate>
<asp:TextBox ID="editId_buku" runat="server" Text='<%# Bind("id_buku") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="insertId_buku" runat="server" Text='<%# Bind("id_buku") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Id_buku" runat="server" Text='<%# Bind("id_buku") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kategori">
<EditItemTemplate>
<asp:TextBox ID="editJenis" runat="server" Text='<%# Bind("jenis") %>'></asp:TextBox>
</EditItemTemplate>
<asp:TextBox ID="insertJenis" runat="server" Text='<%# Bind("jenis") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="jenis" runat="server" Text='<%# Bind("jenis") %>'></asp:Label>
</ItemTemplate>
<asp:TemplateField HeaderText="Judul Buku">
<EditItemTemplate>
<asp:TextBox ID="editJudul" runat="server" Text='<%# Bind("judul") %>'></asp:TextBox>
</EditItemTemplate>

<asp:TextBox ID="insertJudul" runat="server" Text='<%# Bind("judul") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="judul" runat="server" Text='<%# Bind("judul") %>'></asp:Label>
</ItemTemplate>
<asp:TemplateField HeaderText="Penerbit">
<EditItemTemplate>
<asp:TextBox ID="editPenerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:TextBox>
</EditItemTemplate>
<asp:TextBox ID="insertPenerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="penerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:Label>
</ItemTemplate>
<asp:TemplateField HeaderText="Tahun Cetak">
<EditItemTemplate>
<asp:TextBox ID="editTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:TextBox>
</EditItemTemplate>
<asp:TextBox ID="insertTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="tahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:Label>
</ItemTemplate>
<asp:TemplateField HeaderText="Penulis/Pengarang">
<EditItemTemplate>
<asp:TextBox ID="editPengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:TextBox>
</EditItemTemplate>
<asp:TextBox ID="insertPengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="pengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:Label>
</ItemTemplate>
<asp:TemplateField HeaderText="Keterangan">
<EditItemTemplate>
<asp:TextBox ID="editKeterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:TextBox>
</EditItemTemplate>
<asp:TextBox ID="insertKeterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:TextBox>
<ItemTemplate>
<asp:Label ID="keterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:Label>
</ItemTemplate>
<asp:CommandField ShowEditButton="True" />
</Fields>
<HeaderTemplate>
<%#Eval("judul")%>
</HeaderTemplate>
</asp:DetailsView>
Kemudian buka kembali mode Desain dan pilih event ItemUpdating dari panel properties
DetailsView seperti cara diatas. Ketik script dibawah ini untuk menyimpan hasil perubahan pada
detailsView.
protected void detailBuku_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
string idBuku = (string)detailBuku.DataKey.Value;
TextBox newJenisTextBox = (TextBox)detailBuku.FindControl("editJenis");

TextBox newJudulTextBox = (TextBox)detailBuku.FindControl("editJudul");
TextBox newPenerbitTextBox = (TextBox)detailBuku.FindControl("editPenerbit");
TextBox newTahun_cetakTextBox = (TextBox)detailBuku.FindControl("editTahun_cetak");
TextBox newPengarangTextBox = (TextBox)detailBuku.FindControl("editPengarang");
TextBox newKeteranganTextBox = (TextBox)detailBuku.FindControl("editKeterangan");
string newJenis = newJenisTextBox.Text;
string newJudul = newJudulTextBox.Text;
string newPenerbit = newPenerbitTextBox.Text;
string newTahun_cetak = newTahun_cetakTextBox.Text;
string newPengarang = newPengarangTextBox.Text;
string newKeterangan = newKeteranganTextBox.Text;
SqlConnection conn;
SqlCommand comm;
comm = new SqlCommand("UPDATE buku SET jenis=@jenis, judul=@judul WHERE id_buku=@id_buku", conn);
comm.CommandType = CommandType.Text;
comm.Parameters.Add("id_buku", SqlDbType.NVarChar,10);
comm.Parameters.Add("jenis", SqlDbType.NVarChar, 20);
comm.Parameters["jenis"].Value = newJenis;
comm.Parameters.Add("judul", SqlDbType.NVarChar, 50);
comm.Parameters["judul"].Value = newJudul;
comm.Parameters.Add("penerbit", SqlDbType.NVarChar, 50);
comm.Parameters["penerbit"].Value = newPenerbit;
comm.Parameters.Add("tahun_cetak", SqlDbType.NChar, 5);
comm.Parameters["tahun_cetak"].Value = newTahun_cetak;
comm.Parameters.Add("pengarang", SqlDbType.NVarChar, 50);
comm.Parameters["pengarang"].Value = newPengarang;
comm.Parameters.Add("keterangan", SqlDbType.NVarChar, 50);
comm.Parameters["keterangan"].Value = newKeterangan;
try
{
conn.Open();
comm.ExecuteNonQuery();
}
finally
{
conn.Close();
}
detailBuku.ChangeMode(DetailsViewMode.ReadOnly);
//BindGrid();
BindDetails();
}
Jalankan file detailsview.aspx dan silahkan coba untuk mengubah beberapa data.
Menghapus Data pada GridView
Untuk dapat menghapus record pada gridView, tambahkan Link untuk menghapus dengan cara
menyisipkan script dibawah ini
…
<asp:ButtonField CommandName="Select" Text="Pilih" />
<asp:CommandField ShowDeleteButton="true" ButtonType="Link" />
</Columns>
…
Kemudian melalui properties gridView klik dua kali event RowDataBound dan ketik script dibawah
ini

protected void grid_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string idBuku = e.Row.Cells[0].Text;
foreach (LinkButton button in e.Row.Cells[8].Controls.OfType<LinkButton>())
{
if (button.CommandName == "Delete")
{
button.Attributes["onclick"] = "if(!confirm('Hapus Data dengan kode " +
idBuku + "?')){ return false; };";
}
}
}
}
Selain itu klik dua kali event RowDeleting dan ketik script dibawah ini
protected void grid_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int index = Convert.ToInt32(e.RowIndex);
string idBuku = (string)grid.DataKeys[index].Value;
SqlConnection conn;
SqlCommand comm;
comm = new SqlCommand("DELETE FROM buku WHERE id_buku=@id_buku", conn);
try
{
conn.Open();
}
finally
{
conn.Close();
}
BindGrid();
}
Hasilnya akan tampak seperti dibawah ini

Menginput Data dengan DetailsView
Fungsi DetailsView selain untuk menampilkan data adalah untuk menginput data dan fungsi ini
yang tidak ada pada GridView.
Seperti yang telah dijelaskan pada materi sebelumnya bahwa DetailsView memiliki tiga mode
tampilan, salah satunya adalah DetailsViewMode.Insert yang berfungsi untuk menginput data baru
kedalam sebuah table.
Mode insert secara default false artinya tidak diaktifkan, untuk mengaktifkannya dapat dilakukan
melalui fasilitas DetailsView Tasks dan memilih Edit Fields…
Kemudian pilih CommandField pada kotak Selected fields dan atur ShowInsertButton-nya menjadi
True

Klik OK untuk menyimpan perubahan dan menutup dialog Fields, selanjutnya klik dua kali event
ItemInserting dari panel propertiesnya DetailsView dan ketik script dibawah ini.
protected void detailBuku_ItemInserting(object sender, DetailsViewInsertEventArgs e)
{
TextBox newId_bukuTextBox = (TextBox)detailBuku.FindControl("insertId_buku");
TextBox newJenisTextBox = (TextBox)detailBuku.FindControl("insertJenis");
TextBox newJudulTextBox = (TextBox)detailBuku.FindControl("insertJudul");
TextBox newPenerbitTextBox = (TextBox)detailBuku.FindControl("insertPenerbit");
TextBox newTahun_cetakTextBox = (TextBox)detailBuku.FindControl("insertTahun_cetak");
TextBox newPengarangTextBox = (TextBox)detailBuku.FindControl("insertPengarang");
TextBox newKeteranganTextBox = (TextBox)detailBuku.FindControl("insertKeterangan");
string newId_buku = newId_bukuTextBox.Text;
string newJenis = newJenisTextBox.Text;
string newJudul = newJudulTextBox.Text;
string newPenerbit = newPenerbitTextBox.Text;
string newTahun_cetak = newTahun_cetakTextBox.Text;
string newPengarang = newPengarangTextBox.Text;
string newKeterangan = newKeteranganTextBox.Text;
SqlConnection conn;

SqlCommand comm;
comm = new SqlCommand("INSERT INTO buku (id_buku,jenis,judul,penerbit,tahun_cetak,pengarang,keterangan) " +
" VALUES (@id_buku,@jenis,@judul,@penerbit,@tahun_cetak,@pengarang,@keterangan)", conn);
comm.Parameters["id_buku"].Value = newId_buku;
comm.Parameters.Add("jenis", SqlDbType.NVarChar, 20);
comm.Parameters["jenis"].Value = newJenis;
comm.Parameters.Add("judul", SqlDbType.NVarChar, 50);
comm.Parameters["judul"].Value = newJudul;
comm.Parameters.Add("penerbit", SqlDbType.NVarChar, 50);
comm.Parameters["penerbit"].Value = newPenerbit;
comm.Parameters.Add("tahun_cetak", SqlDbType.NChar, 5);
comm.Parameters["tahun_cetak"].Value = newTahun_cetak;
comm.Parameters.Add("pengarang", SqlDbType.NVarChar, 50);
comm.Parameters["pengarang"].Value = newPengarang;
comm.Parameters.Add("keterangan", SqlDbType.NVarChar, 50);
comm.Parameters["keterangan"].Value = newKeterangan;
try
{
conn.Open();
}
finally
{
conn.Close();
}
detailBuku.ChangeMode(DetailsViewMode.ReadOnly);
BindGrid();
BindDetails();
}
Simpan dan jalankan programnya dengan menekan tombol F5, pilih salah satu data pada GridView
maka pada DetailsView akan muncul Link Button New untuk menginput data baru.

Latihan dan Tugas
Buatlah program untuk input, edit dan hapus table anggota pada database perpustakaan.

Modul as pdot-net-2015

Recommended

Recommended

More Related Content

Similar to Modul as pdot-net-2015

Similar to Modul as pdot-net-2015 (20)

More from Muhammad Yunus

More from Muhammad Yunus (6)

Modul as pdot-net-2015