News

Writing a RSS News Aggregator with PHP and Ajax

adminBy
0

If you have followed our latest tutorial on installing a local or remote host LAMP server, and got yourself a PHP with Apache and MySQL installation, then you can go through this tutorial without having any problem. We wrote the code for you, so you can just copy paste it, but don`t forget to actually read and understand what is happening!

Writing a RSS News Aggregator with PHP and Ajax

A little bit about RSS

RSS (Really Simple Sindication) is actually an information formatting method, which you can parse as an XML file and format it elsewhere, for example, on your web page. It is one of the fastest ways to get information such as news, or weather so we’ll use it in our script.

Combining RSS with Ajax

In order for our RSS Aggregator to look modern, we have to combine jQuery Ajax with the RSS-getting PHP Script. The advantages of using Ajax include:

  • You can update content on your page without having to reload it
  • You can select options without having to submit the form
  • It adds an extra layer of security

So let`s go to work!

In this case, my web server folder is at the path /var/www on Debian 7.0, but yours may differ.

Just create these files in your web folder:

  • data.php
  • index.html
  • style.css

Now, on the “data.php” file, we are going to add the RSS XML parsing logic and display the

<?php

//Start with sanitization

$rss_array = array(

"mil-gun" => "http://www.milliyet.com.tr/D/rss/rss/Rss_24.xml",
"cnn-tech" => "http://rss.cnn.com/rss/edition_technology.rss",
"cnn-world" => "http://rss.cnn.com/rss/edition_world.rss"
);

$rss_url = $rss_array[$_POST["query"]];

$file_contents = file_get_contents($rss_url);

$base = new SimpleXMLElement($file_contents);

if(!$base) {

echo "Error,wrong RSS format";

}

for($a = 0;$base->channel->item[$a] != null;++$a) {

echo "<div class='news'>";
echo "<div class='title'>";

echo "<a href='{$base->channel->item[$a]->link}'>{$base->channel->item[$a]->title}</a>";
echo "<a class='hide 'onclick='$(this).parent().parent().slideUp()'>Hide</a>";

echo "</div>";

echo "<p>{$base->channel->item[$a]->description}</p>";

echo "</div>";

}

?>

Now let me explain each one of the lines present here. the $rss_array array contains my favorite RSS feeds, and their keys are the same as the values from the HTML form that we are going to describe later. We compare the keys in the associative array against the value that we get from the Ajax request on our HTML file, then using the SimpleXML Library that comes shipped with PHP,we parse it and display it on the page.When you parse a RSS XML file with SimpleXML,often the tree structure looks like this:

/channel

/channel/item

/channel/item/link

/channel/item/description etc.

So in my $base variable that i stored the parsed XML document,if you want to, say retrieve the description from the second item element in the tree, you must refer to $base->channel->item[1]->description,then i`m getting deeper in the XML structure printing out every element inside the item[number] array.Everything that is echoed, goes to the Ajax call in the HTML file, which jQuery inserts it in the HTML page.

So let`s go to the index.html file!

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

$(document).ready(function() {

$("form > select").click(function() {

$.ajax({

method:"POST",
url:"data.php",
data:$("form").serialize()

}).done(function(msg) {

$("#content").html(msg);

});

});

});

</script>
<title>Jimmy`s RSS News Feed</title>

</head>
<body>

<div id="wrapper">

<div id="head">
<h1>Jimmy`s RSS News Aggregator</h1>
<form action="none.asp" method="POST">

<select name="query">
<option value="mil-gun">Milliyet Gundem</option>
<option value="cnn-tech">CNN Technology</option>
<option value="cnn-world">CNN World</option>
<option value="ev-zilei">Evenimentul Zilei</option>
</select>

</form>

</div>
<div id="content">

 <!-- Here goes what's returned from the PHP file -->

</div>
</div>
</body>
</html>

Between the script tags, i tell jQuery to wait until the DOM is loaded via $(document).ready(callback) here, i get the users chosen option, without him having to press submit (that`s why i use .click event),then via the ajax object, i make a POST request to the PHP file, which the PHP file returns the response as HTML elements, which the Jquery puts them inside the content div in the HTML file. So in essence:

  • The HTML file is rendered, it awaits for user to click an option from the drop down menu
  • When user clicks an option, jQuery sends an Ajax request to the PHP file.
  • The PHP file returns a div with title, link, and description in the RSS file for each news article.
  • The jQuery display what’s returned from the PHP file

Let`s see the CSS file:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {

	background:url('background/candy.jpg') repeat-x;

}

#wrapper {

	margin:20px auto;
	width:60%;
	background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
height:900px;
border-style:solid;
border-width:3px;
border-color:#797979;

}

#head {

	width:100%;
	height:200px;
	background: rgb(164,179,87); /* Old browsers */
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */

}

#head > h1 {

	color:white;
	float:left;
	font-size:30px;
	font-family:"Open Sans";
	padding:5px;

}

/* We add the aggregator form into the head part */

#head > form {

	position:relative;
	left:150px;

}

#head > form > select {

	width:400px;
	height:50px;
	background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

}

#content {

	width:100%;
	height:680px;
	padding:0px;
	overflow: scroll;

}

#content > p {

	font-family:"Open Sans";
	font-size:12px;

}

#content > .news {

	width:95%;
	height:150px;
	margin:10px auto;
	padding:0px;
	background-color:#3E3E3E;
	border-style:solid;
	border-width:1px;
	border-color:white;
	overflow:hidden;
	text-overflow:ellipsis;

}

#content > .news > p {

	padding:15px;
	font-family:"DejaVu Sans";
	color:white;
	font-size:12px;
	overflow:hidden;
	text-overflow:ellipsis;
	font-weight:bold;

}

#content > .news > .title {

	height:25px;
	width:100%;

	background-color:#006788;
	padding:0px;
	float:left;

}
#content > .news > .title > .hide {

		font-family:"Open Sans";
	font-size:15px;
	color:white;
	float:right;
	font-weight:bold;
	padding:5px;

}

#content > .news > .title > a {

	font-family:"Open Sans";
	font-size:15px;
	color:white;
	float:left;
	font-weight:bold;

}

#content > .news > .title > button {

	float:right;
	border-style:none;
	background:none;
	font-family:"Open Sans";
	color:white;
	text-decoration:underline;
	padding:0px;

}

#content > .news > .title > button:hover {

	color:#34C919;

}

#content .news > .description {

}

I also added a little cool trick 😉 You can press hide and have that post hidden using jQuery. It hides the article div by sliding it up.

Now play with it, add some more RSS, change the CSS file (Hey,i`m a developer, not a designer), and if you add some more features, be sure to hit me up!

Get Started In Video Mapping

Previous article

Secure Data Centres for Africa

Next article

You may also like

1 Comment

  1. You nicely describe writing a rss news aggregator with PHP and Ajax by index.html file! Thanks a lot for it.

    1. You know I got love for my readers 😀 Glad that you liked it.

      1. I like it bcz i enjoy to read your post. Its a informative post and also very useful for me.

        1. So stay tuned! I will talk about Web Development fads, and will add some more tutorials on jQuery, PHP, WordPress etc.

Comments are closed.

More in News