Konsep Data Binding

WEB TECHONOLOGY 2

Konsep Data Binding.NET Framework

Benita Clarissa55070212

Institut Bisnis dan Informatika IndonesiaJakarta2010

Konsep Data BindingMei 2010

Pengertian Data BindingData binding adalah proses membangun koneksi antara antarmuka aplikasi (application UI) dan business logic. Data binding membuat kontrol – kontrol dalam form terkoneksi (terkait) dengan sumber – sumber data. Jika pengaturan dalam binding data dilakukan dengan tepat, maka ketika terdapat data yang berubah, elemen – elemen yang terkait dengan data akan berubah secara otomatis. Sebagai contohnya, jika pengguna mengubah nilai yang terdapat pada elemen textbox, nilai tersebut akan mengubah data yang terkait secara otomatis.

Konsep Data BindingGambar di bawah ini mengilustrasikan bahwa data binding merupakan jembatan antara binding target dan binding source.

Model Data Binding

Data binding terdiri dari 4 komponen, yaitu target object, target property, binding source, dan path. Target Object adalah objek target data binding. Target property adalah property dari objek target data binding. Binding source adalah sumber data binding. Path adalah tempat dari nilai binding source yang akan digunakan.

Model Arah Data Binding

Dalam binding data ada beberapa mode yang digunakan untuk menunjukan arah dari binding tersebut.

OneWay : ketika source dari property berubah maka hanya target property yang terupdate TwoWay : ketika target property atau source berubah maka target property atau property

tersebut ikut berubah OneWayToSource : mengubah source property ketika target property berubah OneTime : target property berubah hanya ketika aplikasi dijalankan

1


Binding dapat dilakukan terhadap collections. Binding terhadap collection dapat menggunakan metode OneWay karena secara default property item source mendukung untuk binding secara OneWay. Contoh Binding collection dengan menggunakan listbox, listview, treeview.

Arsitektur Data BindingArsitektur data binding dapat dilihat melalui gambar di bawah ini :

Arsitektur Data Binding

Arsitektur Data binding terdiri dari 4 komponen, antara lain :

1. Data Source Object (DSO)Kegunaan Data Source antara lain adalah sebagai berikut :

Digunakan untuk berkoneksi dengan database Dapat mengambil data dari data source dan menyimpannya dalam control yang

berhubungan Dapat update data source ketika data pada control mengalami perubahan nilai

Data Source yang digunakan dapat berupa database, file XML, atau script. Kontrol Data source yang terdapat pada komponen .NET adalah :

SqlDataSource Data Source ini mewakili data yang terdapat pada SQL RDBMS. Contoh program kontrol SqlDataSource :

2


Access DataSourceData Source ini mewakili data yang terdapat pada Microsoft Access

Linq DataSource LINQ Data Source adalah data source dengan Language INtergrated Query. Dengan fitur ini, query dapat ditulis langsung pada program. Kontrol Data Source tidak terdapat pada .NET Framework 2.0 ke bawah. LINQ Data Source baru terdapat pada .NET Framework 3.5 ke atas. Contoh query pada LINQ : var query = from n in peserta orderby n ascending select n;

Object DataSourceData Source ini mewakili data yang terdapat pada Objek Bisnis

XML DataSourceData Source ini mewakili data yang terdapat pada dokumen XML

SiteMap DataSourceData Source ini mewakili data yang terdapat pada provider SiteMap yang menunjukkan struktur halaman web.

Script yang berisi data source dapat melakukan data binding terhadap kontrol berikut ini : asp:RadioButtonList asp:CheckBoxList asp:DropDownList asp:ListBox

Script yang berisi data source dapat berupa : ArrayList

Array List adalah sekumpulan item yang mengandung nilai tunggal.Contoh program ArrayList :

<script runat="server">Sub Page_Loadif Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize()

3


mycountries.Sort() rb.DataSource=mycountries rb.DataBind()end ifend sub

sub displayMessage(s as Object,e As EventArgs)lbl1.text="Your favorite country is: " & rb.SelectedItem.Textend sub</script>

<html><body><form runat="server"><asp:RadioButtonList id="rb" runat="server"AutoPostBack="True" onSelectedIndexChanged="displayMessage" /><p><asp:label id="lbl1" runat="server" /></p></form></body></html>

Hasil tampilan dari program di atas :

HashTableObjek Hash Table mengandung item yang terdiri dari sepasang key atau nilai. Key digunakan sebagai index dan pencarian nilai dapat dilakukan dengan cepat melalui key. Contoh program Hash Table :

<script runat="server">sub Page_Loadif Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy")

4


rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind()end ifend sub


<html><body>

<form runat="server"><asp:RadioButtonList id="rb" runat="server"AutoPostBack="True" onSelectedIndexChanged="displayMessage" /><p><asp:label id="lbl1" runat="server" /></p></form>

</body></html>

Hasil tampilan dari program di atas :

Sorted ListObjek Sorted List mengkombinasikan fitur yang terdapat pada ArrayList dan HashTable. Objek Sorted List mengandung item yang terdiri dari sepasang key atau nilai. Objek Sorted List melakukan pengurutan data secara otomatis berdasarkan nilai angka atau alfabet. Contoh program Sorted List :<script runat="server">sub Page_Loadif Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway")

5


mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind()end ifend sub


<html><body>

<form runat="server"><asp:RadioButtonList id="rb" runat="server"AutoPostBack="True" onSelectedIndexChanged="displayMessage" /><p><asp:label id="lbl1" runat="server" /></p></form>

</body></html>

Hasil tampilan dari program di atas adalah :

2. Data ConsumersData Consumer adalah elemen dalam halaman HTML yang dapat melakukan rendering data yang telah disediakan oleh DSO. Elemen yang dimaksud dapat berupa :

single – valued consumerselemen ini mengambil sebuah nilai tunggal dari sebuah record yang disediakan oleh data source. Contoh elemen HTML yang merupakan single – valued consumers adalah <input … />

tabular data consumers

6


elemen ini melakukan repetisi terhadap sebuah set (sekumpulan) record secara keseluruhan. Hal ini disebut juga set binding. Contoh elemen HTML yang merupakan tabular data consumers adalah <table> … </table>

3. Data Binding AgentKetika sebuah halaman web di-load, data binding agent mencari DSO dan data consumer dalam halaman web tersebut. Sewaktu data binding agent telah menemukan semua DSO dan data consumer, data binding agent menjaga sinkronisasi data yang mengalir di antara mereka. Sebagai contoh, ketika DSO menerima data baru dari sumbernya, data binding agent mentransmisi data baru tersebut kepada data consumer. Sebaliknya, ketika pengguna melakukan pengubahan data yang terdapat pada databound element, data binding agent akan memberi notifikasi kepada DSO.

4. Table Repetition AgentTable Repetition Agent bekerja pada tabular data consumers untuk melakukan repetisi terhadap data set yang disediakan oleh DSO.

Data Bound ControlKontrol Data Bound dapat dikategorikan menjadi 3 jenis, yaitu :

1. List Control Bulleted List

Check Box List

Drop Down List

7


List Box

Radio Button List

2. Tabular Data Bound Control Grid View

Data ListData List dapat menampilkan lebih dari 1 item data dalam baris tunggal.

RepeaterRepeater dapat menampilkan serangkaian item data menggunakan template. Kontrol repeater tidak di-render secara otomatis sebagai HTML.

8


List ViewKontrol ini mirip seperti Data List yang mempunyai fasilitas Data Pager.

Detail View

Form View

3. Hierarchical Data Bound Control Menu

Menu dalam kontrol ASP.NET dapat ditampilkan secara statis maupun dinamis.

Tree View

9


Tree View dapat menampilkan data hierarkikal dalam bentuk pohon. Kontrol Tree View sangat cocok untuk menampilkan data XML. Selain itu, kontrol Tree View juga dapat menampilkan data dari tabel relasional dalam database. Contoh di bawah ini adalah langkah – langkah yang harus dilakukan untuk menampilkan tree view dari database Northwind adalah :

i. Buat halaman web aspx baru dan sebuah kontrol Tree View. Listing program : <asp:TreeView ID="TreeView1" ExpandDepth="0” PopulateNodesFromClient="true" ShowLines="true” ShowExpandCollapse="true" runat="server" />

ii. Ketikkan kode program di bawah ini pada event Page_Load :Tambahkan namespace Imports System.Data.SqlClient dan System.Data

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim strConn As String = "server=.;database=Northwind;integrated security=true;" Dim objConn As New SqlConnection(strConn) Dim objDS As New DataSet Dim daSuppliers As New SqlDataAdapter("SELECT CompanyName,SupplierID FROM Suppliers", objConn) Dim daProducts As New SqlDataAdapter("SELECT ProductName, ProductID, SupplierID FROM Products", objConn) daSuppliers.Fill(objDS, "dtSuppliers") daProducts.Fill(objDS, "dtProducts") objConn.Close() objDS.Relations.Add("SuppToProd", objDS.Tables("dtSuppliers").Columns("SupplierID"), objDS.Tables("dtProducts").Columns("SupplierID")) Dim nodeSupp, nodeProd As TreeNode Dim rowSupp, rowProd As DataRow For Each rowSupp In objDS.Tables("dtSuppliers").Rows nodeSupp = New TreeNode nodeSupp.Text = rowSupp("CompanyName") ' nodeSupp.ID = rowSupp("SupplierID") TreeView1.Nodes.Add(nodeSupp) For Each rowProd In rowSupp.GetChildRows("SuppToProd") nodeProd = New TreeNode nodeProd.Text = rowProd("ProductName") 'nodeProd.ID = rowProd("ProductID")TreeView1.Nodes.Item(TreeView1.Nodes.IndexOf(nodeSupp)).ChildNodes.Add(nodeProd)

10


' nodeSupp.Nodes.Add(nodeProd) Next Next 'clean up objDS.Dispose() daSuppliers.Dispose() daProducts.Dispose() objConn.Close() objConn.Dispose() End Sub

Contoh hasil tampilan program :

Cara lain adalah dengan membuat sebuah tabel yang dibuat khusus untuk menu tree view. Tabel ini terdiri dari 3 field, yaitu id, parentid, dan title (judul) menu.

Ekspresi Data BindingSintaks data binding dibutuhkan untuk mengikat nilai properti sebuah kontrol objek terhadap data dan menspesifikasikan nilai untuk proses memperoleh, mengubah, menghapus, dan menambah data. Ekspresi data binding diawali <%#, diakhiri %>, dan menggunakan fungsi Eval dan Bind. Fungsi Eval digunakan untuk mendefinisikan one – way binding, atau binding data yang bersifat read – only. Fungsi Bind digunakan untuk melakukan two – way binding atau binding data yang dapat di-update.

Ekspresi Data Binding telah dijalankan ketika method DataBind dari sebuah kontrol atau Page class dipanggil. Pada kontrol – kontrol seperti : GridView, DetailsView, dan FormViews, ekspresi data binding

11


akan dijalankan secara otomatis selama event Pre-Render sehingga method DataBind tidak perlu dipanggil secara eksplisit.

Contoh potongan program yang menunjukkan penggunaan ekspresi Data Binding :

<EditItemTemplate> <table> <tr> <td align=right> <b>Employee ID:</b> </td> <td> <%# Eval("EmployeeID") %> </td> </tr> <tr> <td align=right> <b>First Name:</b> </td> <td> <asp:TextBox ID="EditFirstNameTextBox" RunAt="Server" Text='<%# Bind("FirstName") %>' /> </td> </tr> <tr> <td align=right> <b>Last Name:</b> </td> <td> <asp:TextBox ID="EditLastNameTextBox" RunAt="Server" Text='<%# Bind("LastName") %>' /> </td> </tr> <tr> <td colspan="2"> <asp:LinkButton ID="UpdateButton" RunAt="server" Text="Update" CommandName="Update" /> <asp:LinkButton ID="CancelUpdateButton" RunAt="server" Text="Cancel" CommandName="Cancel" /> </td> </tr> </table></EditItemTemplate>

EvalMethod Eval melakukan binding data pada kontrol GridView, DetailsView, dan FormView. Method Eval mempunyai sebuah parameter yang berisi nama data field dan mengembalikan sebuah string yang berisi nilai dari field pada record yang bekerja saat ini dalam data source. Method Eval ini juga mempunyai parameter kedua yang bersifat opsional untuk menspesifikasikan format dari string yang akan dikembalikan. Contoh instruksi pemanggilan method Eval : <%# Eval("EmployeeID") %>

12


BindMethod Bind mempunyai beberapa persamaan dengan method Eval. Perbedaannya pada method Bind, binding data pada kontrol GridView, DetailsView, dan FormView dapat digunakan untuk melakukan operasi update, delete, dan insert data. Method Bind biasanya digunakan pada textbox yang dirender oleh baris GridView

Memanggil Method DataBind secara EksplisitWalaupun DataBind dapat dipanggil secara otomatis pada kontrol GridView, DetailsView, dan FormView, ada situasi yang membutuhkan pemanggilan DataBind secara eksplisit. Salah satu situasi yang membutuhkan pemanggilan DataBind secara eksplisit adalah pada saat data harus di-refresh atau kembali di-bind (re-bind) dalam kontrol data bound secara manual.

13


KesimpulanData Binding adalah pengikatan data dengan kontrol objek. Data Binding membuat data yang terkait dengan objek kontrol terhubung dan dapat mengalami pembaruan data yang dilakukan pengguna secara otomatis. Hal ini membuat pengembangan aplikasi menjadi lebih cepat karena dapat meminimalkan kode program yang dibutuhkan untuk melakukan manipulasi data antara aplikasi dengan basis data.

Sumber Referensi :http://msdn.microsoft.com/en-us/library/ms752347(v=VS.100).aspx

http://msdn.microsoft.com/en-us/library/ms531384%28v=VS.85%29.aspx



http://msdn.microsoft.com/en-us/library/7a9swst5%28v=VS.80%29.aspx

http://www.w3schools.com/aspnet/aspnet_databinding.asp

http://www.w3schools.com/aspnet/aspnet_arraylist.asp

http://www.w3schools.com/aspnet/aspnet_hashtable.asp

http://www.w3schools.com/aspnet/aspnet_sortedlist.asp

http://www.15seconds.com/issue/030827.htm

http://repository.binus.ac.id/content/T0403/T040314549.pps

http://ilmukomputer.org/wp-content/uploads/2009/04/aspnet-part-13-data-binding.zip

14

http://ilmukomputer.org/wp-content/uploads/2009/04/aspnet-part-13-data-binding.zip

http://repository.binus.ac.id/content/T0403/T040314549.pps

http://www.15seconds.com/issue/030827.htm

http://www.w3schools.com/aspnet/aspnet_sortedlist.asp

http://www.w3schools.com/aspnet/aspnet_hashtable.asp

http://www.w3schools.com/aspnet/aspnet_arraylist.asp

http://www.w3schools.com/aspnet/aspnet_databinding.asp

http://msdn.microsoft.com/en-us/library/7a9swst5(v=VS.80).aspx

http://msdn.microsoft.com/en-us/library/ms178366(v=VS.100).aspx




Documents

Konsep Data Binding