SISTEM INFORMASI: PRAKTIKUM DOM (2)

Jika di bab sebelumnya dibahas cara memanfaatkan DOM untuk mengakses dokumen XML, bab ini akan membahas pemakaian DOM untuk menguji dokumen XML dengan skema DTD dan XSD, serta menampilkan dokumen XML dengan XSL

1 Validasi dokumen XML dengan DTD

Diketahui file product.xml sebagai berikut

<PRODNAME> Beras </PRODNAME>

</PRODUCT>

<PRODNAME> Jagung </PRODNAME>

</PRODUCT>

<PRODNAME>Kacang Tanah</PRODNAME>

</PRODUCT>

</PRODUCTDETAILS>

File DTD-nya, product.dtd sebagai berikut:

<!ELEMENT PRODUCTDETAILS (PRODUCT)+>

<!ELEMENT PRODUCT (PRODID, PRODNAME, PRICE)>

<!ELEMENT PRODID (#PCDATA)>

<!ELEMENT PRODNAME (#PCDATA)>

<!ELEMENT PRICE (#PCDATA)>

Bagaimana membuktikan product.xml sesuai dengan skema yang dibuat dalam product.dtd menggunakan DOM?

Objek DOMDocument dan ParseError dibutuhkan untuk memvalidasi dokumen XML terhadap DTD . Ketikkan kode berikut di Notepad dan simpan sebagai CekXMLDTD.htm.

<html>

<head> <title>Penguji XML DTD</title>

var transformedwindow;

function doValidate()

{

if ((document.frmTransform.TxtXMLFileName.value).length == 0)

{

alert("Maaf, File XML kosong");

return;

}

var xmldoc= new ActiveXObject("Msxml2.DOMDocument.4.0");

xmldoc.validateOnParse = true;

//dengan true berarti akan divalidasi dengan DTD atau XSD

xmldoc.load(document.frmTransform.TxtXMLFileName.value);

//load dokumen XML yang diminta masukan.

var error=xmldoc.parseError;

//barangkali ada error.

transformedwindow=window.open('Hasil.html', '_new', 'location=0, status=1, toolbar=0, menuBar=0, srollBars=0, directories=0,resizable=0,width=600,height=600');

if(error!="")

{

transformedwindow.document.write('<HTML><TITLE>Chek XML DTD</Title><BODY><P><b>Error Validating the document</b></p><br>');

//Buat pesan

transformedwindow.document.write('<b>Error URL:

</b><br>' + error.url + '<br>');

//Tulis Error URL.

transformedwindow.document.write('<b>Error Line:

</b><br>' + error.line + '<br>');

//Tulis nomor baris yang salah

transformedwindow.document.write('<b>Error Position:

</b><br>' + error.linepos + '<br>');

//Tulis posisi kesalahan

transformedwindow.document.write('<b>Error Reason:

</b><br>' + error.reason + '<br>');

//Tulis alasan kesalahan

transformedwindow.document.write('</BODY></HTML>');

}

else

{

transformedwindow.document.write('<HTML><TITLE>Chek XML DTD </Title><BODY><b>Tidak ada kesalahan </b><br>');

//Tulis pesan

transformedwindow.document.write('</BODY></HTML>');

}

function doReset()

{

/* document.frmTransform.TxtXMLFileName.value=""; if (!(typeof transformedwindow == "undefined")) transformedwindow.close();

}

</script>

</head>

<p align="center"><font face="Verdana, Arial, Helvetica, sans- serif"><b><u>Penguji XML DTD

</u></b></font></p>

<tr>

</td>

</td>

</font>

</td>

<a href="#" onClick="javascript:doReset()">Reset</a>

</font>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

Untuk menjalankan program di atas, bukalah CekXMLDTD.htm dalam browser web. Ketikkan product.xml di teks fieldnya dan klik button “Cek”. Jika ada error, rinciannya : nomor baris, alasan, dan posisinya ditampilkan. Jika benar, pesan “Tidak ada kesalahan” akan ditampilkan.

Berikut adalah contoh masukan “product.xml” untuk program di atas.

Dan hasilnya :

Validasi dokumen XML dengan XSD

Diketahui file product.xml seperti di atas. Dan file product.xsd sebagai berikut.

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">

<xsd:element name="PRODUCTDETAILS" type="prdata"/>

<xsd:complexType name="prdata" maxOccurs=”unbounded”>

<xsd:sequence>

<xsd:element name="PRODUCT" type="prdt"/>

</xsd:sequence>

</xsd:complexType>

<xsd:complexType name="prdt">

<xsd:sequence>

<xsd:element name="PRODID" type="xsd:string"/>

<xsd:element name="PRODNAME" type="xsd:string"/>

<xsd:element name="PRICE" type="xsd:positiveInteger"/>

</xsd:sequence>

</xsd:complexType>

</xsd:schema>

Bagaimana membuktikan product.xml sesuai dengan skema yang dibuat dalam product.xsd menggunakan DOM? Kode berikut CekXMLXSD.html dapat digunakan untuk memvalidasi XML berdasarkan XSD.

<html>

<head>

<title>Penguji XML XSD</title>

</head>

{

if((document.frmTransform.TxtXMLFileName.value).length == 0)

{

alert("Maaf, file XML kosong.");

return;

}

if((document.frmTransform.TxtXSDFileName.value).length ==0)

{

alert("Maaf, file XSD kosong");

return;

}

var xmlDoc = new

ActiveXObject("Msxml2.FreeThreadedDomDocument.4.0"); xmlDoc.async = false; xmlDoc.load(document.frmTransform.TxtXMLFileName.value); var namespace=xmlDoc.documentElement.namespaceURI;

xmlDoc.validateOnParse=true;

var xsdschemacache = new

ActiveXObject("Msxml2.XMLSchemaCache.4.0");

xsdschemacache.add(namespace,document.frmTransform.TxtXSDFil eName.value);

xmlDoc.schemas=xsdschemacache;

xmlDoc.load(document.frmTransform.TxtXMLFileName.value); var error=xmlDoc.parseError; transformedwindow=window.open('Hasil.html','_new','location=0,st

atus=1,toolbar=0,menuBar=0,scrollBars=0,directories=0,resizable=0,width=6

00,height=600');

if(error!="")

{

transformedwindow.document.write('<HTML><TITLE>Penguji Skema</Title><BODY><P><b>Kesalahan saat validasi dokumen</b></p><br>');

transformedwindow.document.write('<b>Error

URL:</b><br>' + error.url + '<br>');

transformedwindow.document.write('<b>Error

Line:</b><br>' + error.line + '<br>');

transformedwindow.document.write('<b>Error

Position:</b><br>' + error.linepos + '<br>');

transformedwindow.document.write('<b>Error

Reason:</b><br>' + error.reason + '<br>');

transformedwindow.document.write('</BODY></HTML>');

}

else

{

transformedwindow.document.write('<HTML><TITLE>Penguji

Skema</Title><BODY><b>Tidak ada kesalahan </b><br>');

transformedwindow.document.write('</BODY></HTML>');

}

function doReset()

{

document.frmTransform.TxtXSDFileName.value=""; document.frmTransform.TxtXMLFileName.value=""; if (!(typeof transformedwindow == "undefined"))

transformedwindow.close();

}

</script>

<p align="center"><font face="Verdana, Arial, Helvetica,

sans-serif"><b><u>Penguji XML - XSD </u></b></font></p>

<tr>

<td>

</td>

<td>

<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><a href="#" onclick="javascript:doValidate()">Check</a></font>

</td>

</tr>

<tr>

<td>

</td>

<td>

<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><a

href="#" onclick="javascript:doReset()">Reset</a></font>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</font></p>

</form>

</body>

</html>

Pastikan product.xml dan product.xsd berada di folder yang sama dengan file program ini. Berikut adalah contoh masukan product.xml dan product.xsd.

Dan hasilnya adalah pesan form “Tidak ada kesalahan”.

Menampilkan XML dengan XSL

Diketahui file productTable.xsl sebagai berikut:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="/">

<html>

<body>

<tr>

</tr>

<th>Product ID</th>

<th>Product Name</th>

<th>Price</th>

<xsl:for-each select="PRODUCTDETAILS/PRODUCT">

<tr>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Jika product.xml ditampilkan menggunakan productTable.xsl akan menghasilkan tampilan berikut.

Diketahui juga file productList.xsl sebagai berikut:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="PRODUCTDETAILS/PRODUCT">

</html>

</body>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

Jika product.xml ditampilkan menggunakan productList.xsl akan menghasilkan tampilan berikut.

Bagaimana menampilkan product.xml dalam bentuk tabel atau list (dapat dipilih dari halaman HTML) melalui DOM? Kita buat dokumen HTML berisi dua frame, frame atas untuk menampilkan hasil, frame bawah untuk menampilkan pilihan.

File frameAtas.html digunakan untuk mengisi frame atas.

<html>

<head>

<title>Hasil XSL</title>

</head>

</body>

</html>

File frameBawah.html untuk menampilkan pilihan.

<html>

<head>

<title>Pilihan</title>

function displayTable()

{

document.VIEW.optList.checked=false;

document.VIEW.optReset.checked=false;

var xslt = new ActiveXObject("Msxml2.XSLTemplate.4.0");

var xslDoc = new

ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");

var xslProc; xslDoc.async = false; xslDoc.load("productTable.xsl"); xslt.stylesheet = xslDoc;

var xmlDoc = new

ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");

xmlDoc.async = false; xmlDoc.load("product.xml"); xslProc = xslt.createProcessor(); xslProc.input = xmlDoc; xslProc.transform();

//alert(xslProc.output);

parent.TOP.document.write(xslProc.output);

}

function displayList()

{

document.VIEW.optTable.checked=false;

document.VIEW.optReset.checked=false;

var xslt = new ActiveXObject("Msxml2.XSLTemplate.4.0");

var xslDoc = new ActiveXObject

("Msxml2.FreeThreadedDOMDocument.4.0");

var xslProc;

xslDoc.async = false; xslDoc.load("productList.xsl"); xslt.stylesheet = xslDoc;

var xmlDoc = new ActiveXObject

("Msxml2.FreeThreadedDOMDocument.4.0"); xmlDoc.async = false; xmlDoc.load("product.xml");

xslProc = xslt.createProcessor(); xslProc.input = xmlDoc; xslProc.transform();

parent.TOP.document.write(xslProc.output);

}

function displayReset()

{

parent.TOP.document.location="frameAtas.html"; document.VIEW.optList.checked=false; document.VIEW.optTable.checked=false;

}

</script>

</head>

<p>

Tampilan Tabel XML

Tampilan List XML

Reset

</p>

</form>

</body>

</html>

Fungsi displayTable() menampilkan XML dalam bentuk tabel, displayList() menampilkan XML dalam bentuk List, displayReset() mengosongkan frameAtas.

File Utama.html berikut digunakan untuk membuat halaman utama.

<html>

<head>

<title>Utama</title>

</head>

</frameset>

</html>

Jika dijalankan hasilnya adalah ada pilihan untuk menampilkan dalam bentuk

Tabel atau List di bawah.

Jika tampilan tabel dipilih, maka akan dihasilkan tampilan berikut.

Jika tampilan list dipilih, maka akan dihasilkan tampilan berikut.

SISTEM INFORMASI

Tuesday, 6 October 2015

PRAKTIKUM DOM (2)

No comments:

Post a Comment