MODUL 2

PENGENALAN DASAR PEMROGRAMAN XML

1. TUJUAN
Mahasiswa mampu dan menguasai pemrograman XML sebagai dasar untuk
diterapkan pada aplikasi interface mikrokontroler AVR dengan perangkat
berbasis Android OS.
2. ALAT DAN BAHAN

Komputer (PC/Notebook)

Software editor teks (Notepad, Wordpad, Dreamweaver)

Browser internet (Mozilla firefox/Internet Explorer)

3. DASAR TEORI
3.1 Sejarah XML
Pengembangan XML dimulai pada tahun 1996 dan menjadi standar

W3C sejak Februari 1998. Teknologi ini bukan merupakan barang baru.

Sebelum XML sudah ada apa yang dinamakan SGML, yang dikembangkan

pada awal tahun 80-an, menjadi standar ISO sejak 1986, dan digunakan

secara luas untuk berbagai proyek dokumentasi berskala besar.

Pengembangan HTML dimulai pada tahun 1990. Desainer XML

mengambil bagian terbaik dari SGML, dan didukung pengalaman dengan

HTML, menghasilkan sesuatu yang tidak kalah hebat dibandingkan SGML,

namun jauh lebih umum dan lebih sederhana untuk digunakan.

Sebagai tambahan, SGML lebih banyak digunakan untuk dokumentasi teknis

dan jarang digunakan untuk data jenis lain, sementara XML sebaliknya.
3.2 Pengertian
- XML singkatan dari eXtensible Markup Language

- XML merupakan markup language seperti HTML

- XML didesain untuk mendeskripsikan/menggambarkan data

- Tag XML belum ditentukan sebelumnya, Kamu harus menentukan sendiri

tagnya.

- XML dengan DTD atau XML schema harus deskriptif

- XML direkomendasikan oleh W3C

3.3 Perbandingan HTML dengan XML

XML didesain untuk mengolah dan mengatur data. Namun bukan

untuk menggantikan HTML, karena keduanya mempunyai tujuan yang

berbeda.

XML untuk menggambarkan data dan memfokuskan data apa itu,

sedangkan HTML untuk menampilkan data dan bagaimana tampilannya.

Dengan kata lain, HTML untuk menampilkan informasi, sedang XML untuk

menggambarkan sebuah informasi.

Contoh : Catatan dari Eva untuk Adam dalam XML.

Penjelasan:
XML tidak melakukan apa-apa, hanya murni informasi yang

dimasukkan ke dalam tag XML. Harus ada aplikasi untuk mengirim,

menerima atau menampilkannya.

Tag dalam HTML sudah ditentukan seperti h1, td, table, dll.

Pengguna HTML hanya bisa menggunakan tag-tag yang sudah ditentukan

itu. Sedang dalam XML, pengguna bebas menentukan tag-tagnya sendiri

untuk menggambarkan data, jadi tidak ada tag standar dalam XML.

Dalam perkembangan Web masa depan, XML akan digunakan untuk

menggambarkan data dimana HTML digunakan untuk memformat dan
menampilkan data itu.

3.4 Basic XML

a. Sintaks XML
Contoh sintaks XML:

Keterangan:
<note> sebagai root, 4 baris dibawahnya (to, from, heading,

body) merupakan elemen anak. Semua baris perintah XML harus

mempunyai tag pembuka dan penutup. XML itu case sensitive.

XML harus mempunyai elemen root.

Elemen XML dapat mempunyai atribut.

Atribut dalam XML harus diberi tanda petik ( ).

b. Elemen XML

- nama elemen dapat berupa kata, angka atau karakter lainnya

- nama elemen tidak boleh diawali dengan karakter khusus

- nama elemen tidak boleh diawali dengan kata xml (Xml, XML,

atau lainnya)

- nama elemen tidak boleh mengandung spasi

c. Atribut XML

Elemen XML dapat mempunyai atribut, seperti HTML.

Contoh:

Dalam html, ingatkah anda dengan <img src= buku.jpg >

Src adalah atribut yang ditambahkan dalam elemen img.

Atribut selalu menyediakan informasi, tetapi atribut bukan

merupakan bagian dari data.

Dalam XML dapat ditulis menjadi:

<file type= jpg >buku.jpg</file>

Keterangan:
file type= jpg bukan merupakan data, tetapi informasi
tersebut

sangat

penting

bagi

software

yang

akan

memanipulasi elemen file tersebut. Penulisan atribut dapat

menggunakan tanda petik satu( ) atau dapat juga dengan

tanda petik dua( ). Misal : type=jpg dapat ditulis menjadi

type=jpg.

>> ELEMEN vs ATRIBUT

- Data dapat disimpan dalam elemen anak
- Data dapat juga disimpan dalam atribut

Contoh:

i. sintaks XML dengan elemen

ii. sintaks XML dengan atribut

Beberapa masalah yang terjadi dalam penggunaan atribut:

-

atribut tidak dapat memuat banyak nilai (elemen anak

dapat melakukannya)

atribut tidak mudah dipecah/dijabarkan (untuk

penggunaan kedepannya)

atribut tidak dapat mendeskripsikan struktur (elemen

anak dapat melakukannya)

nilai atribut tidak mudah dites dalam DTD (Document

Type Definition) yang digunakan untuk mendefinisikan

elemen yang diperbolehkan dalam dokumen XML

Aturan dalam penulisan atribut:

Biasanya I menandakan ID dalam elemen. Referensi ID ini dapat

digunakan untuk mengakses elemen XML yang caranya sama

dengan NAME atau ID dalam atribut HTML.
Berikut adalah contoh penggunaan ID.

d. Validasi XML
XML dengan penulisan sintaks yang benar merupakan format XML
yang bagus, XML dilakukan validasi dengan DTD agar XML lebih
valid.

i. Format dokumen XML yang baik

mempunyai root elemen
mempunyai tag penutup

case sensitive membedakan huruf besar dan huruf kecil

 sintaks bersarang harus teratur

nilai atribut selalu berada dalam tanda petik

ii. Format dokumen valid DTD

Silahkan cari tutorial DTD!

3.5 Browser
Berikut adalah browser yang telah mendukung XML:

Mozilla Firefox

Mulai Versi 1.0.2, Firefox telah mendukung XML dan XLST (dan CSS).
Mozilla

Mozilla ter-include Expat untuk parsing XML dan telah mendukung

untuk menampilkan XML + CSS. Mozilla juga mendukung beberapa

Namespace.

Netscape
Mulai Versi 8, Netscape menggunakan engine Mozilla dan tentu saja

telah mendukung XML / XLST seperti Mozilla.

Opera

Mulai Versi 9, Opera telah mendukung XML dan XLST (dan CSS).

Versi 8 hanya mendukung XML + CSS.

Internet Explorer

Mulai Versi 6, telah mendukung XML, Namespace, CSS, XLST dan

XPath.

Catatan: Versi 5 sebenarnya telah mendukung XML, tapi bagian XSL

tidak sesuai dengan standar W3C XSL Recommendation.

3.6 View
Raw XML file dapat dilihat dengan Mozilla, Firefox, Opera, Internet

Explorer dan Netscape 6+. Bagaimanapun, untuk membuat dokumen XML

dapat

ditampilkan

sebagai

halaman

ditambahkan informasi untuk tampilannya.

*Cara melihat file XML:

web

yang

cantik,

sebaiknya

1. Firefox dan Internet Explorer

Buka file XML dengan meng-klik linknya. Dokumen XML akan ditampilkan

beserta kode warna root dan elemen anak. Tanda plus (+) dan minus (-)
disebelah kiri elemen dapat diklik untuk membuka dan menutup struktur

elemen. Untuk melihat kode raw XML tanpa tanda (+) dan (-), pilih menu
View Page Source atau View Source .
2. Netscape 6

Buka file XML, klik kanan file dan pilih View Page Source . Dokumen akan
ditampilkan beserta kode warna root dan elemen anak.

3. Opera 7 & 8

Opera 7: buka file XML, klik kanan dan pilih Frame atau View Source .
Dokumen XML akan ditampilkan sebagai plain teks. Opera 8: buka file XML,

klik kanan dan pilih Source . Dokumen XML akan ditampilkan sebagai plain

teks.

*Contoh tampilan dalam Mozilla Firefox

i. tanda (+) disebelah kiri note (sebagai root).

ii. tanda (-) ketika diekspand

iii. jika file XML yang kita buat ternyata salah/error

3.7 XML dengan CSS

Dengan CSS kamu dapat mempercantik tampilan web dalam suatu dokumen
XML. Sangat

dimungkinkan menggunakan CSS untuk format dokumen XML.

Berikut contohnya:
1. file XML

2. file CSS

3. hasil tampilan

3.8 XML dengan XSL

XSL = eXtensible Stylesheet Language.

XSL jauh lebih unggul dibanding CSS. XSL diubah XML menjadi HTML sebelum
ditampilkan browser.

Contoh penggunaan XSL untuk XML

1. file XML

2. file XSL

3. Hasil tampilan

4. LATIHAN
Kerjakan contoh program diatas dengan menggunakan tools yang ada dan catat
hasilnya untuk dimasukkan dalam laporan praktikum.

5. TUGAS

Buat program seperti tugas pada modul 1 (Dasar HTML) yang berisi biodata
mahasiswa dengan mrnggunakan format XML seperti contoh program diatas.
Analisa dan catat hasilnya untuk laporan praktikum.