Xml code for html

XML Applications

This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.

The XML Document Used

In this chapter we will use the XML file called «cd_catalog.xml».

Display XML Data in an HTML Table

This example loops through each element, and displays the values of the and the elements in an HTML table:

Example

For more information about using JavaScript and the XML DOM, go to DOM Intro.

Display the First CD in an HTML div Element

This example uses a function to display the first CD element in an HTML element with >

Example

function displayCD(i) var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() if (this.readyState == 4 && this.status == 200) myFunction(this, i);
>
>;
xmlhttp.open(«GET», «cd_catalog.xml», true);
xmlhttp.send();
>

function myFunction(xml, i) var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName(«CD»);
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Navigate Between the CDs

To navigate between the CDs, in the example above, add a next() and previous() function:

Example

function next() <
// display the next CD, unless you are on the last CD
if (i < x.length-1) <
i++;
displayCD(i);
>
>

function previous() // display the previous CD, unless you are on the first CD
if (i > 0) i—;
displayCD(i);
>
>

Show Album Information When Clicking On a CD

The last example shows how you can display album information when the user clicks on a CD:

Example

function displayCD(i) <
document.getElementById(«showCD»).innerHTML =
«Artist: » +
x[i].getElementsByTagName(«ARTIST»)[0].childNodes[0].nodeValue +
«
Title: » +
x[i].getElementsByTagName(«TITLE»)[0].childNodes[0].nodeValue +
«
Year: » +
x[i].getElementsByTagName(«YEAR»)[0].childNodes[0].nodeValue;
>

Источник

Building XML webpages using XSLT

In this article, we will learn about building XML webpages using eXtensible Stylesheet Language Transformations (XSLT). By the end of the article, you will have an overview how HTML webpages are built by transforming XML codes. You will also learn a step-by-step procedure on how to build a simple webpage.

In my previous articles about the Validation of XML using DTD and Validation of XML using XSD, we learned about the basics of XML and implemented validations using DTD and XSD.

I highly recommend going over the previous articles to better grasp those concepts. As a prerequisite, a little knowledge about HTML and CSS would help to follow this article along.

Table of contents

What is eXtensible Stylesheet Language Transformation?

According to Wikipedia, XSLT is a language used in transforming XML documents into other XML documents, or into other formats such as HTML for web pages, plain text, or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, PostScript, and PNG.

The styling of websites built with HTML was done using predefined tags with CSS. In XML we use user-defined tags. eXtensible Stylesheet Language (XSL) helps us describe the properties of the user-defined tags. These tags will then be transformed into predefined tags using XSL Transformations (XSLT).

Step by step guide for implementation

XML document

In this article, we’ll not cover the basics of building an XML document. To keep it simple, let’s build a webpage using the XML code below.

Full XML code can be found here.

  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="validation_xsd.xsd">    1   ICPC   5 coding questions in 2 hrs   Team    2020-04-01T10:00:00   2020-04-01T12:00:00    abc@gmail.com   1234567890   

Understanding XSLT terminologies

XSLT template

An XSL consists of one or more sets of rules that are called templates. A template consists of rules applicable only when the specific node in the XML document is matched.

We can understand this as a wrapper function. It wraps the XSLT code based on matching the start node of an XML document. When the start node matches, the template gets rendered accordingly.

XPath

According to Wikipedia, XPath (XML Path Language) is a query language used for selecting nodes from an XML document. XPath may also be used to compute values (such as, strings, numbers, or Boolean values) from an XML document’s content. XPath was defined by the World Wide Web Consortium (W3C).

In XSLT, we will use XPath for navigating within XML documents.

A sample example for demonstration would be:

We have to access the value in the tag for the XML document above. We can do that by specifying the XPath as /root/name/firstname .

Building XSLT webpages

We will build a simple web page containing a table with the table headers as the XML tags. We are also going to explore a few of the interesting features that can be built using XSLT.

Declarations

For any XSLT document, the declaration statement, along with namespace details, is mandatory. XML Namespace xmlns is a collection of names that can be used as elements or attributes in an XML document. It qualifies element names uniquely on the web to avoid conflicts between elements with the same name.

We have the declaration code below:

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

Here, we set the XSL version to be 1.0 and the xmlns to be xsl=»http://www.w3.org/1999/XSL/Transform» .

Cascading Style Sheets

According to Wikipedia, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

A markup language is a way of styling a document syntactically distinguishable from the text where the document is processed only to render the text while not displaying the markup language.

In the web page that we will build, we’ll use this CSS code to style the document. Building CSS is not under the scope of this article. Only essential information regarding it will be emphasized upon.

XSLT template

Having done the prerequisite steps, let’s start building the webpage using XSLT.

First, we will create an xsl:template by matching with the «/» , that signifies the XML document’s root node. By specifying «/» , we mention that the whole document will be accessed.

The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a template for the entire XML document.

HTML header

Inside the xsl:template , we write normal HTML codes, which later are rendered as webpages. Here, the codes are XSLT, not HTML codes.

First, we begin with the tag and link all the necessary CSS and other required files. Here, we link our CSS files and a font style sheet file.

head>  link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />  link rel="stylesheet" href="../css/tablecss.css" />  link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />  head> 

HTML body

Moving on with the HTML , we build a table to display all the XML document details. To make the webpage look better, let’s align the contents to the center using the tag.

body>  center>  h2>Table Eventsh2>   center>  body> 

Building table

We create a tag that wraps the tag. Here, we use certain CSS properties like class=»scrolling» to enable horizontal and vertical scrolling of the webpages. class=»table-props» to set styling for the table contents. And, id=»table-title» to set styling specific for table heading.

Refer to this CSS code for more details on styling.

div class="scrolling">  table class="table-props" id="table-title">  table>  div> 

Table headings

Referring to this XML document, the XML tags will be considered as the table headings for the web page.

We will specify the headings using the tag.

tr id="table-heading">  th>Event_IDth>  th>Event Nameth>  th>Event Descriptionth>  th>Participation typeth>  th>Start date and timeth>  th>End date and timeth>  th>Organizer emailth>  th>Organizer phoneth>  tr> 

Table rows

Selecting based on XML field

Having built the web page’s skeleton, let’s focus on rendering the data from the XML document. Corresponding to the first heading «Event_ID» , we must render the XML document’s data as separate rows under the heading. So, we use the xsl:value-of command to retrieve data for the respective XML tag, which is specified in select=»» . Here, we retrieve the data in the XML tag event_id . The data in each cell of the table is enclosed within tags.

td>  xsl:value-of select="event_id" />  td> 

Choice-based XSL transformations

For the XML tag event_type_participation , there are 2 possible values: Solo and Team type of participations. So, we can specify choice based on the XSLT codes. As a demonstration, we will display the Solo and Team values in 2 different colors.

To make choice based transformations, we use the xsl:choose XSLT tag, which is similar to if-else-if conditional statements. The first if condition corresponds to xsl:when test=»» . Similarly, the else condition corresponds to xsl:otherwise .

Code structure for Choice based XSLT:

xsl:choose>  xsl:when test="CONDITION1">STATEMENTSxsl:when>  xsl:when test="CONDITION2">STATEMENTSxsl:when>  xsl:otherwise>STATEMENTSxsl:otherwise>  xsl:choose> 

For our webpage, the code will be shown as below:

xsl:choose>  xsl:when test="event_type_participation = 'Team'">  td bgcolor="#f2f2f242">  xsl:value-of select="event_type_participation" />  td>  xsl:when>  xsl:otherwise>  td bgcolor="#cccccc">  xsl:value-of select="event_type_participation" />  td>  xsl:otherwise>  xsl:choose> 

Full Code — Table Rows

Based on the previous explanations, we build the XSLT code for the remaining XML tags by rendering values using the xsl:value-of tag.

xsl:for-each select="root/event">   tr>  td>  xsl:value-of select="event_id" />  td>  td>  xsl:value-of select="event_name" />  td>  td>  xsl:value-of select="event_desc" />  td>  xsl:choose>  xsl:when test="event_type_participation = 'Team'">  td bgcolor="#f2f2f242">  xsl:value-of select="event_type_participation" />  td>  xsl:when>  xsl:otherwise>  td bgcolor="#cccccc">  xsl:value-of select="event_type_participation" />  td>  xsl:otherwise>  xsl:choose>  td>  xsl:value-of select="event_timing/event_start_datetime" />  td>  td>  xsl:value-of select="event_timing/event_end_datetime" />  td>  td>  xsl:value-of select="event_organizer_email" />  td>  td>  xsl:value-of select="event_organizer_phone" />  td>  tr>  xsl:for-each> 

For XML tags event_start_datetime and event_end_datetime , we specify XPath as event_timing/event_start_datetime and event_timing/event_end_datetime , since the XML document contains nested XML tags.

Additional features

Counting

Let’s say, we have to count the total number of event_id in the XML document. We can do this by using count() by specifying the path for accessing the tag. To access the event_id XML tag, we will follow the XML structural path below:

For accessing event_id , the path would be root/event/event_id . And, to access the values, we use xsl:value-of select=»» . By combining the steps above, we can count the number of events as shown below:

  Number of Events -  select="count(root/event/event_id)" />
  

Sorting

Now, let’s say we have to sort the table rows in ascending order based on event_id . We have an exclusive XSLT tag for sorting. In XML, every data is considered as a string by default. So, we must convert it to an integer by using number() . xsl:sort helps us sort the table rows based on number(event_id) .

 select="number(event_id)" data-type="number" /> 

To try out this, replace the code snippet above with under Full Code — Table Rows.

View output

By following the step-by-step procedures above, you would have successfully built a webpage. To view the page, you must open the file with a .xml extension.

Due to security concerns in several browsers like Google Chrome, the output can be viewed using the Internet Explorer browser. More details about the security concern in Google Chrome can be found here.

Conclusion

In conclusion, we have gone through what XSLT is, how webpages are rendered, and how to build a sample XML webpage using XSLT. This article serves only as an introduction to building XML webpages using XSLT. It’s highly recommended to try out the code manually by reading further from the referenced articles.

The full codes can be accessed here:

• We learned the concept of XSLT.
• We had an overview of various terminologies used in XSLT.
• We built a webpage using XSLT.

Further Reading

Peer Review Contributions by: Lalithnarayan C

Источник