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...
HOME
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..