XML and XSLT tutorial

Home > XML XSL tutorial

XML, XSL, and DTD A Practical Approach

26/11/2005

By Moustafa Deif

mdeif@fastapps.net

Download Example Files: Example.XML Example.XSL

This is just trying to make life better with XML, XSL, and DTD

We assume we need to create an xml file for a library, we need to keep data of Books. What shall we do:

Decide what data shall be in your table.
1. Books data might be: Book Title, Author Name, Book Subject, Location (shelf number).
2. We can draw the table on a piece of paper.

BookName	AuthorName	BookSubject	Location
Communism	Mr. Zaki Edra	Economics	Shelf 1
Bacteriology Guide	Dr. Gom3a El-Shawan	Medicine	Shelf 1

We don’t need to put all the data, just a sample of one or two records.

Now we have the hierarchy of the xml file, shall we proceed putting it in one?

The following lines shall be put in any text editor (like Notepad) and be saved as any name you want .xml, for me (myself, and Irene) I will name it example.xml

Note:

· The lines in red italic are just notes for you, don’t put them in the xml file.

· Also take care xml is case sensitive; i.e. <books> is different than <Books>

Shall we say that we are writing in XML language version 1.0

<?xml version="1.0"?>

The next line opens a tag for library and don’t forget to close it after all the sub tags (book tag and all the book sub tags (bookname, authorname, booksubject, and location) so the library tag includes all the sub tags between its opening and close.

Now we can open the book tag in the next line that is under the library tag in the hierarchy tag and close it after the sub tags (book title,…)

<book>

Shall we now open the booktitle tag that will include a book title between its opening and close

<booktitle> Communism </booktitle>

The same applies on authorname, booksubject, and location

<booksubject> Economics </booksubject>

<location> Shelf 1 </location>

</book>

Now we finished entering data for a single record, may we copy and paste the tags starting from <book> till it’s close and just replace the data of the first book with that of the second book

<booktitle> Bacteriology Guide </booktitle>

<authorname> Dr.Gom3a El-Shawan </authorname>

<booksubject> Medicine </booksubject>

<location> Shelf 1 </location>

</book>

</library> Closing of tag library

Now we can right click on the file –in My Computer- and choose open with Internet Explorer, or any web browser.

Now we need to apply a suitable technology to view it. Might be an XSL (Style sheet) or anything else. An xsl file consists of some html tags with some commands that tell it where is the data to be presented.

Let’s create a file –using Notepad- and save it with the name example.xsl. Then write the following inside it:

First of all we need to tell it what language will be used (XML version 1.0) that this file is a style sheet version 1.0 according to the standardization of w3.org organization.

<?xml version="1.0" encoding="ISO-8859-1"?>

Then open a stylesheet tag and tell it that this file is a style sheet version 1.0 according to the standardization of w3.org organization.

<xsl:stylesheet

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

And please open a template tag

<xsl:template match="/">

Now we tell it that the following contains html tags

<html> Open an html tag and close it at the end of file with </html>

<body> Same with the body

<h2>Library Example To Present Books Information</h2> Open a header font <h2> and type any title then close it with </h2>

<table border="1"> Create a table with a border

<tr bgcolor="#9acd32"> Open your first table row with a certain background color

<th align="left">Title of Book</th> Open a table header, put your first column title, and then close the header

<th align="left"> Name of Author</th> Now do the same for the rest of the columns of the table

<th align="left">Subject of Book</th>

<th align="left">Loctaion of Book</th>

</tr> Now we may close the first table row (the row with the table headers)

The following is like a loop on each book inside library (your main tag), that’s why we put library/book

<xsl:for-each select="library/book">

<tr> Now in each iteration of the loop, a new table row <tr> is opened with 4 table data (table columns) inside it, one for each element (book title, author name,…, etc).

<td><xsl:value-of select="booktitle"/></td> Notice that booktitle here has to be typed the same way you did in the xml file or you will receive an error.

</tr> Close your repeating row (repeating cause of the loop)

</xsl:for-each> End of the loop

</table> End of the sweet table

</body> End of the body

</html> End of html

</xsl:template></xsl:stylesheet> End of the template and the stylesheet, and end of life

Is everything Okay now? Nope, Why??

Oop’s, poor memory I have, forgot to tell you to add a line in the example.xml file telling it to proudly use it’s new stylesheet. Just add it after the first line (the one talking about xml version 1.0. This line looks like this:

<?xml-stylesheet type="text/xsl" href="example.xsl"?>

Open the example.xml using your web browser, get your back to your seat –if you are using one- and relax while the example runs inside you web browser.

Now after having a luxury life with xml and xsl, shall we add a little part to the xml file, saying the data definition explicitly. I hear voices objecting, “Why however everything is working??” Sorry, a man must do what a man must do!!!

After the line <?xml-stylesheet type="text/xsl" href="example.xsl"?> add a part like this:

<!DOCTYPE library [ The main tag is library

<!ELEMENT library (book)> The library contains just one type of elements i.e. it contains the tag type book, no matter it is a single book or a hundred ones.

<!ELEMENT book (booktitle, authorname, booksubject, location)> The same with book, it contains a booktitle element, an authorname, a booksubject, and a location

<!ELEMENT booktitle (#PCDATA)> this means the data type of booktitle is a #PCDATA ( string)

<!ELEMENT authorname (#PCDATA)>

<!ELEMENT booksubject (#PCDATA)>

<!ELEMENT location (#PCDATA)>

Nothing else. Save the file example.xml and rerun it in the web browser. Now tell me the difference? Nothing!!!

Of course you are right, we didn’t change anything, just we made some data type definition DTD inside the xml file.

If you want to have a look on the final file example.xml here it is:

<?xml version="1.0"?>

<?xml-stylesheet type="text/xsl" href="example.xsl"?>

<!DOCTYPE library [

<!ELEMENT library (book)>

<!ELEMENT book (booktitle, authorname, booksubject, location)>

<!ELEMENT booktitle (#PCDATA)>

<!ELEMENT authorname (#PCDATA)>

<!ELEMENT booksubject (#PCDATA)>

<!ELEMENT location (#PCDATA)>

<book>

<booktitle> Ecommerce Approach </booktitle>

<booksubject> Computer Science </booksubject>

<location> Shelf 1 </location>

</book>

<book>

<booktitle> Bacteriology Guide </booktitle>

<booksubject> Medicine </booksubject>

<location> Shelf 1 </location>

</book>

</library>

And this is the final file example.xsl:

<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">

<html>

<body>

<h2>Library Example To Present Books Information</h2>

<th align="left">Title of Book</th>

<th align="left">Name of Author</th>

<th align="left">Subject of Book</th>

<th align="left">Loctaion of Book</th>

</tr>

<xsl:for-each select="library/book">

<tr>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template></xsl:stylesheet>

And this is the result of opening example.xml in the internet explorer:

References:

http://www.w3schools.com/xsl/