LoginSignup
2
0
@takadayo

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

Last updated at Posted at 2024-03-23

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

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

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

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

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

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)の中に入力画面を作成

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)。

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;`に変わるようにする。

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"
}
送信が完了しました。

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

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属性を記述する必要がある。

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>

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0