こちらの記事で、テーブルを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時間ごとにばらしてもよいのですが、”いつ？どこで？何時から？何時まで？”とするのがいいかと思います。
