phpで予約システムを作くろう3 予約時間

予約時間をselectできるようにします。

<b>予約フォーム</b><br>
<form method="POST" action="">
1.お名前(必須)<br>
<input class="form1" type="text" name="username" placeholder=" お名前"/><br><br>
2.メールアドレス(必須)<br>
<input class="form1" type="text" name="username" placeholder=" 〇〇@gmail.com"/><br><br>
3.カレンダーから日付を選択してください<br>
<input type="text" id="date_val" placeholder=" 2018年〇月〇日"/><br>
<div id="datepicker"></div><br>
4.時間を選択してください<br>
	<select name="time">
	<option value=""> 選択してください</option>
	<option value="">9:00~</option>
	<option value="">10:00~</option>
	<option value="">11:00~</option>
	<option value="">13:00~</option>
	<option value="">14:00~</option>
	<option value="">15:00~</option>
	<option value="">16:00~</option>
	<option value="">17:00~</option>
	</select>

	<select name="time">
	<option value="">30分</option>
	<option value="" selected>60分</option>
	<option value="">90分</option>
	<option value="">120分</option>
	</select>

	<br><br>
5.ご希望される弁護士を選択してください<br>
	<select name="lawyer">
	<option value=""> 選択してください</option>
	<option value="">松島</option>
	<option value="">小野</option>
	<option value="">草野</option>
	</select>
	<br><br>
	<input type="submit" value="予約する" class="submit">
</form>

あれ、これ、もしかして、valueをminuteで変換すればいいだけじゃないですかね?
おいおいおい、結構簡単ではないですか。

datepickerを日本語化する

asset/datepicker-ja.js

jQuery(function($){
    $.datepicker.regional['ja'] = {
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['ja']);
});

index.phpのheader

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="asset/datepicker-ja.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">

javascript lang:’ja’を追加

$(function() {
	var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
    	lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
});

view -> OK!

土日選択不可

$(function() {
	var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
    	lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
    $( "#datepicker" ).datepicker('option','beforeShowDay',function(date){
	    var ret = [(date.getDay() != 0 && date.getDay() != 6)];
	    return ret;
	});
});

phpで予約システムを作くろう2 予約画面

jQueryのdatepickerで日付を取得します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<b>予約フォーム</b><br>
<form method="POST" action="">
1.カレンダーから日付を選択してください<br>
<input type="text" id="date_val"/><br>
<div id="datepicker"></div><br>
2.時間を選択してください<br>
	<select name="time">
	<option value=""> 選択してください</option>
	<option value="">9:00~10:00</option>
	<option value="">10:00~11:00</option>
	<option value="">11:00~12:00</option>
	<option value="">13:00~14:00</option>
	<option value="">14:00~15:00</option>
	<option value="">15:00~16:00</option>
	<option value="">16:00~17:00</option>
	<option value="">17:00~18:00</option>
	</select><br><br>
3.ご希望される弁護士を選択してください<br>
	<select name="lawyer">
	<option value=""> 選択してください</option>
	<option value="">松島</option>
	<option value="">小野</option>
	<option value="">草野</option>
	</select>
	<br><br>
	<input type="submit" value="予約する" class="submit">
</form>

<script>
$(function() {
	var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
});
</script>

あれ?かなり簡単にできたが大丈夫か?

画面遷移を以下のようにしたい。
1.今週のスケジュール表(view) -> 2.予約画面(form) -> 3.確認画面(重複チェック:validation) -> 4.ユーザー・担当者へ確認メール送信(mb_send_mail) -> 5.管理者画面で予約を一覧表示

1.今週のスケジュールは、今日の日付と曜日を取得して、DBから予約を引き出す。
3.確認画面でのvalidation
-> 予約時間が全て1時間単位なら、問題なさそう
-> 予約時間が30分、1時間、1時間30分のように選択式にすると、計算が複雑になりそうだ

### PHPとMySQLの接続を解説をしている本
本屋で立ち読みでも良いが、作った後に本で確認すると頭の中が整理されて参考になります。

phpで予約システムを作くろう1 DBの設計

弁護士事務所の予約システムを作っていきたい。

まず、DBの設計からですが、
基本は「ユーザーから予約リクエストがあったら、テーブルに書き込む」となりますが、どういう設計がいいのでしょうか?

初期設計では、マスターのテーブルと、予約したい人のそれぞれのテーブルを作っていく、という作りで始めてみたいと思います。
予約時間を30分、1時間、1時間30分、2時間と選べるようにしたいので、timeのカラムもつくります。

create table reserve.master(
	id int unsigned auto_increment primary key,
	reserve date,
	name varchar(255)
)

create table reserve.matsushima(
	id int unsigned auto_increment primary key,
	reserve date,
	time varchar(255),
	name varchar(255),
	content varchar(255)
)

create table reserve.ono(
	id int unsigned auto_increment primary key,
	reserve date,
	time varchar(255),
	name varchar(255),
	content varchar(255)
)

create table reserve.kusano(
	id int unsigned auto_increment primary key,
	reserve date,
	time varchar(255),
	name varchar(255),
	content varchar(255)
)

ファイルのルーティング

例えば、電話のXX-YYYY-ZZZZのうち、YYYY(市内局番)によって、読み込むディレクトリを変えたいとする。
その場合、ファイルをインクルードする際に、フォルダを指定すればよい。

以下のように、6832と6833のフォルダを作る。

$_SERVER[‘PATH_INFO’]でパスを読み込んで、市内局番のフォルダから、加入者番号のファイルを読み込めばよい。

$path = explode('/', $_SERVER['PATH_INFO']);

require "function.php";
$number = format_phone_number($path[1]);

$num1 =  strstr($number, '-', true);
$num = preg_replace("/".$num1."-/","", $number, 1);
$num2 =  strstr($num, '-', true);
$num3 = str_replace("".$num2."-","", $num);

include("".$num2."/".$num3.".php");

0368320900

0368330900

例えば、市内局番が2264件、それぞれ加入者番号が9999件あったとすれば、2264個のフォルダ(ディレクトリ)をつくり、そこから加入者番号のファイルを読み込めばいいので、フォルダを分散させて、フレームワークのルーティングのようにインクルードすれば、理論上、2000万ファイルを作ることは可能ということになる。

@mediaでレスポンシブルを設計する

まず初期画面

mobileの場合は、1カラムで表示させたい。

amazonトップページのソースからcssを見るとどうやら、768pxと979pxで切り分けているので、メディアクエリ@mediaはひとまず768pxしたいと思います。

https://www.amazon.co.jp

@media (max-width:767px){.a-visible-phone{display:inherit!important}.a-hidden-phone{display:none!important}.a-hidden-desktop{display:inherit!important}.a-visible-desktop{display:none!important}}@media (min-width:768px) and (max-width:979px){.a-visible-tablet{display:inherit!important}

max-width:767pxの時は、float:leftとfloat:rightを解除します。

@media screen and (min-width: 767px) {
	#content{
	width:800px;
	margin:10px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
	}
	#img {
		height:28px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:80;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:52%;
		float:left;
	}
	#map{
		width: 45%;
		float:right;
		height: 200px;
	}
}

@media screen and (max-width: 767px) {
	#content{
	width:75%;
	margin:5px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
		font-size:18px;
	}
	#img{
		height:18px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:25;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:99%;
	}
	#map{
		width: 99%;
		margin-top:5px;
		height: 200px;
	}
}

一応、レスポンシブルになりました。
min768px

max767px

Google Map : RefererNotAllowedMapError

vagrantでは表示されるのに、本番環境で、google map apiが表示されない!?
dev toolのconsoleを見ると、

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized

Google Maps Geocoding API
Google Maps JavaScript API
どうやら、js側ではなく、geocodingを有効化しないといけなかったようです。
Google Cloud Platformでgeocodingを有効化し、httpリファラーを設定して数分経ったら、本番環境でも表示されるようになりました。

http://phone-search.online/?p=0526130480

str_replaceの回数指定

03-6803-5794から、”03-“をstr_replaceすると、重複して削除され、685794になってしまう。

preg_replaceなら、回数を指定できる。

$num1 =  strstr($number, '-', true);
$num = preg_replace("/".$num1."-/","", $number, 1);
$num2 =  strstr($num, '-', true);
$num3 = str_replace("".$num2."-","", $num);

電話番号から、市外局番、市内局番、加入者番号を抜き出す

strstr trueでハイフン(-)より前を抜き出し、str_replaceで抜き出した数+ハイフンを削除して、またstrstr trueでハイフン(-)より前を抜き出します。

$number = empty($_GET["p"])? NULL: $_GET["p"];
$number = str_replace('-','', $number);

require "function.php";

$number = format_phone_number($number);

$num1 =  strstr($number, '-', true);
$num = str_replace("".$num1."-","", $number);
$num2 =  strstr($num, '-', true);
$num3 = str_replace("".$num2."-","", $num);

echo $num1 . "<br>";
echo $num2 . "<br>";
echo $num3;

おおおおお