Bab V

BAB V
Data Binding ASP .NET
Pengertian Data Binding

Data Binding adalah sebuah fasilitas yang tersedia dalam .NET Framework untuk menghubungkan
kontrol yang ada pada form dengan data source, seperti pada DataSet, DataTable, DataView atau
Dengan adanya koneksi antara kontrol pada form dengan data source maka setiap kali ada
perubahan data pada data source, otomatis tampilan data pada kontrol juga ikut berubah.
Sebaliknya, jika kita menambah, mengubah atau menghapus data langsung dari kontrol yang ada
pada form, otomatis data yang ada pada data source juga ikut berubah.
Aliran data pada Data Binding

Mengerti dengan baik konsep dari aliran data yang terjadi antara kontrol pada form dengan data
source sangat dibutuhkan untuk mengetahui cara kerja Data Binding. Dalam .NET, kontrol yang ada
pada form mempunyai banyak properti yang bisa dihubungkan pada sebuah data source. Setiap
properti yang bersifat data-bound berkoneksi dengan sebuah object
Kontrol Data-Bound
Kontrol yang tersedia pada ToolBox seperti TextBox, ComboBox, ListBox dann DataGridView
dikenal juga dengan sebutan kontrol data-bound. Hal tersebut dikarenakan pada kontrol-kontrol ini,
sudah tersedia properti untuk melakukan data binding pada sebuah data source. Pada kasus ini
akan dilakukan percobaan melakukan data binding data dari tabel database yang telah ada. Untuk
mempermudah percobaan pada praktikum ini, diharapkan anda sudah menyelesaikan percobaan
pada praktikum sebelumnya.
Pada bagian Server

Pada percobaan ini kelas yang akan digunakan adalah MySqlDataAdapter dan DataSet . Kelas
MySqlDataAdapter digunakan untuk menghubungkan untuk menghubungkan antara dataset
dan database. Setelah terkoneksi data akan diambil dan ditampung sementara oleh DataSet yang
kemudiang data akan dapat dilakukan manipulasi dan ditampilkan.
Pada Bagian Client

Pada bagian Client akan menggunakan beberapa tambahan dari ToolBox untuk mengambil data
yang telah dibinding melalui DataSet.
<asp:Repeater ID="Repeater1" runat="server">
</asp:Repeater>
Untuk menampilkan pada halaman HTML menggunakan Repeater yang nantinya digunakan
untuk mengambl dan menampilkan data dari DataSet. Repeater adalah wadah utamanya, untuk
1
menampilkan setiap data kedalam repeater menggunakan <itemtemplate> yang berada didalam
Repeater. Berkut contoh Kodenya.
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "nama") %> 
<%# DataBinder.Eval(Container.DataItem, "alamat") %> 
<%# DataBinder.Eval(Container.DataItem, "jurusan") %> 
</ItemTemplate>
Sehingga dari contoh di atas kode lengkap untuk menampilkan data pada halaman Client(HTML)
adalah sebagai berikut.
<asp:Repeater ID="dataRepeater" runat="server">

<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "nama") %> 
<%# DataBinder.Eval(Container.DataItem, "alamat") %> 
<%# DataBinder.Eval(Container.DataItem, "jurusan") %> 
</ItemTemplate>
</asp:Repeater>
Pada contoh kode diatas yang perlu diperhatikan adalah value pada DataBinder.Eval().
Sesuaikan atribut dari database yang telah anda buat sebelumnya. Pada contoh di atas atribut
dari database yang telah dibuat sebelumnya adalah “nama”,”alamat”,”jurusan”.
Pada percobaan ini berikut langkah-langkah untuk melakukan data binding dari Database ke dalam
Halaman HTML
1. Sebelumnya telah disiapkan database mahasiswa dengan sebuah tabel dari database
mahasiswa yaitu tabel profile dengan properti sebagai berikut
CREATE TABLE IF NOT EXISTS `profile` (

ìd` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
àlamat` varchar(200) NOT NULL,
ùmur` int(11) NOT NULL,
`jurusan` varchar(100) NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
2. Buatlah Repeater pada Halaman HTML, seperti berikut
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
2
<form id="form1" runat="server">
<div>
<asp:Repeater ID="dataRepeater" runat="server">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "nama") %> 
<%# DataBinder.Eval(Container.DataItem, "alamat") %> 
<%# DataBinder.Eval(Container.DataItem, "jurusan") %> 
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
3. Kemudian masuk kedalam Halaman Server Side dari kode anda, kemudian buatlah koneksi
ke database, misalkan seperti berikut.
protected MySqlConnection Connection()

{
string connection = @"Data Source=localhost; Database=mahasiswa; User
ID=root; Password=''";
MySqlConnection conn = new MySqlConnection(connection);
conn.Open();
return conn;
}
4. Membuat fungsi untuk melakukan DataBinding, misalkan seperti berikut
protected void dataBind()

{
String query = "SELECT * FROM profile;";
MySqlConnection conn = Connection();
MySqlDataAdapter adapter = new MySqlDataAdapter(query,conn);
DataSet ds=new DataSet();
adapter.Fill(ds,"profile");
dataRepeater.DataSource=ds.Tables["profile"];
Page.DataBind();
conn.Close();
}
5. Berikut kode lengkap program pada Server Side
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
3
using MySql.Data.MySqlClient;
using System.Data;
public partial class show_dsc : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
dataBind();
}
protected MySqlConnection Connection()
{
string connection = @"Data Source=localhost; Database=mahasiswa; User
ID=root; Password=''";
MySqlConnection conn = new MySqlConnection(connection);
conn.Open();
return conn;
}
protected void dataBind()
{
String query = "SELECT * FROM profile;";
MySqlConnection conn = Connection();
MySqlDataAdapter adapter = new MySqlDataAdapter(query,conn);
DataSet ds=new DataSet();
adapter.Fill(ds,"profile");
dataRepeater.DataSource=ds.Tables["profile"];
Page.DataBind();
conn.Close();
}
}
6. Jika dijalankan akan tampak tampilan seperti berikut
TUGAS WORKSHOP
1. Lakukanlah data Binding dari projek anda sebelumnya dan buatlah tampilan pada halaman
HTML menjadi lebih bagus, bisa menggunakan CSS pada tabel dll.

Bab V

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab V

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB V

Data Binding ASP .NET

Pengertian Data Binding

Aliran data pada Data Binding

Pada bagian Server

Pada Bagian Client

<asp:Repeater ID="Repeater1" runat="server">

<asp:Repeater ID="dataRepeater" runat="server">

CREATE TABLE IF NOT EXISTS `profile` (

2. Buatlah Repeater pada Halaman HTML, seperti berikut

protected MySqlConnection Connection()

4. Membuat fungsi untuk melakukan DataBinding, misalkan seperti berikut

protected void dataBind()

5. Berikut kode lengkap program pada Server Side

public partial class show_dsc : System.Web.UI.Page

6. Jika dijalankan akan tampak tampilan seperti berikut

Anda mungkin juga menyukai