PEMROGRAMAN WEB. 11 XML, XHTML dan JSON. Andi WRE

Transkripsi

1 PEMROGRAMAN WEB 11 XML, XHTML dan JSON Andi WRE

2 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

3 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 "?> Semua dokumen XML harus memiliki satu element root Istilah pada XML : root, parent, child, sibling Setiap element dapat memiliki atribut untuk informasi tambahan

4 XML Tree Root : parent dari semua element Parent : element yang memiliki child Sibling : child pada level yang sama

5 [contoh] XML Root : <bookstore> <book> memiliki 4 child yaitu : <title>, <author>, <year>, <price>

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

7 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

8 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.

9 Well Form XML Dokumen XML yang memiliki sintaks XML yang benar (memenuhi aturan penamaan XML) Contoh :

10 Valid XML Well Formed XML yang dilengkapi dengan Document Type Definition (DTD) DTD : mendefinisikan struktur dokumen Contoh :

11 [contoh] Viewing XML Files

12 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"?>

13 [Contoh] XML with CSS

14 Displaying XML with XSLT extensible Stylesheet Language Transformations Mengubah dokumen XML menjadi HTML file.xml

15 Displaying XML with XSLT modul_xml.xsl

16 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

17 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

18 [Contoh] XML JavaScript

19 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

20 XHTML

21 Aturan XHTML Elements Must Be Properly Nested X O Empty Elements Must Also Be Closed Elements Must Be In Lower Case X O Attribute Names Must Be In Lower Case X O X O

22 Aturan XHTML Attribute Values Must Be Quoted X O Attribute Minimization Is Forbidden X O

23 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

24 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

25 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

26 XML vs JSON Here comes your footer Web Programmin

27 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

28 Latihan Ekspresi JSON Ekspresi apakah yang akan dihasilkan? Here comes your footer Web Programmin