前回のドラッグアンドドロップでタスクを移動させる ガントチャートをWebアプリとしてつくる(4)では項目をドラッグアンドドロップで移動できるようにしました。

しかしこれをチャートに表示させることができないのあれば意味がないので今回は編集した項目をチャートとして表示させます。

⇒ 動作確認はこちらから

HTML部分

HTML部分ですが、とりあえず以下のようにします。

task.html

設定を文字列として取得する

これはデバッグ用に作成したものですが、結果を表示のボタンを押すとすべてのカテゴリ名とタスク名、担当者名、開始日と終了日を表示します。

task2.js

これはカテゴリの要素を引数に渡すとカテゴリ名を取得する関数です。

これはタスクの要素を引数に渡すとタスク名を取得する関数です。

これはタスクの要素を引数に渡すと担当者名を取得する関数です。

これはタスクの要素を引数に渡すと開始日を取得する関数です。

これはタスクの要素を引数に渡すと終了日を取得する関数です。

設定を反映させる

反映ボタンが押されたときの処理を考えます。

データは保存していつでも使えるようにしたいのでSQLite3を使います。これまでSQLite3とNode.jsの合わせ技でアプリを作成してきましたが、ちょっとうまくいかないところがあったので、今回はPHPを使います。

その前提として保存するデータをJson形式で取得する関数を作成します。反映ボタンが押されたらToReflect関数が実行されます。保存するデータをJson形式で取得したらPostします。

これはPostするデータを作成する関数です。

task2.js

実際にPostする関数です。

task2.js

PHPでsqlite3を使う

ファイル名を/task.htmlを/task.phpに変更します。

SQLite3にデータを保存する

/task-save.phpへPostされたときの処理を示します。

table_tasksというテーブルをつくってそこにデータを格納するのですが、テーブルはこの処理がおこなわれるたびにいったん削除して作り直します。テーブルを作り直したらカテゴリ名とタスク名、担当者名、開始日と終了日を保存します。

これはテーブルを作り直す処理をする関数です。

task-save.php

/task-save.phpへPostされたときの処理を示します。SQLite3にデータを保存したらトップページにリダイレクトしたいのですが、クライアント側でXMLHttpRequestを使っているのでクライアント側のToReflect関数内でリダイレクトの処理をおこなっています(前述)。

処理がおこなわれるときはPostToUpdate関数を呼び出してデータベースにデータを保存します。

task-save.php

編集されたタスクをSQLiteに保存するSaveTaskInfo関数を示します。渡されたデータをオブジェクトに変換してデータベースに保存します。

<や>、”や””をそのまま保存してあとになってHTMLでそのまま出力するとおかしなことが起きるので、全角文字に変換しています。

トップページにアクセスしたときの処理

トップページにリダイレクトされたときの処理を示します。トップページにアクセスしたら(リダイレクトも含む)、SQLite3からデータを読み出してチャートを表示しますが、その前にindex.htmlをPHPが使えるようにindex.phpに変更します。

index.php

トップページにリダイレクトされたときの処理を示します。SQLite3のDBからデータを読み取り、そこからJavaScriptのコードを生成します。JavaScriptのコードとか以下のようなものです。

GetScript関数でやっていることはテーブルが存在しない場合は生成し、テーブルからデータを読み出します。読み出されたデータのStartDateTextカラムが空文字の場合はカテゴリのなかにタスクはひとつも存在しない場合です。このときは空のカテゴリは表示させません。

index.php

さてこのままでは問題があります。タスクを編集して反映ボタンをおすとチャートが表示されるようになりましたが、もう一度タスクを編集するページに移動するとタスクは一から作成しなおしとなります。タスクを編集するページに移動したらSQLite3のデータをつかって現在存在するカテゴリとタスクを再構築できるようにすればいいのですが、次回 ガントチャートをWebアプリとしてつくる(6) に続きます。