Using The Xml Module

The XML/XSL module included in mojoPortal content management system is a great way to implement structured content into a page on your site. It’s fast and simple, and great if you need to structure content that may only change occasionally (as there is no way to edit XML documents from within mojoPortal as of now). Some uses for this module may include a jQuery-powered banner rotator, a product or portfolio listing, or just any content element that has complicated mark-up. While you could achieve the same thing with mojoPortal’s content templates, the XML/XSL module will ensure that your content layouts will not be broken by users that are less than able HTML editors.

You will store your XML File in the “~/Data/Sites/[1]/xml” directory. We’ll start with creating the xml file. Create a new XML file in this directory and name it “testXML.xml”. We’re not going to do anything too complicated here; we’re just going to create a structured layout. Put this into the XML file:
<?xml version='1.0'?>

<super xmlns:HTML='http://www.w3.org/Profiles/XHTML-transitional'>
<banner id='Banner'>
<text>Hello, this is Banner</text>
<image>/Data/Sites/1/logos/mojomoonprint.jpg</image>
<link>/neuroscience-institute.aspx</link>
</banner>
<banner id='Great'>
<text>Hello, this is Great</text>
<image>/Data/Sites/1/logos/mojofacethumb.jpg</image>
<link>/diabetes-treatment.aspx</link>
</banner>
<banner id='Stupid'>
<text>Hello, this is Stupid</text>
<image>/Data/Sites/1/logos/mojothumb.jpg</image>
<link>/cardiovascular-treatment-services.aspx</link>
</banner>
</super>

You’ll see that this is a simple XML file. If you don’t know anything about XML, unlike HTML you can develop your own schema to suite your needs. Look up more about XML on W3C Schools.

Now we will create our XSL file in the “~/Data/Sites/[SiteID]/xsl” directory. Create a new XSL file and name it “testXSL.xsl”.

Open the XSL file and input this structure:

<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:template match="/">
<xsl:for-each select='super/banner'>
<div class='banner'>
<xsl:attribute name='style'>
<xsl:text>background: #ffffff url(http://localhost </xsl:text>
<xsl:value-of select='image' />
<xsl:text>);</xsl:text>
</xsl:attribute>
<h2>
<xsl:value-of select='@id' />
</h2>
<p>
<xsl:value-of select='text'/>
</p>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

This is a really basic XSL file. All it’s doing is looping through the elements in the XML file, and outputting them in our desired manner. The output is not going to be pretty in this tutorial, but obviously this will allow you to create something pretty in a structured and maintainable manner.
Our next step is to output this into a page. Open your mojoPortal site and log in. When you are logged in, open a page and add an XML/XSL module to that page. When you view this page, you will see that there is an edit link next to the module title; click this link.

You will be taken to the XML settings page.

As you can see, there are simply two drop-down menus, one for the XML file and one for the XSL file. Because we saved our files in those special directories, they will appear in our drop-downs. Select each of the files that we created and click the update button.

Note that in newer versions of mojoPortal it is also possible to specify the location of the xml and xsl files as urls so they can even be loaded from a remote server, for example you could use an RSS feed as the xml data source.

You will be taken back out to your page, and you will now see our results output onto the screen:

This looks terrible, but I’m sure that you can think of a thousand uses for this. 

Author: Andrew Boyce
 

Monetize Your Site With Site Membership Pro!