PEMROGRAMAN CLIENT SERVER XML FUNDAMENTAL Dosen Pengampu : Fandy Setyo Utomo, S.Kom

(1)

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.

(2)

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 :

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

Ketika elemen berisi elemen yang lain, elemen yang diisi disebut dengan parent dan elemen di dalamnya disebut child.

(3)

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>

(4)

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>

(5)

</isi> </tutorial>

5. Comment

Comment atau komentar dalam XML sama dengan comment pada HTML, yaitu dimulai dengan karakter “”

Sintaq :

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 :

<judul>Menuliskan Elemen Sederhana</judul> <penulis>Hendra Kusmayadi</ penulis > <isi>

Berikut adalah contoh penulisan elemen sederhana <![CDATA[

<mahasiswa>Joni Suraya</mahasiswa> ]]>

</isi> </tutorial>

(6)

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 Judul Penerbit Penulis ISBN Jum Hal

1 Pemrograman Basis Data dengan C#.NET

Graha Ilmu Sri

Kusumadewi 989-209-321-1 151 2 Perancangan Game 3D Andi Samuel 298-211-443-2 200

(7)

dan Maintenance Komputer Cahaya Imron 321-1 4 Algoritma dan Struktur Data dengan Java

Graha Ilmu Andi Sunyoto

988-555-212-3

322

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>

<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 Maintenance Komputer</judul>

<penerbit>Pohon Cahaya</penerbit> <penulis>Mohammad Imron</penulis> <isbn>233-123-321-1</isbn>

(8)

</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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

</head>

<body>

<h2>KOLEKSI BUKU PERPUSTAKAAN</h2> </center>

(9)

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

(10)

Hasilnya akan tampak di browser, seperti berikut ini : Hasilnya akan tampak di browser, seperti berikut ini : Hasilnya akan tampak di browser, seperti berikut ini :