Anda di halaman 1dari 78

MODUL PRAKTIKUM

Ref 2015

Pemrograman Web

Menggunakan ASP.NET
LABKOM STIKOM Poltek Cirebon

oleh iid anwar hidayat

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

Pemrograman Web Menggunakan ASP.NET

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
Pemrograman Web Menggunakan ASP.NET

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

Pemrograman Web Menggunakan ASP.NET

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

Pemrograman Web Menggunakan ASP.NET

.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..

Pemrograman Web Menggunakan ASP.NET

Agar dapat menyimpan file asp.net yang Anda buat pada folder C:\Inetpub\wwwroot 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

Pemrograman Web Menggunakan ASP.NET

Pemrograman Web Menggunakan ASP.NET

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

Pemrograman Web Menggunakan ASP.NET

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

Pemrograman Web Menggunakan ASP.NET

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.

Pemrograman Web Menggunakan ASP.NET

10

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Click the Button</title>
<script runat="server" language="C#">
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.
Pemrograman Web Menggunakan ASP.NET

11

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.
Pemrograman Web Menggunakan ASP.NET

12

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Event Page</title>
<script runat="server" language="C#">
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 runat="server">
<asp:Label id="messageLabel" runat="server" />
</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.

Pemrograman Web Menggunakan ASP.NET

13

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.
<script runat="server" language="C#">
void Page_Load(){
int intX;
string strY = "35";
intX = Convert.ToInt32(strY) + 6;
txtLabel.Text = Convert.ToString(intX);
}
</script>
<form runat="server">
<asp:Label id="txtLabel" runat="server" />
</form>

Pemrograman Web Menggunakan ASP.NET

14

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Arrays</title>
<script runat="server" language="C#">
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>
<form runat="server">
<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:
drinkList[0] = "Es Jeruk";
Pemrograman Web Menggunakan ASP.NET

15

drinkList[1] = "Jus Strawberry";


drinkList[2] = "Teh Manis";
drinkList[3] = "Kopi";

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ASP.NET Functions</title>
<script runat="server" language="C#">
// 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 runat="server">
<asp:Label id="messageLabel" runat="server" />
</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
Pemrograman Web Menggunakan ASP.NET

16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ASP.NET Functions</title>
<script runat="server" language="C#">
int addUp(int x, int y){
return x + y;
}
void Page_Load()
{
messageLabel.Text = addUp(8,4);
}
</script>
</head>
<body>
<form runat="server">
<asp:Label id="messageLabel" runat="server" />
</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

Pemrograman Web Menggunakan ASP.NET

17

==

Sama dengan

Menentukan nilai suatu variabel

||

Atau

&&

Dan

Menggabungkan string

New

Membuat objek atau array

Kali

Bagi

Tambah

kurang

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ASP.NET Functions</title>
<script runat="server" language="C#">
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 runat="server">
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>

Pemrograman Web Menggunakan ASP.NET

18

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.
Perhatikan contoh dibawah ini:
File: logical.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>View State Example</title>
<script runat="server" language="C#">
void Click(Object s, EventArgs e)
{
if(userName.Text == "pageEvent"){
Response.Redirect("pageEvent.aspx");
}else{
Pemrograman Web Menggunakan ASP.NET

19

messageLabel.Text = userName.Text;
}
}
</script>
</head>
<body>
<form runat="server">
<asp:TextBox id="userName" runat="server" />
<asp:Button id="submitButton" runat="server"
Text="Click Me" OnClick="Click" />
<asp:Label id="messageLabel" runat="server" />
</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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>View State Example</title>
<script runat="server" language="C#">
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>
<form runat="server">
<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>

Pemrograman Web Menggunakan ASP.NET

20

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

2.

For

While

loops, atau Do loops

loops, termasuk perintah For Next dan For Each

loop merupakan jenis pengulangan yang paling sederhana dimana baris perintah akan

dijalankan berulang-ulang selama kondisinya bernilai benar. Berikut ini adalah contohnya:
Pemrograman Web Menggunakan ASP.NET

21

File: whileloop.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Loops</title>
<script runat="server" language="C#">
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>
<form runat="server">
<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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Pemrograman Web Menggunakan ASP.NET

22

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Loops</title>
<script runat="server" language="C#">
void Page_Load()
{
string[] drinkList = new string[4];
drinkList[0] = "Es Jeruk";
drinkList[1] = "Jus Strawberry";
drinkList[2] = "Teh Manis";
drinkList[3] = "Kopi";
int i=1;
messageLabel.Text = "Daftar Menu Minuman : <br>";
foreach(string item in drinkList){
messageLabel.Text += i + ". " + item + "<br>";
i++;
}
}
</script>
</head>
<body>
<form runat="server">
<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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>Loops</title>
<script runat="server" language="C#">
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>

Pemrograman Web Menggunakan ASP.NET

23

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

Pemrograman Web Menggunakan ASP.NET

24

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 elementelement 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">

Pemrograman Web Menggunakan ASP.NET

25

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>
<form runat="server">
<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>
Pemrograman Web Menggunakan ASP.NET

26

<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>
<asp:Label id="messageLabel" runat="server" />
</p>
</form>
</body>
</html>

Jika file buku.aspx dipanggil melalui browser maka hasilnya akan tampak seperti gambar dibawah
ini;

Pemrograman Web Menggunakan ASP.NET

27

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;
<script runat="server" language="C#">
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.

Pemrograman Web Menggunakan ASP.NET

28

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 tagtag 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 halhal 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() {
messageLabel.Text = "Hello World";
Pemrograman Web Menggunakan ASP.NET

29

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script runat="server" language="C#">
public void WriteText(Object s, EventArgs e) {
messageLabel.Text = "Hello World";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button id="submitButton" Text="Submit" runat="server"
OnClick="WriteText" />
<asp:Label id="messageLabel" runat="server" />
Pemrograman Web Menggunakan ASP.NET

30

</form>
</body>
</html>

ImageButton
ImageButton berfungsi sama seperti Button hanya pada ImageButton menggunakan gambar.
Contoh:
File: imagebutton.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script runat="server" language="C#">
public void WriteText(Object s, ImageClickEventArgs e) {
messageLabel.Text = "Coordinate: " + e.X + "," + e.Y;
}
</script>
</head>
<body>
<form runat="server">
<asp:ImageButton id="myImgButton" ImageUrl="myimage.jpg" runat="server" OnClick="WriteText" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>

LinkButton
LinkButton memiliki fungsi yang sama dengan button. Contoh:
<asp:LinkButton id="myLinkButon" Text="Click Here"
Pemrograman Web Menggunakan ASP.NET

31

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script runat="server" language="C#">
Pemrograman Web Menggunakan ASP.NET

32

public void Page_Load()


{
HtmlButton myButton = new HtmlButton();
myButton.InnerText = "My New Button";
placeHolder.Controls.Add(myButton);
}
</script>
</head>
<body>
<form runat="server">
<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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script runat="server" language="C#">
public void HidePanel(Object s, EventArgs e) {
myPanel.Visible = false;
}
</script>
</head>
<body>
<form runat="server">
<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>

Pemrograman Web Menggunakan ASP.NET

33

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>

Pemrograman Web Menggunakan ASP.NET

34

Contoh Form dengan beberapa Elements

Buatlah form dengan element sebagai berikut:


Element

ID Element

TextBox

txtNama

RadioButtonList

txtJkel

DropDownList

txtAgama

CheckBoxList
Button
Label

txtMateri
Submit
msgLabel

Keterangan
Text: Laki-laki, Value: 1; Text:
Perempuan, Value: 2
Islam:1, Katolik: 2, Protestan:
3, Hindu: 4, Budha: 5, Kong Hu
Cu: 6

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)
Pemrograman Web Menggunakan ASP.NET

35

{
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 : ";
}
}

Pemrograman Web Menggunakan ASP.NET

36

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

Pemrograman Web Menggunakan ASP.NET

37

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

Pemrograman Web Menggunakan ASP.NET

38

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

Pemrograman Web Menggunakan ASP.NET

39

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..

Pemrograman Web Menggunakan ASP.NET

40

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

Pemrograman Web Menggunakan ASP.NET

41

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
Pemrograman Web Menggunakan ASP.NET

42

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

Pemrograman Web Menggunakan ASP.NET

43

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.

Pemrograman Web Menggunakan ASP.NET

44

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 kolomkolom 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

Pemrograman Web Menggunakan ASP.NET

45

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.

Pemrograman Web Menggunakan ASP.NET

46

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
Pemrograman Web Menggunakan ASP.NET

47

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

Pemrograman Web Menggunakan ASP.NET

48

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

Pemrograman Web Menggunakan ASP.NET

49

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>
Pemrograman Web Menggunakan ASP.NET

50

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-ci7\\SqlExpress;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.

Pemrograman Web Menggunakan ASP.NET

51

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 'MachineName\ASPNET'
USE Dorknozzle
EXEC sp_grantdbaccess 'MachineName\ASPNET'
EXEC sp_addrolemember 'db_owner', 'MachineName\ASPNET'

Jika menggunakan Authentikasi SQL Server maka Anda perlu mengetikkan username dan password
pada SqlConnection. Contoh:
// Define database connection
SqlConnection conn = new SqlConnection(
"Server=ServerName\\InstanceName;" +
"Database=DatabaseName;User ID=Username;" +
"Password=Password");

Mengatur Konfigurasi ConnectionString


Pada script koneksi diatas digunakan perintah sqlConnection yang diikuti dengan parameterparameter 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
Pemrograman Web Menggunakan ASP.NET

52

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

Perhatikan contoh dibawah ini:


Web.Config
<configuration>

<connectionStrings>
<add name="Perpustakaan"
connectionString="Server=localhost\SqlExpress;
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.
Pemrograman Web Menggunakan ASP.NET

53

<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
transitional.dtd">

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<html xmlns="http://www.w3.org/1999/xhtml">
<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
{
protected void Page_Load(object sender, EventArgs e)
Pemrograman Web Menggunakan ASP.NET

54

{
// Deklarasi objects
SqlConnection conn;
SqlCommand comm;
SqlDataReader reader;
// Inisialisasi koneksi
conn = new SqlConnection("Server=asani75-ci7\\SqlExpress;" +
"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.
Pemrograman Web Menggunakan ASP.NET

55

File: datalist.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html
transitional.dtd">

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// Deklarasi objects
SqlConnection conn;
SqlCommand comm;
SqlDataReader reader;
// Inisialisasi koneksi
conn = new SqlConnection("Server=asani75-ci7\\SqlExpress;" +
"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
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
Pemrograman Web Menggunakan ASP.NET

56

</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

Pemrograman Web Menggunakan ASP.NET

57

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;
using System.Configuration;
using System.Data.SqlClient;

kemudian ketik script dibawah ini didalam event Page_Load


protected void Page_Load(object sender, EventArgs e)
{
//inisialisasi variabel
SqlConnection conn;
SqlCommand comm;
SqlDataReader reader;
//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
reader = comm.ExecuteReader();
//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
Pemrograman Web Menggunakan ASP.NET

58

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;
}
Pemrograman Web Menggunakan ASP.NET

59

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="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>

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:BoundField DataField="keterangan" HeaderText="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.

Pemrograman Web Menggunakan ASP.NET

60

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.

Pemrograman Web Menggunakan ASP.NET

61

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.Configuration;
using System.Data.SqlClient;
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;
SqlDataReader reader;
string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString;
conn = new SqlConnection(connectionString);
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();
reader = comm.ExecuteReader();
detailBuku.DataSource = reader;
detailBuku.DataKeyNames = new string[] { "id_buku" };
detailBuku.DataBind();
reader.Close();
Pemrograman Web Menggunakan ASP.NET

62

}
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">
<RowStyle CssClass="GridRow" />
<HeaderStyle CssClass="GridHeader" />
<Fields>
<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 Cetak" />
<asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" />
<asp:BoundField DataField="keterangan" HeaderText="Keterangan" />
</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:BoundField DataField="keterangan" HeaderText="Keterangan" />


<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

Pemrograman Web Menggunakan ASP.NET

63

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 objekobjek 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.

Pemrograman Web Menggunakan ASP.NET

64

Klik OK untuk menutup dialog Fields.


Jika kita lihat hasilnya melalui mode Source maka akan terdapat tiga template untuk masingmasing 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">
<RowStyle CssClass="GridRow" />
<HeaderStyle CssClass="GridHeader" />
<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>
<InsertItemTemplate>
<asp:TextBox ID="insertJenis" runat="server" Text='<%# Bind("jenis") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="jenis" runat="server" Text='<%# Bind("jenis") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Judul Buku">
<EditItemTemplate>
<asp:TextBox ID="editJudul" runat="server" Text='<%# Bind("judul") %>'></asp:TextBox>
</EditItemTemplate>
Pemrograman Web Menggunakan ASP.NET

65

<InsertItemTemplate>
<asp:TextBox ID="insertJudul" runat="server" Text='<%# Bind("judul") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="judul" runat="server" Text='<%# Bind("judul") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Penerbit">
<EditItemTemplate>
<asp:TextBox ID="editPenerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="insertPenerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="penerbit" runat="server" Text='<%# Bind("penerbit") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tahun Cetak">
<EditItemTemplate>
<asp:TextBox ID="editTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="insertTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="tahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Penulis/Pengarang">
<EditItemTemplate>
<asp:TextBox ID="editPengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="insertPengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="pengarang" runat="server" Text='<%# Bind("pengarang") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Keterangan">
<EditItemTemplate>
<asp:TextBox ID="editKeterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="insertKeterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="keterangan" runat="server" Text='<%# Bind("keterangan") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<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");
Pemrograman Web Menggunakan ASP.NET

66

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;
string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString;
conn = new SqlConnection(connectionString);
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["id_buku"].Value = idBuku;
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
Pemrograman Web Menggunakan ASP.NET

67

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;
string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString;
conn = new SqlConnection(connectionString);
comm = new SqlCommand("DELETE FROM buku WHERE id_buku=@id_buku", conn);
comm.CommandType = CommandType.Text;
comm.Parameters.Add("id_buku", SqlDbType.NVarChar, 10);
comm.Parameters["id_buku"].Value = idBuku;
try
{
conn.Open();
comm.ExecuteNonQuery();
}
finally
{
conn.Close();
}
BindGrid();
}

Hasilnya akan tampak seperti dibawah ini

Pemrograman Web Menggunakan ASP.NET

68

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

Pemrograman Web Menggunakan ASP.NET

69

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;
Pemrograman Web Menggunakan ASP.NET

70

SqlCommand comm;
string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString;
conn = new SqlConnection(connectionString);
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.CommandType = CommandType.Text;
comm.Parameters.Add("id_buku", SqlDbType.NVarChar, 10);
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();
comm.ExecuteNonQuery();
}
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.

Pemrograman Web Menggunakan ASP.NET

71

Latihan dan Tugas


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

Pemrograman Web Menggunakan ASP.NET

72

Master Page

Master Pages digunakan sebagai template halaman yang dapat digunakan di setiap
halaman web form. Semua desain baik tema maupun posisi dapat dilakukan melalui
master page ini yang akan berpengaruh pada keseluruhan desain halaman web
yang kita buat.

Membuat Master Page


Untuk membuat master page ikuti langkah dibawah ini:
1. Tambahkan master page ke dalam web app dengan cara klik kanan pada root

folder >

Add

New

Item

pilih

Master

Page

>

beri

nama

MasterPage.master
2. Tag asp:ContentPlaceHolder adalah bagian yang isinya dapat berubah
secara dinamis.
3. Setelah Master Page jadi, maka Anda dapat menggunakan Master Page
tersebut sebagai template ketika membuat halaman baru.

Menggunakan Master Page


Setelah master page terbuat maka untuk menambahkan web form baru yang nantinya terintegrasi
dengan master page adalah dengan cara:
1. Klik kanan pada root folder pilih Add New Item, pilih Web Form using Master Page
2. Pilih Master Page yang muncul pada pilihan select a Master Page
3. Hanya pada bagian ContentPlaceHolder yang dapat dimodifikasi sesuai dengan isi
halaman tersebut
Untuk mengintegrasikan halaman web form yang telah dibuat kedalam master page dapat
dilakukan dengan cara menyisipkan script MasterPageFile=~/MasterPage.master

pada bagian

<%@ Page ... %>

Pemrograman Web Menggunakan ASP.NET

73

Membuat Laporan

Microsoft Report Viewer ialah suatu report definition standar dari Microsoft dalam hal pembuatan
aplikasi report (laporan) yang ditulis dengan Visual Studio. Report definition ini berbentuk suatu
file XML yang terdiri dari data dan layout.
Visual Studio secara otomatis akan menambahkan report definition beserta report layout-nya ketika
anda menambahkan sebuah Report Item ke dalam project Visual Studio. File dari report definition
yang diproses di lokal

ini akan

berekstension .rdlc (report definition language client-

sideprocessing), sedangkan yang di-publish di server (biasanya dibuat melalui Sql Server) dengan
ekstension.rdl (report definition language).
Untuk menampilkan report yang diproses melalui client-side maka anda memerlukan suatu control
yang disebut dengan ReportViewer Controls. ReportViewer Controls inilah yang akan mendukung
anda dalam hal pembuatan bermacam-macam jenis report diantaranya adalah :
1. Freeform : Tipe report yang terdiri dari text boxes, data regions, images, and other report
items.
2. Multicolumn : Tipe report yang menampilkan data berbentuk multiple column dimana data
berbentuk kolom ke bawah dari kolom satu ke kolom berikutnya seperti cetakan koran.
3. Drillthrough : Tipe report yang mendukung eksplorasi data melalui links yang mengandung
informasi tersebut.
4. Interactive : Tipe report yang mengandung links, bookmarks, peta dokumen dan fitur hide and
show.

Dengan tipe report ini anda dapat membuat report yang bersifat drilldown

menggunakan fitur dari property toggle nya.


5. Simple : Tipe report sederhana yang mungkin hanya mempunyai satu single table atau grafik
Untuk membuat dan mendesain suatu report anda dapat menggunakan item-item report yang
tersedia di Report Toolbox Visual Studio.Net . Berikut ini adalah kegunaan dari masing-masing item
tersebut :
No.

Item

Fungsi

1.

Textbox

Suatu data region (area data yang ditampilkan)


yang dapat digunakan untuk membuat
report

ataupun

untuk

menambah

Tabular
kolom

daristruktur tabel ke dalam report.

Pemrograman Web Menggunakan ASP.NET

74

2.

Table

Suatu data region (area data yang ditampilkan)


yang mengatur data kedalam bentuk kolom dan
baris yang ter-interseksi pada sebuah spesifik data.
Matrix ini mendukung fungsionalitas data dalam
bentuk crosstabel ataupun pivot tables. Tidak
seperti Table yang memiliki kolom yang statis,
kolom Matrix dapat bersifat dinamis. Anda dapat
mendesain baris dan kolom dari data Matrix yang
bersifat statis ataupun dinamis

3.

Matrix

Suatu data region (area data yang ditampilkan)


yang digunakan untuk menampilkan data berbentuk
grafis. Tipe dari grafik yang disediakan pun dapat
bervariasi.

4.

Chart

Digunakan

untuk

menampilkan

gambar

yang

bersifat binary dalam sebuah report. Anda dapat


menggunakan

external,

embedded

(bawaan)

ataupun gambar dari database (format .bmp, .jpeg,


.gif, .png)
5.

Image

Digunakan

untuk

mengkoneksikan

report

satu

dengan yang lain. Subreport ini dapat berbentuk full


report yang berjalan sendiri

ataupun report yang

terhubung dengan sebuah Main report. Ketika anda


mendefinisikan
diharuskan
parameter

sebuah

subreport

mendefinisikan
untuk

memfilter

anda

pula
data

juga

parameterdi

subreport

tersebut.
6.

List

Suatu data region (area data yang ditampilkan)


yang digunakan untuk menampilkan baris-baris data
dalam bentuk seperti daftar (list).

7.

Rectangle

Digunakan untuk elemen grafis ataupun sebuah


container (panel) dari report item lainnya.

8.

Line

Elemen grafis berbentuk garis yang dapat digunakan


dimana saja di suatu halaman report.

Pemrograman Web Menggunakan ASP.NET

75

Report dari Microsoft Report Viewer ini mendukung beberapa fungsionalitas, diantaranya adalah:
1. Ekspresi-ekspresi dalam perhitungan

seperti penjumlahan ataupun format-format tertentu

dalam suatu report.


2. Aksi untuk link, bookmark dan peta dokumen dalam html report.
3. Mendukung

parameter,

filters,

sorting (pengurutan),

grouping (pengkategorian) yang

memudahkan anda dalam menampilkan suatu data.


4. Mendukung custom code yang sesuai kebutuhan anda.
5. Mendukung fitur-fitur report seperti print, print preview, zoom, export data dan lainnya

Pemrograman Web Menggunakan ASP.NET

76

Tugas Akhir
Buatlah program aplikasi berbasis web menggunakan ASP.NET untuk sistem informasi yang dapat
Anda pilih pada daftar dibawah ini :
1. Sistem Informasi Perpustakaan Digital
Modul data buku dan referensinya, modul peminjaman dan pengembalian buku
2. Sistem Informasi Stok Barang
Modul data barang dan referensinya, modul stok barang
3. Sistem Informasi Penjualan Barang
Modul data barang dan referensiya, modul penjualan barang dan perhitungan stoknya
4. Sistem Informasi Akademik
Modul data mahasiswa dan referensinya, modul nilai UTS dan UAS mahasiswa

Pemrograman Web Menggunakan ASP.NET

77