PHPでフォーム入力、確認、完了画面の学習(FWなし)

# 1. 入力画面、確認画面、完了画面のフラグを定義する

$pageFlagは下記のように定義してみる

入力画面のフラグ : $pageFlag = 0;　

確認画面のフラグ : $pageFlag = 1;

完了画面のフラグ : $pageFlag = 2;　

```php:form.php
<?php
$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        入力画面
    <?php endif; ?>
    
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        確認画面
    <?php endif; ?>
    
    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        完了画面
    <?php endif; ?>
</body>

</html>
```

# フォーム入力画面の作成をする

入力画面($pageFlag === 0)の中に入力画面を作成

```php:form.php
<?php
// POST送信されているかの確認
if (!empty($_POST)) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        確認画面
    <?php endif; ?>
    
    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        完了画面
    <?php endif; ?>
    
    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        <form method="POST" action="form.php">
            氏名
            <input type="text" name="name">
            <br>
            メールアドレス
            <input type="email" name="email">
            <br>
            <!-- btn_confirm(確認ページ)に入力データが送信されるようにする -->
            <input type="submit" name="btn_confirm" value="確認する">
        </form>
    <?php endif; ?>
</body>

</html>
```

POST送信が成功していれば下記の結果になる

```
array(3) {
  ["name"]=>
  string(3) "abc"
  ["email"]=>
  string(13) "test@test.com"
  ["btn_confirm"]=>
  string(12) "確認する"
}
```

# 確認画面に切り変わり、入力画面が表示されるようにする

1. `$_POST['btn_confirm']`に入力値が空ではなければ `$pageFlag = 0`から
`$pageFlag = 1`(確認画面)に変更されるようにする。

2. 確認画面($pageFlag === 1)のセクションにフォームから送信されたデータを取得できるようにする。

3. 確認画面からの送信ボタンを押下時に完了画面にデータが送信されるようにする(btn_submit)。

```php:form.php
<?php
// POST送信されているかの確認
if (!empty($_POST)) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)

if (!empty($_POST['btn_confirm'])) {
    $pageFlag = 1;
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        <form method="POST" action="form.php">
            氏名
            <?php echo $_POST['name']; ?>
            <br>
            メールアドレス
            <?php echo $_POST['email']; ?>
            <br>
            <!-- 完了ページへデータを送信する為のボタン($pageFlag = 2) -->
            <input type="submit" name="btn_submit" value="送信する">
            <!-- 各入力データの保持 hiddenの使用 -->
            <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
            <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
        </form>
    <?php endif; ?>
    
    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        送信が完了しました。
    <?php endif; ?>
    
    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        <form method="POST" action="form.php">
            氏名
            <input type="text" name="name">
            <br>
            メールアドレス
            <input type="email" name="email">
            <br>
            <!-- btn_confirm(確認ページ)に入力データが送信されるようにする -->
            <input type="submit" name="btn_confirm" value="確認する">
        </form>
    <?php endif; ?>
</body>

</html>
```

※ `POST送信とGET送信`は一回切りで送信情報は`消去`される為、`name属性`で `hidden`を使用するようにする。

# 送信ボタン押下後、　確認画面から完了ページに遷移

確認画面では、`$pageFlag = 2;` になっているので `送信`ボタン押下後は
`$_POST['btn_submit']` が空でなければ、 $pageFlag = 2;`に変わるようにする。

```php:form.php
<?php
// POST送信されているかの確認
if (!empty($_POST)) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)

// $_POST['btn_confirm']が空でなければ $psteFlag = 1 に切り替える
if (!empty($_POST['btn_confirm'])) {
    $pageFlag = 1;
}

// $_POST['btn_submit']が空でなければ $psteFlag = 2 に切り替える
if (!empty($_POST['btn_submit'])) {
    $pageFlag = 2;
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        <form method="POST" action="form.php">
            氏名
            <?php echo $_POST['name']; ?>
            <br>
            メールアドレス
            <?php echo $_POST['email']; ?>
            <br>
            <!-- 完了ページへデータを送信する為のボタン($pageFlag = 2) -->
            <input type="submit" name="btn_submit" value="送信する">
            <!-- 各入力データの保持 hiddenの使用 -->
            <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
            <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
        </form>
    <?php endif; ?>

    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        送信が完了しました。
    <?php endif; ?>

    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        <form method="POST" action="form.php">
            氏名
            <input type="text" name="name">
            <br>
            メールアドレス
            <input type="email" name="email">
            <br>
            <!-- btn_confirm(確認ページ)に入力データが送信されるようにする -->
            <input type="submit" name="btn_confirm" value="確認する">
        </form>
    <?php endif; ?>
</body>

</html>
```

送信後に下記のように表示されれば問題なしです。

```:browser
array(3) {
  ["btn_submit"]=>
  string(12) "送信する"
  ["name"]=>
  string(3) "abc"
  ["email"]=>
  string(24) "test@test.com"
}
送信が完了しました。
```

# 確認画面に戻るボタンを設置し、入力画面に戻り編集できるようにする

```php:form.php
<?php
// POST送信されているかの確認
if (!empty($_POST)) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)

// $_POST['btn_confirm']が空でなければ $psteFlag = 1 に切り替える
if (!empty($_POST['btn_confirm'])) {
    $pageFlag = 1;
}

// $_POST['btn_submit']が空でなければ $psteFlag = 2 に切り替える
if (!empty($_POST['btn_submit'])) {
    $pageFlag = 2;
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        <form method="POST" action="form.php">
            氏名
            <?php echo $_POST['name']; ?>
            <br>
            メールアドレス
            <?php echo $_POST['email']; ?>
            <br>
            <!-- name属性の 'back' は $pageFlagの定義がないので 初期設定の '$pageFlag = 0;' になる -->
            <input type="submit" name="back" value="戻る">
            <!-- 完了ページへデータを送信する為のボタン($pageFlag = 2) -->
            <input type="submit" name="btn_submit" value="送信する">
            <!-- 各入力データの保持 hiddenの使用 -->
            <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
            <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
        </form>
    <?php endif; ?>

    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        送信が完了しました。
    <?php endif; ?>

    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        <form method="POST" action="form.php">
            氏名
            <input type="text" name="name">
            <br>
            メールアドレス
            <input type="email" name="email">
            <br>
            <!-- btn_confirm(確認ページ)に入力データが送信されるようにする -->
            <input type="submit" name="btn_confirm" value="確認する">
        </form>
    <?php endif; ?>
</body>

</html>
```
しかし、このままだと `戻る`ボタンを押下後、入力ページには戻るが、各入力inputには、入力されたデータが表示されない。
入力されている情報を確認画面から表示させるには、 `$pageFlage = 0;`セクションの `<input>`にvalue属性を記述する必要がある。

```php:form.php
<?php
// POST送信されているかの確認
if (!empty($_POST)) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

$pageFlag = 0; // 入力画面のフラグ(Topのフォーム画面)

// $_POST['btn_confirm']が空でなければ $psteFlag = 1 に切り替える
if (!empty($_POST['btn_confirm'])) {
    $pageFlag = 1;
}

// $_POST['btn_submit']が空でなければ $psteFlag = 2 に切り替える
if (!empty($_POST['btn_submit'])) {
    $pageFlag = 2;
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- フォームに入力された確認画面の作成 -->
    <?php if ($pageFlag === 1) : ?>
        <form method="POST" action="form.php">
            氏名
            <?php echo $_POST['name']; ?>
            <br>
            メールアドレス
            <?php echo $_POST['email']; ?>
            <br>
            <!-- name属性の 'back' は $pageFlagの定義がないので 初期設定の '$pageFlag = 0;' になる -->
            <input type="submit" name="back" value="戻る">
            <!-- 完了ページへデータを送信する為のボタン($pageFlag = 2) -->
            <input type="submit" name="btn_submit" value="送信する">
            <!-- 各入力データの保持 hiddenの使用 -->
            <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
            <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
        </form>
    <?php endif; ?>

    <!-- 確認画面から送信後に遷移する完了画面の作成 -->
    <?php if ($pageFlag === 2) : ?>
        送信が完了しました。
    <?php endif; ?>

    <!-- フォーム入力画面を作成する(TOP) -->
    <?php if ($pageFlag === 0) : ?>
        <form method="POST" action="form.php">
            氏名
            <!-- もし $_POST['name']が空でなければ、入力データを表示 -->
            <input type="text" name="name" value="<?php if (!empty($_POST['name'])) {
                echo $_POST['name'];
            } ?>">
            <br>
            メールアドレス
            <!-- もし $_POST['email']が空でなければ、入力データを表示 -->
            <input type="email" name="email" value="<?php if (!empty($_POST['email'])) {
                                                        echo $_POST['email'];
                                                    } ?>">
            <br>
            <!-- btn_confirm(確認ページ)に入力データが送信されるようにする -->
            <input type="submit" name="btn_confirm" value="確認する">
        </form>
    <?php endif; ?>
</body>

</html>
```

以上、自分なりに学習したことの振り返りでした。
今度はフォームセキュリティ対策の学習振り返りをしたいと思います。
何かご指摘がありましたらよろしくお願いします。