質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

日付、時間帯を指定できる予約システム

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,517

1090175

score 6

前提・実現したいこと

-実装するのに当たってbootstrap4を使用しています。

予約サイトの画面を作成しています。(美容院や歯医者などをイメージしています)
ユーザーが日付を選択したら、DBを見て空いてる時間だけを表示する
という画面を作りたいのですが上手くできず悩んでいます。

またAjaxを使用して画面遷移などを無しに実現できないかなと考えています。

画像イメージ

日付選択前
イメージ説明

日付選択後
イメージ説明

  1. 日付を選択しchoseを押下後 schedule_table を見にいき同じ日付のデータをSELECTする
    SELECT time_id FROM schedule_table WHERE date = 選択された日付

  2. schedule_tableにない時間のものをドロップダウン式で選択できるように表示する。
    SELECT time FROM time_table WHERE time_id != (上でSELECTしたデータのtime_id)

このテーブル構造で上記の実装が可能なのか?
Ajaxでどのようにしたら上記のようなシステムが作成できるのか?
をご教示いただきたいです。
(Ajaxの知識が少なくこのシステムを作成するために今学習中です。)

※どのように情報を載せれば良いのかわからず、、ご指摘いただけますと幸いです。

table

time_table

time_id time
1 10:00
2 11:00
3 12:00
4 14:00
5 15:00

schedule_table

schedule_id date time_id user_id
1 2019-04-01 1 00101
2 2019-04-01 3 00203

schedule_id ---データを管理するのに使います
date time_id ---ユーザーが予約した時間、日付をインサートします
user_id ---他でuser情報を管理するtableがありそこと紐づけて誰が予約をしたかを見ます

該当のソースコード

<?php
    ini_set("display_errors", 1);
    error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
  <head>
    <title>reservation</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!-- <script type="text/javascript">
    $.ajax({
        success : function(response){
            alert('成功');
        },
        error: function(){
            //通信失敗時の処
            alert('通信失敗');
        }
    });
    </script> -->
    <!-- Bootstrap CSS -->
    <link href="css/reservation.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <header>
          <div class="container py-3">
            <h2><a href="index.php" class="text-white">美容院</a></h2>
          </div>
      </header>
      <div class="row">
        <div class="col-lg-4 visible-lg"></div>
        <div class="col-lg-4">
            <div class="container">
                <form method="post" class="text-center mt-5">
                    <div class="form-group">
                        <label>Date:</label>
                        <input type="date" class="form-control date_schedule" name="date_schedule" id="date_schedule">
                    </div>
                    <div class="text-center mt-3">
                    <button class="btn bg-dark text-white" name="date_chose" id="date_chose">chose</button>
                    <script>
                        $(function() {
                            $('#date_chose').click(function() {
                                $.post('actionReservation.php',{
                                    date: $('#date_schedule').val()
                                },function(time) {
                                    $('#result').html(time);
                                });
                            });
                        });
                    </script>
                    </div>
                    <!-- <div class="form-group mt-4">
                        <label>Time:</label>
                        <select class="form-control time-schedule" id="time-schedule" name="time_schedule">
                            <option></option>
                        </select>
                    </div>
                    <div class="text-center mt-4">
                        <button class="btn bg-dark text-white" name="reservation">submit</button>
                    </div> -->
                </form>
            </div>
        </div>
        <div class="col-lg-4 visible-lg"></div>
      </div>
      <footer class="mt-5">
          <div class="container"></div>
      </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


SQLstatements.php

<?php

    require_once "Database.php";

    class User extends Database {

        public function selectTime($date_schedule) {
            $sql = "SELECT time_id FROM schedule WHERE date = '$date_schedule'";
            $result = $this->conn->query($sql) or die('Connection error: '.$this->conn->error);
                if($result) {
                    $sql = "SELECT time_id FROM time WHERE NOT '$result'";
                    $result = $this->conn->query($sql) or die('Connection error: '.$this->conn->error);
                    $row = $result->num_rows;
                    while($row = $result->fetch_assoc()) {
                        return $row['time'];
                    }
                }
            }

    }

?>

actionReservation.php

<?php
    session_start();
    require "classes/SQLstatements.php";
    ini_set("display_errors", 1);
    error_reporting(E_ALL);

    $user = new User;

    $date_schedule = $_POST['date_schedule'];
    $user->selectTime($date_schedule);
?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/04/21 20:19

    > 実際にこのテーブルの構造で、この予約システムの作成ができるのか]
    可能です。

    > Ajaxを使って実装するにはどのようにしたら良いのかがわからず悩んでいます。
    HTML構造やテーブル定義など、細かな条件が提示されていないので回答者はゼロからHTMLを書かなきゃいけない。
    teratailにおいては「推奨していない質問」に「作業依頼のような投稿を推奨していません」と書かれているため、回答者はゼロからコードを書くことに抵抗を感じます。
    https://teratail.com/help/avoid-asking

    キャンセル

  • 1090175

    2019/04/21 20:30

    ご丁寧にお返事ありがとうございます。
    コードが今非常に汚い状態で一度まとめてからアップロードいたします。

    キャンセル

  • m.ts10806

    2019/04/21 21:16

    あまりに質問の幅が広すぎると回答というより作業になってしまうので、もっと問題を具体的に、細かいレベルのものにされたほうが良いと思います。
    (このタイトルだと問題が見えにくいです)

    キャンセル

回答 1

-4

とっちらかってまちゅねぇ…。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/21 20:22

    結局、全ては設計しだいなのでちゅ。

    設計が間違っていれば、どんなに頭を捻ってコードを書いても全部無駄なのでちゅ。

    キャンセル

  • 2019/04/22 09:36

    質問タイトルで美容院となっていますが「?歯科」まずくないですか?

    キャンセル

  • 2019/04/22 16:21

    >>hai_hai
    ご指摘ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る