LAPORAN PWL MODUL 9

PRAKTIKUM PEMROGRAMAN WEB  9

A.  TUJUAN

Mempelajari dan memahami bahasa XML sebagai bahasa pengolah data dalam web server.

B.   LANDASAN TEORI

XML merupakan sekumpulan aturan-aturan yang mendefinisikan suatu sintaks yang digunakan untuk menjelaskan dan mendiskripsikan teks atau data subuah dokumen melalui penggunaan tag. 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.

C.  ALAT DAN BAHAN

1.        Laptop

2.        Notepad

3.       Web browser

D.  LANGKAH-LANGKAH PRAKTIKUM

Percobaan 1 (File XML)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

<?xml version='1.0'?> <mahasiswa> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> </Mahasiswa> 

3.       Simpan file dengan nama data.xml

4.      Buka file dengan browser

5.       Klik tanda – atau + dalam browser lalu amati

6.      Printscreen hasilnya 

Percobaan 2 (XML dan CSS)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

ID (display:block ) NIM { color:red} Nama { color:blue; font-weight:bold; font-size:20pt; background-color:yellow} Kota{ font-family:verdana; font-style:italic}

3.       Simpan file dengan nama data.css (simpan dalam 1 folder dengan data.xml)

4.      Buka kembali file data.xml dengan notepad

5.       Tambahkan script berikut pada baris kedua diatas tag <Mahasiswa>

<?xml-stylesheet type=”text/css” href=”data.css”?>

6.      Simpan file tersebut

<?xml version='1.0'?> <?xml-stylesheet type="text/css" href="data2.css"?> <mahasiswa> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> </Mahasiswa>

7.       Buka file data.xml dengan browser

8.      Amati yang terjadi

9.       Printscreen hasilnya

Percobaan 3 (XML dan CSS bag.2)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

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 }

3.       Simpan file dengan nama data2.css (simpan dalam 1 folder dengan data.xml)

4.      Buka kembali file data.xml dengan notepad

5.       Tambahkan script berikut pada baris kedua diatas tag <Mahasiswa>

<?xml-stylesheet type=”text/css” href=”data2.css”?>

6.      Simpan file tersebut

<?xml version='1.0'?> <?xml-stylesheet type="text/css" href="data2.css"?> <mahasiswa> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> <id> <nim>L200120115</NIM> <nama>Wahyu Eko Safrudin</Nama> <kota>Solo</Kota> </ID> </Mahasiswa>

7.       Buka file data.xml dengan browser

8.      Amati yang terjadi

9.       Printscreen hasilnya

Percobaan 4 (XML dan HTML)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

<html> <head><title>Data Mahasiswa</title> </head> <body> <xml Id ='dsoData' SRC='data.xml/> <h2> Data Mahasiswa</h2> <table DATASCR='#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>

3.       Simpan file dengan nama data.html dan pastikan 1 folder dengan file data.xml

4.      Buka file data.html dengan browser

5.       Perhatikan hasilnya

6.      Printscreen hasilnya

Percobaan 5 (XML dan HTML bag.2)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

<html> <body> <script type="text/javascript"> if (window.XMLHt tpRequest) { xmlhttp=new XMLHt tpRequest(); } else { xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP"); } xmlhttp.open("GET","data.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>"); var x=xmlDoc.getElementsByTagName("ID"); document.write(" <tr><td>"); document.write("<b>NIM</b>"); document.write("</td><td>"); document.write("<b>Nama</b>"); document.write("</td><td>"); document.write("<b>Kota</b>"); document.write("</td></tr> "); for (i=0;i<x.length;i++) { document.write(" <tr><td>"); document.write(x[i].getElementsByTagName("NIM")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("Nama")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("Kota")[0].childNodes[0].nodeValue); document.write("</td></tr> "); } document.write("</table> "); </script> </body> </html>

3.       Simpan file dengan nama data2.html dan pastikan 1 folder dengan file data.xml

4.      Buka file data2.html dengan browser

5.       Perhatikan hasilnya

6.      Printscreen hasilnya

Percobaan 6 (XML dan PHP)

1.        Buka aplikasi Notepad

2.       Ketik scrip berikut

<html> <head> </head> <body> <table cellspacing='0' border="1"> <th>No</th> <th>Nim</th> <th>Name</th> <th>Kota</th> <?php $dataxml=simplexml_load_file('data.xml'); $no=1; foreach($dataxml->Person as $hasil){ echo " <tr>"; echo "<td>". $no. "</td>"; echo "<td>". $hasil->NIM."</td>"; echo "<td>". $hasil->Nama."</td>"; echo "<td>". $hasil->Kota."</td>"; echo"</tr> "; $no++; } ?> </table> </body> </html>

3.       Simpan file dengan nama xmlphp.php dan pastikan 1 folder dengan file data.xml

4.      Buka file xmlphp.php dengan browser

5.       Perhatikan hasilnya

6.      Printscreen hasilnya