Membuat RSS Reader dengan PHP + JqueryMobile + YQL

Kali ini kita akan mencoba membuat sebuah RSS Reader dari BelajarWebDesign menggunakan PHP dan JQuery Mobile. RSS reader yang akan kita buat ini akan meng-grab tulisan yang ada di situs tercinta kita ini kemudian ditampilkan kedalam sebuah tampilan yang mirip dengan iPhone atau Android apps.

[related_posts]

Tampilan akhir dari RSS reader ini akan menjadi seperti pada gambar dibawah ini.

1. Persiapan

Untuk membuat RSS reader ini kita memerlukan struktur project seperti dibawah ini

Setelah mempersiapkan struktur direktori dan file seperti pada gambar diatas berikutnya kita perlu mengubah ini file “header.php” menjadi seperti dibawah ini

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>Belajarwebdesign</title> 

   <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>
<style>
img{
	width:95%;
	height:auto;
}
</style>
</head>

Kemudian mengubah isi pada file “index.php” dengan coding dibawah ini:

<?php include('includes/header.php'); ?>
<body>
 <div data-role="page">

   <header data-role="header">
	   <h1>BelajarWebDesign</h1>  
   </header>

   <div data-role="content">
	<ul data-role="listview">

	</ul>
   </div>

   <footer data-role="footer">
	   <h4>Copyright &copy; belajarwebdesign.com</h4>
   </footer>

 </div>

</body>
</html>

Pada JQuery Mobile terdapat beberapa ketentuan seperti dibawah ini:
– data-role=”header” untuk menampilkan bagian header/kepala
– data-role=”content” untuk menampilkan bagian content/isi
– data-role=”footer” untuk menampilkan bagian footer/kaki

Berikut tampilan setelah kita melewati beberapa langkah diatas
Dibawah adalah tampilan ketika belum mengimplementasikan CSS dan Jquery Mobile

Tampilan setelah mengimplementasi CSS dan JQuery Mobile

2. Menggrab konten

Untuk menggrab konten website belajarwebdesign kita akan menggunakan sebuah layanan dari Yahoo! yang bernama YQL (Yahoo Query Language). Dengan layanan ini kita tidak perlu pusing dengan variasi tag pada rss yang dihasilkan oleh website manapun, karena layanan ini otomatis akan membuat sebuah standarisasi dari tag xml atau json yang dihasilkannya.

Baca Juga:  PHP, iteration #2 (for)

Modifikasi file index.php agar dapat menggrab konten dari rss, berikut hasil akhir dari index.php

<?php include('includes/header.php'); ?>
<?php
$path  = "http://query.yahooapis.com/v1/public/yql?q=";
$path .= urlencode("SELECT * FROM feed WHERE url='http://feeds.feedburner.com/belajarwebdesign'");
$path .= "&format=json";
$feed = file_get_contents($path, true);

$feed = json_decode($feed);
	


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

   <header data-role="header">
	   <h1>BelajarWebDesign</h1>  
   </header>

   <div data-role="content">
	   <ul data-role="listview">
<?php
foreach($feed->query->results->item as $item) { ?>  
  
    <li>  
      <h2>  
         <a href="article.php?url=<?php echo urlencode($item->guid->content)?>" data-transition="pop">  
               <?php echo $item->title; ?>
         </a>  
      </h2>  
   </li>  
  
<?php  } ?>  
		</ul>
   </div>

   <footer data-role="footer">
	   <h4>Copyright &copy; belajarwebdesign.com</h4>
   </footer>

 </div>

</body>
</html>

Ketika kalian mengklik list yang pada gambar pertama, maka akan muncul detail dari artikel, untuk itu kita perlu membuat sebuah file tambahan yaitu “article.php” dengan isi sebagai berikut:

<?php include('includes/header.php'); ?>
<?php
$url = $_GET['url']; 
$path = "http://query.yahooapis.com/v1/public/yql?q=";
$path .= urlencode("SELECT * FROM feed WHERE url='http://feeds.feedburner.com/belajarwebdesign' AND guid='$url'");
$path .= "&format=json";

$feed = json_decode(file_get_contents($path));
$feed = $feed->query->results->item;	


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

   <header data-role="header">
	   <h1>BelajarWebDesign</h1>  
   </header>

   <div data-role="content">
		<h1> <?php echo $feed->title; ?> </h1>  
        <div> <?php echo $feed->encoded; ?> </div> 
   </div>

   <footer data-role="footer">
	   <h4>Copyright &copy; belajarwebdesign.com</h4>
   </footer>

 </div>

</body>
</html>

Setelah mengedit beberapa file tadi maka akan muncul seperti dibawah ini ketika list diklik (detail artikel)

Berikut link demo dari rss reader diatas atau download resource, saya juga pernah membuat untuk terselubung namun ini menggunakan JQTouch.

note: untuk melihat demo kalian harus menggunakan browser yang sudah mendukung webkit seperti Safari, atau Chrome (jika browser tidak mendukung webkit maka ada beberapa efek animasi yang tidak terlihat, dan tampilan jadi kurang sempurna), coba menggunakan touch device seperti iPhone atau Android.

Komentar

comments

cwicaksono

Mobile, Web Developer and like things related to web technology

grain storage instagram türk takipçi satın al