CakePHPで高速Webアプリ開発

第7回 CakePHPで作るToDoアプリ(3)

この記事を読むのに必要な時間:およそ 4.5 分

修正内容の解説:ビュー編

indexビュー:完了と未完了を分け,各機能へのリンクを設置

indexビューでは,$tasksに代わって$done_tasksと$yet_tasksで完了と未完了のタスクが分けて渡されてきたことに対応して,それぞれで一覧を表示するようにしました。その際,未完了タスクには完了,編集,削除へのリンクを作成しました。以下の部分でリンクを表示しています。

<td>
 <?php echo $html->link('完了', '/tasks/done/' . $task['Task']['id'], null, '完了してもよろしいですか?') ?>
 <?php echo $html->link('編集', '/tasks/edit/' . $task['Task']['id']) ?>
 <?php echo $html->link('削除',  '/tasks/del/'  . $task['Task']['id'], null, '削除してもよろしいですか?') ?>
</td>

ここではHTMLヘルパーのlinkメソッドを使用してリンクを表示しています。完了と削除のリンクでは,リンクを選択したあとに確認メッセージを表示するようにしています。

余談ですがアプリケーション設計の1つの考え方として,アプリケーションの操作では元に戻せない処理を今回のようなリンクの選択とという手軽なインターフェースで行えてしまうときは,確認メッセージを表示すると誤操作を防ぐことができて良いでしょう。この考え方では,他への影響がなく状態を元に戻せる場合は必ずしも確認メッセージは出さなくてもよいとされます。

editビュー:タスク内容の修正フォーム

editビューではタスク内容の修正フォームを表示しています。

<p><a href="<?php echo h($html->url('/tasks')) ?>">タスク一覧へ戻る</a></p>

タスク一覧表示へのリンクです。HTMLヘルパーのlinkメソッドを使わず,URLのみHTMLヘルパーのurlメソッドで表示しています。違いとしては,WYISIWYGエディタからビューを調整する場合はこのように書いた方が都合が良いことがあります。

<form action="<?php echo h($html->url('/tasks/edit/' . $task['Task']['id'])) ?>" method="post">

formの開始タグです。

<h2>内容</h2>
<p><?php echo $html->textarea('Task/content', array('cols' => '60', 'rows' => '3', 'value' => $task['Task']['content'])) ?></p>

HTMLヘルパーのtextareaメソッドを使用してtextarea要素を表示しています。

<p><input type="submit" value="Save"></p>

Submitボタンの表示です。ここでもHTMLヘルパーのsubmitメソッドを使わずにSubmitボタンを表示していますが,動作上問題ありません。

修正したアプリケーションの動作を確認する

修正したアプリケーションの動作を確認します。図1→3のような画面で遷移できれば修正は完了です。

図1 完了と未完了タスクが分離された一覧表示

図1 完了と未完了タスクが分離された一覧表示

図2 完了と削除のリンク選択時に確認メッセージが表示される

図2 完了と削除のリンク選択時に確認メッセージが表示される

図3 Edit(編集)アクションのビュー

図3 Edit(編集)アクションのビュー

今回はコードの書き方に統一性がありませんでしたが,多様な書き方を紹介するためにわざと統一しませんでした。実際の開発ではなるべく統一した書き方を心がけると良いでしょう。

次回予定はタスク追加のAjax化です。

著者プロフィール

秋田真宏(あきたまさひろ)

株式会社ロケットスタート エンジニア。個人ブログは「akiyan.com」。1981年生まれ。

URLhttp://www.akiyan.com/

著書