8-4：会員機能を追加

2019/05/30

概要

予約機能が完成しましたが、予約できるのは会員限定の機能に変更していきます。
また、会員自身が予約した予約については、編集・削除ができるようにしていきます。
他の会員の予約は編集・削除できないように制御します。

フォルダ階層

完成イメージ

自分の予約

自分以外の予約

予約編集

変更完了

キャンセル完了

全体の手順

手順は以下のとおりです

  1. reservationsテーブルにカラムの追加
  2. カレンダーに会員判断を追加
  3. 予約機能の編集
  4. 予約編集機能追加
  5. 予約削除機能追加

reservationsテーブルにカラムの追加

予約時に会員idを保存するようにしたいので、会員idカラムを追加します。

項目 内容 型 オプション オプション
id ID int primary key auto_increment
reserve_date 予約日時 date
name 氏名 varchar(64)
tel 電話番号 varchar(13)
email email varchar(256)
number 予約人数 int
created_at 作成日時 datetime
updated_at 更新日時 dateimte
user_id ユーザーID int

console

mysql> use corporate_db
Database changed
mysql> alter table reservations add column user_id int;
Query OK, 0 rows affected (0.11 sec)
Records: 0  Duplicates: 0  Warnings: 0

Query OKと出ていればOKです。
一応確認します。
console

mysql> desc reservations;
+--------------+--------------+------+-----+---------+----------------+
| Field        | Type         | Null | Key | Default | Extra          |
+--------------+--------------+------+-----+---------+----------------+
| id           | int(11)      | NO   | PRI | NULL    | auto_increment |
| reserve_date | date         | YES  |     | NULL    |                |
| name         | varchar(64)  | YES  |     | NULL    |                |
| tel          | varchar(13)  | YES  |     | NULL    |                |
| email        | varchar(256) | YES  |     | NULL    |                |
| number       | int(11)      | YES  |     | NULL    |                |
| created_at   | datetime     | YES  |     | NULL    |                |
| updated_at   | datetime     | YES  |     | NULL    |                |
| user_id      | int(11)      | YES  |     | NULL    |                |
+--------------+--------------+------+-----+---------+----------------+
9 rows in set (0.00 sec)

最後にuser_idが追加されています。

カレンダーに会員判断を追加

カレンダーのreserve.phpへのリンクは今、誰でもクリックできるようになっていますが、会員以外はリンクを外してreserve.phpに行けないようにします。
calendar.php

//ループの日と今日を比較
if($comp->lt($comp_now)){
    $calendar .= '<td class="day" style="background-color:#ddd;">'.$dt->day;
}else{
    if ($comp->eq($comp_now)) {
        //同じなので緑色の背景にする
+       //ログイン判断
+       if($user_login==true){
            $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" style="background-color:#008b8b;">'.$dt->day;
+       }

    } else {
        switch ($dt->format('N')) {
        case 6:
+           //ログイン判断
+           if ($user_login==true) {
                $calendar .= '<td class="day" style="background-color:#b0e0e6"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
+           }else{
+               $calendar .= '<td class="day" style="background-color:#b0e0e6">'.$dt->day;
+           }
            break;
        case 7:
+           //ログイン判断
+           if($user_login==true){
                $calendar .= '<td class="day" style="background-color:#f08080"><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
+           }else{
+               $calendar .= '<td class="day" style="background-color:#f08080">'.$dt->day;
+           }
            break;
        default:
+           //ログイン判断
+           if($user_login==true){
                $calendar .= '<td class="day" ><a href="./reserve.php?y='.$dt->year.'&&m='.$dt->month.'&&d='.$dt->day.'">'.$dt->day.'</a>';
+           }else{
+               $calendar .= '<td class="day" >'.$dt->day;
+           }

            break;
        }
    }
}

カレンダーの表示は、renderCalendar($dt)というファンクションで行っています。
ファンクション内でファンクションの外で指定した変数を使うには、ファンクションに変数を渡してあげる必要があります。
ファンクションに必要な引数として、$user_loginを追加します。
calendar.php

-   function renderCalendar($dt)
+   function renderCalendar($dt,$user_login)
    {
        //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';

calendar.php

    <div class="wrapper last-wrapper">
        <div class="container">
            <div class="wrapper-title">
                <h3>無料ご相談会予約</h3>
            </div>
-           <?php echo renderCalendar($dt); ?>
+           <?php echo renderCalendar($dt,$user_login); ?>
        </div>
    </div>

ログインしていないとリンクはありません。

ログインしてカレンダーを確認します。
リンクがついていて、予約に進めます。

予約機能の編集

予約時に会員idを登録するようにします。

reserve.php編集

user_idを取得して、取得できる情報を使ってフォームを埋めるようにします。
reserve.phpはログインしていることが前提なので、一応ログインチェックして、user_idを取得するようにします。
reserve.php

    <?php

        session_start();
        $user_login = isset($_SESSION['user_login'])? $_SESSION['user_login']:false;

+       //ログインしてなかったらカレンダーにリダイレクト
+       if($user_login==false){
+           header('location:./calendar.php');
+       }
+       //user_id取得
+       $user_id = $_SESSION['user_id'];

DBに接続してセッションから取得したuser_idで会員情報を取得します。
reserve.php

    $y = isset($_GET['y'])? htmlspecialchars($_GET['y'], ENT_QUOTES, 'utf-8') : '';
    $m = isset($_GET['m'])? htmlspecialchars($_GET['m'], ENT_QUOTES, 'utf-8') : '';
    $d = isset($_GET['d'])? htmlspecialchars($_GET['d'], ENT_QUOTES, 'utf-8') : '';

+   //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 users WHERE id=:id");
+   $stmt->bindParam(":id",$user_id);
+   $stmt->execute();
+   $users = $stmt->fetchAll(PDO::FETCH_ASSOC);

取得できる情報はnameとemailなので、nameとemailのフォームにvalueを追加して表示させます。
reserve.php

    <form class="reserve-form" method="POST" action="reserved.php">
        <div class="form-group">
            <label for="reserveDate">予約日</label>
            <input type="text" class="form-control" id="reserveDate" value="<?php echo $y;?>年<?php echo $m; ?>月<?php echo $d; ?>日" disabled="disabled">
            <input type="hidden" name="reserve_date" value="<?php echo $y; ?>-<?php echo $m; ?>-<?php echo $d; ?>">
        </div>
        <div class="form-group">
            <label for="name">氏名 *</label>
-           <input type="text" class="form-control" name="name" required>
+           <input type="text" class="form-control" name="name" required value="<?php echo $users[0]['name']; ?>">
        </div>
        <div class="form-group">
            <label for="tel">電話番号 *</label>
            <input type="text" class="form-control" name="tel" required>
        </div>
        <div class="form-group">
            <label for="email">メールアドレス *</label>
-           <input type="text" class="form-control" name="email" required>
+           <input type="text" class="form-control" name="email" required value="<?php echo $users[0]['email']; ?>">
        </div>
        <div class="form-group">
            <label for="email">来訪人数 *</label>
            <input type="text" class="form-control" name="number" required>
        </div>
        <button type="submit" class="btn btn-submit">予約する</button>
    </form>

reserved.php編集

reserved.phpもログインしていることが前提なので、ログインチェックして、user_idを取得するようにします。
reserved.php

    <?php

        session_start();
        $user_login = isset($_SESSION['user_login'])? $_SESSION['user_login']:false;

+       //ログインしてなかったらカレンダーにリダイレクト
+       if($user_login==false){
+           header('location:./calendar.php');
+       }
+       //user_id取得
+       $user_id = $_SESSION['user_id'];

DBに保存するときに、取得したuser_idを追加します。このとき、updated_atの後にidを追加するので、updated_atに「,（カンマ）」、now()に「,(カンマ)」を付けることを忘れないように注意してください。
reserved.php

    $stmt = $dbh->prepare("INSERT INTO reservations(
            reserve_date,
            name,
            tel,
            email,
            number,
            created_at,
-           updated_at
+           updated_at,
+           user_id
        )values(
            :reserve_date,
            :name,
            :tel,
            :email,
            :number,
            now(),
-           now()
+           now(),
+           :user_id
        )");

    $stmt->bindParam(":reserve_date",$reserve_date);
    $stmt->bindParam(":name",$name);
    $stmt->bindParam(":tel",$tel);
    $stmt->bindParam(":email",$email);
    $stmt->bindParam(":number",$number);
+   $stmt->bindParam(":user_id",$user_id);
    $stmt->execute();

ここまでできたらlogin.phpからログインして確認します。
無料ご相談会から予約に進み完了画面まで行けたら、コンソールでDBを確認します。
console

mysql> select * from reservations;

今、追加したほうはuser_idカラムに会員IDがセットされていればOKです。

予約編集機能の追加

calendar.phpの編集

カレンダーで自分自身が予約した予約にのみ編集リンクが付くように編集します。
renderCalendarファンクション内で、$user_idを定義します。
ログインできている人はsessionにuser_idがセットされているのでsessionからuser_idを取得します。
ログインしていない人は空をセットします。
calendar.php


    function renderCalendar($dt,$user_login)
    {
+        if($user_login==true){
+            $user_id = $_SESSION['user_id'];
+        }else{
+            $user_id = '';
+        }

「予約あり」表示部分でuser_idを利用してリンクを付けます。
reservationsテーブルのuser_idと、ログインチェックで取得したuser_idが一致したらリンクを表示し、そうでなかったらリンク無しの表示をします。
リンクには、reservationsのidを付けます。
calendar.php

    if($count != 0){
        $reservations= $stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach($reservations as $reservation)
        {
+           if($reservation['user_id']==$user_id){
+               $calendar .= '<br><a href="edit_reserve.php?reservation_id='.$reservation['id'].'">予約あり</a>';
+           }else{
               $calendar .= '<br>予約あり</a>';
+           }

        }
        $calendar .= '</td>';
    }else{
        $calendar .='</td>';
    }

先程予約したユーザーでログインしてカレンダーを確認します。
予約編集へのリンクが表示されています。

次にログアウトして、別のアカウントでカレンダーを確認します。
このアカウントで予約していないので、先程リンクがついていた予約にはリンクが付きません。

ここまでできたら、予約変更のリンクの分岐の実装はOKです。

次に編集画面を作成します。
calendar.phpと同じ階層にreserve.phpをコピーしてedit_reserve.phpを作成します。
reserve.phpでは予約日時を取得していましたが、edit_reserve.phpではreservation_idを取得し、reservationsテーブルから予約情報を取得します。
上部のPHPでreservationsの情報を取得するように編集します。
edit_reserve.php

    <?php

        session_start();
        $user_login = isset($_SESSION['user_login'])? $_SESSION['user_login']:false;

        //ログインしてなかったらカレンダーにリダイレクト
        if($user_login==false){
            header('location:./calendar.php');
        }
        $user_id = $_SESSION['user_id'];

-       $y = isset($_GET['y'])? htmlspecialchars($_GET['y'], ENT_QUOTES, 'utf-8') : '';
-       $m = isset($_GET['m'])? htmlspecialchars($_GET['m'], ENT_QUOTES, 'utf-8') : '';
-       $d = isset($_GET['d'])? htmlspecialchars($_GET['d'], ENT_QUOTES, 'utf-8') : '';

+       $reservation_id = isset($_GET['reservation_id'])? htmlspecialchars($_GET['reservation_id'], ENT_QUOTES, 'utf-8') : '';

        //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 users WHERE id=:id");
-       $stmt->bindParam(":id",$user_id);
+       $stmt = $dbh->prepare("SELECT * from reservations WHERE id=:id");
+       $stmt->bindParam(":id",$reservation_id);
        $stmt->execute();
-       $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
+       $reservations = $stmt->fetchAll(PDO::FETCH_ASSOC);
    ?>

フォームの送り先は、update_reserve.phpを指定します。
フォーム内の内容を取得したreservationsを入れていきます。
hiddenでreservation_idをセットしておきます。
予約日を変更することもあると思うので、予約日の変更も可能なようにdisabledを削除して、DBから取得した日時をvalueに設定します。
その他のデータもDBから取得したデータをvalueに設定します。
ボタンの名前は予約変更するに変えます。
edit_reserve.php

-   <form class="reserve-form" method="POST" action="reserved.php">
+   <form class="reserve-form" method="POST" action="update_reserve.php">
+       <input type="hidden" name="reservation_id" value="<?php echo $reservation_id; ?>">
        <div class="form-group">
            <label for="reserveDate">予約日</label>
-           <input type="text" class="form-control" id="reserveDate" value="<?php echo $y;?>年<?php echo $m; ?>月<?php echo $d; ?>日" disabled="disabled">
-           <input type="hidden" name="reserve_date" value="<?php echo $y; ?>-<?php echo $m; ?>-<?php echo $d; ?>">
+           <input type="text" class="form-control" id="reserveDate" name="reserve_date" value="<?php echo $reservations[0]['reserve_date']; ?>">
        </div>
        <div class="form-group">
            <label for="name">氏名 *</label>
-           <input type="text" class="form-control" name="name" required value="<?php echo $users[0]['name']; ?>">
+           <input type="text" class="form-control" name="name" required value="<?php echo $reservations[0]['name']; ?>">
        </div>
        <div class="form-group">
            <label for="tel">電話番号 *</label>
-           <input type="text" class="form-control" name="tel" required>
+           <input type="text" class="form-control" name="tel" required value="<?php echo $reservations[0]['tel']; ?>">
        </div>
        <div class="form-group">
            <label for="email">メールアドレス *</label>
-           <input type="text" class="form-control" name="email" required value="<?php echo $users[0]['email']; ?>">
+           <input type="text" class="form-control" name="email" required value="<?php echo $reservations[0]['email']; ?>">
        </div>
        <div class="form-group">
            <label for="email">来訪人数 *</label>
-           <input type="text" class="form-control" name="number" required>
+           <input type="text" class="form-control" name="number" required value="<?php echo $reservations[0]['number']; ?>">
        </div>
-       <button type="submit" class="btn btn-submit">予約する</button>
+       <button type="submit" class="btn btn-submit">予約変更する</button>
    </form>

更新の実行

reserved.phpをコピーしてupdate_reserve.phpを作成します。
reserved.phpとの違いは、reservationsテーブルにinsertするか、updateをかけるかの違いです。
updateの場合、updateしたいデータのreservation_idをwhereで指定してupdateをかけます。
update_reserve.php

    <?php

        session_start();
        $user_login = isset($_SESSION['user_login'])? $_SESSION['user_login']:false;
        //ログインしてなかったらカレンダーにリダイレクト
        if($user_login==false){
            header('location:./calendar.php');
        }
        $user_id = $_SESSION['user_id'];

+       $reservation_id = isset($_POST['reservation_id'])? htmlspecialchars($_POST['reservation_id'], ENT_QUOTES, 'utf-8'):'';
        $reserve_date = isset($_POST['reserve_date'])? htmlspecialchars($_POST['reserve_date'], ENT_QUOTES, 'utf-8'):'';
        $name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
        $email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
        $tel = isset($_POST['tel'])? htmlspecialchars($_POST['tel'], ENT_QUOTES, 'utf-8'):'';
        $number = isset($_POST['number'])? htmlspecialchars($_POST['number'], ENT_QUOTES, 'utf-8'):'';

        //DB接続
        try{
            $dbh = new PDO("mysql:host=localhost;dbname=corporate_db","root","root");
        }catch(PDOException $e){
            var_dump($e->getMessage());
            exit;
        }

-       $stmt = $dbh->prepare("INSERT INTO reservations(
-               reserve_date,
-               name,
-               tel,
-               email,
-               number,
-               created_at,
-               updated_at,
-               user_id
-           )values(
-               :reserve_date,
-               :name,
-               :tel,
-               :email,
-               :number,
-               now(),
-               now(),
-               :user_id
-           )");
-       $stmt->bindParam(":reserve_date",$reserve_date);
-       $stmt->bindParam(":name",$name);
-       $stmt->bindParam(":tel",$tel);
-       $stmt->bindParam(":email",$email);
-       $stmt->bindParam(":number",$number);
-       $stmt->bindParam(":user_id",$user_id);
-       $stmt->execute();

+       $stmt = $dbh->prepare("UPDATE reservations SET reserve_date=:reserve_date, name=:name, email=:email, tel=:tel, number=:number, updated_at=now() WHERE id=:id");
+       $stmt->bindParam(":reserve_date",$reserve_date);
+       $stmt->bindParam(":name",$name);
+       $stmt->bindParam(":tel",$tel);
+       $stmt->bindParam(":email",$email);
+       $stmt->bindParam(":number",$number,PDO::PARAM_INT);
+       $stmt->bindParam(":id",$reservation_id,PDO::PARAM_INT);
+       
+       $stmt->execute();
    ?>

HTML部分は文言を「ご予約内容を変更しました。」に変更しただけです。
update_reserve.php

    <main>
        <div class="breadcrumbs">
            <div class="container">
                <ul>
                    <li><a href="index.php">TOP</a></li>
                    <li><a href="calendar.php">無料ご相談会予約</a></li>
                    <li>ご予約完了</li>
                </ul>
            </div>
        </div>
        <div class="wrapper last-wrapper">
            <div class="container">
                <div class="wrapper-title">
                    <h3>ご予約完了</h3>
                </div>
                <div class="wrapper-body">
                    <div class="thanks">
                        <h4>ご予約内容を変更しました。</h4>
                    </div>
                    <button type="button" class="btn btn-gray" onclick="location.href='./index.php'">トップページに戻る</button>
                </div>
            </div>
        </div>
    </main>

予約したアカウントでログインして、カレンダーにアクセスして、予約の変更をします。
「ご予約内容を変更しました。」が表示されたら、再度カレンダーにアクセスして変更が反映されていればOKです。


削除機能の追加

キャンセルボタン追加

予約キャンセル機能を追加します。
edit_reserve.phpにキャンセルボタンを作成します。
delete_reserve.phpにPOST送信するformを作成して、hiddenでreservation_idを送ります。
edit_reserve.php

    <form class="reserve-form" method="POST" action="update_reserve.php">
        <input type="hidden" name="reservation_id" value="<?php echo $reservation_id; ?>">
        <div class="form-group">
            <label for="reserveDate">予約日</label>
            <input type="text" class="form-control" id="reserveDate" name="reserve_date" value="<?php echo $reservations[0]['reserve_date']; ?>">

        </div>
        <div class="form-group">
            <label for="name">氏名 *</label>
            <input type="text" class="form-control" name="name" required value="<?php echo $reservations[0]['name']; ?>">
        </div>
        <div class="form-group">
            <label for="tel">電話番号 *</label>
            <input type="text" class="form-control" name="tel" required value="<?php echo $reservations[0]['tel']; ?>">
        </div>
        <div class="form-group">
            <label for="email">メールアドレス *</label>
            <input type="text" class="form-control" name="email" required value="<?php echo $reservations[0]['email']; ?>">
        </div>
        <div class="form-group">
            <label for="email">来訪人数 *</label>
            <input type="text" class="form-control" name="number" required value="<?php echo $reservations[0]['number']; ?>">
        </div>
        <button type="submit" class="btn btn-submit">予約変更する</button>
    </form>
+   <form method="POST" action="delete_reserve.php">
+       <input type="hidden" name="reservation_id" value="<?php echo $reservation_id; ?>">
+       <button type="submit" class="btn btn-red">キャンセルする</button>
+   </form>

編集画面にキャンセルボタンが付きました。

delete_reserve.php作成

update_reserve.phpをコピーしてdelete_reserve.phpを作成します。
update_reserve.phpではいろいろなパラメータを受け取っていましたが、delete_reserve.phpはreservation_idだけなので、それ以外のパラメータは削除します。
delete_reserve.php

    <?php

        session_start();
        $user_login = isset($_SESSION['user_login'])? $_SESSION['user_login']:false;

        //ログインしてなかったらカレンダーにリダイレクト
        if($user_login==false){
            header('location:./calendar.php');
        }
        //user_id取得
        $user_id = $_SESSION['user_id'];

        $reservation_id = isset($_POST['reservation_id'])? htmlspecialchars($_POST['reservation_id'], ENT_QUOTES, 'utf-8'):'';

-       $reserve_date = isset($_POST['reserve_date'])? htmlspecialchars($_POST['reserve_date'], ENT_QUOTES, 'utf-8'):'';
-       $name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
-       $email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
-       $tel = isset($_POST['tel'])? htmlspecialchars($_POST['tel'], ENT_QUOTES, 'utf-8'):'';
-       $number = isset($_POST['number'])? htmlspecialchars($_POST['number'], ENT_QUOTES, 'utf-8'):'';

DBに接続して削除を実行します。
削除したいレコードのidを指定してdeleteを実行します。
delete_reserve.php

    //DB接続
    try{
        $dbh = new PDO("mysql:host=localhost;dbname=corporate_db","root","root");
    }catch(PDOException $e){
        var_dump($e->getMessage());
        exit;
    }

-   $stmt = $dbh->prepare("UPDATE reservations SET reserve_date=:reserve_date, name=:name, email=:email, tel=:tel, number=:number, updated_at=now() WHERE id=:id");
-   $stmt->bindParam(":reserve_date",$reserve_date);
-   $stmt->bindParam(":name",$name);
-   $stmt->bindParam(":tel",$tel);
-   $stmt->bindParam(":email",$email);
-   $stmt->bindParam(":number",$number,PDO::PARAM_INT);
-   $stmt->bindParam(":id",$reservation_id,PDO::PARAM_INT);
-   $stmt->execute();

+   $stmt = $dbh->prepare("DELETE FROM reservations WHERE id=:id");
+   $stmt->bindParam(":id",$reservation_id);
+   $stmt->execute();

?>

titleとwrapper-titleのh3タグ、パンくずリストを「ご予約キャンセル」に変更し、wrapper-bodyのh4タグに「ご予約をキャンセルしました。」に変えます。
delete_reserve.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>ご予約キャンセル｜SQUARE, inc.</title>

    <link rel="icon" href="favicon.ico">

    <!-- css -->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="responsive.css">

    <!-- icon -->
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>

<body>
    <header>

        ~~省略~~

    </header>
    <main>
        <div class="breadcrumbs">
            <div class="container">
                <ul>
                    <li><a href="index.php">TOP</a></li>
                    <li><a href="calendar.php">無料ご相談会予約</a></li>
                    <li>ご予約キャンセル</li>
                </ul>
            </div>
        </div>
        <div class="wrapper last-wrapper">
            <div class="container">
                <div class="wrapper-title">
                    <h3>ご予約キャンセル</h3>
                </div>
                <div class="wrapper-body">
                    <div class="thanks">
                        <h4>ご予約をキャンセルしました。</h4>
                    </div>
                    <button type="button" class="btn btn-gray" onclick="location.href='./index.php'">トップページに戻る</button>
                </div>
            </div>
        </div>
    </main>

カレンダーから実行して、キャンセルがうまく動作するか確認します。

キャンセル完了画面が表示され、再度カレンダーにアクセスして、予約が消えていれば成功です。

これで、会員機能を追加した予約（カレンダー）機能の実装が完了しました。

コード

https://github.com/bluecode-io/web-basic/tree/basic8-4

「 Basic-8 : 予約（カレンダー）機能を追加する 」 の記事一覧 【 基礎編 】 トップページに戻る