Building a RSS Reader – Part 1

Hey Guys,

Today we will start a new series on How to Build a Working RSS Reader for your Website. This will be my first project which will go past a single post. Before we get started, let’s dive into the world of RSS.

What is RSS?

Really Simple Syndication uses a family of standard web feed formats to publish frequently updated information: blog entries, news headlines, audio, video. An RSS document includes full or summarized text, and metadata, like publishing date and author’s name.

RSS feeds enable publishers to syndicate data automatically. A standard XML file format ensures compatibility with many different machines/programs. RSS feeds also benefit users who want to receive timely updates from favourite websites or to aggregate data from many sites.

Read more at wikipedia.

Introduction

In this tutorial, we will set up our basic environment and make requests to grab RSS Feeds provided by various websites. Due to CORS limitations of JavaScript, We will resort to PHP for Feed download as well as conversion from XML to JSON.

Localhost Server

We will be needing a localhost server running on the machine (or an actual server) to host our PHP file. 1stwebdesigner provided a step-by-step tutorial on how to install a web server. I personally use WAMP Server and would totally recommend that.

PHP

Now that we have completed our initial setup, It’s time to get coding. The PHP file (let’s call it fetch.php)  will be responsible for downloading the feed from a website and parse it in JSON format. Later we will make AJAX requests to this file and get JSON formatted RSS Feed.

 


<?php 

    if(!$_GET['url']) {
        echo "{}";
        exit();
    } 

    $fileContents= file_get_contents($_GET["url"]);
    $fileContents = str_replace(array("\n", "\r", "\t"), '', $fileContents);
    $fileContents = trim(str_replace('"', "'", $fileContents));
    $fileContents = stripslashes($fileContents); 

    $simpleXml = simplexml_load_string($fileContents, 'SimpleXMLElement', LIBXML_NOCDATA); 

    if ($simpleXml === false) {
        echo "Failed loading XML\n";
        foreach(libxml_get_errors() as $error) {
            echo "\t", $error->message;
        }
    } else {
	$json = json_encode($simpleXml);
	echo $json;
    }

?>

JavaScript

Now We will test our PHP file using a simple JavaScript file (let’s call it AJAX.js).

It will define a method (constructor) to retrieve JSON feed data from our previously defined PHP file.

 


var Ajax = function(url, success, failed) {

	$.ajax({
		url: "source/feed.php",
		method: "GET",
		type: "json",
		data: {url: url},
		success: success,
		failed: failed
	});

}

HTML

At this point, we don’t really care about HTML. But for the sake of testing, we will create a simple HTML file which will retrieve RSS Feed from CNN.

The result can be viewed inside the console window of the browser.

 


<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="AJAX.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            new Ajax("http://rss.cnn.com/rss/edition.rss", function(result) {
                console.log(result);
            }, function(err) {
                console.log(err);
            });
       </script>
    </body>
</html>

Happy Coding!

Advertisements

2 thoughts on “Building a RSS Reader – Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s