Teknik Membuat Website Kompatibel dengan Mobile Device

Dalam membuat website tentunya diperlukan minimal satu bahasa pemrograman web. Dalam hal ini yang saya gunakan adalah PHP. Saya tidak akan memjelaskan secara penjang lebar apa itu PHP, kalo temen-temen mau silahkan buka kumpulan tutorial dasar PHP saya di www.arijulianto.com/tutorial/php. Teknik ini akan saya coba gabikan kepada temen-temen semuanya, dimana beberapa orang ada saja yang sering menanyakan gimana caranya bikin website untuk diakses di ponsel. Contoh sederhananya adalah facebook. Bila kita mengakses facebook.com dari ponsel maka secara otomatis halaman yang ditampilkan dialihkan ke versi seluler yakni m.facebook.com

Website

Website merupakan wadah penyampaian informasi yang relatif penting di era sekarang ini. Untuk membuat website saja sekarang tidak perlu mengeluarkan kocek terlalu besar seperti beberapa tahun yang lalu. Kalo kita tau salah satu bahasa pemrograman web, misalnya PHP, bermodalkan 200 atau 300 ribu saja kita sudah punya website. Ajib kan? Sekarang zaman udah maju, akses website pun menjadi lebih luas medianya, tidak hanya melalui PC (personal Computer) saja tapi media-media lain terus bermunculan, bahkan pada 2012 lalu mulai beredar televisi yang bisa dipakai buka internet.

Ponsel atau Mobile Device

Lahirnya berbagai jenis smartphone merupakan awal dari semakin mudahnya akses internet, bahkan sudah banyak ponsel biasa yang bisa dipakai untuk akses internet. Bedanya ponsel biasa ada yang mampu menampilkan gambar saja dengan kualitas standar, ada yang kualitasnya lebih baik bahkan ada juga yang sudah bisa menampilkan gambar animasi juga flash. Adapun smartphone tentunya karena lebih baru maka jelas teknologinya lebih hebat dan cepat dalam memuat datanya.

Deteksi Ponsel

Kembali ke bahasan utama, yakni "Teknik Membuat Website Kompatibel dengan Mobile Device". Ada sebuah script sederhana di PHP yang mampu mengetahui informasi pengunjung. Script inilah yang akan kita gunakan sebagai media apakah media yang dipakai  merupakan PC ataukah Ponsel. Script atau perintah tersebut adalah $_SERVER['HTTP_USER_AGENT'].

Akan saya coba bahas sedikit mengenai HTTP_USER_AGENT ini. Informasi yang dihasilkan dari HTTP_USER_AGENT ini adalah informasi client, atau informasi perangkat yang digunakan untuk mengakses internet, meliputi Operating System, Browser, dll yang meliputi nama dan versinya. Kalo temen-temen mengakses blog saya ini dari komputer, entah itu Chrome, Firefox, Opera atau bahkan IE bisa dilihat di sidebar sebelah kanan informasi yang saya sebutkan tadi, yakni nama browser dan sistem operasi. Kalo temen-temen mengaksesnya melalui ponsel bisa dilihat brand (merk plus model ponsel ) dan sistem operasinya (bb, andriod, symbian, java, windows atau yg lainnya).

Sekarang kita akan kita bahas lebih jauh mengenai pemanfaatan HTTP_USER_AGENT dalam hal deteksi perangkat mobile atau bukan.

Saya akan berikan beberapa output yang dihasilkan ketika melakukan <? echo $_SERVER['HTTP_USER_AGENT']; ?> di file PHP ketika saya mencoba mengeceknya. Kalo temen-temen pengen mengeceknya silahkan buka halaman ini: www.arijulianto.com/tools/useragentstring. Untuk keperluan disini saya melakukan test pada beebrapa browser komputer dan juga  ponsel. Mohon maaf saya tidak melakukan test untuk jenis ponsel lainnya karena medianya yang belum bisa saya dapatkan.

Output hasil test di Komputer

Google Chrome di Windows 8
    Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/535.24 (KHTML, like Gecko) Chrome/19.0.1055.1 Safari/535.24

Mozilla Firefox di Windows XP
    Mozilla/5.0 Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.13) Firefox/3.6.13

IE di Windows Vista
    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 3.5.21022; .NET CLR 3.5.30729; MS-RTC LM 8; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET CLR 3.0.30729)

Output hasil test di Ponsel

Nokia 6120 Classic
    Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 Nokia6120c/3.70; Profile/MIDP-2.0 Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413

Samsung Galaxy Tab
    Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Dengan bekal HTTP_USER_AGENT, maka dapat kita pilah pilih mana yang kira-kira mobile dan mana yang kira-kira PC. Baiklah, inilah script yang saya gunakan di web dan blog saya ini untuk mendeteksi pengunjung dari ponsel atau smartphone

Sekarang teman-teman semua sudah tau rahasia cara deteksi mobile web dengan PHP, sekarang tinggal kita kembangkan ke tahapan berikutnya.

(bersambung...)