D'RID-ONE PUTRA MENA-ONE

Minggu, 20 Februari 2022

Membuat HTML

Salah satu aplikasi umum XSLT di browser adalah untuk mengubah XML menjadi HTML pada klien. Contoh kedua akan mengubah dokumen input (contoh2.xml), yang sekali lagi berisi informasi tentang artikel, menjadi dokumen HTML.

Elemen artikel sekarang berisi elemen HTML (a dan tag, lihat gambar 2). Dokumen XML berisi elemen HTML dan elemen XML, tetapi hanya satu namespace yang diperlukan, yaitu untuk elemen XML. Karena tidak ada namespace HTML, dan menggunakan namespace XHTML akan memaksa XSL untuk membuat dokumen XML yang tidak akan berperilaku seperti dokumen HTML, di XSL Stylesheet akan memastikan dokumen yang dihasilkan akan ditangani sebagai HTML. Untuk elemen XML, ruang nama kita sendiri diperlukan, <body><b><u>xsl:outputhttp://devkasintu.netscape.com/2022/id, dan itu diberikan awalan myNS.(xmlns:myNS="http://devkasintu.netscape.com/2022/id")

Gambar 2 file XML:(example2.xml)

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
  <myNS:Article xmlns:myNS="http://devkasintu.netscape.com/2022/id">
    <myNS:Title>My Article</myNS:Title>
    <myNS:Authors>
      <myNS:Author company="Duridwanzilla Korporasi Pribadi.">Bpk. Duridwanzilla</myNS:Author>
      <myNS:Author>Bpk. Dudi Ridwan</myNS:Author>
    </myNS:Authors>
    <myNS:Body>
      Hujan <b>di</b> Cianjur <u>Indonesia</u> masih terus berlangsung.
    </myNS:Body>
  </myNS:Article>

XSL Stylesheet yang digunakan harus memiliki dua namespace - satu untuk elemen XSLT dan satu untuk elemen XML kita sendiri yang digunakan dalam dokumen XML. Output dari XSL Stylesheet diatur ke dengan menggunakan elemen. Dengan mengatur output menjadi HTML dan tidak memiliki namespace pada elemen yang dihasilkan (berwarna biru), elemen-elemen tersebut akan diperlakukan sebagai elemen HTML.HTMLxsl:output

Gambar 3: XSL Stylesheet dengan 2 namespace (example2.xsl)

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                          xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                          xmlns:myNS="http://devkasintu.netscape.com/2022/id">

  <xsl:output method="html"/>
  ...
</xsl:stylesheet version="1.0">

Template yang cocok dengan node root dokumen XML dibuat dan digunakan untuk membuat struktur dasar halaman HTML.

Gambar 4: Membuat dokumen HTML dasar

...
<xsl:template match="/">
<html>

  <head>

    <title>
      <xsl:value-of select="/myNS:Article/myNS:Title"/>
    </title>

    <style type="text/css">
      .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
    </style>

  </head>

  <body>
    <p class="myBox">
      <span class="title">
        <xsl:value-of select="/myNS:Article/myNS:Title"/>
      </span> </br>

      Authors:   <br />
        <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
    </p>

    <p class="myBox">
      <xsl:apply-templates select="//myNS:Body"/>
    </p>

  </body>

</html>
</xsl:template>
...

Tiga lagi diperlukan untuk melengkapi contoh. Yang pertama digunakan untuk node penulis, sedangkan yang kedua memproses node tubuh. Template ketiga memiliki aturan pencocokan umum yang akan cocok dengan node dan atribut apa pun. Hal ini diperlukan untuk melestarikan elemen html dalam dokumen XML, karena cocok dengan mereka semua dan menyalinnya ke dalam dokumen HTML transformasi menciptakan.xsl:templatexsl:template

Gambar 5: 3 Templat Terakhir

...
<xsl:template match="myNS:Author">
    --   <xsl:value-of select="." />

  <xsl:if test="@company">
    ::   <b>  <xsl:value-of select="@company" />  </b>
  </xsl:if>

  <br />
</xsl:template>

<xsl:template match="myNS:Body">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

<xsl:template match="@*|node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>
...

Stylesheet XSLT terakhir terlihat sebagai berikut:

Gambar 6: Stylesheet XSLT terakhir

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                          xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                          xmlns:myNS="http://devkasintu.netscape.com/2022/id">

  <xsl:output method="html" />

  <xsl:template match="/">
    <html>

      <head>

        <title>
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </title>

        <style type="text/css">
          .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
        </style>

      </head>

      <body>
        <p class="myBox">
          <span class="title">
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </span> <br />

          Authors:   <br />
            <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
          </p>

        <p class="myBox">
          <xsl:apply-templates select="//myNS:Body"/>
        </p>

      </body>

    </html>
  </xsl:template>

  <xsl:template match="myNS:Author">
      --   <xsl:value-of select="." />

    <xsl:if test="@company">
      ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>

    <br />
  </xsl:template>

  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@*|node()">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
  </xsl:template>

Sumber di GitHub