Categories
PHP

Simple Mobile Programming with PHP and DeviceAtlas

Case Study : Create simple mobile site with PHP and Device Atlas Device Database
Requirements : Webserver Package, already installed. DeviceAtlas Database, download here. Maybe you should register first before able to download it. Be calm, it’s free.

Brief Overview
In this tutorial, we will focus on detecting what device that used by the user to access our mobile site. You may see something like “Download game for your Nokia 6610” or “Free theme for your K610i

How could your handphone could detected? This called Device Recognition.

We can do it, Device Recognition with API that provided by Device Atlas.

Okay Then, let us try.

Step 1 : DeviceAtlas Installation and Prepare for Working Folder

  1. Create a folder named helloMobile on your document root.
  2. Unzip device atlas that you’ve been download in to document root, so the structure folder is as shown below,

    DA Extract
  3. Copy json folder from sample folder, paste in helloMobile folder
  4. End of the working folder structure is as shown below,

    Folder Structure

Step 2 : Work with PHP

  1. Type the following script,
    <?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. Save with the name index.php in helloMobile folder
  3. Explanation:
    require_once 'Mobi/Mtld/DA/Api.php';
    $tree = Mobi_Mtld_DA_Api::getTreeFromFile('json/DeviceAtlas.json');
    $ua = $_SERVER[‘HTTP_USER_AGENT’];

    The code above is a code to initialize DA Api, with including API Class and provide path from JSON Database.

    While the following code is used for device recognition,

    [01] $ua = $_SERVER['HTTP_USER_AGENT'];
    [02] $model = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'model');
    [03] $isbro = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $ua, 'isBrowser');
    [04] $ismobile = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $ua, 'mobileDevice');
    [05] $display = Mobi_Mtld_DA_Api::getPropertyAsInteger($tree, $ua, 'displayWidth');
    [06] $vendor = Mobi_Mtld_DA_Api::getPropertyAsString($tree, $ua, 'vendor');

    Code [02]
    because it is not defined (untyped) so $model will produce device characteristics with String type. Model show the model from the used device. (ex : 6600, iPhone, N96).
    Code [03] define the type as boolean, so it will produce boolean value (0 or 1). For example, characteristics with the name isBrowser, for identifying whether device is a desktop browser (1 if True, 0 if False).
    Code [04]
    $ismobile will return boolean value, indicated whether the device is recognized mobile device or mobile browser.
    Code [05]
    $display will return the device’s display width on the integer value.
    Code [06]
    $vendor will return string value from the device’s vendor.

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

    The Code above will show “You’re using Desktop” confirmation if isBrowser value is 1, and other than that the system will display the information in accordance with the vendor and model / type of device you use.

Step 3 : Testing Code

  1. Go to http://localhost/helloMobile
  2. You will se an image like below,
    Result in Desktop
  3. If you access it via handphone, ex. IPhone, You will see image like below,

    Result in Iphone
  4. Or access it via Nokia,

    Result in Nokia 7250
  5. Or Blackberry 😀 ,
    Result in BlackBerry
Categories
PHP

Pemrograman Mobile Sederhana dengan PHP dan DeviceAtlas

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 😀 ,

    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 🙂