タスクの編集機能を実装しよう

ここではビューに手を加えていきましょう。
まずは、左上の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; ?>

下記のように表示されれば、成功です。
コントローラーやビュー、モデルなどは極力読みやすくするために、エレメントなどを有効活用しましょう。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami