お問い合わせフォーム2

今回は、前回作成した「入力画面」「確認画面」「完了画面」を状況に応じて、
表示する画面を切り替えられるようにし、送信した内容をデータベースに保存できるようにします。

db_app/form2/study内にindex.phpを作成し、以下のコードを記述してください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>

<body>
  <h1>お問い合わせ</h1>
  <form action="index.php" method="POST">
    <table>
      <tr>
        <th>お名前</th>
        <td><input type="text" name="name" /></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="email" name="email" /></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><textarea name="body"></textarea></td>
      </tr>
      <tr>
        <td><button name="state" value="confirm">確認画面へ</button></td>
      </tr>
    </table>
  </form>

  <h1>お問い合わせ内容</h1>
  <form action="index.php" method="POST">
    <table>
      <tr>
        <th>お名前</th>
        <td><input type="text" name="name" value=<?php echo $_POST["name"] ?> readonly /></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="email" name="email" value=<?php echo $_POST["email"] ?> readonly /></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><textarea name="body" readonly><?php echo $_POST["body"] ?></textarea></td>
      </tr>
      <tr>
        <td><button onClick="history.back()">戻る</button></td>
        <td><button name="state" value="submit">送信</button></td>
      </tr>
    </table>
  </form>

  <h1>お問い合わせありがとうございました</h1>
  <table>
    <tr>
      <th>お名前</th>
      <td><?php echo $_POST["name"] ?></td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td><?php echo $_POST["email"] ?></td>
    </tr>
    <tr>
      <th>お問い合わせ内容</th>
      <td><?php echo $_POST["body"] ?></td>
    </tr>
  </table>
  <p>上記内容でお問い合わせが完了しました</p>
  <a href="index.php">お問い合わせフォームに戻る</a>
</body>

</html>

画面を切り替えられるようにしよう

画面を切り替える方法はいくつかありますが、今回は、それぞれの画面を数字で管理するようにします。

入力画面・・・0
確認画面・・・1
完了画面・・・2

0の時、入力画面を表示
1の時、確認画面を表示
2の時、完了画面を表示

画面の切り替えは何となくif文で実装できそうな気がしてきましたね！
早速、if文で画面を切り替えられるように実装してみましょう。

<?php
$state = 0;
?>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>

<body>
  <?php if ($state === 0) : ?>
    <h1>お問い合わせ</h1>
    <form action="index.php" method="POST">
      <table>
        <tr>
          <th>お名前</th>
          <td><input type="text" name="name" /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input type="email" name="email" /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea name="body"></textarea></td>
        </tr>
        <tr>
          <td><button name="state" value="confirm">確認画面へ</button></td>
        </tr>
      </table>
    </form>
  <?php elseif ($state === 1) : ?>
    <h1>お問い合わせ内容</h1>
    <form action="index.php" method="POST">
      <table>
        <tr>
          <th>お名前</th>
          <td><input type="text" name="name" value=<?php echo $_POST["name"] ?> readonly /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input type="email" name="email" value=<?php echo $_POST["email"] ?> readonly /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea name="body" readonly><?php echo $_POST["body"] ?></textarea></td>
        </tr>
        <tr>
          <td><button onClick="history.back()">戻る</button></td>
          <td><button name="state" value="submit">送信</button></td>
        </tr>
      </table>
    </form>
  <?php elseif ($state === 2) : ?>
    <h1>お問い合わせありがとうございました</h1>
    <table>
      <tr>
        <th>お名前</th>
        <td><?php echo $_POST["name"] ?></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><?php echo $_POST["email"] ?></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><?php echo $_POST["body"] ?></td>
      </tr>
    </table>
    <p>上記内容でお問い合わせが完了しました</p>
    <a href="index.php">お問い合わせフォームに戻る</a>
  <?php endif; ?>
</body>

</html>

プレビューしてお問い合わせフォームの入力画面のみ表示されていれば成功です！
$stateの値を変更して、確認画面と完了画面も同様に表示できるか確認してみましょう。

if文を使用することで画面を切り替えられるようになりましたが、
現段階ではフォームを送信しても画面が切り替わってくれません。
今回はフォームで送信した内容を元に、自動で画面が切り替わるようにしていきます。

まずはindex.phpを以下のように修正してください。

<?php
$state = 0;

print_r($_POST);

if (array_key_exists("state", $_POST)) {
  if ($_POST["state"] === "confirm") {
    $state = 1;
  } elseif ($_POST["state"] === "submit") {
    $state = 2;
  }
} else {
  $state = 0;
}
?>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>

<body>
  <?php if ($state === 0) : ?>
    <h1>お問い合わせ</h1>
    <form action="index.php" method="POST">
      <table>
        <tr>
          <th>お名前</th>
          <td><input type="text" name="name" /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input type="email" name="email" /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea name="body"></textarea></td>
        </tr>
        <tr>
          <td><button name="state" value="confirm">確認画面へ</button></td>
        </tr>
      </table>
    </form>
  <?php elseif ($state === 1) : ?>
    <h1>お問い合わせ内容</h1>
    <form action="index.php" method="POST">
      <table>
        <tr>
          <th>お名前</th>
          <td><input type="text" name="name" value=<?php echo $_POST["name"] ?> readonly /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input type="email" name="email" value=<?php echo $_POST["email"] ?> readonly /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea name="body" readonly><?php echo $_POST["body"] ?></textarea></td>
        </tr>
        <tr>
          <td><button onClick="history.back()">戻る</button></td>
          <td><button name="state" value="submit">送信</button></td>
        </tr>
      </table>
    </form>
  <?php elseif ($state === 2) : ?>
    <h1>お問い合わせありがとうございました</h1>
    <table>
      <tr>
        <th>お名前</th>
        <td><?php echo $_POST["name"] ?></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><?php echo $_POST["email"] ?></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><?php echo $_POST["body"] ?></td>
      </tr>
    </table>
    <p>上記内容でお問い合わせが完了しました</p>
    <a href="index.php">お問い合わせフォームに戻る</a>
  <?php endif; ?>
</body>

</html>

array_key_existsメソッドは第一引数に指定したキーが、第二引数に指定した配列(連想配列)内に存在するかどうかを判定してくれます。

index.phpを実行したとき、まず始めに$_POST内にstateというキーが存在するかどうかを判定します。
index.phpが表示された段階では当然、送信(POST)していないので$_POSTは空になります。
そのため、13行目が実行され$stateの値が0になるので入力画面が表示されます。

お問い合わせフォームに以下の内容を入力して送信してください。

フォームを送信すると、今度は$_POSTに値が入った状態でindex.phpが実行されます。
この時、$_POST内にstateというキーが存在するので、今度はif文がtrueの時の処理を実行します。
7,9行目のif文は$_POST内のstateというキーにconfirmもしくはsubmitのどちらかのバリューで条件分岐するように設定しています。
バリューがconfirmの場合は$stateの値を1、submitの場合は$stateの値を2という風にすることで画面を切り替えるようにしています。

これでようやく画面の切り替えができるようになりました。
次回はPDOを使用するので不安な方は復習してきましょう！