mobile version dan deteksi browser mobile (PHP)

Untuk deteksi browser mobile (akses sebuah web dengan perangkat mobile), dapat mendownload script dasarnya di sini : http://detectmobilebrowsers.com/. Di situs ini sudah tersedia script siap saji untuk bermacam bahasa, php,ASP, javascript, apache (htaccess) yang dapat dipakai sesuai kebutuhan.

Pada dasarnya script pendeteksi mobile browser  melakukan pengecekan user_agent dari browser. Sebenarnya bisa buat script sendiri dengan mencocokkan user agent dengan list browser mobile : misal iphone | android | blackberry atau mengandung kata 'mobile'

Tapi  browser dan perangkat mobile sangat beragam dan sangat mungkin memiliki user agent yang berbeda-beda. Dengan script dari situs ini kita sudah tidak harus pusing mencari kemungkinan nama user agen. Di bagian bawahpun ada keterangan "Regex updated: 18 October 2012"(ini yang tertulis pada saat post ini dibuat , menunjukkan versi per tanggal berapa dan waktu update daftar user-agent utk browser mobile yang dikenali oleh script ini.

Ok saya ambil contoh yang versi PHP (detectmobilebrowser.php) yang saya pakai, script ini berisi jika user agent pengakses script ada dari daftar (user agent mobile) maka (nah bebas terserah kita).
Isi kode dari detectmobilebrowser.php itu sendiri kurang lebih seperti ini:

$useragent=$_SERVER['HTTP_USER_AGENT']; // ambil user agentnya
if(preg_match( ...........
bla bla bla bla
header('Location: http://detectmobilebrowser.com/mobile'); //bagian ini yang diutak atik misal di ganti menjadi $is_mobile = true;
?>

Dengan modal ini sudah cukup bagi aplikasi/server/php untuk 'tahu' atau 'merasa tahu' bahwa pengakses website adalah mobile device.

Umumnya sekarang dari website saat mendeteksi perangkat mobile akan langsung diarahkan ke versi mobile, misal: http://m.gudangmobil.com atau kalau blog ini akan diarahkan ke : http://blog.harmaji.com/?m=1(bisa di lihat dengan browser biasa). Mobile version ini sendiri biasanya adalah website biasa dengan layout disesuaikan dengan layar handphone, lebih kompak, content lebih minimalis, yang tujuannya adalah kemudahan akses website via perangkat mobile (kecil).

Kurang lebih di halaman website utama (kita sebut saja kumbang, eh maaf kita sebut fullsite):

if($mobile){
  header("Location: http://harmaji.com/mobile/");
}

Jadi setiap ada orang mengakses website saya dengan handphone maka akan langsung diarahkan ke versi mobile dari website (kalau memang ada).

Dan di versi mobile-nya sendiri mungkin kurang lebih seperti ini:

if(!$mobile){
  header("Location: http://harmaji.com"); //mengarahkan ke versi fullsite
}

Memang rada aneh kalau dari komputer biasa kita mengakses mobile version, walaupun beberapa website - seperti blogspot pada contoh diatas - versi mobile pun bisa diakses langsung via browser pada komputer biasa (non mobile). Bisa jadi karena quota internetnya tipis, atau mungkin versi mobile justru ada informasi2 yang tidak ada pada versi fullsitenya :).

Yang sering jadi masalah adalah saat kita "dipaksa" mengakses versi mobile padahal kita ingin membuka versi fullsite (entah karena lebih lengkap informasi dan fiturnya atau memang layar handphone yang besar).

Beberapa situs tidak menyediakan link ke versi fullsite dan tidak ada pilihan untuk kita dari perangkat mobile melihat fullsite. Karena itu baiknya di versi mobile ada link utk tetap mengakses halaman full-site. Jadi pada versi fullsite kita beri kondisi, jika itu mobile tapi pengguna memang ingin melihat tampilan fullsite ya silahkan, jadi kita tambahkan sedikit kondisi pada kode:

    $fullsite = false;
    $linkmobile = '';

    // di sini di set nilai dari full site misal dari url / session
    if($_SESSION['fullsite']=='yes'){
        $fullsite = true;
    }

    if($mobile){  // jika akses dari perangkat mobile
        if($!fullsite){
                  header("Location: http://harmaji.com/mobile/");
        }
    $linkmobile = 'versi mobile';
    } // jadi kalau pengguna memang mau lihat fullsite ya monggo lah

    echo $linkmobile; // ditaruh di salah satu tempat di halaman fullsite

dari kode diatas ada kemungkinan saya ingin kembali melihat versi mobilenya (saya berubah pikiran), jadi baiknya di halaman fullsite jika saya mengakses menggunakan mobile device maka ada link untuk melihat mobile version pada kode di atas disimpan di variable $linkmobile.

Jangan lupa dari mobile version disediakan link untuk full version, seperti kalau di versi mobile dari blogspot saat ingin melihat full version dari handphone ada link ke : http://blog.harmaji.com/?m=0
di bagian bawah.

Sebenarnya bukan coding yang ingin ditekankan di sini, tapi lebih untuk kenyamanan pengguna website yang menyediakan mobile version :)