DRgrtea

Alih Bahasa

English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified

DRMenuNavigasiBar

menunavngampar

Minggu, 20 Februari 2022

Membuat HTML

Membuat HTML

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

Tidak ada komentar:

Posting Komentar

Posting Populer

Duridwan TeA Google Arsip

Tampil Ful Skrin

Tampilan penuh layar

Klik tombol "Penuh" untuk mode ful skrin. Tutup dengan cara klik tuts "Esc" di kibot, atau dengan mengklik tombol "Normal" saja.

Penuh Normal

Materi artikel

DRLabel

'Urwah ۝۞ دعاء الأوراد ۞۝ 1drive 2019 3Dwarehouse Abaib Academia AdminisGuru Adzan AKGTK Akrab 9497 AkselelatorDRc Aksioma Alfa Aljamal Anakku Android Apache API Aplikasi Aplikasi Online Aplikasiku aqidah aqo'id Arsiper Arudl ASPnet Atribusi Attaqwa Audacity Audio Aurod AutoCAD ba'da sholat Ba'diyah Babad Bahasa Indonesia Balaghoh Baleomol Banner basund Belajar.id Biantara bilibiliTV bing.com Biografi Bisikan Bisnis Blog blogku Bluestack BMTT Bola Dunia Boxmode BUKU Caknun Canva Capcut CData Cerita Chanel Cijagong Copast Coreldraw;Koreldrow cortang CPANEL cv Daftar Isi Daftar Tamu Dailymotion Dakwah Daring db515TB Dek@t Dikdasmen Diktat Do''a Domainesia dongeng Download DRctvone DRcVivaTV DRlink drSoftaculous Duridwancijag duridwanMI E-Book Earth eDGe Edmodo Edwin ekstensi Emulated Epson eSDeKU Excel Facebook Fafa Belajar favicon FB FBwatch Fikih Film FKGN FKSS Flickr ftf ftp Gambar Gaweku GDexcel GDrive GDword Gif Giphy Github Goguru googele Gosiswawi GS v2 Gudang Gif GuMeng Guru Hotmail HP HUDHUD ATTWITERI humor iframe IHTT IIS IKBAL ikonku Ilham Ilmu Waris Imam Mahdi Iman imrithi imtihan Inlislite ips Ips siswa irkhash Ishol Israel Jackie Chan JadwalHirup Jendelatea Jurumiah Kaamengan Kaldik karuhun Kasintu Kasyif Kemdak Kenangan Kepesantrenan KHMZ Khutbah Idul Adha Khutbah Jum'at Kitab Koneng KlaudiAwan KMS Koding Komentarku konsorsium Kristen KSM KSM_24 kulsub Kumer Kutab Kuning Lalogin Laporan link lirik sunda Literasi LKSATA Logo Lokasi LTNU Malaikat Mama Gelar mapel Mapel Plus marawis materi ajar materi ips materi sunda Mediafire Menu Mulai Messenger meta Metode Belajar MGMP MTS Mi.co.id Microsoft Mikrosoft Word MKKS MKSS MKT Modul MoU Movie MTs. Mushaf Sunda Mvs Nabi nadhom nahwu Nashoih Nasihat Pernikahan Nasrudin Hoja Nasyid NewTabTvSearch Ngablog ngaDOS Ngaji Pontren Nganet Ngaos ngaweb Ngimel Ngobrol Solat ngobrolgurutea ngoding Ngoleksi Nikah Nonton Nubuwwah NUPTKku Nyekrip Nyitus OderPejKu Office office 2010 Office.co.id Offidocs ome Ome.TV omeaeun Onedrive Opis OpisTeA Oracle OSIS Outlook Pakakas Pamilarian PaperDropboxTeA PAS PAS S1 PAT pdf Penahexa Penilaian Perangkat Guru Peringatan Nabi perpus Perpusdig PHBI photo Phyton Pintarkem PKKM PKKS PKSS PohonKeluarga Ponpes Portabel Post WA PPDB PPKKS Prkt Ltk Program Files Proker Proposal Prosem Prota PTS PTS S1 publikteaqta Pupujian Quran Sunda Rapat RDM Removal renungan Risalah Risalah Sholat RKS Rohbiyah Romadlon Romadon Rumus Rumus;PHP; RumusHead s.idku Safari Santif Sanusi segitiga Sekolah seren tampi Sertifikat sholat Shopee Shorof sifat_20 Silaturahmi Simdif SIMPATIKA sinopsis siswa sitegog Skenario Belajar Sketchup SketsaupTeA Slayid SMA Soal Soanten Software SoraTeuPerluNinggal StoryTelling Suara Sukapura sumputkeun sunda syare'at Ta'lim tabir mimpi Tadabbur tadarrus Tahajud Tahlil Tasbeh Taskbar Tauhid Tawasul Tema Blog tenor.com Terjemah tiktok TimTeA tips n trick Trik Tsaqifah tulisan TV Nasional Twitter Usaha Vektor Video Video Player Video;Edit Video;Rara VideoPost vidio w3s WA - AYT wahyu Wali Walimahan Wallpaper wayang WeA Windows Wirid Witir word Wordpress WordTeA WorldBank WP WPS WS XLS DRcjgTeA Yahoo yandexck Yapista link YT ytDuridwanSunda YTstudio Yutub ZIP Zoom سلاح الدعوة
×
Judul