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

前提・実現したいこと

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

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

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

画像イメージ

日付選択前

日付選択後

日付を選択しchoseを押下後 schedule_table を見にいき同じ日付のデータをSELECTする
SELECT time_id FROM schedule_table WHERE date = 選択された日付
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
1<?php
2    ini_set("display_errors", 1);
3    error_reporting(E_ALL);
4?>
5<!doctype html>
6<html lang="en">
7  <head>
8    <title>reservation</title>
9    <!-- Required meta tags -->
10    <meta charset="utf-8">
11    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
12     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
14    <!-- <script type="text/javascript">
15    $.ajax({
16        success : function(response){
17            alert('成功');
18        },
19        error: function(){
20            //通信失敗時の処
21            alert('通信失敗');
22        }
23    });
24    </script> -->
25    <!-- Bootstrap CSS -->
26    <link href="css/reservation.css" rel="stylesheet" />
27    <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">
28  </head>
29  <body>
30      <header>
31          <div class="container py-3">
32            <h2><a href="index.php" class="text-white">美容院</a></h2>
33          </div>
34      </header>
35      <div class="row">
36        <div class="col-lg-4 visible-lg"></div>
37        <div class="col-lg-4">
38            <div class="container">
39                <form method="post" class="text-center mt-5">
40                    <div class="form-group">
41                        <label>Date:</label>
42                        <input type="date" class="form-control date_schedule" name="date_schedule" id="date_schedule">
43                    </div>
44                    <div class="text-center mt-3">
45                    <button class="btn bg-dark text-white" name="date_chose" id="date_chose">chose</button>
46                    <script>
47                        $(function() {
48                            $('#date_chose').click(function() {
49                                $.post('actionReservation.php',{
50                                    date: $('#date_schedule').val()
51                                },function(time) {
52                                    $('#result').html(time);
53                                });
54                            });
55                        });
56                    </script>
57                    </div>
58                    <!-- <div class="form-group mt-4">
59                        <label>Time:</label>
60                        <select class="form-control time-schedule" id="time-schedule" name="time_schedule">
61                            <option></option>
62                        </select>
63                    </div>
64                    <div class="text-center mt-4">
65                        <button class="btn bg-dark text-white" name="reservation">submit</button>
66                    </div> -->
67                </form>
68            </div>
69        </div>
70        <div class="col-lg-4 visible-lg"></div>
71      </div>
72      <footer class="mt-5">
73          <div class="container"></div>
74      </footer>
75    <!-- Optional JavaScript -->
76    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
77    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
78    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
79  </body>
80</html>
81

SQLstatements.php

php
1<?php
2
3    require_once "Database.php";
4
5    class User extends Database {
6
7        public function selectTime($date_schedule) {
8            $sql = "SELECT time_id FROM schedule WHERE date = '$date_schedule'";
9            $result = $this->conn->query($sql) or die('Connection error: '.$this->conn->error);
10                if($result) {
11                    $sql = "SELECT time_id FROM time WHERE NOT '$result'";
12                    $result = $this->conn->query($sql) or die('Connection error: '.$this->conn->error);
13                    $row = $result->num_rows;
14                    while($row = $result->fetch_assoc()) {
15                        return $row['time'];
16                    }
17                }
18            }
19
20    }
21
22?>

actionReservation.php

php
1<?php
2    session_start();
3    require "classes/SQLstatements.php";
4    ini_set("display_errors", 1);
5    error_reporting(E_ALL);
6
7    $user = new User;
8
9    $date_schedule = $_POST['date_schedule'];
10    $user->selectTime($date_schedule);
11?>
12

退会済みユーザー

2019/04/21 10:19

何がわからないのか具体的に。

1090175

2019/04/21 11:13

実際にこのテーブルの構造で、この予約システムの作成ができるのか Ajaxを使って実装するにはどのようにしたら良いのかがわからず悩んでいます。

退会済みユーザー

2019/04/21 11:19

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

1090175

2019/04/21 11:30

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