MODUL PRAKTIKUM - · PDF filePemrograman Web Menggunakan ASP.NET LABKOM STIKOM Poltek Cirebon...

Pemrograman Web

Menggunakan ASP.NET

LABKOM STIKOM Poltek Cirebon oleh iid anwar hidayat

Ref 2015

MODUL PRAKTIKUM

Pemrograman Web Menggunakan ASP.NET 1

DAFTAR ISI

DAFTAR ISI ........................................................................................................................... 1

PENDAHULUAN...................................................................................................................... 4

Apa itu ASP.NET ................................................................................................................. 4

Webserver IIS (Internet Information Service) ........................................................................ 4

.NET Framework................................................................................................................. 5

Konfigurasi IIS ................................................................................................................... 5

Uji Coba melalui localhost .................................................................................................... 5

Menggunakan Microsoft Visual Studio 2010 .............................................................................. 8

DASAR PEMROGRAMAN C# .................................................................................................. 11

Control Event dan Subroutines ........................................................................................... 11

Page Event ...................................................................................................................... 12

Variabel ........................................................................................................................... 13

Array ............................................................................................................................... 15

Function .......................................................................................................................... 16

Operator .......................................................................................................................... 17

Conditional Logic .............................................................................................................. 19

Loops .............................................................................................................................. 21

Membangun Aplikasi Web ASP.NET ....................................................................................... 25

Web Forms ...................................................................................................................... 25

HTML Server Controls ....................................................................................................... 25

Menggunakan HTML Server Control .................................................................................... 26

Web Server Control .......................................................................................................... 29

Standard Web Server Controls ........................................................................................... 29

Label............................................................................................................................ 29


TextBox........................................................................................................................ 30

HiddenField .................................................................................................................. 30

Button .......................................................................................................................... 30

ImageButton................................................................................................................. 31

LinkButton .................................................................................................................... 31

HyperLink ..................................................................................................................... 32

CheckBox ..................................................................................................................... 32

RadioButton .................................................................................................................. 32

Image .......................................................................................................................... 32

PlaceHolder .................................................................................................................. 32

Panel ........................................................................................................................... 33

DropDownList ............................................................................................................... 33

ListBox ......................................................................................................................... 34

Latihan: ....................................................................................................................... 37

Form Validation Control ..................................................................................................... 38

Desain Database .................................................................................................................. 40

Membuat Database ........................................................................................................... 40

Membuat Table ................................................................................................................ 43

Manajemen Data Melalui Table Editor ................................................................................. 45

Mengubah struktur Table .................................................................................................. 46

Menjalankan Perintah SQL ................................................................................................. 47

ADO.NET (ActiveX Data Objects .NET) ................................................................................... 49

Pengenalan ADO.NET ....................................................................................................... 49

Mengatur Authentikasi Database ........................................................................................ 52

Mengatur Konfigurasi ConnectionString ............................................................................... 52

Menggunakan Control Repeater ......................................................................................... 53


Repeater ...................................................................................................................... 53

Menggunakan DataList ...................................................................................................... 55

Menggunakan GridView dan DetailsView untuk memanage data ............................................ 57

Menggunakan DetailsView untuk menampilkan data ............................................................ 61

Mendesain Tampilan DetailsView ........................................................................................ 63

Edit Data dengan DetailsView ............................................................................................ 63

Menghapus Data pada GridView ......................................................................................... 67

Menginput Data dengan DetailsView ................................................................................... 69

Master Page ........................................................................................................................ 73

Membuat Master Page ...................................................................................................... 73

Menggunakan Master Page ................................................................................................ 73

Membuat Laporan ................................................................................................................ 74

Tugas Akhir ......................................................................................................................... 77


PENDAHULUAN

ASP.NET adalah salah satu teknologi pengembangan web yang paling menarik yang ditawarkan

saat ini. ASP.NET adalah platform handal yang dilengkapi dengan banyak sekali fungsi built-in,

tingkat kinerja yang mengagumkan, dan merupakan salah satu IDE (Integrated Development

Environment) terbaik yang ditelah terintegrasi dalam paket Visual Studio.

Apa itu ASP.NET

ASP.NET merupakan teknologi server-side untuk mengembangkan aplikasi web berbasis Microsoft

.NET Framework.

Pada saat browser meminta (request) halaman web yang dibuat dengan teknologi Client-side

seperti HTML, javascript dan Cascading Style Sheet (CSS), web server hanya mengirimkan balik

file-file tersebut pada browser tanpa melakukan proses apapun. Kemudian browserlah yang

bertanggung jawab sepenuhnya untuk membaca dan menterjemahkan script atau markup pada

file-file tersebut.

Sedangkan teknologi Server-side seperti ASP.NET berbeda, script atau kode tidak diterjemahkan

disisi client tapi diinterpretasikan oleh server web. Sehingga kode pada halaman dibaca oleh server

dan digunakan untuk menghasilkan HTML, JavaScript dan CSS yang kemudian dikirim ke browser.

Sebelum belajar ASP.NET, pastikan Anda telah menginstal komponen-komponen software yang

dibutuhkan dan telah berjalan dengan baik pada komputer Anda.

Webserver IIS (Internet Information Service)

IIS adalah web server bawaan Microsoft Windows yang dapat digunakan untuk menjalankan

aplikasi web ASP.NET. Anda dapat menginstal IIS melalui CD master Windows seperti Windows

2000 Professional, Server dan Advances Server, Windows XP Professional, Windows Vista, Windows

7 dan semua versi Windows Server.

Untuk menginstal IIS ikuti langkah dibawah ini:

1. Masukkan CD master Windows

2. Buka Control Panel dan pilih Add or Remove Programs

3. Pilih Add/Remove Windows Components. Daftar komponen window akan ditampilkan

4. Pada daftar komponen berikan tanda ceklis pada Internet Information Service (IIS)

5. Klik Next untuk menginstal IIS

1


.NET Framework

Untuk memulai membuat aplikasi ASP.NET Anda perlu menginstal .NET Framework dan Software

Development Kit (SDK). NET Framework berisi file-file yang diperlukan untuk menjalankan dan

melihat halaman ASP.NET, sedangkan SDK berisi file-file contoh, dokumentasi dan berbagai

peralatan pendukung.

.NET Framework dan SDK dapat didownload melalui situs www.asp.net.

Selain itu untuk lebih mudahnya Anda dapat menginstal Microsoft Visual Studio .NET atau Microsoft

Visual Web Developers 2010 Express include SQL Server Express.

Konfigurasi IIS

Untuk membuka konfigurasi IIS dapat dilakukan melalui jendela Control Panel, System and

Security, Administrative Tools kemudian klik dua kali pada shortcut Internet Information Service

(IIS) Manager.

Klik dua kali pada Menu Bindings untuk mengubah port default HTTP, kemudian pada jendela Site

Bindings pilih http dan klik tombol edit kemudian ketik port yang diinginkan. Misalnya 81 sehingga

untuk mengakses HTTP melalui Web Server IIS dari browser adalah http://localhost:81

Uji Coba melalui localhost

Klik menu Basic Settings untuk melihat root direktori dan untuk mengatur user akses klik pada

tombol Connect as..

Isilah user dan password administrator komputer kemudian klik OK.

Untuk menguji pengaturan yang baru klik pada tombol Test Settings..

http://www.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


Menggunakan Microsoft Visual Studio 2010

Membuat file aspx bisa dilakukan melalui notepad dengan mengetikkan semua script baik html

maupun bahasa pemrogramannya, akan tetapi kita bisa memanfaatkan Tools yang dikeluarkan

oleh Microsoft khusus untuk men-develop aplikasi berbasis .NET Framework yaitu Microsoft Visual

Studio.

Setelah terinstal dengan baik, jalankan Ms Visual Studio melalui Start > Program Files, kemudian

buat website baru untuk menampung file-file latihan yang akan kita buat selama praktikum.

Pilih menu File > New > Website

Kemudian pilih Visual C# pada Installed Templates, pilih ASP.NET Web Site dan tentukan lokasi

file-file website akan disimpan


Klik OK untuk membuat website baru, kemudian akan tampil pada Editor Visual Studio file

Default.aspx yang merupakan file default website.

Untuk menambahkan file baru pilih icon Add New Item pada toolbars

Dan pilih Visual C# pada Installed Templates, pilih HTML Page dan ketik nama file yang akan kita

buat dengan ekstensi .aspx


Klik tombol Add dan sesuaikan isi file testing.aspx dengan yang ada pada modul.

Klik icon Start Debugging pada toolbars untuk menjalankan file testing.aspx pada browser.


DASAR PEMROGRAMAN C#

Control Event dan Subroutines

Event merupakan aksi yang dibangkitkan kemudian code program dijalankan untuk merespon aksi

tersebut. Sebagai contoh, pada script dibawah ini terdapat label dan tombol, perhatikan

penggunaan atribut onClick pada tombol. Saat tombol diklik maka Subroutines button_Click akan

dijalankan.

File: ClickEvent.aspx <!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.

2


OnDataBinding

Atribut ini dinyalakan secara otomatis ketika tombol terikat ke sumber data.

Latihan :

Buatlah halaman seperti dibawah ini dengan fungsi tombol masing-masing adalah:

Nama untuk menampilkan nama

Alamat untuk menampilkan alamat

Clear untuk membersihkan layar

Page Event

Selain event diatas yang dapat dibangkitkan melalui kontrol, ada event jenis lain yaitu page event

dimana semua event dihasilkan oleh sebuah halaman.

Berikut ini event pada halaman yang sering digunakan.

Page_Init

Dijalankan ketika halaman diinisialisasi

Page_Load

Dijalankan pada saat pertama kali browser memproses permintaan (request) halaman, dan semua

kontrol didalamnya diperbarui.

Page_PreRender

Dijalankan pada saat pertama kali sebuah halaman dipanggil, tetapi sebelum browser menerima

respon apapun dari server

Page_UnLoad

Dijalankan ketika halaman tidak lagi dibutuhkan oleh server dan tidak ada aktifitas apapun.

Urutan diatas sesuai dengan peristiwa mereka dieksekusi. Dengan kata lain, event Page_Init

merupakan event pertama yang dipanggil oleh halaman, diikuti oleh Page_Load, Page_PreRender,

dan akhirnya Page_UnLoad.


Contoh dibawah ini menggambarkan cara kerja page event, Anda tidak perlu menentukan urutan

subroutine yang akan dijalankan karena secara default subroutine akan dijalankan sesuai dengan

nama-nama event tersebut.

File : pageEvent.aspx <!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.


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>


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


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


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


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


Contoh diatas menggunakan operator sama dengan, tidak sama dengan dan operator logical “and”

dalam perintah If untuk menampilkan pesan konfirmasi pembayaran. Operator sama dengan ‘==’

digunakan untuk membandingkan dua nilai apakah sama atau tidak, sedangkan tanda ‘=’

digunakan untuk menentukan atau memberikan nilai kepada suatu variabel.

Latihan :

Buatlah fungsi untuk menghitung umur seseorang. Gunakan script dibawah ini untuk mendapatkan

tahun sekarang.

DateTime skr = DateTime.Now; string tahunSkr = skr.ToString("yyyy"); return Convert.ToInt32(tahunSkr)

Conditional Logic

Dalam sebuah aplikasi akan ada suatu aksi/perintah yang akan dijalankan hanya jika suatu kondisi

sesuai dengan yang telah ditentukan, misalnya jika pengguna memilih sebuah checkbox atau

memilih salah satu item dari DropDownList atau bisa juga mengetikkan suatu kata pada TextBox.

Kita cek pilihan tersebut menggunakan kondisi, secara sederhana kita dapat menggunakan

perintah if dimana perintah ini sering dipasangkan dengan kondisi else yang akan dijalankan jika

kondisinya tidak sesuai.


File: logical.aspx <!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{


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>


Latihan :

Buatlah halaman login seperti dibawah ini dan buat script untuk memeriksanya dengan ketentuan

sebagai berikut:

Jika username: admin dan password: 1234 maka akan masuk ke halaman admin

Jika username: user dan password: 1234 maka akan masuk ke halaman user

Jika login tidak memenuhi kedua syarat diatas maka akan muncul pesan kesalahan dibawahnya.

Loops

Loops yang dimaksud adalah baris perintah yang dijalankan secara berulang-ulang selama kondisi

pengulangannya bernilai benar. Ada dua macam pengulangan yaitu :

1. While loops, atau Do loops

2. For loops, termasuk perintah For Next dan For Each

While loop merupakan jenis pengulangan yang paling sederhana dimana baris perintah akan

dijalankan berulang-ulang selama kondisinya bernilai benar. Berikut ini adalah contohnya:


File: whileloop.aspx <!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"


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


Pada contoh diatas, pengulangan akan dihentikan ketika kondisi i = 5, dan menampilkan pesan

seperti pada contoh gambar diatas.


Membangun Aplikasi Web ASP.NET

Web Forms

Web Form merupakan komponen penting dalam sebuah aplikasi berbasis web dimana dalam

pelaksanaanya ini dapat digunakan sebagai alat untuk berkomunikasi antara pengguna dengan

aplikasi. Setiap Web Form harus memiliki tag <form runat=”server”> dan terdapat element-

element ASP.NET sesuai dengan kebutuhan. Dalam satu halaman web tidak boleh ada lebih dari

satu Web Form.

Untuk menggunakan dan memanipulasi web form, kita dapat menggunakan class bawaan Net

Framework yaitu System.Web.UI.page.

Kita dapat menggunakan beberapa tipe element dalam form termasuk tag HTML standar, tetapi

ada pertimbangan lain agar suatu element dapat diidentifikasi dan dimanipulasi baik nilai maupun

atributnya pada saat pertama kali halaman web dijalankan (load) atau pada saat sebuah web form

disubmit. Element-element ini dalam ASP.NET disebut control, yang terdiri dari:

HTML Server Controls

Web server controls

Web user controls

Master pages

Ada perbedaan yang signifikan antar jenis control tersebut, namun apa yang membuat mereka

mirip adalah semua control dapat mudah diintegrasikan dan digunakan berulangkali pada aplikasi

yang kita buat.

HTML Server Controls

HTML Server Control sangat mirip dengan HTML pada umumnya hanya ada penambahan atribut

runat=”server”. Hal ini dilakukan agar tag HTML yang kita gunakan dapat dikontrol secara dinamis

melalui bahasa pemrograman seperti VB atau C#. Lihat pada table daftar Server Controls.

Table 3.1: HTML Server Controls

Class Associated Tag

HtmlAnchor <a runat=”server” >

HtmlButton <button runat="server">

HtmlForm <form runat="server">

HtmlImage <img runat="server">

3


HtmlInputButton <input type="submit" runat="server">

<input type="reset" runat="server">

<input type="button" runat="server">

HtmlInputCheckBox <input type="checkbox" runat="server">

HtmlInputFile <input type="file" runat="server">

HtmlInputHidden <input type="hidden" runat="server">

HtmlInputImage <input type="image" runat="server">

HtmlInputRadioButton <input type="radio" runat="server">

HtmlInputText <input type="text" runat="server">

<input type="password" runat="server">

HtmlSelect <select runat="server">

HtmlTable <table runat="server">

HtmlTableRow <tr runat="server">

HtmlTableCell <td runat="server">

<th runat="server">

HtmlTextArea <textarea runat="server">

HtmlGenericControl <span runat="server">

<div runat="server">

Semua tag HTML lainnya

Semua class HTML Server Control terdapat pada namespace System.Web.UI.HtmlControls.

Menggunakan HTML Server Control

Kita akan membuat halaman web yang berisi HtmlForm, HtmlButton, HtmlInputText dan

HtmlSelect. Ketiklah script dibawah ini dan simpan dengan nama buku.aspx

File: buku.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Using ASP.NET HTML Server Controls</title> </head> <body> <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>


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


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.


Web Server Control

Web Server Control dapat dikatakan sebagai HTML Server Control versi mahir. Web Server Control

akan secara otomatis meng-generate tag HTML sehingga Anda tidak perlu lagi menggunakan tag-

tag HTML secara standar, namun jika Anda telah mengenal dengan baik tag-tag HTML maka tidak

akan menemukan kesulitan yang berarti ketika menggunakan Web Server Control.

Perhatikan contoh dibawah ini, misal tag HTML untuk input text;

<input type="text" name="usernameTextBox" size="30" />

Dalam Web Server Control perintahnya menjadi;

<asp:TextBox id="usernameTextBox" runat="server" Columns="30"> </asp:TextBox>

Perlu diingat, tidak seperti tag HTML standar yang biasa digunakan pada Web Form, web server

control diproses pertama kali oleh engine ASP.NET dengan mentransformasikan kedalam bentuk

HTML (client side), sehingga Anda perlu memastikan setiap element harus ditutup dengan tag

</asp:TextBox> jika tidak maka proses akan mengalami kegagalan sejak pertama kali diproses.

Cara lain untuk menutup tag web server control dengan menambahkan garis miring ‘/’ diakhir tag

element tersebut. Sehingga tag web server control diatas akan terlihat seperti dibawah ini;

<asp:TextBox id="usernameTextBox" runat="server" Columns="30" />

Untuk memudahkan pada saat menggunakan web server control ada baiknya memperhatikan hal-

hal berikut:

Web server control harus ditempatkan didalam tag <form runat=”server” > agar dapat

berfungsi dengan baik

Web server control harus memiliki atribut runat=”server”

Selalu menggunakan prefik asp: setiap menambahkan element web server control

Standard Web Server Controls

ASP.NET telah memberikan standarisasi terhadap Web Server Control yang dapat dilihat pada .NET

Framework 2.0 SDK Documentation. Berikut ini akan dijelaskan beberapa web server control;

Label

Cara mudah untuk menampilkan teks statis pada halaman web dan dapat juga untuk memodifikasi

nilainya melalui script ASP.NET.

<asp:Label id="messageLabel" Text="" runat="server" />

Untuk menambahkan nilai pada label diatas dapat dilakukan dengan cara:

public void Page_Load() { messageLabel.Text = "Hello World";


}

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


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


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


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>


CheckBox List

CheckBox List adalah element checkbox namun dalam group, sehingga penggunaannya lebih tepat

untuk pilihan yang lebih dari satu. Contoh :

<asp:CheckBoxList ID="ekskul" runat="server"> <asp:ListItem Value="pramuka">Pramuka</asp:ListItem> <asp:ListItem Value=”paskibra”>Paskibra</asp:ListItem> <asp:ListItem Value=”taekwondo”>Tekwondo</asp:ListItem> </asp:CheckBoxList> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> <asp:Label ID="msgLabel" runat="server" Text="Label"></asp:Label>

CS script

msgLabel.Text = ""; for (int n = 0; n < ekskul.Items.Count; n++) { if (ekskul.Items[n].Selected) { msgLabel.Text += ekskul.Items[n].Text; } } //atau dengan cara dibawah ini msgLabel.Text += "<br>"; foreach (ListItem item in ekskul.Items) { if (item.Selected) msgLabel.Text += item.Text + "<br>"; }

ListBox

ListBox mirip dengan tag select pada HTML dengan multiselect dan size untuk menampilkan kotak

pilihan lebih dari satu baris. Jika atribut SelectMode diisi multiselect maka pengguna dapat memilih

lebih dari satu dari pilihan yang tersedia. Contoh:

<asp:ListBox id="listTechnologies" runat="server" SelectionMode="Multiple"> <asp:ListItem Text="ASP.NET" Value="aspnet" /> <asp:ListItem Text="JSP" Value="jsp" /> <asp:ListItem Text="PHP" Value="php" /> <asp:ListItem Text="CGI" Value="cgi" /> <asp:ListItem Text="ColdFusion" Value="cf" /> </asp:ListBox>


Contoh Form dengan beberapa Elements

Buatlah form dengan element sebagai berikut:

Element ID Element Keterangan

TextBox txtNama

RadioButtonList txtJkel Text: Laki-laki, Value: 1; Text:

Perempuan, Value: 2

DropDownList txtAgama Islam:1, Katolik: 2, Protestan:

3, Hindu: 4, Budha: 5, Kong Hu

Cu: 6

CheckBoxList txtMateri

Button Submit

Label msgLabel

Klik dua kali pada button Submit dan ketik script nya seperti dibawah ini:

protected void Submit_Click(object sender, EventArgs e) { msgLabel.Text = "Nama : " + txtNama.Text + "<br />"; if (txtJkel.SelectedItem != null) { msgLabel.Text += "Jenis Kelamin : " + txtJkel.SelectedItem.Value + "<br />"; } else { msgLabel.Text += "Jenis Kelamin : <br />"; } msgLabel.Text += "Agama : " + txtAgama.Text + "<br />"; String materi = ""; foreach (ListItem item in txtMateri.Items)


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


Latihan:

Duplikasikan file buku.aspx menjadi buku2.aspx dan rubah isinya menggunakan Web Server

Control.

Buat melalui Editor (Visual Studio / Ms Visual Web Dev 2010 Express).

Menu File, New File, C#, Web Form

Table, Insert Table

Tambahkan TextBox, DropDownList, Label dan Button


Form Validation Control

ASP.NET dilengkapi dengan kontrol validasi (validation controls) yang dapat digunakan dengan

mode server-side sehingga lebih aman. Kontrol validasi pada ASP.NET menghasilkan javascript

yang akan memvalidasi secara standar kemudian ketika halaman web dikirimkan ke server

(submitted) validasi disisi server dapat dijalankan walaupun validasi di sisi client telah sukses.

Untuk menggunakan ASP.NET validation controls, Anda hanya perlu menambahkan objek validasi

ke halaman web dan mengkonfigurasinya dengan mudah melalui jendela properties.

<asp:TextBox ID="id_buku" runat="server" Width="120px" BackColor="#FFFFCC" ForeColor="#0066FF"></asp:TextBox> <asp:RequiredFieldValidator id="id_bukuReq" runat="server" ControlToValidate="id_buku" ErrorMessage="ID Buku harus diisi" SetFocusOnError="True" /> <asp:CompareValidator id="id_bukuNumReq" runat="server" Operator="GreaterThan" Type="Integer" ControlToValidate="id_buku" ValueToCompare="0" ErrorMessage="ID Buku harus angka" />

untuk mengaturnya melalui properties, perhatikan item-item dibawah ini


RequiredFieldValidator digunakan untuk memvalidasi agar suatu inputan seperti textbox harus

diisi atau tidak boleh dikosongkan

CompareValidator digunakan untuk membandingkan nilai yang diinput

RangeValidator digunakan untuk memvalidasi nilai dari minimal sampai maximal

RegularExpressionValidator digunakan untuk memvalidasi inputan sesuai dengan aturan

format yang telah ditentukan, misal: nomor telepon, email, kode pos dan lain-lain

CustomValidator digunakan jika ingin validasi dilakukan melalui fungsi yang telah dibuat

ValidationSummary digunakan untuk menampilkan hasil validasi secara keseluruhan


4 Desain Database

Database adalah bagian penting dalam sebuah aplikasi yang akan menentukan baik dan tidaknya

output suatu aplikasi, selain itu menentukan juga efektifitas proses dalam aplikasi itu sendiri,

sehingga seringkali para programer lebih mengkhususkan dalam desain database sebelum proses

coding dan developing aplikasi dimulai lebih lanjut.

Membuat Database

Untuk membuat database dapat dilakukan dengan berbagai cara tergantung menggunakan apa

database itu akan dibuat, apakah melalui Visual Web Developer Express Edition atau menggunakan

SQL Server Management Studio.

Dibawah ini akan dijelaskan cara membuat database melalui Microsoft Visual Web Developer 2010

Express Edition.

Jalankan Microsoft Visual Web Developer 2010 Express Edition.

Buka tab Database Explorer pada panel sebelah kanan..


Kemudian klik kanan pada Data Connection dan pilih Add Connection...

Maka akan muncul jendela wizard Add Connection, pada isian Server name pilihlah server yang ada

atau dapat juga diketik secara manual yaitu [NAMA_KOMPUTER]\SQLEXPRESS


Karena akan membuat database baru maka ketikkan nama database yang akan dibuat pada kotak

isian Select or enter a database name:

Klik OK.

Klik Yes.

Maka database dengan nama perpustakaan akan muncul pada Database Explorer


Membuat Table

Setelah database terbentuk barulah kita dapat membuat table-table didalamnya sesuai dengan

kebutuhan sistem.

Struktur table yang akan dibuat adalah sebagai berikut:

Nama Field Tipe Data Atribut

id_buku nvarchar(5) Primary key

jenis nvarchar(20)

judul nvarchar(50)

penerbit nvarchar(50)

tahun_cetak Nchar(4)

pengarang nvarchar(50)

keterangan nvarchar(50)

Untuk membuatnya klik pada segitiga disamping kiri database kemudian klik kanan pada Table dan

pilih Add New Table


Pada panel utama akan ditampilkan sheet kosong untuk membuat tabel baru, ketikkan sesuai

dengan struktur tabel diatas.

Untuk mengatur id_table sebagai primary key, klik kanan pada field id_table dan pilih Set Primary

Key...

Jika sudah selesai, untuk menyimpannya klik icon save pada toolbar, kemudian ketikkan nama

table dan klik OK.


Manajemen Data Melalui Table Editor

Setelah table buku terbentuk maka akan muncul nama table pada database perpustakaan. Untuk

membuka data pada table buku klik kanan pada nama table kemudian pilih Show Table Data.

Untuk menambah dan mengubah data dapat dilakukan dengan langsung mengetik pada kolom-

kolom table buku tersebut.

Untuk menghapus satu baris data pada table buku, pilih terlebih dahulu baris yang ingin dihapus

dengan klik tanda segitiga pada sebelah kiri table kemudian klik kanan dan pilih Delete


Mengubah struktur Table

Untuk mengubah struktur table baik menambah, menghapus, mengubah nama dan mengubah

type field dapat dilakukan dengan cara klik kanan pada nama table kemudian pilih Open Table

Definition.

Ubah struktur table sesuai dengan kebutuhan, kemudian pilih menu File, Save atau klik icon Save

untuk menyimpan perubahannya.

Jika muncul pesan error pada saat menyimpan hasil perubahan maka ubahlah pengaturan dengan

menghilangkan centang Prevent saving changes that require table re-creation yang terdapat pada

pengaturan Table and Database Designer melalui Menu Tool, Options.


Menjalankan Perintah SQL

SQL adalah bahasa standar internasional yang hampir dimiliki oleh semua platform database,

seperti SQL Server, Oracle, DB2, MySQL dan sebagainya. Struktur bahasa SQL didukung oleh

Server SQL yang disebut Transact-SQL (T-SQL).

Pada BAB ini akan kita pelajari tentang dasar-dasar bahasa SQL yang akan sering digunakan pada

BAB-BAB berikutnya.

Adapun perintah SQL yang sering digunakan terbagi menjadi empat perintah dasar yaitu SELECT,

INSERT, UPDATE dan DELETE.

Untuk menjalankan perintah SQL dapat dilakukan melalui Microsoft SQL Manajemen Studio.

Dengan memilih nama database yang telah kita buat kemudian pilih menu File > New > Database

Engine Query

Ketiklah perintah SQL Pada jendela query kemudian klik icon Execute atau tekan tombol F5 pada

keyboard

Perintah SELECT


SELECT * FROM buku

SELECT judul,penerbit,pengarang FROM buku

SELECT * FROM buku WHERE id_buku=’001’

SELECT * FROM buku WHERE judul LIKE ‘%pemrograman%’

SELECT * FROM buku ORDER BY judul

Perintah INSERT

INSERT INTO buku (id_buku,jenis,judul,penerbit,tahun_cetak,pengarang,keterangan) VALUES

('003','komputer','Web Dinamis dengan ASP.NET 4.5','Penerbit Andi','2011','Erick Kurniawan','-')

Perintah UPDATE

UPDATE buku SET judul=’Pemrograman Web dengan ASP.NET’,tahun_cetak=’2011’ WHERE

id_buku=’002’

Perintah DELETE

DELETE FROM buku WHERE id_buku=’001’


5 ADO.NET (ActiveX Data Objects .NET)

ADO.NET (ActiveX Data Objects .NET) adalah teknologi microsoft modern yang mengijinkan

pengaksesan database dari code aplikasi. Dengan ADO.NET kita dapat menampilkan data buku dan

membolehkan pengguna untuk menambah, mengupdate atau menghapus melalui aplikasi web

yang kita buat.

Pada bab ini akan dipelajari:

Bagaimana cara koneksi ke database perpustakaan menggunakan ADO.NET

Bagaimana menjalankan Query SQL dan menerima hasilnya dengan ADO.NET

Bagaimana menampilkan data dari database

Pengenalan ADO.NET

Untuk menggunakan ADO.NET kita perlu menentukan terlebih dahulu platform database yang akan

digunakan, kemudian import namespace yang mengandung class untuk platform database

tersebut. Karena kita menggunakan SQL Server maka yang harus kita import adalah namespace

System.Data.SqlClient yang menampung semua class Sql yang kita perlukan. Diantaranya yang

paling penting adalah class Sql dibawah ini:

SqlConnection, yang akan digunakan untuk koneksi ke Server Database SQL

SqlCommand, class ini digunakan untuk menangani query SQL dan stored procedure yang akan

dijalankan pada Server Database SQL

SqlDataReader, Data dari database akan diterima melalui class SqlDataReader.

Ada 6 langkah yang perlu diperhatikan dalam menggunakan ADO.NET untuk mengakses database

dari aplikasi, yaitu:

1. Import namespace yang dibutuhkan

2. Buat koneksi ke database menggunakan SqlConnection

3. Jika ingin memanipulasi data pada database, buat perintahnya melalui SqlCommand

4. Buat koneksi dan jalankan query SQL untuk menerima hasilnya ke SqlDataReader

5. Ekstrak data dari SqlDataReader dan tampilkan pada halaman web

6. Tutup koneksi database

Untuk mencobanya silahkan tambahkan file baru melalui menu Website, Add New Item… kemudian

pada jendela template yang muncul pilih Web Form dan ubah namanya menjadi adonet.aspx

kemudian klik tombol Add


Setelah tombol Add diklik maka akan terbentuk dua file yaitu adonet.aspx yang digunakan untuk

menyimpan desain interface (berisi script HTML) dan adonet.aspx.cs yang digunakan untuk

menyimpan script-script bahasa pemrograman C#.

tambahkan label pada file adonet.aspx

<asp:Label ID=”messageLabel” runat=”server”></asp:Label>


File: adonet.aspx

Kemudian buka file adonet.aspx.cs dan ketikkan script dibawah ini

File : adonet.aspx.cs protected void Page_Load(object sender, EventArgs e) { // menentukan koneksi database SqlConnection conn = new SqlConnection("Server=asani75-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.


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

parameter penting seperti nama server, nama database, user ID dan password agar dapat

terkoneksi dengan database yang akan kita akses.

Agar lebih aman kita dapat menggunakan konfigurasi ConnectionString yang terdapat dalam file

Web.config. Pada elemen Configuration terdapat sub element ConnectionStrings yang didalamnya

harus kita sertakan tiga paramater penting yaitu


name untuk nama connectionStrings yang akan kita panggil dari script,

connectionString diisi parameter koneksi ke database

providerName yang diisi dengan jenis provider data yang digunakan


Web.Config <configuration> ⋮ <connectionStrings> <add name="Perpustakaan" connectionString="Server=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.


<FooterTemplate> : template ini digunakan sebagai penutup (footer) yang akan tampil setelah

semua data ditampilkan. Jika menggunakan table HTML Anda dapat menyisipkan tag penutup

</table> pada template ini.

Untuk lebih memahaminya silahkan buat file repeater.aspx dengan skrip seperti dibawah ini.

File: repeater.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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)


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


File: datalist.aspx <%@ Page Language="C#" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> 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>


</asp:DataList> </div> </form> </body> </html>

Menggunakan GridView dan DetailsView untuk memanage data

GridView menghasilkan table HTML sederhana sehingga data yang disajikan mudah dibaca, tidak

memiliki format yang rumit dan dalam bentuk tabular. Seperti halnya Repeater, gridView dapat

juga menampilkan semua isi data yang terdapat dalam SqlDataReader pada sebuah halaman

berdasarkan pengaturan style (css).

gridView memiliki fitur yang lebih banyak dibanding Repeater, adapun fitur-fitur yang dimiliki

gridView adalah sebagai berikut:

1. memiliki Header dan Footer Table

2. Paging (menyajikan data per halaman)

3. Sorting (pengurutan data)

4. Modifikasi tampilan melalui Cascading Style Sheet (css)

5. Kustomisasi kolom untuk edit data


Agar lebih memahami silahkan buat file dengan nama gridview.aspx kemudian ketik script dibawah

ini.

Gridview.aspx <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="gridview.aspx.cs" Inherits="gridview" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> <h1>Data Buku</h1> <asp:GridView id="grid" runat="server" /> </asp:Content>

Klik dua kali untuk membuka file gridview.aspx.cs dan tambahkan 2 namespace dibawah ini

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; 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


Untuk memodifikasi kolom dapat dilakukan dengan mengubah element GridView seperti dibawah

ini

<asp:GridView ID="grid" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="id_buku" HeaderText="ID Buku" /> <asp:BoundField DataField="jenis" HeaderText="Kategori" /> <asp:BoundField DataField="judul" HeaderText="Judul Buku" /> <asp:BoundField DataField="penerbit" HeaderText="Penerbit" /> <asp:BoundField DataField="tahun_cetak" HeaderText="Tahun" /> <asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" /> <asp:BoundField DataField="keterangan" HeaderText="Keterangan" /> </Columns> </asp:GridView>

Sehingga hasilnya akan tampak seperti dibawah ini

Mendesain GridView dengan Cascading Style Sheet

Untuk mendesain tampilan gridview melalui Cascading Style Sheet, ikuti langkah-langkah dibawah

ini.

Buka file css yang ada di folder Style kemudian tambahkan script dibawah ini dibaris paling bawah

.GridMain { border-right: gainsboro thin solid; border-top: gainsboro thin solid; border-left: gainsboro thin solid; border-bottom: gainsboro thin solid; background-color: #333333; width: 100%; } .GridRow { background-color: #FFFAFA; } .GridSelectedRow { background-color: #E6E6FA; } .GridHeader { background-color: #ADD8E6; font-weight: bold; text-align: left; }


Kemudian sesuaikan element gridView menjadi seperti dibawah ini

<asp:GridView ID="grid" runat="server" CssClass="GridMain" CellPadding="4" GridLines="None" AutoGenerateColumns="False"> <RowStyle CssClass="GridRow" /> <SelectedRowStyle CssClass="GridSelectedRow" /> <HeaderStyle CssClass="GridHeader" /> <Columns> <asp:BoundField DataField="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.


Kemudian ketik script dibawah ini

protected void grid_SelectedIndexChanged(object sender, EventArgs e) { //mendeteksi index baris yang dipilih int selectedRowIndex; selectedRowIndex = grid.SelectedIndex; // baca kolom judul dari grid GridViewRow row = grid.Rows[selectedRowIndex]; string judul = row.Cells[2].Text; // tampilkan di label messageLabel.Text = "Anda memilih judul " + judul; }

Setelah dijalankan maka baris record dapat dipilih dengan meng-klik pada link Pilih, selanjutnya

akan dibahas bagaimana menampilkan detail data dari baris record yang dipilih melalui control

DetailsView.

Menggunakan DetailsView untuk menampilkan data

Data yang ditampilkan pada gridView dapat kita pilih field mana saja yang ingin ditampilkan,

sehingga untuk table yang memiliki jumlah field banyak hanya tertentu saja yang ditampilkan agar

tidak merusak tampilan halaman.


Ketika salah satu baris record pada gridView dipilih kita dapat menampilkan semua field yang

terdapat pada suatu table, bahkan kita dapat menampilkannya dengan terlebih dahulu merelasikan

table tersebut dengan table lain sesuai dengan nilai referensi yang ingin ditampilkan. Hal ini dapat

dilakukan dengan menggunakan control DetailsView.

Untuk mengimplementasikannya, silahkan duplikasi file gridview.aspx dengan cara klik kanan pada

nama file gridview.aspx dan klik kanan pada root folder kemudian pilih Paste, maka akan

ditambahkan file dengan nama Copy of gridview.aspx, ganti namanya menjadi detailsview.aspx.

Buka file detailsview.aspx dan tambahkan control detailsView dibawah gridView

… </asp:GridView> <br /> <asp:DetailsView id="detailBuku" runat="server" /> </asp:Content>

Selanjutnya tambahkan data key pada control grid yang berguna untuk menyimpan id_buku untuk

masing-masing record.

… grid.DataSource = reader; grid.DataKeyNames = new string[] { "id_buku" }; grid.DataBind(); …

Kemudian buka file detailsview.aspx.cs dan tambahkan namespace System.Data

… using System.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();


} 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


Kemudian ketik script dibawah ini

protected void detailBuku_ModeChanging(object sender, DetailsViewModeEventArgs e) { // ubah mode pada data terpilih detailBuku.ChangeMode(e.NewMode); // refresh data buku BindDetails(); }

DetailsView memiliki tiga mode tampilan yaitu

1. DetailsViewMode.ReadOnly untuk menampilkan data secara readonly

2. DetailsViewMode.Edit untuk mengubah data

3. DetailsViewMode.Insert untuk menginput data baru

ketika event ModeChanging dipanggil maka detailsView akan mengirimkan parameter dengan

nama e yang berisi DetailsViewMode.Edit jika tombol Edit yang kita pilih.

Agar nilai untuk masing-masing DetailsViewMode dapat kita manipulasi melalui script maka objek-

objek dalam detailsView harus di konversi kedalam TemplateFields, selain itu dapat mempermudah

untuk mengakses nama dari masing-masing objek tersebut.

Pilih mode Desain dan klik kanan pada DetailsView kemudian pilih Show Smart Tag

Kemudian klik Edit Field

Kemudian akan muncul dialog Fields, konversi field-field yang ada dengan cara pilih field dan klik

pada Convert this field into a TemplateField.


Klik OK untuk menutup dialog Fields.

Jika kita lihat hasilnya melalui mode Source maka akan terdapat tiga template untuk masing-

masing field yaitu EditItemTemplate, InsertItemTemplate dan ItemTemplate. Untuk mempermudah

mengingat ID untuk masing-masing field ubahlah semua ID sesuai dengan template dan nama

fieldnya, sehingga script detailsView akan tampak seperti dibawah ini.

<asp:DetailsView id="detailBuku" runat="server" AutoGenerateRows="False" CssClass="GridMain" CellPadding="4" GridLines="None" FieldHeaderStyle-Width="200px" onmodechanging="detailBuku_ModeChanging" onitemupdating="detailBuku_ItemUpdating"> <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>


<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");


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


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


Menginput Data dengan DetailsView

Fungsi DetailsView selain untuk menampilkan data adalah untuk menginput data dan fungsi ini

yang tidak ada pada GridView.

Seperti yang telah dijelaskan pada materi sebelumnya bahwa DetailsView memiliki tiga mode

tampilan, salah satunya adalah DetailsViewMode.Insert yang berfungsi untuk menginput data baru

kedalam sebuah table.

Mode insert secara default false artinya tidak diaktifkan, untuk mengaktifkannya dapat dilakukan

melalui fasilitas DetailsView Tasks dan memilih Edit Fields…

Kemudian pilih CommandField pada kotak Selected fields dan atur ShowInsertButton-nya menjadi

True


Klik OK untuk menyimpan perubahan dan menutup dialog Fields, selanjutnya klik dua kali event

ItemInserting dari panel propertiesnya DetailsView dan ketik script dibawah ini.

protected void detailBuku_ItemInserting(object sender, DetailsViewInsertEventArgs e) { TextBox newId_bukuTextBox = (TextBox)detailBuku.FindControl("insertId_buku"); TextBox newJenisTextBox = (TextBox)detailBuku.FindControl("insertJenis"); TextBox newJudulTextBox = (TextBox)detailBuku.FindControl("insertJudul"); TextBox newPenerbitTextBox = (TextBox)detailBuku.FindControl("insertPenerbit"); TextBox newTahun_cetakTextBox = (TextBox)detailBuku.FindControl("insertTahun_cetak"); TextBox newPengarangTextBox = (TextBox)detailBuku.FindControl("insertPengarang"); TextBox newKeteranganTextBox = (TextBox)detailBuku.FindControl("insertKeterangan"); string newId_buku = newId_bukuTextBox.Text; string newJenis = newJenisTextBox.Text; string newJudul = newJudulTextBox.Text; string newPenerbit = newPenerbitTextBox.Text; string newTahun_cetak = newTahun_cetakTextBox.Text; string newPengarang = newPengarangTextBox.Text; string newKeterangan = newKeteranganTextBox.Text; SqlConnection conn;


SqlCommand comm; 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.


Latihan dan Tugas

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


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


7 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 “Tabular

report” ataupun untuk menambah kolom

daristruktur tabel ke dalam report.


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 sebuah subreport anda juga

diharuskan mendefinisikan pula parameter-

parameter untuk memfilter data di 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.


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


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

MODUL PRAKTIKUM - · PDF filePemrograman Web Menggunakan ASP.NET LABKOM STIKOM Poltek Cirebon...

Documents

Transcript of MODUL PRAKTIKUM - · PDF filePemrograman Web Menggunakan ASP.NET LABKOM STIKOM Poltek Cirebon...