目指したもの

こちらで紹介されている「会議室予約」のようなシステムがほしくて、仕様やレイアウトを真似して、PHPで作らせていただきました。既にサイトは閉鎖されており、上記リンクは有志の方による復元サイトのようです。この場にて、厚く御礼申し上げます。

前置き

実は当初、WordPressに組み込んで使おうと企てました。現状、非常に優秀で柔軟性の高いツールやグループウェアがいっぱいあるなか、あえてのWP…(;´Д`)

そもそもの依頼の前提が「冒頭の既製品に近いもの」だったことと、使用予定のWebサーバにWordPressを入れるつもりだったことから「これWPのDB使えないかな! 組み込んだらどうなるのかな!」という完全に好奇心で突き進んでしまったのですが…、最終的にはWPに入れる必要性はなかったなー…と痛感して、結局WPから外してPHP+MySQLで作り直してしまいました。

しかもその後、会社でグループウェアを導入することになったので完全にお払い箱になりました! ヽ(゜´Д`)ノ゜。

とはいえ、自作できた! という経験は楽しかったです。DBへの接続、フォームを使った値の引き渡しなどphpの基礎的なことから、はじめて踏み込んだ領域だったので非常に勉強になりました。何かつくろうとしているどなたかに、スニペットとしてお役に立てたらいいなという気持ちもあり、コードを置いておきます。

参考

これを作るにあたって、たくさん勉強させていただきました。

ありがとうございます!

完成図

140325-1-1

※クリックで拡大

画面遷移はせず、ひとつのページだけで動きます。図はWPの公式テーマ、Twenty Twelve(任意の固定ページ)へ組み込んだ例です。

htmlはできるだけシンプルに出力されるようにしたつもりなので、CSSでお好みのレイアウトやデザインに変更してください。使っているテーブルはひとつだけで、読み書きもそこしか使いません。

基本機能

項目(例では会議室)は特に上限をつけてないので、いくつでも設定できてしまいますが、あんまり多いとはみ出しますし、処理も重くなるので適度な数が良いかと思います。

また、時間軸は何時から何時まで、何分刻みで、という設定ができます。これもあんまり細かい刻みにすると長くなってしまうので、10分、30分、60分くらいの刻みがおすすめです。

カレンダー部分は、クリックした日付を保持して再読み込み、日付に応じたタイムテーブルを出力します。日付がそれぞれsubmitボタンになっているのをCSSでリンクっぽく見せています。(WPだった場合、投稿記事へリンクするget_calendar()とは別物です。)

時間を横軸にしたレイアウトも可能

140325-3-1

※クリックで拡大

タイムテーブルを、縦横を入れ替えたレイアウトで出力することもできます。

こんな使い方も

項目は自由に変えられるので、人の管理にも使えます。各スタッフのタイムテーブルとしても。美容室さんとか。ごめんなさい働いたことないので妄想なんですけど…!

イントラネット向けです!

冒頭にも書きましたが、イントラネット目的で作ったもので、いちおうは無害化なども勉強しながら書きましたが、十分な検証をしたとは言えないシロモノです…。

WPだったら、こういった会員制サイト用のプラグインと組み合わせて、該当ページにアクセス出来る人を限定してしまうとか、

テンプレートタグを使って、タイムテーブル内の削除ボタンと、登録フォームをログインユーザーしか見えないようにしてしまうとか、そういうことも考えられますが…、

試してみると、ログアウト時はこんな感じに見えました。

ただ、ここまで書いておいてアレですが、WPはメンテがめんどうなのでおすすめはしません。

追記

1コマ余ってしまう部分を修正しました。

仕様

大きく、この4つのブロックに分かれていて、

4種類のボタンクリックで表示が変わります。同じページを読み込みなおすのでページ遷移はしません。

rsv_key

キー有の削除ボタンの隣には、こちらの鍵マークを出しています。良かったらDLしてお使いください。

キー有の削除ボタンがクリックされたときは、メッセージ部に上記のようなフォームが現れて、削除キーを要求します。削除キーを忘れてしまった場合は$master_keyが用意してあります。デフォルトではspecialという文字列を入れれば削除できますが、この文字列は任意のものに変更できます。

実装

テーブル

テーブルは、こちらの記事の構成で作成ください。WP使わなくてもテーブル構造は同じです。

コード

まるっとコピペで動くとは限らないと思うので、お使いの環境に合わせて適宜修正をお願いします。

    おねがい

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

    WPは4.0まで検証してありますが、本体のアップデートを考慮してメンテナンス…とかまで考えるとやっぱり不向きじゃないかなと思いますので、自己責任でお願いいたします。

    一応エスケープなどの勉強しながら気を使って書いたつもりですが、申し訳ありませんが検証は不十分です。イントラネットな少人数で使いくださいませ。

  • メイン(WP)
  • 関数(WP)
  • メイン(WP外)
  • 関数(WP外)
  • CSS
  • JavaScript

すっごく長くてカオスです。お好きなところだけ抜き出して部品化するなり、煮るなり焼くなりお好きにつかってください_(:3 」∠)_

2014/9/2追記:予約済みの時間との重複チェックに足りていない条件がありましたので追記しました。コメントで教えていただいた中村さん、ありがとうございました!

なお、横軸で使用したい場合は、CSSの

この部分を

と書けば、カレンダーが横並びになります。

カレンダーについてはこちらの記事に四苦八苦した経緯をまとめてあります。

おわりに

せっかくだし公開したら誰かの役にたつのかも、という気持ちと、素人がハンパなもの公開したらただのノイズだろ、という気持ちとせめぎあってて公開を迷いました…。いつか消えるかもしれません。。

まるごとお役に立てるかはちょっと微妙だと思うので、スニペットとしてお役立ていただけたら嬉しいです。ここまで読んでくださった方に厚く御礼申し上げます。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 646
  • RSSを登録

公開日:2014/05/22
更新日:2014/09/02


23件のコメント

  • 中村
    2014年8月31日 8:20 PM

    初めまして、中村と申します。

    wordpressでしかサイトが作れない私のようなものにはとても有益な記事でした。

    有り難うございました。実際に作って勉強したいと思います。

  • 中村
    2014年9月2日 2:37 PM

    いつもお世話になっております。

    予約済み時間との重複フラグを設定のところですが、
    開始時刻 <= 予約済開始時刻 && 予約済終了時刻 <= 終了時刻
    の場合が抜けているようです。
    ご確認を御願いします。

    間違っていたら申し訳ありません。

    • *you
      2014年9月2日 4:28 PM

      中村さん、コメントありがとうございます&まとめてのお返事になってしまってすみません!

      重複フラグ、ご提示の通りです!このままでは抜けが発生してしまいますねΣ(゚д゚lll) 申し訳ございません、ご指摘大変有り難いです。記事内のコードにも修正を加えさせていただきます、ありがとうございますー!

  • ゆうき
    2014年9月6日 11:08 PM

    こんばんは。
    予約表を作るのにとても参考になっています。
    今回、作っているうちに
    Notice: Undefined variable: data_no
    と出てしまう現象にこまっています。
    $data_meta[$value[‘cpt_name’]][$key1] = $data_no;
    部分を指摘されています。
    どのようにすれば直るでしょうか?

    • *you
      2014年9月8日 9:05 AM

      ゆうきさん、コメントありがとうございます。

      申し訳ありません、$data_noとなっているところを$data_nとしていただければ大丈夫ではないかと…!

      当初、変数名を「データナンバー」のつもりで$data_noと書き始めたところ、これじゃあ「ノー」みたいだなーと思って$data_nに書き直したのですが、直し漏れがあったようで、そのため「Undefined variable(未定義の変数ですよー)」というメッセージが出ていたのだと思います。こちらも修正させていただきました、ご指摘ありがとうございました!

  • takuzoh
    2016年6月18日 12:31 AM

    【ド素人でも設置できる方法】を希望!

    全ソースをどう使うと、設置できるのかをお教えください。
    どうすれば「完成図」の様な表示ができるのかご教授ください。

    1)MySQLにDB作成(中身は空)。
    2)「var $tables = array(…’rsv_timetable’)」追加
    3)テーマ「twentytwelve」の下にフォルダ作って、「140522-wp.php」「140522-wpfct.php」「140522-css.css」「140522-js.js」を入れた
    4)固定ページ新規で「テンプレート」で「rsv_timetable」を選択
    5)固定ページをメニューで選択して実行しても、タイムテーブルの枠ダケ表示され、何のボタンも出てきません。

    1)MySQLにDB作成(中身は空)。
    2)「htdocs」フォルダの下にフォルダ作って、「140522-wp.php」「140522-wpfct.php」「140522-css.css」「140522-js.js」を入れた
    3)ブラウザから、「140522-wp.php」を呼び出したが、WPの時と一緒で、タイムテーブルの枠ダケ表示され、何のボタンも出てきません。

    Apache/2.4.17 (Win32) OpenSSL/1.0.2d
    PHP/5.6.14
    mysqlnd 5.0.11-dev – 20120503
    WordPress 4.5.2

    index.phpなど自分で作る必要があるのでしょうか?

    お教えください。

    • *you
      2016年6月20日 5:38 AM

      takuzohさん、お返事遅れてすみません。WPで設置する方法と読み取らせていただきます。

      まず、こちらの記事を参考に、WPが使っているDBに専用テーブルを作って、wp-db.phpのテーブル名の宣言へ「var $tables = array(…, ‘rsv_timetable’)」と追加します。

      次に、上記にあるコードの「メイン(WP)」をrsv_timetable.phpなどという任意の名前で保存して、WPの適用したいテーマ内へアップロードし、固定ページを新規に作ってテンプレートを「rsv_timetable」にします。

      残りのコードは、「関数(WP)」は適用テーマのfunctions.phpへ、「CSS」はstyle.cssへ追記します。(差し替えではなく、追記です。)「関数(WP)」をfunctions.phpへ書くときは、先頭行の「< ?php」と最終行の「?>」を抜いたものを追記してください。

      「JavaScript」は、rsv_timetable.phpの中に書いちゃってもいいですし、外部ファイルとして呼び出しても良いです。こちらの記事が参考になります。

      当方ではWP4.0までしか検証しておりませんので、あんまり細かい点まではご容赦ください。

    • takuzoh
      2016年7月4日 1:12 AM

      youさま
      ご丁寧な対応をありがとうございます。

      ご指導の通りに記載しましたら、動きました。

      二点引っかかったので、再度ご教授願います。


      2個目の予約を入れようとすると、SQLエラーと表示され、入りません。


      時間を横軸に「$tbl_flg = true」としてますが、カレンダー三カ月分が、タイムテーブルの下で縦に並んでしまいます。

      ご迷惑をおかけします。よろしくお願いいたします。

    • *you
      2016年7月5日 6:18 AM

      takuzohさん、コメントありがとうございます。

      ①について、申し訳ありませんが現状ではご期待に添える答えを推測することができません。既に入っているデータ、入れたいデータが何か、具体的にどんな操作で何が起こるのか、実際に触って動かしながら細かく検証しないとデバッグは遠隔では非常に困難なのです。悪しからずご理解ください。

      もしも自作テーマやプラグインが動作しているなら何が作用しているかわかりませんので、まずはインストールしただけのWPで試してみてください。

      ②は、サンプルのCSSが縦軸用だからです。table.rsv_calendar{}の中にfloat:left;を入れてみてください。

    • *you
      2016年7月6日 5:56 AM

      takuzohさん、もしかして、と思う事項が出てきましたので追記させていただきます。

      追加したテーブルのid以外の項目が主キーになっていませんか? お使いのDB管理ツールによって違うと思うので一概には言えないのですが、time_sttime_endが主キーになってしまう現象があるようです。このふたつはデータ型をTEXTにしても動くので、もし該当するようならお試し下さい。主キーになるのはidだけです。

      また、手動設定の部分に以下を追記すると、エラーメッセージを表示できます。そこを検証することでデバッグがしやすくなりますので、お試し下さい。

  • takuzoh
    2016年7月7日 1:31 AM

    youさま

    素人に何度もお付き合いいただき、ありがとうございます。

    ②は解決できました!!
     ありがとうございます。
     よく分らないながら、「margin-right:30px;」も入れてみたところ、カレンダーの間隔も空きました。

    ①ですが、
    time_st、time_end の種類を、DATETIMEにすると、「主」と「インデックス」のマークに色が付いてしまいます。
    「id」には、名前のところに、キーのマークが付いてて、「インデックス」マークに色が付いてます。

    time_st、time_end の種類をTEXTにしても、2個目の予約が入りません。「主」と「インデックス」のマークの色は消えます。

    手動設定に「$wpdb->show_errors();」を書きましたところ、
    「 [Duplicate entry ‘0’ for key ‘PRIMARY’]
    INSERT INTO wp_rsv_timetable ( name, sect, notes, time_st, time_end, cpt_name, kwd ) VALUES (xx,xx,xx,xx,xx,xx,xx)」
    となりました。

    ごめんなさい。
    再度ご教授いただけますと幸いです。

    • *you
      2016年7月7日 5:24 AM

      takuzohさん

      エラーメッセージが出たなら、まずはそれを検索してご自分で解決する努力をお願いいたします。ご提示の「Duplicate entry ‘0’ for key ‘PRIMARY’」というエラーは、検索すれば「主キーに’0’という重複したデータを入れようとしている」という意味であることがわかるはずです。

      主キーはidだけのはず(他にもあったら解除してください)で、idはオートインクリメントに設定するため、INSERT文で指定していません(このあたりはすべてこちらで書いています)。それにも関わらず’0’を入れようとしているということは、idにオートインクリメントが設定されていないんじゃないかなという気がします。

  • takuzoh
    2016年7月7日 11:46 PM

    youさま

    仰るとおりです。すみませんでした。
    ②も解決できました。

    ここで勉強させていただいた事を基に、機能追加など努力したいと思います。
    ありがとうございました。

  • ローディー
    2016年12月23日 9:51 PM

    you様

    今回、こちらのスケジュールをそのまま実環境で使わさせて頂いております。
    ありがとうございます。

    現在問題なく動作しておりますが、予約間隔を20分にして、最終予約開始時間が23:40になるように設定を試みておりました。
    (18:00~24:00で使いたいため)
    ところが、24:00と設定をしても、00:00の扱いになるのか、時間が表示されず、
    23:40と設定をした場合、メモリーバッファーエラーとなってしまいました。
    while文の中にechoを入れて確認すると$hours_baff関数の配列に時間?が追加されていく一方で、いずれメモリーいっぱいになってしまいます。

    なにか上手に設定する方法はありますでしょうか。

    よろしくお願いいたします。

    • *you
      2016年12月26日 12:21 AM

      ローディーさん、お返事遅くなってしまってすみません。

      24:00の想定はしていませんでした…! ご注意として書いてあるとおり、もはや自分でも稼働させていないため抜本的に作り直さなきゃいけないとなると厳しいなーと思って見てみたら、一部の変更でなんとかなりそうでしたのでここへ追記しますね。

      (追記:本コードを修正したので、ここでのコードは削除しました。)

      これで設定部分をこのようにすれば動くんじゃないかと。終了時間は00:00ではなく24:00でご指定ください。

  • 0728
    2017年7月28日 4:25 PM

    予約サイト作成のため、ここのサイトを参考にさせていただいております。
    ありがとうございます。

    1点教えてください。
    24時間・1時間間隔で予約できるようにしたいのですが、上記ローディーさんとのやりとりでの、24時まで「//設定時間を計算して配列化~」部分を差し替えしても表示できない状態です。

    できた時間帯:0時~22時(23時・24時は×)
           10時~24時(0~9時は×)

    どうしたらよろしいでしょうか。
    大変申し訳ございませんが、よろしくお願いいたします。

    • *you
      2017年7月31日 12:26 PM

      0728さん、コメントありがとうございます。

      すみません、00:00や24:00が含まれる時間帯が完全に検証不足でした。自分では昼の時間しか使ったことなかったもので…(;´Д`)

      「//設定時間を計算して配列化~」の部分を修正してアップし直したので、これで試してみてください。お時間かかっちゃってすみません。

    • 0728
      2017年8月1日 3:20 PM

      youさん、早速のご回答ありがとうございます。
      参考にさせていただきます!!
      ありがとうございました。

    • *you
      2017年8月2日 5:54 AM

      0728さん、ご返信ありがとうございます。解決できればよいのですがー!

  • マーティ
    2017年8月1日 10:10 AM

    施設予約に参考にさせていただいてます。
    ありがとうございます!!

    1つお伺いしたい事があります。
    動作確認をしているのですが、予定の削除処理が上手く機能しないです(・・;)
    [現象]
    予定入力したデータを削除処理

    選択したデータ以外(その日のデータ予定全て)が削除されてしまう。

    自力で探して入るのですが、上手く行かず、、、
    もしよろしければ、アドバイスをお願いします。

    [前提]
    現状としては以下のとおりです。
    ・縦軸レイアウトで使用
    ・更新は問題なく出来る。

    • *you
      2017年8月1日 12:14 PM

      マーティさん、コメントありがとうございます。うーん、すみません、実際に見てみないことにはどうにもわからないので推測しか言えませんが…。

      登録した予定には1つ1つIDがついています。出力されたhtmlのtable内で、×ボタンは以下のようになってるので、このハイライトのvalue="XX"部分をまずはお確かめください。

      この部分が、予定ごとに違っていなければなりません。これは、INSERT(登録)するときに毎回違う数値が振られるはずです。

      これがもし複数同じIDになっているのなら、データベースの設定で、IDにオートインクリメント(自動連番)が設定されていない&IDが主キーになっていない可能性があります。削除はこのIDを指定して実行しているので、IDが同じ予定が複数あるのなら、それらがすべて削除されてしまいます。

  • マーティ
    2017年8月1日 5:21 PM

    *youさん、返事ありがとうございます^^*
    無事に解決しました!!!

    原因は、*youさんのご指摘どおりでした^^;
    データベースに設置したテーブルの”ID”項目に対してオートクリメントが設定出来ていなかったです。

    本当にありがとうございました(σ・∀・)σ、

    • *you
      2017年8月2日 5:59 AM

      マーティさん、ご返信ありがとうございます。予想が当たってよかったです!

コメントを残す




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


back to top