XML - Chapter 4

BAB IV Mengubah Tampilan Dokumen XML
(Rendering)
Riza Muhammad Nurman, S.Kom
Email : rizaman@eng.ui.ac.id ; rizamn@ymail.com

Monday, March 19, 2018 Riza Muhammad Nurman 2
CONTENT
 Menggunakan CSS Dalam XML
 Menggunakan XSL dan XPATH

Pendahuluan
• XML berfokus  isi data dan != pada cara mempresentasikan data
• Jika dibuka pada web browser, maka dokumen XML  tampil dalam
bentuk tree.
• Pengubahan tampilan  rendering
• Untuk memformat data yang akan ditampilkan pada sebuah web
browser dibutuhkan sebuah alat spesial yang disebut stylesheet
• Stylesheet adalah sebuah dokumen yang berisi aturan untuk
memformat satu atau lebih dokumen XML
• Stylesheet terdiri atas kode untuk menerjemahkan struktur dari
sebuah dokumen sumber (dalam hal ini XML) menjadi sebuah
struktur yang dapat ditampilkan dalam web browser

Fungsi Stylesheet
1. Mengubah dokumen XML ke struktur yang lain dan menampilkannya
pada target tertentu:
• Membuat label dan heading.
• Menentukan filter untuk mengekstraksi data yang ingin ditampilkan.
• Mengubah urutan dari elemen atau atribut.
• Mengurutkan isi dari data.
• Melakukan transformasi kompleks yang menghitung nilai yang
berdasarkan isi dari elemen.
2. Menggambarkan bagaimana untuk mentranformasikan informasi:
• Page layout.
• Mengubah bentuk isi dokumen menjadi daftar atau paragraph.
• Menentukan property seperti spasi, margin, alignment dan font.

BROWSER

Tipe Stylesheet
• Cascading Style Sheet : menyediakan mekanisme sederhana untuk
memformat sebuah dokumen XML atau HTML.
• Extensible Style Sheet : digunakan untuk mengubah urutan dan
mengurutkan elemen berdasarkan kondisi dan menampilkan elemen-
elemen tertentu.
• Document Style Semantics and Specefication Language : Style
sheet ini sebenarnya adalah dokumen style sheet yang khusus untuk
digunakan pada dokumen SGML
(XML adalah bagian dari SGML  memformat dokumen XML)

CSS dan XML
• Membuat CSS
• elementname menjelaskan nama dari elemen yang akan diformat
• property1 menentukan nama properti, seperti font-family, font-size,
color dan font-weight.
• value menentukan nilai dari property, seperti "Times New
Roman","30pt","Italic".
elementname
{
property1: value;
property1: value;
}

CSS dan XML

XSL (Extensible Style Sheet Language)
• XSL berisi banyak object yang digunakan untuk memformat data dan
menentukan bagaimana data tersebut akan ditampilkan
• XSL terbagi atas 2 bagian, yaitu:
– XSL Transformation (XSLT) : bahasa yang berdasarkan XML yang
memungkinkan developer untuk mengubah dokumen XML menjadi
format lain seperti HTML atau XHTML.
– XML Path (XPath) : bahasa yang digunakan untuk mengakses
sebagian atau beberapa bagian dari sebuah dokumen XML seperti
elemen dan atribut.
• Catatan: XPath berisi perintah yang terdiri atas ekspresi matematikal,
operator relasional, persamaan dan logika untuk menentukan kondisi
untuk melakukan pemformatan dokumen XML.

CSS XSLT
Mudah digunakan dan cocok
untuk dokumen sederhana
Kompleks
Tidak dapat digunakan untuk
melakukan pengurutan,
penambahan, penghapusan
atau operasi tertentu pada
elemen
Dapat digunakan untuk melakukan
pengurutan, penambahan,
penghapusan atau operasi tertentu
pada elemen sebab XSLT dapat
membaca struktur dari sebuah
dokumen XML
Tidak dapat digunakan untuk
mengakses object yang bukan
elemen seperti atribut, nilai dari
atribut dan PI
Dapat digunakan untuk mengakses
dan memanipulasi komenta, PI serta
nilai dan nama atribut di dalam sebuah
dokumen XML
Menggunakan memory yang
lebih kecil
Menggunakan lebih banyak memori
dan processor
Tidak menggunakan sintak
XML
Dituliskan dengan menggunakan
sintak XML

Cara Kerja XSLT Processor

XSLT
• XSLT menyediakan beberapa elemen yang dapat digunakan untuk
memilih dan meformat data, yaitu:
– stylesheet
– value-of
– for-each
– sort
– text

stylesheet
• Untuk menginstruksikan web browser bahwa dokumen tersebut
adalah sebuah file style sheet
• Sintak :
• Elemen stylesheet adalah root elemen dari semua elemen style
sheet XSLT
• Awalan xsl pada sintak tersebut berisi referensi ke sebuah
namespace-URI untuk XSLT
<xsl-stylesheet
xmlns:xsl=http://www.w3.org/1999/XSL/Transform
version="1.0">

value-of
• Elemen ini digunakan untuk menampilkan nilai dari elemen atau
atribut tertentu
• Sintak :
• Contoh:
<xsl:value-of select="elementname/attributename"/>
<xsl:value-of select="Nama_Nasabah"/>
<xsl:value-of select="@ID_Nasabah"/>

for-each
• Elemen ini digunakan untuk mengistruksikan XSLT processor agar
memproses informasi untuk setiap instance dari pattern (pola)
tertentu.
• Sintak :
• Contoh:
<xsl:for-each select="pattern"/>
[perintah]
</xsl:for-each >
<xsl:for-each select="ProductData/Product">
<font color="red"><xsl:value-of
select="ProductName"/></font>
<xsl:value-of select="Price"/> </xsl:for-each>

Daftar Nilai Untuk Atribut Pattern
Pattern Contoh Deskripsi
element
<xsl:for-each
select="Product">
Melakukan operasi tertentu
untuk setiap elemen Product
parent/child
<xsl:for-each
select="ProductData/Product">
untuk setiap elemen Product
yang merupakan child
element dari elemen
ProductData
ancestor//child
<xsl:for-each
select="ProductData//Brand">
untuk setiap elemen Brand
yang memiliki elemen
ProductData sebagai
ancestor-nya

sort
• Elemen ini digunakan untuk mengurutkan data berdasarkan nilai
yang diberikan pada elemen dan atribut.
• Sintak :
• Contoh :
<xsl:sort select="expression"
order="ascending|descending"
case-order="upper-first|lower-first" data-
type="text|number|qname">
<xsl:for-each select="Product">
<xsl:sort select="Price" order="ascending"
data-type=" number ">
<xsl:value-of select="ProductName"/>
<xsl:value-of select="Cover_Color"/>
</xsl:for-each>

Atribut Dalam Elemen Sort
Atribut Nilai Deskripsi
select expression
Menunjukkan nama elemen yang akan diurutkan
order
asceding
descending
Menunjukkan urutan yang diinginkan. Nilai default
atribut ini adalah ascending
case-
order
upper-first
lower-first
Menentukan apakah huruf besar berada diatas
huruf kecil atau sebaliknya
data-
type
text
number
qname
Menunjukkan tipe data dari data yang akan
diurutkan. Data tersebut boleh dalam bentuk
angka, teks, atau buatan user. Nilai default dari
atribut ini adalah text

text
• Elemen ini digunakan untuk menampilkan teks yang tidak dapat
diubah di dalam browser
• Elemen text berfungsi seperti label.
• Perhatikan contoh berikut:
• Perintah tersebut digunakan untuk menampilkan kalimat Nama
Nasabah : pada browser ketika sebuah dokumen XML yang
diasosiasikan dengan XSLT dijalankan.
<xsl:text> Nama Nasabah : </xsl:text>

CONTOH XSLT PADA DOKUMEN XML

MEMBUAT XSLT TEMPLATE RULE
• Menggambarkan bagaimana sebuah elemen dan isinya akan diubah
menjadi bentuk yang dapat ditampilkan pada sebuah web browser
• Sebuah XSLT Template Rule terdiri atas 2 bagian, yaitu:
– Sebuah pola (pattern) yang digunakan untuk mengidentifikasi
elemen yang terdapat dalam dokumen XL
– Sebuah kode yang berisi aksi atau pemrosesan yang menjelaskan
mengenai proses pengubahan dan rendering dari elemen tertentu.
• XSLT menggunakan 2 elemen utama untuk membuat template rule,
yaitu template dan apply-template.

Elemen template
• Digunakan untuk mendefinisikan sebuah template untuk
meghasilkan output yang diinginkan
• Sintak :
<xsl:template match="pattern">
[perintah]
</xsl:template>

/
<xsl:template
match="/">
Digunakan untuk melakukan operasi
tertentu mulai dari root elemen sebuah
dokumen XML
*
<xsl:template
match="*">
tertentu pada elemen apapun di dalam
dokumen XML
Elemen
<xsl:template
match="Customer">
tertentu pada elemen Customer
elemen1 |
elemen2 |…
<xsl:template
match="FirstName|L
astName">
tertentu pada elemen FirstName dan
LastName
elemen[@atribut]
<xsl:template
match="Customer[
@CustID]">
tertentu pada atribut CustID yang
dimiliki oleh elemen Customer

elemen[@atribut
='nilai']
<xsl:template
match="Customer[
@CustID]='1'">
tertentu pada setiap elemen Customer
yang memiliki atribut CustID dengan
nilai adalah 1
parent/child
<xsl:template
match="Customer/F
irstName">
tertentu pada elemen FirstName yang
yang memiliki elemen Customer
sebagai parent
ancestor//child
<xsl:template
match="CustomerD
etails//Address">
tertentu pada elemen Address yang
yang memiliki elemen CustomerDetails
sebagai ancestor

Elemen apply-template
• Memerintahkan XSLT Processor agar mencari template yang sesuai
dan kemudian mengerjakan tugas tertentu pada setiap elemen yang
terpilih.
• Sintak :
<xsl:apply-template [select="pattern"]>

CONTOH

Flowchart
Pemrosesan
Template

Menggunakan Conditional Formatting
• Conditional formatting adalah istilah yang digunakan untuk
melakukan pemformatan data berdasarkan kondisi tertentu
– Elemen if
– Elemen choose

Operator Perbandingan
Operator Deskripsi Contoh
= sama dengan Price [ . = 20 ]
!= tidak sama dengan Price [ . != 20 ]
< lebih kecil dari Price [ . < 20 ]
> lebih besar dari Price [ . > 20 ]
<= lebih kecil atau sama dengan Price [ . <= 20 ]
>= lebih besar atau sama dengan Price [ . >= 20 ]
Operator Deskripsi Contoh
and dan Price [ . > 20 and . < 30]
or atau Price [ . = 20 or . = 45 ]
not negasi Price [not ( . = 20) ]
Operator Logika

Elemen if
• Sintax:
• Contoh:
<xsl:if test=”condition”>
[perintah]
</xsl:if>
<xsl:if test=”Price[. > 100]”>
<xsl:value-of select=”ProductName”/>
</xsl:if>

CONTOH

Elemen choose
• Sintax:
<xsl:choose>
<xsl:when test=”condition”/>
[perintah]
</xsl:when>
<xsl:when test=”condition”/>
[perintah]
</xsl:when>
:
:
<xsl:otherwise>
[perintah]
</xsl:otherwise>
</xsl:choose>

CONTOH

XPATH
• Terkadang data yang disimpan dalam bentuk dokumen XML perlu
dicari terlebih dahulu sebelum dapat diformat dengan menggunakan
style sheet  XSL menyediakan XML Path.
• XPath digunakan untuk melakukan pencarian dan pengambilan
informasi dari dalam dokumen XML.
• XPath membaca dokumen XML dalam bentuk tree yang terdiri atas
branch dan node yang saling terhubung satu dengan yang lainnya.
Sebuah node dapat berupa elemen, atribut, PI, comment, teks atau
bahkan namespaces.

Contoh
<?xml version="1.0" encoding="UTF-8"?>
<ProductData>
<Product ProID="P001" Category="Toy">
<ProductName>Mini Bus</ProductName>
<Description>This toy is for children
aged 4 and
above</Description>
<Price>75</Price>
<Quantity>54</Quantity>
</Product>
</ProductData>

Struktur Contoh XML

Operator
&
Karakter
Khusus
XPATH
Operator Contoh Deskripsi
/ /ProductData Memilih child elemen dari elemen ProductData
// //ProductName Mencari elemen tersebut pada level manapun
. .ProductName Menunjukkan context yang sedang aktif
.. ../ProductName
Memilih elemen ProductName yang berada pada
parent element dari elemen yang sekarang sedang
aktif
* * Memilih seluruh elemen
@ @ProductID Digunakan sebagai awalan untuk atribut
@* @* Memilih seluruh atribut
: :
Memisahkan awalan namespace dari nama elemen
atau nama atribut
() (Price * Quantity) Digunakan untuk mengelompokkan operasi
[]
[@ProductID='P
001']
Filter pattern
+ num1+num2 Menghasilkan nilai dari penjumlah dua angka
- num1-num2 Menghasilkan nilai dari pengurangan dua angka
* num1*num2 Menghasilkan nilai dari perkalian dua angka
div num1 div num2 Menghasilkan nilai dari pembagian dua angka
mod num1 mod num2 Menghasilkan sisa hasil bagi dari dua bilangan

Fungsi Dalam XPATH
• String
– Untuk melakukan operasi string seperti mencari panjang karakter
dari string atau mengubah huruf besar menjadi huruf kecil.
– Untuk melakukan manipulasi isi elemen / atribut yang berupa teks
• Node-Set
– Untuk memanipulasi node-set untuk menghasilkan informasi
mengenai tentang node-set tersebut
• Boolean
– Menghasilkan salah satu dari 2 nilai yaitu True atau False
• Numeric
– Untuk barbagai macam tujuan, seperti penambahan, mencari nilai
integer yang paling dekat, dan mengubah string menjadi angka

Fungsi Deskripsi Contoh
string(obj?)
Digunakan untuk mengubah argumen fungsi menjadi
sebuah string. Jika argumen tidak diisi maka fungsi
tersebut menggunakan current node-set sebagai nilai
default dan menghasilkan nilai string dari node
pertamanya.
String("P001") menghasilkan P001
sebagai nilai string.
starts-with(str,str)
Menerima 2 argumen. Fungsi ini akan menghasilkan
nilai true jika argumen pertama diawali oleh argumen
kedua. Jika tidak maka menghasilkan nilai false
starts-with('Barbie','Ba') akan
menghasilkan nilai true, tetapi jika
starts-with('Barbie','Bark') akan
menghasilkan nilai false
contains(str, str)
Menerima 2 argumen dan mengahasilkan nilai true
jika argumen pertama berisi atau terdiri dari nilai
argumen kedua. Jika tidak akan menghasilkan nilai
false
contains('Barbie','ar') akan menghasilkan
nilai True, tetapi jika
contains('Barbie','art') akan menghasilkan
nilai False
substring(str, num,
num?)
Menerima 3 argumen. Fungsi ini memisahkan
sebagian karakter dari argumen pertama, dimulai
dari posisi yang ditentukan olrh argumen kedua
dengan panjang karakter sebanyak yang ditentukan
oleh argumen ketiga. Jika argumen ketiga tidak
dituliskan maka fungsi ini akan menghasilkan seluruh
karakter mulai dari posisi yang ditentukan oleh
argumen kedua
substring('mm/dd/yy', 1,2) akan
menghasilkan mm
substring('mm/dd/yy',2) akan
menghasilkan m/dd/yy
substring-before(str,str)
Menerima 2 string sebagai argumen dan
menghasilkan karakter yang berada sebelum nilai
dari argumen kedua.
substring-before('mm/dd/yy', '/') akan
menghasilkan
'mm'
substring-after(str,str)
Menerima 2 string sebagai argumen dan
menghasilkan karakter yang berada sesudah nilai
dari argumen kedua.
substring-after('mm/dd/yy', '/') akan
menghasilkan
'dd/yy'
string-length(str?)
Menerima satu argumen dan menghasilkan
banyaknya karakter dari argumen tersebut. Jika
argumentidak diisi maka fungsi ini akan
menghasilkan panjang karakter dari current node
string-length("anne") menghasilkan 4
Fungsi String

Fungsi Node-Set
last()
Menghasilkan angka dari node
terakhir pada node set yang
sedang aktif
Menghasilkan angka 5 jika node
kelima adalah node terakhir dari
node set yang sedang aktif
position()
Menghasilkan angka index dari
node yang sedang aktif yang
berada di dalam parent node
Menghasilkan angka 2 jika
sebuah elemen book memiliki 2
child element author dan yang
sedang diproses adalah elemen
author kedua
count(ns)
Menghasilkan jumlah dari node di
dalam dokumen XML
Menghasilkan jumlah elemen
ProductName untuk fungsi
count(//ProductName)
id(obj)
Menghasilkan elemen dari ID
yang dituliskan. Node tersebut
tsetidaknya harus memiliki
sebuah atribut dengan type ID
Menghasilkan elemen yang
memiliki atribut ID=P001 untuk
fungsi id('P001')

Fungsi Boolean
Boolean(obj?)
Mengubah nilai argumen
menjadi nilai boolean. Jika
obj adalah node-set maka
fungsi terebut menghasilkan
nilai True. Node-set akan
menghasilkan nilai False jika
string memiliki panjang=0
Boolean(0) menghasilkan nilai
false. Boolean(1) menghasilkan
nilai True.
Boolean('') menghasilkan nilai
false
not(Boolean)
Menghasilkan nilai true jika
argumen yang diberikan
bernilai false, dan
menghasilkan nilai false jika
argumen yang diberikan
bernilai true
not(@id>40) hasilnya akan
ekuivalen dengan (@id<=400)

Fungsi Numeric
number(obj
?)
Mengubah nilai argumen menjadi
angka. Jika argumen tidak dituliskan
, maka fungsi ini akan mengambil
current node sebagai nilai default
number('12') menghasilkan nilai
numerik 12
number('a') menghasilkan NaN.
NaN adalah singkatan dari Not a
Number
sum(ns)
Menghasilkan total dari semua node
yang terdapat pada argumen yang
dituliskan
sum(Quantity) akan menghasilkan
total dari semua elemen Quantity
yang terdapat pada dokumen XML
floor(num)
menghasilkan nilai integer terbesar
yang lebih kecil atau sama dengan
nilai pada argumen
floor(2.5) menghasilkan 2
ceiling(num)
menghasilkan nilai integer terkecil
yang lebih besar atau sama dengan
nilai pada argumen
ceiling(2.2) menghasilkan 3
round(num)
melakukan pembulatan ke nilai
integer terdekat
round(5.6) akan menghasilkan 6

CONTOH

XML - Chapter 4

More Related Content

More from Riza Nurman (20)

Recently uploaded (20)

XML - Chapter 4