XSLT dapat digunakan untuk mengubah dokumen menjadi XHTML pada browser kita.
Section Artikel
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
- Gunakan metode
- 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
