XML dan XSLT: Cara Membuat dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 20, 2020

Dengan XSLT kita bisa mengubah dokumen XML menjadi HTML.

Menampilkan XML dengan XSLT

XSLT (eXtensible Stylesheet Language Transformations) adalah bahasa style sheet yang disarankan untuk XML.

XSLT jauh lebih canggih daripada CSS. Dengan XSLT kita bisa menambah / menghapus elemen dan atribut ke atau dari file output. Kita juga bisa mengatur ulang dan mengurutkan elemen, melakukan pengujian dan membuat keputusan tentang elemen mana yang akan disembunyikan dan ditampilkan, dan banyak lagi.

XSLT menggunakan XPath untuk menemukan informasi dalam dokumen XML.

Contoh XSLT

Kami akan menggunakan dokumen XML berikut:

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

<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>Dua dari Wafel Belgia kami yang terkenal dengan banyak sirup maple asli</description>
<calories>650</calories>
</food>

<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>Wafel Belgia ringan yang dilapisi dengan stroberi dan krim kocok</description>
<calories>900</calories>
</food>

<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>Wafel Belgia ringan yang dilapisi dengan bermacam-macam beri segar dan krim kocok</description>
<calories>900</calories>
</food>

<food>
<name>French Toast</name>
<price>$4.50</price>
<description>Irisan tebal yang terbuat dari roti penghuni pertama buatan kami</description>
<calories>600</calories>
</food>

<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>Dua telur, bacon atau sosis, roti panggang, dan kentang goreng kami yang selalu populer</description>
<calories>950</calories>
</food>

</breakfast_menu>

Gunakan XSLT untuk mengubah XML menjadi HTML, sebelum ditampilkan di browser:

Contoh XSLT Stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="breakfast_menu/food">
  <div style="background-color:teal;color:white;padding:4px">
    <span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
    <xsl:value-of select="price"/>
    </div>
  <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
    <p>
    <xsl:value-of select="description"/>
    <span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per serving)</span>
    </p>
  </div>
</xsl:for-each>
</body>
</html>