【HTML】テーブルを表示する方法&phpで楽をしよう2【初心者~中級者向け】

html HTML5

こちらの記事で、テーブルをhtmlとphpで表示させました。

今回は、もし会議室に予約があるときは、時間のセルに色を付けてみます。
上記記事をベースに改造していきます。

データベースに登録する予約データを考える

“もし予約があったら色をつける”ということで、まずは予約とは何かを考えます。
ぱっと思いつくことは、“いつ?どこで?何時?”が思いつきますね。
ということで、データベースには”日付、場所、時間”がある事を前提に、コーディングします。

html+phpで作成したテーブルのサンプルコード

早速ですが、予約情報に色を付けて表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>予約表</title>
    <style>
    table,tr,td,th{
        border: solid 1px black; border-collapse: collapse;
    }
    td,th{
        min-width: 32px;
    }
    th{
        background: silver;
    }
    td.yoyaku{
        background: lightcyan;
    }
    </style>
</head>
<body>
    <table>
        <tr>
           <th>時間(時)</th><?php for($i=0;$i<24;$i++) print '<th>'.$i.'</th>'; ?>
        </tr>
        <tr>
           <th>会議室A</th><?php Disp_yoyaku(0) ?>
        </tr>
        <tr>
           <th>会議室B</th><?php Disp_yoyaku(1) ?>
        </tr>
        <tr>
           <th>会議室C</th><?php Disp_yoyaku(2) ?>
        </tr>
    </table>
</body>
</html>
<?php
    function Disp_yoyaku($sel){
        $start = date('Y-m-d').' 00:00:00';
        $end   = date('Y-m-d').' 24:00:00';
        switch($sel){
            case 0:
                $yoyaku= date('Y-m-d').' 09:00:00';
                break;
            case 1:
                $yoyaku= date('Y-m-d').' 15:00:00';
                break;
            case 2:
                $yoyaku= date('Y-m-d').' 19:00:00';
                break;
        }
        for($i=$start; $i<$end; $i=date('Y-m-d H:i:s', strtotime($i.' +1 hours' ))){
            if($i==$yoyaku){
                print '<td class="yoyaku"></td>'; 
            }else{
                print '<td></td>'; 
            }
        }
    }
?>
テーブル(予約表)

テーブルを表示するコードの解説(html)

前回からの変更点として、16行目にyoyakuクラスの背景色を水色にするように追記しました。
これで、class=”yoyaku”を指定したtd要素は背景が水色になります。

テーブルを表示するコードの解説(php)

27行目、30行目、33行目のループ処理を関数にしました。
関数の引数に何会議室を表示しようとしているかわかるように、0~2の数値を指定しています。

39行目のDisp_yoyaku関数が、予約している時間を水色、予約していない箇所を白でtd要素を表示する関数になります。

データベースには”いつ?どこで?何時?”が記録されているはずなので、ループ開始変数には今日の0時0分0秒をスタート($start)、今日の24時0分0秒をエンド($end)としています。

42行目のswitchはテスト用として作成しました。
会議室A($sel==0)は、予約が9時、会議室B($sel==1)は、予約が15時、会議室C($sel==2)は、予約が19時としています。

53行目のループ処理は、開始時にループ変数($i)にスタート日時を設定し、以降エンドまで+1時間していきます。
ループ処理の中で予約時間があった場合、yoyakuクラス付きのtd要素を表示するようにしています。

次の目標

ここまで作成していて気づきましたが、2時間以上連続で会議室が取れません・・w
いや、データベースにデータを登録するときに2時間以上の場合は1時間ごとにばらしてもよいのですが、”いつ?どこで?何時から?何時まで?”とするのがいいかと思います。