Serba-serbi Teknik Redirect Website versi Mobile (Lokomedia)

Setelah kemarin saya mengupload sebuah template mobile, sekarang kita akan bahas cara penggunaannya. Untuk membuat sebuah mobile website, terlebih dahulu kita harus bisa membedakan browser apa yang mengakses website kita. Ini bisa didapatkan dengan mengetahui variabel user agent browser dengan sebuah script  $_SERVER[‘HTTP_USER_AGENT’]. Jika kita masih bingung untuk menggunakannya, ada sebuah class yang cukup baik untuk mengerjakan tugas mengenali user agent yaitu PHP Mobile detect.

PHP Mobile Detect adalah sebuah class php yang digunakan untuk mengenali user agent dari browser pengunjung web. Apakah browser yang digunakan adalah versi mobile ataukah versi dekstop. File class ini dapat di download pada situs http://code.google.com/p/php-mobile-detect/. Kita juga bisa bacapetunjuk penggunaannya di sana.

Sekarang kita akan bahas bagaimana cara penggunaannya dalam website yang berbasis lokomedia. Pertama yang harus dilakukan adalah mengupload file Mobile_Detect.php. Sebenarnya ada beberapa teknik yang bisa diterapkan dengan metode yang berbeda-beda :

1. Versi mobile dengan subdomain
Teknik ini digunakan dengan meletakkan template versi mobile di subdomain yang berbeda. Misalnya kita mempunyai domain cauza.web.id maka template mobile diletakkan pada subdomain mobile.cauza.web.id atau m.cauza.web.id (template mobile harus dimodifikasi). Sedangkan untuk menjalankannya kita perlu mengedit file media.php dengan script berikut.

include "Mobile_Detect.php";

if(empty($_SESSION['cek_versi'])){
	$detect = new Mobile_Detect();
	if ($detect->isMobile()) {
	$_SESSION['cek_versi']='mobile';
	 header("location:http://localhost/lokomedia/mobile/"); //redirect ke subdomain
	}else{
	$_SESSION['cek_versi']='dekstop';
	$pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";	
	}
} else if ($_SESSION['cek_versi']== 'mobile') {
    $pilih_template=mysql_query("SELECT * FROM templates WHERE id_templates=27");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}else{
    $pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
     header("location:http://localhost/lokomedia/mobile/"); //redirect ke subdomain
}

Script pada media.php sebenarnya adalah untuk memilih template yang aktif dalam database. Namun karena kita ingin memisahkan antara tampilan mobile dan dekstop maka kita juga membedakannya  dalam template yang berbeda.

2. Versi mobile dengan template mobile
Teknik ini cukup dengan mengupload template mobile ke folder templates atau kedatabase template. Setelah kita mendapat id_template dari database maka kita bisa meredirect tampilan mobile ke id_template tersebut. Scriptnya sebagai berikut :

include "Mobile_Detect.php";
  
//id_templates = 27 adalah template versi mobile
if(empty($_SESSION['cek_versi'])){
	$detect = new Mobile_Detect();
	if ($detect->isMobile()) {
	$_SESSION['cek_versi']='mobile';
	$pilih_template=mysql_query("SELECT * FROM templates WHERE id_templates=27");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
	}else{
	$_SESSION['cek_versi']='dekstop';
	$pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";	
	}
} else if ($_SESSION['cek_versi']== 'mobile') {
    $pilih_template=mysql_query("SELECT * FROM templates WHERE id_templates=27");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}else{
    $pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}

Dalam script diatas kita menggunakan teknik session supaya kita dapat melihat versi dekstop walaupun lewat device mobile. Namun jika kita ingin mengunci pengguna agar device mobile hanya bisa mengakses template mobile maka script berikut yang dibutuhkan :

include "Mobile_Detect.php";
  
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
	$pilih_template=mysql_query("SELECT * FROM templates WHERE id_templates=27");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}else{
	$pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";	
}

3. Meletakkan Mobile_Detect.php pada template.php
Dalam teknik ini template yang digunakan berfungsi ganda yaitusebagai template dekstop dan template mobile dalam satu folder. Tentu template standar yang kita gunakan memang harus di modifikasi ulang.

Silahkan dipilih metode mana yang ingin dipakai. Pastinya masih banyak metode lain yang bisa digunakan, semua tergantung dengan efisiensi dan kemudahan penggunaan script. Selamat bereksperimen