Belajar Membuat Simple RSS Feed Reader dengan SimplePie, PHP dan Jquery
Terinspirasi dari sebuah contoh Ajax RSS Reader ini, muncul sebuah ide untuk mencoba membuat ‘Simple RSS Feed Reader’ sendiri. Nah kemudian pencarian referensi lebih lanjut pun dimulai dengan bantuan mbah Google. Wah ternyata di google telah banyak aplikasi RSS Feed Reader berbasis web yang keren-keren, tapi tidak apa-apa namanya juga belajar mesti dicoba hehe 
Oya, sebelum memulai mungkin banyak yang bertanya apa sih RSS itu? Dari situs wikipedia (en|id), secara singkat didapat penjelasan bahwa RSS atau ‘Really Simple Syndication’ merupakan distribusi konten yang berbasiskan format XML, biasanya konten ini sering diperbaharui secara reguler seperti pada situs berita atau blog. Sebuah dokumen RSS dapat berisi keseluruhan ataupun ringkasan konten dan juga metadata seperti judul, tanggal terbit hingga nama dari penerbit/penulis konten. Agar dapat diakses oleh para pengguna/pembaca maka distributor konten (situs web bersangkutan) tersebut akan menyediakan umpan web (feed) RSS dalam bentuk link pada situs web mereka. ‘RSS feed‘ inilah yang nantinya akan dimanfaatkan dalam aplikasi pembaca atau ‘RSS Feed Reader’.
Seperti pada penjelasan sebelumnya, RSS berbasiskan format XML sehingga untuk membaca RSS feed perlu dilakukan parsing/menguraikan RSS feed tersebut. Untuk mem-parsing RSS feed yang ingin ditampilkan, disini digunakan sebuah code library berbasis PHP, yakni SimplePie. Simplepie dipilih karena menurut saya dokumentasinya yang cukup lengkap sehingga mempermudah untuk mempelajarinya. Selain itu, digunakan juga javascript library yakni jQuery untuk menangani mekanisme Ajax dan jQuery UI Tabs untuk tampilannya. Ide dari aplikasi sederhana ini sebenarnya adalah bagaimana menempatkan isi/hasil parsing dari beberapa RSS feed pada tab-tab, kemudian ketika tab tertentu dipilih maka isi/hasil parsing dari RSS feed bersangkutan akan di-load dengan mekanisme Ajax. Nantinya, alamat-alamat/sumber RSS feed yang ingin ditampilkan tersebut juga akan dikelola dan disimpan dalam database sehingga dapat ditambah, diubah maupun dihapus.
feed-reader-main
feed-reader-admin
Baik selanjutnya kita langsung saja menuju ke bagian pembahasan. Dalam bagian pembahasan akan lebih difokuskan pada proses-proses utama yang terjadi dalam aplikasi ‘Simple RSS Feed Reader’ ini. Oya, ada baiknya pula ketika menjalankan aplikasi ini kita terhubung ke internet karena lokasi sumber feed berada di internet.
Berikut penjelasan untuk beberapa file yang mendukung proses-proses utama pada aplikasi ini.
1. index.php
merupakan halaman utama yang menampung tampilan data RSS feed. Data RSS feed ini dikelompokkan berdasarkan alamat/sumbernya pada tiap-tiap tab yang ada. Tampilan tab ini menggunakan jQuery UI Tabs, penjelasan lebih lengkap mengenai penggunaannya dapat merujuk langsung ke situsnya. Selain itu, pengelolaan data alamat/sumber RSS feed yang ada dalam aplikasi ini dibuat menggunakan model pengelolaan data seperti pada tulisan sebelumnya. Tab-tab RSS feed pada halaman ini akan ditampilkan berdasarkan data status aktif-nya (‘Y’ atau ‘N’) yang tersimpan di database.
<?php
include("config/config.php");
session_start();
?>
<!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>Simple RSS Feed Reader</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="ui/css/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/getrss.js"></script>
<script type="text/javascript" src="ui/js/ui.core.js"></script>
<script type="text/javascript" src="ui/js/ui.tabs.js"></script>
</head>
<body>
<div id="content">
<div id="topBar">
<div id="topLeft">Simple RSS Feed Reader</div>
<?php
if (!empty($_SESSION[uname]) AND !empty($_SESSION[password])) { ?>
<div id="topRight"><a href="container.php?hal=home" title="Halaman Setting">Setting</a> | <a href="logout.php" title="Log Out">Log Out</a> </div>
<?php }
else{?>
<div id="topRight"><a href="login.php" title="Halaman Login">Login</a></div>
<?php } ?>
</div>
<div id="tabs">
<ul>
<?php
$str="select * from tbl_feed_list where status_aktif='Y'";
$res=mysql_query($str) or die("query gagal dijalankan");
if(mysql_num_rows($res)!=0){
while($row = mysql_fetch_array($res)){ ?>
<li><a href="#datafeed" class="<?php echo $row['id_feed']; ?>" title="<?php echo $row['keterangan']; ?>"><?php echo $row['judul_tab']; ?></a></li>
<?php }
}
else{ ?>
<li><a href="#datafeed">Data list RSS/Feed tidak ditemukan!</a></li>
<?php }
?>
</ul>
<div id="divLoading"></div>
<div id="datafeed"></div>
</div>
</div>
</body>
</html>
2. getrss.js
merupakan file yang berisi kode-kode jQuery untuk menangani inisialisasi pembuatan tab dan request Ajax. Kedua file tersebut, yakni file getrss.js dan index.php adalah saling berhubungan. Bisa diperhatikan pada file index.php dilakukan pemanggilan file getrss.js dan untuk membuat tab dengan jQuery UI Tabs dilakukan pula pemanggilan file-file javascript lainnya yang dibutuhkan. Request Ajax terjadi ketika dilakukan klik terhadap salah satu tab. Request ini akan diteruskan ke file getrss.php dimana parameter yang dikirimkan berupa ‘ID RSS feed’.
$(document).ready(function(){
//menangkap error dan men-set parameter global (timeout, dll)
$.ajaxSetup({
timeout: 15000,
cache: false,
error:function(x,e){
if(x.status==0){
alert('Anda sedang offline!\nSilahkan cek koneksi anda!');
}else if(x.status==404){
alert('Permintaan URL tidak ditemukan!');
}else if(x.status==500){
alert('Internal Server Error!');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed!');
}else if(e=='timeout'){
alert('Request Time out!');
}else {
alert('Error tidak diketahui: \n'+x.responseText);
}
}
});
// menampilkan 'loading' untuk menandakan proses Ajax sedang berlangsung atau telah selesai
$('#divLoading').ajaxStart(function(){
$(this).addClass('loading');
$(this).html("loading data..<br />").fadeIn();
}).ajaxStop(function(){
$(this).html("loading data..").fadeOut();
});
// inisialisasi pembuatan tab
$("#tabs").tabs();
// inisialisasi dlm menampilkan data feed, data feed pada tab index ke-0
// ditampilkan/atau di-load dengan memanggil fungsi showRSS (mengambil value dari attribut class)
showRSS($("#tabs a[href=#datafeed]").attr('class'));
// menangani event event click pada tab
$("#tabs a[href=#datafeed]").bind("click",function(){
//input parameter dr fungsi ShowRSS: "ID RSS feed" (diperoleh dengan mengambil isi atribut class dari link).
showRSS($(this).attr('class'));
});
// mengirimkan request data feed yg ingin ditampilkan sesuai dengan tab yg dipilih
function showRSS(str){
var dataString = 'q='+str;
$.ajax({
url: "getrss.php",
type: "GET",
data: dataString,
success:function(data){
$("#datafeed").html(data);
}
});
}
});
3. getrss.php
merupakan file yang digunakan untuk melakukan pemrosesan parameter yang dikirimkan melalui mekanisme Ajax. Dalam file ini, digunakan sebuah code library yakni SimplePie. SimplePie menyediakan dokumentasi yang cukup lengkap, mulai dari langkah-langkah awal untuk penggunaanya, contoh penggunaan SimplePie, hingga referensi API. SimplePie dimanfaatkan untuk melakukan parsing terhadap RSS feed yang akan ditampilkan. Ketika parameter ‘ID RSS feed’ diperoleh kemudian melalui query database didapatkan alamat/sumber (URL) dari RSS feed tersebut. Selanjutnya, alamat dari RSS feed tersebut diproses untuk memperoleh ‘isi-nya’ dengan memanfaatkan fungsi-fungsi dari SimplePie. Perlu diperhatikan, dalam aplikasi ini fungsi cache diaktifkan. Cache bermanfaat agar feed yang telah diproses sebelumnya dapat ditampilkan kembali lebih cepat, karena informasi dari proses feed tersebut akan disimpan pada cache dalam durasi waktu tertentu. Penyimpanan cache memerlukan sebuah folder dan diperlukan perubahan ‘file permissions‘ (CHMOD permissions) untuk folder tersebut agar menjadi ‘server-writable’.
<?php
include_once("config/config.php");
// meng-iclude-kan SimplePie, sesuaikan dengan lokasi yg digunakan.
include_once('simplepie/simplepie.inc');
if(isset($_GET['q']) and !empty($_GET['q']))
{
//mendapatkan parameter "q" dari url.
$q=$_GET["q"];
$str="select * from tbl_feed_list where id_feed = '$q'";
$res=mysql_query($str) or die("query gagal dijalankan");
if(mysql_num_rows($res)!=0){
$data=mysql_fetch_assoc($res);
$rss=$data['url'];
$batas=$data['batas_tampil'];
date_default_timezone_set("Asia/Jakarta");
$feed = new SimplePie();
// menset feed mana yg akan diproses.
$feed->set_feed_url($rss);
//mengaktifkan penggunaan cache
$feed->enable_cache(true);
//menset lama durasi cache sebelum cache tersebut expired
$feed->set_cache_duration(1800); // 30 menit
//folder untuk penyimpanan cache
$feed->set_cache_location('cache');
// Run SimplePie.
$feed->init();
//memastikan bahwa content yg dikirimkan ke browser berupa text/html dan UTF-8 character set
$feed->handle_content_type();
// menangani error yg terjadi dalam menampilkan rss/feed
if ($feed->error())
{
echo $feed->error();
}
else{
?>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>
<?php
// output elemen untuk "channel(feed)" yg dipilih.
$channel_link=$feed->get_permalink();
$channel_title=$feed->get_title();
$channel_desc=$feed->get_description();
// menampilkan judul channel, linknya dan deskripsi singkat dari channel
echo ("<a href=\"$channel_link\" target=\"_blank\">" . $channel_title . "</a>");
echo ("<br />");
echo $channel_desc;
?>
</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<?php
// menampilkan isi feed yg dipilih, seperti judul, link, deskripsi, dan tanggal post.
foreach ($feed->get_items(0, $batas) as $item):
$item_link = $item->get_permalink();
$item_title = $item->get_title();
$item_desc = $item->get_description();
$item_date = $item->get_date('D, j F Y | H:i:s');
?>
<tr>
<td><?php
// menampilkan judul post dan linknya
echo ("<a href=\"$item_link\" target=\"_blank\">" . $item_title . "</a>");
?>
</td>
</tr>
<tr>
<td><?php
// menampilkan deskripsi singkat
echo $item_desc;
?>
</td>
</tr>
<tr>
<td><?php
// menampilkan tgl posting
echo ("<small>tgl posting: " . $item_date . "</small>");
?>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<?php endforeach; ?>
</table>
<?php }
}
} ?>
Demikian penjelasan singkat dari ketiga file yang mendukung proses-proses utama dalam aplikasi ini. Dari penjelasan tersebut, semoga diperoleh gambaran bagaimana aplikasi sederhana ini berjalan. Untuk mempelajari aplikasi ini secara keseluruhan, seluruh source code yang diperlukan dapat di-download melalui link ini dan demo aplikasi dapat dilihat pada link ini. Mungkin demikian pula yang dapat disampaikan dalam tulisan ini, mohon maaf jika masih banyak kekurangan dan codingnya masih cupu.. hehe.. semoga bermanfaat. 😀
Arsa's blog.. 
Wow..mantab. thank’s tutorialnya, lagi nyari2 yg begini
itisinmes
20 July 2011 at 11:24
makasii bangett buat tutorialnya …
🙂
shella
28 July 2011 at 10:56
kko link bwt downloadnya gga kebuka ya…….
Annie
3 August 2011 at 09:59
makasih banyak mas,…
nambah lagi nih saya ilmu tentang web 😀
salam
Klopototolia TJ
4 October 2011 at 02:40
iya sama2, terima kasih jg sdh berkunjung.. 😀
dearsa
21 October 2011 at 20:30