あーる学習帳

自分が勉強したことや気になることなど、99%自分用です。コードを書いてるのでPCから閲覧を推奨。

PHP実習：POSTでデータを渡してみよう&if文や論理演算子

プログラミング HTML PHP

いよいよPHPの機能を使ったものを作れるということで、わくわくしながら帰ってまいりました。早速作っていきます。

 

第3章-05　実習

送信フォームからデータを送信し、画面に表示する

★今回の要件定義

  • 名前と趣味を入力するフォームを用意する
  • 確認ページにデータを渡して表示する
  • 確認ページから登録ボタンだけで完了ページにデータを渡す

(仕事じゃちゃんと要件定義していない仕様書がバンバン来るので新鮮な気持ちだよ)

 

★送信フォームを作成

以下のコードでまずは見出しと説明文だけ作成(index.php)。

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>練習フォーム</h1>
　　<p>次のページへデータを渡してみよう</p>
　　<!-- この下にフォームを追加-->
　</body>
</html>

f:id:R_de_aru:20180619192852p:plain

<!-- この下にフォームを追加-->の下で入力フォームなどを作っていく。

まず、以下のように<form>タグを追加。

<!-- この下にフォームを追加-->
<form action="./confirm.php" method="POST">

</form>

actionで書いたファイル名が、後で追加する送信ボタンを押したときに飛んでいく先のページになる。「./」を文頭に書くと「このファイルと同じフォルダ(ディレクトリ)内の」という意味になる。

methodで指定したPOSTが次のページへデータを渡す方法であり、POSTを指定するとブラウザのスクリーンに表示せずデータを渡すことができる。(他にもGETという方法があるがこれは後日)。

なお、この追加ではブラウザの表示には変化はない。

次に、<form>タグの中に入力欄のコードを書く。

<form action="./confirm.php" method="POST">
　<label>お名前</label>
　<input type="text" name="user_name">
　<label>趣味</label>
　<input type="text" name="hobby">
</form> 

<input>タグは文字を入力するフォームを用意したり、送信ボタンを表示したりすることができる。typeでは「text」を指定し、文字列を入力できるようにする。

送信先で受け取るための名前が必要になるので、nameを「user_name」、「hobby」とそれぞれ設定しておく。

f:id:R_de_aru:20180619193918p:plain

一気にそれっぽくなった。

最後に、送信ボタンを追加する。

<form action="./confirm.php" method="POST">
　<label>お名前</label>
　<input type="text" name="user_name">
　<label>趣味</label>
　<input type="text" name="hobby">
　<input type="submit" value="確認する">
</form> 

typeをsubmitとすると送信ボタンができる。valueはボタンに表示する文字を指定するので、今回は「確認する」と指定。

f:id:R_de_aru:20180619194259p:plain

一気にそれっぽくなったパート2。何も書き込まずに「確認する」ボタンを押すと…

f:id:R_de_aru:20180619194415p:plain

ボタンを押して飛ぶ対象となっている「confirm.php」が見つからないというエラーが出る。いわゆる404エラー。

続いて、今ないよ！と言われているconfirm.phpを作成していく。

とりあえず以下のようにhtmlのタグを書いていく(confirm.php)。

<?php
　// POSTされてきたデータを取得する
?>

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>受信ページ</h1>
　　<p>あなたの名前は〇〇さんです。</p>
　　<p>趣味は△△です。</p>
　　<p>こちらの情報でよろしいですか?</p>
　　<form action="./complete.php" method="POST">
　　　<input type="submit" value="登録">
　　</form>
　</body>
</html>

とりあえずはこんなページができる。

f:id:R_de_aru:20180619195200p:plain

ここからPOSTで送られてきたデータをセットしていく。

上のコードのPHPの箇所を書き換え。

<?php
　// POSTされてきたデータを取得する
　$user_name=$_POST['user_name'];
　$hobby=$_POST['hobby'];

　//本当に取得できているか確認する

　var_dump($user_name);

　var_dump($hobby);
?> 

$_POSTとは「スーパーグローバル変数」であり、送信ボタンを押した瞬間に自動で作成される。inputのnameで指定した名前を使って値を取得。

index.phpのinputタグでname='user_name'と指定したとき、受け取り方は$_POST['user_name']となる。このような$_POST[]のかっこ内の値をキーといい、フォームであらかじめ設定しておく必要がある。

なお、今回は同じファイル内にphpとhtmlが共存している。phpの終わりのタグである?>を忘れないように。

とりあえず動作確認。入力してみる。

f:id:R_de_aru:20180619195829p:plain

確認ボタンを押すと…

f:id:R_de_aru:20180619200139p:plain

とりあえず$_POSTで値が取れているのがわかったので、var_dumpの部分はコメントアウトしておこう。

では、html内に$_POSTで取得した内容を出していく…前に問題が。confirm.phpのフォームには入力欄がないので、データが渡せない。その問題についても解決法があるので、以下のようにhtml部分を書き換える。

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>受信ページ</h1>
　　<p>あなたの名前は<?php echo $user_name; ?>さんです。</p>
　　<p>趣味は<?php echo $hobby; ?>です。</p>
　　<p>こちらの情報でよろしいですか?</p>
　　<form action="./complete.php" method="POST">
　　　<input type="hidden" name="user_name" value="<?php echo $user_name ;?>">
　　　<input type="hidden" name="hobby" value="<?php echo $hobby ;?>">
　　　<input type="submit" value="登録">
　　</form>
　</body>
</html>

このように、htmlの中に一部だけプログラムを書き込むことができるのがphpの特徴である。

また、次のcomplete.phpに値が渡せないのでは…という懸念もinputタグでhiddenというtypeを使うことで解決している。これを指定することで、ブラウザに表示することなく値を渡すことができる。渡すデータはvalueで指定するので、上のような書き方になる。ここまで修正を加えてテストで動かし、同時にGoogleChromeのデベロッパーツールで確認してみる。

f:id:R_de_aru:20180619201431p:plain

コード上でinputタグに値が取得できていることが分かる。

最後に、完了ページであるcomplete.phpを作成する(一般的にはこの後にデータベースへの登録も入る)。実習ではこのページを一人で作ることになっているので、本に頼らず一気に仕上げていく。

<?php
　$user_name=$_POST['user_name'];
　$hobby=$_POST['hobby'];
?>

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>登録完了！</h1>
　　<p>こんにちは、<?php echo $user_name;?>さん!!</p>
　　<p>趣味は<?php echo $hobby;?>ですね。登録しました!!</p>
　</body>
</html>

このコードを書き、confirm.phpから呼び出すとこうなった。この課題は完成!!

f:id:R_de_aru:20180619202307p:plain

しかし、これだけでは面白くないのでさらに以下の機能を追加。

  • 確認ページに「登録へ戻る」ボタンをつける。押した場合はindex.phpに入力した内容を保持したまま戻る(登録ページの入力欄の初期値が空白ではなくなる)。
  • 完了ページに「登録を続ける」ボタンをつける。押した場合はindex.phpに戻る(変数の保持はしない)。

まず、confirm.phpのhtml部分を以下のように書き換え。

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>受信ページ</h1>
　　<p>あなたの名前は<?php echo $user_name; ?>さんです。</p>
　　<p>趣味は<?php echo $hobby; ?>です。</p>
　　<p>こちらの情報でよろしいですか?</p>
　　<form action="./complete.php" method="POST">
　　　<input type="hidden" name="user_name" value="<?php echo $user_name ;?>">
　　　<input type="hidden" name="hobby" value="<?php echo $hobby ;?>">
　　　<input type="submit" value="登録">
　　</form>
　　<form action="./index.php" method="POST">
　　　<input type="hidden" name="user_name" value="<?php echo $user_name ;?>">
　　　<input type="hidden" name="hobby" value="<?php echo $hobby ;?>">
　　　<input type="submit" value="登録へ戻る">
　　</form>
　</body>
</html> 

 すると、確認ページが以下のようになる。

f:id:R_de_aru:20180619202953p:plain

このまま「登録へ戻る」を押すとindex.phpへ戻るが、入力欄は空白の状態になる。そこで、index.phpの先頭に次のphpを加える。

<?php
　if ($_POST['user_name']!=='') {
　　$user_name=$_POST['user_name'];
　} else {
　　$user_name='';
　}
　if ($_POST['hobby']!=='') {
　　$hobby=$_POST['hobby'];
　} else {
　　$hobby='';
　　}
?> 

こうすることで、$_POSTに何か値があればそれを変数に入れ、なければ変数は空白とするという命令になる。なお、phpのif文などで使う比較演算子は以下の通り。

A>B→AはBより大きい

A<B →AはBより小さい(未満)

A>=B→AはB以上

A<=B→AはB以下

A==B→AとBは等しい(値だけを比較して)

A===B→AとBは等しい(値とデータ型を比較して)

A!=B→AとBは等しくない(値だけを比較して)

A!==B→AとBは等しくない(値とデータ型を比較して)

そして、html部を以下のように書き換える。

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>練習フォーム</h1>
　　<p>次のページへデータを渡してみよう</p>
　　<form action="./confirm.php" method="POST">
　　　<label>お名前</label>
　　　<input type="text" name="user_name" value="<?php echo $user_name;?>">
　　　<label>趣味</label>
　　　<input type="text" name="hobby" value='<?php echo $hobby; ?>'>
　　　<input type="submit" value="確認する">
　　</form>
　</body>
</html> 

inputタグの中でvalueを指定したら初期値になるのでは…？という目論見が上手くいった。

最後に、complete.phpからindex.phpへ飛ぶボタンを作成する。complete.phpのhtml部を以下のように書き換え。

<html>
　<head>
　　<meta charset="utf-8">
　</head>
　<body>
　　<h1>登録完了！</h1>
　　<p>こんにちは、<?php echo $user_name;?>さん!!</p>
　　<p>趣味は<?php echo $hobby;?>ですね。登録しました!!</p>
　　<form action="./index.php" method="POST">
　　　<input type="submit" value="登録へ戻る">
　　</form>
　</body>
</html>

これでcomplete.phpで$_POSTを設定しない状態でindex.phpを呼び出せたので、呼び出したindex.phpの入力欄が空白の状態だった。成功。

問題があるとすれば、これらのオリジナル要素をスクショで紹介してもかなり伝わりづらいということ。画面の動画を撮ってgifにして貼り付ければ伝わるとは思うけど今の技術では無理だ…。

とりあえず、オリジナル要素を加えた状態で通常の動作とオリジナルの動作のどちらもOKでした。これにて実習終了!!

 

第4章-01

if文について、さっきもやったけど再度復習。

<?php

　$language = 1; // 変数初期化

　if ($language ===1){ //変数に格納されたデータと比較

　　echo 'こんにちは';

　} elseif ($language===2) { // 追加条件のelseif

　　echo 'Hello';

　} elseif ($language === 3) {

　　echo 'Bonjour';

　} else { // その他を表すelse

　　echo '入力した数値が違います'

　}

?> 

なお、この本によると比較演算子「==」は文字列の'True'と論理値のTrueを同じものと判定するセキュリティ上の弱さがあるらしいので推奨しないとのこと。「===」を使ってデータ型と値を比較するのがよい。

第4章-02

比較演算子、通算3回目のまとめ。

A>B→AはBより大きい

A<B →AはBより小さい(未満)

A>=B→AはB以上

A<=B→AはB以下

A==B→AとBは等しい(値だけを比較して)

A===B→AとBは等しい(値とデータ型を比較して)

A!=B→AとBは等しくない(値だけを比較して)

A!==B→AとBは等しくない(値とデータ型を比較して)

if文は指定した条件に当てはまる場合はTrue、当てはまらない場合はFalseを返す性質があり、値を返すことを「return」という。

第4章-02　練習問題

  • $ageに23などの数字を代入、20歳未満なら「未成年です」、20歳以上なら「成人です」と表示させる

<?php

　// 解答
　$age=23;
　if ($age<20) {
　　echo "未成年です。";
　} else{
　　echo "成人です。";
　} 

 第4章-03

論理演算子についてまとめ。

&&：かつ

例： $score>=80 && $score<100 ($scoreが80以上かつ100未満) 

||：もしくは

例：$score>=80 || $score<=50 ($scoreが80以上もしくは50以下) 

!：否定

例：!$score=80 ($scoreが80ではなかったら 

また、数値をランダムに変数へ代入するには以下のようにする。

 <?php
　$score=mt_rand(1,100);
　echo '得点は'.$score.'点です。';
　if ($score>=0 && $score<60) {
　　echo "平均点以下です。";
　} elseif ($score>=60 && $score<80){
　　echo "平均点を超えています。";
　} elseif ($score>=80 && $score<100) {
　　echo "優秀な点数です。";
　} elseif ($score===100) {
　　echo "満点です!!";
　} else{
　　echo "入力した数値が違います。";
　}

このようにmt_rand()を使い、第1引数に最小値、第2引数に最大値を指定することでその範囲内でランダムに数値を出力できる(組み込み関数)。

第4章-04

入れ子(ネスト)を使い、if文をより複雑にできる。これは仕事で扱うほかの言語でも同じような書き方をするので割愛。書くときはタブで見やすくしていこう。

 

明日は第4章の実習、「バリデーション機能を作る」というところをやります。