概要
予約を受け付けることができたので、カレンダー上で予約が表示されるようにします。
また、管理画面で予約状況が確認できるように予約一覧を作成していきます。
管理画面の表示は、会員管理・受注管理・商品管理などと同様の形式で表示させます。
フォルダ階層
corporate-site
adminフォルダ詳細
完成イメージ
カレンダー
予約管理画面
全体の手順
手順は以下のとおりです
- カレンダーに予約状況反映
- 管理画面で表示
カレンダーに予約状況反映
カレンダーにその日予約が入っている場合、「予約あり」と表示させます。
calendar.phpのrenderCalendarファンクションの最初でDBに接続します。
calendar.php
function renderCalendar($dt)
{
+ //DB接続
+ try{
+ $dbh = new PDO("mysql:host=localhost;dbname=corporate_db","root","root");
+ }catch(PDOException $e){
+ var_dump($e->getMessage());
+ exit;
+ }
$dt->startOfMonth();
$dt->timezone = 'Asia/Tokyo';ループで回して日付を表示させるときに、reservationsテーブルを同時に参照して、その日付で予約があるかないかを取得します。
calendar.php
//今月は何日まであるか
$daysInMonth = $dt->daysInMonth;
for ($i = 1; $i <= $daysInMonth; $i++) {
+ $reserve_date = $dt->year."-".$dt->month."-".$dt->day; //日付を取得
+ $stmt = $dbh->prepare("SELECT * FROM reservations where reserve_date = :reserve_date");
+ $stmt->bindParam(":reserve_date",$reserve_date);
+ $stmt->execute();
+ $count = $stmt->rowCount(); //予約件数を取得
if ($i==1) {
if ($dt->format('N')!= 1) {
$calendar .= '<td colspan="'.($dt->format('N')-1).'"></td>'; //1日が月曜じゃない場合はcospanでその分あける
}
}予約件数が0ではなかったら・・・という分岐をそれぞれの日付表示部分に書いていきます。
今、すでに分岐がたくさんあり、編集する部分が多くなってしまいそうなので予約件数の分岐を１回書けばいいようにコードをすこし整理して編集します。
それぞれ日付表示後の</td>を削除して、分岐が終わった最後に</td>を移動させます。
calendar.php
if($comp->lt($comp_now)){
- $calendar .= '<td class="day" style="background-color:#ddd;">'.$dt->day.'</td>';
+ $calendar .= '<td class="day" style="background-color:#ddd;">'.$dt->day;
}else{
if ($comp->eq($comp_now)) {
- $calendar .= '<td class="day" style="background-color:#008b8b;"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a></td>';
+ $calendar .= '<td class="day" style="background-color:#008b8b;"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
}else{
// $calendar .= '<td class="day">'.$dt->day.'</td>';
switch ($dt->format('N')) {
case 6:
- $calendar .= '<td class="day" style="background-color:#b0e0e6"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a></td>';
+ $calendar .= '<td class="day" style="background-color:#b0e0e6"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
case 7:
- $calendar .= '<td class="day" style="background-color:#f08080"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a></td>';
+ $calendar .= '<td class="day" style="background-color:#f08080"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
default:
- $calendar .= '<td class="day" ><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a></td>';
+ $calendar .= '<td class="day" ><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
}
}
}
+ $calendar .= '</td>';
$dt->addDay();
}
$calendar .= '</tr></tbody>';
$calendar .= '</table>';予約件数の分岐を追加します。
予約がある場合は「予約あり」と表示させます。
calendar.php
//ループの日と今日を比較
if($comp->lt($comp_now)){
$calendar .= '<td class="day" style="background-color:#ddd;">'.$dt->day;
}else{
if ($comp->eq($comp_now)) {
//同じなので緑色の背景にする
$calendar .= '<td class="day" style="background-color:#008b8b;"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
} else {
switch ($dt->format('N')) {
case 6:
$calendar .= '<td class="day" style="background-color:#b0e0e6"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
case 7:
$calendar .= '<td class="day" style="background-color:#f08080"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
default:
$calendar .= '<td class="day" ><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
break;
}
}
}
+ if($count != 0){
+ $reservations= $stmt->fetchAll(PDO::FETCH_ASSOC);
+ foreach($reservations as $reservation)
+ {
+ $calendar .= '<br>予約あり</a>';
+ }
+ $calendar .= '</td>';
+ }else{
$calendar .='</td>';
+ }
$dt->addDay();
}カレンダーを確認します。
予約が入ってる日には、「予約あり」と表示されるようになりました。
管理画面で表示
次に、フロントサイドではなく、管理画面を編集していきます。
管理画面では、予約一覧を作成します。
作成方法は、他の管理画面と同じです。
ダッシュボードにメニュー追加
admin/dashboard.php
<main>
<div class="wrapper">
<div class="container">
<div class="wrapper-title">
<h3>ダッシュボード</h3>
</div>
<div class="boxs">
<a href="news.php" class="box">
<i class="far fa-newspaper icon"></i>
<p>記事管理</p>
</a>
<a href="users.php" class="box">
<i class="fas fa-users icon"></i>
<p>会員管理</p>
</a>
<a href="orders.php" class="box">
<i class="fas fa-ambulance icon"></i>
<p>受注管理</p>
</a>
<a href="products.php" class="box">
<i class="fas fa-store-alt icon"></i>
<p>商品管理</p>
</a>
+ <a href="reservations.php" class="box">
+ <i class="far fa-calendar-alt icon"></i>
+ <p>予約管理</p>
+ </a>
</div>
</div>
</div>
</main>
ダッシュボードに追加されました。
一覧表示
一覧表示画面を作成します。
adminフォルダ内にnews.phpをコピーして、reservations.phpを作成します。
php部分をreservationsテーブルから取得するように変更します。
admin/reservations.php
<?php
//sessionでログイン制限
session_start();
if($_SESSION['admin_login'] == false){
header("Location:./index.html");
exit;
}
//DB接続
try{
$dbh = new PDO("mysql:host=localhost;dbname=corporate_db","root","root");
}catch(PDOException $e){
var_dump($e->getMessage());
exit;
}
- $stmt = $dbh->prepare("SELECT * FROM news");
- $stmt->execute();
- $news = $stmt->fetchAll(PDO::FETCH_ASSOC);
+ $stmt = $dbh->prepare("SELECT * FROM reservations");
+ $stmt->execute();
+ $reservations = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>title・h3タグを「予約管理」に変更します。
投稿するボタンは削除します。
表示方法はnews.phpと同じなので、消さずにreservations用に変更していきます。
admin/reservations.php
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-13xxxxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-13xxxxxxxxx');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>予約管理</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- css -->
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<div class="container">
<div class="header-logo">
<h1><a href="dashboard.php">管理画面</a></h1>
</div>
<nav class="menu-right menu">
<a href="logout.php">ログアウト</a>
</nav>
</div>
</header>
<main>
<div class="wrapper">
<div class="container">
<div class="wrapper-title">
<h3>予約管理</h3>
</div>
<div class="list">
<table>
<thead>
<tr>
<th>id</th>
- <th>タイトル</th>
- <th>本文</th>
+ <th>予約日時</th>
+ <th>予約者名</th>
+ <th>電話番号</th>
+ <th>メールアドレス</th>
+ <th>予約人数</th>
<th>更新日時</th>
<th>作成日時</th>
- <th>操作</th>
</tr>
</thead>
<tbody>
- <?php foreach($news as $new): ?>
+ <?php foreach($reservations as $reservation): ?>
<tr>
- <td><?php echo $new['id']; ?></td>
- <td><?php echo $new['title']; ?></td>
- <td><?php echo $new['content']; ?></td>
- <td><?php echo $new['created_at']; ?></td>
- <td><?php echo $new['updated_at']; ?></td>
+ <td><?php echo $reservation['id']; ?></td>
+ <td><?php echo $reservation['reserve_date']; ?></td>
+ <td><?php echo $reservation['name']; ?></td>
+ <td><?php echo $reservation['tel']; ?></td>
+ <td><?php echo $reservation['email']; ?></td>
+ <td><?php echo $reservation['number']; ?></td>
+ <td><?php echo $reservation['updated_at']; ?></td>
+ <td><?php echo $reservation['created_at']; ?></td>
- <td>
- <button class="btn btn-green" onclick="location.href='edit_news.php?id=<?php echo $new['id']; ?>'">編集</button>
- <button class="btn btn-red delete" data-id=<?php echo $new['id']; ?>>削除</button>
- <form method="POST" action="./delete_news.php" id="delete_form_<?php echo $new['id']; ?>">
- <input type="hidden" value="<?php echo $new['id']; ?>" name="id">
- </form>
- </td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<p>Copyright @ 2018 SQUARE, inc</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>これで予約一覧が作成されました。
今回は割愛しますが、必要に応じて削除機能なども付けます。
削除機能については、NewsのCRUD機能の実装を参考にしてみてください。