#freeze 閲覧総計:&counter(); (本日:&counter(today); 昨日:&counter(yesterday);) CakePHPの入門者トレーニングとして、gihyo.jpサイトの「CakePHPで高速Webアプリ開発」 がすばらしい。しかし、このサンプル例題はCakePHP1.1で解説されている為、CakePHP1.2 では少し異なるコード表現になりそうな所がある。 サンプル例題「ToDoアプリ」をCakePHP1.2でトレースしてみた。 09/01/01 【目次】(項目をクリックすると、そこに飛べます) #contents ~ *必要なJavaScriptライブラリの入手 [#e960bb33] (原典)http://gihyo.jp/dev/serial/01/cakephp/0008 http://script.aculo.usからJavaScriptライブラリを入手 |&attachref(Ajaxツール導入1.JPG,zoom,300x300,button){新しい画像添付};|&attachref(Ajaxツール導入2.JPG,zoom,300x300,button){新しい画像添付};| |1.Download pageをクリック|2.current versionのzipファイルをダウンロード| 9個のファイルを/cake/app/webroot/js/フォルダへ配置 1.prototype.js 2.builder.js 3.controls.js 4.dragdrop.js 5.effects.js 6.scriptaculous.js 7.slider.js 8.sound.js 9.unittest.js (はまりポイント)ファイルが2つのフォルダにわかれているとは思わなかった。 prototype.jsの1つだけがlibフォルダに、他の8個のファイルはsrcフォルダ内にあった。 *Tasksコントローラの修正 [#j9e5b29c] (原典)http://gihyo.jp/dev/serial/01/cakephp/0008?page=1 Ajax化にあたって、tasks_controller.phpのaddアクションを書き換えます。 /cake/app/controllers/tasks_controller.php <?php // app/controllers/tasks_controller.php class TasksController extends AppController { //AppControllerを継承 var $name = 'Tasks'; //controller名を定義(頭が大文字を覚える) var $uses = array('Task'); //使用するmodel名を定義 var $helpers = array( //利用ヘルパーの追加 'Javascript', 'Ajax', ); function index() { //indexアクションの定義 $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC')); $this->set('done_tasks', $this->Task->findAllByStatus('done', null, 'Task.modified DESC')); } function add() { if (empty($this->data)) return; //モデルへの値が渡されてきているかチェック $this->Task->save($this->data, true, array('content', 'created', 'modified')); //DBへのレコード追加、saveの第3引数でホワイトリスト設定をした $this->set('yet_tasks', $this->Task->findAllByStatus('yet', null, 'Task.created ASC')); $this->layout = 'ajax'; } function done($id) { if ($this->Task->findById($id)) { $this->Task->id = $id; $this->Task->save(array('status' => 'done')); } $this->redirect('/tasks'); } function edit($id) { $task = $this->Task->findById($id); if (!$task) { $this->redirect('/tasks'); return; } if (!empty($this->data)) { $task['Task']['content'] = $this->data['Task']['content']; $this->Task->save($task); $this->redirect(array('action'=>'index')); } $this->set('task', $task); } function del($id) { $this->Task->del($id); $this->redirect('/tasks'); } } *indexビューの修正 [#p8a7b149] (原典)http://gihyo.jp/dev/serial/01/cakephp/0008?page=2 Ajax化にあたって、index.ctpを書き換えます。 /cake/app/views/tasks/index.ctp <?php echo $javascript->link('prototype') ?> <?php echo $ajax->form('/add', 'post', array('update' => 'yet_tasks')) ?> <p><?php echo $form->input('Task.content', array('type'=>"text", 'label'=>"")) ?> <?php echo $form->submit('タスクを追加') ?></p> </form> <h2>未完了タスク</h2> <div id="yet_tasks"> <?php echo $this->renderElement('yet_tasks_table') ?> </div> <h2>完了タスク</h2> <table> <tr> <th>Id</th> <th>タスク内容</th> <th>状態</th> <th>操作</th> <th>作成日</th> </tr> <?php foreach ($done_tasks as $task) { ?> <tr> <td><?php echo h($task['Task']['id']) ?></td> <td><?php echo h($task['Task']['content']) ?></td> <td><?php echo h($task['Task']['status']) ?></td> <td><?php echo $html->link('削除', '/tasks/del/' . $task['Task']['id'], null, '削除してもよろしい ですか?') ?></td> <td><?php echo h($task['Task']['created']) ?></td> </tr> <?php } ?> </table> *yet_tasks_tableエレメントとaddビューの作成 [#z8ff27c3] (原典)http://gihyo.jp/dev/serial/01/cakephp/0008?page=2 yet_tasks_table.ctpを作成し cake/app/views/elements/フォルダに保存します。 cake/app/views/elements/yet_tasks_table.ctp <table> <tr> <th>Id</th> <th>タスク内容</th> <th>状態</th> <th>操作</th> <th>作成日</th> </tr> <?php foreach ($yet_tasks as $task) { ?> <tr> <td><?php echo h($task['Task']['id']) ?></td> <td><?php echo h($task['Task']['content']) ?></td> <td><?php echo h($task['Task']['status']) ?></td> <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> <td><?php echo h($task['Task']['created']) ?></td> </tr> <?php } ?> </table> add.ctpを作成し cake/app/views/tasks/フォルダに保存します。 cake/app/views/tasks/add.ctp <?php echo $this->renderElement('yet_tasks_table') ?> *動作確認(×正常に稼働しません) [#ce610053] 動作確認をしましたが「タスクの追加」機能が正常に稼働しません。 原因を調べましたが、日本語EUCを使っている関係では?との所までわかりましたが 現時点では解決法がわかっていません。 09/01/01 ●indexビュー画面は正しく表示された &attachref(LH_tasks_index_Ajax画面.JPG,zoom,300x300,button){新しい画像添付}; ●英数文字を入力し「タスク追加」すると異常画面を表示 &attachref(LH_tasks_Ajaxタスク追加エラー画面1.JPG,zoom,300x300,button){新しい画像添付}; ●日本語データを入力し「タスク追加」すると日本語データがDBに入力されない &attachref(LH_tasks_Ajaxタスク追加エラー画面2.JPG,zoom,300x300,button){新しい画像添付}; 原因追究しましたが、日本語文字コードをEUCとしているためと想像されますが 解決方法は皆目見当がつきません。 だれかアドバイス願います。 09/01/03 - 自分の環境では正常にできました。ちなみにUFT-8にしています。 -- [[通りすがり]] &new{2009-05-06 (水) 23:10:20}; - 当方でも正常にできました。上に同じくUTF-8です。 -- [[ごんべー]] &new{2009-06-25 (木) 16:30:56}; - 私の環境(UTF-8)でも問題ありませんでした。 -- [[通りすがり]] &new{2009-07-07 (火) 13:37:42}; - saveする前に、$this->data['Task']['content'] = mb_convert_encoding($this->data['Task']['content'], "EUC-JP", "UTF-8"); でいけましたよー -- &new{2009-11-17 (火) 13:16:14}; #comment_nospam #vote(参考になった[8],ふつう[0],参考にならなかった[1])