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 ‘>’.
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>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
</mahasiswa>
<mahasiswa>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
<id>
<nim>L200120113</nim>
<nama>Khoirun Nisa</nama>
<kota>Skh</kota>
</id>
</mahasiswa>
3.
Simpan
file dengan nama data.xml
4.
Buka
file dengan browser
5.
Klik
tanda – atau + dalam browser lalu amati
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
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;
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
