MODUL
9
XML
(eXtensible
Markup Language)
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.
Seperti
halnya HTML, XML juga menggunakan elemen yan ditandai dengan tag pembuka
diawali dengan ‘<’ dan diakhiri dengan ‘>’, tag penutup di awali dengan ‘</’
diakhiri ‘>’.
Bagian-bagian
dari dokumen XML
·
Root
node
·
Elemen
node
·
Attribute
note
·
Text
node
·
Comment
node
·
Prosessing
Instruction node
·
Name
Space node
C. ALAT DAN BAHAN
1.
Laptop
2.
Sistem
Operasi Windows 7
3.
Notepad
4.
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>L200120077</NIM>
<Nama>Graficha Aryudhetika
K.</Nama>
<Kota>Solo</Kota>
</ID>
<ID>
<NIM>L200120066</NIM>
<Nama>Nurul
Ustia</Nama>
<Kota>Purwodadi</Kota>
</ID>
<ID>
<NIM>L200120063</NIM>
<Nama>Ulva Erida
N.R.</Nama>
<Kota>Blora</Kota>
</ID>
<ID>
<NIM>L200120068</NIM>
<Nama>Rere Anindia
S.</Nama>
<Kota>Boyolali</Kota>
</ID>
<ID>
<NIM>L200120066</NIM>
<Nama>Nur Habibah
Sari</Nama>
<Kota>Sragen</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
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
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 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>
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.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
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><td>");
}
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>Nama</th>
<th>Kota</th>
<?php
$dataxml=simplexml_load_file('data.xml');
$no=1;
forwach($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
E. TUGAS
Buatlah
kolaborasi bahasa XML, HTML, dan CSS yang menampilkan data.xml pada percobaan 1
dengan style CSS buatan anda ke dalam HTML. Tulisakan scrip dari file-file yang
dibutuhkan, dan lampirkan hasil print screen di laporan.
Script CSS
body
{
background:blue
}
h2
{font-family:high
tower text;
background-color:skyblue;
text-align:center
}
table
{background:white
}
.td
{
font-weight:bold;
}
.dashed
{
border-style:dashed;
border-color:pink;
}
Script HTML
<html>
<head>
<title>Tugas
Modul 9</title>
<link
rel='stylesheet' type='text/css' href='tugas09_1.css'>
</head>
<body>
<xml
ID='dsoData' SRC='data.xml'/>
<h2>Modul
9<h2>
<table
DATASRC='#dsoData' BORDER='1' CELLPADDING='5' ALIGN='center'>
<thead>
<th>NIM</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Konsentrasi</th>
<th>Alamat</th>
</thead>
<tr
align='center'>
<td
class='dashed' class='td'><span DATAFLD='NIM'></span></td>
<td
class='dashed' class='td'><span
DATAFLD='Nama'></span></td>
<td
class='dashed' class='td'><span
DATAFLD='Jurusan'></span></td>
<td
class='dashed' class='td'><span
DATAFLD='Konsentrasi'></span></td>
<td
class='dashed' class='td'><span
DATAFLD='Alamat'></span></td>
</tr>
</table>
</body>
</html>
