Home > Development > Mobile development and CakePHP

Mobile development and CakePHP

I have been working on an EPG (electronic program guide) and RDVR system written using CakePHP, Mongo DB and jQuery. One of the phase two requirements was to have the guide and RDVR system work on mobile devices, starting with iPhones. CakePHP’s component RequestHandler and themes makes mobile development pretty easy. I use the following conditional to determine if a request is from a mobile device and then set some parameters.

if ($this->RequestHandler->isMobile())
{
    $this->theme = 'mobile';
    Configure::write('FEATURE.DEFAULT_CONTROLLER', 'mobiles');
    Configure::write('FEATURE.DEFAULT_ACTION', 'home');
}

CakePHP determines a request is from a mobile device by checking the User-Agent value against an array of strings in the file: cake_1.3.7\cake\libs\controller\components\request_handler.php

/**
 * List of regular expressions for matching mobile device's user agent string
 *
 * @var array
 * @access public
 */
var $mobileUA = array(
        'Android',
        'AvantGo',
	'BlackBerry',
	'DoCoMo',
	'iPod',
	'iPhone',
	'J2ME',
	'MIDP',
	'NetFront',
	'Nokia',
	'Opera Mini',
	'PalmOS',
	'PalmSource',
	'portalmmm',
	'Plucker',
	'ReqwirelessWeb',
	'SonyEricsson',
	'Symbian',
	'UP\.Browser',
	'webOS',
	'Windows CE',
	'Xiino'
);

From there its simply a matter of using CSS and views for mobiles as the controller methods return data useable by both PC’s and mobiles. I dont work on a Mac and so finding an emulator to develop with was a bit problem, I eventually came up with two solutions.

The first is to use the Firefox add on Modify Headers. I simply updated the HTTP header User-Agent with a string value. In this case it was ‘iPhone’. Its not a perfect solution as you are still viewing the application in a regular browser.

The second solution is to use the Chrome browser plugin Ripple written by Tiny Hippos. It works reasonably well although it did get a little whacky when I switched between iPad, iPhone4 and iPhone GS too many times. I had to clear the browser cache to get Ripple to reset. One other issue is that it does not send a User-Agent value that CakePHP recognizes. To get around that I simply add a value to CakePHP’s $mobileUI array in AppController::beforeFilter().

// Add the Header that Ripple uses for iPhone
$this->RequestHandler->mobileUA[] = 'AppleWebKit';

For reference here is the complete beforeFilter method.

public function beforeFilter()
{
    // Add the Header that Ripple uses for iPhone
    $this->RequestHandler->mobileUA[] = 'AppleWebKit';
 
    /*
    * Log the start of every action
    */
    Logger::write('Starting:', $this->name . '->' . $this->action, 0);
    Logger::write('Parameters for ' . $this->name . '->' . $this->action, $this->params, 3);
    if ($this->RequestHandler->isMobile())
    {
        $this->theme = 'mobile';
        Configure::write('FEATURE.DEFAULT_CONTROLLER', 'mobiles');
        Configure::write('FEATURE.DEFAULT_ACTION', 'home');
    }
}

Leave a Reply

Trackbacks:0

Listed below are links to weblogs that reference
Mobile development and CakePHP from rhythmicalmedia.com
TOP