HOME
oom is back! ya saya kembali untuk menulis lagi hehehe. Setelah sekian lama blog ini tidak tersentuh tangan saya sendiri saya coba kembali hadir dengan tulisan maupun tutorial terbaru yang lebih segar dan memang tutorial kali ini rada lebih berat dari tutorial yang pernah saya publish terdahulu karena berhubungan langsung dengan PHP murni. Tapi rekan jangan kawatir, tutorial ini cocok sekali untuk pengguna Wordpress dan tidak menutup kemungkinan saya juga akan berpikir lebih keras agar juga bisa di kloning untuk flatform Blogspot, so..ditunggu aja untuk edisi bloggernya :)
Versi mobile ini bisa saya katakan sebagai versi untuk pengguna HP, walaupun rata2 browser yang tertanam pada HP modern saat ini sudah support untuk menampilkan halaman dalam full browser tetap saja tidak senyaman dan seringkas kita menampilkannya dalam format RSS FEED.
Seperti biasa, ciri khas tulisan saya singkat padat dan jelas. Namun sebelum saya memulainya mungkin rekan sudah melihat multy RSS FEED edisi mobile yang saya rancang sendiri untuk Wordpress dialamat ini m.o-om.net (silahkan buka alamat ini dengan HP kalian masing2). OK, saya harap rekan sudah mencoba dan melihat sample display-nya, kalau gak punya HP ya tetap bisa kok buka dengan browser biasa atau dengan simulator ini testiphone.com , yang jelas seperti itulah contoh rancangan yang akan kita buat nantinya. Langsung ke tutorial aja ya :)
Perkakas penting yang dibutuhkan:
SimplePie: Simplepie ini bisa saya katakan sebagai PHP RSS FEED Parser tercepat dan terbaik sampai saat ini, walaupun ada beberapa RSS parser yang sering saya coba seperti MagPieRSS tetap saja tidak bisa mengubah kecintaan saya dengan Simplepie. Mungkin rekan masih bingung fungsinya untuk apa, simplepie ini sebenarnya bahasa program PHP yang berguna untuk Baca-Tulis format XML yang terdapat dalam batang tubuh RSS FEED. Simplepie sendiri dari edisi lawas sampai yang versi terbaru saat ini telah support untuk baca-tulis untuk format FEED, RSS sampai dengan ATOM. Rekan bisa mendownload Simplepie secara gratis langsung di alamat ini simplepie.org
Langkah-langkah:
1. Silahkan buat subdomain baru terserah rekan saja, agar terlihat professional buat saja dengan huruf (m) contoh: m.namadomainanda.com atau mobile.namadomainanda.com atau kalau malas membuat domain baru buat aja sub folder baru misalkan namadomainanda.com/mobile
2. Buat file baru dengan nama index.php kemudian masukan semua script dibawah ini, lalu upload ke server domain yang baru rekan buat barusan.
<!--
Kode hak cipta 2010
Agus Ramadhani | o-om.com
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"
lang="en-US">
<head>
<title>MY MOBILE</title>
<style type="text/css">
body {font-family: "Lucida Grande", "Liberation Sans", Tahoma, Verdana, Arial,
sans-serif; margin:0px; padding:0px;}
#header {background:#432E0D; color: #FFFFFF; margin: 0px 0px 5px 0px; padding:
2px; height: 38px; border-bottom:1px solid #000000}
h2 {font-size: 20px; font-weight: bold; margin: 0px; padding: 0px 0px 0px 0px;}
h2 a{color:#FFFFFF}
a {text-decoration: none; color:#453528;}
small {font-weight: bold; font-size:x-small; color:#EBEBE6}
#content { font-size: 11px; clear: both; }
#content ul{padding-left:15px; font-size:11px; }
#content li {list-style-type:square; padding:3px }
#footer { background:transparent none repeat scroll 0 0; border-top:1px solid
#000000; clear:left; font-size:x-small; margin:5px 0 2px; padding:2px; }
</style>
</head>
<body>
<div id="header">
<h2><a href="http://m.o-om.net">MY MOBILE</a></h2>
<small>ini adalah edisi mobile pertamaku</small>
</div>
<?php
$widget_string .='<div id="content">';
$widget_string .='<ul>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=okezone">OkeZone</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=liputan6">Liputan
6</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=rileks">Rileks</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=astaga">Astaga!</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=kapanlagi">Kapan
Lagi</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=lintasberita">Lintas
Berita</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=antara">Antara</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=inilah">Inilah</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=bbcindonesia">BBC
Indonesia</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=avivanews">VIVA
News</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=voanews">VOA
News</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=kompas">Kompas</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=tempo">Tempo
Interaktif</a></li>';
$widget_string .='<li><a href="http://m.namadomainanda.com/m?s=republika">Republika</a></li>';
$widget_string .='</ul>' . "\n";
$widget_string .='</div>' . "\n";
echo $widget_string
?>
<div id="footer">
mobile edition - get the full buzz at <a href="http://o-om.net">o-om.net</a>
</div>
</body>
</html>
3. Langkah selanjutnya, silahkan buat folder baru dengan nama folder m, kemudian buat lagi folder baru dalam folder m dengan nama cache
ingat! folder cache merupakan lokasi tempat menyimpan file cache RSS FEED sementara yang harus anda buat, hal ini agar simplepie tidak memeriksa berulang-ulang alamat rss feed yang sudah diperiksa sebelumnya dan juga untuk menghindari overload memory yang ada di server.
Kemudian, jangan lupa set attribute folder cache ke 755 atau 777 (writable)
4. Buat file baru lagi dengan nama index.php kemudian masukan semua script dibawah ini, lalu upload ke server domain dengan nama folder m yang baru rekan buat barusan.
<!--
Kode dilindungi hak cipta 2010
Agus Ramadhani | o-om.com
-->
<?php
require 'simplepie.inc';
$detik = 'http://pipes.yahoo.com/pipes/pipe.run?_id=9c15722cfefcf81ee8f8dd4eb2e0985d&_render=rss';
$okezone = 'http://pipes.yahoo.com/pipes/pipe.run?_id=e0424bf5069943d85b5e4672491b2fd1&_render=rss';
$liputan6 = 'http://pipes.yahoo.com/pipes/pipe.run?_id=beda5b8cc1179ea96f3a958336f2cfb3&_render=rss';
$rileks = 'http://pipes.yahoo.com/pipes/pipe.run?_id=15f8964846497c7e1be77781e883cf0b&_render=rss';
$astaga = 'http://pipes.yahoo.com/pipes/pipe.run?_id=4745466594835975c8d0efdd47bf9901&_render=rss';
$kapanlagi = 'http://pipes.yahoo.com/pipes/pipe.run?_id=83460baf022261d35b33fff59c65aaa8&_render=rss';
$lintasberita = 'http://pipes.yahoo.com/pipes/pipe.run?_id=ee2ca19f30d6de4ca514b6bfb06c3a5c&_render=rss';
$antara= 'http://pipes.yahoo.com/pipes/pipe.run?_id=f4a4807f1b1a65031fa3a1a28a39a994&_render=rss';
$inilah = 'http://pipes.yahoo.com/pipes/pipe.run?_id=f4a4807f1b1a65031fa3a1a28a39a994&_render=rss';
$bbcindonesia = 'http://pipes.yahoo.com/pipes/pipe.run?_id=4a73a632159b8f664c61cc6284a80987&_render=rss';
$avivanews = 'http://pipes.yahoo.com/pipes/pipe.run?_id=e05d69d292ef09fbe2132e0620d86d2f&_render=rss';
$voanews = 'http://pipes.yahoo.com/pipes/pipe.run?_id=06502cae18b3175792c96582dd4004b8&_render=rss';
$kompas = 'http://pipes.yahoo.com/pipes/pipe.run?_id=fefd624f1e6bdb94fe8bb2638adb2ae3&_render=rss';
$tempo = 'http://pipes.yahoo.com/pipes/pipe.run?_id=8044ec72ac31ca481a629bdb38007b78&_render=rss';
$republika = 'http://pipes.yahoo.com/pipes/pipe.run?_id=bcd8fcb247f331b54231c0f0db087a39&_render=rss';
$getinput = $_GET['s'];
if ($getinput == 'okezone') { $getinput = $okezone;}
if ($getinput == 'detik') { $getinput = $detik; }
if ($getinput == 'liputan6') { $getinput = $liputan6; }
if ($getinput == 'rileks') { $getinput = $rileks; }
if ($getinput == 'astaga') { $getinput = $astaga; }
if ($getinput == 'kapanlagi') { $getinput = $kapanlagi; }
if ($getinput == 'lintasberita') { $getinput = $lintasberita; }
if ($getinput == 'antara') { $getinput = $antara; }
if ($getinput == 'inilah') { $getinput = $inilah;}
if ($getinput == 'bbcindonesia') { $getinput = $bbcindonesia; }
if ($getinput == 'avivanews') { $getinput = $avivanews; }
if ($getinput == 'voanews') { $getinput = $voanews; }
if ($getinput == 'kompas') { $getinput = $kompas; }
if ($getinput == 'tempo') { $getinput = $tempo; }
if ($getinput == 'republika') { $getinput = $republika; }
// Konfigurasi utama untuk pemanggilan simplepie
$feed = new SimplePie();
$feed->set_feed_url($getinput);
$feed->enable_cache(false);
$success = $feed->init();
$feed->handle_content_type();
?><!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" xml:lang="en-US" lang="en-US">
<head>
<title>MY MOBILE</title>
<style type="text/css">
body {font-family: "Lucida Grande", "Liberation Sans", Tahoma, Verdana, Arial,
sans-serif; margin:0px; padding:0px;}
#header {background:#432E0D; color: #FFFFFF; margin: 0px 0px 5px 0px; padding:
2px; height: 38px; border-bottom:1px solid #000000}
h2 {font-size: 20px; font-weight: bold; margin: 0px; padding: 0px 0px 0px 0px;}
h2 a{color:#FFFFFF}
a {text-decoration: none; color:#453528;}
small {font-weight: bold; font-size:x-small; color:#EBEBE6}
#content { font-size: 11px; clear: both; }
#content ul{padding-left:15px; font-size:11px; }
#content li {list-style-type:square; padding:3px }
#footer { background:transparent none repeat scroll 0 0; border-top:1px solid
#000000; clear:left; color:#000000; font-size:x-small; margin:5px 0 2px;
padding:2px; }
</style>
</head>
<body>
<div id="header">
<h2><a href="http://m.o-om.net">MY MOBILE</h2>
<small>ini adalah edisi mobile pertamaku</a></small>
</div>
<?php
// jika error tampilkan pesan ini
if ($feed->error())
{
echo '<div class="sp_errors">' . "\r\n";
echo '<p>' . htmlspecialchars($feed->error()) . "</p>\r\n";
echo '</div>' . "\r\n";
echo '<p><a href="http://m.o-om.net"><b>« back</b></a></p></a>';
}
?>
<?php if ($success): ?>
<?php
$widget_string .='<div id="content">';
$widget_string .='<p><a href="http://m.o-om.net"><b>«
back</b></a></p></a>';
$widget_string .='<ul>';
foreach($feed->get_items(0, 10) as $item)
{
$widget_string .='<li>';
$widget_string .='<a href="' . $item->get_permalink() . '">' . $item->get_title()
.'</a>';
$widget_string .='</li>' . "\n";
}
$widget_string .='</ul>' . "\n";
$widget_string .='<p><a href="http://m.o-om.net"><b>«
back</b></a></p></a>';
$widget_string .='</div>' . "\n";
echo $widget_string
?>
<?php endif; ?>
<div id="footer">
mobile edition - get the full buzz at <a href="http://o-om.net">o-om.net</a>
</div>
</body>
</html>
Contoh diatas, saya menggunakan Yahoo Pipes, kalian bisa mengubah perantara lainnya dengan menggunakan Feed Burner atau menggunakan Rss Feed versi sendiri.
5. Langkah akhir jangan lupa upload juga file simplepie.inc yang sudah rekan download sebelumnya ke dalam folder m yang ada dalam server.
6. Silahkan dicoba, dan sekarang kalian sudah mempunyai versi mobile sendiri untuk pembaca web atau blog kalian via rss feed. Kren khan hehehehe
Ini hanya contoh sederhana untuk membuat versi mobile untuk Aggregator Rss Feed, rekan tentu bisa mengembangkan sendiri untuk versi mobile yang lebih canggih.
Lihat Demo | Download Versi full
Artikel berikutnya saya akan membahas bagaimana cara mendeteksi program yang kita buat apakah hanya dapat ditampilkan khusus untuk versi mobile phone atau dapat juga dilihat pada standar dibrowser. Ditunggu ya...
Baca Selengkapnya →
Agus Ramadhani memulai kegiatan Blogging sejak tahun 2007 hingga sekarang. Saat ini dia focus sebagai profesional Blogger dan menjadi penulis dibeberapa blog miliknya yang cukup populer diantaranya..