Becak Berilmu: modul 9

TUJUAN

Kita dapat memahami bahasa XML sebagai bahasa pengolah data dalam web server.

LANDASAN TEORI

XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet. XML didesain untuk mampu menyimpan data secara ringkas dan mudah diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya, XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar.

ALAT DAN BAHAN
PC / Komputer
Notepad ++
Browser Google Chrome / Mozila firefox
Internet
Modul Praktikum Pemrograman Web

LANGKAH PRAKTIKUM

PERCOBAAN 1 ( file XML )

Kita buka aplikas Notepad++, kemudian kita ketikkan script berikut :
<?xml version=’1.0’?> <mahasiswa> <id> <nim>L200120132</NIM> <nama>Duwi Pungki Lestari</Nama> <kota>Boyolali</Kota> </ID> <id> <nim>L200120131</NIM> <nama>Kurnia Ika Permatasari</Nama> <kota>Ngawi</Kota> </ID> <id> <nim>L200120130</NIM> <nama>Wahyu Eka Febriani</Nama> <kota>Sragen</Kota> </ID> <id> <nim>L200120140</NIM> <nama>Linda Marwati</Nama> <kota>Karanganyar</Kota> </ID> </Mahasiswa>
Kita simpan dengan nama data.xml
Kemudian kita buka dengan web browser.
Hasil percobaan sebagai berikut :

PERCOBAAN 2 ( XML dan CSS )

Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :

Kita simpan dengan nama data.css
Kita buka kembali file data.xml menggunakan notepad++ dan kita tambahkan script pada baris ke dua diatas tag <Mahasiswa> : <?xml-stylesheet type="text/css" href="data.css"?> f
Kita simpan file tersebut.
Kita buka file data.xml tersebut dengan web browser.
Hasil percobaan sebagai berikut :

PERCOBAAN 3 ( XML dan CSS bag.2 )

Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut :</li> </ol> ID { text-align:center; display:block; margin-top:20pt } NIM { display:block; color:red; } Nama { display:block; color:blue; font-weight:bold; font-size:20pt } Kota { display:block; font-family:verdana; font-style:italic }<textarea> <br /> <ol start="2"> <li>Kita simpan dengan <strong>data2.css</strong>.</li> <li>Kita buka kembali <strong>data.xml </strong>dan kita tambahkan script baris kedua di atas tag <mahasiswa> dan ganti script sebagai berikut dan disimpan dan buka file tersebut : <?xml-stylesheet type="text/css" href="data2.css"?></li> </ol> <ol start="4"> <li>Hasil percobaan sebagai berikut :</li> </ol> <img alt="" class="" height="300" src="https://bayu1aji.files.wordpress.com/2014/12/16bee-per3.jpg" width="534" /> <strong>PERCOBAAN 4 ( XML dan HTML )</strong> <br /> <ol> <li>Kita buka aplikasi notepad++, kemudian kita ketikkan script berikut : <textarea><html> <head><title>Data Mahasiswa</title></head> <body> <xml ID=’dsoData’ SRC=’data.xml’ /> <h2> Data Mahasiswa</h2> <table DATASRC=’#dsoData’ BORDER=’1′ CELLPADDING=’5′> <thead> <th>NIM</th> <th>Nama</th> <th>Kota</th> </thead> <tr ALIGN=’center’> <td><span DATAFLD=’NIM’></span></td> <td><span DATAFLD=’Nama’></span></td> <td><span DATAFLD=’Kota’></span></td> </tr> </table> </body> </html>