![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
閲覧総計：3818 （本日：1 昨日：0) CakePHPの入門者トレーニングとして、gihyo.jpサイトの「CakePHPで高速Webアプリ開発」 【目次】(項目をクリックすると、そこに飛べます) 必要なJavaScript?ライブラリの入手 †（原典）http://gihyo.jp/dev/serial/01/cakephp/0008 http://script.aculo.usからJavaScript?ライブラリを入手
９個のファイルを/cake/app/webroot/js/フォルダへ配置 （はまりポイント）ファイルが２つのフォルダにわかれているとは思わなかった。 Tasksコントローラの修正 †（原典）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ビューの修正 †（原典）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ビューの作成 †（原典）http://gihyo.jp/dev/serial/01/cakephp/0008?page=2 yet_tasks_table.ctpを作成し 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/add.ctp <?php echo $this->renderElement('yet_tasks_table') ?>
動作確認（×正常に稼働しません） †動作確認をしましたが「タスクの追加」機能が正常に稼働しません。 ●indexビュー画面は正しく表示された ●英数文字を入力し「タスク追加」すると異常画面を表示 ●日本語データを入力し「タスク追加」すると日本語データがDBに入力されない 原因追究しましたが、日本語文字コードをEUCとしているためと想像されますが
|
LH_tasks_Ajaxタスク追加エラー画面２.JPG 709件
[詳細]
LH_tasks_Ajaxタスク追加エラー画面１.JPG 767件
[詳細]
LH_tasks_index_Ajax画面.JPG 744件
[詳細]
Ajaxツール導入２.JPG 760件
[詳細]
Ajaxツール導入１.JPG 780件
[詳細]
