Mobilize your cake app in minutes (Articles) | The Bakery, Everything CakePHP

Mobilize your cake app in minutes

By Rich Gubby (rgubby)

Whilst cake provides you with basic mobile detection, it doesn't cut it in the real world, there are literally thousands of mobile devices / browsers that will slip through the requestHandler's net.

By plugging Wapple Architect into cake and using web services to do your device detection, you can easily describe your mobile pages in WAPL and let Wapple work out which markup to output to a particular device.

Here's what you need in order to use this tutorial:

1. SOAP (in this example i'm using the native PHP soap extension)

Note: In this example, we're going through a route that would send us through the pages_controller and normally have a view of /app/views/pages/home.ctp

Step 1. Sign up for a Wapple Architect Dev Key

Visit http://wapple.net/architect.htm?trk=cakephp and head over to the registration page, once you have your dev key, you can enter it into the mobile detection component below.

There is also a developer site at http://wapl.info and a google group at http://groups.google.com/group/wapl

Step 2. Create Mobile Detection Component

Filename: /app/controllers/components/mobile_detection.php

Component Class:

Download code


<?php 

/**

 * Mobile Detection Component

 * @author rich gubby

 * @version 0.1

 */ 

class MobileDetectionComponent extends Object

{

    var $components = array('RequestHandler');

    var $isMobile = false;

    var $architectDevKey = 'ENTER-DEV-KEY-HERE';



    function startup($controller)

    {

        $this->controller = $controller;

    }



    function detect()

    {

        // Set up SOAP client

        try 

        {

            $sClient = @new SoapClient('http://webservices.wapple.net/wapl.wsdl');



            if($sClient)

            {

                $headers = array();

                foreach($_SERVER as $key => $val)

                {

                    $headers[] = array('name' => $key, 'value' => $val);

                }

                

                // If we're a mobile, use WAPL to display the page

                $params = array(

                    'devKey' => $this->architectDevKey,

                    'deviceHeaders' => $headers

                );

                    

                if($sClient->isMobileDevice($params))

                {

                    $this->controller->webservices = 'Wapl';

                    $this->RequestHandler->respondAs('xml');

                    $this->controller->viewPath .= DS.'wapl';

                    $this->controller->layoutPath = 'wapl';

                    $this->controller->set('sClient', $sClient);

                    $this->controller->set('sClientHeaders', $headers);

                    $this->controller->set('architectDevKey', $this->architectDevKey);



                    // Flag as a mobile device

                    $this->isMobile = true;

                }

            }

        } catch (Exception $e)

        {

            // Put your error handling in here

        }

    }

}

?>

Step 3. Use the mobile detection component inside a controller

Filename: /app/app_controller.php

Controller Class:

Download code


<?php 

class AppController extends Controller 

{

    var $components = array('MobileDetection');

    function beforeFilter()

    {

        $this->MobileDetection->startup($this);

        $this->MobileDetection->detect();

    }

}

?>

I've put the call to detect() in the app_controller but obviously you can put it in any controller you want.

Now you've done your device detection and the result has come back as a mobile, the layout and view path will have been amended, so now it's just a case of creating a layout and individual view files.

Step 4. Create WAPL layout

Filename: /app/views/layouts/wapl/default.ctp

Download code




<?php 

// XML headers and open

$string = '<' . '?xml version="1.0" encoding="utf-8" ?'.'><wapl xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://wapl.wapple.net/wapl.xsd">';



// Page title and external CSS

$string .= '<head><title>Site: '.$title_for_layout.'</title>';

$string .= '<css><url>http://your-domain.com/css/mobile.css</url></css>';

$string .= '</head>';

$string .= '<layout>';



$string .= $content_for_layout;



$string .= '</layout></wapl>';



// Setup parameters for communicating

$params = array('devKey' => $architectDevKey, 'wapl' => $string, 'deviceHeaders' => $sClientHeaders);



// Send markup to API and parse through simplexml

$xml = simplexml_load_string($sClient->getMarkupFromWapl($params));



foreach($xml->header->item as $val)

{

    header($val);

}

echo trim($xml->markup);

Note: You'll want to amend your page title and the URL of your css in the layout above.

Step 5. Create a view to display WAPL code

Filename: /app/views/pages/wapl/home.ctp

View Template:

Download code




<?php

echo '

<row>

<cell>

<chars>

<value>Hello world!!</value>

</chars>

</cell>

</row>';

?>

Step 6. Expand your application!

See http://wapl.info/docs/chapter/Developing-with-WAPL/ for more information with regards to building different elements such as text, images, links and forms into your mobile application!

Note: You'll also probably want to set a cookie / session on the value returned from isMobileDevice() and only do a call to it if that value isn't set in order to cut down on the number of SOAP calls you make.

Some example sites (best viewed on your mobile!)

xboxalerts.co.uk
mobileshoppingreview.com

Comments

CakePHP Team Comments Author Comments

Question

1 Has anyone got this to work?

Following the code exactly and then trying to fix it all I can get is an error - Notice (8): Array to string conversion [APP/controllers/components/mobile_detection.php, line 31]
Any help much appreciated.

Comment

2 It works for me first time

I'm using the native PHP SOAP extension, and the latest stable version of CakePHP and it works perfectly. I copied the code above and created the files above as instructed and managed to get the example up and running in 5 mins. Very impressed!

Andy, What version of CakePHP are you using and what SOAP technology in PHP ie.e PEAR SOAP, SOAP extension or nusoap etc?

The error you are receiving appears to be related to the foreach loop on the _SERVER variable. This is very odd!

I'm currently working on mobilising an existing CakePHP app and will be posting on the WAPL Google Group when it's done. I'll also update this thread.

Comment

3 Notice (8): Array to string conversion

I also get the same "Notice (8): Array to string conversion" message. Mine however is on line 47 of mobile_detection.php
- $sClient->isMobileDevice($params)

also occurs on the layout file (default.ctp) on line 20
- $sClient->getMarkupFromWapl($params)

Both seam to happen with functions to WAPL. I'm running CakePHP v1.2.1.8004 and the native PHP Soap extension.

Any help would be appreciated. thanks!

Following the code exactly and then trying to fix it all I can get is an error - Notice (8): Array to string conversion [APP/controllers/components/mobile_detection.php, line 31]
Any help much appreciated.

Comment

4 RE: Array to String Conversion

Hi Enrique,

I've tried the code and it's worked fine for me first time. It's worth trying to bebug this because once you get this code going it's a breeze to make mobile sites with cake.

Can you tell us what version of PHP you are running, and what version of the SOAP extension? I can't seem to replicate what you're seeing at the moment, so I'm guessing it's some sort of versioning issue.

Also, what OS and web server are you running?

Thanks,
Steven

I also get the same "Notice (8): Array to string conversion" message. Mine however is on line 47 of mobile_detection.php
- $sClient->isMobileDevice($params)

also occurs on the layout file (default.ctp) on line 20
- $sClient->getMarkupFromWapl($params)

Both seam to happen with functions to WAPL. I'm running CakePHP v1.2.1.8004 and the native PHP Soap extension.

Any help would be appreciated. thanks!

Following the code exactly and then trying to fix it all I can get is an error - Notice (8): Array to string conversion [APP/controllers/components/mobile_detection.php, line 31]
Any help much appreciated.

Comment

5 Solved!

Replace:


if($sClient->isMobileDevice($params))

with:


if(@$sClient->isMobileDevice($params))

in the mobile_detection component

and replace:


$xml = simplexml_load_string($sClient->getMarkupFromWapl($params));

with


$xml = simplexml_load_string(@$sClient->getMarkupFromWapl($params));

in the WAPL layout file

It seems that there's a soap bug and the way that it handles arrays being passed into the call - the help i've found on it is that it's just a notice and works anyway - i've tested the code on a linux box (the error doesn't happen on windows for some reason), got the same error and fixed it by suppressing it.

The good news is that the code works with the error suppressed!

Comment

6 Notice (8): Array to string conversion

Comment

7 Excellent - worked first time, easy to implement

Hi Steven,
Thanks for looking into this. I'm running PHP 5.2.6, SOAP 5.2.6 .The server is a Mac OSX 10.5.6 and Apache 2.2.9

thanks!
e

Hi Enrique,

I've tried the code and it's worked fine for me first time. It's worth trying to bebug this because once you get this code going it's a breeze to make mobile sites with cake.

Can you tell us what version of PHP you are running, and what version of the SOAP extension? I can't seem to replicate what you're seeing at the moment, so I'm guessing it's some sort of versioning issue.

Also, what OS and web server are you running?

Thanks,
Steven

Thanks for this article, its just what I've been looking for to implement the mobile phone version of http://www.mobilesplease.co.uk it has worked absolutely fine for me. I am using PHPCake version 1.2.2.8120 (the latest stable release). Thanks again, its made my job a thousand times easier.

The Bakery Everything CakePHP