はじめに
プログラミング超初心者かつ、Quiita初投稿です。
成長のため何か行動せねば！と思い、PHPを用いて動的なWebページを作成してみることにしました。今回は初心者向けの以下を参考に予約フォームを作成しました！
（温かい目で読んでいただけると嬉しいです！）
[PHP]カレンダーを利用した予約システムの作り方[初心者向け]|WATSUNBLOG
https://watsunblog.com/php-reservation-calender/
PHPとは
PHPは動的にWebページを作成できるサーバサイドのスクリプト言語です。
他言語との違いとして、HTMLは静的にWebページを表示し、JavaScriptではクライアントサイドのスクリプトという違いがあります。
環境構築
ネットでPHPのプログラミング方法を見るとVisualstudioを用いて環境構築しているものもありましたが、「XAMPP（ザンプ）」の方が簡単そうだったので、今回はこちらを使用しました。
XAMPPはウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されています。
以下を参考にXAMPPをインストールしました。
開発環境構築と初めてのPHPプログラム作成（Windows版）
https://blog.senseshare.jp/dev-tools.html
データベースの用意
【文字化け対策】
C:\xampp\mysql\bin配下の[my.ini]というファイルをサクラエディタで開きます。
①[client]のすぐ下に1行追加します。
②[mysqld]のすぐ下に2行追加します。
【データベースの作成】
①データベースをメンテナンスする画面を開く
XAMPPコントロールパネルのMySQLの[Admin]ボタンを押すとブラウザが自動で起動します。
②データベースの作成
データベース名「reservation」、照合順序「utf8_unicode_ci」を設定し、[作成]ボタンをクリックする。
名前にテーブル名[booking]を入力（半角で）し、カラム数を設定します。
フィールドを設定します。
予約フォームの作成
簡単な「予約フォーム」を作成し、こちらから名前、電話番号、日時などの情報をユーザーに登録してもらいます。
コードは以下のような感じで、[calender.php]へactionさせています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Reservation Form</title>
<style>
</style>
</head>
<body>
<?php
echo '必要事項を入力してください。';
?>
<form method="post"action="calender.php">
お名前
<div><input name="name"type="text"placeholder="山田太郎"style="width:120px"></div>
電話番号
<div><input name="number"type="tel"placeholder="09012349876"></div>
人数
<div><input name="member"></div>
日付
<div><input name="day"type="date"list="daylist"min=""></div>
<div><input type="submit"value="Send"></div>
<div><input type="reset"value="Reset"></div>
</form>
</body>
</html>
[calender.php]でデータベースへの書き込みを行います。
[calender.php]のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Calender</title>
<link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.container{
font-family: "メイリオ";
margin-top: 80px;
}
h3{
margin-bottom: 30px;
}
th{
height: 30px;
text-align: center;
}
td{
height: 100px;
}
.today{
background: aqua; //日付が今日の場合は背景を水色に設定
}
th:nth-of-type(1),td:nth-of-type(1){
color: red; //日曜日は赤
}
th:nth-of-type(7),td:nth-of-type(7){
color: blue; //土曜日は青
}
.green{
color: green;
}
</style>
</head>
<body>
<?php
if(isset($_POST['name'])) {
//名前が送信されたら以下の処理を行う
//「予約フォーム」からの情報をそれぞれ変数に格納しておく↓
$name=htmlspecialchars($_POST["name"], ENT_QUOTES);
$number=htmlspecialchars($_POST["number"], ENT_QUOTES);
$member=htmlspecialchars($_POST["member"], ENT_QUOTES);
$day=htmlspecialchars($_POST["day"], ENT_QUOTES);
//DBへ接続
$dsn='mysql:dbname=reservation;host=localhost;charset=utf8';
$user='root';
$pass='';
try{
$dbh = new PDO($dsn,$user,$pass);
$dbh->query("INSERT INTO booking (ban,name,number,member,day)
VALUES (NULL,'$name','$number','$member','$day')");
}catch (Exception $e) {
echo $e->getMessage() . PHP_EOL;
}
//予約された日の予約人数を取得する
function getreservation(){
$dsn='mysql:dbname=reservation;host=localhost;charset=utf8';
$user='root';
$pass='';
$dbh = new PDO($dsn,$user,$pass);
$ps = $dbh->query("SELECT * FROM booking");
$reservation_member = array(); //各日付の予約人数を$reservation_memberへ入れるための配列を用意する
foreach($ps as $out){ //登録された予約情報をすべて$outに入れる
//予約された全ての日付情報を文字列として$day_outへ格納
$day_out = strtotime((string) $out['day']);
//予約された全ての日のそれぞれの人数を文字列として$member_outへ格納
$member_out = (string) $out['member'];
//$day_outで取得した日付をもとにそれぞれの予約人数を$reservation_memberへ格納
$reservation_member[date('Y-m-d', $day_out)] = $member_out;
}
return $reservation_member;
}
$reservation_array = getreservation();
//getreservation関数を$reservation_arrayに代入しておく
function reservation($date,$reservation_array){
//カレンダーの日付と予約された日付を照合する関数
if(array_key_exists($date,$reservation_array)){
//もし"カレンダーの日付"と"予約された日"が一致すれば以下を実行する
$reservation_member = "<br/>"."<span class='green'>".$reservation_array[$date]."人"."</span>";
return $reservation_member;
}
}
//タイムゾーンを設定
date_default_timezone_set('Asia/Tokyo');
//前月・次月リンクが選択された場合は、GETパラメーターから年月を取得
if(isset($_GET['ym'])){
$ym = $_GET['ym'];
}else{
//今月の年月を表示
$ym = date('Y-m');
}
//タイムスタンプ（どの時刻を基準にするか）を作成し、フォーマットをチェックする
//strtotime('Y-m-01')
$timestamp = strtotime($ym . '-01');
if($timestamp === false){ //エラー対策として形式チェックを追加
//falseが返ってきた時は、現在の年月・タイムスタンプを取得
$ym = date('Y-m');
$timestamp = strtotime($ym . '-01');
}
//今月の日付 フォーマット 例）2020-10-2
$today = date('Y-m-j');
//カレンダーのタイトルを作成 例）2020年10月
$html_title = date('Y年n月', $timestamp);//date(表示する内容,基準)
//前月・次月の年月を取得
//strtotime(,基準)
$prev = date('Y-m', strtotime('-1 month', $timestamp));
$next = date('Y-m', strtotime('+1 month', $timestamp));
//該当月の日数を取得
$day_count = date('t', $timestamp);
//１日が何曜日か
$youbi = date('w', $timestamp);
//カレンダー作成の準備
$weeks = [];
$week = '';
//第１週目：空のセルを追加
//str_repeat(文字列, 反復回数)
$week .= str_repeat('<td></td>', $youbi);
for($day = 1; $day <= $day_count; $day++, $youbi++){
$date = $ym . '-' . $day; //2020-00-00
$reservation = reservation(date("Y-m-d",strtotime($date)),$reservation_array);
if($today == $date){
$week .= '<td class="today">' . $day; //今日の場合はclassにtodayをつける
}elseif(reservation(date("Y-m-d",strtotime($date)),$reservation_array)){
$week .= '<td>' . $day . '<br>' . $reservation;
}else{
$week .= '<td>' . $day;
}
$week .= '</td>';
if($youbi % 7 == 6 || $day == $day_count){//週終わり、月終わりの場合
//土曜日を取得
if($day == $day_count){//月の最終日、空セルを追加
$week .= str_repeat('<td></td>', 6 - ($youbi % 7));
}
$weeks[] = '<tr>' . $week . '</tr>'; //weeks配列にtrと$weekを追加
$week = '';//weekをリセット
}
}
?>
<div class="container">
<h3><a href="?ym=<?php echo $prev; ?>"><</a><?php echo $html_title; ?><a href="?ym=<?php echo $next; ?>">></a></h3>
<table class="table table-bordered">
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<?php
foreach($weeks as $week){
echo $week;
}
?>
</table>
</div>
</body>
</html>
おわりに、そして今後に向けて
DBから予約人数を取り出し、所定の日付に表示させる方法や、予約が入っていない日付が正しくカレンダーの枠に入らない時の原因究明に苦戦し、時間を要しました。
細かく変数の値を公開ページに表示させ、どこまで正しく入っているか確認しながら進めることでどこに原因があるかを検討しました。
また、キータの初投稿ということもあり、慣れるまでは記事の書き方が難しいですね。
今後は予約人数の制限や入力チェック、予約者を確認するためのページを作っていきたいです。