LoginSignup
28
27

More than 5 years have passed since last update.

フォームの作り方

Last updated at Posted at 2016-01-05

はじめに

何より概要とかフローを伝えたかったのでざっくりしたタイトルにしました。
各データを用意する処理までで、HTMLとか表示方法については書いてません。

仕様

入力ページ:ユーザーが回答を入力するページ

  • 入力済みの内容は自動で入力
  • エラーがあればメッセージを表示

確認ページ:回答を表示してユーザーが確認するページ

  • 回答をバリデーションチェック
  • エラーがあれば入力ページに遷移

完了ページ:回答が確定したことを知らせるページ

  • 完了メッセージを表示

サーバーサイドの動きを図で表してみると…

フォームキャプチャ.PNG

実装

データの受け渡しはPOSTとセッションを使う。
セッション内に以下のような配列を作れればOK。

エラーなし
array(
    "answers" => array(
        "name" => "suzuki",
        "age"  => 21
    ),
    "token" => "fjid8fj50dkg84zh73jhg834jgfergsq";
);
エラーあり
array(
    "answers" => array(
        "name" => "suzukiichiro"
    ),
    "errors" => array(
        "name_error" => "名前は10文字以内で入力してください",
        "age_error"  => "年齢を入力してください"
    )
);

セッションの中身を作る関数

"answers"配列を作る関数

formMethods.php
function getAnswers( $values ) {
    $answers = array();

    //欲しいカラム名を定義
    $value_names = array("name", "age");

    //欲しいカラムだけ抽出
    foreach($value_names as $value_name) {
        $answers[$value_name] = isset($values[$value_name]) ? $values[$value_name] : null;
    }

    return $answers;
}

"error_messages"配列を作る関数

formMethods.php
function getErrors( $answers ) {
    $errors = array();

    //空チェック
    if(empty($answers["name"])) {
        $errors["name_error"] = "名前を入力してください";
    }
    //文字数チェック
    else if(strlen($answers["name"]) > 10) {
        $errors["name_error"] = "名前は10文字以内で入力してください";
    }

    //空チェック
    if(empty($answers["age"])) {
        $errors["age_error"] = "年齢を入力してください";
    }

    return $errors;
}

トークンを生成する関数

formMethods.php
function generateToken() {
    return md5(openssl_random_pseudo_bytes(32));
}

※トークンとは…
確認ページから完了ページに行く際に必要となる鍵のようなもの。
セッションに保存した値と確認ページからPOSTされた値を比較する。

上記の関数を使った各ページの処理

入力ページ

input.php
session_start();

//入力済みの内容があれば取得
$answers = isset($_SESSION["answers"]) ? $_SESSION["answers"] : array();

//エラーがあれば取得
$errors = isset($_SESSION["errors"]) ? $_SESSION["errors"] : array();

//セッションを削除
session_destroy();

確認ページ

confirm.php
session_start();

//回答リスト取得
$answers = getAnswers($_POST);

//回答リストをセッションに保存
$_SESSION["answers"] = $answers;

//回答に対してのエラーリストを取得
$errors = getErrors($answers);

//エラーあれば...
if(!empty($errors)) {
    //エラーをセッションに保存
    $_SESSION["errors"] = $errors;

    // 入力ページに遷移
    header("location: input.php");
    exit();
}

//トークンを生成
$token = generateToken();

//トークンをセッションに保存
$_SESSION["token"] = $token;

完了ページ

complete.php
session_start();

//トークンチェック
if(!isset($_POST["token"]) || !isset($_SESSION["token"]) || $_POST["token"] != $_SESSION["token"]) {
    // 入力ページに遷移
    header("location: input.php");
    exit();
}

//回答リストを取得
$answers = $_SESSION["answers"];

//セッションを削除
session_destroy();

あとはHTMLのほうで各データを表示していけばよい。
確認ページから完了ページではhiddenでトークンを渡すのも忘れずに。

まとめ

配列ゲーですね。
関数はクラスにして汎用性の高いものにしましょう。

28
27
2

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
28
27