1 Displaying XML Document Web and Database Management System

2 XML and CSS Web and Database Management System

3 Using CSS to Display XML Document This is a simplest way to display the XML document We can simply create a css file with each XML’s tagname representing the separator We can use a browser to open the XML file The browser will then render the XML document according to the style specified in the CSS file

4 Display XML Doc using CSS Empire Burlesque Bob Dylan USA Columbia ….. cd_catalog.xml /* CSS Document */ CATALOG { background-color: #ffffff; width: 100%; } CD { display: block; margin-bottom: 30pt; margin-left: 0; } TITLE { color: #FF0000; font-size: 20pt; } ARTIST { color: #0000FF; font-size: 20pt; } COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; } cd_catalog.css

5 Result of XML and CSS To display the xml document with its associated css is to simply open the xml file in a browser

6 XSLT Web and Database Management System

7 XSL and XSLT XSL (EXtensible Stylesheet Language) is a style sheet language for XML documents XSL describes how an XML document should be displayed XSL consists of three parts: –XSLT - a language for transforming XML documents –XPath - a language for navigating in XML documents –XSL-FO - a language for formatting XML documents XSLT stands for XSL Transformations which is how to transform XML documents into other formats

8 What is XSLT? XSLT stands for XSL Transformations XSLT is the most important part of XSL XSLT transforms an XML document into another XML document XSLT uses XPath to navigate in XML documents XSLT is a W3C Recommendation XSLT transforms an XML source-tree into an XML result-tree.

9 XSLT XSLT transforms each XML element into an (X)HTML element that can be recognized by browsers With XSLT we can add/remove elements and attributes to or from the output file We can rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more XSLT uses XPath to find information in an XML document

10 Style Sheet Declaration The root element that declares the document to be an XSL style sheet is or. <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:transform version="1.0" xmlns:xsl=" > or

11 XSL Style Sheet with a Transformation Template My CD Collection Title Artist

12 Link XSL Style Sheet to XML Document Empire Burlesque Bob Dylan 1985.

13 XSLT Element A template contains rules to apply when a specified node is matched The element is used to build templates The value of the match attribute is an XPath expression –i.e. match="/" defines the whole document ………………… The match="/" attribute associates template with the root of the XML source document.

14 The Element is used to extract value of an XML element and add it to the output stream select attribute in the example, contains an XPath expression Title Artist

15 Output My CD Collection TitleArtist Empire BurlesqueBob Dylan

16 The Element element allows us to do looping in XSLT It can be used to select every XML element of a specified node-set: Title Artist

17 Output

18 Filtering the Output (for-each) We can also filter output from XML file by adding a criterion to select attribute in the element Legal filter operators are: – = (equal) – != (not equal) – < less than – > greater than

19 XSLT Element To sort the output, simply add an element inside the element in the XSL file:

20 Output My CD Collection TitleArtist RomanzaAndrea Bocelli One night onlyBee Gees Empire BurlesqueBob Dylan Hide your heartBonnie Tyler The very best ofCat Stevens Greatest HitsDolly Parton Sylvias MotherDr.Hook ErosEros Ramazzotti Still got the bluesGary Moore Unchain my heartJoe Cocker SoulsvilleJorn Hoel For the good timesKenny Rogers

21 XSLT Element element is used to put a conditional test against the content of the XML file....some output if the expression is true... Syntax:

22 Output My CD Collection TitleArtist Empire BurlesqueBob Dylan Still got the bluesGary Moore One night onlyBee Gees RomanzaAndrea Bocelli Black angelSavage Rose 1999 Grammy NomineesMany

23 XSLT Element element is used in conjunction with and to express multiple conditional tests.... some output some output.... Syntax:

24 Example

25 Example

26 Output

27 XSLT Element element applies a template to the current element or to the current element's child nodes If we add a select attribute to the, it will process only the child element that matches the value of the attribute We can use the select attribute to specify the order in which the child nodes are processed.

28 XSLT Example My CD Collection Title: Artist:

29 XSLT Output

30 XPath Web and Database Management System

31 XPath XPath is a syntax for defining parts of an XML document XPath is used to navigate through elements and attributes in an XML document. XPath is a major element in XSLT

32 XPath Introduction XPath Path Expressions –XPath uses path expressions to select nodes or node-sets in an XML document XPath Standard Functions –XPath has functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more XPath is Used in XSLT –XPath is a major element in the XSLT standard. Without XPath knowledge we will not be able to create XSLT documents

33 XPath Nodes There are seven kinds of nodes: –element, attribute, text, namespace, processing-instruction, comment, and document nodes. Harry Potter J K. Rowling is root element node, J K. Rowling is element node, and lang="en" is attribute node.

34 Terminology Parent –Each element and attribute has one parent Children –Element nodes may have zero, one or more children Siblings –Nodes that have the same parent Ancestors –A node's parent, parent's parent, etc. Descendents –A node's children, children's children, etc.

35 XPath Syntax XPath uses path expressions to select nodes or node-sets in an XML document. Harry Potter Learning XML 39.95

36 Selecting Nodes The most useful path expressions are listed below: ExpressionDescription nodenameSelects all child nodes of the named node /Selects from the root node //Selects nodes in the document from the current node that match the selection no matter where they are.Selects the current node..Selects the parent of the current attributes

37 Selecting Nodes (Example) Path ExpressionResult bookstoreSelects all the child nodes of the bookstore element /bookstoreSelects the root element bookstore Note: If the path starts with a slash ( / ) it always represents an absolute path to an element! bookstore/bookSelects all book elements that are children of bookstore //bookSelects all book elements no matter where they are in the document bookstore//bookSelects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element all attributes that are named lang

38 Predicates Predicates are used to find a specific node or a node that contains a specific value. Predicates are always embedded in square brackets. Path ExpressionResult /bookstore/book[1]Selects the first book element that is the child of the bookstore element. Note: IE5 and later has implemented that [0] should be the first node, but according to the W3C standard it should have been [1]!! /bookstore/book[last()]Selects the last book element that is the child of the bookstore element /bookstore/book[last()-1]Selects the last but one book element that is the child of the bookstore element /bookstore/book[position()< 3] Selects the first two book elements that are children of the bookstore element

39 Predicates (cont) Path ExpressionResult all the title elements that have an attribute named lang all the title elements that have an attribute named lang with a value of 'eng' /bookstore/book[price>35.00]Selects all the book elements of the bookstore element that have a price element with a value greater than /bookstore/book[price>35.00]/titl e Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00

40 Selecting Unknown Nodes XPath wildcards can be used to select unknown elements Selecting nodes using wildcards WildcardDescription *Matches any element node any attribute node node()Matches any node of any kind Path ExpressionResult /bookstore/*Selects all the child nodes of the bookstore element //*Selects all elements in the document all title elements which have any attribute

41 Selecting Several Path By using the | operator in an XPath expression, we can select several paths Path ExpressionResult //book/title | //book/price Selects all the title AND price elements of all book elements //title | //priceSelects all the title AND price elements in the document /bookstore/book/title | //price Selects all the title elements of the book element of the bookstore element AND all the price elements in the document

42 XPath Axes AxisNameResult ancestorSelects all ancestors (parent, grandparent, etc.) of the current node ancestor-or-selfSelects all ancestors (parent, grandparent, etc.) of the current node and the current node itself attributeSelects all attributes of the current node childSelects all children of the current node descendantSelects all descendants (children, grandchildren, etc.) of the current node descendant-or- self Selects all descendants (children, grandchildren, etc.) of the current node and the current node itself followingSelects everything in the document after the closing tag of the current node following-siblingSelects all siblings after the current node namespaceSelects all namespace nodes of the current node parentSelects the parent of the current node precedingSelects everything in the document that is before the start tag of the current node preceding-siblingSelects all siblings before the current node selfSelects the current node

43 Location Path Expression (Axes) An axis (defines the tree-relationship between the selected nodes and the current node) a node-test (identifies a node within an axis) zero or more predicates (to further refine the selected node-set) Harry Potter Learning XML axisname::nodetest[predicate]

44 Axes Examples ExampleResult child::bookSelects all book nodes that are children of current node attribute::langSelects the lang attribute of the current node child::*Selects all element children of the current node attribute::*Selects all attributes of the current node child::text()Selects all text node children of the current node child::node()Selects all children of the current node descendant::bookSelects all book descendants of the current node ancestor::bookSelects all book ancestors of the current node ancestor-or-self::bookSelects all book ancestors of the current node - and the current as well if it is a book node child::*/child::priceSelects all price grandchildren of the current node

45 OperatorDescriptionExampleReturn value |Computes two node-sets//book | //cdReturns a node-set with all book and cd elements +Addition Subtraction *Multiplication6 * 424 divDivision8 div 42 =Equalprice=9.80true if price is 9.80 false if price is 9.90 !=Not equalprice!=9.80true if price is 9.90 false if price is 9.80 <Less thanprice<9.80true if price is 9.00 false if price is 9.80 <=<=Less than or equal toprice<=9.80true if price is 9.00 false if price is 9.90 >Greater thanprice>9.80true if price is 9.90 false if price is 9.80 >=>=Greater than or equal toprice>=9.80true if price is 9.90 false if price is 9.70 or price=9.80 or price=9.70true if price is 9.80 false if price is 9.50 and price>9.00 and price<9.90true if price is 9.80 false if price is 8.50 modModulus (division remainder)5 mod 21

46 XPath Functions XPath provides a group of functions including: – Accessor, Error and Trace, Numeric, String, AnyURI, Boolean, Duration/Date/Time, QName, Node, Sequence, and Context The default prefix for the function namespace is fn: The URI of the function namespace is:

47 XPath Functions Example Some examples from context function NameDescription fn:position()Returns the index position of the node that is currently being processed Example: //book[position()<=3] Result: Selects the first three book elements fn:last()Returns the number of items in the processed node list Example: //book[last()] Result: Selects the last book element fn:current-dateTime()Returns the current dateTime (with timezone) fn:current-date()Returns the current date (with timezone)

48 if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","cd_catalog.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.write(" "); var x=xmlDoc.getElementsByTagName("CD"); for (i=0;i<x.length;i++) { document.write(" "); document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); document.write(" "); document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); document.write(" "); } document.write(" ");