<rss version="2.0">
<channel>
<title>CNN.com</title>
<link>http://www.example.org</link>
<description>A short description of this feed</description>
<language>en</language>
<pubDate>Fri, 11 Aug 2006 07:56:23 EDT</pubDate>
<item>
<title>Catchy Title</title>
<link>http://www.example.org/2005/11/catchy-title.html</link>
<description>
The description can hold any content you wish, including XHTML.
</description>
<pubDate> Fri, 11 Aug 2006 07:55:28 EDT</pubDate>
</item>
<item>
<title>Another Catchy Title</title>
<link>http://www.example.org/2005/11/another-catchy-title.html</link>
<description>
The description can hold any content you wish, including XHTML.
</description>
<pubDate> Fri, 11 Aug 2006 07:55:28 EDT</pubDate>
</item>
</chanel>
</rss>

The feed may contain any number of <item> items, each item holding different news or blog entries or whatever content you wish to store.

Implementing the AJAX RSS Reader

In order for this exercise to function correctly, you need to enable XSL support in your PHP installation. In the exercise that will follow we will build our own AJAX-enabled RSS reader application. The main characteristics for the application are:

• We'll keep the application simple. The list of feeds will be hard-coded in a PHP file on the server.
• We'll use XSLT to transform the RSS feed data into something that we can display to the visitor. The XSL transformation will be performed on the server side, using PHP code.
• We'll use the SimpleXML library to read the XML response from the news server. SimpleXML was introduced in PHP 5, and you can find its official documentation at http://php.net/simplexml. SimpleXML is an excellent library that can make reading XML sources much easier than using the DOM.

Feeds will be loaded dynamically and are displayed as links in the left column. Clicking on a feed will trigger an HTTP request and the server script will acquire the desired RSS feed.

The server then formats the feed with XSL and returns an XML string. Results are then displayed in a human-readable form.

Building the RSS Reader Application

1. Create a new folder named rss_reader.

2. Let's start with the server. Create a new file named rss_reader.php, and add this code to it:

<?php
 
// load helper scripts
require_once ('error_handler.php');
require_once ('rss_reader.class.php');
 
// create a new RSS Reader instance
$reader = new CRssReader(urldecode($_POST['feed']));
 
// clear the output
if(ob_get_length()) ob_clean();
 
// headers are sent to prevent browsers from caching
header('Expires: Fri, 25 Dec 1980 00:00:00 GMT'); // time in the past
header('Last-Modified: ' . gmdate( 'D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/xml');
 
// return the news to the client
echo $reader->getFormattedXML();
 
?>

3. Create a new file named rss_reader.class.php, and add this code to it:

<?php
 
// this class retrieves an RSS feed and performs a XSLT transformation
class CRssReader
{
  private $mXml;
  private $mXsl;
 
// Constructor - creates an XML object based on the specified feed
function __construct($szFeed)
{
  // retrieve the RSS feed in a SimpleXML object
  $this->mXml = simplexml_load_file(urldecode($szFeed));
  // retrieve the XSL file contents in a SimpleXML object
  $this->mXsl = simplexml_load_file('rss_reader.xsl');
}
 
// Creates a formatted XML document based on retrieved feed
public function getFormattedXML()
{
  // create the XSLTProcessor object
  $proc = new XSLTProcessor;
 
  // attach the XSL
  $proc->importStyleSheet($this->mXsl);
 
  // apply the transformation and return formatted data as XML string
  return $proc->transformToXML($this->mXml);
}
 
}
 
?>

4. Create a new file named rss_reader.xsl, and add this code to it:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<dl>
<xsl:for-each select="rss/channel/item">
<dt><h3><xsl:value-of select="title" /></h3></dt>
<dd>
<span class="date"><xsl:value-of select="pubDate" /></span>
<p>
<xsl:value-of select="description" />
<br />
<xsl:element name="a">
<xsl:attribute name = "href">
<xsl:value-of select="link" />
</xsl:attribute>
read full article
</xsl:element>
</p>
</dd>
</xsl:for-each>
</dl>
</xsl:template>
</xsl:stylesheet>

5. Now add the standard error-handling file, error_handler.php.Here's the code for it:

<?php
 
// set the user error handler method to be error_handler
set_error_handler('error_handler', E_ALL);
 
// error handler function
function error_handler($errNo, $errStr, $errFile, $errLine)
{
  // clear any output that has already been generated
  if(ob_get_length()) ob_clean();
  // output the error message
  $error_message = 'ERRNO: ' . $errNo . chr(10) .
  'TEXT: ' . $errStr . chr(10) .
  'LOCATION: ' . $errFile .
  ', line ' . $errLine;
  echo $error_message;
  // prevent processing any more PHP scripts
  exit;
}
 
?>

6. In the rss_reader folder, create a file named config.php, where we'll add the feeds our application will aggregate.

<?php
 
  // Set up some feeds
  $feeds = array ('0' => array('title' => 'CNN Technology',
  'feed' => 'http://rss.cnn.com/rss/cnn_tech.rss'),
  '1' => array('title' => 'BBC News',
  'feed' => 'http://news.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml'), 
  '2' => array('title' => 'Wired News',
  'feed' => 'http://wirednews.com/news/feeds/rss2/0,2610,3,00.xml'));
 
?>

7. Create a new file named index.php, and add this code to it:

<?php
 
// load the list of feeds
require_once ('config.php');
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX RSS Reader</title>
<link rel="stylesheet" type="text/css" href="rss_reader.css"/>
<script src="rss_reader.js" type="text/javascript"></script>
</head>
<body>
 
<h1>AJAX RSS Reader</h1>
<div id="feeds">
<h2>Feeds</h2>
<ul id="feedList">
 
<?php
 
// Display feeds
for ($i = 0; $i < count($feeds); $i++)
{
  echo '<li id="feed-' . $i . '"><a href="javascript:void(0);" ';
  echo 'onclick="getFeed(document.getElementById(\'feed-' . $i .
  '\'), \'' . urlencode($feeds[$i]['feed']) . '\');">';
  echo $feeds[$i]['title'] . '</a></li>';
}
 
?>
 
</ul>
</div>
<div id="content">
<div id="loading" style="display:none">Loading feed...</div>
<div id="feedContainer" style="display:none"></div>
<div id="home">
<h2>About the AJAX RSS Reader</h2>
<p>
The AJAX RSS reader is only a simple application that provides
basic functionality for retrieving RSS feeds.
</p>
</div>
</div>
 
</body>
</html>

8. Create a new file named rss_reader.js, and add this code to it:

// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
 
// when set to true, display detailed error messages
var showErrors = true;
 
// creates an XMLHttpRequest instance
function createXmlHttpRequestObject()
{
 
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
 
// try every prog id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
 
try {
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} 
catch (e) {} // ignore potential error
}
}
 
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
 
}
 
// function that displays an error message
function displayError($message)
{
// ignore errors if showErrors is false
if (showErrors)
{
// turn error displaying Off
showErrors = false;
// display error message
alert("Error encountered: \n" + $message);
}
}
 
// Retrieve titles from a feed and display them
function getFeed(feedLink, feed)
{
// only continue if xmlHttp isn't void
if (xmlHttp)
{
// try to connect to the server
try
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
/* Get number of feeds and loop through each one of them to
change the class name of their container (<li>). */
var numberOfFeeds = document.getElementById("feedList").childNodes.length;
 
for (i = 0; i < numberOfFeeds; i++)
document.getElementById("feedList").childNodes[i].className = "";
// Change the class name for the clicked feed so it becomes // highlighted
feedLink.className = "active";
// Display "Loading..." message while loading feed
document.getElementById("loading").style.display = "block";
// Call the server page to execute the server-side operation
params = "feed=" + feed;
xmlHttp.open("POST", "rss_reader.php", true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = handleHttpGetFeeds;
xmlHttp.send(params);
}
else
{
// if connection was busy, try again after 1 second
setTimeout("getFeed('" + feedLink + "', '" + feed + "');", 1000);
}
}
// display the error in case of failure
catch (e)
{
displayError(e.toString());
}
}
}
 
// function that retrieves the HTTP response
function handleHttpGetFeeds()
{
// continue if the process is completed
if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
{
try
{
displayFeed();
}
catch(e)
{
// display error message
displayError(e.toString());
}
}
else
{
displayError(xmlHttp.statusText);
}

}
}
// Processes server's response
function displayFeed()
{
// read server response as text, to check for errors
var response = xmlHttp.responseText;
// server error?
if (response.indexOf("ERRNO") >= 0
|| response.indexOf("error:") >= 0
|| response.length == 0)
throw(response.length == 0 ? "Void server response." : response);
 
// hide the "Loading..." message upon feed retrieval
document.getElementById("loading").style.display = "none";
 
// append XSLed XML content to existing DOM structure
var titlesContainer = document.getElementById("feedContainer");
titlesContainer.innerHTML = response;
 
// make the feed container visible
document.getElementById("feedContainer").style.display = "block";
 
// clear home page text
document.getElementById("home").innerHTML = "";
 
}

9. Create a new file named rss_reader.css, and add this code to it:

body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
 
h1
{
color: #ffffff;
background-color: #3366CC;
padding: 5px;
}
 
h2
{
margin-top: 0px;
}
 
h3
{
margin-bottom: 0px;
}
 
li
{
margin-bottom: 5px;
}
 
div
{
padding: 10px;
}
 
a, a:visited
{
color: #3366CC;
text-decoration: underline;
}
 
a:hover
{
color: #ffffff;
background-color: #3366CC;
text-decoration: none;
}
 
.active a
{
color: #ffffff;
background-color: #3366CC;
text-decoration: none;
}
 
.active a:visited
{
color: #ffffff;
background-color:#3366CC;
text-decoration:none;
}
 
.active a:hover
{
color:#ffffff;
background-color: #3366CC;
text-decoration: none;
}
 
#feeds
{
display: inline;
float: left;
width: 150px;
background-color: #f4f4f4;
border:1px solid #e6e6e6;
}
 
#content
{
padding-left:170px;
border:1px solid #f1f1f1;
}
 
#loading
{
float: left;
display: inline;
width: 410px;
background-color: #fffbb8;
color: #FF9900;
border: 1px solid #ffcc00;
font-weight: bold;
}
 
.date
{
font-size: 10px;
color: #999999;
}

The user interface of this application is pretty basic, all set up in index.php. We first need to include config.php—where our feeds are defined, in order to display the list of feeds on the left panel. Feeds are defined as an associative array of arrays. The main array's keys are numbers starting from 0 and its values are arrays, with keys being the feeds' titles and values being the feeds' URLs. The $feeds array looks like this:

$feeds = array ("0" => array("title" => "CNN Technology",
"feed" => "http://rss.cnn.com/rss/cnn_tech.rss"),
"1" => array("title" => "BBC News",
"feed" => "http://news.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml"),
"2" => array("title" => "Wired News",
"feed" => "http://wirednews.com/news/feeds/rss2/0,2610,3,00.xml"));

We have decided to store the feeds like this for simplicity, but it's easy to extend the code and store them in a database, if you need to.

In index.php we loop through these feeds and display them all as an un-ordered list, each feed being a link inside an <li> element. We assign each link an onclick event function where getFeed function will be called. This function takes two parameters: the <li>'s ID and the feed's URL. We need the ID in order to highlight that link in the list and we need the feed's URL to send it as a parameter in our HTTP request to the server. The urlencode function ensures that the URL is safely sent to the server, which will use urldecode to decode it.

Two more things about index.php:

•    Initially hidden, the <div> with id="loading" will be displayed while retrieving the feed, to inform the user that the feed is loading. This is useful when working with a slow connection or with slow servers, when the retrieval time will be long.
<div id="loading" style="display:none">Loading feed...</div>

•    The <div> with id="feedContainer" is the actual container where the feed will be loaded. The feed will be dynamically inserted inside this div element.
<div id="feedContainer"></div>

rss_reader.js contains the standard XMLHttpRequest initialization, request sending, and response retrieval code. The getFeed function handles the sending of the HTTP request. First it loops through all feed links and un-highlights the links by setting their CSS class to none. It then highlights the active feed link:

/* Get number of feeds and loop through each one of them to
change the class name of their container (<li>). */
var numberOfFeeds = document.getElementById("feedList").childNodes.length;
for (i = 0; i < numberOfFeeds; i++)
document.getElementById("feedList").childNodes[i].className = "";
// Change the class name for the clicked feed to highlight it
feedLink.className = "active";

The next step is to display the Loading feed... message:

// Display "Loading..." message while loading feed
document.getElementById("loading").style.display = "block";

And finally, we send the HTTP request with the feed's title as parameter:

// Call the server page to execute the server-side operation
params = "feed=" + feed;
xmlHttp.open("POST", "rss_reader.php", true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = handleHttpGetFeeds;
xmlHttp.send(params);

The rss_reader.php script creates an instance of the CRssReader class and displays an XSL-formatted XML document, which is returned back to the client. The following lines do the hard work (the code that clears the output and prevents browser caching was stripped):

$reader = new CRssReader(urldecode($_POST['feed']));
echo $reader->getFormattedXML();

CRssReader is defined in rss_reader.class.php. This PHP class handles XML retrieval and formatting. Getting a remote XML file is a piece of cake with PHP 5's new extension: SimpleXML. We'll also load the XSL template and apply it to the retrieved XML.

The constructor of this class retrieves the XML and saves it in a class member named $mXml and the XSL file in a class member named $mXsl:

// Constructor - creates an XML object based on the specified feed
function __construct($szFeed)
{
// retrieve the RSS feed in a SimpleXML object
$this->mXml = simplexml_load_file(urldecode($szFeed));
// retrieve the XSL file contents in a SimpleXML object
$this->mXsl = simplexml_load_file('rss_reader.xsl');
}

The getFormattedXML() function creates a new XSLTProcessor object in order to apply the XSL transformation. The transformToXML method simply returns a formatted XML document, after the XSL has been applied.

// Creates a formatted XML document based on retrieved feed
public function getFormattedXML()
{
// create the XSLTProcessor object
$proc = new XSLTProcessor;
// attach the XSL
$proc->importStyleSheet($this->mXsl);
// apply the transformation and return formatted data as XML string
return $proc->transformToXML($this->mXml);
}

What we need to accomplish with XSL is to loop through each "record" of the XML and display the data inside. A record is delimited by <item> and </item> tags.
In rss_reader.xsl we define a loop like this:

<xsl:for-each select="rss/channel/item">

For example, to display the current title, we write:

<h3><xsl:value-of select="title" /></h3>

Notice how we create a new <a> element with XSLT:

<xsl:element name="a">
<xsl:attribute name = "href">
<xsl:value-of select="link" />
</xsl:attribute>
read full article
</xsl:element>

We use this technique to build links to full articles on their actual websites.
There's also a bit of CSS code that will format the output according to our wish. Everything should be pretty clear if you take a quick look at rss_reader.css.

Summary

Based on what you've learned in this tutorial, you'll be able to build an even better RSS Reader.