How to easily make animated forums using XSLT and Ajaxy

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:

Forum Demo

download in package

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

download in package

Conclusion

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

Creating multilevel menu using XSLT

Today we continue the practice of using XSLT. And lets consider a very entertaining task – the creation of navigation menu through XSL transformations. Someone will think that this is a fairly simple task, but we complicate it in advance – the menu should be multilevel. That is mean an unlimited number of sublevels. As initial data we will have an XML file with defined structure. At the output we will expect our multi-level drop-down menu.

Here are samples and downloadable package:

Live Menu Demo

download in package

Ok, download the source files and lets start coding !

Step 1. Source XML

Firstly lets define our structure of initial menu:

menu.xml

<?xml version="1.0" encoding="UTF-8"?>
<menu>
    <top title="Element 1" url="#">
        <link title="subelement 1#1" url="#"></link>
        <link title="subelement 1#2" url="#">
            <link title="subelement 1#2#1" url="#"></link>
            <link title="subelement 1#2#2" url="#"></link>
            <link title="subelement 1#2#3" url="#"></link>
        </link>
        <link title="subelement 1#3" url="#"></link>
    </top>
    <top title="Element 2" url="#">
        <link title="subelement 2#1" url="#"></link>
        <link title="subelement 2#2" url="#">
            <link title="subelement 2#2#1" url="#"></link>
            <link title="subelement 2#2#2" url="#"></link>
            <link title="subelement 2#2#3" url="#"></link>
        </link>
        <link title="subelement 2#3" url="#"></link>
    </top>
    <top title="Element 3" url="#">
        <link title="subelement 3#1" url="#"></link>
        <link title="subelement 3#2" url="#">
            <link title="sub 3#2#1" url="#"></link>
            <link title="sub 3#2#2" url="#"></link>
            <link title="sub 3#2#3" url="#">
                <link title="sub 3#2#3#1" url="#">
                    <link title="sub 1" url="#"></link>
                    <link title="sub 2" url="#"></link>
                    <link title="sub 3" url="#"></link>
                </link>
                <link title="sub 3#2#3#2" url="#"></link>
                <link title="sub 3#2#3#3" url="#"></link>
            </link>
        </link>
        <link title="subelement 3#3" url="#"></link>
    </top>
    <top title="Element 4" url="#">
        <link title="subelement 4#1" url="#"></link>
        <link title="subelement 4#2" url="#"></link>
        <link title="subelement 4#3" url="#"></link>
    </top>
</menu>

Step 2. PHP

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

index.php

<?php

// create DomDocument and load our menu
$xml = new DOMDocument;
$xml->load('menu.xml');

$xsl = new DOMDocument;
$xsl->load('xslt/template.xslt'); // importing xslt

$proc = new XSLTProcessor; // creating xslt processor
$proc->importStyleSheet($xsl); // attaching xsl rules
echo $proc->transformToXML($xml); // output

?>

Step 3. CSS

Here are used CSS file. It contain CSS of our future menu too:

css/styles.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:698px;height:440px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
#background {background:url(paper.jpg);}

/*menu styles*/
.preload1 {background: url(tab.png);}
.preload2 {background: url(tabb_on.png);}

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.menu2 li.top {display:block; float:left;}
.menu2 li a.top_link {display:block; float:left; height:36px; color:#444; text-decoration:none; }

.menu2 li a.top_link span {display:block; height:36px; float:left; line-height:27px; font-size:11px; font-weight:bold; padding:0 10px; cursor:pointer; background: url(tab_off.png) no-repeat;}
.menu2 li a.top_link b {display:block; width:15px; height:36px; float:left; background: url(tabb_off.png) no-repeat;}
.menu2 li a.top_link b.down {background: url(tabdown_off.png) no-repeat;}

.menu2 li a.top_link:hover span {color:#fff; background: url(tab.png) no-repeat; line-height:26px;}
.menu2 li a.top_link:hover b {color:#fff; background: url(tabb_on.png) no-repeat;}

.menu2 li:hover > a.top_link span {color:#fff; background: url(tab.png) no-repeat; line-height:26px;}
.menu2 li:hover > a.top_link b {color:#fff; background: url(tabb_on.png) no-repeat;}
.menu2 li:hover > a.top_link b.down {color:#fff; background: url(tabdown_on.png) no-repeat;}

.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover {visibility:visible; position:relative; z-index:200;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:32px; white-space:nowrap; width:120px; height:auto; z-index:300;}
.menu2 :hover ul.sub li {display:block; height:20px; float:left; width:120px; font-weight:normal; background: url(submid.png);}
.menu2 :hover ul.sub li.fly {background: url(submid_r.png);}

.menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:20px; width:120px; line-height:20px; text-indent:10px; color:#000; text-decoration:none;background:url(trans.gif);}
.menu2 :hover ul.sub li a:hover {color:#fff;}

.menu2 :hover ul.sub :hover > a {color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

.menu2 :hover ul.sub li.subtop,
.menu2 :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subtop
{background:url(subtop.png);}

.menu2 :hover ul.sub li.flytop,
.menu2 :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flytop
{background: url(subtop_r.png);}

.menu2 :hover ul.sub li.subbot,
.menu2 :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subbot
{height:30px; background:url(subbottom.png);}

.menu2 :hover ul.sub li.flybot,
.menu2 :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flybot
{height:30px; background: url(subbottom_r.png);}

As you can see – menu itself using some images, and I not sure that need put it in our article – they always will available in our downloadable package.

Step 4. XSLT

And, the delicacy – used XSLT rules:

xslt/template.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>
                <link media="all" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main" id="background">

                    <!-- The menu starts here -->
                    <ul class="menu2">
                        <xsl:for-each select="menu/top">
                            <li class="top">
                                <a class="top_link">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="@url"/>
                                    </xsl:attribute>
                                    <span>
                                        <xsl:value-of select="@title"/>
                                    </span>
                                    <b>
                                      <xsl:if test="count(link) > 0">
                                        <xsl:attribute name="class">down</xsl:attribute>
                                      </xsl:if>
                                    </b>
                                </a>

                                <xsl:call-template name="nested_levels">
                                    <xsl:with-param name="level" select="1"/>
                                </xsl:call-template>

                            </li>
                        </xsl:for-each>
                    </ul>
                </div>
                <xsl:comment>Copyright: AndrewP</xsl:comment>
                <hr style="clear:both;" />
                <h4>
                    <a href="http://www.script-tutorials.com/creating-multilevel-menu-using-xslt/">back to original article page</a>
                </h4>
            </body>
        </html>
    </xsl:template>

    <xsl:template name="nested_levels">
        <xsl:param name="level" select="0"/>
        <xsl:if test="count(link) > 0">
            <ul>
                <xsl:if test="$level = 1">
                    <xsl:attribute name="class">sub</xsl:attribute>
                </xsl:if>

                <xsl:for-each select="link">
                    <li>
                        <xsl:choose>
                        <xsl:when test="count(link) = 0 and position()=1">
                            <xsl:attribute name="class">subtop</xsl:attribute>
                        </xsl:when>
                        <xsl:when test="count(link) &gt; 0 and position()=1">
                            <xsl:attribute name="class">flytop</xsl:attribute>
                        </xsl:when>
                        <xsl:when test="count(link) &gt; 0 and not(position()=last())">
                            <xsl:attribute name="class">fly</xsl:attribute>
                        </xsl:when>
                        <xsl:when test="count(link) = 0 and position()=last()">
                            <xsl:attribute name="class">subbot</xsl:attribute>
                        </xsl:when>
                        <xsl:when test="count(link) &gt; 0 and position()=last()">
                            <xsl:attribute name="class">flybot</xsl:attribute>
                        </xsl:when>
                        <xsl:otherwise></xsl:otherwise>
                        </xsl:choose>

                        <a>
                            <xsl:attribute name="href">
                                <xsl:value-of select="@url"/>
                            </xsl:attribute>
                            <xsl:value-of select="@title"/>
                            <xsl:value-of select="$level"/>
                        </a>

                        <xsl:call-template name="nested_levels">
                            <xsl:with-param name="level" select="$level + 1"/>
                        </xsl:call-template>

                    </li>
                </xsl:for-each>
            </ul>
        </xsl:if>
    </xsl:template>

</xsl:stylesheet>

This script will generate full HTML of page, with including css styles, defining doctype etc. I hope that most of code is pretty understandable, note one point – to provide multilevel support I made special template ‘nested_levels’ which I using to generate code for inner sublevels in recursion, so you can have even 5 or 10 sublevels if you want.

Live Demo

download in package

Conclusion

I hope that today’s article was very interesting, and possible you even will change your oppinion about using xsl in your projects, anyway – this is good practic for our brains to play with xsl. Good luck!

How to Easily display Delicious bookmarks using XSLT transformation

Today we will create application which will show our Delicious bookmarks. We will use XSLT transformation to parse XML provided by Delicious. I will using my profile for our sample. And here are path for my XML feeds: http://feeds.delicious.com/v2/rss/AramisGC. So, we have all for begining. Today I`ll show you how to display this information in your projects.

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the source files and lets start coding !

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Delicious bookmarks. Quite all code commented, so I hope it will easy to understand it.

<?php

$sMethod = 'http://feeds.delicious.com/v2/rss/AramisGC';
$sXmlSrc = getDeliciousXml($sMethod);

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/delicious.xslt');

$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules

echo $proc->transformToXML($xml);

// this function get delicious information using caches (not more than 1 times per hour)
function getDeliciousXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';

    // cache filename
    $sFilename = date('YmdH').'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
.dl-unit{background-color:#F3F3F3;border:1px solid #CCC;position:relative;margin:10px;padding:10px}
.dl-unit h3, .dl-unit div{border-bottom:1px dashed #888;padding:5px;overflow:hidden}
.dl-unit div p{float:left;margin-right:20px}
.dl-unit div p:first-child{font-weight:bold}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/delicious.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="channel">
        <xsl:variable name="channelDescription" select="description"/>
        <xsl:variable name="authorLink" select="link"/>
        <html>
            <head>
                <link media="all" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                <h1>
                    <a>
                        <xsl:attribute name="href">
                            <xsl:value-of select="$authorLink"/>
                        </xsl:attribute>
                        <xsl:value-of select="$channelDescription"/>
                    </a>
                </h1>
                <xsl:for-each select="item">
                    <div class="dl-unit">
                        <h3>
                            <a target="_blank">
                                <xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
                                <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
                                <xsl:value-of select="title"/>
                            </a>
                        </h3>
                        <div><p>Description:</p><p><xsl:value-of select="description" disable-output-escaping="yes" /></p></div>
                        <div>
                            <a target="_blank">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="comments"/>
                                </xsl:attribute>
                                link to comments
                            </a>
                        </div>
                        <div><p>When:</p><p><xsl:value-of select="substring(pubDate, 0, 26)"/></p></div> <!-- we will take first 26 symbols -->
                        <div><p>Tags:</p><p>
                            <xsl:for-each select="category">
                                <a target="_blank">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="@domain"/>
                                        <xsl:value-of select="."/>
                                    </xsl:attribute>
                                    <xsl:value-of select="."/>
                                </a> |
                            </xsl:for-each>
                        </p></div>
                    </div>
                </xsl:for-each>
                </div>
                <xsl:comment>Copyright: AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. Few important notes

During checking my PHP file you will notice that I perform caching of Delicious requests. I don`t load provided RSS often that once per hour. No need overload Delicious server with often requests

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

Thats all.

Live Demo

download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

As example we have next source XML:

<?xml version="1.0"?>
<bookstore specialty="novel">
  <book style="autobiography">
    <author>
      <first-name>Joe</first-name>
      <last-name>Bob</last-name>
      <award>Trenton Literary Review Honorable Mention</award>
    </author>
    <price>12</price>
  </book>
  <book style="textbook">
    <author>
      <first-name>Mary</first-name>
      <last-name>Bob</last-name>
      <publication>Selected Short Stories of
        <first-name>Mary</first-name>
        <last-name>Bob</last-name>
      </publication>
    </author>
    <price>55</price>
  </book>
  <magazine style="glossy" frequency="monthly">
    <price>2.50</price>
    <subscription price="24" per="year"/>
  </magazine>
  <book style="novel" id="myfave">
    <author>
      <first-name>Toni</first-name>
      <last-name>Bob</last-name>
      <degree from="Trenton U">B.A.</degree>
      <degree from="Harvard">Ph.D.</degree>
      <award>Pulitzer</award>
      <publication>Still in Trenton</publication>
      <publication>Trenton Forever</publication>
    </author>
    <price intl="Canada" exchange="0.7">6.50</price>
    <excerpt>
      <p>It was a dark and stormy night.</p>
      <p>But then all nights in Trenton seem dark and
      stormy to someone who has gone through what
      <emph>I</emph> have.</p>
      <definition-list>
        <term>Trenton</term>
        <definition>misery</definition>
      </definition-list>
    </excerpt>
  </book>
</bookstore>

This is some bookstore listing

Here are list of rules which we can use in XPath:

• Different levels in tree separate via / symbol. This example will return array with infos of all authors: bookstore/book/author
• Access to attributes we can obtain via @ symbol. That example will return us price of magazine subscription: bookstore/magazine/subscription/@price
• Inside [] we can use number value to tell which (by order) element will need to receive. This example will return us price of second book: bookstore/book[2]/price
• Also, we can use subpaths in [] and use this as check, are necessary elements present in our tree or not. Example – get all books with style=novel: bookstore/book[@style="novel"]
• Another example – get all books with excerpts: bookstore/book[excerpt]
• Another example – get all books if author have any awards: bookstore/book[author[award]]
• Or – get all authors who have any awards: bookstore/book/author[award]
• Or we can add some logic – get all books if author Don`t have awards: bookstore/book[author[not(award)]]
• And last sample – get all books with price from 10 and 20: bookstore/book[price < 20 and price > 10]

Interesting, isn`t it? Now, how we can use that. In first sample – we will store some defined value into variable:

<xsl:variable name="magSubPrice" select="bookstore/magazine/subscription/@price"/>

Now we will walk through array of located elements:

<xsl:for-each select="bookstore/book/author">
    // do some actions with authors
</xsl:for-each>

And, here are one interesting service: http://xpath.me/ – where you will able to play with all our samples online. It will allow you to feel all this by self. Very nice and easy service.

Conclusion

I hope that today’s article will very useful for your projects. Will glad if this will help you in your work. Good luck!

How to Build tags cloud using XSLT transformation

As all we know – tags cloud is some array of links at page where bigger units mean more important things. If your project have any interesting information (blogs, or other text content), it will useful to put cloud of tags at your homepage. Of course, one of way will just make all this using pure PHP to draw necessary links in different size, but lets try today to use xslt than just PHP. One of good side is that we can configure all necessary params (as example min font size and max font size, possible other details like different font classes if you want to use different colors etc) out of PHP logic.

Here are samples and downloadable package:

Live Demo

download in package

Ok, as example we have XML-based array of our cloud elements:

<?xml version="1.0" encoding="utf-8" ?>
<cloud>
    <tag id="1">
        <name>web</name>
        <amount>2</amount>
    </tag>
    <tag id="2">
        <name>development</name>
        <amount>10</amount>
    </tag>
    <tag id="3">
        <name>php</name>
        <amount>6</amount>
    </tag>
    <tag id="4">
        <name>jQuery</name>
        <amount>2</amount>
    </tag>
    <tag id="5">
        <name>xhtml</name>
        <amount>10</amount>
    </tag>
    <tag id="6">
        <name>xslt</name>
        <amount>1</amount>
    </tag>
    <tag id="7">
        <name>css</name>
        <amount>7</amount>
    </tag>
    <tag id="8">
        <name>programming</name>
        <amount>8</amount>
    </tag>
</cloud>

As we can see – I put name of tag in NAME tag, and amount of repeating (weight) into AMOUNT tag. Here are ‘development’ and ‘xhtml’ is most popular words.

And now we should to create our XSL part to perform transformation all this into user friendly view. Lets start coding all necessary files to our sample:

Step 1. PHP

Here are our php file which we using to transform our xml feed with tags:

index.php

As we can see – I just load our XML file here and perform transformation. Of course this can be not just static XML file, but also and any PHP-based source of XML in your custom cases. If so – you will need just to make small changes in my code. But currently – static case will enough (our file will ‘cloud.xml’).

<?php

// Obtain cloud data from file
$sXmlSrc = file_get_contents('cloud.xml');

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/tagcloud.xslt');

$proc = new XSLTProcessor; // configure xslt processor
$proc->importStyleSheet($xsl); // attach the xsl rules

echo $proc->transformToXML($xml); // draw result tags cloud

?>

Step 2. CSS

Not so necessary step, but here are just few styles for our sample:

css/styles.css

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:500px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em;overflow:hidden}
.main a{float:left;margin-right:5px;line-height:30px}

Step 3. XSLT

And, most interesting part of my post – used XSLT rules:

xslt/tagcloud.xslt

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                    <h1>Tags cloud via XSLT</h1>
                    <xsl:apply-templates />
                </div>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="cloud">
        <xsl:variable name="maxAmount" select="tag[not(amount &lt; ../tag/amount)]/amount" />
        <xsl:variable name="minValue" select="tag[not(amount &gt; ../tag/amount)]/amount" />

        <xsl:variable name="perc100" select="$maxAmount - $minValue"/>
        <xsl:variable name="perc1">
            <xsl:choose>
                <xsl:when test="$perc100 = 0">100</xsl:when>
                <xsl:otherwise><xsl:value-of select="100 div $perc100"/></xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <xsl:variable name="maxFont">28</xsl:variable>
        <xsl:variable name="minFont">12</xsl:variable>

        <xsl:variable name="fontDiff" select="$maxFont - $minFont"/>
        <div>
        <xsl:for-each select="tag">
                <xsl:variable name="fontSize" select="$minFont + ceiling($fontDiff div 100 * ((amount - $minValue) * $perc1))"/>
                <a href="your_website_url/tag/{name}" style="font-size: {$fontSize}px">
                    <xsl:value-of select="name" />
                </a>
        </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

I set max font size and min font size as maxFont and minFont variables. All other calculations need just for calculation of result font size (depends on ‘amount’ value of our tags). All results we will able to see by links above:

Result of transformation

download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

Today we will create application which will show our Youtube videos. Also we will draw youtube player for our videos. We will use XSLT transformation to parse XML provided by Youtube API. I will using my profile for our sample. Youtube API providing next path for XML feed: http://gdata.youtube.com/feeds/api/users/AramisGC/uploads. So, we have all to start. Today I`ll show you how to display this information in any view.

Here are samples and downloadable package:

Live Demo

download in package

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Youtube videos. Quite all code commented, so I hope it will easy to understand it.

<?php

$sMethod = 'http://gdata.youtube.com/feeds/api/users/AramisGC/uploads';
$sXmlSrc = getYtbXml($sMethod);

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/youtube.xslt');

$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules

echo $proc->transformToXML($xml);

// this function get youtube information using caches (not more than 1 times per hour)
function getYtbXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';

    // cache filename
    $sFilename = date('YmdH').'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

require_once('footer.html');

?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

.main div.video_block{width:640px;float:left;text-align:left;display:block;min-height:400px;padding:5px}
.main div.video_thumbs img{border-width:0px}
.main div.thumb{float:left;width:100px;height:110px;overflow:hidden;margin:6px}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/youtube.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:media="http://search.yahoo.com/mrss/" xmlns:n1="http://www.w3.org/2005/Atom" >
    <xsl:variable name="XML" select="/"/>
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
                <script type="text/javascript" src="js/swfobject.js"></script>
                <script type="text/javascript" src="js/youtube.js"></script>
            </head>
            <body>
                <div class="main">
                    <h1>My videos</h1>
                    <xsl:for-each select="$XML">
                        <xsl:for-each select="n1:feed">
                            <xsl:if test="n1:entry[1]">
                                <div class="video_block">
                                    <div id="view_video">
                                        <xsl:for-each select="n1:entry[1]/media:group/media:content">
                                            <xsl:if test="@type = 'application/x-shockwave-flash'">
                                                <embed width="640" height="385" name="view_video_swf" id="view_video_swf" bgcolor="#000" quality="high">
                                                    <xsl:attribute name="src">
                                                        <xsl:value-of select="@url"/>
                                                    </xsl:attribute>
                                                </embed>
                                            </xsl:if>
                                        </xsl:for-each>
                                    </div>
                                    <div id="view_video_title">
                                        <xsl:value-of select="n1:entry[1]/n1:title"/>
                                    </div>
                                </div>
                            </xsl:if>
                            <div class="video_thumbs">
                                <xsl:for-each select="n1:entry/media:group">
                                    <div class="thumb">
                                        <xsl:for-each select="media:content">
                                            <xsl:if test="@type = 'application/x-shockwave-flash'">
                                                <a href="javascript:void(0)">
                                                    <xsl:attribute name="onclick">playVideo('<xsl:value-of select="@url"/>','<xsl:value-of select="../media:title"/>');</xsl:attribute>
                                                    <xsl:for-each select="../media:thumbnail[1]">
                                                        <img width="100px" height="60px">
                                                            <xsl:attribute name="src"><xsl:value-of select="@url"/></xsl:attribute>
                                                        </img>
                                                    </xsl:for-each>
                                                    <xsl:value-of select="../media:title"/>
                                                </a>
                                            </xsl:if>
                                        </xsl:for-each>
                                    </div>
                                </xsl:for-each>
                                <div style="clear:both"></div>
                            </div>
                        </xsl:for-each>
                    </xsl:for-each>
                </div>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. JS

Here are two JS files:

js/youtube.js

function playVideo(url, title) {
    obj = new SWFObject(url, "view_video_swf", "640", "385", "7");
    obj.write("view_video");
    document.getElementById('view_video_title').innerHTML = title;
}

This file contain only one easy function which will allow us to play another videos

js/swfobject.js

This is just SWFObject class. Available as a download package.

Step 5. Few important notes

During checking my PHP file you will notice that I perform caching of Youtube API XML requests. I don`t load provided RSS often that once per hour. No need overload Youtube server with often requests

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

Thats all.

Live Demo

download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

Today I will tell you about another similar tutorial, but about Stumbleupon. We will create application which will show our (or any wished profile) Stumbleupon posts. And we will use XSLT transformation to parse XML (RSS) provided by Stumbleupon. I will using my profile for our sample. After some investigation I find that SU provide our list of favs in rss format here: http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc – where ‘aramisgc’ is my account name. Also, we can obtain our comments too: http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc&comments=1. So, we have all to start. Today I`ll show you how to display this information in any view.

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the source files and lets start coding !

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Stumbleupon posts. As you can see – I already put several samples ($sMethod values) for different urls. So you can try any. Quite all code commented, so I hope it will easy to understand it.

<?php

//$sMethod = 'http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc&comments=1';
$sMethod = 'http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc';
$sXmlSrc = getStumbleuponStoriesXml($sMethod);

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/stumbleupon.xslt');

$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules

echo $proc->transformToXML($xml);

// this function get stumbleupon information using caching (not more than 1 times per hour)
function getStumbleuponStoriesXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';

    // cache filename
    $sFilename = date('YmdH').'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
.su-unit{background-color:#F3F3F3;border:1px solid #CCC;position:relative;margin:10px;padding:10px}
.su-unit h3, .su-unit div{border-bottom:1px dashed #888;padding:5px;overflow:hidden}
.su-unit div p{float:left;margin-right:20px}
.su-unit div p:first-child{font-weight:bold}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/stumbleupon.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="channel">
        <xsl:variable name="channelDescription" select="description"/>
        <xsl:variable name="authorLink" select="link"/>
        <html>
            <head>
                <link media="all" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                <h1>
                    <a>
                        <xsl:attribute name="href">
                            <xsl:value-of select="$authorLink"/>
                        </xsl:attribute>
                        <xsl:value-of select="$channelDescription"/>
                    </a>
                </h1>
                <xsl:for-each select="item">
                    <div class="su-unit">
                        <h3>
                            <a target="_blank">
                                <xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
                                <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
                                <xsl:value-of select="title"/>
                            </a>
                        </h3>
                        <div><p>Description:</p><p><xsl:value-of select="description" disable-output-escaping="yes" /></p></div>
                        <div>
                            <a target="_blank">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="comments"/>
                                </xsl:attribute>
                                link to comments
                            </a>
                        </div>
                        <div><p>When:</p><p><xsl:value-of select="substring(pubDate, 0, 26)"/></p></div> <!-- we will take first 26 symbols -->
                    </div>
                </xsl:for-each>
                </div>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. Few important notes

During checking my PHP file you will notice that I perform caching of Stumbleupon requests. I don`t load provided RSS often that once per hour. No need overload Stumbleupon server with often requests

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

Thats all.

Live Demo

download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

Today I will tell you how to create application which will display your Tweets (or someone else) at your website. And we will use XSLT transformation to parse XML (RSS) provided by Twitter. As example I take my Twitter account. At this page you can see that I have RSS channel: http://twitter.com/statuses/user_timeline/83882961.rss. Today I`ll show you how to display this information in any view.

Here are samples and downloadable package:

Live Demo

download in package

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Twitter posts. All code commented, so I hope it will easy to understand it.

<?php

$sMethod = 'http://twitter.com/statuses/user_timeline/83882961.rss';
$sXmlSrc = getTwitterStoriesXml($sMethod);

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/twitter.xslt');

$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules

echo '<link media="all" href="css/styles.css" type="text/css" rel="stylesheet">';
echo $proc->transformToXML($xml);

// this function get twitter information using caching (not more 1 times per minute)
function getTwitterStoriesXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';

    // cache filename
    $sFilename = date('YmdHi').'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
.tw-unit{background-color:#F3F3F3;border:1px solid #CCC;position:relative;margin:10px;padding:10px}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/twitter.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="channel">
        <xsl:variable name="channelDescription" select="description"/>
        <xsl:variable name="authorLink" select="link"/>
        <xsl:variable name="authorName" select="substring(title, 10)"/> <!-- we will cut off Twitter / -->
        <xsl:variable name="authorNameLength" select="string-length($authorName)+2"/> <!-- we will calculate length of our name + 2 symbols more (for colon and space symbols) -->
        <html>
            <body>
                <div class="main">
                <h1><xsl:value-of select="$channelDescription"/></h1>
                <xsl:for-each select="item">
                    <div class="tw-unit">
                        <h3>
                            <a target="_blank">
                                <xsl:attribute name="title"><xsl:value-of select="substring(title, $authorNameLength)"/></xsl:attribute>
                                <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
                                <xsl:value-of select="substring(title, $authorNameLength)"/>
                            </a>
                        </h3>
                        <div>Submitted by:
                            <a>
                            <xsl:attribute name="href">
                                <xsl:value-of select="$authorLink"/>
                            </xsl:attribute>
                            <xsl:value-of select="$authorName"/>
                            </a>
                        </div>
                        <div>Description: <xsl:value-of select="substring(description, $authorNameLength)"/></div>
                        <div>Source: <xsl:value-of select="*[name()='twitter:source']"/></div>
                        <div>When: <xsl:value-of select="substring(pubDate, 0, 26)"/></div> <!-- we will take first 26 symbols -->
                    </div>
                </xsl:for-each>
                </div>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. Few important notes

During checking my PHP file you will notice that I perform caching of Twitter requests. I don`t load provided RSS often that once per minute. No need overload Twitter server with often requests

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

Thats all. After this, you will able to load not only my RSS feeds (of 83882961.rss), but also and your own too.

Live Demo

download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

As we know, Digg become very popular last time, so why not use it for our purposes? I decided to investigate Digg a little and learn how possible to draw Digg posts at my own website. And I make own unique method. Hope you will like it.
Reading http://digg.com/api/docs/1.0/groups/ I find necessary ways to get posts XML results. Just check story.getPopular method. Yes, this is usual to use different reparse methods in PHP, but lets learn something new like XSLT (Extensible Stylesheet Language Transformations).

Here is a sample:

Live Demo

download in package

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Digg stories. As you can see – I already put several samples ($sMethod values) for different methods. So you can try any method. All code commented, so I hope it will easy to understand it.

<?php

// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getHot';
$sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getTop';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getPopular';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getUpcoming';

$sXmlSrc = getDiggStoriesXml($sMethod);

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/digg.xslt');

// Configure the transformer
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl); // attach the xsl rules

echo '<link media="all" href="css/styles.css" type="text/css" rel="stylesheet">';
echo $proc->transformToXML($xml);

// this function get digg information using caching (not more 1 times per minute)
function getDiggStoriesXml($sUrl = 'http://services.digg.com/1.0/endpoint?method=story.getPopular') {
    // used cache folder
    $sCacheFolder = 'cache/';

    // formatting cache name
    $sFilename = date("YmdHi").'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        //grab the XML and save it to a temp XML file
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, "w");
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array("User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15") ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

?>

Step 2. CSS

Here are used CSS styles.

css/styles.css

.news-summary, .news-full, .news-full-confirm {
background:none repeat scroll 0 0 #F3F3F3;
border:1px solid #CCCCCC;
clear:left;
margin:10px;
min-height:55px;
padding:10px;
position:relative;
}
.news-body {
padding-left: 60px;
}
.news-body a.body {
text-decoration: none;
padding: 4px;
margin: -4px 0 -4px -4px;
color: #555;
position: relative;
z-index: 2;
}
.news-summary .news-body em {
color: #999;
white-space: nowrap;
}
.news-body em a {
color: #777;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
.news-body em a:hover {
color: #000;
}
.news-digg {
position: absolute;
top: 0.8em;
left: 0;
text-align: center;
font-size: 85%;
margin: 0 0 0 3px;
padding: 0;
list-style: none;
background: url(../img/shade-news.gif) no-repeat;
}
.digg-count a, .digg-count span  {
display: block;
padding: 10px 0 4px 0;
text-decoration: none;
width: 50px;
min-height: 40px;
color: #93883F;
text-align: center;
}
.news-summary .digg-count strong {
font-size: 160%;
font-weight: normal;
letter-spacing: -1px;
line-height: 1;
display: block;
color: #736926;
}
.digg-count img {
position: absolute;
top: 0;
left: 0;
border: none;
}
.digg-count a:hover, .digg-count a:hover strong {
color: #998D43;
}
.news-body h3 {
margin: 2px 0 0 0;
font-size: 115%;
letter-spacing: -0.01em;
font-weight: bold;
line-height: 1.1;
}
.news-body p {
margin: 0.2em 0 0.1em 0;
line-height: 1.3;
}
.news-body em {
font-style: normal;
font-size: 85%;
color: #666;
}
span.news-img {
display: block;
width: 80px;
height: 80px;
background: #ddecee url(../img/v-default.gif);
border: 1px solid #a5c2e3;
position: absolute;
left: 60px;
top: 8px;
}
.img-summary span.news-img {
background: #ddecee url(../img/i-default.gif);
}
span.news-img em {
display: block;
width: 80px;
height: 80px;
text-indent: -2000em;
background: url(../img/v-frame-simple.png);
}
.img-summary span.news-img em {
background: url(../img/i-frame-simple.png);
}
.v .news-body {
margin-left:0;
min-height:70px;
padding-left:152px;
padding-right:0;
}
.comments {
background:transparent url(../img/i-cmts.gif) no-repeat scroll 0 4px;
word-spacing:-0.1em;
color:#578CCA;
padding:4px 6px 4px 18px;
font-size:85%;
}

Step 3. XSLT

I hope this is most interesting part of my story, used XSLT rules:

xslt/digg.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' version='1.0' encoding='UTF-8' indent='yes'/> -->
    <xsl:template match="stories">
        <html>
            <body>
                <xsl:for-each select="story">
                    <div>
                        <xsl:attribute name="class">
                            <xsl:choose>
                                <xsl:when test="thumbnail">news-summary v img-summary</xsl:when>
                                <xsl:otherwise>news-summary</xsl:otherwise>
                            </xsl:choose>
                        </xsl:attribute>

                        <div class="news-body">
                            <h3>
                                <a target="_blank">
                                    <xsl:attribute name="title"><xsl:value-of select="@link"/></xsl:attribute>
                                    <xsl:attribute name="href">
                                        <xsl:for-each select="shorturl">
                                            <xsl:value-of select="@short_url"/>
                                        </xsl:for-each>
                                    </xsl:attribute>
                                    <xsl:value-of select="title"/>

                                <xsl:for-each select="thumbnail">
                                    <span style="background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat;" class="news-img">
                                    <xsl:attribute name="style">background: transparent url(<xsl:choose>
                                            <xsl:when test="string-length(@src) > 0">
                                                <xsl:value-of select="@src" />
                                              </xsl:when>
                                        </xsl:choose>) repeat scroll 0% 0%;</xsl:attribute>
                                    <em>view!</em></span>
                                </xsl:for-each>
                                </a>
                            </h3>
                            <div>
                                <p>
                                <a class="body" style="color:#555;">
                                <xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
                                <xsl:value-of select="description"/>
                                </a>
                                <em>(Submitted by <a>
                                <xsl:for-each select="user">
                                    <xsl:attribute name="href">

http://digg.com/users/<xsl:choose>

                                            <xsl:when test="string-length(@name) > 0">
                                                <xsl:value-of select="@name" />
                                              </xsl:when>
                                        </xsl:choose>
                                    </xsl:attribute>
                                    <xsl:value-of select="@name" />
                                </xsl:for-each>
                                </a>)</em>
                                </p>
                            </div>

                    		<div class="news-details">
                    			<span class="tool comments">
                                    <xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
                                    <xsl:value-of select="@comments"/> Comments</span>
                            </div>

                        </div>

                    	<ul class="news-digg">
                    		<li class="digg-count">
                        		<a>
                                <xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
                                <xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
                        		<strong><xsl:value-of select="@diggs"/></strong> diggs</a>
                            </li>
                    	</ul>

                    </div>
                </xsl:for-each>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. Images

Also we need several images for our project:

Step 5. Few important things

After reading http://digg.com/api/docs/concepts I found ‘Be Polite, Please!’, so I decode not request Digg api any time when user call it, and I made way using cache system. I started caching results. I created ‘cache’ folder with permission to write (you should create ‘cache’ folder too).
After I put .htaccess file in it with next text:
Options -Indexes

And now check index.php:
$sFilename = date(“YmdHi”).’.xml’;
So I using current year-month-day-hour-minute digits to generate cache filename. Hope you understand my idea

Live Demo

download in package

Conclusion

Today I told you how to display digg posts at your own website via XSLT transformations. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!