Modul ASPdotNET 2015
Modul ASPdotNET 2015
Ref 2015
Pemrograman Web
Menggunakan ASP.NET
LABKOM STIKOM Poltek Cirebon
DAFTAR ISI
DAFTAR ISI ........................................................................................................................... 1
PENDAHULUAN...................................................................................................................... 4
Apa itu ASP.NET ................................................................................................................. 4
Webserver IIS (Internet Information Service) ........................................................................ 4
.NET Framework................................................................................................................. 5
Konfigurasi IIS ................................................................................................................... 5
Uji Coba melalui localhost.................................................................................................... 5
Menggunakan Microsoft Visual Studio 2010 .............................................................................. 8
DASAR PEMROGRAMAN C# .................................................................................................. 11
Control Event dan Subroutines ........................................................................................... 11
Page Event ...................................................................................................................... 12
Variabel ........................................................................................................................... 13
Array ............................................................................................................................... 15
Function .......................................................................................................................... 16
Operator .......................................................................................................................... 17
Conditional Logic .............................................................................................................. 19
Loops .............................................................................................................................. 21
Membangun Aplikasi Web ASP.NET ....................................................................................... 25
Web Forms ...................................................................................................................... 25
HTML Server Controls ....................................................................................................... 25
Menggunakan HTML Server Control .................................................................................... 26
Web Server Control .......................................................................................................... 29
Standard Web Server Controls ........................................................................................... 29
Label............................................................................................................................ 29
TextBox........................................................................................................................ 30
HiddenField .................................................................................................................. 30
Button .......................................................................................................................... 30
ImageButton................................................................................................................. 31
LinkButton .................................................................................................................... 31
HyperLink ..................................................................................................................... 32
CheckBox ..................................................................................................................... 32
RadioButton .................................................................................................................. 32
Image .......................................................................................................................... 32
PlaceHolder .................................................................................................................. 32
Panel ........................................................................................................................... 33
DropDownList ............................................................................................................... 33
ListBox ......................................................................................................................... 34
Latihan: ....................................................................................................................... 37
Form Validation Control ..................................................................................................... 38
Desain Database.................................................................................................................. 40
Membuat Database ........................................................................................................... 40
Membuat Table ................................................................................................................ 43
Manajemen Data Melalui Table Editor ................................................................................. 45
Mengubah struktur Table .................................................................................................. 46
Menjalankan Perintah SQL ................................................................................................. 47
ADO.NET (ActiveX Data Objects .NET) ................................................................................... 49
Pengenalan ADO.NET ....................................................................................................... 49
Mengatur Authentikasi Database ........................................................................................ 52
Mengatur Konfigurasi ConnectionString ............................................................................... 52
Menggunakan Control Repeater ......................................................................................... 53
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
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.
.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
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
Setelah terinstal dengan baik, jalankan Ms Visual Studio melalui Start > Program Files, kemudian
buat website baru untuk menampung file-file latihan yang akan kita buat selama praktikum.
Pilih menu File > New > Website
Kemudian pilih Visual C# pada Installed Templates, pilih ASP.NET Web Site dan tentukan lokasi
file-file website akan disimpan
Klik OK untuk membuat website baru, kemudian akan tampil pada Editor Visual Studio file
Default.aspx yang merupakan file default website.
Untuk menambahkan file baru pilih icon Add New Item pada toolbars
Dan pilih Visual C# pada Installed Templates, pilih HTML Page dan ketik nama file yang akan kita
buat dengan ekstensi .aspx
Klik tombol Add dan sesuaikan isi file testing.aspx dengan yang ada pada modul.
Klik icon Start Debugging pada toolbars untuk menjalankan file testing.aspx pada browser.
10
DASAR PEMROGRAMAN C#
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.
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";
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>
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
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
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));
Operator
Tabel 2.2: Daftar Operator dalam ASP.NET
Operator
Keterangan
>
Lebih besar
>=
<
Lebih kecil
<=
!=
17
==
Sama dengan
||
Atau
&&
Dan
Menggabungkan string
New
Kali
Bagi
Tambah
kurang
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
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
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),
(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>
23
Pada contoh diatas, pengulangan akan dihentikan ketika kondisi i = 5, dan menampilkan pesan
seperti pada contoh gambar diatas.
24
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:
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.
Associated Tag
HtmlAnchor
HtmlButton
<button runat="server">
HtmlForm
<form runat="server">
HtmlImage
<img runat="server">
25
HtmlInputButton
HtmlInputCheckBox
HtmlInputFile
HtmlInputHidden
HtmlInputImage
HtmlInputRadioButton
HtmlInputText
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
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;
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.
28
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
Selalu menggunakan prefik asp: setiap menambahkan element 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" />
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
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>
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>
34
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 : ";
}
}
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
37
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
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
Express Edition.
Jalankan Microsoft Visual Web Developer 2010 Express Edition.
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
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
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...
44
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
45
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.
46
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
48
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:
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
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#.
50
File: adonet.aspx
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.
51
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");
52
name untuk nama connectionStrings yang akan kita panggil dari script,
<connectionStrings>
<add name="Perpustakaan"
connectionString="Server=localhost\SqlExpress;
Database=perpustakaan;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>
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>
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;
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>
59
Jika berhasil maka tampilan gridView akan berubah seperti dibawah ini
Selanjutnya buka mode Desain dan klik dua kali pada event SelectedIndexChanged melalui
properties gridView.
60
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.
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();
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();
}
}
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
63
Kemudian akan muncul dialog Fields, konversi field-field yang ada dengan cara pilih field dan klik
pada Convert this field into a TemplateField.
64
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
Jalankan file detailsview.aspx dan silahkan coba untuk mengubah beberapa data.
Kemudian melalui properties gridView klik dua kali event RowDataBound dan ketik script dibawah
ini
Pemrograman Web Menggunakan ASP.NET
67
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();
}
68
Kemudian pilih CommandField pada kotak Selected fields dan atur ShowInsertButton-nya menjadi
True
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.
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.
71
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.
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.
pada bagian
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
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
Item
Fungsi
1.
Textbox
ataupun
untuk
menambah
Tabular
kolom
74
2.
Table
3.
Matrix
4.
Chart
Digunakan
untuk
menampilkan
gambar
yang
external,
embedded
(bawaan)
Image
Digunakan
untuk
mengkoneksikan
report
satu
sebuah
subreport
mendefinisikan
untuk
memfilter
anda
pula
data
juga
parameterdi
subreport
tersebut.
6.
List
7.
Rectangle
8.
Line
75
Report dari Microsoft Report Viewer ini mendukung beberapa fungsionalitas, diantaranya adalah:
1. Ekspresi-ekspresi dalam perhitungan
parameter,
filters,
sorting (pengurutan),
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
77