1. Web-based Programming Lanjut Pertemuan 9 Matakuliah: M0492 / Web-based Programming Lanjut Tahun: 2007

2. Bina Nusantara Extensible Markup Language (XML) XML XML vs HTML Tag and elements Schemas and DTDs (Document Type Definition) Namespace Document Object Model (DOM)

3. Bina Nusantara eXtensible Markup Language (XML) Marking up the document is the process of identifying certain areas of a document as having a special meaning. A Markup language is just a set of rules that define how we add meaning to areas of a document.

4. Bina Nusantara XML vs HTML XML is designed to describe the structure of text, not how it should be displayed. HTML is designed to describe how the text should be displayed. Here we have some text This is a heading This bit is normal text This is some bold text And finally some more normal text as HTML as XML

5. Bina Nusantara XML vs HTML In XML, the tags can be anything you like, and it is only how we use them that give them a meaning. XML is fairly readable, so using tag names that describe the contents is common sense. 172-32-1176 White Johnson 213-46-8915 Green Marjorie

6. Bina Nusantara Tags and Elements If using XML to describe data, then it’s possible that some fields might contain no data. In this case the tags would be empty. Empty tags can be defined in: – With start and end tag – just an opening tag, but with a slash at the end Tags in XML are case sensitive, so the opening and closing tags must match in case. invalid XML tags:

7. Bina Nusantara Tags and Elements Root Tags This is defined as the outer tag, and an XML document can have only one root. 172-32-1176 White Johnson 213-46-8915 Green Marjorie 172-32-1176 White Johnson 213-46-8915 Green Marjorie valid tags Invalid tags

8. Bina Nusantara Tags and Elements The Tag – not a true XML tag, but a special tag indicating special processing instructions. – This should be the first line of each XML document, can be used to identify version and language information. – This tag is also the place where you can define the language used in the XML data. – This is important if your data contains character that aren’t part of the standard English ASCII character set.

9. Bina Nusantara Tags and Elements LanguageCharacter Set Unicode (8 bit)UTF-8 Latin 1 (Western Europe, Latin America)ISO-8859-1 Latin 2 (Central/Eastern Europe)ISO-8859-2 Latin 3 (SE Europe)ISO-8859-3 Latin 4 (Scandinavia/Baltic)ISO-8859-4 Latin/CyrillicISO-8859-5 Latin/ArabicISO-8859-6 Latin/GreekISO-8859-7 Latin/HebrewISO-8859-8 Latin/TurkishISO-8859-9 Latin/Lappish/Nordic/EskimoISO-8859-10 JapaneseEUC-JP or Shift_JIS

10. Bina Nusantara Tags and Elements Attribute XML attribute must be enclosed in quotes. Special Character Special set of character cannot be used in normal XML strings. BOOK ISBN=“1-861002-61-0”>Professional Active Server Pages 3.0 CharacterMust be replaced by & & < < > > “ " ‘ &apos;

11. Bina Nusantara Schemas and DTDs Schema and DTDs are the flip side of the same coin. Both specify which elements are allowed in a document, and can turn a well-formed XML document into a valid XML document. DTD is a text file that defines the structure of an XML document. But DTD isn’t itself XML – it has a completely separate syntax. Schema is the structure that defines DTS should be XML too.

12. Bina Nusantara Schemas and DTDs This one is for the authors XML document, as generated from the pubs database. The + sign says ‘one or more’. Each AUTHOR element is made up from nine other elements. Each of this sub- elements contains character data (CDATA)

13. Bina Nusantara Schemas and DTDs Two real flaws with DTDs: – they aren’t XML – You cannot specify the data types – such as integer, date, and so on – for each element. CDATA simply means that an element contains just character data, and doesn’t identify the actual type of the element’s contents.

14. Bina Nusantara Schemas and DTDs If we convert the DTD into a schema it would be something like:

15. Bina Nusantara Schemas and DTDs With the addition of data types we’d get: This schema now details not only the allowable elements, but also their data types.

16. Bina Nusantara Namespaces One problem with XML is that you can give an element almost any name you want. – There’s quite a good chance that you’ll pick the same name as someone else – Or even use the same name to mean different things in different XML documents. Yes This is taken from the authors table in pubs, and indicates the author is a contracted author. F:/contacts/1999.doc This contract element identifies the document that contains the contract This isn’t a problem while these documents stay separated. But if you combine the two documents, use the namespace to identify to which document the contract element belongs to.

17. Bina Nusantara Namespaces Namespaces are added to XML document by defining the xmlns (XML Name Space) attribute in the root tag, which requires a Uniform Resource Identifier (URI). URI is simply a name that can uniquely identify the namespace. <Authors xmlns:pubs=“http://wrox.co.uk/ms/PubsDB” xmlns:wrox=“http://wrox.co.uk/authors”> 172-32-1176 White Johnson Yes F:/contacts/Johnson1999.doc

18. Bina Nusantara Document Object Model (DOM) The Document Object Model is an API for HTML and XML documents, and the way they can be accessed. DOM defines a standard way in which we can access and manipulate the XML structure. 172-32-1176 White Johnson 213-46-8915 Green Marjorie The XML documents are hierarchical by nature – always have a top-level, or root element, and then child elements.

19. Bina Nusantara Document Object Model (DOM) The previous document could be represented as: Authors Author au_id au_lname au_fname In DOM terms, these elements are also nodes. A node just represent a generic element in this tree-type structure.

20. Bina Nusantara Document Object Model (DOM) Base Objects To represent this hierarchical nature, the DOM provides a whole set of objects, methods, and properties that allow us to manipulate the DOM. ObjectDescription Node A single node in the hierarchical NodeList A collection of nodes NamedNodeMap A collection of nodes allowing access by name as well as index

21. Bina Nusantara Document Object Model (DOM) PropertyDescription ChildNodes Returns a NodeList containing the children of the node. firstChild Returns the first child of the current node. lastChild Returns the last child of the current node. parentNode Returns the parent node of the current node. previousSibling Returns the previous sibling, i.e., the previous node at the same level in the hierarchy. nextSibling Returns the next sibling, i.e., the next node at the same level in the hierarchy. nodeName The name of the node nodeValue The value of the node.

22. Bina Nusantara Document Object Model (DOM) Authors Author au_idau_lnameau_fname childNodes parentNode firstChild previousSibling nextSibling parentNode lastChild CodePoints to nodRoot.childNodes(0)Author nodRoot.childNodes(0).firstChildau_id nodRoot.childNodes(0).firstChild.nextSiblingau_lname nodRoot.childNodes(0).firstChild.parentNodeAuthor nodRoot.childNodes(0).firstChild.nextSibling.parentNodeAuthor So, let’s assume we have a node object called nodRoot pointing to Authors:

23. Bina Nusantara Document Object Model (DOM) Specific DOM Objects ObjectDescription DocumentThe root object for an XML document DocumentTypeInformation about the DTD or schema associated with the XML document. Equivalent to !DOCTYPE in a DTD. DocumentFragmentA lightweight copy of the Document, useful for temporary storage or document insertions. ElementAn XML element Attribute or AttrAn XML attribute EntityA parsed or unparsed entity. Equivalent to !ENTITY in a DTD. EntityReferenceAn entity reference NotationA notation. Equivalent to !NOTATION in a DTD. CharacterDataThe base object for text information in a document CDATASectionUnparsed character data. Equivalent to !CDATA in a DTD TextThe text contents of an element or attribute node CommentAn XML comment element ProcessingInstructionA processing instruction, as held in the section ImplementationApplication specific implementation details.

24. Bina Nusantara  DOMExample.html    var i;  var curNode;  var xmlDocument = new ActiveXObject("Microsoft.XMLDOM");  xmlDocument.load("authors.xml");  var element = xmlDocument.documentElement;  document.writeln("The root node of the document is: " + element.nodeName + " ");  document.writeln(" Its child elements are:");  for(i = 0; i < element.childNodes.length; i++) {  var curNode = element.childNodes.item(i);  document.writeln(" " + curNode.nodeName + " ");}  var currentNode = element.firstChild;  document.writeln(" The first child of the root node is: " + currentNode.nodeName + " ");  document.writeln(" Its child elements are:");  for(i = 0; i < currentNode.childNodes.length; i++) {  curNode = currentNode.childNodes.item(i);  document.writeln(" " + curNode.nodeName + " - value : " + curNode.firstChild.nodeValue +" "); }  var nextSib = currentNode.nextSibling;  document.writeln(" The next sibling is: " + nextSib.nodeName + " ");  document.writeln(" Its child elements are:");  for(i = 0; i < nextSib.childNodes.length; i++) {  curNode = nextSib.childNodes.item(i);  document.writeln(" " + curNode.nodeName +" - value : " + curNode.firstChild.nodeValue +" "); } 

25. Bina Nusantara Document Object Model (DOM)

26. Bina Nusantara Document Object Model (DOM) Traversing the DOM – XML is a relatively new area. many browsers don’t support the handling of XML data. – IE 5.0 or above is really the browser that good support for it. – You have to decide whether you want to send the XML data to the browser, or you want to process the XML in ASP pages and send pure HTML up to the browser. This depends upon your target audience.

27. Bina Nusantara   TraverseXML.html   var g_strNodeTypes = new Array ('','ELEMENT (1)','ATTIBUTE (2)','TEXT (3)','CDATA SECTION (4)',  'ENTITY REFERENCE (5)', 'ENTITY (6)', 'PROCESSING INSTUCTION (7)',  'COMMENT (8)', 'DOCUMENT (9)', 'DOCUMENT TYPE (10)',  ‘DOCUMENT FRAGMENT (11)', 'NOTATION (12)');  function showChildNodes(nodNode, intLevel)  {  var strNodes = ''; // string containing the nodes information  var intCount = 0;// count of the nodes  var intNode = 0;// current node number  var nodAttrList;// node list of the attributes for a node  // Get the values for this node  for (var i=0; i<intLevel; i++)  strNodes = strNodes + ' ';  strNodes += ' ' + nodNode.nodeName + ' Type: ' + g_strNodeTypes[nodNode.nodeType] +' Value: ' + nodNode.nodeValue  + ' ';  // check there are some sttribute  nodAttrList = nodNode.attributes;  if(nodAttrList != null)  {  intCount = nodAttrList.length;  if(intCount>0)  {  // for each attribute, display the attribute information  for (intAttr=0; intAttr<intCount; intAttr++)  strNodes += ' ' + nodAttrList(intAttr).nodeName + ' Type: ' + g_strNodeTypes[nodAttrList(intAttr).nodeType] + ' Value: ' + nodAttrList(intAttr).nodeValue + ' ';  }  }

28. Bina Nusantara  //check for any child nodes  intCount =nodNode.childNodes.length;  if (intCount > 0)  //for each child node, display the node, attributes, and its child node information  for(intNode = 0; intNode <intCount; intNode++ )  strNodes += showChildNodes(nodNode.childNodes(intNode), intLevel + 1);  return strNodes;  }  function start_traverse()  {  var domXMLData = new ActiveXObject("Microsoft.XMLDOM");  domXMLData = dsoData;  txtData.innerHTML = showChildNodes(domXMLData,0);  }     Traversing the Nodes in an XML Document    

29. Bina Nusantara Document Object Model (DOM)