2014
5
19

PHP+DBでタイムテーブル型予約システムをつくる 第6回「タイムテーブル」

続きです。なんていうか、カオス!!!って感じの部分なので、あーこんなやり方もあるんだー的なほんと、興味のある方だけご覧いただけたら…_(┐「ε:)_


関連記事

ご注意

記事公開当初は「WordPressでタイムテーブル型予約システムをつくる」というタイトルだったのですが、WP4.0まで検証したのち、実装可能ではあるもののやはりWPには不向きだと判断したため記事タイトルを変更しました。

もはや自分でも稼働させていないため、機能追加やバージョンアップ、組み込みサポートのご依頼はお受けしておりませんので、悪しからずご理解ください。

スニペットだけでも何か作る際のお役にたてたら、という気持ちでコードを書き残しておきます。間違いや、お気づきの点がありましたらご指摘下さい。

タイムテーブルを実装

140519-1

今回はこの部分。

軸の縦横を可変にするための設定

縦横変えられるように$tbl_flgという変数を作っておきます。デフォルトは時間が縦軸ということで。

この部分に、$tbl_flgの状態で変数に入れる内容を変える旨を書きます。

項目と時間の名称と数を、それぞれ入れておきます。時間配列の数を -1 しているのは、

140519-2

このように、設定時間の最後の枠を表示しないためです。ここを表示してしまうと1コマ余ってしまうんですよね。

あと、前回処理メッセージを出力するために$log1という変数を使いましたが、今回はエラーメッセージを出力するための$log2という変数を使おうと思います。使わない(何もメッセージが無い)場合は未定義の変数になってしまうので、

こうして空にしておく旨も、ここに書いておきます。

表示のための下準備

いろいろ方法はあると思うのですが、タイムテーブルを出力する前に、DBから情報を抽出したものを整理しておきます。

この部分に書いていきます。

  • $data_meta[‘項目名’][‘開始時間の配列番号’]

このような形の二次元配列を作っておいて、DBから抽出した情報をここに一旦入れておき、後でタイムテーブルを出力するときにこの配列からデータを持ってきたいと思います。

配列に情報を入れる際、エラーをチェックしながら入れることによって、エラー処理も同時にやっていきます。

例によって、ハイライト部分に以下のコードを入れ込んでいきます。

1. $data_meta を定義しておく

そのまま使っても動くは動くんですが、定義しないと注意されちゃうので。

2.DBから指定日付のデータをすべて抽出

WPの場合

WP外の場合(PDO)

日付を指定した抽出。前回の、登録前のチェックの時に似たようなの書きましたね。アレの項目名が無いバージョンです。

foreach 以降のDBの情報を扱うときの書き方が変わってきます。
  • $value->フィールド名(WP)
  • $value[‘フィールド名’](WP外/PDO)
後者は省略して書いていきますので、必要な方は読み換えてください。

3.存在チェックのための変数を作る

140519-3

図のように、抽出したデータの時間を抜き出し、配列番号を取得しておきます。

4.エラー処理

$key1,$key2が存在しない、または抽出した項目名がタイムテーブルの項目名に含まれていない場合です。

登録したときは10分刻みだったのに、後で30分刻みに変更された場合、登録されている「XX:10」などの時間は、タイムテーブルに存在しなくなってしまいます。また、項目名が変更されたときなんかも。そういうものは表示できませんが、かと言って何も出てこないのもアレなので…。

エラーとして出力する内容はお好みでご変更ください。ここでは li を含めたリスト形式として$log2に追記していく形で格納して、後で ul を加えて$log1と一緒に echo してやりましょう。このへんはまた詳しく書きたいと思います。

5.正常処理

問題なければ各情報を、それぞれ配列に格納していきます。

タイムテーブル出力

やっとです。

ここへ、

これを。この時点でもう、カオス_(┐「ε:)_ 縦横変えられるなんてことにしたから余計に長くなりました…。17~19行の記述は、時間が横軸でセル結合があるときの繰り上げ処理でして、それの配列を5~7行にて定義してるという…。

ちなみに、WPでログインユーザーのみ削除ボタンを表示したい場合(第1回参照)は、29行目を

このようにすると実装できます。

それでは以下、ハイライト部分に入れていく記述を。

1.日付を成形

まず table 関係ないですが、カレンダーを作った時に確認用にecho $date;とだけ書いておいた部分があると思います。それの見栄えを整えます。

と。まぁ、お好みなんですが。

2. $data_n = $data_meta[項目名][時間配列番号] を取得

縦軸と横軸を for で回しながら、先ほど作った$data_metaと照らしあわせて、データがあるかどうか見ていきます。ここも縦横可変にしたがための処理です。

3.セル結合数を $block という変数へ + 繰り上げ処理

ブロック(終了時間と開始時間の配列番号の差)が2つ以上ある場合、つまりセルの結合が必要な場合のみ処理します。ここに入る前(20行目)に$block = '';としてあるので、結合が必要ない場合はそのまま進みます。

4.削除ボタンの記述を $dlt という変数へ

それぞれ、こんな記述を想定します。

削除キーが無い場合

削除ボタンを押されたらDBから情報を削除するわけですが、削除キーが無い場合、いきなりその処理へ飛ばさずワンクッション入れたいのでonsubmitを入れてJavaScriptをかませます。

これが起動させるJavaScript。任意の場所に書いてください。

削除キーが有る場合

これは別の処理へ飛ばすのでonsubmitは入れません。代わりに「これは削除キーがあるよ」という目印のgif画像を入れてやります。

rsv_key

良かったらDLしてお使いくださいませ。

さて、構想ができたので、これを$dltという変数に入れる記述は、こんな感じ。

CSSで見た目を整える

お好みですが、例として。こちらを参考にさせていただいています。

横幅や縦幅を固定したい場合は下3つあたりを調整してみてください。

以上です!自分でまとめてて、もうなんか、ばかなんじゃねーの、って気分になりましたが…。せっかくここまで書いたし、という気持ちで公開してみました。次回は削除ボタンの実装ですー。

嘘を書いてしまいました(;´Д`) 先にメッセージ出力をやることにしました。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/05/19
更新日:2014/05/22


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top