How to easily make animated forums using XSLT and Ajaxy

Animated forum with XSLT and AJAX. Today is a special day. Today our XSLT lessons will show some really interesting (attractive) results which you can apply in practice. We will make a forum. Initially we will display only the forum topics, and load posts dynamically (by mouse clicking on the topics) using ajax technology. I think you may have seen similar forums on the Internet, so I will tell you how to do it your own.

Here are samples and downloadable package:

Contents

Step 1. Source XML
forum.xml
Step 2. PHP
index.php
Step 3. CSS
css/styles.css
Step 4. JS
js/jquery.min.js
js/main.js
Step 5. XSLT
xslt/forum.xslt
xslt/posts.xslt
Conclusion

Forum Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. Source XML

Firstly lets define our structure of forum:

forum.xml

<?xml version="1.0" encoding="UTF-8"?> 
  
<forum> 
  
    <topic title="XSLT forum demonstration" date="15.04.2011" description="description can be here"> 
  
        <post date="15.04.2011" author="Diego"> 
  
            <description><![CDATA[ 
  
            This forum able to display any HTML entities 
  
            ]]></description> 
  
        </post> 
  
        <post date="15.04.2011" author="Andrew"> 
  
            <description><![CDATA[ 
  
            As example <b>bold text</b>, <i>italic</i>, <u>underline</u>, <a href="http://www.google.com">links</a> etc 
  
            ]]></description> 
  
        </post> 
  
        <post date="15.04.2011" author="James"> 
  
            <description><![CDATA[ 
  
            <p>Some HTML description 3, <a href="http://www.google.com">links</a> etc 
  
            ]]></description> 
  
        </post> 
  
        <post date="15.04.2011" author="John"> 
  
            <description><![CDATA[ 
  
            Hello guys here 
  
            ]]></description> 
  
        </post> 
  
        <post date="15.04.2011" author="Robert"> 
  
            <description><![CDATA[ 
  
            Wonderful forum, isn`t it? 
  
            ]]></description> 
  
        </post> 
  
    </topic> 
  
    <topic title="sample forum topic 2" date="16.04.2011" description="description of topic 2"> 
  
        <post date="16.04.2011" author="Michael"> 
  
            <description><![CDATA[ 
  
            sample record 1 
  
            ]]></description> 
  
        </post> 
  
        <post date="16.04.2011" author="William"> 
  
            <description><![CDATA[ 
  
            sample record 2 
  
            ]]></description> 
  
        </post> 
  
        <post date="16.04.2011" author="David"> 
  
            <description><![CDATA[ 
  
            sample record 3 
  
            ]]></description> 
  
        </post> 
  
    </topic> 
  
    <topic title="sample forum topic 3" date="17.04.2011" description="description of topic 3"> 
  
        <post date="17.04.2011" author="Charles"> 
  
            <description><![CDATA[ 
  
            sample record 3.1 
  
            ]]></description> 
  
        </post> 
  
        <post date="17.04.2011" author="Joseph"> 
  
            <description><![CDATA[ 
  
            sample record 3.2 
  
            ]]></description> 
  
        </post> 
  
    </topic> 
  
</forum>

Forum contain several topics, each topic can contain variable amount of posts. Each post have name of Author, date of posting, and, text itself (Description) can contain HTML tags.

Step 2. PHP

Here are easy PHP file which we using for xsl transformation:

index.php

<?php 
  
if (version_compare(phpversion(), "5.3.0", ">=")  == 1) 
  
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); 
  
else 
  
  error_reporting(E_ALL & ~E_NOTICE); 
  
// create DomDocument and load our forum 
  
$xml = new DOMDocument; 
  
$xml->load('forum.xml'); 
  
$xsl = new DOMDocument; 
  
switch ($_POST['action']) { 
  
    case 'posts': 
  
        $xsl->load('xslt/posts.xslt'); // importing xslt 
  
        $proc = new XSLTProcessor; // creating xslt processor 
  
        $proc->importStyleSheet($xsl); // attaching xsl rules 
  
        $proc->setParameter('', 'topic_id', (int)$_POST['i']); // we will set param for XSL 
  
        break; 
  
    default: 
  
        $xsl->load('xslt/forum.xslt'); // importing xslt 
  
        $proc = new XSLTProcessor; // creating xslt processor 
  
        $proc->importStyleSheet($xsl); // attaching xsl rules 
  
        break; 
  
} 
  
echo $proc->transformToXML($xml); // output 
  
?>

Make attention to switch-case. For ajax response (when we clicking to our topics) I using first switch case (when action = posts). To determine which messages we will display (filter) I will pass ID of topic (topic_id) to our XSL script.

Step 3. CSS

Here are used CSS file:

css/styles.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} 
  
.main{background:#FFF;width:698px;min-height:500px;overflow:hidden;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em} 
  
p{margin:0;padding:0} 
  
.forum{border:1px solid #B0BBCD} 
  
.forum .header{color:#fff;background-color:#545F6F;padding:5px} 
  
.forum .topic{border-bottom:2px solid #B0BBCD;background-color:#F3F2EF;padding:5px} 
  
.forum .topic .desc{margin-left:30px;font-size:12px;color:#444} 
  
.forum .topic .posts{border-top:1px solid #B0BBCD;display:none;margin-top:10px;padding:10px} 
  
.forum .topic .posts .post{border-bottom:1px solid #B0BBCD;margin:5px} 
  
.forum .post .date{font-size:10px;color:#444;text-align:right}

Here are several styles of our forum – styles for topics, posts etc.

Step 4. JS

Here are used JS files:

js/jquery.min.js

This is just jQuery library, available in package.

js/main.js

function loadPosts(obj, i) { 
  
    $('.topic#'+i+' .posts').load('index.php', 
  
      {action: 'posts', i: i}, 
  
      function() { 
  
        $(this).fadeIn('slow'); 
  
        obj.unbind('click'); 
  
        obj.click(function(e) { 
  
            $('.topic#'+i+' .posts').slideToggle('slow'); 
  
        }); 
  
      } 
  
    ); 
  
} 
  
$(function(){ 
  
    $('.topic').click(function() { 
  
        loadPosts( $(this), $(this).attr('id') ); 
  
    }); 
  
});

When page loaded – I linking onClick events to our forum topics. After, when we clicking to Topic element, I using $.load to load posts of this Topic. And, unbind old onClick functional (we don`t will need to load this content twice), and adding new onClick event, which will toggle slide of these posts.

Step 5. XSLT

And, the delicacy – used XSLT rules:

xslt/forum.xslt

<?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="html" doctype-system="http://www.w3.org/TR/html4/strict.dtd" doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes" /> 
  
    <xsl:template match="/"> 
  
        <html xml:lang="en"> 
  
            <head> 
  
                <script src="js/jquery.min.js" type="text/javascript">></script> 
  
                <script src="js/main.js" type="text/javascript"></script> 
  
                <link media="all" href="css/styles.css" type="text/css" rel="stylesheet"/> 
  
                <title>Our XSLT-based ajaxy forum</title> 
  
            </head> 
  
            <body> 
  
                <div class="main"> 
  
                    <h2>Our XSLT-based ajaxy forum</h2> 
  
                    <div class="forum"> 
  
                        <div class="header">Forum topics</div> 
  
                        <xsl:for-each select="forum/topic"> 
  
                            <div class="topic"> 
  
                                <xsl:attribute name="id"> 
  
                                    <xsl:value-of select="position()"/> 
  
                                </xsl:attribute> 
  
                                <a class="top_link" href="javascript:void(0)"> 
  
                                    <xsl:value-of select="@title"/> (<xsl:value-of select="count(child::*)"/>) 
  
                                </a> 
  
                                <div class="desc"> 
  
                                    <xsl:value-of select="@description"/> 
  
                                </div> 
  
                                <div class="posts"></div> 
  
                            </div> 
  
                        </xsl:for-each> 
  
                    </div> 
  
                </div> 
  
                <xsl:comment>Copyright: AndrewP</xsl:comment> 
  
            </body> 
  
        </html> 
  
    </xsl:template> 
  
</xsl:stylesheet>

As you can see, here we generating our main forum, and drawing only topics now. We will load posts ajaxy fr each Topic using jQuery, nice, isn`t is?

xslt/posts.xslt

<?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="/"> 
  
        <xsl:for-each select="forum/topic[position() = $topic_id]/*"> 
  
            <div class="post"> 
  
                <xsl:attribute name="id"> 
  
                    <xsl:value-of select="position()"/> 
  
                </xsl:attribute> 
  
                <xsl:value-of select="description" disable-output-escaping="yes"/> 
  
                <div class="date"> 
  
                    posted at <xsl:value-of select="@date"/> by <xsl:value-of select="@author"/> 
  
                </div> 
  
            </div> 
  
        </xsl:for-each> 
  
    </xsl:template> 
  
</xsl:stylesheet>

Second XSL file we will use to generate list of posts for requested Topic. Hope that you don`t forget that we will request it ajaxy? We already passed $topic_id variable into this XSL above (in PHP code). So, we just should display all child ‘posts’ of our Topic.

Live Demo

Conclusion

I hope that today’s article was very interesting, and I hope that interest to XSL language has not dried up 🙂 Good luck!