How to build RSS feed reader application using PHP and Jquery

We are going to build a simple RSS reader web application using PHP and Jquery.PHP comes so handy to process server side requests.To add the speed and performance we will be using jquery for the application.

RSS Reader:
RSS reader is nothing but the simple application that will fetch the latest contents from the webpage using the feed url.In our application we will be fetching the latest contents of the feed and displaying it as a list.Also I am using jquery mobile framework and jquery plugin to test out the application in mobile devices.

Process

I am using zRss feed jquery plugin that fetches the latest articles from the websites and return the details to our application.I tried doing completely in PHP but this plugin does the read work faster than PHP. All that you need is to provide the feed url to the jquery plugin.

Code

Form-To enter the website URL

1	<form action="rssreader.php" method="post"> <input name="url_input" type="text" value="Enter website url" /> <input type="submit" value="submit" /> </form>

When the form is submitted the url is sent to rssreader.php via http post ,then we need to extract the feed url of the website entered in the first page.For this task PHP CURL can be used to find the feed url.

Feed URL extraction

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php

$ch = curl_init();

$url=$_POST["url_input"]; //Ex:devlup.com

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_HEADER, false);

curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);

$output = curl_exec($ch);

curl_close($ch);

preg_match('/<link rel="alternate".*?href="(.*?)" \/>/', $output, $matches); //regular expression to find the feed url

$feedurl=$matches[1];

?>

Jquery Function

We need to pass the extracted feed URL to Jquery plugin that will fetch us the latest contents from the feed

1
2
3
4
5
6
7
8

You can specify the number of posts to retrieve in the parameters.In this case I have mentioned as 15.

For this plugin to work you need to add the script library in your head section.

1
2
3

Complete Code

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

< !DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

<body>
<div data-role="page">

<div data-role="header">
<h1>RSS Readr!</h1>
</div>

<div data-role="content">
<br /><br /><br />
<form name="form1" action="rssreader.php" method="post">

<input name="url_input" type="text" value="Enter website url" onFocus="if(this.value=='Enter website url') this.value=''"

onBlur="if(this.value=='')this.value='Enter website url'" x-webkit-speech />

<input type="submit" value="submit"/>

</form>

</div>

<div data-role="footer" data-position="fixed" >
<h4>© Devlup</h4>
</div>
</div>

</body>

rssreader.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

< !DOCTYPE html>
<head>

<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>

<?php
$ch = curl_init();
$url=$_POST["url_input"]; //Ex:devlup.com
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
$output = curl_exec($ch);
curl_close($ch);
preg_match('/<link rel="alternate".*?href="(.*?)" \/>/', $output, $matches); //regular expression to find the feed url
$feedurl=$matches[1];
?>

<div data-role="page">

<div data-role="header">
<h1>RSS Readr!</h1>
</div>

<div data-role="content">

//jquery function
<script type="text/javascript">
$(document).ready(function () {

$('#test').rssfeed('<?php echo $feedurl; ?>', {
limit: 15,
date: false
});
});
</script>

<ul data-role="listview" data-theme="g" />
<div id="test"></div>
</div>

<div data-role="footer" data-position="fixed">
<h4>© Devlup</h4>
</div>
</div>

</body>

I have used jqery mobile to make this application compatible on mobile devices.Read more about Jquery mobile.

Demo Download

Share your thoughts in the comment section.

Setup Broadcast receiver for incoming SMS

How to: Enable Desktop Notification in Gmail

How to :Transfer mails from one gmail account to another

What is Coral Scam | How to check | Torrent Scam

Face detection using PHP

Send and receive push messages using Google Cloud Messaging