これまではひとつのチャートしか表示させることができませんでした。今回はひとつのアプリ内に複数のチャートを表示できるようにします。

⇒ 動作確認はこちらから
いったんトップページに戻って新規ボタンを押すと追加できます。

トップページ ガントチャートの一覧が並びます。
/page-(整数) ガントチャートが表示されます。
/edit-(整数) タスクを編集するページです。

トップページと新しいチャートをつくるページ

これまでつくったものを大幅に変更します。複数のページを動的に生成するために.htaccessを作成してサーバーのどこかに設置します。実際に公開するまえにローカルでテストをしてください。

.htaccess

これで設置したurlにアクセスするとそれ以下の部分が引数としてindex.phpに渡されます。これで複数のページを表示させることができます。http://example.jp/test/で公開するのであれば、http://example.jp/test/task/1にアクセスすれば引数は「1」、http://example.jp/test/task/1/であれば「1/」になります。階層が異なるページをつくるとややこしくなるのでページはすべて同じ階層とし、そうでない場合は不正なアクセスと見なします。

index.php

新規ボタンをクリックしたら新しいチャートを作成するために/newにリダイレクトします。

template/index.html

次に新しいチャートを作成するページを表示させる処理を示します。これはHTMLです。

template/new.html

新しいテーブルをつくる

ページ情報を保存するための新しいテーブルをつくります。そのための関数を示します。

index.php

各ページへのリンクを生成し表示する

トップページにアクセスされたときの処理を示します。

$table_pagesを調べてデータがあれば各チャートへのリンクを生成します。

index.php

チャートの追加ボタンをクリックしたときの処理

/newにアクセスしたときの処理を示します。template/new.htmlを読み込んで表示するだけです。

index.php

/newでチャートの追加ボタンをクリックしたときの処理を示します。/post-from-newへPostされたときの処理を示します。

SqliteのDBにテーブル $table_pagesがないなら作成して新しいチャート名を保存します。そして新しく作成したページにリダイレクトします。

index.php

各ページにアクセスされたときの処理

各チャートのページにアクセスされたときの処理を示します。

まずHTMLですが、これを読み取ってJavaScriptのコード部分を置き換えます。

template/page.html

次にPHP部分を示します。

これはid からタスク情報が保存されているテーブル名を取得する関数です。

index.php

これはHTMLの{SCRIPT}と書かれている部分に入るJavaScriptのコードを取得するための関数です。

これはページを表示するための関数です。

タスクを編集するボタンがクリックされたときの処理

タスクを編集するボタンがクリックされたときの処理を示します。ドメイントップに設置された場合以外でもうまくリダイレクトできるようにlocation.pathnameからidを取り出せるようにしています。urlの構造から最後の-より後がidです。

js/gantt-chart2.js

タスクを編集するページにアクセスされたときの処理

タスクを編集するページ /edit-XXにアクセスしたときの処理を示します。

これはHTMLです。

edit.html

反映ボタンが押されたら要素を調べてSQLiteのDBに保存します。

クライアント側の処理

クライアント側の処理を示します。

ToReflect関数を書き直します。Postする対象が前回とは違っています。それからテキストボックスに書かれている文字列が新しいページタイトルになるので、これもPostします。この部分は新しいGetResultJsonText関数を参照してください。

task2.js

GetResultJsonText関数も書き換えとなります。

サーバーサイドの処理

つぎにindex.phpにおける処理を示します。

/pageedit-XXにアクセスされたときの処理を示します。SQLiteのDBにデータが登録されているか調べて、存在する場合はページタイトルと編集すべきタスクを表示させます。登録されていない場合は存在しないページである旨示すエラーページを表示させます。

index.php

Postされたときの処理

/edit-XXで反映ボタンが押されて/update-XXへPostされた場合の処理を示します。

いったんテーブルを削除して作り直していますが、ここでちょっと注意が必要です。このページのurlを直接入力してもこの関数を実行することができてしまいます。そこで悪意のあるユーザーによってデータを書き換えられないためにチェックが必要です。サイト内(同一ドメイン)からのアクセスであることを確認したほうがよいと思われます。

タスクを編集するページのテキストボックスに書かれている文字列が新しいページタイトルになります。Postされたときにこれが送られてくるので、これもSQLiteのDBに保存できるようにします。