XML

XML XSLT : Pada Client – Solusi dan Contohnya

XSLT dapat digunakan untuk mengubah dokumen menjadi XHTML pada browser kita.

Solusi JavaScript

Sebelumnya kita membahas cara XSLT digunakan untuk mengubah dokumen dari XML ke XHTML, caranya adalah dengan cara menambahkan style sheet XSL ke file XML dan membiarkan browser melakukan transformasi.
Meskipun hal ini berfungsi dengan baik, tetapi hal ini tidak selalu diinginkan untuk menyertakan referensi style sheet dalam file XML (misalnya, tidak akan berfungsi di browser yang tidak mendukung XSLT.)

Solusi yang lebih serbaguna adalah menggunakan JavaScript untuk melakukan transformasi.

Dengan menggunakan JavaScript, kita dapat:

  • melakukan pengujian khusus browser
  • menggunakan style sheet yang berbeda sesuai dengan browser dan kebutuhan pengguna

Itulah keindahan XSLT! Salah satu tujuan desain XSLT adalah memungkinkan untuk mengubah data dari satu format ke format lain, mendukung browser yang berbeda dan kebutuhan pengguna yang berbeda.

File XML dan File XSL

Contoh :

XML :

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

Tambahkan style sheet XSL :

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title" /></td>
      <td><xsl:value-of select="artist" /></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>

</xsl:stylesheet>

Output :

Perhatikan bahwa file XML tidak memiliki referensi ke file XSL.

PENTING: Kalimat di atas menunjukkan bahwa file XML dapat diubah menggunakan banyak style sheet XSL yang berbeda.

Mengubah XML menjadi XHTML di Browser

Berikut adalah kode sumber yang diperlukan untuk mengubah file XML menjadi XHTML di klien:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
  {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
else 
  {
  xhttp = new XMLHttpRequest();
  }
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog_client.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>

Output :

Penjelasan Kode :

Fungsi loadXMLDoc() melakukan hal berikut:

  • Buat objek XMLHttpRequest
  • Gunakan metode open() dan send() dari objek XMLHttpRequest untuk mengirim permintaan ke server
  • Dapatkan data respons sebagai data XML

Fungsi displayResult() digunakan untuk menampilkan file XML yang diberi gaya oleh file XSL

  • Muat file XML dan XSL
  • Uji jenis browser yang dimiliki pengguna
  • Jika Internet Explorer:
    • Gunakan metode transformNode() untuk menerapkan style sheet XSL ke dokumen xml
    • Setel badan dokumen saat ini (id = “example”) untuk memuat dokumen xml yang telah ditata
  • Jika browser lain:
    • Buat objek prosesor XSLTP baru dan impor file XSL ke sana
    • Gunakan metode transformToFragment() untuk menerapkan lembar gaya XSL ke dokumen xml
    • Setel badan dokumen saat ini (id = “example”) untuk memuat dokumen xml yang telah ditata

Hanifah Nurbaeti

Share
Tags: XMLxslt