【 PHP学習＃19 】バリデーション＃１　　FIREへの旅路 ♯469　

S.A.P.Studio

2022年7月17日 19:04

フォームの内容に間違いがないかなどを「検証」するのが、バリデーションです。

【前回までのコード】

<?php

session_start();


header( 'X-FRAME-OPTIONS:DENY' );

//スーパーグローバル変数
if ( !empty( $_SESSION ) ) {

 echo '<pre>';

 var_dump( $_SESSION );
 var_dump( $_POST );

  echo '</pre>';

}


function h( $str ) {
  return htmlspecialchars( $str, ENT_QUOTES, 'UTF-8' );
}


//入力画面=0、確認画面=1、完了画面=2 
//表示する内容を切り替える条件を設定する
$pageFlag = 0;

if ( !empty( $_POST[ 'btn_confirm' ] ) ) {
  $pageFlag = 1;
}

if ( !empty( $_POST[ 'btn_submit' ] ) ) {
  $pageFlag = 2;
}


?>

<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>
<body>
	
	

<!--入力画面-->
<?php if($pageFlag === 0) : ?>
	
<!--csrfトークンの生成-->
<?php
if ( !isset( $_SESSION['csrfToken'] ) ) {
  $csrfToken = bin2hex( random_bytes( 32 ) );
  $_SESSION['csrfToken'] = $csrfToken;
}
$token = $_SESSION['csrfToken']
?>
	
<form method="POST" action="input.php">
  氏名
  <input type="text" name="your_name" value="<?php if(!empty($_POST['your_name'])) {echo h($_POST['your_name']);} ?>">
  <br>
  メールアドレス
  <input type="text" name="email" value="<?php if(!empty($_POST['email'])) {echo h($_POST['email']);} ?>">
  <br>
  <input type="submit" name="btn_confirm" value="確認する">
	
	
<!--csrfトークンを仕込む-->
  <input type="hidden" name="csrf" value="<?php echo $token; ?>" >
	
		 
</form>
<?php endif; ?>
	
	

<!--確認画面-->
<?php if($pageFlag === 1) : ?>
	
<!--POSTのcsrfとSESSIONのcsrfがあっているか判定する-->
<?php if($_POST['csrf'] === $_SESSION['csrfToken']): ?>
	
<form method="POST" action="input.php">
  氏名 
	<?php echo h($_POST['your_name']);?> <br>
  メールアドレス
	<?php echo h($_POST['email']);?> <br>
  
  <!--戻るボタン-->
  <input type="submit" name="back" value="戻る">
  
  <!--送信ボタン-->
  <input type="submit" name="btn_submit" value="送信する">
  <input type="hidden" name="your_name" value="<?php echo h($_POST['your_name']);?>" >
  <input type="hidden" name="email" value="<?php echo h($_POST['email']);?>" >
	
	
  <!--$pageFlagが０から１に変わる時にcsrfの値も消えるので、保存しておく-->
  <input type="hidden" name="csrf" value="<?php echo h($_POST['csrf']);?>" >
</form>
	
<?php endif; ?>
	
<?php endif; ?>
	
	

<!--完了画面-->
<?php if($pageFlag === 2) : ?>

<!--POSTのcsrfとSESSIONのcsrfが一致しているか判定する-->
<?php if($_POST['csrf'] === $_SESSION['csrfToken']): ?>
送信が完了しました
	
<!--トークンを削除する-->
<?php unset($_SESSION['csrfToken']); ?>
	
<?php endif; ?>
<?php endif; ?>
	
</body>
</html>

【フォームの項目を追加】

前回までのフォームに、項目を追加します。
追加するのは、入力画面の箇所です。

メールアドレスにい続いて、

ホームページ
性別
年齢
問い合わせ内容
注意事項にチェック

の項目を追加して、以下のようなフォームに変更します。

▶︎ コード入力画面

<!--入力画面-->
<?php if($pageFlag === 0) : ?>

<!--csrfトークンの生成-->
<?php
if ( !isset( $_SESSION[ 'csrfToken' ] ) ) {
  $csrfToken = bin2hex( random_bytes( 32 ) );
  $_SESSION[ 'csrfToken' ] = $csrfToken;
}
$token = $_SESSION[ 'csrfToken' ]
?>
<form method="POST" action="input.php">
  氏名
  <input type="text" name="your_name" value="<?php if(!empty($_POST['your_name'])) {echo h($_POST['your_name']);} ?>">
	
  <br>
	
  メールアドレス
  <input type="text" name="email" value="<?php if(!empty($_POST['email'])) {echo h($_POST['email']);} ?>">
	
  <br>
	
  ホームページ
  <input type="url" name="url" value="<?php if(!empty($_POST['url'])) {echo h($_POST['url']);} ?>">
	
  <br>
	
  性別
  <input type="radio" name="gender" value="0">男性
  <input type="radio" name="gender" value="1">女性
	
  <br>
	
  年齢
  <select name="age">
	<option value="">選択してください</option>
	<option value="1">〜19歳</option>
	<option value="2">20歳〜29歳</option>
	<option value="3">30歳〜39歳</option>
	<option value="4">40歳〜49歳</option>
	<option value="5">50歳〜59歳</option>
	<option value="6">60歳〜</option>
  </select>
	
  <br>

  お問い合わせ内容
  <textarea name="contact">
	  <?php if(!empty($_POST['contact'])) {echo h($_POST['contact']);} ?>
  </textarea>

  <br>
	
  <input type="checkbox" name="caution" value="1">注意事項にチェックする
  
  <br>
	
  <input type="submit" name="btn_confirm" value="確認する">
  
  <!--csrfトークンを仕込む-->
  <input type="hidden" name="csrf" value="<?php echo $token; ?>" >
</form>
<?php endif; ?>

・ホームページの項目

type="URL"　です。
value　に php で入力内容が保持されるようにしています。

ホームページ
  <input type="url" name="url" value="<?php if(!empty($_POST['url'])) {echo h($_POST['url']);} ?>">

・性別の項目

input type = "radio" 　でラジオボタンを設置します。

  性別
  <input type="radio" name="gender" value="0">男性
  <input type="radio" name="gender" value="1">女性

・年齢の項目

<select> タグを使って、いくつかの項目から選択できるようにします。
選択項目は、<option>タグで作ります。

  年齢
  <select name="age">
	<option value="">選択してください</option>
	<option value="1">〜19歳</option>
	<option value="2">20歳〜29歳</option>
	<option value="3">30歳〜39歳</option>
	<option value="4">40歳〜49歳</option>
	<option value="5">50歳〜59歳</option>
	<option value="6">60歳〜</option>
  </select>

・お問い合わせ内容の項目

<textarea>タグを使います。
長文を入力することができます。
入力された文章が、valueになります。

  お問い合わせ内容
  <textarea name="contact">
	  <?php if(!empty($_POST['contact'])) {echo h($_POST['contact']);} ?>
  </textarea>

これで入力画面のフォームが完成です。

【確認画面の項目を追加】

▶︎ コード　確認画面

<!--確認画面-->
<?php if($pageFlag === 1) : ?>

<!--POSTのcsrfとSESSIONのcsrfがあっているか判定する-->
<?php if($_POST['csrf'] === $_SESSION['csrfToken']): ?>
<form method="POST" action="input.php">
	
  氏名 <?php echo h($_POST['your_name']);?> 
	
  <br>
	
  メールアドレス <?php echo h($_POST['email']);?> 
	
  <br>
	
  ホームページ<?php echo h($_POST['url']);?> 
	
  <br>
	
  性別
  <?php
	if($_POST['gender'] === '0'){echo '男性';}
	if($_POST['gender'] === '1'){echo '女性';}
  ?> 
	
  <br>
	
  年齢
  <?php
	if($_POST['age'] === '1'){echo '〜19歳';}
	if($_POST['age'] === '2'){echo '20歳〜29歳';}
	if($_POST['age'] === '3'){echo '30歳〜39歳';}
	if($_POST['age'] === '4'){echo '40歳〜49歳';}
	if($_POST['age'] === '5'){echo '50歳〜59歳';}
	if($_POST['age'] === '6'){echo '60歳〜';}
  ?> 
	
	
  <br>
	
  問い合わせ内容<?php echo h($_POST['contact']);?> 
	
  <br>
	

  
  <!--戻るボタン-->
  <input type="submit" name="back" value="戻る">
  
  <!--送信ボタン-->
  <input type="submit" name="btn_submit" value="送信する">
	
  <!--入力内容を保存-->
  <input type="hidden" name="your_name" value="<?php echo h($_POST['your_name']);?>" >
  <input type="hidden" name="email" value="<?php echo h($_POST['email']);?>" >
  <input type="hidden" name="url" value="<?php echo h($_POST['url']);?>" >
  <input type="hidden" name="gender" value="<?php echo h($_POST['gender']);?>" >
  <input type="hidden" name="age" value="<?php echo h($_POST['age']);?>" >
  <input type="hidden" name="contact" value="<?php echo h($_POST['contact']);?>" >
	
  
  <!--$pageFlagが０から１に変わる時にcsrfの値も消えるので、保存しておく-->
  <input type="hidden" name="csrf" value="<?php echo h($_POST['csrf']);?>" >
</form>
<?php endif; ?>
<?php endif; ?>

・追加コード

入力画面で追加した項目に、入力された内容内容が確認画面に反映されるようにコードを追加します。

・ホームページ項目

<?php echo h($_POST['url']);?>

POST通信で送信された、
'url'　の　入力内容＝バリュー（値）をechoします。

・性別の項目

  <?php
	if($_POST['gender'] === '0'){echo '男性';}
	if($_POST['gender'] === '1'){echo '女性';}
  ?>

'gender'　の value　は、
男性の場合は、'0'
女性の場合は、'1'

ですから、
if文で、'gendr'　が 0　か　１かを === で判定します。

'gender'　が '0'　と一致したら、'男性'　をechoします。
'gender'　が '1'　と一致したら、'女性'　をechoします。

・年齢の項目

  <?php
	if($_POST['age'] === '1'){echo '〜19歳';}
	if($_POST['age'] === '2'){echo '20歳〜29歳';}
	if($_POST['age'] === '3'){echo '30歳〜39歳';}
	if($_POST['age'] === '4'){echo '40歳〜49歳';}
	if($_POST['age'] === '5'){echo '50歳〜59歳';}
	if($_POST['age'] === '6'){echo '60歳〜';}
  ?>

'age'　の value　は 〜19歳　を選択した場合は、' 1 '　です。
このように、選択の年齢に応じて、1〜6がvalueに入ります。

このvalueを、if文で、判定をして条件分岐をして表示内容を変えます。

・お問い合わせ内容の項目

<?php echo h($_POST['contact']);?>

問い合わせ内容の項目は、<textarea>タグを使用しているので、
入力内容がvalueになります。

echoで$_POSTの連動配列のキーを'contact'と指定すれば、
そのvalueである、入力内容が表示されます。

ブラウザで表示するとこの通りです。

【値の保持】

入力内容の保持は行なっていますが、
性別・年齢の、項目は、戻るボタンで戻ると、再度選択する必要があります。

これを保持するために、if文を追加します。

▶︎ コード

<!--入力画面-->
<?php if($pageFlag === 0) : ?>

<!--csrfトークンの生成-->
<?php
if ( !isset( $_SESSION[ 'csrfToken' ] ) ) {
  $csrfToken = bin2hex( random_bytes( 32 ) );
  $_SESSION[ 'csrfToken' ] = $csrfToken;
}
$token = $_SESSION[ 'csrfToken' ]
?>
<form method="POST" action="input.php">
  氏名
  <input type="text" name="your_name" value="<?php if(!empty($_POST['your_name'])) {echo h($_POST['your_name']);} ?>">
  <br>
  メールアドレス
  <input type="text" name="email" value="<?php if(!empty($_POST['email'])) {echo h($_POST['email']);} ?>">
  <br>
  ホームページ
  <input type="url" name="url" value="<?php if(!empty($_POST['url'])) {echo h($_POST['url']);} ?>">
  <br>
  性別
  <input type="radio" name="gender" value="0"
  <?php if(isset($_POST['gender']) && $_POST['gender'] ===  '0') { echo 'checked';} ?>>男性
  
  <input type="radio" name="gender" value="1"
  <?php if(isset($_POST['gender']) && $_POST['gender'] ===  '1') { echo 'checked';} ?>>女性 
	
  <br>
	
  年齢
  <select name="age">
    <option value="">選択してください</option>
    <option value="1" <?php if(isset($_POST['age']) && $_POST['age'] === '1' )  { echo 'selected'; } ?>>〜19歳</option>
    <option value="2" <?php if(isset($_POST['age']) && $_POST['age'] === '2' )  { echo 'selected'; } ?>>20歳〜29歳</option>
    <option value="3" <?php if(isset($_POST['age']) && $_POST['age'] === '3' )  { echo 'selected'; } ?>>30歳〜39歳</option>
    <option value="4" <?php if(isset($_POST['age']) && $_POST['age'] === '4' )  { echo 'selected'; } ?>>40歳〜49歳</option>
    <option value="5" <?php if(isset($_POST['age']) && $_POST['age'] === '5' )  { echo 'selected'; } ?>>50歳〜59歳</option>
    <option value="6" <?php if(isset($_POST['age']) && $_POST['age'] === '6' )  { echo 'selected'; } ?>>60歳〜</option>
  </select>
  <br>
  お問い合わせ内容
  <textarea name="contact">
	  <?php if(!empty($_POST['contact'])) {echo h($_POST['contact']);} ?>
  </textarea>
  <br>
  <input type="checkbox" name="caution" value="1">
  注意事項にチェックする <br>
  <input type="submit" name="btn_confirm" value="確認する">
  
  <!--csrfトークンを仕込む-->
  <input type="hidden" name="csrf" value="<?php echo $token; ?>" >
</form>
<?php endif; ?>

・性別の項目

性別
  <input type="radio" name="gender" value="0"
  <?php if(isset($_POST['gender']) && $_POST['gender'] ===  '0') { echo 'checked';} ?>>男性
  
  <input type="radio" name="gender" value="1"
  <?php if(isset($_POST['gender']) && $_POST['gender'] ===  '1') { echo 'checked';} ?>>女性

<input>タグの中にPHPのif文を追加ています。

<?php if(isset($_POST['gender']) && $_POST['gender'] ===  '0') { echo 'checked';} ?>

もし(if)
$_POSTのキー'gender'の値が
セットされていて (isset)

かつ(&&)

$_POSTのキー'gender'の値が
'0'　と　一致(===)　であった場合

'checked'　を echo する

というコードです。

<input>タグないに、checked と書くと、その項目に、チェックが入る状態になります。
ラジオボタンであれば、選択された状態になります。

・年齢の項目

年齢
  <select name="age">
    <option value="">選択してください</option>
    <option value="1" <?php if(isset($_POST['age']) && $_POST['age'] === '1' )  { echo 'selected'; } ?>>〜19歳</option>
    <option value="2" <?php if(isset($_POST['age']) && $_POST['age'] === '2' )  { echo 'selected'; } ?>>20歳〜29歳</option>
    <option value="3" <?php if(isset($_POST['age']) && $_POST['age'] === '3' )  { echo 'selected'; } ?>>30歳〜39歳</option>
    <option value="4" <?php if(isset($_POST['age']) && $_POST['age'] === '4' )  { echo 'selected'; } ?>>40歳〜49歳</option>
    <option value="5" <?php if(isset($_POST['age']) && $_POST['age'] === '5' )  { echo 'selected'; } ?>>50歳〜59歳</option>
    <option value="6" <?php if(isset($_POST['age']) && $_POST['age'] === '6' )  { echo 'selected'; } ?>>60歳〜</option>
  </select

性別の項目と同様に、<input>タグないに、if文を追加して、
selected　を echoするようにコードを書きます。

【次回へ続く】

今回は、ここまで！

次回は、バリデーションをやります！！

この記事が気に入ったらサポートをしてみませんか？

【 PHP学習 ＃19 】 バリデーション＃１ FIREへの旅路 ♯469

【 前回までのコード 】

【 フォームの項目を追加 】

▶︎ コード 入力画面

・ ホームページの項目

・ 性別の項目

・ 年齢の項目

・お問い合わせ内容の項目

【 確認画面の項目を追加 】

▶︎ コード 確認画面

・ 追加コード

・ホームページ項目

・ 性別の項目

・ 年齢の項目

・ お問い合わせ内容の項目

【 値の保持 】

▶︎ コード

・ 性別の項目

・ 年齢の項目

【 次回へ続く 】

【 PHP学習＃19 】バリデーション＃１　　FIREへの旅路 ♯469　

【前回までのコード】

【フォームの項目を追加】

▶︎ コード入力画面

・ホームページの項目

・性別の項目

・年齢の項目

【確認画面の項目を追加】

▶︎ コード　確認画面

・追加コード

・性別の項目

・年齢の項目

・お問い合わせ内容の項目

【値の保持】

・性別の項目

・年齢の項目

【次回へ続く】