PEMROGRAMAN WEB 11 – XML, XHTML dan JSON

PEMROGRAMAN WEB
11 – XML, XHTML dan JSON
Andi WRE
XML (eXtensible Markup Language)
Dirancang untuk membawa dan menyimpan data, bukan menampilkan data
Tidak ada standar untuk tag XML, nama tag ditentukan sendiri.
Dokumen XML disimpan dalam bentuk file teks dengan ekstensi .xml
Perbedaan XML dan HTML :
- XML bukan pengganti HTML
- HTML didesain untuk menampilkan data
- XML didesain untuk membawa data
Here comes–your
Web Programming
XMLfooter
dan XHTML
XML Tree
Dokumen XML membentuk struktur Tree
Dokumen XML diawali dengan deklarasi XML yang menspesifikasikan versi
XML yang digunakan.
<?xml version="1.0" encoding="ISO-8859-1"?>
Semua dokumen XML harus memiliki satu element root
Istilah pada XML : root, parent, child, sibling
Setiap element dapat memiliki atribut untuk informasi tambahan
Here comes–your
Web Programming
XMLfooter
dan XHTML
XML Tree
Root : parent dari semua element
Parent : element yang memiliki child
Sibling : child pada level yang sama
Here comes–your
Web Programming
XMLfooter
dan XHTML
[contoh] XML
Root : <bookstore>
<book> memiliki 4 child yaitu :
<title>, <author>, <year>,
<price>
Here comes–your
Web Programming
XMLfooter
dan XHTML
Ketentuan penulisan tag XML
1. Element XML terdiri dari 3 bagian : tag pembuka, konten, tag penutup
2. Case sensitive
3. Nama tag dibuat sendiri
4. Properly Nested, penulisan pasangan element harus sequential (berurut)
5. Harus memiliki 1 element root
6. Nilai suatu atribut harus diapit karakter kutip (" … ")
7. Karakter khusus
8. Komentar di XML < ! - - comment - - >
Here comes–your
Web Programming
XMLfooter
dan XHTML
Aturan penamaan XML
Dapat mengandung karakter dan angka
Tidak diawali dengan angka atau tanda baca (punctuation character)
Tidak diawali dengan kata "xml"
Tidak mengandung spasi
Gunakan "_" (underscore) untuk pemisah
Nama – nama seharusnya singkat dan simpel
Note : XML Validator http://www.w3schools.com/xml/xml_validator.asp
Here comes–your
Web Programming
XMLfooter
dan XHTML
Atribut XML
Jika memungkinkan konversikan semua atribut menjadi element
Contoh :
Permasalahan menggunakan atribut :
- Atribut tidak dapat menyimpan multiple value (element bisa)
- Atribut tidak memiliki struktur tree (element bisa)
- Atribut sulit di-upgrade (for future changes)
Note : Attributes are difficult to read and maintain. Use elements for data. Use attributes for information
that is not relevant to the data.
Here comes–your
Web Programming
XMLfooter
dan XHTML
Well Form XML
Dokumen XML yang memiliki sintaks XML yang benar (memenuhi aturan
penamaan XML)
Contoh :
Here comes–your
Web Programming
XMLfooter
dan XHTML
Valid XML
Well Formed XML yang dilengkapi dengan Document Type Definition (DTD)
DTD : mendefinisikan struktur dokumen
Contoh :
Here comes–your
Web Programming
XMLfooter
dan XHTML
[contoh] Viewing XML Files
Here comes–your
Web Programming
XMLfooter
dan XHTML
Displaying XML with CSS
XML dapat diformat dengan CSS
Property CSS yang digunakan sama dengan property CSS pada HTML
Mengaitkan file CSS dan dokumen XML
<?xml-stylesheet type="text/css" href=“file.css"?>
Here comes–your
Web Programming
XMLfooter
dan XHTML
[Contoh] XML with CSS
Here comes–your
Web Programming
XMLfooter
dan XHTML
Displaying XML with XSLT
eXtensible Stylesheet Language Transformations
Mengubah dokumen XML menjadi HTML
file.xml
Here comes–your
Web Programming
XMLfooter
dan XHTML
Displaying XML with XSLT
modul_xml.xsl
Here comes–your
Web Programming
XMLfooter
dan XHTML
XML JavaScript
XML Parser digunakan untuk mengkonversi dokumen XML ke XML DOM
object, sehingga dapat membaca file XML
DOM (Document Object Model) mengakses dan memanipulasi data
Syntax parses an XML document into an XML DOM object :
XMLHttpRequest object : bertukar data dengan server
Here comes–your
Web Programming
XMLfooter
dan XHTML
XML JavaScript
XML DOM membaca dokumen XML sebagai struktur tree
getElementsByTagName(“val") : Kumpulan elemen dengan nama tag val
dalam bentuk array.
childNodes : Akses ke elemen child. Dikembalikan dalam bentuk array.
parentNode : Akses ke elemen parent.
nextSibling : Akses ke elemen sebelah kanan.
nodeName : Akses nama tag.
nodeValue : Akses ke nilai konten
Here comes–your
Web Programming
XMLfooter
dan XHTML
[Contoh] XML JavaScript
Here comes–your
Web Programming
XMLfooter
dan XHTML
XHTML
eXtensible HyperText Markup Language
HTML yang memenuhi standar XML
Aturan yang harus dipenuhi :
- Properly nested
- Tag selalu berpasangan
- Lowercase
- Nilai atribut harus diapit karakter kutip
- Memiliki satu elemen root
Here comes–your
Web Programming
XMLfooter
dan XHTML
XHTML
Here comes–your
Web Programming
XMLfooter
dan XHTML
Aturan XHTML
Elements Must Be Properly Nested
X
O
Empty Elements Must Also Be Closed
X
O
Elements Must Be In Lower Case
X
O
Attribute Names Must Be In Lower Case
X
O
Here comes–your
Web Programming
XMLfooter
dan XHTML
Aturan XHTML
Attribute Values Must Be Quoted
X
O
Attribute Minimization Is Forbidden
X
O
Here comes–your
Web Programming
XMLfooter
dan XHTML
Keunggulan dan Kelemahan XML
Keunggulan XML:
-
Format terbuka yang standar
Dapat mereprentasikan hampir semua jenis data
Mudah dibaca (oleh manusia)
Banyak perangkat untuk mengolah XML di banyak bahasa pemrograman
Kelemahan XML:
- Struktur dengan sintaks yang besar membuat file menjadi besar
- Mungkin sulit untuk “memaksa” beberapa jenis data menjadi format XML yang
baik
- Kode Javascript untuk menavigasi XML DOM sangat besar dan tidak
menyenangkan
Here comes your footer
Web
Programmin
JSON – JavaScript Object Notation
JSON : format data yang melambangkan data sebagai sebuah set dari
JavaScript obyek
- Ditemukan oleh Douglas Crockford (dari Yahoo!)
- Didukung secara native di hampir semua browser modern
- Tidak sepopuler XML, tetapi semakin populer karena kesederhanaan dan
kemudahan pemakaian
Here comes your footer
Web
Programmin
Sintaks Obyek JavaScript
Di JavaScript, kita dapat membuat obyek baru tanpa membuat class
Sebuah obyek dapat memiliki methods (function properties) yang
direferensikan ke diri sendiri dengan this
Dapat mereferensikan beberapa fields dengan [“fieldName”] atau
.fieldName jika fieldName adalah identifier legal dari JavaScript
Nama – nama field dapat ditempatkan dalam quote (e.g weight)
Here comes your footer
Web
Programmin
XML vs JSON
Here comes your footer
Web
Programmin
Method dengan JSON
JSON.parse(string) : konversi string dari JSON data ke obyek
JavaScript yang ekuivalen dan mengembalikannya
JSON.stringify(object) : konversi sebuah obyek dari JSON data ke
sebuah string (lawan dari JSON.parse)
Here comes your footer
Web
Programmin
Latihan Ekspresi JSON
Ekspresi apakah yang akan dihasilkan?
Here comes your footer
Web
Programmin