CODEWITHSUNDEEP
cakephplayoutmobileview
user1393064
user1393064

Reputation: 411

cakephp and creating a mobile site

I've created my cakephp website and now would like to create a mobile version of it. I have followed questions on here and other pages on creating a mobile site. However after implementing the code the page doesn't load and just shows a blank white page with no title etc.

here is the code in my appcontroller

App::uses('Controller', 'Controller');

class AppController extends Controller {

    public $components = array(
        'DebugKit.Toolbar',
        'Session', 
        'Auth'=>array(
            'loginRedirect'=>array('controller'=>'users', 'action'=>'login'),
            'logoutRedirect'=>array('controller'=>'users', 'action'=>'login'),
            'invoiceRedirect'=>array('controller'=>'invoices', 'action'=>'viewinvoice'),
            'authError'=>"You can't access this page",
            'authorize'=>array('Controller')
        )
    );

    public function isAuthorized($user){
        return true;
    }

    public function beforeFilter(){
    $this->Auth->allow('index','view');
    $this->Auth->allow('about_us','view');
    $this->Auth->allow('contact_us','view');
    $this->Auth->allow('privacy','view');
    $this->Auth->allow('','');
    $this->Auth->allow('forgotten_password','view');

    if ($this->request->isMobile()){
    $this->is_mobile = true;
        $this->set('is_mobile', true );
        $this->autoRender = true;
}
    $this->set('logged_in', $this->Auth->loggedIn());
    $this->set('current_user',$this->Auth->user());

    }

    function afterFilter(){
        // if in mobile mode, check for a valid view and use it
    if (isset($this->is_mobile) && $this->is_mobile) {
        $view_file = file_exists( 'Views' . $this->name . DS . 'mobile/' . $this->action . '.ctp' );
        $layout_file = file_exists( 'Layouts' . 'mobile/' . $this->layout . '.ctp' );
        if($view_file || $layout_file){
            $this->render($this->action, ($layout_file?'mobile/':'').$this->layout, ($view_file?'mobile/':'').$this->action);
        }
    }
     }

    public function pdo_error(){
        $this->set('title_for_layout', 'Error');
        $this->set('stylesheet_used', 'homestyle');
        $this->set('image_used', 'eBOXLogoHome.jpg');   
        $this->layout='home_layout';

    }

}

here is my login function

public function login(){
    //allows users to log in to the website
        $this->set('title_for_layout', 'Welcome to eBox: Innovative Invoice System');
        $this->set('stylesheet_used', 'homestyle');
        $this->set('image_used', 'eBOXLogoHome.png');
        $this->set('comp', 'comp.jpg');
        $this->layout='homepage';

        //if the information is posted to the database      
        if ($this->request->is('post')){
            //and matches correctly to the database
            if ($this->Auth->login()){
            //matches the data to the database
            $username = $this->request->data['User']['username'];
            //get the users User.access_level
            $acl= $this->Auth->User('access_level');

                    switch($acl){

                            case 1:
                            //if the access_level=1 redirects user to Eboxs/home_employee
                            $this->redirect( array('controller' => 'Eboxs','action' => 'home_employee'));
                            break;

                            case 2:
                            //if the access_level=2 redirects user to Eboxs/home_admin
                            $this->redirect( array('controller' => 'Eboxs','action' => 'home_admin'));
                            break;


                            default:
                            //if the access_level=anything else redirects user to Eboxs/home
                            $this->redirect( array('controller' => 'Eboxs','action' => 'home'));
                            break;

                        }

                    }   

        else{

        }
    }else{

    }


}

here is my mobile.ctp layout

<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>
<div id = "header" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<head>

    <title>hi</title>
    <?php echo $this->Html->css($stylesheet_used); ?>


<?php echo $this->Html->image($image_used, array(
    "alt" => "eBox",
    'url' => array('controller' => 'Users', 'action' => 'login'))) ?>



</head>
</div>

<body>

        <?php echo $this->Session->flash(); ?>
        <?php echo $this->fetch('content'); ?>
</div>      

<div id="footer">
                        <p align= center>
                        <?php echo $this->Html->link('About Us', array('controller' => 'eboxs', 'action'=>'about_us')) ;?> 
                        | 
                        <?php echo $this->Html->link('Contact Us', array('controller' => 'eboxs', 'action'=>'contact_us')) ;?>  
                        | 
                        <?php echo $this->Html->link('Privacy', array('controller' => 'eboxs', 'action'=>'privacy')) ;?> 

    </div>
</body>
</html>

here is my login.ctp file 

 <table id ="loginform">

          <?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>

        <td><text6><?php echo  "Username"?></text6></td>

        <td><?php echo $this->Form->input('username',array('label'=>false,'size'=>7));?></td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

        <td><text6><?php echo  "Password"?></text6></td>

        <td><?php echo $this->Form->input('password',array('label'=>false,'size'=>12));?></td>

        <td><?php echo $this->Form->end('Login');?></td>

    <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td><text6>Forgot your password?</td>

        <td><?php echo $this->Html->link('Click Here', array('action'=> 'forgotten_password')) ;?></td>

    </tr></text6>

    </table>

im just trying to create a simple login page. I'm using cakephp 2.0

Upvotes: 2

Views: 3900

Answers (5)

Colby Guyer
Colby Guyer

Reputation: 594

I strongly recommend Twitter Bootstrap for your app. http://twitter.github.com/bootstrap/ There are a lot of helpers out there and the CSS will auto detect mobile for you aka you don't need all that code to do it for you. Google cakephp bootstrap and you will find a ton of stuff. The best thing is it is responsive and will work for multiple mobile devices of various screen resolutions.

Upvotes: 0

Hignesh Hirani
Hignesh Hirani

Reputation: 1059

It seems you're having issue with Form rendering in Mobile devices, here is a small guide about how HTML5 Form should be used in Mobile Sites.

A Form of Madness a chapter on HTML5 Forms from Dive Into HTML5 by Mark Pilgrim

Also here is a solution provided with how to use CakePHP for Mobile sites. http://madething.org/post/661607317/mobile-browser-detection-and-optimization-in-cakephp Topics Covered in this article are.

  1. Browser Detection using CakePHP
  2. Defining File structure for to put Mobile view in CakePHP
  3. Creating Mobile Layout Files
  4. Writing Code and put all things together to run site in Mobile

Finally, I would appreciate if you would use Bootstrap.js Framework, it will take care of most of your frontend Mobile Compatibility issues.

Upvotes: 1

Lawrence Barsanti
Lawrence Barsanti

Reputation: 33332

You mentioned that you are using version 2.0 but fetch(), used in mobile.ctp, was not added until version 2.1. You must use $content_for_layout instead of fetch('content'). Check out the layout documentation.

Upvotes: 0

user1393064
user1393064

Reputation: 411

i've added this code to my controller and works well

public function login(){
    //allows users to log in to the website
        $this->set('title_for_layout', 'Welcome to eBox: Innovative Invoice System');
        $this->set('stylesheet_used', 'homestyle');
        $this->set('image_used', 'eBOXLogoHome.png');
        $this->set('comp', 'comp.jpg');
        if($this->request->isMobile()){
        $this->layout='mobile';
        }
        else{
        $this->layout='homepage';
        }

Upvotes: 0

Sam Delaney
Sam Delaney

Reputation: 1305

Would it not be cleaner to use CakePHPs Theme functionality (http://book.cakephp.org/2.0/en/views/themes.html)?

I've done something similar in the past where you detect in the before filter callback whether the request is mobile, if it is, then simply switch to the mobile theme.

Upvotes: 2

Related Questions