PEMROGRAMAN CLIENT SERVER XML FUNDAMENTAL Dosen

PEMROGRAMAN CLIENT SERVER
XML FUNDAMENTAL
Dosen Pengampu : Fandy Setyo Utomo, S.Kom
Agenda Perkuliahan :
1.
Struktur XML
2.
Elemen, Tag, Data Karakter, dan Attribute
3.
CDATA Section
4.
Komentar
5.
Deklarasi XML
6.
XML Well Formed
7.
Mengaitkan dokumen XML dengan HTML
Tujuan Perkuliahan :
1.
Mahasiswa dapat membuat dokumen XML dan file XML Well Formed.
2.
Mahasiswa dapat membedakan antara Tag, Elemen, Attribute, CDATA, dan Entity.
3.
Mahasiswa dapat mengaitkan dokumen XML dengan halaman HTML.
1
Saat ini XML sangat populer. Format penyimpanan data XML membuat
platform ini independen dan bermacam aplikasi dapat memprosesnya dengan mudah.
XML kepanjangan dari Extensible Markup Language. Informasi dalam XML disimpan
di dalam Tag. Markup berarti sebuah bahasa yang dibangun dengan menggunakan Tag
untuk mengelilinginya atau Markup Text.
Pada HTML, tag didefinisikan dan diterjemahkan oleh browser. Pada XML
tidak ada struktur informasi yang disampaikan seperti pada HTML, sehingga untuk
menampilkan informasi diperlukan parser untuk menerjemahkan antara data dan tag.
A. Struktur Dokumen XML
Dokumen XML berisi informasi dan markup yang dibagi menjadi
beberapa bagian penting, yaitu :
1.
Element
Masing-masing dokumen XML berisi satu atau lebih elemen.
Elemen mengenalkan dan menandakan isi. Elemen mendominasi di dalam
dokumen XML. Beberapa orang menyebut elemen dengan nodes. Aturan
penulisan XML adalah case sensitive. Berikut adalah contoh sebuah element :
<tag>Some Text</tag>
Elemen di atas berisi 2 tag dan beberapa text. Elemen dapat berisi elemen yang
lain. Elemen juga dapat berisi “kosong” atau tidak berisi teks, seperti HTML,
XML dimulai dengan tag pembuka dan penutup. Sebuah elemen kosong
dituliskan dengan :
<tagname></tagname>
atau
<tagname />
Ketika elemen berisi elemen yang lain, elemen yang diisi disebut dengan
parent dan elemen di dalamnya disebut child.
<tagname>
<childTag>Some Text</ childTag>
</tagname>
2
Elemen pertama pada dokumen XML disebut root element atau document root
atau root node. Root element berisi elemen yang lain. Struktur dokumen XML
dapat dilihat pada ilustrasi berikut :
Sekarang, anda buat dokumen XML yang mencakup apa yang telah dibahas
sebelumnya. Tulis kode program di bawah ini dan simpan dengan nama
latihan2.xml pada folder masing-masing.
<orang>
<mahasiswa>Budi Susanto</mahasiswa>
<mahasiswa>
<nim>07.11.0123</nim>
<nama>Agung Laksono</nama>
</mahasiswa>
<mahasiswa></mahasiswa>
<mahasiswa>
<nim>08.12.0657</nim>
<nama>
<nama_depan>Ali</nama_depan>
<nama_belakang>Sadikin</nama_belakang>
</nama>
</mahasiswa>
<mahasiswa />
</orang>
3
2.
Attribute
Attribute berfungsi sebagai tambahan informasi tentang sebuah
elemen. Attribute disimpan dengan tag pembuka sebuah elemen setelah nama
elemen. Attribute menguraikan antara nama dan nilainya, dan setiap attribute
harus memiliki keduanya, yaitu nama dan nilai.
<tagname attributeName=”attributeValue”>
Some Text
</tagname>
Contoh :
<person born="1912-06-23" died="1954-06-07">
Alan Turing
</person>
3.
Text
Text menggambarkan isi informasi diantara tag pembuka dan tag
penutup elemen. Contohnya :
<fullname>
Alan Turing
</fullname>
4.
Entity References
Text diantara tag pembuka dan tag penutup dalam sebuah elemen
akan diproses dalam pengolahan XML, sehingga spesial karakter seperti “<”
dan “>” diganti dengan entity < dan >
Contoh :
<tutorial>
<judul>Menuliskan Elemen Sedrhana</judul>
<penulis>Hendra Kusmayadi</penulis>
<isi>
Berikut adalah contoh penulisan elemen sederhana
<mahasiswa>Joni Suraya</mahasiswa>
4
</isi>
</tutorial>
5.
Comment
Comment atau komentar dalam XML sama dengan comment pada
HTML, yaitu dimulai dengan karakter “<!--” dan diakhiri dengan “-->”
Sintaq :
<!-- Ini adalah bagian komentar, tidak akan dieksekusi -->
6.
CDATA Sections
Pada bahasan sebelumnya kita telah membahas apa yang namanya
entity references dimana jika kita akan menuliskan string “<” maka yang kita
tuliskan adalah entitasnya yaitu “&lt”. Namun, dengan menggunakan CDATA
kita dapat menuliskan string atau karakter tersebut tanpa harus menggunakan
entitas. Cara penulisannya adalah dengan diawali string “<![CDATA[” dan
diakhiri dengan “]]>”. Contoh :
<tutorial>
<judul>Menuliskan Elemen Sederhana</judul>
<penulis>Hendra Kusmayadi</ penulis >
<isi>
Berikut adalah contoh penulisan elemen sederhana
<![CDATA[
<mahasiswa>Joni Suraya</mahasiswa>
]]>
</isi>
</tutorial>
5
B. Deklarasi XML
Sebuah dokumen XML biasanya dimulai dari XML Declaration,
meskipun itu bersifat optional. Deklarasi XML berada pada baris pertama dokumen
XML. Contoh deklarasi XML adalah sebagai berikut :
<?xml version="1.0" encoding="ASCII" ?>
Deklarasi XML berisi versi XML. Dalam contoh di atas adalah versi 1.0.
C. XML Well Formed
Sebuah dokumen XML dikatakan Well Formed jika memenuhi kriteria
berikut ini :
1.
Dokumen berisi satu atau lebih elemen
2.
Dokumen berisi single root element, yang mana berisi beberapa elemen di
dalamnya
3.
Tiap elemen harus ditutup
4.
Tag pembuka dan tag penutup harus sama (case sensitive)
5.
Nilai attribute berada di dalam tanda petik (“....”)
D. Mengaitkan Dokumen XML dengan HTML (Case Study)
Untuk lebih memperdalam pengertian XML, kita akan membandingkan
dengan model data yang sering digunakan, yaitu model data relasional. Database
relasional direpresentasikan dalam bentuk tabel. Dalam sebuah tabel terdiri dari
kolom atau field dan record.
Diketahui dari database perpustakaan, terdapat tabel buku dengan
susunan informasi sebagai berikut :
ID
1
Judul
Pemrograman
Penerbit
Graha Ilmu
Basis Data
Penulis
Sri
ISBN
989-209-
Jum Hal
151
Kusumadewi 321-1
dengan C#.NET
2
Perancangan
Andi
Samuel
Game 3D
3
Teknik Instalasi
298-211-
200
443-2
Pohon
Mohammad
6
233-123-
97
dan
Cahaya
Imron
321-1
Graha Ilmu
Andi
988-555-
Sunyoto
212-3
Maintenance
Komputer
4
Algoritma dan
Struktur Data
322
dengan Java
Kemudian, informasi yang ada pada tabel buku tersebut, kita ubah ke dalam bentuk
XML. Ketikkan kode program berikut, kemudian simpan dengan nama buku.xml
<?xml version="1.0" encoding="utf-8"?>
<buku>
<idBuku id="1">
<judul>Pemrograman Basis Data dengan C#.NET</judul>
<penerbit>Graha Ilmu</penerbit>
<penulis>Sri Kusumadewi</penulis>
<isbn>989-209-321-1</isbn>
<jumlah_halaman>151</jumlah_halaman>
</idBuku>
<idBuku id="2">
<judul>Perancangan Game 3D</judul>
<penerbit>Andi</penerbit>
<penulis>Samuel</penulis>
<isbn>298-211-443-2</isbn>
<jumlah_halaman>200</jumlah_halaman>
</idBuku>
<idBuku id="3">
<judul>Teknik
Instalasi
dan
Komputer</judul>
<penerbit>Pohon Cahaya</penerbit>
<penulis>Mohammad Imron</penulis>
<isbn>233-123-321-1</isbn>
<jumlah_halaman>97</jumlah_halaman>
7
Maintenance
</idBuku>
<idBuku id="4">
<judul>Algoritma dan Struktur Data dengan Java</judul>
<penerbit>Graha Ilmu</penerbit>
<penulis>Andi Sunyoto</penulis>
<isbn>988-555-212-3</isbn>
<jumlah_halaman>322</jumlah_halaman>
</idBuku>
</buku>
Kemudian, dokumen buku.xml yang telah dibuat, akan kita hubungkan dengan
HTML, sehingga tampilan datanya lebih menarik. Ketikkan kode program berikut,
kemudian simpan dengan nama koleksi.html (simpan koleksi.html, satu folder
dengan buku.xml).
<!DOCTYPE
html
Transitional//EN"
PUBLIC
"-//W3C//DTD
XHTML
1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Koleksi Buku Perpustakaan</title>
</head>
<body>
<XML ID="dsoBuku" SRC="buku.xml"></XML>
<center>
<h2>KOLEKSI BUKU PERPUSTAKAAN</h2>
</center>
<br /><br />
<button onclick="tabelBuku.firstPage()">First</button>
<button onclick="tabelBuku.previousPage()">Prev</button>
8
<button onclick="tabelBuku.nextPage()">Next</button>
<button onclick="tabelBuku.lastPage()">Last</button>
<br />
<table id="tabelBuku" datapagesize="2" DATASRC="#dsoBuku"
border="1" cellpadding="2" cellspacing="2">
<thead>
<th>Judul</th>
<th>Penerbit</th>
<th>Penulis</th>
<th>ISBN</th>
<th>Jumlah Halaman</th>
</thead>
<tr>
<td><span DATAFLD="judul"></span></td>
<td><span DATAFLD="penerbit"></span></td>
<td><span DATAFLD="penulis"></span></td>
<td><span DATAFLD="isbn"></span></td>
<td><span DATAFLD="jumlah_halaman"></span></td>
</tr>
</table>
</body>
</html>
9
Hasilnya akan tampak di browser, seperti berikut ini :
10