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

Transkripsi

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

3 Elemen pertama pada dokumen XML disebut root element atau document root atau root node. Root element berisi elemen yang lain. Strukturr 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> </nim> <nama>agung Laksono</nama> </mahasiswa> <mahasiswa></mahasiswa> <mahasiswa> <nim> </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=" " died=" "> 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>

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

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 Graha Ilmu Sri Basis Data dengan C#.NET Kusumadewi Perancangan Andi Samuel Game 3D Teknik Instalasi Pohon Mohammad

7 dan Maintenance Komputer 4 Algoritma dan Struktur Data dengan Java Cahaya Imron Graha Ilmu Andi Sunyoto 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> </isbn> <jumlah_halaman>151</jumlah_halaman> </idbuku> <idbuku id="2"> <judul>perancangan Game 3D</judul> <penerbit>andi</penerbit> <penulis>samuel</penulis> <isbn> </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> </isbn> <jumlah_halaman>97</jumlah_halaman>

8 </buku> </idbuku> <idbuku id="4"> <judul>algoritma dan Struktur Data dengan Java</judul> <penerbit>graha Ilmu</penerbit> <penulis>andi Sunyoto</penulis> <isbn> </isbn> <jumlah_halaman>322</jumlah_halaman> </idbuku> 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" " transitional.dtd"> <html xmlns=" <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>

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

10 Hasilnya akan tampak di browser, seperti berikut ini :