Displaying XML contents to HTML web page

[apaiktos]

Hello,

How can i display the contents of an xml file in html web page? (no plain text) Can i do that with the help of a link and essentially transfer the contents without rewrite them again?

Thanks,

[piatkow]

Are you trying to display the raw xml or do you want to turn the content into a web page?

[apaiktos]

I am trying to transfer the contents of the xml file (it's a product catalog) into a normal web page (html - no plain text) without writing the same file again in html. But when i try the result appears as plain text. In short, the code appears not the requested contents with the links, the photos and the rest info. This is a sample of the xml file and i hope it helps:

<result>
<TotalMatches>10</TotalMatches>
&#8722;
<item>
<mid>0000</mid>
<name>name</name>
<sku>theskunum</sku>
<productname>thenameofthepro</productname>
&#8722;
<category>
<primary>currentcat</primary>
<secondary>general</secondary>
</category>
<price currency="USD">theprice</price>
<upccode>theupcode</upccode>
&#8722;
<description>
&#8722;
<short>
thesortdescroftherequesteditem
</short>
<long/>
</description>
<keywords/>
&#8722;
<link>
thelinktotheproductpage
</link>
&#8722;
<adlink>noadlink
</adlink>
&#8722;
<imlink>
currentimlink
</imlink>
</item>
</result>

Is it possible to display this kind of xml code normally in a web page? Somewhere on the interent i read about that it can be done with the help of javascript.

[piatkow]

You need a script of some sort to parse the file and display it. I don't have experience of writing these myself although I will have to learn for a project just starting. In the past have I used a third party service providers to parse the file and simply added a short piece of code that they provided to include the output on my page.

[swa66]

Isn't that what XSLT is meant to do ?

A quick tutorial:
[w3schools.com...]

Or you could style the xml with CSS as well:
[w3schools.com...]

[apaiktos]

Guys,

Many thanks for your replies.

@Piatkow: Yes, i am looking for something like that (i've been told about javascript and ajax) and if i find any script like this i will feel greatful.

@Swa66: I tried w3schools before come here but i couldn't understand much and it seems that i will need some more time to dedicate to. I will try again in the next few days.

[swa66]

With CSS you can do limited things. But e.g. transforming your <link>thelinktotheproductpage</link> into a html link isn't going to happen with just CSS.

So let's forget CSS for now as it's not powerful enough for what you seek.

This means bringing out the big guns: XSLT

Think of it as a process where you have XML as input and get (X)HTML as output.
To transform it you need some processing power and something that tells that processor how you want it transformed.

The engine can be done in a number of ways: with javascript in the client (typical for an "ajax" solution, need javascript enabled and more), or by serving the XML and XSLT to a browser that understands it it and transforms it itself or do it on the server (will always work).

The XSLT file itself (the one that tells how to transform) is an XML file itself. That's only to confuse those unfamiliar with it all.

To understand XSLT fully you need to know XML, (X)HTML, and XPath (how to navigate a XML document) and the XSLT "language". I'll admit it's daunting to start with.

It's almost a programming language where you have functions that can build loops, conditionals etc. so you really need to put some time in it.

w3schools has a number of cool tools where you can see what happens with different input etc.

In the end the xhtml can of course be styled with CSS again of course.

To get you started (and I'm by far not an expert, been way too long since I had the opportunity to play with this)

test.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<result>
 <item>
  <productname>red widgets</productname>
  <description>
   <short>
    Red widget are extremely popular at WebmasterWorld. Perhaps even more
    popular than green widgets, blue widget and orange widgets
    combined.
   </short>
  </description>
  <link>
   http://www.example.com/
  </link>
  <imlink>
   http://www.webmasterworld.com/gfx/logo.png
  </imlink>
  </item>
</result>

Basically your xml above simplified to be a quite a bit less (hence easier to start with) and an added line pointing the the XSLT file (2nd line of the file).

and a file test.xsl:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="xml"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
 <xsl:template match="result/item">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <body>
    <h2><xsl:value-of select="productname"/></h2>
    <p>
     <img alt="mandatory" style="float: left">
      <xsl:attribute name="src">
       <xsl:value-of select="imlink"/>
      </xsl:attribute>
     </img>
     <xsl:value-of select="description/short"/>
    </p>
    <p style="clear:left">
     <a>
      <xsl:attribute name="href">
       <xsl:value-of select="link"/>
      </xsl:attribute>
      Read more ...
     </a>
    </p>
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>

1st line: just the xml preable
next defining it's a XSLT file
next setting the output mode to be XHTML 1.0 Strict (if you don't set anything the browser will go in quirks mode: you do not want that)
and then you see both the xhtml and the xsl intermixed (note the document needs to remain well structured!

The XSLT processor know it is outputting xhtml (from the xsl:output and will change things e.g. that img tag will become self closed in the output etc.

I think you'll need to learn a bit more XSLT and I'm sure the XML forum is better suited for elaborating this than the html and browser forum.

I've played a bit with inline CSS, but of course you can link the CSS in the generated xhtml as well.

Hope this perk you enough to bite through the learning curve.

P.S.: I probably sinned a few times in the example, I'm quite rusty it seems.

[xclamationdesign]

Best way to do this is by using PHP to (as piatkow said) parse/read the contents of the XML file and display it dynamically before the page is displayed.

This all depends whether your hosting provider supports PHP.

[swa66]

I'm not so sure there is a best way. There are a few options, which is best might well depend on a lot of other factors beyond our knowledge or control.

I've in at least one instance ran into PHP's XML parser being rather inefficient for what I wanted to do and cause an unacceptable long delay before the page was sent to the client. Also you accumulate the processing on the server, distributing it to the clients might be far better scalable if you expect many visitors.

It all depends on exactly what you're doing and the context you need to do it in.