Bab ini mengenalkan DOM (Document Object Model) dan penggunaannya dalam program untuk mengakses dan memanipulasi dokumen XML. - 5. Pemrograman XML- DOM

  11 DOCUMENT OBJECT MODEL

Overview

  Bab ini mengenalkan DOM (Document Object Model) dan penggunaannya dalam program untuk mengakses dan memanipulasi dokumen XML.

Tujuan

  1. mengenal DOM XML 2. menggunakan objek-objek DOM XML untuk mengakses berbagai bagian dokumen XML.

  11.1 Pengantar

  Document Object Model (DOM) mendefinisikan struktur lojik dokumen XML, cara mengakses dan memanipulasinya. Ia menyediakan Application Programming Interface (API) untuk dokumen XML dan HTML. Nama DOM dipilih karena ia dirancang dekat dengan paradigma object- oriented: dokumen XML tersusun atas object-object. Setiap object memiliki property dan method pengaksesnya. Menggunakan DOM, pemrogram dapat membuat dokumen XML, menelusuri strukturnya, menambah, memodifikasi, atau menghapus elemen-elemen dan isinya.

  Object-object dan method-method yang disediakan oleh DOM dapat digunakan dalam beragam bahasa pemrograman, semisal Java, C++, dan Visual Basic. Object- object ini dapat juga digunakan dalam bahasa script, seperti VBScript dan JavaScript.

  Untuk dapat menggunakan fitur-fitur XML, DOM menggunakan parser DOM-enabled, misalnya MSXML. Parser DOMenabled membaca dokumen XML, menelusurinya, meyakinkan bahwa ia valid. Kemudian, ia membuat representasi memori dalam struktur data tree. Struktur tree terbuat dari node-node. Anda dapat menggunakan object-object DOM yang disediakan parser DOM-enabled untuk memanipulasi node-node ini.

  11.2 Implementasi dalam MSXML Parser

  Implementasi DOM dalam Microsoft

  XML Parser (MSXML) menyediakan interface dasar dan lanjut. Interface dasar DOMDocument dan

  IXMLDOMNode, dipakai untuk me-load atau membuat dokumen. Dengan interface tambahan, dapat dilakukan operasi pelacakan error.

  MSXML parser membuat struktur tree DOM. Struktur tree ini dapat digunakan beragam aplikasi untuk mengakses dan memanipulasi dokumen XML. Gambar 10.1 menunjukkan bagaimana struktur tree DOM digunakan aplikasi untuk mengakses informasi dalam dokumen XML. Hal yang sama berlaku untuk parser berbasis Java dan lainnya.

  Bangunan dasar struktur tree DOM adalah node. Node adalah wadah umum yang menyimpan informasi tentang elemen, atribut, isi, komentar, dan instruksi pemrosesan dokumen XML. Dokumen XML dapat dipandang sebagai node tunggal yang berisi seluruh node lain.

  _{Dokumen Parser O D M T r e e}

MSXML Library

_{XML Root Child Child text text} Aplikasi

Gambar 10.1 DOM, Dokumen XML dan Application

  Perhatikan potongan program berikut: <PRODUCTDETAIL

  S> <PRODUCT>

  <PRODID>P001</PRODID> <PRODNAME> Beras </PRODNAME> <PROD>5000</SALARY>

  </ PRODUCT>

  <PRODUCT> <PRODID>P002</PRODID> <PRODNAME> Jagung </PRODNAME> <PROD>5000</SALARY>

  </ PRODUCT>

  </ PRODUCTDETAILS>

  Gambar berikut menunjukkan struktur tree-nya:

  PRODUCTDETAILS _{P001 Beras 5000 P002 Jagung 4000}

_{PRODID PRODNAME PRODPRICE PRODID PRODNAME PRODPRICE}

PRODUCT PRODUCT

• Element : untuk mengakses elemen - Node : untuk mengakses node tree.
• NodeList : untuk mengakses beberapa node tree.
• Attr : untuk mengakses node attribute di tree.
• Text : untuk mengakses text dalam element.
• CDataSection : untuk mengakses node CData dalam node tree.
• ParseError : untuk memvalidasi dokumen XML berdasarkan XSD atau DTD.

  Method Contoh Penjelasan createElemen t(e lementname) docobj.createElement(“ PRODUCT”)

  Membuat element baru <PRODUCT>…</PROD UCT> createAttribut e( attributenam e) docobj.createAttribute(“P

  RODID”) Membuat atribut <PRODUCT PRODID=…>… <PROD UCT> createComme n t(text) docobj.createComment(“ This is an XML document”)

  Membuat komentar createTextNo docobj.createTextNod Membuat text untuk

  Setiap node tree memiliki nama, tipe dan nilai. Contoh node PRODID, namanya PRODID, tipenya element, nilainya P001.

  Object-object utama XML DOM untuk mengakses tree adalah: - Document : untuk mengakses seluruh dokumen XML.

  Method dan contoh pemakainnya ditunjukkan dalam tabel berikut. Method-method objek “Document” ce-URI) docobj.createNode(“ele m ent”, “prod:PRODUCT”,

  e.com/Products”)

  docobj.createNode(1, “PRODUCT”, “”) getElementsB docobj.getElementsB Mengambil semua yT yTag node agName(elem Name(“PRICE”) dengan nama tag en PRICE load(XMLdocu docobj.load(“http://www. Mengambil dokumen xml ment) ecomatcybershoppe.c om/ products.xml”) docobj.load(“c:\ loadXML(strin docobj.loadXML(“<?xmlv Mengambil dokumen products.

  g) ersion=‟1.0‟>

  XML dari string <PRODUCTS> <PRODUCT> <NAME> Barbie Doll </NAME> </ PRODUCT> </PRODUCTS>”) transformNod docobj.transformNode(“ Mengatur format e( products.xsl”) dokumen XML style

  This method takes a menurut style sheet object) style sheet object sheet as its parameter and processes the node by applying the corresponding style sheet template on the

  XML document and returns the result of appendChild( docobj.appendChild(r transformation. Membuat child baru chi oot) dari ld node) suatu node save(destinati on ) docobj.save(“http://www. ecomatcybershoppe.c om/ product.xml”)

  Menyimpan dokumen

  Membuat atribut di namespace getElementsB yT agNameNS()

  Elemen root. firstChild var firstelem=docobj.firs tChil d

  Daftar node anak dari suatu parent node. documentEle me nt var root=docobj.docum entEl ement

  XML childNodes var firstelem = docobj.childNodes.ite m(1 )

  Objek Document memiliki property, ditunjukkan dalam tabel berikut. Property Contoh Penjelasan Async docobj.async = true Jika true, script jalan terus meskipun dokumen

  Mengambil semua elemen dengan tag yang sama dari namespace

  Docobj.getElementsB yTag Na3. org/1998/Math/MathML‟ ,

  Membuat element di namespace createAttribut e NS(namesp ace URI, qualifiedNa docobj.createAttribut eNS .com/attribute‟, „NewA‟)

  XML yang ada di RAM ke disk createDocum en tFragment() docobj.createDocume ntF ragment()

  . com/element‟,

  

  NS(„

  Membuat objek EntityReference createElemen tN S(namespac eUR I, qualifiednam docobj.createElement

  Membuat ProcessingInstruction createEntityR ef erence(refere nc docobj.createEntityRe fere nce(“newref”)

  XML createProcess in gInstruction( tar get, text) docobj.createProcess ingIn struction(“XML”, “version=1.0”)

  Membuat fragment (bagian) dokumen

  Anak pertama lastChild var firstelem=docobj.last child

  Anak terakhir parseError var error = docobj.parseError

  Memberikan object ParseError yang berisi status load dokumen XML readyState var stateinfo = docobj.readyS tate if (stateinfo == 4) //Document loading //completed { : [perform someaction] : }

  Status load mungkin : 1:loading; 2:loaded; 3:interactive; 4:completed. readyState melihat statusnya ini xml document.write

  (docobj.xml) Menulis isi xml ke browser validateOnPar se docobj.validateOnPar se= true

  Jika true, berarti parser harus memvalidasi

  Biasanya mengakses dokumen XML dengan method dan property object Dokumen sudah cukup. Oleh karena itu, untuk object-object berikutnya, penjelasan tidak dilakukan secara rinci.

  Object Element menyatakan seluruh node element dalam dokumen. Atribut element dipandang sebagai property, bukan element child. Berikut adalah method-method yang disediakan di object ini.

• getAttribute(attributeName)
• getAttributeNode(attributeName)
• getElementsByTagName(tagName)
• normalize()

• removeAttributeNode(attributeNode)
• setAttribute(attributeName, attributeValue)
• setAttributeNode(attributeNodeName)
• getAttributeNS(namespaceURI, localName)
• setAttributeNS(namespaceURI, qualifiedname,value)
• removeAttributeNS(namespaceURI, localName)
• getAttributeNodeNS(namespaceURI, localName)
• setAttributeNodeNS(namespaceURI, attribute)
• getElementsByTagNameNS(namespaceURI,localName )

  11.3.3 Node

  Object node menyatakan suatu node tree. Boleh jadi berupa elemen yang berisi elemen anak. Objek node memiliki method berikut :

• appendChild(newChild)
• insertBefore(newNode, refNode)
• removeChild(nodeName)
• replaceChild(newNode, oldNode)
• hasChildNodes()
• cloneNode(Boolean) Objek node juga memiliki property berikut:
• nodeName
• nodeType
• nodeValue
• childNodes
• firstChild
• lastChild
• text
• xml

  11.3.4 NodeList Objek NodeList menyediakan daftar node yang ada di tree.

  Dengan node list, programmer dapat mengakses node manapun yang dikehendaki. Objek NodeList memiliki method

• item(Number)
• nextNode() Objek node memiliki property “length” untuk mengetahui berapa banyak node dalam daftar node.

Perhatikan kode JavaScript berikut:

  myelement=myxmlDoc.getElementsByTa gName("emp"); for(i=0; i< myelement.length; i++) alert(myelement.ite m(i).xml);

  Kode ini mengambil daftar node dengan nama “emp”, disimpan di variabel “myelement”. Looping for sepanjang “length” selanjutnya menelusuri node dan menampilkan isinya. Artinya : i++=I ditambah 1 sampe panjang elemen…

  11.3.5 Attr

  Objek Attr menyatakan “attribute” suatu objek Element. Objek ini mewarisi property dan method objek Node. Hanya, oleh DOM ia tidak dipandang sebagai node anak dari suatu element, tetapi sebagai property.

  11.3.6 Text

  Objek ini menyatakan text dalam node tree, memiliki method “splitText(number)”, untuk memisahkan text.

  11.3.7 CDataSection

  Objek ini menyatakan seksi CDATA dalam node tree. Node ini digunakan untuk mengabaikan bagian teks yang biasanya dikenali sebagai markup.

  11.3.8 ParseError

  Objek ini memberi informasi tentang error penelusuruan terkini. Objek ini memiliki atribut berikut:

• errorCode
• reason
• line
• linePos
• srcText

Perhatikan kode berikut:

  var prodxml = new

ActiveXObject("Msxml2.DOMDocument.4.0");

  prodxml.async = false; prodxml.load("product.xml"); if (prodxml.parseError.errorCode != 0) { alert("A parse error occurred."); } else { alert(prodxml.documentElement.xml); }

  Setelah diload, akan diperiksa apakah ada error. Jika “errorCode” bernilai 0 berarti tidak ada kesalahan dalam dokumen XML. Berikut adalah contoh kode product.xml dan JavaScript yang mengaksesnya.

  <?xml version="1.0"?> <productdetails> <produ ct>

  

<prodid>P001</

prodid>

<prodname>Beras</prodname> <price>5000</ price> </ product >

  <produ ct>

<prodid>P002</

prodid>

  <prodname>Jagung</prodname> <price>6000</ price> </ product >

  <productdetails>

  Kode Javascript berikut digunakan untuk menampilkan rincian setiap karyawan.

  <HTML> <HEAD>

  <SCRIPT LANGUAGE="JavaScript"> function Navigate() { //Create an instance of the DOMDocument object. var myxmldoc=new ActiveXObject("Msxml2.DOMDocument.4.0"); var i; myxmldoc.async=false; //Load the XML document. Specify the appropriate path. myxmldoc.load("product.xml");

//Check whether the process of loading is complete and that

//there are no errors in the XML document.

  if (myxmldoc.readyState == 4 && myxmldoc.parseError.errorCode==0) { //Store the reference to the root element of the XML //document in the variable “root” var root=myxmldoc.documentElement; //Traverse through the child nodes of the root element. for (i=0; i< root.childNodes.length; ++ i) {

  //Display the XML code for each child node. alert (root.childNodes.item(i).xml); }

  }

//If the XML document contains an error, display an error

// messag e. else {

alert("Failed to load the document. Check whether your

  XML document is well-formed"); } } </SCRIPT> </HEAD> <BODY onload="javascript:Navigate()"> </BODY> </HTML>

  Contoh lain akan diberikan di buku praktikum.

Rangkuman

  1. DOM adalah antarmuka pemrograman aplikasi yang mengijinkan aplikasi mengakses dokumen

  XML.

  2. Objek-objek DOM dipakai untuk mengakses dan memanipulasi dokumen XML.

  3. MSXML parser membuat struktur tree representasi dokumen XML.

  4. Node adalah wadah berisi informasi tentang elemen, atribut, dan isi dokumen XML.

  5. Objek DOM berikut digunakan untuk memanipulasi data dalam dokumen XML: Document , Element, Node, NodeList, Attr, Text, CDataSection, ParseError