閲覧総計:3822  (本日:1  昨日:0)

CakePHPの入門者トレーニングとして、gihyo.jpサイトの「CakePHPで高速Webアプリ開発」
がすばらしい。しかし、このサンプル例題はCakePHP1.1で解説されている為、CakePHP1.2
では少し異なるコード表現になりそうな所がある。
サンプル例題「ToDoアプリ」をCakePHP1.2でトレースしてみた。 09/01/01

【目次】(項目をクリックすると、そこに飛べます)


必要なJavaScript?ライブラリの入手

(原典)http://gihyo.jp/dev/serial/01/cakephp/0008

http://script.aculo.usからJavaScript?ライブラリを入手

Ajaxツール導入1.JPGAjaxツール導入2.JPG
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コントローラの修正

(原典)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/フォルダに保存します。

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') ?>

動作確認(×正常に稼働しません)

動作確認をしましたが「タスクの追加」機能が正常に稼働しません。
原因を調べましたが、日本語EUCを使っている関係では?との所までわかりましたが
現時点では解決法がわかっていません。 09/01/01

●indexビュー画面は正しく表示された
LH_tasks_index_Ajax画面.JPG

●英数文字を入力し「タスク追加」すると異常画面を表示
LH_tasks_Ajaxタスク追加エラー画面1.JPG

●日本語データを入力し「タスク追加」すると日本語データがDBに入力されない
LH_tasks_Ajaxタスク追加エラー画面2.JPG

原因追究しましたが、日本語文字コードをEUCとしているためと想像されますが
解決方法は皆目見当がつきません。
だれかアドバイス願います。 09/01/03


選択肢 投票
参考になった 9  
ふつう 0  
参考にならなかった 1  

添付ファイル: fileLH_tasks_Ajaxタスク追加エラー画面2.JPG 711件 [詳細] fileLH_tasks_Ajaxタスク追加エラー画面1.JPG 769件 [詳細] fileLH_tasks_index_Ajax画面.JPG 747件 [詳細] fileAjaxツール導入2.JPG 763件 [詳細] fileAjaxツール導入1.JPG 784件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-07-25 (土) 17:42:37 (1395d)