ASP.NET Ajax Client Template merupakan fitur baru dalam ASP.NET Ajax 4 (saat ini masih preview 4). Dengan menggunakan client template kita bisa membuat template layaknya dalam server side ASP.NET. Layout yang kompleks sekalipun dengan mudah dibuat menggunakan template. Dalam tulisan ini saya akan coba jelaskan bagaimana menggunakan client template untuk kasus tabulasi pemilu 2009. Dalam contoh program digunakan beberapa teklonogi antara lain
- jQuery
- ASP.NET Ajax 4 (MicrosoftAjax.js)
- ASP.NET Ajax Template (MicrosoftAjaxTemplate.js)
- JSONP proxy (http://jania.pe.kr/aw/moin.cgi/JsonpProxy). Digunakan untuk cross domain call.
Data source pada tulisan ini tidak menggunakan service yang dibuat oleh Pak Tahir melainkan langsung diambil dari website KPU. Website KPU sebenarnya tidak membuka web service khusus yang dapat dipanggil dari luar. Dengan sedikit ketekunan kita bisa menemukan jalan untuk mengambil datanya secara langsung. Ketika kita bukan halaman muka situs tabulasi pemilu milik KPU, kita lihat bahwa situs tersebut menggunakan flash chart. Jika diintip source HTML-nya, kita bisa dapatkan bahwa chart tersebut mengambil data dari alamat http://tnp.kpu.go.id/tab2009/update/dataindex/nasional.txt. Data tersebut berupa JSON string yang dapat kita pake langsung dengan menggunakan JavaScript. Dengan berbekal informasi tersebut kita bisa manfaatkan Url tersebut sebagai dataasource.
Langkah pertama yang perlu kita persiapkan adalah
- Download ASP.NET Ajax 4 di sini.
- Uraikan file ASP.NET Ajax Preview 4.zip dan ambil file MicrosoftAjax.js dan MicrosoftAjaxTemplate.js ke dalam folder kerja kita.
- Buat halaman HTML dan tambahkan referensi script jQuery (http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js) dan kedua file MicrosoftAjax.js dan MicrosoftAjaxTemplate.js
Simak HTML berikut.
<html>
<head>
<title>Tabulasi KPU dengan Ajax Client Template</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="MicrosoftAjax.js"></script>
<script type="text/javascript" src="MicrosoftAjaxTemplates.js"></script>
</head>
<body xmlns:sys="BLOCKED SCRIPTSys" xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView" sys:activate="*">
<table>
<thead>
<tr><th>No</th><th>Nama Partai</th><th>Suara</th></tr>
<tbody sys:attach="dataview" class="sys-template" dataview:data="{{ d }}">
<tr>
<td>{{ no }}</td>
<td>{{ name }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var d = [];
Sys.Observer.makeObservable(d);
$(document).ready(function() {
$.getJSON('http://jania.pe.kr/u/jsonp.cgi?url=http://tnp.kpu.go.id/tab2009/update/dataindex/nasional.txt&callback=?', function(eArgs) {
var i;
var e = Sys.Serialization.JavaScriptSerializer.deserialize(eArgs.content);
var vals = e.elements[0].values;
for(i=0; i < vals.length; i++) {
var _d = { no: e.x_axis.labels.labels
, value: vals.top.toString(), name: /\d{1,2}\s([a-zA-Z0-9\s\(\)]*)\x3Cbr\x3E/.exec(vals.tip)[1] };
d.add(_d);
}
});
});
</script>
</body>
Untuk membuat Ajax Client Template pada halaman HTML, yang perlu dipersiapkan adalah
Tambahkan namespace pada BODY tag.
<body
xmlns:sys="BLOCKED SCRIPTSys"
xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
sys:activate="*">
Buat template
<table>
<thead>
<tr><th>No</th><th>Nama Partai</th><th>Suara</th></tr>
<tbody sys:attach="dataview" class="sys-template" dataview:data="{{ d }}">
<tr>
<td>{{ no }}</td>
<td>{{ name }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
Pada template kita butuh mendefinisikan attribute sys:attach="dataview" dan class="sys-template" untuk menggunakan object dataview. Sedangkan dataview:data="{{ d }}" digunakan untuk mengambil datasource dari observer data d. ASP.NET Ajax 4 telah mendukung observer pattern yaitu sebuah object array memiliki event trigger. Ketika ada perubahan data pada array akan memberitahukan kalo ada data yang diubah. Dengan pattern ini, apapun perubahan data akan otomatis merubah pada data yang di-render pada template.
Ambil data dari KPU dengan jQuery
Pada jQuery 1.2 dan versi yang lebih baru telah tersedia method yang digunakan untuk request data cross domain menggunakan teknik JSONP. Pada kenyataannya tidak semudah itu melakukan request cross domain. Tidak semua situs mendukung cross domain scripting. Karena situs KPU tidak menyediakan service resmi dan kita pake trik khusus untuk mendapatkan data dari KPU. Cross domain request ke situs KPU tidaklah mungkin. Untuk mengatasi hal ini diperlukan sebuat situs proxy yang menyediakan padding untuk JSONP. Saya gunakan http://jania.pe.kr/aw/moin.cgi/JsonpProxy sebagai jembatan antara KPU dan client scripting.
var d = [];
Sys.Observer.makeObservable(d);
$(document).ready(function() {
$.getJSON('http://jania.pe.kr/u/jsonp.cgi?url=http://tnp.kpu.go.id/tab2009/update/dataindex/nasional.txt&callback=?', function(eArgs) {
var i;
var e = Sys.Serialization.JavaScriptSerializer.deserialize(eArgs.content);
var vals = e.elements[0].values;
for(i=0; i < vals.length; i++) {
var _d = { no: e.x_axis.labels.labels, value: vals.top.toString(), name: /\d{1,2}\s([a-zA-Z0-9\s\(\)]*)\x3Cbr\x3E/.exec(vals.tip)[1] };
d.add(_d);
}
});
});
Pada javascript di atas, baris pertama adalah deklarasi object d yang digunakan sebagai datasource. Baris berikutnya kita register object d sebagai observer object. Untuk melakukan cross domain request, digunakan method $.getJSON pada jQuery. Hasilnya berupa JSON string yang harus di-deserialize terlebih dahulu ke JSON object dengan method ASP.NET Ajax Sys.Serialization.JavaScriptSerializer.deserialize.
Setelah data diambil, data secara otomatis akan tampil dalam bentuk tabel. Demo kode tersebut dapat dilihat di http://tnp.masykur.web.id/client-template.html
Semoga bermanfaat.