ここではビューに手を加えていきましょう。
まずは、左上のCakePHPのマークです。
ここをクリックすると、CakePHPのホームページにとびます。
これを変更し、/Tasks/indexにとぶようにします。
ビューのテンプレートはapp/View/Layouts/default.ctpです。
もしヘッダーやフッターが気になるようであれば、ここを修正しましょう。
// app/View/Layouts/default.ctp // 省略 <body> <div id="container"> <div id="header"> <h1><?php echo $this->Html->link('タスク管理アプリ', '/tasks/index'); ?></h1> </div> <div id="content"> // 省略
エレメントを使ってみる
エレメント とは、繰り返し表示されるものを一まとめにして、呼び出しやすくすることです。
(テンプレート化する、という表現に近いです。)
例えば、入力フォームなどはよく使いますよね。
今回は長くなったindex.ctpをエレメント化します。
エレメントは、app/View/Elements/以下に作成します。
<!-- app/View/Elements/task.ctp --> <?php // CSSを読み込み ?> <?php echo $this->Html->css('tasks'); ?> <div class="roundBox"> <h3> <?php echo h($task['Task']['id']); ?> : <?php echo h($task['Task']['name']); ?> </h3> 作成日<?php echo h($task['Task']['created']); ?> <p class="comment"> <ul> <?php foreach ($task['Note'] as $note): ?> <li><?php echo h($note['body']); ?> </li> <?php endforeach; ?> <li><?php echo $this->Html->link( 'コメントを追加', '/Notes/create'); ?> </li> </ul> </p> <?php echo $this->Html->link( '編集', '/Tasks/edit/' . $task['Task']['id'], array('class' => 'button left') ); ?> <?php echo $this->Html->link( 'このタスクを完了する', '/Tasks/done/' . $task['Task']['id'], array('class' => 'button right') ); ?> </div>
ちょっとCSSもつけ加えてみました。
CakePHPではCSSやJSを規定のディレクトリに入れておけば、下記のメソッドで呼び出すことができます。
// task.cssを読み込み echo $this->Html->css('tasks');
ではどこに入れればよいのか?
それはapp/webroot/以下にいれます。
CSSファイルであればcss、JSファイルであればjsにいれます。
それではCSSファイルを作成しましょう。
/* app/webroot/css/tasks.css */ .roundBox { background: #FFDACC; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-weight: normal; padding: 10px; margin: 10px 0; } .button { background-color: #7A90C0; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 5px 25px; line-height: 2em; }
これで準備は完了です。
最後にindex.ctpを修正しましょう。
エレメントを下記メソッドによって呼び出せば、コードがすっきりし、見やすくなります。
// エレメントのtaskを呼び出し、引数として$rowを渡す echo $this->element('task', array('task' => $row));
<!-- app/View/Tasks/index.ctp --> <?php echo $this->Html->link('新規タスク', '/Tasks/create'); ?> <h3><?php echo count($tasks_data); ?>件のタスクが未完了です</h3> <?php foreach($tasks_data as $row): ?> <?php echo $this->element('task', array('task' => $row)); ?> <?php endforeach; ?>
下記のように表示されれば、成功です。
コントローラーやビュー、モデルなどは極力読みやすくするために、エレメントなどを有効活用しましょう。