Click here to Skip to main content
13,189,884 members (62,110 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked
Posted 21 Aug 2005

Web-page generation using XSL (no server-side scripts)

, 21 Aug 2005
Rate this:
Please Sign up or sign in to vote.
This article describes a methodology of using XSL for web-page generation, to create webpages in clicks.


This article proposes an approach to use XSL for web-page generation. Usually web-page generation is accomplished using server-side scripting languages. However, the approach proposed here is different from the server-side scripting languages. This approach can be compared to code-generation, wherein, the generation happens during the design-time and not every time the webpage is visited.


Generally, people do publish a category of web pages which frequently require similar changes in various parts of the web page. However, every time the content of the web pages changes, or if the publisher decides to change the appearance of the web page, there is considerable amount of work involved. This approach makes the update, very easy with very little work and time.


Before going further with the approach, let us consider a web-page that we want to generate. Let us generate a web page, publishing a list of books that are available in a library and their details.

As per my earlier discussion, whenever a new book is added to the library or removed; or say when you want to change the appearance of the website (not just colors, for which CSS would do the job), the amount of changes you will have to do, is proportional to the number of the places in the web page, where this change has an impact. For example, consider the library web page which resembles this:

As per the above sample, adding a new book to the library requires at least four changes in the page. What if these changes are required in more books and that too on a big file? What if someone wants the count to be removed or moved? A logical thought would suggest that, most of the information in the four places are either calculated (like the number of books for a given category) or it is replicated in various places (like the author name, book name). The idea that I propose here is to neatly separate the presentation logic and the data, so that any changes to the data or any changes to the presentation do not affect the other, and thereby making it easy for the web developer to manage these pages.

Data (in XML)+Template (in XSL)---->Final webpage

For the above example, the XML data can be as follows:

        <category>Technical Books</category>
        <category>Non-Technical Books</category>
            <name>Programming in C++</name>
            <publication>Prentice-Hall Publications
            <category>Technical Books</category>
            <name>XSL in 24 days</name>
            <publication>Prentice-Hall Publications
            <status>Not Available</status>
            <category>Technical Books</category>
        <!--<span class="code-comment"> other books' data --></span>

Consider the sample XSL code, which would roughly generate the same kind of index as in our example:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 


<xsl:output method="text"/>
<xsl:template match="/">
<!--<span class="code-comment"> selecting all the categories --></span>
<xsl:for-each select="//categories/category"> 
    <xsl:value-of select="."/>
    <!--<span class="code-comment"> selecting all the books for the current category --></span>
    <xsl:for-each select="//books/book[category=current()]">  
        <xsl:value-of select="name"/> 
        <xsl:text> by </xsl:text>
        <xsl:value-of select="author"/> 


The output HTML generated with the given data (XML) will be something like:

    <li>Technical Books</li>
        <li>Programming in C++ by Gerald</li>
        <li>XSL in 24 days by Naveen</li>
    <li>Non-Technical Books</li>
    <ul> <!--<span class="code-comment"> other books --></span>

Note that, all the HTML tags that we require in the output web page, has to be escaped using <tag_name> to avoid confusing the XSL interpreter.

The code and the output are almost of the same size, since the code seems more complex, you should not be surprised about the need for such an approach. This will be helpful when you have more number of books. You should be happy that the same code is going to work, irrespective of the number of books in the library. You can create an index for 100 books within a second.

How to apply XSL? Any tools?

Some of you, who are new to XSL, might have this question in mind, about how to apply the XSL, once the XMLs are ready. I have a list of ways to do this:

  1. Use the sample tool (Apply XSL), that I have attached with this article. I wrote this specifically for this purpose. I am using this to update my web page. Currently I am not planning to distribute the source for this tool. So only the binary is attached.
  2. There are lots of freeware available, for XSL transformations.
  3. You may write code using VC++ on MS XML, to do this.

Apply XSL tool

The snapshot reveals that there is nothing special, I should tell about the usage of this tool. It's only for this!! The tool is built on .NET Framework version 1.1, so you would need this version of .NET to execute this:

Moral of the story

As this is an approach, I don't intend to write an XSL template, that provides an exact resemblance to my first library example. However, I am sure, that this sample code would drive you to extend the template and appreciate the robustness of this approach in generating web pages. The more interactive the work is, the more is the benefit we get out of it.

Practical example

This approach has been implemented in my website and it is really helpful to me to update my website. I can drastically change my web page, in just few clicks. Most of the pages are generated using XSLs. The source for the XSLs used to generate the web pages is available through links in the corresponding pages. Visit here.


All that is proposed in this approach is definitely possible using server-side scripting. I do not claim that, "it is possible only through this approach". However, this is a cheaper way of doing things, when the pages are not really that dynamic to be generated every time a web page is visited. This approach does not require any extra-ordinary scripting language/database support on the server side.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

No Biography provided

You may also be interested in...


Comments and Discussions

Questiontable cell formatting Pin
nims198321-Apr-07 16:55
membernims198321-Apr-07 16:55 
GeneralUse the html output method Pin
RossDonald23-Aug-05 15:38
memberRossDonald23-Aug-05 15:38 
GeneralRe: Use the html output method Pin
Gerald Naveen A23-Aug-05 18:44
memberGerald Naveen A23-Aug-05 18:44 
GeneralDebugging Pin
Al Einstien22-Aug-05 17:22
memberAl Einstien22-Aug-05 17:22 
GeneralRe: Debugging Pin
Gerald Naveen A23-Aug-05 18:45
memberGerald Naveen A23-Aug-05 18:45 
GeneralRe: Debugging Pin
Pablo Aliskevicius23-Aug-05 21:27
memberPablo Aliskevicius23-Aug-05 21:27 
GeneralRe: Debugging Pin
RossDonald24-Aug-05 15:31
memberRossDonald24-Aug-05 15:31 
GeneralRe: Debugging Pin
Robert te Kaat24-Aug-05 20:54
sussRobert te Kaat24-Aug-05 20:54 
GeneralEmbedding HTML Pin
spforeman22-Aug-05 4:05
memberspforeman22-Aug-05 4:05 
GeneralRe: Embedding HTML Pin
Gerald Naveen A22-Aug-05 4:46
memberGerald Naveen A22-Aug-05 4:46 
GeneralRe: Embedding HTML Pin
Robert te Kaat24-Aug-05 20:57
sussRobert te Kaat24-Aug-05 20:57 
GeneralInteresting Article Pin
S. Senthil Kumar21-Aug-05 20:33
memberS. Senthil Kumar21-Aug-05 20:33 
GeneralRe: Interesting Article Pin
Gerald Naveen A21-Aug-05 22:44
memberGerald Naveen A21-Aug-05 22:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171016.2 | Last Updated 21 Aug 2005
Article Copyright 2005 by Gerald Naveen A
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid