Webアプリケーション(tasklog)の作成(No.2)
今回はデータベースに入っているタスクをWebブラウザー上でテーブルとして表示します。まず、前回はデータベースにテーブルを作成しただけでデータを入力していないため、テーブルとして表示できませんので、前回インストールしたSQL Managerを利用してタスクを入力しておきます。
Dojoでテーブルを表示する場合、DataGridオブジェクトを使います。DataGridで表示するデータはDataStoreで抽象化されます。抽象化するデータ形式でさまざまなDataStoreが用意されています。ここではデータベースに入っているデータをJSON形式で引き渡されて表示するためにItemFileReadStoreを利用します。
まずJSON形式でデータを返すスクリプト(tasklog_select.php)を作成します。
<?php
$dbname = 'tasklog.sqlite';
$link = new SQLiteDatabase($dbname, 0666, $sqliteerror);
if (!$link) {
die('接続失敗です。'.$sqliteerror);
}
$sql = "SELECT * FROM task";
$result = $link->query($sql, SQLITE_BOTH, $sqliteerror);
if (!$result) {
die('クエリーが失敗しました。'.$sqliteerror);
}
$all_items = array();
while ($rows = $result->fetch(SQLITE_ASSOC)) {
$item = array ( "id" => $rows['id'],
"name" => $rows['name'],
"estimate_time" => $rows["estimate_time"],
"start_time" => $rows["start_time"],
"finish_time" => $rows["finish_time"]);
array_push($all_items, $item);
}
$tasks = array( "identifier" => 'id',
"items" => $all_items);
print(json_encode($tasks));
?>
やっていることは、selectした結果を1レコードづつ取り出して、連想配列に格納して、最後にjson形式に変換して出力しているだけです。
まずはテーブルだけを表示します。
<html>
<head>
<title>TaskLog</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="/dojo/dijit/themes/tundra/tundra.css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:false"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.DataGrid");
var jsonStore = new dojo.data.ItemFileReadStore({ url: "http://localhost/tasklog/tasklog_select.php" });
</script>
</head>
<body class=tundra>
<table id="taskGrid" jsId="taskGrid" dojoType="dojox.grid.DataGrid"
store="jsonStore">
<thead>
<tr>
<th field="id">ID</th>
<th field="name">タスク</th>
<th field="estimate_time">見積時間</th>
<th field="start_time">開始時間</th>
<th field="finish_time">終了時間</th>
</tr>
</thead>
</table>
</body>
</html>
これで次のようなテーブルが表示されます。
今回はここまでです。次回はテーブルを編集できるように、と考えていたんですが、Sigma Gridとというライブラリを見つけてしまいました。これだったらテーブルの追加や削除、編集などがサポートされているみたいです。次回は、このSigma Gridを試してみたいと思います。
もともとDojoはGridを使うのが目的だったので、Sigma Gridを使うんだったらDojoはいらないことになります。素のJavascriptだとデータベースへのアクセスのための非同期通信が面倒そうなので、Dojoの代わりにjQueryにしようかと考えています。最初とはかなり構成が変わってしまいそうですが、柔軟に進めていこうと思います。
