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,
    //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"
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <title>My First Mobile</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <img id="logo" src="<?php echo $logo;?>" alt="logo"/>
    try {
    $isbro = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $ua, 'isBrowser');
    } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) {
    $isbro = "Not a Desktop Browser";
    $vendor = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor');
    } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) {
    $vendor = "Unknown Vendor";
    $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>
  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

Oleh littleflow3r

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 loves to satisfied her shopping hobbies just via looking around in online shop. oh yeah, she got an A for her english subject^^

Tinggalkan Balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.