Select Language



Followers

IT Programmer. Powered by Blogger.

16 March 2012

Membuat Searching Data XML dengan Javascript

"Om Swastiastu"

XML dalam beberapa kasus bisa digunakan sebagai media penampung data sementara. Hal ini bisa terjadi jika kita tidak menggunakan database. Nah, diantara kalian mungkin sudah ada yang bisa menampilkan data-data dalam file XML kedalam tabel dalam HTML. Lalu, setelah ditampilkan misalkan kita ingin membuat filter yang lebih spesifik terdadap data yang sudah ditampilkan. Atau membuat search pada file XML tersebut, misalkan kita mengetikkan sebuah keyword dan hanya akan menampilkan data-data dalam XML yang sesuai degan keyword yang diketikkan. Bagaimana caranya?

Disini saya menggunakan file XML dan XSL. XML digunakan untuk menampung data-data dan file XSL digunakan untuk menampilkan data-data. Dalam file XSL ini terdiri dari HTML dan javascript atau kalian bisa menambahkan CSS bila kalian ingin menambahkan style kedalam file XSL ini.

Pertama mari kita buat file XML terlebih dahulu, kalian bisa meniru contoh berikut ini:




<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="karyawan.xsl"?>
<list>
 <karyawan id='K001'>
  <nama>Angga</nama>
  <pekerjaan>Programmer</pekerjaan>
  <propinsi>Bali</propinsi>
 </karyawan>
 <karyawan id='K002'>
  <nama>Anton</nama>
  <pekerjaan>Penulis</pekerjaan>
  <propinsi>Jawa Timur</propinsi>
 </karyawan>
 <karyawan id='K003'>
  <nama>Dimas</nama>
  <pekerjaan>Satpam</pekerjaan>
  <propinsi>Jakarta</propinsi>
 </karyawan>
 <karyawan id='K004'>
  <nama>Ayu</nama>
  <pekerjaan>Marketing</pekerjaan>
  <propinsi>Bali</propinsi>
 </karyawan>
 <karyawan id='K005'>
  <nama>Indah</nama>
  <pekerjaan>Sekretaris</pekerjaan>
  <propinsi>Jawa Timur</propinsi>
 </karyawan>
 <karyawan id='K006'>
  <nama>Raisa</nama>
  <pekerjaan>Penyanyi</pekerjaan>
  <propinsi>Jakarta</propinsi>
 </karyawan>
 <karyawan id='K007'>
  <nama>Made</nama>
  <pekerjaan>Seniman</pekerjaan>
  <propinsi>Bali</propinsi>
 </karyawan>
 <karyawan id='K008'>
  <nama>Surya</nama>
  <pekerjaan>Pengusaha</pekerjaan>
  <propinsi>Jawa Timur</propinsi>
 </karyawan>
 <karyawan id='K009'>
  <nama>Agung</nama>
  <pekerjaan>Programmer</pekerjaan>
  <propinsi>Bali</propinsi>
 </karyawan>
 <karyawan id='K010'>
  <nama>Ariel</nama>
  <pekerjaan>Musisi</pekerjaan>
  <propinsi>Jakarta</propinsi>
 </karyawan>
</list>



Simpan file diatas dengan nama karyawan.xml. Nah dengan file XML kita bisa membuat tag sesuai dengan selera kita. Pada contoh diatas saya membuat beberapa tag baru dalam bahasa indonesia seperti <karyawan>, <nama>, <propinsi> dan beberapa tag lainnya lagi. Selanjutnya kita akan membuat file XSL:




<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" indent="yes" />
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>

<xsl:template match="list">
<html>
<head>
<title>Search Jobs</title>
<script type="text/javascript">
//<![CDATA[

function doSearch() {
var karyawan = document.getElementsByName("karyawan");
var filter;

for(var i = 0; i < karyawan.length; i++){
 if(karyawan[i].checked){
  filter = karyawan[i].value;
  break;
 }
}

var list = document.getElementsByClassName("list");
 for(var j = 0; j < list.length; j++){
  var td = list[j].getElementsByTagName("td");
  for(var k = 0; k < td.length; k++){
   if(td[k].className == "propinsi"){
    if(filter == "Semua" || td[k].firstChild.nodeValue.match(filter)){
     list[j].style.display = "";
    }else{
     list[j].style.display = "none";
    }
   }
  }
 }
}

//]]>
</script>
</head>
<body>
Filter: <br/><br/>
<form action="#" onsubmit="return(false);">
<label><input type="radio" name="karyawan" value="Bali"

onclick="doSearch();"/> Bali</label><br/>
<label><input type="radio" name="karyawan" value="Jakarta"

onclick="doSearch();"/> Jakarta</label><br/>
<label><input type="radio" name="karyawan" value="Jawa Timur"

onclick="doSearch();"/> Jawa Timur</label><br/>
<label><input type="radio" name="karyawan" value="Semua"

onclick="doSearch();" checked="checked"/> Semua</label><br/><br/>
</form>
<table cellpadding="1" cellspacing="1" id="list">
<tr>
<td width="60">Kode</td>
<td width="100">Nama</td>
<td width="100">Pekerjaan</td>
<td width="100">Propinsi</td>
</tr>
<xsl:for-each select ='karyawan'>
<tr class="list">
<td class="kode"><xsl:value-of select ="@id"/></td>
<td class="nama"><xsl:value-of select ="nama"/></td>
<td class="pekerjaan"><xsl:value-of select ="pekerjaan"/></td>
<td class="propinsi"><xsl:value-of select ="propinsi"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


Simpan file diatas dengan nama karyawan.xsl. Cara kerja fungsi search diatas adalah dengan mencocokan nilai yang terdapat dalam tabel propinsi. Dimana data tersebut dibandingkan dengan nilai yang terdapat dalam filter. Jika sama, maka baris data tersebut ditampilkan dari kode sampai propinsim jika tidak, maka di set display menjadi none. Dimana baris tersebut tidak dimunculkan.

Script XML dan XSL diatas sudah saya coba dan sukses dijalankan. Semoga membantu teman-teman sekalian.


"Om Santhi, Santhi, Santhi, Om"



Comments:

Ada 1
Rudy Hartono said...
pada hari 

info tutorialnya sangat menarik untuk personalisasi tampilan blog kita

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!