ウェブ、ショウジン

CakePHPでToDo管理アプリケーションを作る その5

2009-8-18
Category
PHP

ToDo管理アプリのチュートリアル最終回。
http://gihyo.jp/dev/serial/01/cakephp/0010

今回はアプリケーションとしての体裁を整えるために以下の作業を行う。

・レイアウトの作成
・ページタイトルの設定
・アクセスしやすいURLの設定

レイアウトの作成


「レイアウト」というのはビューを取り囲むコードのことで、ヘッダやフッタなど、常に表示させたいコードであればこの「レイアウト」ファイルに記述しておくとよいらしい。

レイアウトファイルは
app/views/layouts/以下に配置する。

そして、デフォルトのレイアウトファイルは
app/views/layouts/default.ctp

しかし、作成しない限りこのレイアウトファイルはない。このファイル名でこのディレクトリに配置することで、初めてこのレイアウトファイルがデフォルトで利用されることになる。

では、このレイアウトファイルを作成する前は一体何を表示していたかというと、appと同じディレクトリにあるcakeの中の
cake/libs/view/layouts/default.ctp

CakePHPはapp/views/layouts/にレイアウトファイルがない場合、cake/livs/view/layouts/内を探す。このファイルを書き替えても動作はするけれど、基本的にcakeディレクトリ以下のファイルはフレームワークの根幹部分なので書き替えないように。

ということで、レイアウトファイルについてある程度理解できたので実際に使用するdefault.ctpを作成してみる。

app/views/layouts/default.ctp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo h($title_for_layout); ?></title>
<?php echo $html->css('cake.generic'); ?>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>ToDo App</h1>
        </div>
        <div id="content">
            <?php echo $content_for_layout; ?>
        </div>
    </div>
</body>
</html>

このレイアウトファイルを使用してページを表示すると以下のようになる。

todo_008

変化は少ないけれど、ヘッダ部分のCakeアイコンがなくなってタイトルに「ToDo App」が表示されていたり、フッタのCakePHPアイコンもなくなっている。

<?php echo $html->css('cake.generic'); ?>

この部分はCSSファイルを読み込むlink要素を出力している。ここで指定している「cake.generic」はapp/webroot/css/cake.generic.cssのこと。

CSSを編集したい場合はこのCSSファイルを書き換えるか、読み込むCSSファイル自体を変更、追加する。

<?php echo $content_for_layout; ?>

$content_for_layoutにはビューの実行結果の文字列が格納されていて、ここでビューの内容を出力している。

レイアウトと表示出力のコントロール

デフォルト以外のレイアウトファイルを使用する場合、たとえば「example.ctp」を使いたい場合はapp/views/layouts/example.ctpを用意して、コントローラ側で

$this->layout = 'example';

のように記述する。(前回のAjax化の際のaddアクション部分参照)

また、コントローラのrenderメソッドを利用して明示的にビューとレイアウトを指定することが出来る。$this->render(‘ビュー名’, ‘レイアウト名’);

たとえばTaskコントローラ内のアクションでrenderメソッドを使って、ビューをapp/views/tasks/index2.ctp、レイアウトをapp/views/layouts/example.ctpで表示させたい場合は以下のように記述する。

$this->render('index2', 'example');

ビューだけ変更したい場合は

$this->render('index2');

ページタイトルの設定

ページタイトルはコントローラの$pageTitleプロパティで設定する。

$this->pageTitle = 'タスク一覧';

今回の例でいうと、Tasksコントローラのindexアクション(タスク一覧)とeditアクション(タスクの編集)の二箇所においてページタイトルを設定する。

app/controllers/tasks_controller.phpのindexアクション部分

    // indexアクション
    function index() {
        $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC'));
        $this->set('done_tasks', $this->Task->findAllByStatus('done', null, 'Task.modified DESC'));
        // ページタイトル
        $this->pageTitle = 'タスク一覧';
    }

app/controllers/tasks_controller.phpのeditアクション部分

    // editアクション
    function edit($id) {
        $task = $this->Task->findById($id);
        if (!$task) {
            $this->redirect('/tasks');
            return;
        }
        if (!empty($this->data)) {
            $task['Task']['content'] = $this->data['Task']['content'];
            $this->Task->save($task);
        }
        $this->set('task', $task);
        // ページタイトル
        $this->pageTitle = 'タスクの編集 Id:' . $id;
    }

アクセスしやすいURLの設定

これまでTasksコントローラへのアクセスはhttp://IPアドレス/cake/tasksだったけど、これをhttp://IPアドレス/cakeで、アクセスできるようにする。
※ホントはセットアップのときに「cake」っていうディレクトリ名を「todo」とかにリネームしておけば、もっと今回のチュートリアルに即した名称になっていた。

URLの設定(リダイレクト)はApacheのモジュール「mod_rewrite」でも出来るけれど、ここではCakePHPのRoutes機能を利用する。

app/config/routes.php

Router::connect(‘/’, array(‘controller’ => ‘pages’, ‘action’ => ‘display’, ‘home’));

を、以下に変更。

app/config/routes.php

Router::connect(‘/’, array(‘controller’ => ‘tasks’, ‘action’ => ‘index’, ‘home’));

これで「http://IPアドレス/cake」でアクセス出来るようになった。

CakePHP1.2を使ったToDo管理アプリの開発、ひとまず無事終了。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿