oom is back! ya saya kembali untuk menulis lagi hehehe. Setelah sekian usang blog ini tidak tersentuh tangan saya sendiri saya coba kembali hadir dengan goresan pena maupun tutorial terbaru yang lebih segar dan memang tutorial kali ini rada lebih berat dari tutorial yang pernah saya publish terdahulu alasannya yakni berafiliasi pribadi dengan PHP murni. Tapi rekan jangan kawatir, tutorial ini cocok sekali untuk pengguna Wordpress dan tidak menutup kemungkinan saya juga akan berpikir lebih keras semoga juga sanggup di kloning untuk flatform Blogspot, so..ditunggu aja untuk edisi bloggernya :)
Versi mobile ini sanggup saya katakan sebagai versi untuk pengguna HP, walaupun rata2 browser yang tertanam pada HP modern ketika 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 goresan pena 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 sanggup kok buka dengan browser biasa atau dengan simulator ini testiphone.com , yang terang ibarat itulah pola rancangan yang akan kita buat nantinya. Langsung ke tutorial aja ya :)
Perkakas penting yang dibutuhkan:
SimplePie: Simplepie ini sanggup saya katakan sebagai PHP RSS FEED Parser tercepat dan terbaik hingga ketika ini, walaupun ada beberapa RSS parser yang sering saya coba ibarat MagPieRSS tetap saja tidak sanggup mengubah kecintaan saya dengan Simplepie. Mungkin rekan masih galau fungsinya untuk apa, simplepie ini gotong royong bahasa agenda PHP yang berkhasiat untuk Baca-Tulis format XML yang terdapat dalam batang badan RSS FEED. Simplepie sendiri dari edisi lawas hingga yang versi terbaru ketika ini telah support untuk baca-tulis untuk format FEED, RSS hingga dengan ATOM. Rekan sanggup mendownload Simplepie secara gratis pribadi di alamat ini simplepie.org
Langkah-langkah:
1. Silahkan buat subdomain gres terserah rekan saja, semoga terlihat professional buat saja dengan abjad (m) contoh: m.namadomainanda.com atau mobile.namadomainanda.com atau kalau malas menciptakan domain gres buat aja sub folder gres misalkan namadomainanda.com/mobile
2. Buat file gres dengan nama index.php kemudian masukan semua script dibawah ini, kemudian upload ke server domain yang gres 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 yakni 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 gres dengan nama folder m, kemudian buat lagi folder gres dalam folder m dengan nama cache
ingat! folder cache merupakan lokasi daerah menyimpan file cache RSS FEED sementara yang harus anda buat, hal ini semoga simplepie tidak menyidik 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 gres lagi dengan nama index.php kemudian masukan semua script dibawah ini, kemudian upload ke server domain dengan nama folder m yang gres 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 yakni edisi mobile pertamaku</a></small>
</div>
<?php
// jikalau 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 memakai Yahoo Pipes, kalian sanggup mengubah mediator lainnya dengan memakai Feed Burner atau memakai Rss Feed versi sendiri.
5. Langkah simpulan jangan lupa upload juga file simplepie.inc yang sudah rekan download sebelumnya ke dalam folder m yang ada dalam server.
6. Silahkan dicoba, dan kini kalian sudah memiliki versi mobile sendiri untuk pembaca web atau blog kalian via rss feed. Kren khan hehehehe
Ini hanya pola sederhana untuk menciptakan versi mobile untuk Aggregator Rss Feed, rekan tentu sanggup menyebarkan sendiri untuk versi mobile yang lebih canggih.
Lihat Demo | Download Versi full
Artikel berikutnya saya akan membahas bagaimana cara mendeteksi agenda yang kita buat apakah hanya sanggup ditampilkan khusus untuk versi mobile phone atau sanggup juga dilihat pada standar dibrowser. Ditunggu ya...
