Cara Mendeteksi Mobile User Agents dan Browsers (bag 2)

Seperti janji saya pada akhir post sebelumnya tentang merangcang RSS FEED
untuk versi mobile phone, sekarang saya coba langsung membahas bagaimana cara
mendeteksi program yang kita buat apakah hanya dapat ditampilkan khusus untuk
versi mobile phone atau dapat juga dilihat pada standar dibrowser.

 

untuk memahami maksud artikel ini, sekarang coba rekan mengakses
m.o-om.net,  sudah jelas ya
alamat ini masih leluasa dapat ditampilkan pada halaman standar browser pada
versi dekstop. Nah, untuk contoh lainnya sekarang saya minta rekan untuk mencoba
mengakses halaman kaskus versi mobile dialamat ini
m.kaskus.us  apa yang
terjadi? ya, kita tidak bisa mengakases kaskus  mobile langsung dari
browser dekstop, tapi kita langsung diredirect ke situs utamanya.

 

Sekarang yang jadi pertanyaan gimana programmer kaskus bisa membuat redirect
seperti itu? ternyata caranya tidak terlalu sulit, walaupun saya sendiri tidak
pernah melihat langsung script dari mobile kaskus paling tidak logika
progammingnya sama saja :)

 

Cara yang paling mudah yaitu menggunakan script PHP yang sudah disediakan
pihak ketiga, saya biasa menggunakan script dari
detectmobilebrowsers.mobi,
atau silakan download source codenya
disini.

Saya beri sedikit gambaran bahwa script ini mempunyai fungsi terdiri dari 8
pilihan parameter untuk membuatnya bekerja. jadi bisa dikatakan setiap 8
parameter menangani skenario yang berbeda pula. namun yang perlu diingat jangan
lupa untuk memanggil fungsi ini terlalebih dahulu agar semua fungsi pendukung
bisa berkerja dengan baik.

 

include ( 'mobile_device_detect.php');

$ mobile = mobile_device_detect ();

 

Jika rekan masih bingung untuk setting setiap paramater, sebenarnya ada yang
lebih mudah lagi dengan menggunakan fungsi generator yang juga sudah disediakan
oleh situs diatas. silahkan dicoba saja. oh iya, untuk scipt pilihan bahasa
program lainnya bisa langsung pelajari saja disitus ini
detectmobilebrowser.com

 

Sebenarnya sampai disini saja penjelasan diatas sudah bisa saya katakan
selesai, memang untuk kali ini rekan paling tidak harus sedikit mengerti tentang
PHP, jadi tidak terlalu sulit untuk menerapkannya.

 

Semoga artike ini bermanfaat :)

Merancang RSS FEED Aggregator untuk versi Mobile Phone (bag 1)

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>&laquo; 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>&laquo;
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>&laquo;
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...