XML dan Style

1. Apa XML?

XML singkatan dari EXtensible Markup Language
XML adalah suatu markup language seperti halnya HTML
XML dirancang untuk menjelaskan data (describe data)
Tag-tag pada XML belum didefenisikan sebelumnya, tapi dapat didefenisikan sendiri
XML menggunakan Document Type Definition (DTD) ataun XML Schema uantuk menjelaskan data (self-descriptive)

2. Persoalan dengan HTML (The problem with HTML)

HTML dimulai sebagai suatu cara dari cara untuk menjelaskan structure dari dokumen, dengan tag-tag untuk mengindikasikan headers, paragraphs, dan sejenisnya
Karena orang menginginkan untuk mengontrol tampilan (appearance) dari dokumen, maka HTML memerlukan tags lain seperti mengontrol fonts, alignment, dll.
Hasilnya adalah markup language yang dapat melakukan keduanya, tapi tidak bagus/optimal untuk keduanya.

HTML vs. XML

XML kelihatan seperti HTML, tapi berbeda
HTML menggunakan sekumpulan tag yang telah tetap (fixed) HTML dirancang untuk menampilkan data pada manusia Browsers sangat toleran pada kesalahan dalam HTML Semua browsers dapat menampilkan HTML	Tag pada XML bebas dibuat (dan mendefenisikan arti) XML dirancanga untuk menjelaskan data pada komputers Dokumen XML haruslah well-formed (syntaknya betul) Hanya browsers dengan versi terbaru dapat menampilkan XML

3. Untuk apa saja XML digunakan ?

Sharing Information

Content and Presentation

Business Proces (Distributed Computing) atau Webservice

Kelebihan utama teknologi berbasis XML dalam proses bisinis adalah kemampuan untuk melakukan data interchange antar dua sistim dari organisasi yang berbeda (Komunikasi Business to Business). XML mempermudah pengiriman data terstruktur lewat web sehingga tidak ada yang hilang dalam proses penerjemahan.

Disamping itu juga memungkinkan pembangnan Smart Agents dan perancangan sistim Pencarian Pintar. Salah satu masalah besar dengan Web yang sekarang adalah bahwa Search Engine tidak dapat memproses HTML dengan pintar. Misal, jika anda mencari seorang bernama “chip”, anda akan menemukan halaman tentang Chocolate Chip, Computer Chip, binatang chipmunk dan orang yang bernama Chip. Tapi jika sudah ada DTD (Data Type Defenition) untuk records name dan address, pencarian orang yang bernama Chip dapat menghasilkan hasil yg lebih akurat dan berguna.

4. Teknologi Inti dan Standards

Extensible Markup Language (XML)

Document Type Definition (DTD)

XML Schemas (XSD)

Document Object Model (DOM)

XML Stylesheet Language (XSL)

XML Path Language (XPath)

XML Pointer Language (XPointer)

Lainnya:

RDF, XHTML, SOAP, BizTalk, etc.

5. Penggunaan Style pada XML

Custom scripting dengan DOM (Document Object Model)

Components atau Data Binding

Cascading Style Sheets (CSS)

XML Style Sheets (XSL)

6. Struktur XML

Dokemen XML terdiri dari tag root dengan elemen dan sub-elemen didalamnya. Tag dalam XML bebas didefenisikan dan seharusnya mengandung makna sesui data yang dikandungnya.

Contoh file Xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

<cd>

<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>

<country>UK</country>

<company>CBS Records</company>

<price>9.90</price>

<year>1988</year>

</cd>

<cd>

<title>Greatest Hits</title>

<artist>Dolly Parton</artist>

<country>USA</country>

<company>RCA</company>

<price>9.90</price>

<year>1982</year>

</cd>

</catalog>

Penjelasan

Bagian prolog berisi dua baris yang sifatnya opsional:

<?xml version="1.0" encoding="ISO-8859-1"?>

Baris pertama adalah deklarasikan XML, yang menyatakan bahwa dokumen tersebut merupakan dokumen XML versi 1.0. dengan encoding=”ISO-88859-1.

Baris kedua merupakan baris komentar. Penambahan komentar digunakan untuk membantu mengingatkan atau sebagai catatan bagi developer. Komentar diawali dengan karakter .

Setelah bagian prolog adalah bagian elemen dokumen. Bagian tersebut merupakan sebuah elemen tunggal yang bisa berisi elemen-elemen tambahan. Pada contoh di atas, elemen dokumen adalah catalog. Di dalam elemen dokumen berisi elemen cd. Dalam setiap elemen anggota catalog terdapat data-data berupa karakter.

Dari contoh di atas dapat dilihat bahwa dokumen XML tersusun secara terstruktur berdasarkan tag-tag yang didefinisikan oleh pembuat dokumen. Dengan struktur dokumen seperti ini ditambah kebebasan XML mendefinisikan tag baru, menyebabkan XML menjadi pilihan untuk kebutuhan penyimpanan data.

7. Aturan Penulisan XML (Sintaks XML)

· Tag XML adalah case sensitif (membedakan huruf besar dan kecil)

<Message>This is incorrect</message>

<message>This is correct</message>

· Semua elemen XML haruslah tersusun tersarang (nested) atau tidak saling overlap.

Contoh salah:

<b><i>This text is bold and italic</b></i>

Seharusnya:

<b><i>This text is bold and italic</i></b>

Semua dokumen XML haruslah mempunyai akar tag (root tag)

<root>

<child>

<subchild>.....</subchild>

</child>

</root>

Nilai atribut haruslah selalu diberi tanda quote (“).

<?xml version="1.0" encoding="ISO-8859-1"?>

<note date="12/11/99">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

“Well Formed” dan “Valid” XML

• Suatu dokumen XML disebut “well formed” jika telah memenuhi sayarat penulisan sintaks seperti dijelaskan diatas.

• Sedangkan suatu dokumen XML disebut “Valid’ jika telah “well formed” dan juga telah memenuhi aturan DTD (Data Type Document).

DTD merupakan grammar/tata bahasa yang menjelaskan tetang atribut dan tag apa yang valid dalam suatau dokumen XML, dan dalam konteks apa mereka valid. (baca reference yang berkaitan dengan DTD).

8. Transformasi/Menampilakan XML dalam HTML

Dokumen XML hanya bisa ditampilkan browser versi terbaru seperti IE versi 5 keatas dan Netsacpe versi 6 sedangkan untuk dapat ditampilkan oleh browser versi yang lama perlu terlebih dahulu dikonversi ke HTML (dapat dilakukan di server).

Seperti dijelaskan diatas salah satu tujuan diperkenalkannya xml adalah untuk komunikasi data yang dapat dimengerti oleh komputer. Sehingga tampilan dari dokumen XML kurang menrik unuk konsumsi mata manusia. Oleh kerananya dokumen XML juga dapat ditampilkan dalam berbagai tampilan sehingga yang menarik layaknya presentasi HTML. Untuk menampilkan XML sebagi HTML, diperlukan bahasa Style ra yang memfasilitasi tarnsformasi XNL ke HTML, yaitu:

1. CSS (Cascading Style Sheet)

2. XSLT (eXtensible Stylesheet Language Transformation)

8.1 XML dengan CSS (Cascading Style Sheet)

Menggunakan CSS merupakan metoda termudah untuk menampilkan seluruh dokumen XML. Tetapi dibandingkan dengan metoda penampilan dokumen XML dengan XSLT, style sheet bertingkat agak terbatas. Karena walaupun CSS memberikan kontrol yang cukup tinggi untuk cara browser memformat isi elemen dalam dokumen XML, tidak memungkinkan akses atribut XML, entitas, instruksi pemrosesan, dan komponen lain, dan juga tidak untuk memproses informasi yang dimuat dalam komponen ini.

Membuat dokumen XML dengan CSS dengan langkah dasar sebagai berikut :

1. Buat file CSS

2. Kaitkan/link file CSS melalui dokumen XML

Contoh teranformasi XML menggunakan CSS :

Langkah 1: Buat file xml berikut, simpan sebagai; books.xml

(perhatian: atribut href masih dikosongkan)

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href=" "?>
<library>
<book>
    <title>XML</title>
    <author>Gregory Brill</author>
</book>
<book>
    <title>Java and XML</title>
    <author>Brett McLaughlin</author>
</book>
</library >

Langkah 2: Buat file CSS berikut dan simpan sebagai: books.css

book

{display:block;

margin-top:12pt;

font-size:10pt}

title

{display:block;

font-size:10pt;

font-weight:bold;

font-style:italic}

author

{display:block;

margin-left:15pt;)

Langkah 3: Kaitkan atau buat link books.css melalui books.xml pada bagian dokumen XML sbb:

<?xml-stylesheet type="text/css" href=" books.css"?>

Langkah 4: Jalankan file books.xml dengan mnggunakan salah satu browser (firefox ataupu Internet Explorer

8.2 Transformasi XML ke HTML dengan XSLT

Apa XSL?

• XSL singkatan dari Extensible Stylesheet Language

• XSL dirancang khusus untuk style halaman XML, dan jauh lebih canggih (sophisticated) dibanding CSS (CSS dirancang untuk styling HTML)

• XSL terdiri dari tiga languages:

–XSLT (XSL Transformations) adalah language yang digunakan untuk transformasi dokumen XML kedalam jenis dokumen lainnya (paling uumum adalah HTML)

–XPath adalah language untuk seleksi bagian dari dokumen XML untuk ditransformasi dengan XSLT

–XSL-FO (XSL Formatting Objects) adalah pengganti dari CSS (tapi hingga saat ini belum ada implementasinya)

Elemen utama XSL

Ø Basic structure

xsl:stylesheet

xsl:comment

xsl:template

xsl:apply-templates

xsl:call-template

Ø Selecting and sorting

xsl:for-each

xsl:choose

xsl:when

xsl:otherwise

xsl:if

xsl:sort

Ø Creating nodes

xsl:element

xsl:attribute

xsl:attribute-set

xsl:text

xsl:comment

Ø Outputting values

xsl:node-name

xsl:value-of

xsl:eval

xsl:copy

xsl:copy-of

xsl:output

Bagaimana Cara Kerjanya?

Sumber dokumen XML source di parse (diurai) kedalam source tree (struktur pohon)
XPath digunakan untuk menetapkan template yang match dengan bagian-bagian dari source tre
Selanjutnya XSLT digunakan untuk transform bagian yang match dan meletakkannya kedalam hasil tree dan merupakan out-put dari dokumen

XSLT memandang dokumen xml dalam struktur pohon (tree)

XPath

XML document:

      <?xml version="1.0"?>
<library>
<book>
    <title>XML</title>
    <author>Gregory Brill</author>
</book>
<book>
    <title>Java and XML</title>
    <author>Brett McLaughlin</author>
</book>
</library >

XPath layaknya seperti paths dalam sistim file komputer

/ menunjukkan dokumen itu sendiri (tidak ada elemen specific)

/library selects the root element

/library/book selects setiap elemen book

//author selects setiap elemen author, dimanapun terdapat

Beberapa elemen XSLT dan penejelasannya

• <xsl:for-each select="//book"> pencarian melalui setiap elemen book yang terdapat didalam dokumen

• <xsl:value-of select="title"/> memilih isi (content ) dari elemen title dalam lokasi bersangkutan

• <xsl:for-each select="//book">
<xsl:value-of select="title"/>
</xsl:for-each>
memilih content dari elemen title untuk setiap book dalam dokumen XML

Contoh Transformasi XML keHTML menggunakan XSL

Sekenario

Data xml (tentang library) – pustaka.xml:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href=" "?>
<library>
<book>
    <title>XML</title>
  <author>Gregory Brill</author>
</book>
<book>
    <title>Java and XML</title>
    <author>Brett McLaughlin</author>
</book>
</library >

Data XML disebelah hendak ditampilkan dalam HTML dengan tampilan seperti berikut ini (List):

Book Titles:
  • XML
    • Java and XML
Book Authors:
    • Gregory Brill
    • Brett McLaughlin

Langkah:

A. Simpan (save) data xml diatas menggunakan notepad dengan ekstensi xml (mis: pustaka.xml)

B. Buat file xsl yang mengandung sintaks html berkaitan dengan tampilan list dan save /impan file xsl (mis: pustaka.xsl).

File berikut pustaka.xsl berikut menjelaskan bagaimana sintaks html berperan membuat template tampilan sedangkan sintaks xml untuk menyeleksi elemen-elemen books.xml yang hendak ditampilkan.

pustaka .xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:template match="/">
<html>
<head>
    <title>Book Titles and Authors</title>
</head>
<body>
    <h2>Book titles:</h2>
    <ul>
      <xsl:for-each select="//book">
        <li>
          <xsl:value-of select="title"/>
        </li>
      </xsl:for-each>
    </ul>
        <h2>Book authors:</h2>
    <ul>
      <xsl:for-each select="//book">
        <li>
          <xsl:value-of select="author"/>
        </li>
      </xsl:for-each>
    </ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

C. Kaitkan/link pustaka.xsl melalui pustaka.xml pada baris seperti diperlihatkan berikut ini:

<?xml-stylesheet type="text/xsl" href="pustaka.xsl"?>

D. Jalankan/buka file pustaka.xml dengan browser

9. Elemen dan Fungsi XSL

Tabel lengkap elemen XSLT

NN: Netscape
IE: Internet Explorer

Element	Description	IE	NN
apply-imports	Applies a template rule from an imported style sheet	6.0
apply-templates	Applies a template rule to the current element or to the current element's child nodes	5.0	6.0
attribute	Adds an attribute	5.0	6.0
attribute-set	Defines a named set of attributes	6.0	6.0
call-template	Calls a named template	6.0	6.0
choose	Used in conjunction with <when> and <otherwise> to express multiple conditional tests	5.0	6.0
comment	Creates a comment node in the result tree	5.0	6.0
copy	Creates a copy of the current node (without child nodes and attributes)	5.0	6.0
copy-of	Creates a copy of the current node (with child nodes and attributes)	6.0	6.0
decimal-format	Defines the characters and symbols to be used when converting numbers into strings, with the format-number() function	6.0
element	Creates an element node in the output document	5.0	6.0
fallback	Specifies an alternate code to run if the processor does not support an XSLT element	6.0
for-each	Loops through each node in a specified node set	5.0	6.0
if	Contains a template that will be applied only if a specified condition is true	5.0	6.0
import	Imports the contents of one style sheet into another. Note: An imported style sheet has lower precedence than the importing style sheet	6.0	6.0
include	Includes the contents of one style sheet into another. Note: An included style sheet has the same precedence as the including style sheet	6.0	6.0
key	Declares a named key that can be used in the style sheet with the key() function	6.0	6.0
message	Writes a message to the output (used to report errors)	6.0	6.0
namespace-alias	Replaces a namespace in the style sheet to a different namespace in the output	6.0
number	Determines the integer position of the current node and formats a number	6.0	6.0
otherwise	Specifies a default action for the <choose> element	5.0	6.0
output	Defines the format of the output document	6.0	6.0
*param*	Declares a local or global parameter	6.0	6.0
preserve-space	Defines the elements for which white space should be preserved	6.0	6.0
processing-instruction	Writes a processing instruction to the output	5.0	6.0
sort	Sorts the output	6.0	6.0
strip-space	Defines the elements for which white space should be removed	6.0	6.0
stylesheet	Defines the root element of a style sheet	5.0	6.0
template	Rules to apply when a specified node is matched	5.0	6.0
text	Writes literal text to the output	5.0	6.0
transform	Defines the root element of a style sheet	6.0	6.0
value-of	Extracts the value of a selected node	5.0	6.0
variable	Declares a local or global variable	6.0	6.0
when	Specifies an action for the <choose> element	5.0	6.0
with-param	Defines the value of a parameter to be passed into a template	6.0	6.0

Tabel Fungsi XSLT

XSLT terdiri darai lebih 100 built-in functions. Funsi tersebut adalah untuk nilai string , nilai numeric, date dan time, Boolean values, dan lain-lain.

Tip: Functions sering dipanggil denan singkatan fn: prefix, seperti fn:string().

Name	Description
current()	Returns the current node
document()	Used to access the nodes in an external XML document
element-available()	Tests whether the element specified is supported by the XSLT processor
format-number()	Converts a number into a string
function-available()	Tests whether the function specified is supported by the XSLT processor
generate-id()	Returns a string value that uniquely identifies a specified node
key()	Returns a node-set using the index specified by an <xsl:key> element
system-property()	Returns the value of the system properties
unparsed-entity-uri()	Returns the URI of an unparsed entity

Contoh-contoh penggunaan beberapa elemen xml/xsl

Petunjuk penggunaan

Untuk semua contoh xsl pada berikut ini gunakan hanya cdcatalog.xml sebagai data xml
Untuk setiap contoh xsl yang diberikan – lakukan link pada cdcatalog.xml sesuai dengan nama file xsl yang digunakan.

contoh

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>

cdcatalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="---"?>

<catalog>

         <cd>

                 <title>Empire Burlesque</title>

                 <artist>Bob Dylan</artist>

                 <country>USA</country>

                 <company>Columbia</company>

                 <price>10.90</price>

                 <year>1985</year>

         </cd>

         <cd>

                 <title>Hide your heart</title>

                 <artist>Bonnie Tyler</artist>

                 <country>UK</country>

                 <company>CBS Records</company>

                 <price>9.90</price>

                 <year>1988</year>

         </cd>

         <cd>

                 <title>Greatest Hits</title>

                 <artist>Dolly Parton</artist>

                 <country>USA</country>

                 <company>RCA</company>

                 <price>9.90</price>

                 <year>1982</year>

         </cd>

         <cd>

                 <title>Still got the blues</title>

                 <artist>Gary Moore</artist>

                 <country>UK</country>

                 <company>Virgin records</company>

                 <price>10.20</price>

                 <year>1990</year>

         </cd>

         <cd>

                 <title>Eros</title>

                 <artist>Eros Ramazzotti</artist>

                 <country>EU</country>

                 <company>BMG</company>

                 <price>9.90</price>

                 <year>1997</year>

         </cd>

         <cd>

                 <title>One night only</title>

                 <artist>Bee Gees</artist>

                 <country>UK</country>

                 <company>Polydor</company>

                 <price>10.90</price>

                 <year>1998</year>

         </cd>

         <cd>

                 <title>Sylvias Mother</title>

                 <artist>Dr.Hook</artist>

                 <country>UK</country>

                 <company>CBS</company>

                 <price>8.10</price>

                 <year>1973</year>

         </cd>

         <cd>

                 <title>Maggie May</title>

                 <artist>Rod Stewart</artist>

                 <country>UK</country>

                 <company>Pickwick</company>

                 <price>8.50</price>

                 <year>1990</year>

         </cd>

         <cd>

                 <title>Romanza</title>

                 <artist>Andrea Bocelli</artist>

                 <country>EU</country>

                 <company>Polydor</company>

                 <price>10.80</price>

                 <year>1996</year>

         </cd>

         <cd>

                 <title>When a man loves a woman</title>

                 <artist>Percy Sledge</artist>

                 <country>USA</country>

                 <company>Atlantic</company>

                 <price>8.70</price>

                 <year>1987</year>

         </cd>

         <cd>

                 <title>Black angel</title>

                 <artist>Savage Rose</artist>

                 <country>EU</country>

                 <company>Mega</company>

                 <price>10.90</price>

                 <year>1995</year>

         </cd>

         <cd>

                 <title>1999 Grammy Nominees</title>

                 <artist>Many</artist>

                 <country>USA</country>

                 <company>Grammy</company>

                 <price>10.20</price>

                 <year>1999</year>

         </cd>

         <cd>

                 <title>For the good times</title>

                 <artist>Kenny Rogers</artist>

                 <country>UK</country>

                 <company>Mucik Master</company>

                 <price>8.70</price>

                 <year>1995</year>

         </cd>

         <cd>

                 <title>Big Willie style</title>

                 <artist>Will Smith</artist>

                 <country>USA</country>

                 <company>Columbia</company>

                 <price>9.90</price>

                 <year>1997</year>

         </cd>

         <cd>

                 <title>Tupelo Honey</title>

                 <artist>Van Morrison</artist>

                 <country>UK</country>

                 <company>Polydor</company>

                 <price>8.20</price>

                 <year>1971</year>

         </cd>

         <cd>

                 <title>Soulsville</title>

                 <artist>Jorn Hoel</artist>

                 <country>Norway</country>

                 <company>WEA</company>

                 <price>7.90</price>

                 <year>1996</year>

         </cd>

         <cd>

                 <title>The very best of</title>

                 <artist>Cat Stevens</artist>

                 <country>UK</country>

                 <company>Island</company>

                 <price>8.90</price>

                 <year>1990</year>

         </cd>

         <cd>

                 <title>Stop</title>

                 <artist>Sam Brown</artist>

                 <country>UK</country>

                 <company>A and M</company>

                 <price>8.90</price>

                 <year>1988</year>

         </cd>

         <cd>

                 <title>Bridge of Spies</title>

                 <artist>T`Pau</artist>

                 <country>UK</country>

                 <company>Siren</company>

                 <price>7.90</price>

                 <year>1987</year>

         </cd>

         <cd>

                 <title>Private Dancer</title>

                 <artist>Tina Turner</artist>

                 <country>UK</country>

                 <company>Capitol</company>

                 <price>8.90</price>

                 <year>1983</year>

         </cd>

         <cd>

                 <title>Midt om natten</title>

                 <artist>Kim Larsen</artist>

                 <country>EU</country>

                 <company>Medley</company>

                 <price>7.80</price>

                 <year>1983</year>

         </cd>

         <cd>

                 <title>Pavarotti Gala Concert</title>

                 <artist>Luciano Pavarotti</artist>

                 <country>UK</country>

                 <company>DECCA</company>

                 <price>9.90</price>

                 <year>1991</year>

         </cd>

         <cd>

                 <title>The dock of the bay</title>

                  <artist>Otis Redding</artist>

                 <country>USA</country>

                 <company>Atlantic</company>

                 <price>7.90</price>

                 <year>1987</year>

         </cd>

         <cd>

                 <title>Picture book</title>

                 <artist>Simply Red</artist>

                 <country>EU</country>

                 <company>Elektra</company>

                 <price>7.20</price>

                 <year>1985</year>

         </cd>

         <cd>

                 <title>Red</title>

                 <artist>The Communards</artist>

                 <country>UK</country>

                 <company>London</company>

                 <price>7.80</price>

                 <year>1987</year>

         </cd>

         <cd>

                 <title>Unchain my heart</title>

                 <artist>Joe Cocker</artist>

                 <country>USA</country>

                 <company>EMI</company>

                 <price>8.20</price>

                 <year>1987</year>

         </cd>

</catalog>

Contoh 1 : XSL untuk transformasi xml dalam bentuk table html

Simpan sebagai cdcatalog.xsl :

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited with XML Spy v2006 (http://www.altova.com) -->

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:template match="/">

  <html>

  <body>

  <h2>My CD Collection</h2>

    <table border="1">

      <tr bgcolor="#9acd32">

        <th align="left">Title</th>

        <th 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>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

Contoh2. Penerapan filter output

Untuk memfilter output dari file XML yaitu dengan menambahkan atribut kriteria seleksi pada elemen <xsl:for-each>.

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

Operator filter :

= (equal)
!= (not equal)
< less than
> greater than

Simpan file xsl berikut sebagai: cdcatalog_filter.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited with XML Spy v2006 (http://www.altova.com) -->

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <html>

  <body>

    <table border="1">

      <tr bgcolor="#9acd32">

        <th>Title</th>

        <th>Artist</th>

      </tr>

      <xsl:for-each select="catalog/cd[artist='Bob Dylan']">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <td><xsl:value-of select="artist"/></td>

      </tr>

      </xsl:for-each>

    </table>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

Contoh 3: penggunaan Elemen <xsl:sort>

Digunakan untuk sorting output → elemen <xsl:sort> ditempatkan dalam elemen <xsl:for-each>

Simpan sebagai : catalogcd_sort.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited with XML Spy v2006 (http://www.altova.com) -->

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

<xsl:template match="/">

  <html>

  <body>

    <h2>My CD Collection</h2>

    <table border="1">

      <tr bgcolor="#9acd32">

        <th>Title</th>

        <th>Artist</th>

      </tr>

      <xsl:for-each select="catalog/cd">

      <xsl:sort select="artist" />

      <tr>

        <td><xsl:value-of select="title"/></td>

        <td><xsl:value-of select="artist"/></td>

      </tr>

      </xsl:for-each>

    </table>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

Tip: perhatikan cara penulisan empty elemen /> (elemen kosong)

Contoh 4: penggunaan elemen <xsl:if>

Digunakan untuk menempatkan pengujian kondisional terhadap content file XML. Ditempatkan didalam elemen <xsl:for-each>

Syntax

<xsl:if test="expression">

...

  ...some output if the expression is true...

...

</xsl:if>

Simpan sebagai: cdcatalog_if.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited with XML Spy v2006 (http://www.altova.com) -->

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <html>

  <body>

    <h2>My CD Collection</h2>

    <table border="1">

      <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:if test="price&gt;10">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <td><xsl:value-of select="artist"/></td>

            </tr>

    </xsl:if>

    </xsl:for-each>

    </table>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

Contoh5: penggunaan <xsl:choose>

Digunakan dalam conjution dengan <xsl:when> dan <xsl:otherwise> untuk mengekspresikan multiple conditional tests.

Syntax

<xsl:choose>

  <xsl:when test="expression">

    ... some output ...

  </xsl:when>

  <xsl:otherwise>

    ... some output ....

  </xsl:otherwise>

</xsl:choose>

Simpan sebagai: catalogcd_choose.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <html>

  <body>

    <h2>My CD Collection</h2>

    <table border="1">

      <tr bgcolor="#9acd32">

        <th>Title</th>

        <th>Artist</th>

      </tr>

      <xsl:for-each select="catalog/cd">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <xsl:choose>

          <xsl:when test="price &gt; 10">

            <td bgcolor="#ff00ff">

            <xsl:value-of select="artist"/></td>

          </xsl:when>

          <xsl:otherwise>

            <td><xsl:value-of select="artist"/></td>

          </xsl:otherwise>

        </xsl:choose>

      </tr>

      </xsl:for-each>

    </table>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

Contoh lain – simpan sebagai: cdcatalog_choose2.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <html>

  <body>

    <h2>My CD Collection</h2>

    <table border="1">

      <tr bgcolor="#9acd32">

        <th>Title</th>

        <th>Artist</th>

      </tr>

      <xsl:for-each select="catalog/cd">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <xsl:choose>

          <xsl:when test="price &gt; 10">

            <td bgcolor="#ff00ff">

            <xsl:value-of select="artist"/></td>

          </xsl:when>

          <xsl:when test="price &gt; 9">

            <td bgcolor="#cccccc">

            <xsl:value-of select="artist"/></td>

          </xsl:when>

          <xsl:otherwise>

            <td><xsl:value-of select="artist"/></td>

          </xsl:otherwise>

        </xsl:choose>

      </tr>

      </xsl:for-each>

    </table>

  </body>

  </html>

</xsl:template>

</xsl:stylesheet>

XML

XML dan Style

1. Apa XML?

Karena orang menginginkan untuk mengontrol tampilan (appearance) dari dokumen, maka HTML memerlukan tags lain seperti mengontrol fonts, alignment, dll.

Hasilnya adalah markup language yang dapat melakukan keduanya, tapi tidak bagus/optimal untuk keduanya.

XML kelihatan seperti HTML, tapi berbeda

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

<cd>

<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>

<country>UK</country>

<company>CBS Records</company>

<price>9.90</price>

<year>1988</year>

</cd>

<cd>

<title>Greatest Hits</title>

<artist>Dolly Parton</artist>

<country>USA</country>

<company>RCA</company>

<price>9.90</price>

<year>1982</year>

</cd>

</catalog>

<?xml version="1.0" encoding="ISO-8859-1"?>

7. Aturan Penulisan XML (Sintaks XML)

Dokumen XML hanya bisa ditampilkan browser versi terbaru seperti IE versi 5 keatas dan Netsacpe versi 6 sedangkan untuk dapat ditampilkan oleh browser versi yang lama perlu terlebih dahulu dikonversi ke HTML (dapat dilakukan di server).

2. XSLT (eXtensible Stylesheet Language Transformation)

Langkah 1: Buat file xml berikut, simpan sebagai; books.xml

<?xml version="1.0"?> <?xml-stylesheet type="text/css" href=" "?> <library> <book> <title>XML</title> <author>Gregory Brill</author> </book> <book> <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library >

<?xml-stylesheet type="text/css" href=" books.css"?>

Langkah 4: Jalankan file books.xml dengan mnggunakan salah satu browser (firefox ataupu Internet Explorer

8.2 Transformasi XML ke HTML dengan XSLT

• XSL dirancang khusus untuk style halaman XML, dan jauh lebih canggih (sophisticated) dibanding CSS (CSS dirancang untuk styling HTML)

• XSL terdiri dari tiga languages:

–XSLT (XSL Transformations) adalah language yang digunakan untuk transformasi dokumen XML kedalam jenis dokumen lainnya (paling uumum adalah HTML)

–XPath adalah language untuk seleksi bagian dari dokumen XML untuk ditransformasi dengan XSLT

–XSL-FO (XSL Formatting Objects) adalah pengganti dari CSS (tapi hingga saat ini belum ada implementasinya)

Bagaimana Cara Kerjanya?

Sumber dokumen XML source di parse (diurai) kedalam source tree (struktur pohon)

XPath digunakan untuk menetapkan template yang match dengan bagian-bagian dari source tre

Selanjutnya XSLT digunakan untuk transform bagian yang match dan meletakkannya kedalam hasil tree dan merupakan out-put dari dokumen

XPath

XML document:

<?xml version="1.0"?> <library> <book> <title>XML</title> <author>Gregory Brill</author> </book> <book> <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library >

XPath layaknya seperti paths dalam sistim file komputer

/ menunjukkan dokumen itu sendiri (tidak ada elemen specific)

/library selects the root element

/library/book selects setiap elemen book

//author selects setiap elemen author, dimanapun terdapat

Beberapa elemen XSLT dan penejelasannya

• <xsl:for-each select="//book"> pencarian melalui setiap elemen book yang terdapat didalam dokumen

• <xsl:value-of select="title"/> memilih isi (content ) dari elemen title dalam lokasi bersangkutan

• <xsl:for-each select="//book"> <xsl:value-of select="title"/> </xsl:for-each> memilih content dari elemen title untuk setiap book dalam dokumen XML

Contoh Transformasi XML keHTML menggunakan XSL

Data xml (tentang library) – pustaka.xml:

<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href=" "?> <library> <book> <title>XML</title> <author>Gregory Brill</author> </book> <book> <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library >

Data XML disebelah hendak ditampilkan dalam HTML dengan tampilan seperti berikut ini (List):

Langkah:

A. Simpan (save) data xml diatas menggunakan notepad dengan ekstensi xml (mis: pustaka.xml)

B. Buat file xsl yang mengandung sintaks html berkaitan dengan tampilan list dan save /impan file xsl (mis: pustaka.xsl).

File berikut pustaka.xsl berikut menjelaskan bagaimana sintaks html berperan membuat template tampilan sedangkan sintaks xml untuk menyeleksi elemen-elemen books.xml yang hendak ditampilkan.

pustaka .xsl

C. Kaitkan/link pustaka.xsl melalui pustaka.xml pada baris seperti diperlihatkan berikut ini:

<?xml-stylesheet type="text/xsl" href="pustaka.xsl"?>

D. Jalankan/buka file pustaka.xml dengan browser

9. Elemen dan Fungsi XSL

Tabel Fungsi XSLT

cdcatalog.xml

**Karena orang menginginkan untuk mengontrol tampilan (appearance) dari dokumen, maka HTML memerlukan tags lain seperti mengontrol fonts, alignment, dll.**

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href=" "?>
<library>
<book>
<title>XML</title>
<author>Gregory Brill</author>
</book>
<book>
<title>Java and XML</title>
<author>Brett McLaughlin</author>
</book>
</library >

<?xml version="1.0"?>
<library>
<book>
<title>XML</title>
<author>Gregory Brill</author>
</book>
<book>
<title>Java and XML</title>
<author>Brett McLaughlin</author>
</book>
</library >

• <xsl:for-each select="//book">
<xsl:value-of select="title"/>
</xsl:for-each>
memilih content dari elemen title untuk setiap book dalam dokumen XML

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href=" "?>
<library>
<book>
<title>XML</title>
<author>Gregory Brill</author>
</book>
<book>
<title>Java and XML</title>
<author>Brett McLaughlin</author>
</book>
</library >