"Om Swastiastu"
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"
info tutorialnya sangat menarik untuk personalisasi tampilan blog kita