1.サンプルプログラムのダウンロード
サンプルプログラムを使ってフォームを使ったHTMLを確認します。
サンプルプログラムでは、氏名、生年月日を入力して送信すると、年齢と生まれた日の曜日、次の誕生日までの日数をPHPで計算をして結果を表示します。
最初に、サンプルプログラムをダウンロードします。次のリンクから「ip0109kadai.zip」をダウンロードしましょう。
zipファイルを展開すると次のファイル構成になっています。
展開すると「ip0109kadai」フォルダができます。Raspberry
piの「/var/www/html」フォルダに「ip0109kadai」フォルダを移動しましょう。
移動すると「/var/www/html」フォルダは次のようになります。
サンプルプログラムのダウンロードができたら、どのようなファイルになっているか確認します。
2.birthdayform.htmlファイルを確認する
難しいと感じたら「サンプルプログラムを表示しよう」まで読み飛ばしましょう。
入力フォームを表示する「birthdayform.html」の内容を確認します。
HTMLファイルは次のように記述されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>年齢と誕生日情報</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>あなたの情報を入力してください</h1>
<form action="result.php" method="post">
<label for="last_name">姓：</label>
<input type="text" name="last_name" required><br>
<label for="first_name">名：</label>
<input type="text" name="first_name" required><br>
<label for="birth_year">年(生年月日の年)：</label>
<input type="number" name="birth_year" min="1900" max="2100" required><br>
<label for="birth_month">月(生年月日の月)：</label>
<input type="number" name="birth_month" min="1" max="12" required><br>
<label for="birth_day">日(生年月日の日)：</label>
<input type="number" name="birth_day" min="1" max="31" required><br>
<input type="submit" value="送信">
</form>
</body>
</html>
formタグの確認
fomタグは、入力部品を記述する範囲を特定することと、入力したデータをどこに送信するのかを定義します。
入力データは「result.php」に送信されることがわかりました。
inputタグの確認
inputタグは入力部品を使って入力欄を作成します。
「birthdayform.html」をWebブラウザでみると次のように表示されます。
inputタグは次のように定義されています。
ここで、確認をして欲しいところは、inputタグの項目で「 name=”○○”」と定義されている部分です。「name」は入力された情報を送信するときの変数名になります。入力された情報は「result.php」に送信され、「result.php」はその情報をnameで指定された変数名で受け取ります。
続いて、「result.php」について確認しましょう。
3.result.phpファイルを確認する
難しいと感じたら「サンプルプログラムを表示しよう」まで読み飛ばしましょう。
「result.php」はサーバサイドで実行するプログラムです。今回は、「birthdayform.html」から情報を受け取り、処理を行い結果を返します。
「result.php」が行う処理は次のとおりです。
- 生年月日から現在の年齢を計算する
- 生年月日から生まれた日が何曜日か求める
- 生年月日から次の誕生日まであと何日か計算する
プログラムは次の通りです。
<?php
//PHPの処理（サーバサイドプログラム）
//フォームからデータを受け取る
$last_name = $_POST['last_name']; //姓
$first_name = $_POST['first_name']; //名
$year = (int)$_POST['birth_year']; //誕生日 年
$month = (int)$_POST['birth_month'];//誕生日 月
$day = (int)$_POST['birth_day']; //誕生日 日
//日付の作成
$birth_date = DateTime::createFromFormat('Y-n-j', "$year-$month-$day");
$today = new DateTime();
//年齢の計算 変数「$age」に年齢が格納される
$age = $today->diff($birth_date)->y;
//生まれた日の曜日の取得 変数「$birth_weekday」に曜日の値が格納される
$birth_weekday = $birth_date->format('l'); // 曜日
//次の誕生日までの日数を計算 変数「$days_until_next_birthday」に次の誕生日までの経過日数が格納される
$next_birthday = DateTime::createFromFormat('Y-n-j', $today->format('Y') . "-$month-$day");
if ($next_birthday < $today) {
$next_birthday->modify('+1 year');
}
$days_until_next_birthday = $today->diff($next_birthday)->days + 1;
$weekday_jp = [
'Sunday' => '日曜日',
'Monday' => '月曜日',
'Tuesday' => '火曜日',
'Wednesday' => '水曜日',
'Thursday' => '木曜日',
'Friday' => '金曜日',
'Saturday' => '土曜日'
];
?>
<!-- ここからHTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>結果表示</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="result-box">
<h1>こんにちは、<?php echo htmlspecialchars($last_name . ' ' . $first_name); ?>さん！</h1>
<!-- 年齢を表示 -->
<p>あなたの誕生日は <?php echo $weekday_jp[$birth_weekday]; ?> でした。</p>
<p>次の誕生日まであと <?php echo $days_until_next_birthday; ?> 日です。</p>
</div>
</body>
</html>
あれ？ これってPHPのファイルですよね？
下の方にHTMLが書いてある･･･
いいところに気付きましたね。PHPはHTMLも記述することができます。
PHPは覚える必要はないですが、大まかに何をしているかは確認しましょう。
「result.php」は大きく分けて、「情報を受信する部分」、「処理をする部分」、「結果を出力する部分」に分かれています。
情報を受信する
サーバサイドの「result.php」は送られてくる情報を受信する必要があります。
受信するプログラムは次の部分です。
HTMLから送信された情報をPHPでは受信して利用します。
処理をする部分
受信した情報を使って、「現在の年齢」、「生まれた日の曜日の取得」、「次の誕生日までに日数」を求める処理をしています。
処理した結果である「年齢」、「生まれた日の曜日」、「誕生日までの日数」がどの変数に格納されているかを確認しましょう。
処理する部分のプログラム
結果を出力する部分
結果を出力する部分は、HTMLで記述されています。
これまでと異なるところが1つあります。それはHTMLの部分にPHPの処理結果を埋め込む処理があることです。
プログラムでは次の赤枠の部分です。
HTMLにPHPを埋め込むときは次のように記述します。
<?php echo 変数名; ?>
それでは、サンプルプログラムを表示してみましょう。
4.サンプルプログラムを表示する
サンプルプログラムを2つの方法で表示をしてみます。
「birthdayform.html」ファイルをダブルクリックで開く方法
HTMLファイルをダブルクリックするとHTMLファイルがWebブラウザで開きます。
「birthdayform.html」をダブルクリックしてください。Webブラウザが次のページを表示します。表示されたら、入力欄に情報を入力して送信ボタンを押してください。
実はこの方法でWebページを開くと正しくページが開きません。
送信ボタンを押すと、ほとんどのブラウザで次の2つの結果のどちらかになります。
出力結果パターン①
ダウンロードになりファイルダイアログが表示される
Webページを開いたときにダウンロードになる場合は、ブラウザやWebサーバがその形式のファイルを理解できない場合です。Raspberry PiのブラウザChromiumはダウンロードになります。
これは、理解できない形式ってこと？
はい、そういうことになります。理由は後ほど説明しますね。
出力結果パターン②
ページは表示されるが、PHPのプログラム部分やタグがそのまま出力される。
Webブラウザに表示された内容の一部抜粋です。
これは、PHPなどのサーバサイドのプログラムが理解できず、記述されている文字をそのまま出力をしています。
これもWebページではないってこと？
はい、そういうことになります。どうしてこのようなことになるのでしょうか？
理由を考える前に、もう一つの表示方法でWebページを見てみましょう。
もう一つの方法は正しく表示される方法です。
ブラウザにURLを指定して表示する方法
ブラウザにURLを指定して表示する方法は、次のようにWebブラウザのアドレス欄に次のように入力します。
Raspberry piのIPアドレス/ip0109kadai/birthdayform.html
例えば、IPアドレスが「192.168.0.24」であれば次のように入力します。
同じように入力欄にデータを入れて送信ボタンを押してみましょう。次のようなページが表示されます。
今度は結果が表示されている。なんでだろう･･･
不思議･･･
これはURLを指定するとWebサーバ経由でWebページを表示するためです。
違いはWebサーバを使って見ているか見ていないかです。
PHPはサーバサイドのプログラムなので、ApacheなどのWebサーバから呼びだされます。
URL経由の場合は、Webサーバを使ってWebページを表示しているので、PHPのプログラムはもWebサーバで処理されて、正しいHTMLとして結果が表示されます。
Webサーバ経由でWebページを見る場合
それに対し、HTMLファイルを直接開くとWebサーバを使わずにWebページを開きます。Webサーバを使わないためPHPなどのサーバサイドのプログラムの実行ができません。そのため、正しい結果にはなりません。
Webサーバを使わずWebページを見る場合
難しいけど…URLを指定してWebページを見ればいいってことですか？
はい！PHPなどを使うWebページは必ずURLを指定して見るようにしましょう！
難しい内容でしたが、完全に理解できなくても大丈夫です。Webページを作っていくと理解できてきます。
続いて、Webページの修正をしてみましょう。
5.年齢を表示しよう
今回のプログラムは、「名前」、「生年月日」を入力して「年齢」、「生まれた日の曜日」、「次の誕生日までの日数」を表示するプログラムですが、実行結果を見ると「年齢」が表示されていません。
現在の実行結果
入力フォームにデータを入力して送信ボタンを押すと上記の計算結果が表示されますが、年齢の表示が無いことがわかります。
本来の正しい結果は、年齢も表示されている必要があります。
正しい実行例
「年齢」を表示するために「result.php」の修正をします。
最初に、「result.php」を開きます。
PHPファイルを右クリックして、メニューから「TextEditor」を選びましょう。
正しい表示になるようにPHPファイルを修正しましょう。
修正をする箇所は「result.php」の50行目です。
50行目に年齢を表示する命令を考えて記述してみましょう。
記述する内容のヒントは次のとおりです。
ヒント1：年齢が格納されているのはPHPのどの変数でしたか？「result.php」の説明の「処理をする部分」を確認しましょう。
ヒント2：結果を出力するにはHTMLにPHPを埋め込みます。埋め込みの方法は、「result.php」の説明の「結果を出力する部分」を確認しましょう。
ヒントを読んでこのページの内容を確認すると、どのように記述すればよいか予想がつくと思います。
ただし、どのように記述すればよいかわからない場合は「記述内容を確認する」を開いて記述内容を確認しましょう。
記述内容を確認する
<p>あなたの年齢は <?php echo $age; ?> です。</p>
