(リスト1)。
indexビューの修正
indexビューは使用する変数が変わり、2つのリストを表示するようになったので大幅に修正しています(リスト2)。タスクごとに、完了(Done)、編集(Edit)、削除(Del)へリンクも加わっています。
editビューの作成
editアクション用のビューとしてapp/views/tasks/edit.thtmlファイルを作成し、リスト3のコードを記述します。
修正内容の解説:コントローラ編
以上でタスクの完了、編集、削除、完了未完了の分離機能が実装できました。上記修正内容を読み解いていきます。
indexアクション:ステータスを指定してタスクを取得する
findAllBy[フィールド名]メソッドによってstatusフィールドの値を指定してレコードを取得しています。
doneアクション:タスクを完了する
タスクの完了は「完了」リンクをクリックしてdoneアクションにアクセスし、タスクを完了します。
アクションの定義に引数を設定すると「http://example.com/~gihyo/todo/tasks/done/1」のようなURLからパラメータを受け取ることができます。
このブロックでは、引数で渡されてきたidのタスクの存在を確認し、statusフィールドの値をdoneに変更しています。データを更新するときは$this->Task->idに更新したいデータのidを代入した後にsaveします。
タスクの完了画面は出さずに即座にタスク一覧に戻すため、redirectしています。
editアクション:編集画面の表示と編集内容の保存を行う
editアクションは少々複雑で、編集画面の表示と保存を兼ね備えています。
引数で渡されてきたidでデータ取得を試みて、$taskに代入します。結果がfalseであればデータが存在しないので一覧表示へリダイレクトします。
データの存在チェックが通り、$this->dataのチェックでデータがPOSTされてきたときは、先ほど取得したデータのcontentフィールドを書き換えてsaveします。
最後にビューへTaskモデルのデータを渡して終了です。
delアクション:タスクを削除する
delアクションはタスクを削除し、一覧表示へリダイレクトします。
データの削除はモデルのdelメソッドにidを渡すことで行います。
ちなみにここではあえてデータの存在チェックを行っていません。削除行為自体はデータがあってもなくても行えるため、とくにエラー表示をしないのであれば不要だからです。
修正内容の解説:ビュー編
indexビュー:完了と未完了を分け、各機能へのリンクを設置
indexビューでは、$tasksに代わって$done_tasksと$yet_tasksで完了と未完了のタスクが分けて渡されてきたことに対応して、それぞれで一覧を表示するようにしました。その際、未完了タスクには完了、編集、削除へのリンクを作成しました。以下の部分でリンクを表示しています。
ここではHTMLヘルパーのlinkメソッドを使用してリンクを表示しています。完了と削除のリンクでは、リンクを選択したあとに確認メッセージを表示するようにしています。
余談ですがアプリケーション設計の1つの考え方として、アプリケーションの操作では元に戻せない処理を今回のようなリンクの選択とという手軽なインターフェースで行えてしまうときは、確認メッセージを表示すると誤操作を防ぐことができて良いでしょう。この考え方では、他への影響がなく状態を元に戻せる場合は必ずしも確認メッセージは出さなくてもよいとされます。
editビュー:タスク内容の修正フォーム
editビューではタスク内容の修正フォームを表示しています。
タスク一覧表示へのリンクです。HTMLヘルパーのlinkメソッドを使わず、URLのみHTMLヘルパーのurlメソッドで表示しています。違いとしては、WYISIWYGエディタからビューを調整する場合はこのように書いた方が都合が良いことがあります。
formの開始タグです。
HTMLヘルパーのtextareaメソッドを使用してtextarea要素を表示しています。
Submitボタンの表示です。ここでもHTMLヘルパーのsubmitメソッドを使わずにSubmitボタンを表示していますが、動作上問題ありません。
修正したアプリケーションの動作を確認する
修正したアプリケーションの動作を確認します。図1→3のような画面で遷移できれば修正は完了です。
今回はコードの書き方に統一性がありませんでしたが、多様な書き方を紹介するためにわざと統一しませんでした。実際の開発ではなるべく統一した書き方を心がけると良いでしょう。
次回予定はタスク追加のAjax化です。