ビューを作成してみよう

$scaffoldにより、簡単にタスク管理アプリを実装できましたが、完了したタスクを非表示にするなどの機能を追加するためには、ソースコードを作っていく必要があります。
今回は、タスクが完了したらタスク一覧に表示させないよう実装しましょう。

テーブルのカラムを増やす
前項にて作成したtasksテーブルにカラムを2つ増やします。
この2つはそれぞれ「タスクが完了 or 未完了」、「タスクの完了日時」を管理します。

先ほどと同様、MySQLにてcakephp_taskに入って下記コマンドを実行します。


ALTER TABLE tasks ADD status INT NOT NULL DEFAULT ‘0’ AFTER body , ADD due_date DATE NULL DEFAULT NULL AFTER status;
コントローラーにアクションを追加
アクションとは、ざっくり説明すると、処理ごとにまとめた単位です。
今回はタスクを完了したときの処理を書きます。

indexアクションは一覧画面を表示する。
doneアクションは完了ボタンが押された場合に呼ばれ、フラッシュメッセージをセットしてindexアクション(一覧画面)へリダイレクトする。

<?php
// app/Controller/TasksController.php
class TasksController extends AppController { 
    // 動作確認のためにscaffoldを使う 
    public $scaffold; 
    public function index() { 
        // 変数をビューへ渡す 
        $tasks_data = array(); 
        $this->set('tasks_data', $tasks_data); 
        // app/View/Tasks/index.ctpを表示 
        $this->render('index');
} 
    public function done() { 
        // URLの末尾からタスクのIDを取得してメッセージを作成 
        $msg = sprintf( 'タスク %s を完了しました。', $this->request->pass[0] ); 
        // indexへリダイレクト 
        // TasksControllerのindexアクションに戻るよ 
        $this->redirect(['controller'=>'tasks','action'=>'index']); 
        return; 
    }
}

先ほどと同様にアクセスすると、下図のようなエラーが発生します。
これは「対応するビューファイルがないよ」というエラーになります。
そのため、次項でビューファイルを作成していきましょう。

ビューの作成
それでは、アクションに対応するビューを作成しましょう。
まずはapp/View/に、Tasksフォルダを作成します。
これも、CakePHPの命名規約に従っています。

下記ソースをindex.ctpという名前でapp/View/Tasks/に保存してください。

<!-- app/View/Tasks/index.ctp -->
<?php // Htmlヘルパーを使い、<a>タグ(リンク)を生成する ?>
<?php echo $this->Html->link('新規タスク', '/Tasks/create'); ?>
<?php // コントローラーから渡された$tasks_dataを表示する ?>
<h3><?php echo count($tasks_data); ?>件のタスクが未完了です</h3>

そして先ほどと同様にアクセスしてみてください。
今度は下図のようなページが表示されます。
次回に続きます。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami