Logo of Vovisoft


XML and The Dynamic Contents Approach - Part II

As you have seen in Part I, the contents of homepage are dynamically updated - based on the XML database.

In this article, we will go one step further that is: dynamically displays full article according to user's choice. What I mean is when Internet users click on More... link, the new page will be created (virtually) instantly which shows all the details of the article. Of course we need to do a bit of planning, right!

  1. Design a template and specify the hot spot for all data to be placed in,
  2. Design an XSL stylesheet
  3. Build a bridge between the XML Database and Stylesheet

Design a template and specify the hot spot

Well, since we already created the welcome page for our website (see Part I), we simply reuse it. Of course a minor modification is needed. Let's say we have a final layout for full article to be displayed in is:

See Demo. To be able to show full article like this, I am going to use the stylesheet XSL to format the output.

Design an XSL stylesheet

The idea of using XSL stylesheet is to separate the data and the formatting is for future maintenance. If we would like to update/change the presentation of the webpage, we know where to modify it without touching the data and vice versa.

The stylesheet itself is very simple, what it does is actually select the article title and story tags to display, let's name this formatting technique is articles.xsl.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<-- start from the root -->
<xsl:template match="articles/article">
	<-- choose the title and story tags to display -->
	<xsl:value-of select="title"/>
	<xsl:value-of select="story"/>

See the stylesheet above with HTML format embedded.

Building a bridge?

From the main page, when you click on More... hyperlink, we deliberately passing the article id, and calling the process.asp file to catch and handle it...I am calling the process.asp script is the bridge. Why? Because the XML data (articles.xml) and the formatting XSL (articles.xsl) are two independent elements. Thus, a technique that use to combine them together is needed...See the process.asp code below...

Dim strMode

' Get the inputs from welcome.asp
strMode = Request.QueryString("mode")
strid = Request.QueryString("id")

' Select case will becomes very handy for future implementation
Select Case strMode		
	Case "viewdetail"
		' Get data file, formatting and the id of article
		viewDetail server.MapPath("articles.xml"), _
		server.MapPath("articles.xsl"), strid
End select

Function viewDetail(strXML,strXSL,strid)

	Dim objXML
	Dim objNode
	Dim objXSL
	set objXML = Server.CreateObject("Microsoft.XMLDOM")
	objXML.async = false
	objXML.load(strXML)	' Open the XML database
	' Select a single node based on article id (user's selection)
	Set objNode = _
		objXML.SelectSingleNode("articles/article[@id='" & _
		strid & "']")

	set objXSL = Server.CreateObject("Microsoft.XMLDOM")
	objXSL.async = false
	objXSL.load(strXSL)		' Open the stylesheet
	' Output the result to screen
End Function

From the code above, you could tell that I wrote something rather more than I should...Of course, you don't have to use Select Case but...just keep in mind that it is a good practice to develop something that you or other people can be re-used, maintain/implement the codes easily in the future...

Download the source code!

Send Comments to Author or visit vovisoft forum.

Copyright © Vovisoft October 2001-2002