Studi Kasus : Membuat website mobile sederhana dengan PHP dan Device Atlas Device Database

Kebutuhan : Webserver Package, already installed. DeviceAtlas Database, download here. Mungkin anda harus register dulu untuk bisa mendownload deviceatlas. Tenang saja, free kok.

Brief Overview

Dalam tutorial kali ini, kita akan berfokus pada mendeteksi device mobile apa yang sedang digunakan oleh user untuk mengakses situs mobile kita. Mungkin anda akan sering melihat ketika anda mengakses suatu situs dengan browser hape anda “Download game untuk Nokia 6610 mu” atau “Free theme for your K610i

Bagaimana handphone yang kita gunakan bisa terdeteksi? Hal ini disebut dengan Device Recognition.

Kita bisa melakukan Device Recognition dengan menggunakan API yang disediakan oleh Device Atlas.

Okay Then, Mari kita coba.

Step 1 : Instalasi DeviceAtlas dan Persiapan Folder Kerja

  1. Buat folder bernama helloMobile dalam document root.
  2. Unzip file hasil download DeviceAtlas ke dalam folder document root, sehingga struktur file adalah seperti gambar dibawah,

    DA Extract

  3. Copy folder json dari dalam folder sample, paste di folder helloMobile
  4. Struktur akhir dari folder kerja adalah seperti gambar dibawah,

    Folder Structure

Step 2 : Bekerja dengan PHP

  1. Ketikkan script berikut,
    <?php
    //file name : index.php
    //author : littleflow3r
    //Include API
    require_once 'Mobi/Mtld/DA/Api.php';
    $tree = Mobi_Mtld_DA_Api::getTreeFromFile('json/Sample.json');
    $ua = $_SERVER['HTTP_USER_AGENT'];
    $logo = 'logo.png';
    header ("Cache-Control: max-age=200 ");
    header ("Content-Type: application/xhtml+xml ");
    echo '<?xml version="1.0" encoding="utf-8"?>';
    ?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>My First Mobile</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
    <img id="logo" src="<?php echo $logo;?>" alt="logo"/>
    <?php
    try {
    $isbro = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $ua, 'isBrowser');
    } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) {
    $isbro = "Not a Desktop Browser";
    }
    try{
    $vendor = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor');
    } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) {
    $vendor = "Unknown Vendor";
    }
    try{
    $model = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'model');
    } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) {
    $model = "Unknown Model";
    }
    ?>
    <h1><?php if ($isbro=='1') echo 'You"re Using Desktop';
    else { echo 'You"re Using '.$vendor.' '.$model;} ?></h1>
    </body>
    </html>
  2. Simpan dengan nama index.php dalam folder helloMobile
  3. Penjelasan :
    require_once 'Mobi/Mtld/DA/Api.php';
    $tree = Mobi_Mtld_DA_Api::getTreeFromFile('json/DeviceAtlas.json');
    $ua = $_SERVER[‘HTTP_USER_AGENT’];

    Code diatas adalah code untuk initialize DA Api, dengan cara meng-include-kan Class API dan menyediakan path dari JSON Database.Sedangkan code berikut adalah penggunaan device atlas untuk device recognition,
  4. $model = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'model');
    karena tidak didefinisikan type yang diambil (atau dengan kata lain untyped) maka $model akan menghasil karakteristik device dengan tipe String. Model menunjukkan model dari device yang digunakan (contoh : 6600, iPhone, N96).

    $isbro = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $ua, 'isBrowser');
    mendefinisikan tipe sebagai boolean, maka akan menghasilkan nilai boolean (0 atau 1). Sebagai contoh diatas adalah karakteristik dengan nama isBrowser, untuk mengidentifikasi device apakah sebuah desktop browser (1 jika True, 0 jika False)

    $vendor = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor');
    $vendor akan mengembalikan nilai string dari vendor (brand) device yang digunakan.

    <?php if ($isbro=='1') echo 'You"re Using Desktop';
    else { echo 'You"re Using '.$vendor.' '.$model;} ?>

    Code diatas akan menampilkan konfirmasi “You’re using Desktop” apabila nilai isBrowser adalah 1, dan selain daripada itu maka sistem akan menampilkan informasi sesuai dengan vendor dan model/tipe dari device yang digunakan.

Step 3 : Testing Code

  1. Pergi ke http://localhost/helloMobile
  2. Anda akan melihat tampilan seperti berikut,

    Result in Desktop

  3. Jika anda mengakses situs ini via handphone, misal IPhone, anda akan melihat gambar seperti dibawah,

    Result in Iphone

  4. Atau mengaksesnya via Nokia,

    Result in Nokia 7250

  5. Atau Blackberry :D ,

    Result in BlackBerry

  6. P.S. Untuk mobile devices diatas, saya menggunakan add-ons firefox user agent switcher, yaitu add ons firefox yang, secara gampangnya akan membuat browser firefox kita dianggap sebagai suatu devices tertentu. Add-ons ini akan sangat berguna jika anda ingin bereksperimen dengan mobileprogramming. Atau jika tidak, anda dapat menggunakan mobile emulator.

Okay, selamat mencoba. Happy Coding :) If there’s any question, feel free to comment :)
Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.


Related Articles:

Artikel terkait:

: PHP

About the author

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she lo

2 Comments

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: