cakephp并创建一个移动网站

时间:2012-10-15 09:53:46

标签: cakephp layout mobile views

我创建了我的cakephp网站,现在想创建它的移动版本。我已经在这里和其他关于创建移动网站的页面上提出了问题。但是,在实现代码后,页面不会加载,只显示一个没有标题等的空白页面。

这是我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';

    }

}

这是我的登录功能

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{

    }


}

这是我的mobile.ctp布局

<?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>

这是我的login.ctp文件

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

我只是想创建一个简单的登录页面。我正在使用cakephp 2.0

5 个答案:

答案 0 :(得分:2)

使用CakePHP主题功能(http://book.cakephp.org/2.0/en/views/themes.html)会不会更清晰?

我过去做过类似的事情,你在过滤器回调中检测到请求是否是移动的,如果是,那么只需切换到移动主题。

答案 1 :(得分:1)

您似乎在移动设备中遇到表单呈现问题,这里有一个关于如何在移动网站中使用HTML5表单的小指南。

A Form of Madness由Mark Pilgrim撰写的关于HTML5表格的章节

此处还提供了如何使用CakePHP for Mobile网站的解决方案。 http://madething.org/post/661607317/mobile-browser-detection-and-optimization-in-cakephp 本文涉及的主题是。

  1. 使用CakePHP进行浏览器检测
  2. 定义用于将移动视图置于CakePHP中的文件结构
  3. 创建移动布局文件
  4. 编写代码并将所有内容放在一起以在Mobile中运行网站
  5. 最后,如果您使用Bootstrap.js Framework,我会很感激,它会处理您的大多数前端移动兼容性问题。

答案 2 :(得分:0)

我已将此代码添加到我的控制器并且运行良好

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';
        }

答案 3 :(得分:0)

您提到您使用的是2.0版,但在mobile.ctp中使用的fetch()在版本2.1之前未添加。您必须使用$content_for_layout代替fetch('content')。查看layout documentation

答案 4 :(得分:0)

我强烈建议您使用Twitter Bootstrap。 http://twitter.github.com/bootstrap/ 那里有很多助手,CSS会自动为你检测移动设备,你不需要所有的代码来为你做。 Google cakephp bootstrap,你会发现很多东西。最好的是它具有响应性,适用于各种屏幕分辨率的多种移动设备。