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

MODUL PRAKTIKUM Ref 2015

Pemrograman Web

Menggunakan ASP.NET LABKOM STIKOM Poltek Cirebon

oleh iid anwar hidayat

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

Pemrograman Web Menggunakan ASP.NET

1

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

2

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

Pemrograman Web Menggunakan ASP.NET

3

PENDAHULUAN

1

ASP.NET adalah salah satu teknologi pengembangan web yang paling menarik yang ditawarkan saat ini. ASP.NET adalah platform handal yang dilengkapi dengan banyak sekali fungsi built-in, tingkat kinerja yang mengagumkan, dan merupakan salah satu IDE (Integrated Development Environment) terbaik yang ditelah terintegrasi dalam paket Visual Studio.

Apa itu ASP.NET ASP.NET merupakan teknologi server-side untuk mengembangkan aplikasi web berbasis Microsoft .NET Framework. Pada saat browser meminta (request) halaman web yang dibuat dengan teknologi Client-side seperti HTML, javascript dan Cascading Style Sheet (CSS), web server hanya mengirimkan balik file-file tersebut pada browser tanpa melakukan proses apapun. Kemudian browserlah yang bertanggung jawab sepenuhnya untuk membaca dan menterjemahkan script atau markup pada file-file tersebut. Sedangkan teknologi Server-side seperti ASP.NET berbeda, script atau kode tidak diterjemahkan disisi client tapi diinterpretasikan oleh server web. Sehingga kode pada halaman dibaca oleh server dan digunakan untuk menghasilkan HTML, JavaScript dan CSS yang kemudian dikirim ke browser. Sebelum belajar ASP.NET, pastikan Anda telah menginstal komponen-komponen software yang dibutuhkan dan telah berjalan dengan baik pada komputer Anda.

Webserver IIS (Internet Information Service) IIS adalah web server bawaan Microsoft Windows yang dapat digunakan untuk menjalankan aplikasi web ASP.NET. Anda dapat menginstal IIS melalui CD master Windows seperti Windows 2000 Professional, Server dan Advances Server, Windows XP Professional, Windows Vista, Windows 7 dan semua versi Windows Server. Untuk menginstal IIS ikuti langkah dibawah ini: 1. Masukkan CD master Windows 2. Buka Control Panel dan pilih Add or Remove Programs 3. Pilih Add/Remove Windows Components. Daftar komponen window akan ditampilkan 4. Pada daftar komponen berikan tanda ceklis pada Internet Information Service (IIS) 5. Klik Next untuk menginstal IIS

Pemrograman Web Menggunakan ASP.NET

4

.NET Framework Untuk memulai membuat aplikasi ASP.NET Anda perlu menginstal .NET Framework dan Software Development Kit (SDK). NET Framework berisi file-file yang diperlukan untuk menjalankan dan melihat halaman ASP.NET, sedangkan SDK berisi file-file contoh, dokumentasi dan berbagai peralatan pendukung. .NET Framework dan SDK dapat didownload melalui situs www.asp.net. Selain itu untuk lebih mudahnya Anda dapat menginstal Microsoft Visual Studio .NET atau Microsoft Visual Web Developers 2010 Express include SQL Server Express.

Konfigurasi IIS Untuk membuka konfigurasi IIS dapat dilakukan melalui jendela Control Panel, System and Security, Administrative Tools kemudian klik dua kali pada shortcut Internet Information Service (IIS) Manager. Klik dua kali pada Menu Bindings untuk mengubah port default HTTP, kemudian pada jendela Site Bindings pilih http dan klik tombol edit kemudian ketik port yang diinginkan. Misalnya 81 sehingga untuk mengakses HTTP melalui Web Server IIS dari browser adalah http://localhost:81

Uji Coba melalui localhost Klik menu Basic Settings untuk melihat root direktori dan untuk mengatur user akses klik pada tombol Connect as..

Isilah user dan password administrator komputer kemudian klik OK. Untuk menguji pengaturan yang baru klik pada tombol Test Settings..

Pemrograman Web Menggunakan ASP.NET

5

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 <script runat="server" language="C#"> void Page_Load(Object s, EventArgs e){ timeLabel.Text = DateTime.Now.ToString(); }

Selamat Datang di ASP.NET

Waktu sekarang adalah:

Untuk melihat hasilnya bukalah browser dan ketikkan pada address bar http://localhost/testing.aspx

Pemrograman Web Menggunakan ASP.NET

6

Pemrograman Web Menggunakan ASP.NET

7

Menggunakan Microsoft Visual Studio 2010 Membuat file aspx bisa dilakukan melalui notepad dengan mengetikkan semua script baik html maupun bahasa pemrogramannya, akan tetapi kita bisa memanfaatkan Tools yang dikeluarkan oleh Microsoft khusus untuk men-develop aplikasi berbasis .NET Framework yaitu Microsoft Visual Studio.

Setelah terinstal dengan baik, jalankan Ms Visual Studio melalui Start > Program Files, kemudian buat website baru untuk menampung file-file latihan yang akan kita buat selama praktikum. Pilih menu File > New > Website

Kemudian pilih Visual C# pada Installed Templates, pilih ASP.NET Web Site dan tentukan lokasi file-file website akan disimpan

Pemrograman Web Menggunakan ASP.NET

8

Klik OK untuk membuat website baru, kemudian akan tampil pada Editor Visual Studio file Default.aspx yang merupakan file default website. Untuk menambahkan file baru pilih icon Add New Item pada toolbars

Dan pilih Visual C# pada Installed Templates, pilih HTML Page dan ketik nama file yang akan kita buat dengan ekstensi .aspx

Pemrograman Web Menggunakan ASP.NET

9

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

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

Pemrograman Web Menggunakan ASP.NET

10

DASAR PEMROGRAMAN C#

2

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 <script runat="server" language="C#"> public void button_Click(Object s, EventArgs e) { messageLabel.Text = "Hello World"; }

Ada banyak event yang dapat digunakan meskipun beberapa event hanya ditemukan pada kontrol tertentu, berikut ini adalah event yang dapat Anda gunakan. OnClick Subrutin ini akan dijalankan saat sebuah tombol di klik. OnCommand Seperti OnClick, subrutin ini akan dijalankan pada saat sebuah tombol diklik. OnLoad Subroutine ini akan dijalankan ketika tombol diload, biasanya ketika halaman pertama kali diload. OnInit Ketika tombol diinisialisasi, setiap subrutin yang diberikan dalam atribut ini akan jalankan. OnPreRender Kita dapat menggunakan atribut ini untuk menjalankan script sebelum tombol ditampilkan. OnUnload Subrutin ini akan dijalankan ketika kontrol dihapus dari memori/buffer, dengan kata lain ketika pengguna berpindah kehalaman lain atau saat menutup browser. OnDisposed Subroutine yang ditentukan oleh atribut ini dijalankan ketika tombol dilepaskan dari memori. Pemrograman Web Menggunakan ASP.NET

11

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

Latihan : Buatlah halaman seperti dibawah ini dengan fungsi tombol masing-masing adalah: Nama untuk menampilkan nama Alamat untuk menampilkan alamat Clear untuk membersihkan layar

Page Event Selain event diatas yang dapat dibangkitkan melalui kontrol, ada event jenis lain yaitu page event dimana semua event dihasilkan oleh sebuah halaman. Berikut ini event pada halaman yang sering digunakan. Page_Init Dijalankan ketika halaman diinisialisasi Page_Load Dijalankan pada saat pertama kali browser memproses permintaan (request) halaman, dan semua kontrol didalamnya diperbarui. Page_PreRender Dijalankan pada saat pertama kali sebuah halaman dipanggil, tetapi sebelum browser menerima respon apapun dari server Page_UnLoad Dijalankan ketika halaman tidak lagi dibutuhkan oleh server dan tidak ada aktifitas apapun. Urutan diatas sesuai dengan peristiwa mereka dieksekusi. Dengan kata lain, event Page_Init merupakan event pertama yang dipanggil oleh halaman, diikuti oleh Page_Load, Page_PreRender, dan akhirnya Page_UnLoad. Pemrograman Web Menggunakan ASP.NET

12

Contoh dibawah ini menggambarkan cara kerja page event, Anda tidak perlu menentukan urutan subroutine yang akan dijalankan karena secara default subroutine akan dijalankan sesuai dengan nama-nama event tersebut. File : pageEvent.aspx <script runat="server" language="C#"> void Page_Init(Object s, EventArgs e) { messageLabel.Text = "1. Page_Init
"; } void Page_Load(Object s, EventArgs e) { messageLabel.Text += "2. Page_Load
"; } void Page_PreRender(Object s, EventArgs e) { messageLabel.Text += "3. Page_PreRender
"; } void Page_UnLoad(Object s, EventArgs e) { messageLabel.Text += "4. Page_UnLoad
"; }

Variabel Variabel merupakan hal yang mendasar dalam pemrograman dan Anda harus mengetahui aturannya dengan baik. Anda harus memberikan nama suatu variabel atau mengidentifikasikannya untuk item data tertentu, selanjutnya variabel dapat digunakan untuk menyimpan suatu nilai, memproses/memodifikasi nilainya atau mengkosongkannya kembali.

Pemrograman Web Menggunakan ASP.NET

13

Ada banyak macam tipe data, seperti string, integer, dan floating. Sebelum menggunakan variabel Anda harus menentukan tipe data apa yang akan ditampung sebuah variabel, apakah string, integer ataukah desimal. Perhatikan contoh dibawah ini: String nama; Int umur;

Baris diatas mendeklarasikan tipa data string untuk variabel nama dan integer untuk variabel umur. Kadang-kadang kita ingin memberikan nilai awal untuk sebuah variabel yang kita deklarasikan, perhatikan contoh dibawah ini: String jenisMobil = “BMW”;

Atau kita dapat mendeklarasikan lebih dari satu variabel dalam satu grup dan sekaligus memberikan nilai awal seperti contoh dibawah ini. string carType, carColor = "blue";

Tabel 2.1: Daftar Tipe data yang bisa digunakan Tipe Data Keterangan Int Bilangan bulat antara -2.147.483.648 s/d 2.147.483.647 Decimal Angka dengan bilangan desimal hingga 28 digit String Semua nilai dengan jenis huruf/teks Char Karakter tunggal Bool True atau false Object Tipe umum untuk sebuah objek Dalam penggunaannya ketika Anda mendeklarasikan suatu tipe data pada variabel maka hanya tipe data tersebut yang dapat ditampung oleh variabel itu, jadi Anda tidak dapat memberikan nilai integer pada variabel dengan tipe data string. Untuk itu perlu dilakukan konversi suatu data kedalam tipe data lain. Perhatikan kasus dibawah ini; int intX; string strY = "35"; intX = strY + 6;

skrip diatas akan menampilkan pesan kesalahan, untuk memperbaikinya perhatikan solusi dibawah ini. <script runat="server" language="C#"> void Page_Load(){ int intX; string strY = "35"; intX = Convert.ToInt32(strY) + 6; txtLabel.Text = Convert.ToString(intX); }

Pemrograman Web Menggunakan ASP.NET

14

Array Array merupakan jenis variabel yang spesial karena dapat menyimpan beberapa nilai dengan tipe data yang sama dimana setiap nilai item dalam array dapat dipanggil menggunakan nama variabel array tersebut dengan menentukan posisi itemnya. Ketiklah perintah dibawah ini dan simpan dengan nama array.aspx File: array.aspx <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]; }

Perhatikan penggunaan variabel array diatas, deklarasinya menggunakan kurung siku dengan diikuti tipe datanya kemudian menentukan jumlah item yang akan dimiliki oleh variabel array tersebut (pada contoh diatas adalah 4) dengan menggunakan kata kunci ‘new’. Pada variabel array, item pertama selalu pada posisi 0, item kedua pada posisi 1 dan seterusnya. Untuk itu kita dapat menentukan nilai setiap itemnya seperti berikut: drinkList[0] = "Es Jeruk"; Pemrograman Web Menggunakan ASP.NET

15

drinkList[1] = "Jus Strawberry"; drinkList[2] = "Teh Manis"; drinkList[3] = "Kopi";

Function Function merupakan satu baris perintah atau lebih yang dibungkus (encapsulate) dengan nama yang telah didefinisikan. Selain itu function dapat mengembalikan nilai. Skrip dibawah merupakan contoh sederhana sebuah function. File : function.aspx <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(); }

Jika skrip diatas dijalankan melalui browser, maka saat event Page_Load dijalankan fungsi dengan nama getName akan dipanggil. Perhatikan hasil yang ditampilkan pada browser.

Perintah ‘return’ pada fungsi getName akan mengembalikan nilai dimana fungsi itu dipanggil. Namun perlu diperhatikan saat mendeklarasikan function, kita harus memastikan tipe data apa yang akan dihasilkan function tersebut. Perhatikan contoh kasus dibawah ini: File: function2.aspx Pemrograman Web Menggunakan ASP.NET

16

<script runat="server" language="C#"> int addUp(int x, int y){ return x + y; } void Page_Load() { messageLabel.Text = addUp(8,4); }

Jika dijalankan skrip diatas akan menampilkan pesan kesalahan karena nilai yang dikembalikan function addUp ber-tipe data integer sedangkan objek messageLabel.Text ber-tipe data string, maka untuk memperbaikinya tambahkan perintah konversi pada saat memanggil function addUp() messageLabel.Text = addUp(8,4).ToString();

atau messageLabel.Text = Convert.ToString(addUp(8,4));

sehingga hasilnya pada browser adalah sebagai berikut:

Operator Tabel 2.2: Daftar Operator dalam ASP.NET Operator

Keterangan

>

Lebih besar

>=

Lebih besar sama dengan

<

Lebih kecil

<=

Lebih kecil sama dengan

!=

Tidak sama dengan

Pemrograman Web Menggunakan ASP.NET

17

==

Sama dengan

=

Menentukan nilai suatu variabel

||

Atau

&&

Dan

+

Menggabungkan string

New

Membuat objek atau array

*

Kali

/

Bagi

+

Tambah

-

kurang

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

Pemrograman Web Menggunakan ASP.NET

18

Contoh diatas menggunakan operator sama dengan, tidak sama dengan dan operator logical “and” dalam perintah If untuk menampilkan pesan konfirmasi pembayaran. Operator sama dengan ‘==’ digunakan untuk membandingkan dua nilai apakah sama atau tidak, sedangkan tanda ‘=’ digunakan untuk menentukan atau memberikan nilai kepada suatu variabel.

Latihan : Buatlah fungsi untuk menghitung umur seseorang. Gunakan script dibawah ini untuk mendapatkan tahun sekarang. DateTime skr = DateTime.Now; string tahunSkr = skr.ToString("yyyy"); return Convert.ToInt32(tahunSkr)

Conditional Logic Dalam sebuah aplikasi akan ada suatu aksi/perintah yang akan dijalankan hanya jika suatu kondisi sesuai dengan yang telah ditentukan, misalnya jika pengguna memilih sebuah checkbox atau memilih salah satu item dari DropDownList atau bisa juga mengetikkan suatu kata pada TextBox. Kita cek pilihan tersebut menggunakan kondisi, secara sederhana kita dapat menggunakan perintah if dimana perintah ini sering dipasangkan dengan kondisi else yang akan dijalankan jika kondisinya tidak sesuai. Perhatikan contoh dibawah ini: File: logical.aspx <script runat="server" language="C#"> void Click(Object s, EventArgs e) { if(userName.Text == "pageEvent"){ Response.Redirect("pageEvent.aspx"); }else{ Pemrograman Web Menggunakan ASP.NET

19

messageLabel.Text = userName.Text; } }

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

Jurusan Anda adalah :

Pemrograman Web Menggunakan ASP.NET

20

Latihan : Buatlah halaman login seperti dibawah ini dan buat script untuk memeriksanya dengan ketentuan sebagai berikut: Jika username: admin dan password: 1234 maka akan masuk ke halaman admin Jika username: user dan password: 1234 maka akan masuk ke halaman user Jika login tidak memenuhi kedua syarat diatas maka akan muncul pesan kesalahan dibawahnya.

Loops Loops yang dimaksud adalah baris perintah yang dijalankan secara berulang-ulang selama kondisi pengulangannya bernilai benar. Ada dua macam pengulangan yaitu :

1.

While

2.

For

While

loops, atau Do loops

loops, termasuk perintah For Next dan For Each

loop merupakan jenis pengulangan yang paling sederhana dimana baris perintah akan

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

21

File: whileloop.aspx <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++; } }

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
22

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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 :
"; foreach(string item in drinkList){ messageLabel.Text += i + ". " + item + "
"; i++; } }

Anda dapat keluar dari pengulangan dengan menggunakan perintah break seperti contoh dibawah ini: File: break.aspx <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; } } }

Pemrograman Web Menggunakan ASP.NET

23

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

Pemrograman Web Menggunakan ASP.NET

24

Membangun Aplikasi Web ASP.NET

3

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

dan terdapat elementelement ASP.NET sesuai dengan kebutuhan. Dalam satu halaman web tidak boleh ada lebih dari satu Web Form. Untuk menggunakan dan memanipulasi web form, kita dapat menggunakan class bawaan Net Framework yaitu System.Web.UI.page. Kita dapat menggunakan beberapa tipe element dalam form termasuk tag HTML standar, tetapi ada pertimbangan lain agar suatu element dapat diidentifikasi dan dimanipulasi baik nilai maupun atributnya pada saat pertama kali halaman web dijalankan (load) atau pada saat sebuah web form disubmit. Element-element ini dalam ASP.NET disebut control, yang terdiri dari: 

HTML Server Controls



Web server controls



Web user controls



Master pages

Ada perbedaan yang signifikan antar jenis control tersebut, namun apa yang membuat mereka mirip adalah semua control dapat mudah diintegrasikan dan digunakan berulangkali pada aplikasi yang kita buat.

HTML Server Controls HTML Server Control sangat mirip dengan HTML pada umumnya hanya ada penambahan atribut runat=”server”. Hal ini dilakukan agar tag HTML yang kita gunakan dapat dikontrol secara dinamis melalui bahasa pemrograman seperti VB atau C#. Lihat pada table daftar Server Controls. Table 3.1: HTML Server Controls Class

Associated Tag

HtmlAnchor



HtmlButton



HtmlForm



HtmlImage



Pemrograman Web Menggunakan ASP.NET

25

HtmlInputButton



HtmlInputCheckBox



HtmlInputFile



HtmlInputHidden



HtmlInputImage



HtmlInputRadioButton



HtmlInputText



HtmlSelect

<select runat="server">

HtmlTable



HtmlTableRow



HtmlTableCell

HtmlTextArea <br /> <br /> HtmlGenericControl<br /> <br /> <span runat="server"> <div runat="server"> Semua tag HTML lainnya<br /> <br /> Semua class HTML Server Control terdapat pada namespace System.Web.UI.HtmlControls.<br /> <br /> Menggunakan HTML Server Control Kita akan membuat halaman web yang berisi HtmlForm, HtmlButton, HtmlInputText dan HtmlSelect. Ketiklah script dibawah ini dan simpan dengan nama buku.aspx File: buku.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Using ASP.NET HTML Server Controls</title> </head> <body> <form runat="server"> <h2>Data Buku</h2> <p> ID Buku: <input type="text" id="id_buku" runat="server" /> </p> <p> Judul: <input type="text" id="judul" runat="server" /> </p> <p> Jenis Buku<br /> <select id="jenis" runat="server" multiple="false"> <option>Komputer</option> <option>Agama Islam</option> <option>Novel</option> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 26<br /> <br /> <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" / rel="nofollow"> </p> </form> </body> </html><br /> <br /> Jika file buku.aspx dipanggil melalui browser maka hasilnya akan tampak seperti gambar dibawah ini;<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 27<br /> <br /> 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><br /> <br /> 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><br /> <br /> Ketika tombol Confirm diklik maka akan tampil informasi yang diinputkan pada form.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 28<br /> <br /> Web Server Control Web Server Control dapat dikatakan sebagai HTML Server Control versi mahir. Web Server Control akan secara otomatis meng-generate tag HTML sehingga Anda tidak perlu lagi menggunakan tagtag HTML secara standar, namun jika Anda telah mengenal dengan baik tag-tag HTML maka tidak akan menemukan kesulitan yang berarti ketika menggunakan Web Server Control. Perhatikan contoh dibawah ini, misal tag HTML untuk input text; <input type="text" name="usernameTextBox" size="30" /><br /> <br /> Dalam Web Server Control perintahnya menjadi; <asp:TextBox id="usernameTextBox" runat="server" Columns="30" rel="nofollow"> </asp:TextBox><br /> <br /> 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" / rel="nofollow"><br /> <br /> Untuk memudahkan pada saat menggunakan web server control ada baiknya memperhatikan halhal berikut: <br /> <br /> Web server control harus ditempatkan didalam tag <form runat=”server” > agar dapat berfungsi dengan baik<br /> <br /> <br /> <br /> Web server control harus memiliki atribut runat=”server”<br /> <br /> <br /> <br /> Selalu menggunakan prefik asp: setiap menambahkan element web server control<br /> <br /> 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;<br /> <br /> 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" / rel="nofollow"><br /> <br /> Untuk menambahkan nilai pada label diatas dapat dilakukan dengan cara: public void Page_Load() { messageLabel.Text = "Hello World"; Pemrograman Web Menggunakan ASP.NET<br /> <br /> 29<br /> <br /> }<br /> <br /> 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" / rel="nofollow"> </p> <p> Password: <asp:TextBox id="passwordTextBox" TextMode="Password" Columns="30" runat="server" / rel="nofollow"> </p> <p> Comments: <asp:TextBox id="commentsTextBox" TextMode="MultiLine" Columns="30" Rows="10" runat="server" / rel="nofollow"> </p><br /> <br /> 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" / rel="nofollow"><br /> <br /> Untuk mengakses nilainya dapat dilakukan dengan cara: messageLabel.Text = txtHidden.Value;<br /> <br /> 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" / rel="nofollow"> <asp:Label id="messageLabel" runat="server" / rel="nofollow"> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 30<br /> <br /> </form> </body> </html><br /> <br /> 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" / rel="nofollow"> <asp:Label id="messageLabel" runat="server" / rel="nofollow"> </form> </body> </html><br /> <br /> LinkButton LinkButton memiliki fungsi yang sama dengan button. Contoh: <asp:LinkButton id="myLinkButon" Text="Click Here" Pemrograman Web Menggunakan ASP.NET<br / rel="nofollow"> <br /> 31<br /> <br /> runat="server" /><br /> <br /> 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" rel="nofollow">STIKOM Poltek Cirebon</asp:HyperLink><br /> <br /> 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” / rel="nofollow"><br /> <br /> 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.<br /> <br /> 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" / rel="nofollow"><br /> <asp:RadioButton id="ti" GroupName="jurusan" Text="Teknik Informatika" runat="server" / rel="nofollow"><br /> <asp:RadioButton id="si" GroupName="jurusan" Text="Sistem Informasi" runat="server" / rel="nofollow"><br /><br /> <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" / rel="nofollow"><br /> <br /> PlaceHolder PlaceHolder dapat kita gunakan untuk menambahkan element pada halaman web kapanpun secara dinamis melalui skrip ASP.NET. contoh: File: placeholder.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script runat="server" language="C#"> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 32<br /> <br /> 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" / rel="nofollow"> </form> </body> </html><br /> <br /> 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" rel="nofollow"> <p>Username: <asp:TextBox id="usernameTextBox" Columns="30" runat="server" / rel="nofollow"></p> <p>Password: <asp:TextBox id="passwordTextBox" TextMode="Password" Columns="30" runat="server" / rel="nofollow"> </p> </asp:Panel> <asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel" runat="server" / rel="nofollow"> </form> </body> </html><br /> <br /> DropDownList DropDownList mirip dengan tag select pada HTML. Element ini membolehkan pengguna untuk memilih melalui list menu. Contoh: <asp:DropDownList id="warnaFav" runat="server" rel="nofollow"> <asp:ListItem Text="Merah" value="merah" / rel="nofollow"> <asp:ListItem Text="Biru" value="biru" / rel="nofollow"> <asp:ListItem Text="Hijau" value="hijau" / rel="nofollow"> </asp:DropDownList><br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 33<br /> <br /> 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" rel="nofollow"> <asp:ListItem Value="pramuka" rel="nofollow">Pramuka</asp:ListItem> <asp:ListItem Value=”paskibra” rel="nofollow">Paskibra</asp:ListItem> <asp:ListItem Value=”taekwondo” rel="nofollow">Tekwondo</asp:ListItem> </asp:CheckBoxList> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" / rel="nofollow"> <asp:Label ID="msgLabel" runat="server" Text="Label" rel="nofollow"></asp:Label><br /> <br /> 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>"; }<br /> <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" rel="nofollow"> <asp:ListItem Text="ASP.NET" Value="aspnet" / rel="nofollow"> <asp:ListItem Text="JSP" Value="jsp" / rel="nofollow"> <asp:ListItem Text="PHP" Value="php" / rel="nofollow"> <asp:ListItem Text="CGI" Value="cgi" / rel="nofollow"> <asp:ListItem Text="ColdFusion" Value="cf" / rel="nofollow"> </asp:ListBox><br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 34<br /> <br /> Contoh Form dengan beberapa Elements<br /> <br /> Buatlah form dengan element sebagai berikut: Element<br /> <br /> ID Element<br /> <br /> TextBox<br /> <br /> txtNama<br /> <br /> RadioButtonList<br /> <br /> txtJkel<br /> <br /> DropDownList<br /> <br /> txtAgama<br /> <br /> CheckBoxList Button Label<br /> <br /> txtMateri Submit msgLabel<br /> <br /> Keterangan Text: Laki-laki, Value: 1; Text: Perempuan, Value: 2 Islam:1, Katolik: 2, Protestan: 3, Hindu: 4, Budha: 5, Kong Hu Cu: 6<br /> <br /> Klik dua kali pada button Submit dan ketik script nya seperti dibawah ini: protected void Submit_Click(object sender, EventArgs e) { msgLabel.Text = "Nama : " + txtNama.Text + "<br />"; if (txtJkel.SelectedItem != null) { msgLabel.Text += "Jenis Kelamin : " + txtJkel.SelectedItem.Value + "<br />"; } else { msgLabel.Text += "Jenis Kelamin : <br />"; } msgLabel.Text += "Agama : " + txtAgama.Text + "<br />"; String materi = ""; foreach (ListItem item in txtMateri.Items) Pemrograman Web Menggunakan ASP.NET<br /> <br /> 35<br /> <br /> { if (item.Selected) materi += item.Text + " ,"; } //<br /> <br /> materi.Substring(0,10); if (materi.Length > 0) { msgLabel.Text += "Materi Kursus : " + materi.Substring(0, materi.Length - 2) + "<br />"; } else { msgLabel.Text += "Materi Kursus : "; } }<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 36<br /> <br /> Latihan: Duplikasikan file buku.aspx menjadi buku2.aspx dan rubah isinya menggunakan Web Server Control.<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 37<br /> <br /> 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.<br /> <br /> <asp:TextBox ID="id_buku" runat="server" Width="120px" BackColor="#FFFFCC" ForeColor="#0066FF" rel="nofollow"></asp:TextBox> <asp:RequiredFieldValidator id="id_bukuReq" runat="server" ControlToValidate="id_buku" ErrorMessage="ID Buku harus diisi" SetFocusOnError="True" / rel="nofollow"> <asp:CompareValidator id="id_bukuNumReq" runat="server" Operator="GreaterThan" Type="Integer" ControlToValidate="id_buku" ValueToCompare="0" ErrorMessage="ID Buku harus angka" / rel="nofollow"><br /> <br /> untuk mengaturnya melalui properties, perhatikan item-item dibawah ini<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 38<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 39<br /> <br /> Desain Database<br /> <br /> 4<br /> <br /> 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.<br /> <br /> 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<br /> <br /> SQL Server Management Studio. Dibawah ini akan dijelaskan cara membuat database melalui Microsoft Visual Web Developer 2010<br /> <br /> Express Edition. Jalankan Microsoft Visual Web Developer 2010 Express Edition.<br /> <br /> Buka tab Database Explorer pada panel sebelah kanan..<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 40<br /> <br /> Kemudian klik kanan pada Data Connection dan pilih Add Connection...<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 41<br /> <br /> Karena akan membuat database baru maka ketikkan nama database yang akan dibuat pada kotak isian Select or enter a database name:<br /> <br /> Klik OK.<br /> <br /> Klik Yes. Maka database dengan nama perpustakaan akan muncul pada Database Explorer Pemrograman Web Menggunakan ASP.NET<br /> <br /> 42<br /> <br /> Membuat Table Setelah database terbentuk barulah kita dapat membuat table-table didalamnya sesuai dengan kebutuhan sistem. Struktur table yang akan dibuat adalah sebagai berikut:<br /> <br /> Nama Field<br /> <br /> Tipe Data<br /> <br /> Atribut<br /> <br /> id_buku<br /> <br /> nvarchar(5)<br /> <br /> Primary key<br /> <br /> jenis<br /> <br /> nvarchar(20)<br /> <br /> judul<br /> <br /> nvarchar(50)<br /> <br /> penerbit<br /> <br /> nvarchar(50)<br /> <br /> tahun_cetak<br /> <br /> Nchar(4)<br /> <br /> pengarang<br /> <br /> nvarchar(50)<br /> <br /> keterangan<br /> <br /> nvarchar(50)<br /> <br /> Untuk membuatnya klik pada segitiga disamping kiri database kemudian klik kanan pada Table dan pilih Add New Table<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 43<br /> <br /> Pada panel utama akan ditampilkan sheet kosong untuk membuat tabel baru, ketikkan sesuai dengan struktur tabel diatas.<br /> <br /> Untuk mengatur id_table sebagai primary key, klik kanan pada field id_table dan pilih Set Primary Key...<br /> <br /> Jika sudah selesai, untuk menyimpannya klik icon save<br /> <br /> pada toolbar, kemudian ketikkan nama<br /> <br /> table dan klik OK.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 44<br /> <br /> 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.<br /> <br /> Untuk menambah dan mengubah data dapat dilakukan dengan langsung mengetik pada kolomkolom table buku tersebut.<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 45<br /> <br /> 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<br /> <br /> Definition.<br /> <br /> 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.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 46<br /> <br /> 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<br /> <br /> Engine Query<br /> <br /> Ketiklah perintah SQL Pada jendela query kemudian klik icon Execute atau tekan tombol F5 pada keyboard<br /> <br /> Perintah SELECT Pemrograman Web Menggunakan ASP.NET<br /> <br /> 47<br /> <br /> 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’<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 48<br /> <br /> ADO.NET (ActiveX Data Objects .NET)<br /> <br /> 5<br /> <br /> 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: <br /> <br /> Bagaimana cara koneksi ke database perpustakaan menggunakan ADO.NET<br /> <br /> <br /> <br /> Bagaimana menjalankan Query SQL dan menerima hasilnya dengan ADO.NET<br /> <br /> <br /> <br /> Bagaimana menampilkan data dari database<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 49<br /> <br /> 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#.<br /> <br /> tambahkan label pada file adonet.aspx <asp:Label ID=”messageLabel” runat=”server” rel="nofollow"></asp:Label> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 50<br /> <br /> File: adonet.aspx<br /> <br /> 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(); }<br /> <br /> 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.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 51<br /> <br /> 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<br /> <br /> 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'<br /> <br /> 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");<br /> <br /> Mengatur Konfigurasi ConnectionString Pada script koneksi diatas digunakan perintah sqlConnection yang diikuti dengan parameterparameter penting seperti nama server, nama database, user ID dan password agar dapat terkoneksi dengan database yang akan kita akses. Agar lebih aman kita dapat menggunakan konfigurasi ConnectionString yang terdapat dalam file Web.config. Pada elemen Configuration terdapat sub element ConnectionStrings yang didalamnya harus kita sertakan tiga paramater penting yaitu Pemrograman Web Menggunakan ASP.NET<br /> <br /> 52<br /> <br /> <br /> <br /> name untuk nama connectionStrings yang akan kita panggil dari script,<br /> <br /> <br /> <br /> connectionString diisi parameter koneksi ke database<br /> <br /> <br /> <br /> providerName yang diisi dengan jenis provider data yang digunakan<br /> <br /> Perhatikan contoh dibawah ini: Web.Config <configuration> ⋮ <connectionStrings> <add name="Perpustakaan" connectionString="Server=localhost\SqlExpress; Database=perpustakaan;Integrated Security=True" providerName="System.Data.SqlClient"/ rel="nofollow"> </connectionStrings> ⋮ </configuration><br /> <br /> 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.<br /> <br /> Repeater Repeater sangat mudah digunakan untuk menampilkan data dari sumbernya, perhatikan contoh dibawah ini: <asp:Repeater id="myRepeater" runat="server" rel="nofollow"> <ItemTemplate> <%# Eval("Name") %> </ItemTemplate> </asp:Repeater><br /> <br /> Repeater memiliki sub tag <ItemTemplate> -biasa disebut sebagai Child tag- yang berada didalam tag utama <asp:Repeater rel="nofollow"> 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 rel="nofollow"> : template ini digunakan bersamaan dengan <ItemTemplate> sebagai baris alternatif, misalnya untuk membedakan warna baris pada table. <SeparatorTemplate> : digunakan untuk memberikan batas antar data source. Template ini tidak akan tampil sebelum item pertama atau item terakhir. Pemrograman Web Menggunakan ASP.NET<br /> <br /> 53<br /> <br /> <FooterTemplate> : template ini digunakan sebagai penutup (footer) yang akan tampil setelah semua data ditampilkan. Jika menggunakan table HTML Anda dapat menyisipkan tag penutup </table> pada template ini. Untuk lebih memahaminya silahkan buat file repeater.aspx dengan skrip seperti dibawah ini. File: repeater.aspx <%@ Page Language="C#" %> <!DOCTYPE html transitional.dtd"><br /> <br /> PUBLIC<br /> <br /> "-//W3C//DTD<br /> <br /> XHTML<br /> <br /> 1.0<br /> <br /> Transitional//EN"<br /> <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-<br /> <br /> <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" rel="nofollow"> <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><br /> <br /> repeater.aspx.cs using System; using System.Collection.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControl; using System.Data.SqlClient; using System.Configuration; public partial class repeater : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) Pemrograman Web Menggunakan ASP.NET<br /> <br /> 54<br /> <br /> { // 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(); } } }<br /> <br /> Menggunakan DataList Perbedaan yang paling mendasar antara Repeater dengan DataList adalah kemampuan dalam memodifikasi data. Jika data hanya ingin ditampilkan misal untuk keperluan pencetakan maka Repeater lebih tepat digunakan, tapi jika data ditampilkan untuk keperluan pengeditan dan penghapusan maka Anda harus menggunakan DataList. Untuk memahaminya pelajari dan pahami contoh dibawah ini. Pemrograman Web Menggunakan ASP.NET<br /> <br /> 55<br /> <br /> File: datalist.aspx <%@ Page Language="C#" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html transitional.dtd"><br /> <br /> PUBLIC<br /> <br /> "-//W3C//DTD<br /> <br /> XHTML<br /> <br /> 1.0<br /> <br /> Transitional//EN"<br /> <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-<br /> <br /> <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" rel="nofollow"> <ItemTemplate> ID Buku : <%# Eval("id_buku") %><br /> Jenis : <%# Eval("jenis") %><br /> Judul : <%# Eval("judul") %><br /> Pengarang : <%# Eval("pengarang") %><br /> Penerbit : <%# Eval("penerbit") %><br /> Tahun Cetak : <%# Eval("tahun_cetak") %><br /> Keterangan : <%# Eval("keterangan") %><br /> </ItemTemplate> <SeparatorTemplate> <hr /> </SeparatorTemplate> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 56<br /> <br /> </asp:DataList> </div> </form> </body> </html><br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 57<br /> <br /> Agar lebih memahami silahkan buat file dengan nama gridview.aspx kemudian ketik script dibawah ini.<br /> <br /> 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" rel="nofollow"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" rel="nofollow"> <h1>Data Buku</h1> <asp:GridView id="grid" runat="server" / rel="nofollow"> </asp:Content><br /> <br /> 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;<br /> <br /> 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(); } }<br /> <br /> Jalankan file gridview.aspx dengan menekan tombol F5 pada keyboard Modifikasi Kolom GridView Pemrograman Web Menggunakan ASP.NET<br /> <br /> 58<br /> <br /> Untuk memodifikasi kolom dapat dilakukan dengan mengubah element GridView seperti dibawah ini <asp:GridView ID="grid" runat="server" AutoGenerateColumns="False" rel="nofollow"> <Columns> <asp:BoundField DataField="id_buku" HeaderText="ID Buku" / rel="nofollow"> <asp:BoundField DataField="jenis" HeaderText="Kategori" / rel="nofollow"> <asp:BoundField DataField="judul" HeaderText="Judul Buku" / rel="nofollow"> <asp:BoundField DataField="penerbit" HeaderText="Penerbit" / rel="nofollow"> <asp:BoundField DataField="tahun_cetak" HeaderText="Tahun" / rel="nofollow"> <asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" / rel="nofollow"> <asp:BoundField DataField="keterangan" HeaderText="Keterangan" / rel="nofollow"> </Columns> </asp:GridView><br /> <br /> Sehingga hasilnya akan tampak seperti dibawah ini<br /> <br /> Mendesain GridView dengan Cascading Style Sheet Untuk mendesain tampilan gridview melalui Cascading Style Sheet, ikuti langkah-langkah dibawah ini. Buka file css yang ada di folder Style kemudian tambahkan script dibawah ini dibaris paling bawah .GridMain { border-right: gainsboro thin solid; border-top: gainsboro thin solid; border-left: gainsboro thin solid; border-bottom: gainsboro thin solid; background-color: #333333; width: 100%; } .GridRow { background-color: #FFFAFA; } .GridSelectedRow { background-color: #E6E6FA; } .GridHeader { background-color: #ADD8E6; font-weight: bold; text-align: left; } Pemrograman Web Menggunakan ASP.NET<br /> <br /> 59<br /> <br /> Kemudian sesuaikan element gridView menjadi seperti dibawah ini <asp:GridView ID="grid" runat="server" CssClass="GridMain" CellPadding="4" GridLines="None" AutoGenerateColumns="False" rel="nofollow"> <RowStyle CssClass="GridRow" /> <SelectedRowStyle CssClass="GridSelectedRow" /> <HeaderStyle CssClass="GridHeader" /> <Columns> <asp:BoundField DataField="id_buku" HeaderText="ID Buku" / rel="nofollow"> <asp:BoundField DataField="jenis" HeaderText="Kategori" / rel="nofollow"> <asp:BoundField DataField="judul" HeaderText="Judul Buku" / rel="nofollow"> <asp:BoundField DataField="penerbit" HeaderText="Penerbit" / rel="nofollow"> <asp:BoundField DataField="tahun_cetak" HeaderText="Tahun" / rel="nofollow"> <asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" / rel="nofollow"> <asp:BoundField DataField="keterangan" HeaderText="Keterangan" / rel="nofollow"> </Columns> </asp:GridView><br /> <br /> Jika berhasil maka tampilan gridView akan berubah seperti dibawah ini<br /> <br /> 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" / rel="nofollow"> <asp:ButtonField CommandName="Select" Text="Pilih" / rel="nofollow"> </Columns> </asp:GridView> <br /> <asp:Label ID="messageLabel" runat="server" rel="nofollow"></asp:Label> </asp:Content><br /> <br /> Selanjutnya buka mode Desain dan klik dua kali pada event SelectedIndexChanged melalui properties gridView.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 60<br /> <br /> 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; }<br /> <br /> 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.<br /> <br /> 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.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 61<br /> <br /> 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" / rel="nofollow"> </asp:Content><br /> <br /> 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(); …<br /> <br /> Kemudian buka file detailsview.aspx.cs dan tambahkan namespace System.Data … using System.Configuration; using System.Data.SqlClient; using System.Data;<br /> <br /> selanjutnya ganti script dalam fungsi grid_SelectedIndexChanged dan tambahkan satu fungsi dengan nama BindDetails sehingga isinya menjadi seperti dibawah ini. protected void grid_SelectedIndexChanged(object sender, EventArgs e) { BindDetails(); } private void BindDetails() { int selectedRowIndex = grid.SelectedIndex; string idBuku = (string) grid.DataKeys[selectedRowIndex].Value; SqlConnection conn; SqlCommand comm; SqlDataReader reader; string connectionString = ConfigurationManager.ConnectionStrings["perpustakaan"].ConnectionString; conn = new SqlConnection(connectionString); comm = new SqlCommand("SELECT * FROM buku WHERE id_buku=@id_buku", conn); comm.Parameters.Add("id_buku", SqlDbType.NVarChar, 10); comm.Parameters["id_buku"].Value = idBuku; try { conn.Open(); reader = comm.ExecuteReader(); detailBuku.DataSource = reader; detailBuku.DataKeyNames = new string[] { "id_buku" }; detailBuku.DataBind(); reader.Close(); Pemrograman Web Menggunakan ASP.NET<br /> <br /> 62<br /> <br /> } finally { conn.Close(); } }<br /> <br /> 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" rel="nofollow"> <RowStyle CssClass="GridRow" /> <HeaderStyle CssClass="GridHeader" /> <Fields> <asp:BoundField DataField="id_buku" HeaderText="ID Buku" / rel="nofollow"> <asp:BoundField DataField="jenis" HeaderText="Kategori" / rel="nofollow"> <asp:BoundField DataField="judul" HeaderText="Judul Buku" / rel="nofollow"> <asp:BoundField DataField="penerbit" HeaderText="Penerbit" / rel="nofollow"> <asp:BoundField DataField="tahun_cetak" HeaderText="Tahun Cetak" / rel="nofollow"> <asp:BoundField DataField="pengarang" HeaderText="Penulis/Pengarang" / rel="nofollow"> <asp:BoundField DataField="keterangan" HeaderText="Keterangan" / rel="nofollow"> </Fields> <HeaderTemplate> <%#Eval("judul")%> </HeaderTemplate> </asp:DetailsView><br /> <br /> 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" / rel="nofollow"> <asp:CommandField ShowEditButton="True" / rel="nofollow"> </Fields> …<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 63<br /> <br /> 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(); }<br /> <br /> DetailsView memiliki tiga mode tampilan yaitu 1. DetailsViewMode.ReadOnly untuk menampilkan data secara readonly 2. DetailsViewMode.Edit untuk mengubah data 3. DetailsViewMode.Insert untuk menginput data baru ketika event ModeChanging dipanggil maka detailsView akan mengirimkan parameter dengan nama e yang berisi DetailsViewMode.Edit jika tombol Edit yang kita pilih. Agar nilai untuk masing-masing DetailsViewMode dapat kita manipulasi melalui script maka objekobjek dalam detailsView harus di konversi kedalam TemplateFields, selain itu dapat mempermudah untuk mengakses nama dari masing-masing objek tersebut. Pilih mode Desain dan klik kanan pada DetailsView kemudian pilih Show Smart Tag<br /> <br /> Kemudian klik Edit Field<br /> <br /> Kemudian akan muncul dialog Fields, konversi field-field yang ada dengan cara pilih field dan klik pada Convert this field into a TemplateField.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 64<br /> <br /> Klik OK untuk menutup dialog Fields. Jika kita lihat hasilnya melalui mode Source maka akan terdapat tiga template untuk masingmasing field yaitu EditItemTemplate, InsertItemTemplate dan ItemTemplate. Untuk mempermudah mengingat ID untuk masing-masing field ubahlah semua ID sesuai dengan template dan nama fieldnya, sehingga script detailsView akan tampak seperti dibawah ini. <asp:DetailsView id="detailBuku" runat="server" AutoGenerateRows="False" CssClass="GridMain" CellPadding="4" GridLines="None" FieldHeaderStyle-Width="200px" onmodechanging="detailBuku_ModeChanging" onitemupdating="detailBuku_ItemUpdating" rel="nofollow"> <RowStyle CssClass="GridRow" /> <HeaderStyle CssClass="GridHeader" /> <FieldHeaderStyle Width="200px"></FieldHeaderStyle> <Fields> <asp:TemplateField HeaderText="ID Buku" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editId_buku" runat="server" Text='<%# Bind("id_buku") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertId_buku" runat="server" Text='<%# Bind("id_buku") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="Id_buku" runat="server" Text='<%# Bind("id_buku") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Kategori" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editJenis" runat="server" Text='<%# Bind("jenis") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertJenis" runat="server" Text='<%# Bind("jenis") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="jenis" runat="server" Text='<%# Bind("jenis") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Judul Buku" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editJudul" runat="server" Text='<%# Bind("judul") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 65<br /> <br /> <InsertItemTemplate> <asp:TextBox ID="insertJudul" runat="server" Text='<%# Bind("judul") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="judul" runat="server" Text='<%# Bind("judul") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Penerbit" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editPenerbit" runat="server" Text='<%# Bind("penerbit") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertPenerbit" runat="server" Text='<%# Bind("penerbit") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="penerbit" runat="server" Text='<%# Bind("penerbit") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Tahun Cetak" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertTahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="tahun_cetak" runat="server" Text='<%# Bind("tahun_cetak") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Penulis/Pengarang" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editPengarang" runat="server" Text='<%# Bind("pengarang") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertPengarang" runat="server" Text='<%# Bind("pengarang") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="pengarang" runat="server" Text='<%# Bind("pengarang") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Keterangan" rel="nofollow"> <EditItemTemplate> <asp:TextBox ID="editKeterangan" runat="server" Text='<%# Bind("keterangan") % rel="nofollow">'></asp:TextBox> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="insertKeterangan" runat="server" Text='<%# Bind("keterangan") % rel="nofollow">'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="keterangan" runat="server" Text='<%# Bind("keterangan") % rel="nofollow">'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:CommandField ShowEditButton="True" / rel="nofollow"> </Fields> <HeaderTemplate> <%#Eval("judul")%> </HeaderTemplate> </asp:DetailsView><br /> <br /> Kemudian buka kembali mode Desain dan pilih event ItemUpdating dari panel properties DetailsView seperti cara diatas. Ketik script dibawah ini untuk menyimpan hasil perubahan pada detailsView. protected void detailBuku_ItemUpdating(object sender, DetailsViewUpdateEventArgs e) { string idBuku = (string)detailBuku.DataKey.Value; TextBox newJenisTextBox = (TextBox)detailBuku.FindControl("editJenis"); Pemrograman Web Menggunakan ASP.NET<br /> <br /> 66<br /> <br /> 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(); }<br /> <br /> Jalankan file detailsview.aspx dan silahkan coba untuk mengubah beberapa data.<br /> <br /> 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" / rel="nofollow"> <asp:CommandField ShowDeleteButton="true" ButtonType="Link" / rel="nofollow"> </Columns> …<br /> <br /> Kemudian melalui properties gridView klik dua kali event RowDataBound dan ketik script dibawah ini Pemrograman Web Menggunakan ASP.NET<br /> <br /> 67<br /> <br /> 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; };"; } } } }<br /> <br /> 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(); }<br /> <br /> Hasilnya akan tampak seperti dibawah ini<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 68<br /> <br /> 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…<br /> <br /> Kemudian pilih CommandField pada kotak Selected fields dan atur ShowInsertButton-nya menjadi<br /> <br /> True<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 69<br /> <br /> Klik OK untuk menyimpan perubahan dan menutup dialog Fields, selanjutnya klik dua kali event<br /> <br /> ItemInserting dari panel propertiesnya DetailsView dan ketik script dibawah ini.<br /> <br /> protected void detailBuku_ItemInserting(object sender, DetailsViewInsertEventArgs e) { TextBox newId_bukuTextBox = (TextBox)detailBuku.FindControl("insertId_buku"); TextBox newJenisTextBox = (TextBox)detailBuku.FindControl("insertJenis"); TextBox newJudulTextBox = (TextBox)detailBuku.FindControl("insertJudul"); TextBox newPenerbitTextBox = (TextBox)detailBuku.FindControl("insertPenerbit"); TextBox newTahun_cetakTextBox = (TextBox)detailBuku.FindControl("insertTahun_cetak"); TextBox newPengarangTextBox = (TextBox)detailBuku.FindControl("insertPengarang"); TextBox newKeteranganTextBox = (TextBox)detailBuku.FindControl("insertKeterangan"); string newId_buku = newId_bukuTextBox.Text; string newJenis = newJenisTextBox.Text; string newJudul = newJudulTextBox.Text; string newPenerbit = newPenerbitTextBox.Text; string newTahun_cetak = newTahun_cetakTextBox.Text; string newPengarang = newPengarangTextBox.Text; string newKeterangan = newKeteranganTextBox.Text; SqlConnection conn; Pemrograman Web Menggunakan ASP.NET<br /> <br /> 70<br /> <br /> 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(); }<br /> <br /> 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.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 71<br /> <br /> Latihan dan Tugas Buatlah program untuk input, edit dan hapus table anggota pada database perpustakaan.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 72<br /> <br /> Master Page<br /> <br /> 6<br /> <br /> 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.<br /> <br /> 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<br /> <br /> folder ><br /> <br /> Add<br /> <br /> New<br /> <br /> Item<br /> <br /> –<br /> <br /> pilih<br /> <br /> Master<br /> <br /> Page<br /> <br /> ><br /> <br /> beri<br /> <br /> nama<br /> <br /> 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.<br /> <br /> 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”<br /> <br /> pada bagian<br /> <br /> <%@ Page ... %><br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 73<br /> <br /> Membuat Laporan<br /> <br /> 7<br /> <br /> 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<br /> <br /> ini akan<br /> <br /> berekstension .rdlc (report definition language client-<br /> <br /> 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”.<br /> <br /> Dengan tipe report ini anda dapat membuat report yang bersifat “drilldown”<br /> <br /> 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.<br /> <br /> Item<br /> <br /> Fungsi<br /> <br /> 1.<br /> <br /> Textbox<br /> <br /> Suatu “data region” (area data yang ditampilkan) yang dapat digunakan untuk membuat report”<br /> <br /> ataupun<br /> <br /> untuk<br /> <br /> menambah<br /> <br /> “Tabular kolom<br /> <br /> daristruktur tabel ke dalam report.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 74<br /> <br /> 2.<br /> <br /> Table<br /> <br /> 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<br /> <br /> 3.<br /> <br /> Matrix<br /> <br /> Suatu “data region” (area data yang ditampilkan) yang digunakan untuk menampilkan data berbentuk grafis. Tipe dari grafik yang disediakan pun dapat bervariasi.<br /> <br /> 4.<br /> <br /> Chart<br /> <br /> Digunakan<br /> <br /> untuk<br /> <br /> menampilkan<br /> <br /> gambar<br /> <br /> yang<br /> <br /> bersifat binary dalam sebuah report. Anda dapat menggunakan<br /> <br /> external,<br /> <br /> embedded<br /> <br /> (bawaan)<br /> <br /> ataupun gambar dari database (format .bmp, .jpeg, .gif, .png) 5.<br /> <br /> Image<br /> <br /> Digunakan<br /> <br /> untuk<br /> <br /> mengkoneksikan<br /> <br /> report<br /> <br /> satu<br /> <br /> dengan yang lain. Subreport ini dapat berbentuk full report yang berjalan sendiri<br /> <br /> ataupun report yang<br /> <br /> terhubung dengan sebuah Main report. Ketika anda mendefinisikan diharuskan parameter<br /> <br /> sebuah<br /> <br /> subreport<br /> <br /> mendefinisikan untuk<br /> <br /> memfilter<br /> <br /> anda<br /> <br /> pula data<br /> <br /> juga<br /> <br /> parameterdi<br /> <br /> subreport<br /> <br /> tersebut. 6.<br /> <br /> List<br /> <br /> Suatu “data region” (area data yang ditampilkan) yang digunakan untuk menampilkan baris-baris data dalam bentuk seperti daftar (list).<br /> <br /> 7.<br /> <br /> Rectangle<br /> <br /> Digunakan untuk elemen grafis ataupun sebuah “container” (panel) dari report item lainnya.<br /> <br /> 8.<br /> <br /> Line<br /> <br /> Elemen grafis berbentuk garis yang dapat digunakan dimana saja di suatu halaman report.<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 75<br /> <br /> Report dari Microsoft Report Viewer ini mendukung beberapa fungsionalitas, diantaranya adalah: 1. Ekspresi-ekspresi dalam perhitungan<br /> <br /> seperti penjumlahan ataupun format-format tertentu<br /> <br /> dalam suatu report. 2. Aksi untuk link, bookmark dan peta dokumen dalam html report. 3. Mendukung<br /> <br /> parameter,<br /> <br /> filters,<br /> <br /> sorting (pengurutan),<br /> <br /> grouping (pengkategorian) yang<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 76<br /> <br /> 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<br /> <br /> Pemrograman Web Menggunakan ASP.NET<br /> <br /> 77<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-praktikum-ref-pemrograman-web-menggunakan-aspnet-oleh-" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MODUL PRAKTIKUM. Ref Pemrograman Web. Menggunakan ASP.NET. oleh iid anwar hidayat. LABKOM STIKOM Poltek Cirebon"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"> Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close