予約システム pickadate.jsで実装 ~ヘルスケアwebサービスを自分で作る医者の日記~

クリニックの予約サイトを作るために、勉強中

https://qiita.com/Yuta_Fujiwara/items/66af40dcc5ce206933eb
こちらの記事を参考にさせていただいた。

datepicker

公式のドキュメントとにらめっこしていると、
なんとか、実装はできるようなった。

作りたいのは、予約システム

jsからwebサーバーに送る処理の理解が必要
上の記事はajax使っているのね、
なんとか、ググってajaxの基本を1日で習得
vagrantでphpウェブサーバーを立ち上げる方法で実装

$(function() {

    // datepicker表示イベント
    $('#date').pickadate();

    // timepicker表示イベント
    $('#time').pickatime({
        format: 'HH:i', // 24時間表記
        interval: 30,   // 表示間隔
        min: [10,00],   // 予約開始時間
        max: [20,00]    // 予約終了時間
    });

    // 予約ボタン押下イベント
    $('#submit').click(onClickSubmit);

    //予約ボタン押下処理
    function onClickSubmit(){
        $('#submit_result').remove();
        var date = $('#date').val();
        var time = $('#time').val();

        if(date!='' && time !=''){

          $.ajax({
            async: true,
            url: 'http://192.168.33.10:8000/yoyaku_datepicker.php',
            type: "POST",
            dataType: 'json',
            data: {
              'hiduke': date,
              'jikan': time
            }
          }).done(function(data) {
            console.log(data.kekka + "を取得しました。");
          }).fail(function() {
            console.log("処理を失敗しました。");
          });

            //予約完了メッセージ
            $('#result').after('<div id="submit_result" class="section__block section__block--notification"><p><strong>'+date+time+'〜</strong><br>予約受け付けました。</p></div>');

        }else{
            //予約失敗メッセージ
            $('#result').after('<div id="submit_result" class="section__block section__block--notification-red"><p>予約日・予約時間を選択してください。</p></div>');
        }
    }

});

<?php

$hiduke = $_POST['hiduke'];
$jikan = $_POST['jikan'];



if ($hiduke  && $jikan) {
  $datepick['kekka'] = "ご指定の日時";
} else {
  echo false;
}

echo json_encode($datepick);

最終的にはrailsでやりたいのだが、
データベースへの格納を理解できなきゃならない
railsのacctive recordか

ていうか、vagrant のwebサーバーでデータベースの取り扱いはできるのか？？

道は長い、、、