とりぷるぷぅ技術メモ: [CakePHP]Ajax との連携

script.aculo.us の src 以下にある js ファイルを app/webroot/js にコピーする
prototype.js を app/webroot/js にコピーする

index.ctp の <head> 部に以下を追加

<?php echo $javascript->link('prototype'); ?>
<?php echo $javascript->link('scriptaculous'); ?>

index.ctp の <body> 部に以下を追加

    <h1>link</h1>
    <div id="user">
    </div>
    <?php echo $ajax->link('View User',
    array('controller' => 'users', 'action' => 'view', 1),
    array('update' => 'user', 'complete' => 'alert("Hello World")' )
    );
    ?>

views/users/view.ctp を作成

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<meta name="Content-Type" content="text/html; charset=utf-8">

<title></title>
</head>

<body>
<h1><?php echo $user['User']['username'] ?></h1>
<p>
<small>password: <?php echo $user['User']['password'] ?></small>
</p>

<p>
<small>趣味: <?php echo $user['Profile']['hobby'] ?></small>
</p>

</body> </html>

users_controll.php に以下を追加

var $helpers = array('Html', 'Javascript', 'Ajax');

function view($id = null)
{
 $this->User->id = $id;
 $this->set('user', $this->User->read());
}

Auto complete

script.aculo.us の src 以下にある js ファイルを app/webroot/js にコピーする
prototype.js を app/webroot/js にコピーする
app/views/layouts/ 以下にファイルがないとデフォルトのレイアウトが適用される。デフォルトレイアウトは cake/libs/view/layouts/default.ctp にある。
ここにある default.ctp を app/views/layouts/ 以下にコピーして以下の箇所を変更する
```
<?php
  echo $html->meta('icon');
  echo $html->css('cake.generic');
  echo $scripts_for_layout;
?>
```

prototype.jp と scriptaculous.js を読み込むようにする

echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');

charset や html の meta 情報もここで定義されているので各ページには基本的に必要ない。
index.ctp の <body> 部に以下を追加

<h1>link</h1>
<div id="user">
</div>
<?php echo $ajax->link('View User',
array('controller' => 'users', 'action' => 'view', 1),
array('update' => 'user', 'complete' => 'alert("Hello World")' )
);
?>

<h1>autoComplete</h1>
 <?php echo $form->create('User', array('url' => '/users/index')); ?>
 <?php echo $ajax->autoComplete('User.username', '/users/autoComplete')?>
 <?php echo $form->end('View user')?>

views/users/view.ctp を作成

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<meta name="Content-Type" content="text/html; charset=utf-8">

<title></title>
</head>

<body>
<h1><?php echo $user['User']['username'] ?></h1>
<p>
<small>password: <?php echo $user['User']['password'] ?></small>
</p>

<p>
<small>趣味: <?php echo $user['Profile']['hobby'] ?></small>
</p>

</body> </html>

views/users/auto_complete.ctp を作成

<ul>
  <?php foreach($users as $user): ?>
  <li><?php echo $user['User']['username']; ?></li>
  <?php endforeach; ?>
</ul>

users_controll.php に以下を追加

var $helpers = array('Html', 'Javascript', 'Ajax');

function view($id = null)
{
 $this->User->id = $id;
 $this->set('user', $this->User->read());
}

function autoComplete() {
 $this->set('users', $this->User->find('all', array(
         'conditions' => array(
            'User.username LIKE' => $this->data['User']['username'].'%'
          ),
         'fields' => array('username')
          )));
 $this->layout = 'ajax';
}

app/webroot/css に my.css を準備して以下を記述する

div.auto_complete {
 position: absolute;
 width: 250px;
 background-color: white;
 border: 1px solid #888;
 margin: 0px;
 padding: 0px;
}

li.selected {
 background-color: #ffb;
}

app/views/layouts/default.ctp に my.css を読み込ませるようにする
```
echo $html->css('cake.generic');
echo $html->css('my');
```

Selectで選択させて表を切り替える
プルダウンメニューを表示し、選択を切り替えるとそれに該当するユーザのテスト結果のみを表・グラフで表示するようにする。

index.ctp に以下を追加する。

<?php
 echo $form->create('user_id');
 echo $form->input('user_id', array('options' => array(1, 2, 3)));
 echo $form->end();
?>
<div id="result">ここに結果が</div><br>
<?php
 echo $ajax->observeField('user_id',
     array(
           'url' => array('action' => 'exam_table_graph'),
           'frequency' => 0.2,
           'update' => 'result'));
?>

index.ctp から Ajax 経由で呼び出される exam_table_graph.ctp を準備する。

<body>
<table border="1">
  <tr>
    <th>ID</th>
    <th>user_id</th>
    <th>Date</th>
    <th>math</th>
    <th>english</th>
    <th>physics</th>
  </tr>
  <?php
 foreach ($exams as $exam) {
  echo "<tr>\n";
  echo "<td>" . $exam['Exam']['id']; "</td>\n";
  echo "<td>" . $exam['Exam']['user_id']; "</td>\n";
  echo "<td>" . $exam['Exam']['date']; "</td>\n";
  echo "<td>" . $exam['Exam']['math']; "</td>\n";
  echo "<td>" . $exam['Exam']['english']; "</td>\n";
  echo "<td>" . $exam['Exam']['physics']; "</td>\n";
  echo "</tr>\n";
 }
  ?>
</table>

<?php
  echo '<img src="' . $graph_path . '"><br>';
?>

</body>

exams_controller.php に以下を追加する。

function exam_table_graph() {
 $user_id = $this->data['user_id'] + 1;
 $conditions = array('user_id' => $user_id);
 $order = 'date';
 $exams = $this->Exam->find('all',
       array('conditions' => $conditions,
      'order' => $order));
 $this->set('exams', $exams);
 $graph_path = './exam_graph/' . $user_id;
 $this->set('graph_path', $graph_path);
 Cache::write('exams' . $user_id, $exams);
}

function exam_graph($id=null) {
 if (!$id) {
  $id = 1;
 }
 $user_id = $id;

 /* Cache に保存された値を読み込む */
 $exams = Cache::read('exams' . $user_id);
 if ($exams == false) {
  $conditions = array('user_id' => $user_id);
  $order = 'date';
  $exams = $this->Exam->find('all',
        array('conditions' => $conditions,
       'order' => $order));
 }
 else {
  Cache::delete('exams' . $user_id);
 }

 /* pChart を使用する */
 App::import('Vendor', 'pchart/pdata');
 App::import('Vendor', 'pchart/pchart');

 $font_path = "c:\Windows\Fonts\sazanami-gothic.ttf";

 $y1data = array();
 $a = array();

 foreach ($exams as $exam) {
  array_push($y1data, $exam['Exam']['math']);
  array_push($a, $exam['Exam']['date']);
 }

 $data = new pData;
 $data->AddPoint($y1data, "math");
 $data->AddPoint($a, "date");
 $data->AddSerie("math");
 $data->SetAbsciseLabelSerie("date");
 $data->SetSerieName("数学", "math");

 $chart = new pChart(400, 230);
 $chart->setFontProperties($font_path,8);
 $chart->setGraphArea(50, 30, 380, 200);

 /* グラフに背景色をつける */
 $chart->drawFilledRoundedRectangle(7,7,393,223,5,240,240,240);

 /* グラフ背景に縁をつける */
 $chart->drawRoundedRectangle(5,5,395,225,5,230,230,230);

 /* グラフ領域に背景色をつける */
 $chart->drawGraphArea(255,255,255,TRUE);

 $chart->drawScale($data->GetData(),$data->GetDataDescription(),SCALE_START0,150,150,150,TRUE,0,2,TRUE);

 /* グリッド線を表示する */
 $chart->drawGrid(4,TRUE,230,230,230,50);

 /* chart に data を配置しグラフを描く */
 /* 棒グラフの場合は drawBarGraph */
 $chart->drawBarGraph($data->GetData(), $data->GetDataDescription(), TRUE);

 /* 凡例を追加する */
 $chart->setFontProperties($font_path,8);
 $chart->drawLegend(596,150,$data->GetDataDescription(),255,255,255);

 /* グラフタイトルを追加する */
 $chart->setFontProperties($font_path,10);
 $chart->drawTitle(50,22,"数学のテスト結果",50,50,50,585);

 /* 画像として出力する */
 $chart->Stroke();
}

プルダウンメニューで表示する内容を変更する

exams テーブルに以下のデータが入っているとする。 Table: exams テーブル

id	user_id	date	math	english	physics
1	1	2008-10-01	49	36	56
2	2	2008-10-01	45	48	42
3	3	2008-10-01	72	80	91
21	3	2008-12-15	86	0	0
20	2	2008-12-15	30	0	0
19	1	2008-12-15	49	0	0
24	3	2009-03-18	63	0	0
23	2	2009-03-18	54	0	0
22	1	2009-03-18	89	0	0

ajax ヘルパーの observeField() メソッドを使用することで user_id のプルダウンメニューを定期的に監視し、変化があった時に exam_table が呼び出される。
exam_table では $this->data を使用してフォームに入力された user_id の値を取得し、該当する user_id のデータのみを返すようにできる。

views/exams/index.ctp に以下を記述

<?php
 echo $form->create('user_id');
 echo $form->input('user_id', array('options' => array(1, 2, 3)));
 echo $form->end();
?>
<div id="result">ここに結果が</div>
<?php
 echo $ajax->observeField('user_id',
     array(
           'url' => array('action' => 'exam_table'),
           'frequency' => 0.2,
           'update' => 'result'));
?>

views/exams/exams_table.ctp を追加

<body>
<table border="1">
  <tr>
    <th>ID</th>
    <th>user_id</th>
    <th>Date</th>
    <th>math</th>
    <th>english</th>
    <th>physics</th>
  </tr>
  <?php
 foreach ($exams as $exam) {
  echo "<tr>\n";
  echo "<td>" . $exam['Exam']['id']; "</td>\n";
  echo "<td>" . $exam['Exam']['user_id']; "</td>\n";
  echo "<td>" . $exam['Exam']['date']; "</td>\n";
  echo "<td>" . $exam['Exam']['math']; "</td>\n";
  echo "<td>" . $exam['Exam']['english']; "</td>\n";
  echo "<td>" . $exam['Exam']['physics']; "</td>\n";
  echo "</tr>\n";
 }
  ?>
</table>
</body>

controllers/exams_controller.php に以下を追加

function exam_table() {
 $conditions = array('user_id' => $this->data['user_id'] + 1);
 $order = 'date';
 $exams = $this->Exam->find('all',
       array('conditions' => $conditions,
      'order' => $order));
 $this->set('exams', $exams);
}

とりぷるぷぅ技術メモ

2013年5月3日金曜日

[CakePHP]Ajax との連携

0 件のコメント:

コメントを投稿