Home > Article > Backend Development > Code to create an RSS aggregator using PHP and AJAX_PHP Tutorial
Code to create an RSS aggregator using PHP and AJAX_PHP Tutorial
- WBOYOriginal
- 2016-07-21 15:56:46718browse
Imagine using a simple HTML file to send a request to a server-side script, receive a custom XML file based on the request, and then display it to the user with almost no need to refresh the browser! The author of this article will explore with you how to combine PHP and AJAX technology in ordinary web applications to create real-time data transmission without the need for browser refresh.
Although this article uses PHP, please remember that any server-side language will work fine. In order to understand this article, I assume you have a basic understanding of JavaScript and PHP or a similar server-side language.
This example uses AJAX to send a request from an RSS feed to a custom PHP object. This PHP object copies the feed on the local server and returns this path. The request object receives this path, parses it, and displays the data to the user in HTML form. This sounds like a lot of steps, but it actually consists of only 4 small files. The reason why four small files are used is to balance their specific strengths and make the entire system process extremely efficient.
I guess some readers might ask why you would create a copy of the feed on your local server instead of simply parsing the original feed. The reason is that this allows bypassing the cross-domain restrictions imposed by the XML HTTP Request object. Later, I will explain how to create this custom PHP object; but first, let's start with form creation.
Create the form that makes the request
The first thing you need to do is include the JavaScript and any CSS files you may want to use between the head tags of your HTML. I included a stylesheet to implement the final layout of the aggregator and used a JavaScript file to make requests and feed parsing:
Next, create a form that makes a request for an RSS feed of your choice. The form I created only consists of an input field and a button to submit the request. The query for this request is a string consisting of the fed input value and a password that will be verified on the server side; as an example, I used the following form:
"password=mypassword
A request is made every time the page loads; therefore, if the page is refreshed, the existing feed string in the input field will be requested when the page loads. Here is an example of form data, along with some div tags. To display a specific node of the analyzed feed:
The three div tags I created are logo, copy, and details, each of which has a style associated with it in the layout stylesheet. We will use them when we analyze the feed, but we first need to be able to access the feed we requested. This can be done using the PHP objects I mentioned earlier.
Create a custom PHP object
I created a small RSS class in PHP that creates a copy of the request feed on the local server so that it can be accessed by the XML HTTP Request object we will create later . Typically, you cannot request a file across domains, which means the file you are requesting needs to be on the local server. This class is a solution to the cross-origin problem because it creates a copy of the feed that is requested on the local server and returns the local path to the feed, which is then accessed by the Request object.
The only method in this class is a request method, which has only one parameter pointing to the URL of the requested RSS feed. Then, it checks whether a directory is located on the local server by the rss name. If it doesn't exist, create one and set its permission mode to 0666, which means the directory is readable and writable. When set as readable, the directory can be accessed later; when set as writable, a copy of the feed can be written to the directory on the local server:
//If the directory does not exist, create one
$dir = "rss";
if (!is_dir($dir))
{
mkdir($dir, 0666);
}
Note
On a Windows machine, for PHP 4.2 Mode setting is not required in versions .0 and above. However, if it exists, it will be ignored; therefore, I kept it in case the project was moved to a UNIX or Linux server.
Before copying the feed to this server, we need a unique filename. I'm using md5 encryption on the full URL to ensure all feed names are unique. With this new filename, it can be concatenated with a string describing the directory pointing to the file; this will be used when creating a copy of the feed:
//Create a unique name
$file=md5($rss_url);
$path="$dir/$file.xml";
Now we can create a copy of this file by using the path defined above and a reference to the original requested feed URL. Finally, return the path to the new file as a response to the request:
//Copy feed to local server
copy($rss_url, "$path");
return $path;
Following is the small, yet powerful RSS class in its entirety:
class RSS
{
function get($rss_url)
{
if($rss_url != "")
{
//Create the directory if it does not exist a
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666); name
$file = md5($rss_url);
$path = "$dir/$file.xml";
//Copy the feed to the local server
copy($rss_url, "$ path");
return $path; to serve as an interface to this class, which is exactly the file we are requesting. This file first validates a password variable queried from the request, and either returns a message specifying that the requester is not an authorized user, or points to an RSS feed (which is copied to the local server after being processed by the request method). path to respond. In order to respond to the RSS feed, the RSS object needs to be included and instantiated, and the request method needs to be activated by using the URL of the requested feed as a parameter:
Copy code
The code is as follows:
if($password == "mypassword")
{
require_once('classes/RSS.class.php');
$rss = new RSS ();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
? >
Combining GET/POST with AJAX
In order to make a POST request, we first need to create the request object. If you have no experience creating request objects, you can read my article "How To Use AJAX" or simply study the sample source code of this article. Once the request object is created, you can call the sendFeed method and pass the URL created by the form:
function sendFeed(url){
post.onreadystatechange = sendRequest;
post.open("POST", url, true);
post.send(url);
}
Once the response from the PHP object is received and loaded correctly, another request is made to the local file corresponding to the response. In this case, post.responseText gives us the path to the new file:
function sendRequest(){
if(checkReadyState(post)){
request = createRequestObject();
request .onreadystatechange = onResponse;
request.open("GET", post.responseText, true);
request.send(null);
}
}
Analyzing Responses
Analyzing responses can be challenging due to the differences between RSS feeds. Some contain images with title and description nodes, while others do not. So when we analyze the feedback, we need to do a little check to decipher whether it contains an image. If it includes an image, we can display that image in an image div tag, along with the feed's title and link:
var _logo = "";
var _title = response.getElementsByTagName('title')[0].firstChild.data;
var _link = response.getElementsByTagName('link ')[0].firstChild.data;;
_logo += "" + _title + "
";
if(checkForTag(response.getElementsByTagName('image')[0]))
{
var _url = response.getElementsByTagName('url')[0].firstChild.data ;
_logo += "
"
}
document.getElementById('logo'). innerHTML = _logo;
Not only do we have to check each image to display it, we also need to check it when iterating through all the items in the feed. Because if an image is present, all other indexing of title and link nodes will not work properly. Therefore, when an image tag is found, we should adjust the index of the title and link nodes by increasing the index value (+1) in each pass:
if(checkForTag(response.getElementsByTagName('image')[0]) "" i>0){
var _title=response.getElementsByTagName('title ')[i+1].firstChild.data;
var _link=response.getElementsByTagName('link')[i+1].firstChild.data;
}
else{
var _title =response.getElementsByTagName('title')[i].firstChild.data;
var _link = response.getElementsByTagName('link')[i].firstChild.data;
}
You can use checkForTag Method to check if a specific tag exists:
function checkForTag(tag){
if(tag != undefined) {
return true;
}
else{
return false;
}
}
There are many possibilities for performing feed analysis. For example, you can assign items to a category and make the category collapsible so users can select what they want to watch. As an example, I use dates to categorize items - this is achieved by deciphering whether the pubDate for a particular item is different from the pubDate of the previous item and displaying a new date accordingly:
if(i>1){
var previousPubDate = response.getElementsByTagName('pubDate')[i-1 ].firstChild.data;
}
if(pubDate != previousPubDate || previousPubDate == undefined){
_copy += "
";
}
_copy += "" + _title + "
";
document.getElementById('copy').innerHTML += _copy;
Note that the last part above is the showDetails method, which is used to display details when a user selects a specific item from a feed. This method has one parameter (the item index value), which is used to find the index of the details node in the feed:
function showDetails(index){
document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}
Using AJAX to send a query string to a server-side script and retrieve a customized response based on that string is possible for any web developer. This way, your next web application will be filled with new possibilities.