ここではビューに手を加えていきましょう。
まずは、左上の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; ?>
下記のように表示されれば、成功です。
コントローラーやビュー、モデルなどは極力読みやすくするために、エレメントなどを有効活用しましょう。
