Teknik Membuat Website Kompatibel dengan Mobile Device

Oleh Ari Julianto | pada 19 April 2013 jam 20:01 | Dikunjungi 356 kali | 1 komentar

Baru sempet lagi nih bikin posting, minggu-minggu kemaren gak sempet buat lanjutin postingan mengenai trik website kompatible mobile device. Sekarang saya akan kembali mencoba melanjutkan bahasannya yang tertunda

Di posting sebelumnya, saya sudah membeberkan beberapa rahasia untuk mendeteksi perangkat yang digunakan, apakah berupa mobile ataukah PC. Dan pada kesempatan ini saya akan mencoba meluangkan waktu buat temen-temen semua untuk memberikan rahasia mobile web yang telah saya janjikan itu

Di bahasan sebelumnya telah disebutkan bahwa triknya adalah menggunakan variabel global $_SERVER['HTTP_USER_AGENT']. String sampel-sampelnyapun telah saya berikan termasuk kode untuk mendeteksi pengunjungnya itu menggunakan media apa, ponsel, smartphone atau PC biasa.

Kalo kita mempunyai website yang kompatibael mobile device, maka ada 2 pilihan yang harus temen-temen pilih. Hal ini dimaksudkan karena masih banyak website yang media aksesnya harus selalu di PC, padahal kalo kita melihat perkembangan teknologi yang namanya akses internet sudah sangatlah mudah dan biayanyapun relatif tak terlalu mahal. Seperti saya misalnya, hanya bermodalkan Nokia 6120 Classic, bisa browsing sepuasnya untuk internetan. Soal ISP? Lah sekarang kan semua provider pulsa sudah memberikan fasilitas internet, ada juga yang ngasih harga murah banget bahkan gratisan

Oya konsep pembuatan website yang dimulai dari nol ada beberapa dua, dua konsep paling umum adalah:

1. Membagi file halaman menjadi beberapa file (header.php, sidebar.php, footer.php dan file-file konten -telah saya bahas di sini-). Konsep ini merupakan konsep file menu, yakni satu menu utama bisa dibuat pada satu file. Contohnya: punya menu "Belajar" maka kita buat file belajar.php dimana di dalamnya dilakukan include untuk header, sidebar, dan footernya. Konsep ini banyak yang menggunakannya. Facebook juga menggunakan konsep ini. Kelebihannya adalah mudah dalam pengelolaan karena nama file mewakili nama menu utama, ketika akan melakukan update desain kana terasa lebih mudah dan leluasa, resource server yang digunakan punrelatif normal karena request beban ditumpu oleh file-file berbeda, adapun kekurangannya jika menu utamanya banyak maka perlu cukup banyak file juga.
2. Membuat file template tersendiri misalnya untuk halaman keseluruhannya media.php nanti di setiap menu melakukan include file. Konsep ini saya sebut sebagai konsep query string karena untuk setiap menunya ditentukan sesuai dengan query string. Contohnya: punya menu "Belajar" maka kita melakukan pemanggilan halaman dengan melakukan request media.php?menu=belajar. Kelebihan konsep ini adalah simpel sehingga banyak dugunakan pada blog-blog juga cms. Adapun kelemahannya adalah update desain tertuju ke satu halaman sehingga desain web secara keseluruhannya hanya satu desain, tidak bisa dibuat beraneka ragam, resource server yang digunakanpun relatif berat karena prosesnya tertuju padasatu file.
3. Namun sudah banyak pula yang menggabungkan kedua konsep ini, seperti halnya saya

Nah kembali ke 2 hal tadi. 2 Pilihan yang saya maksudkan itu adalah:

1. Redirect ke Domain Khusus untuk Tampilan Mobile atau Smartphone

Cara ini adalah cara yang sudah umum namun kendala yang saya temui beberapa diantaranya kebingungan mendeteksi media yang dipakai untuk membuka website tersebut ketika di akses di domain utama (www). Untuk kasus di sini saya akan memberikan contoh yang sudah tidak asing buat kita, Facebook. www.facebook.com adalah sebuah domain yang aksesiliasinya dapat dilakukan melalui PC atau media berukuran layar besar lain. Sudah tau kan kalo temen-temen membuka www.facebook.com dari HP apa yang terjadi? Ya benar, facebook mengalihkan kita ke situs versi selulernya, yakni m.facebook.com. Nah saya akan mencoba berbagi mengenai cara redirect ini.

Sebelumnya mungkin diantara kita ada yang bertanya-tanya kenapa harus di redirect? Jawabannya bisa beraneka ragam, salah satunya agar dalam pengelolaan webnya nanti sang admin tidak kerepotan ketika, misalnya ketika ingin melakukan editing file. Baiklah, kita akan masuk ke bahasannya. Sebagai langkah pertama kita harus menggunakan script yang sudah saya tuliskan di postingan sebelumnya. Kemudian siapkan domain khusus untuk web versi mobile, misalnya buat saja sub domain m.domainanda.com.

Agar tidak mengganggu desain web kita yang udah jadi, buat saja di file berbeda, misalnya buat file dengan nama cek_device.php lalu lakukan include di paling atas file atau letakan di file header.php seperti pada contoh berikut

<?php
include "config/connect_db.php";
include "config/class.php":
include "config/function.php";
include "cek_device.php";
?>

Contoh isi file cek_device.php

<?php
$is_mobile = preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent);
if($is_mobile){
     header("location:http://m.domainanda.com");
     exit
}
?>

preg_match adalah script php untuk mencari kecocokan string sesuai format, lihat info lengkapnya di dokumentasi resmi php. di script tersebut bila bila $user_agent ditemukan kecocokan maka akan di redirect ke sub domain m.domainanda.com menggunakan perintah header("location:file atau url").

2. Multipel Template File

Cara kedua ini adalah akan sangat terasa efekti bila kita membuat website menggunakan konsep pertama seperti telah saya sebutka di atas (konsep file menu). Mengapa? karena bila kita menggunakan konsep pertama kita hanya menyediakan 2 file saja yakni header dan footer, selanjutnya tinggal mainkan trik css saja

Baiklah, sebagai bahan praktik kita contohkan dengan membuat website yang terdiri dari 2 halaman, homepage (index.php) dan menu Belajar (belajar.php) tentunya dengan pendukung file header.php juga footer.php.

Sebagai bahan contoh supaya tidak terlalu banyak script saya akan coba menggunakan sampel script yang pernah saya bikin ditambah file belajar.php
1. header.php (lihat - php code)
2. footer.php (lihat - php code)
3. sidebar.php (lihat - php code)
4. index.php (lihat - php code)
5. belajar.php (lihat)

Adapun isi file belajar.php seperti berikut

<?php include "header.php"; ?>

<h1>Media Belajar</h1>
<p>Ini adalah halaman media belajar bersama, di sini Anda bisa belajar beberapa bahasa pemrograman web yang meliputi PHP, HTML, CSS dan Javascript</p>
<p>Silahkan pilih satu yang ingin Anda pelajari pada link di bawah ini:</p>
<ol>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<?php include "footer.php"; ?>

Contoh di atas adalah contoh script php standar untuk website yang aksesnya untuk di PC. Bila kita ingin satu domain tapi otomatis switch template maka seperti yang saya sebutkan tadi, hanya membutuhkan 2 file (sidebar gak perlu), yakni header.php dan footer.php.

Dalam hal ini saya coba praktikkan dengan pemberian prefiks "mobile_" pada file header dan footer baru menjadi mobile_header.php dan mobile_footer.php

Berikut adalah filenya
1. mobile_header.php (lihat - php code)
2. mobile_footer.php (lihat - php code)

Bila semua file yang diperlukan telah siap, sekarang saatnya menerapkan script deteksi ponsel. Script deteksi tersebut dapat Anda simpan didalam file function yang menghasilkan nilai TRUE atau FALSE, misalnya seperti berikut;

<?php
function is_mobile(){
$agent = $_SERVER['HTTP_USER_AGENT'];
$match = preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent);
if($match)
return TRUE;
else
return FALSE;
}
?>

Kalo fungsi tersebut sudah siap, tinggal beralih ke file header.php dan footer.php. Kenapa harus di header.php dan footer.php? Jawabannya adalah supaya tidak merubah banyak script dan dapat digunakan di template PC juga Mobile dengn satu file yang sama.

URL Sumber : http://blog.arijulianto.com/2013/04/teknik_website_kompatibel_mobile_device2.html#ixzz2aR5HPR6q