Menampilkan data XML
Diketahui
file
product.xml berikut
<PRODUCTDETAILS>
<PRODUCT>
<PRODID> P001
</PRODID>
<PRODNAME>
Beras </PRODNAME>
<PRICE> 5000 </PRICE>
</PRODUCT>
<PRODUCT>
<PRODID> P002
</PRODID>
<PRODNAME>
Jagung </PRODNAME>
<PRICE> 4000 </PRICE>
</PRODUCT>
<PRODUCT>
<PRODID> P003
</PRODID>
<PRODNAME>
Kedelai </PRODNAME>
<PRICE> 4500 </PRICE>
</PRODUCT>
</PRODUCTDETAILS>
Ditampilkan
dengan
Mozilla, product.xml akan
nampak sebagai
berikut:
Kode berikut dapat digunakan untuk menampilkan isi
file product.xml.
Ketik dan simpan
dengan
nama TampilProduk.html.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Navigate()
{
var xmldoc=new
ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.async=false;
xmldoc.load("product.xml");
if (xmldoc.readyState == 4 && xmldoc.parseError.errorCode==0)
{
}
else
{
}
}
alert(xmldoc.xml);
alert("Load XML belum berhasil. Periksa tag-tagnya.");
</SCRIPT>
</HEAD>
<BODY onload="javascript:Navigate()">
</BODY>
</HTML>
Perintah paling penting pada program di
atas adalah alert(xmldoc.xml).
Alert
adalah
perintah JavaScript untuk memberi
pesan, xmldoc.xml
berarti
mengambil property xml dari
dokumen DOM.
Variabel xmldoc digunakan
untuk menyimpan msxml
parser.
Yakinkan
file
product.xml ada dalam folder yang sama dengan file
TampilProduct.html.
Yakinkan
juga file msxml4.dll dan msxml4r.dll
ada di system32-nya Windows dan
telah
terdaftar di registry. (Jika belum
yakin, berikan perintah dari
command prompt : c:\regsvr32
%windir%\system32\msxml4.dll). Karena DOM parser ini milik Microsoft, dan
Mozilla belum dilengkapi dengan fitur ini, maka browser Web
yang dapat
digunakan adalah Internet Explorer.
Program di atas jika dipanggil dengan
Internet Explorer akan
menghasilkan
:
2
Insert Data
Bagaimana jika data berikut akan ditambahkan pada file product.xml?
<PRODUCT>
<PRODID> P004
</PRODID>
<PRODNAME>
Kacang tanah </PRODNAME>
<PRICE> 3500 </PRICE>
</PRODUCT>
Kode berikut dapat dicoba. Ketikkan dan simpan
dengan
nama
TambahProduk.html.
<HTML>
<HEAD>
<TITLE> Tambah
Product </TITLE>
<SCRIPT language="JavaScript">
function insertXMLData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var
error=xmldoc.parseError;
if(error!=""){
}
else
{
document.write("Error,
alasan
: "+error.reason);
return false;
var newelPRODUCT;
var newelPRODID;
var newelPRICE;
var x =
xmldoc.getElementsByTagName("PRODUCTDETAILS")[0];
newelPRODUCT=xmldoc.createElement("PRODUCT");
x.appendChild(newelPRODUCT);
objelementsPRODUCT=xmldoc.getElementsByTagName(" PRODUCT");
last=objelementsPRODUCT.length;
y=objelementsPRODUCT[last-1];
newelPRODID=xmldoc.createElement("PRODID");
y.appendChild(newelPRODID); y.lastChild.text = 'P004';
newelPRODNAME=xmldoc.createElement("PRODNAME")
;
y.appendChild(newelPRODNAME);
y.lastChild.text = 'Kacang tanah';
newelPRICE=xmldoc.createElement("PRICE");
y.appendChild(newelPRICE);
y.lastChild.text = '3500';
alert(xmldoc.xml);
//MENYIMPAN KE
FILE
var OutputXML = xmldoc.xml;
var mfObject, NewSampleFile;
mfObject = new
ActiveXObject("Scripting.FileSystemObject");
NewSampleFile
= mfObject.CreateTextFile("C:/Documents and Settings/Toshiba/My
Documents/1. POLTEK-TELKOMdanNTC/BUKUXML/2. BUKU- PRAKT-XML-EDO-Chptr7-12/Data Files For Faculty/Bab7/product.xml",
true);
NewSampleFile.write(OutputXML);
NewSampleFile.close();
}
}
</SCRIPT>
</HEAD>
<BODY onload="javascript:insertXMLData()">
</BODY>
</HTML>
</SCRIPT>
</HEAD>
<BODY onload="javascript:insertXMLData()">
</BODY>
</HTML>
Kode di atas jika dijalankan akan menampilkan product.xml
setelah ditambahkan data product baru. Objek ActiveXObject akan mengkonfirmasi apakah object akan dibuat. Ketikkan OK. File baru akan dibuat, dan jika ditampilkan
dengan
Mozilla, hasilnya adalah sebagai berikut:
Cara insert data tidak hanya seperti
program di
atas. Mungkin dibuat program
lain untuk maksud tersebut.
11.3 Pencarian Data
Jika ingin
ditampilkan produk dengan
kode masukan,
misalnya “P003”,
bagaimana mendapatkan
rincian datanya?
Kode berikut, CariProduk.html dapat digunakan
untuk
maksud tersebut.
<HTML>
<HEAD>
<TITLE> Cari
Product </TITLE>
<SCRIPT language="JavaScript">
function CariData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var error=xmldoc.parseError;
}
else
if(error!=""){
document.write("Error, alasan : "+error.reason);
return
false;
{
var prodid =
form1.prid.value;
var
objPRODID=xmldoc.getElementsByTagName("PRODID");
var
objPRODNAME=xmldoc.getElementsByTagName("PRODNAME");
var objPRICE=xmldoc.getElementsByTagName("PRICE");
for(ctr=0; ctr<objPRODID.length;ctr++){
if (objPRODID[ctr].text==prodid)
{
objPRODNAME[ctr].text;
}
}
form1.prname.value =
form1.price.value = objPRICE[ctr].text;
break;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
name="form1">
Kode Produk : <input type=text name="prid">
<input type=button
value="Cari!" onClick="javascript:CariData()">
<br>
Nama Produk :
<input type=text name="prname"><br>
Harga : <input type=text name="price">
</FORM>
</BODY>
</HTML>
Jika dijalankan, akan muncul form kosong,
dan
silahkan diisi
text
untuk Kode
Produk.
Jika button Cari! di-klik, maka akan
didapatkan
hasil berikut:
Update Data
Jika harga suatu produk berubah, misalnya
untuk “P004”, harganya berubah
dari
3500 menjadi 4000, bagaimana melakukannya?
Kode berikut, GantiHarga.html dapat digunakan
untuk
maksud tersebut.
<HTML>
<HEAD>
<TITLE> Ganti Harga </TITLE>
<SCRIPT language="JavaScript">
function CariData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var error=xmldoc.parseError;
if(error!=""){
document.write("Error, alasan : "+error.reason);
return false;
}
else
{
var prodid =
form1.prid.value;
var
objPRODID=xmldoc.getElementsByTagName("PRODID");
var
objPRODNAME=xmldoc.getElementsByTagName("PRODNAME");
var objPRICE=xmldoc.getElementsByTagName("PRICE");
for(ctr=0; ctr<objPRODID.length;ctr++)
{
if (objPRODID[ctr].text==prodid)
{
objPRODNAME[ctr].text;
form1.prname.value =
form1.price.value = objPRICE[ctr].text;
break;
}
}
}
}
function SimpanData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var error=xmldoc.parseError;
if(error!=""){
document.write("Error, alasan : "+error.reason);
return false;
}
else
{
var prodid =
form1.prid.value;
var
objPRODID=xmldoc.getElementsByTagName("PRODID");
var
objPRODNAME=xmldoc.getElementsByTagName("PRODNAME");
var objPRICE=xmldoc.getElementsByTagName("PRICE");
for(ctr=0; ctr<objPRODID.length;ctr++){
if (objPRODID[ctr].text==prodid)
{
form1.prname.value;
}
}
objPRODNAME[ctr].text=
objPRICE[ctr].text=form1.price.value;
break;
alert(xmldoc.xml);
//MENYIMPAN KE
FILE
var OutputXML = xmldoc.xml;
var mfObject, NewSampleFile;
mfObject =
new
ActiveXObject("Scripting.FileSystemObject");
NewSampleFile
= mfObject.CreateTextFile("C:/Documents and Settings/Toshiba/My
Documents/1. POLTEK-
TELKOMdanNTC/BUKUXML/2. BUKU-PRAKT-XML-EDO-Chptr7-12/Data Files For Faculty/Bab7/product.xml",
true);
NewSampleFile.write(OutputXML);
NewSampleFile.close();
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
name="form1">
Kode Produk : <input type=text name="prid">
<input type=button
value="Cari!" onClick="javascript:CariData()">
<br>
Nama Produk :
<input type=text name="prname"><br>
Harga : <input type=text name="price"><br>
<input type=button
value="Simpan"
onClick="javascript:SimpanData()">
</FORM>
</BODY>
</HTML>
Data yang akan diubah akan
dicari
dulu, hasilnya sebagai
berikut:
Setelah diganti
harganya, dan button simpan
di-clik, data akan diubah dan disimpan ke file produk.xml. Ditampilkan
hasil akhirnya dengan Mozilla sebagai berikut:
5
Delete Data
Jika data produk P003 akan dihapus, bagaimana melakukannya?
Kode berikut HapusProduk.html dapat digunakan untuk maksud ini.
<HTML>
<HEAD>
<TITLE> Hapus
Produk </TITLE>
<SCRIPT language="JavaScript">
function CariData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var error=xmldoc.parseError;
if(error!=""){
document.write("Error,
alasan
: "+error.reason);
return false;
}
else
{
var prodid =
form1.prid.value;
var
objPRODID=xmldoc.getElementsByTagName("PRODID");
var
objPRODNAME=xmldoc.getElementsByTagName("PRODNAME");
var objPRICE=xmldoc.getElementsByTagName("PRICE");
for(ctr=0; ctr<objPRODID.length;ctr++)
{
if (objPRODID[ctr].text==prodid)
{
objPRODNAME[ctr].text;
}
}
form1.prname.value =
form1.price.value = objPRICE[ctr].text;
break;
}
}
function HapusData()
{
var xmldoc=
new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("product.xml");
var error=xmldoc.parseError;
if(error!=""){
document.write("Error, alasan : "+error.reason);
return false;
}
else
{
var prodid =
form1.prid.value;
var
objRoot=xmldoc.getElementsByTagName("PRODUCTDETAILS")[0];
var
objPRODUCT=xmldoc.getElementsByTagName("PRODUCT");
var
objPRODID=xmldoc.getElementsByTagName("PRODID");
for(ctr=0;
ctr<objPRODID.length;ctr++){
if (objPRODID[ctr].text==prodid)
{
objRoot.removeChild(objRoot.childNodes.item(ctr));
break;
}
}
alert(xmldoc.xml);
//MENYIMPAN KE
FILE
var OutputXML = xmldoc.xml;
var
mfObject, NewSampleFile;
mfObject = new
ActiveXObject("Scripting.FileSystemObject");
NewSampleFile
= mfObject.CreateTextFile("C:/Documents and Settings/Toshiba/My
Documents/1. POLTEK-
TELKOMdanNTC/BUKUXML/2. BUKU-PRAKT-XML-EDO-Chptr7-12/Data Files For Faculty/Bab7/product.xml", true);
NewSampleFile.write(OutputXML);
NewSampleFile.close();
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
name="form1">
Kode Produk : <input type=text name="prid">
<input type=button
value="Cari" onClick="javascript:CariData()">
<br>
Nama Produk :
<input type=text name="prname"><br> Harga :
<input type=text name="price"><br>
<input type=button
value="Hapus" onClick="javascript:HapusData()">
</FORM>
</BODY>
</HTML>
Jika dijalankan, dan diberi masukan
P003 pada Kode Produk dan ditekan
tombol
Cari, akan
didapatkan
hasil berikut.
Dan
jika tombol Hapus ditekan, dokumen XML akan disimpan, dan jika
ditampilkan dengan Mozilla,
akan didapatkan
hasil berikut:
