Dokumen tersebut membahas berbagai cara untuk mengubah tampilan dokumen XML melalui penggunaan stylesheet seperti CSS dan XSLT. Stylesheet digunakan untuk memformat dan menentukan bagaimana data dalam dokumen XML akan ditampilkan."
tugas 1 tutorial online anak berkebutuhan khusus di SD
XML - Chapter 4
1. BAB IV Mengubah Tampilan Dokumen XML
(Rendering)
Riza Muhammad Nurman, S.Kom
Email : rizaman@eng.ui.ac.id ; rizamn@ymail.com
2. Monday, March 19, 2018 Riza Muhammad Nurman 2
CONTENT
Menggunakan CSS Dalam XML
Menggunakan XSL dan XPATH
3. Monday, March 19, 2018 Riza Muhammad Nurman 3
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
4. Monday, March 19, 2018 Riza Muhammad Nurman 4
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.
6. Monday, March 19, 2018 Riza Muhammad Nurman 6
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)
7. Monday, March 19, 2018 Riza Muhammad Nurman 7
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;
}
9. Monday, March 19, 2018 Riza Muhammad Nurman 9
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.
10. Monday, March 19, 2018 Riza Muhammad Nurman 10
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
11. Monday, March 19, 2018 Riza Muhammad Nurman 11
Cara Kerja XSLT Processor
12. Monday, March 19, 2018 Riza Muhammad Nurman 12
XSLT
• XSLT menyediakan beberapa elemen yang dapat digunakan untuk
memilih dan meformat data, yaitu:
– stylesheet
– value-of
– for-each
– sort
– text
13. Monday, March 19, 2018 Riza Muhammad Nurman 13
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">
14. Monday, March 19, 2018 Riza Muhammad Nurman 14
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"/>
15. Monday, March 19, 2018 Riza Muhammad Nurman 15
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>
16. Monday, March 19, 2018 Riza Muhammad Nurman 16
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">
Melakukan operasi tertentu
untuk setiap elemen Product
yang merupakan child
element dari elemen
ProductData
ancestor//child
<xsl:for-each
select="ProductData//Brand">
Melakukan operasi tertentu
untuk setiap elemen Brand
yang memiliki elemen
ProductData sebagai
ancestor-nya
17. Monday, March 19, 2018 Riza Muhammad Nurman 17
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>
18. Monday, March 19, 2018 Riza Muhammad Nurman 18
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
19. Monday, March 19, 2018 Riza Muhammad Nurman 19
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>
20. Monday, March 19, 2018 Riza Muhammad Nurman 20
CONTOH XSLT PADA DOKUMEN XML
21. Monday, March 19, 2018 Riza Muhammad Nurman 21
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.
22. Monday, March 19, 2018 Riza Muhammad Nurman 22
Elemen template
• Digunakan untuk mendefinisikan sebuah template untuk
meghasilkan output yang diinginkan
• Sintak :
<xsl:template match="pattern">
[perintah]
</xsl:template>
23. Monday, March 19, 2018 Riza Muhammad Nurman 23
Pattern Contoh Deskripsi
/
<xsl:template
match="/">
Digunakan untuk melakukan operasi
tertentu mulai dari root elemen sebuah
dokumen XML
*
<xsl:template
match="*">
Digunakan untuk melakukan operasi
tertentu pada elemen apapun di dalam
dokumen XML
Elemen
<xsl:template
match="Customer">
Digunakan untuk melakukan operasi
tertentu pada elemen Customer
elemen1 |
elemen2 |…
<xsl:template
match="FirstName|L
astName">
Digunakan untuk melakukan operasi
tertentu pada elemen FirstName dan
LastName
elemen[@atribut]
<xsl:template
match="Customer[
@CustID]">
Digunakan untuk melakukan operasi
tertentu pada atribut CustID yang
dimiliki oleh elemen Customer
24. Monday, March 19, 2018 Riza Muhammad Nurman 24
Pattern Contoh Deskripsi
elemen[@atribut
='nilai']
<xsl:template
match="Customer[
@CustID]='1'">
Digunakan untuk melakukan operasi
tertentu pada setiap elemen Customer
yang memiliki atribut CustID dengan
nilai adalah 1
parent/child
<xsl:template
match="Customer/F
irstName">
Digunakan untuk melakukan operasi
tertentu pada elemen FirstName yang
yang memiliki elemen Customer
sebagai parent
ancestor//child
<xsl:template
match="CustomerD
etails//Address">
Digunakan untuk melakukan operasi
tertentu pada elemen Address yang
yang memiliki elemen CustomerDetails
sebagai ancestor
25. Monday, March 19, 2018 Riza Muhammad Nurman 25
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"]>
27. Monday, March 19, 2018 Riza Muhammad Nurman 27
Flowchart
Pemrosesan
Template
28. Monday, March 19, 2018 Riza Muhammad Nurman 28
Menggunakan Conditional Formatting
• Conditional formatting adalah istilah yang digunakan untuk
melakukan pemformatan data berdasarkan kondisi tertentu
– Elemen if
– Elemen choose
29. Monday, March 19, 2018 Riza Muhammad Nurman 29
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
30. Monday, March 19, 2018 Riza Muhammad Nurman 30
Elemen if
• Sintax:
• Contoh:
<xsl:if test=”condition”>
[perintah]
</xsl:if>
<xsl:if test=”Price[. > 100]”>
<xsl:value-of select=”ProductName”/>
</xsl:if>
34. Monday, March 19, 2018 Riza Muhammad Nurman 34
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.
35. Monday, March 19, 2018 Riza Muhammad Nurman 35
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>
37. Monday, March 19, 2018 Riza Muhammad Nurman 37
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
38. Monday, March 19, 2018 Riza Muhammad Nurman 38
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
39. Monday, March 19, 2018 Riza Muhammad Nurman 39
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
40. Monday, March 19, 2018 Riza Muhammad Nurman 40
Fungsi Node-Set
Fungsi Deskripsi Contoh
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')
41. Monday, March 19, 2018 Riza Muhammad Nurman 41
Fungsi Boolean
Fungsi Deskripsi Contoh
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)
42. Monday, March 19, 2018 Riza Muhammad Nurman 42
Fungsi Numeric
Fungsi Deskripsi Contoh
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