今回は前回作った画面に対して、バリデーションを入れていきましょう。
ユーザーから入力された名前はPHPのセッションで持ち回ります。
そしてバリデーションとしては、入力した名前の空チェックと、8文字以内チェックをかけます。
画面の上部にユーザー名とバリデーションのエラーが表示されるようにします。
この記事の目標（作るもの）について
名前を入力しなかった場合や、8文字以上だった場合にエラーを出力するようにバリデーションを入れます。
・名前を入力しなかった場合は下記のようにエラーが出ます。
・8文字以上だった場合は下記のようにエラーが出ます。
あと、ナビバーの右上に名前が出てくるように修正します。
じゃんけんゲーム画面を修正する
じゃんけん開始画面で名前が入力されて「始める」ボタンが押されると、ゲーム画面に名前データと一緒に遷移します。
じゃんけんゲーム画面で入力された名前をバリデーションするように修正してみましょう。
前回作成したgame.phpに下記のように先頭から処理を入れてください。
htmlタグの上に記載します。
<?php
session_start();
// 入力されたユーザー名の取得
$userName = isset($_POST['user_name']) ? $_POST['user_name'] : '';
// バリデーション
$errorMessages = [];
if (empty($userName)) {
array_push($errorMessages, "ユーザー名が空です。ユーザー名を入力してください。");
}
if (8 < mb_strlen($userName)) {
array_push($errorMessages, "ユーザー名は8文字以内で入力してください。");
}
if (0 < count($errorMessages)) {
$_SESSION["errors"] = $errorMessages;
header("location: index.php");
exit;
}
$_SESSION['userName'] = $userName;
?>
<html>
<?php require_once 'parts/header.php' ?>
// ------------------- 省略 -------------------
解説
<?phpから?>までが、PHPプログラムです。
ここで書いているプログラムは、ゲーム画面に遷移してきたときに実行されます。
session_start();でPHPのセッションを開始しています。
これはPHPのセッションを使用する場合に、プログラムの先頭で呼び出す必要があります。
session_start();を呼び出しておくと、セッションを使うことができます。
セッション情報はブラウザを閉じたり、ブラウザのクッキーを消すと消滅します。
$_POSTでフォームから送信されたデータにアクセスしています。
user_nameはinputタグのname属性の値です。$_POST['user_name']で開始画面で入力して、送信した値にアクセスできます。
値があれば$userNameに送信された値を入れて、ない場合は空文字をセットしています。
値の受け取りまで終わったら、バリデーションです。
$userNameが空だった場合はエラーメッセージの配列($errorMessages)にエラー内容を入れています。
empty関数で値が空だった場合に、trueが返ってきます。
次に$userNameが8文字以上だった場合はエラーメッセージを配列に格納しています。
mb_strlen関数で、渡した変数の文字数が取得できます。8文字以上だったらエラーにしています。
最後にcount関数で$errorMessagesのエラー数をカウントしています。
エラーがあった場合は、trueになります。（バリデーションでエラーの場合）
その後にセッションの$_SESSION['errors']にエラーメッセージ配列を入れて、ゲーム開始画面にリダイレクトしています。
header関数を使ってheader("location: [リダイレクト先]");で、指定先にリダイレクトできます。
バリデーションでエラーがない場合は、入力されたユーザー名を$_SESSION['userName']に保持しています。
スーパーグローバル変数($_SESSION,$_POSTなど)について
$_SESSIONや$_POSTはPHPのスーパーグローバル変数です。
これはPHPプログラムの中で、固定で決められているため名前を変えることはできません。
$_SESSIONでセッションの値にアクセスして、$_POSTでPOST形式で送信された値にアクセスできます。
他にも$_GETや$_SERVERなどのスーパーグローバル変数があります。
スーパーグローバル変数については公式のこちらに書いています。
じゃんけん開始画面を修正する
バリデーションして、問題があった場合はエラーにして、ゲーム開始画面に戻す（リダイレクトする）ようにしました。
ですが、じゃんけん開始画面ではバリデーション結果を表示する処理が入っていません。
じゃんけん開始画面でバリデーションした結果を表示するようにしてみましょう。
index.phpの一部を下記のように修正してください。
// ----- ここから追加する -----
<?php
session_start();
?>
// ----- ここまで追加する -----
<html>
<?php require_once 'parts/header.php' ?>
<body>
<?php require_once 'parts/navibar.php' ?>
<div class="container">
// ----- ここから追加する -----
<?php if (isset($_SESSION['errors'])): ?>
<?php foreach ($_SESSION['errors'] as $error): ?>
<div class="alert alert-danger mt-3" role="alert">
<?php echo $error; ?>
</div>
<?php endforeach; ?>
<?php unset($_SESSION['errors']); ?>
<?php endif; ?>
// ----- ここまで追加する -----
<div class="d-flex justify-content-center">
// ------------------- 省略 -------------------
「ここから追加」〜「ここまで追加」のコードを、先頭とタグを書いている箇所に入れていきます。
解説
最初にsession_start()を呼び出して、セッションを開始します。
次に、$_SESSION['errors']にエラーが入っている場合は、エラー配列をforeachでループさせてエラーを出力させています。
つまり、ゲーム開始画面でユーザー名を入力して送信後にバリデーションでエラーがあった場合は、ここで表示されるようになります。
表示したあとはunset($_SESSION['errors']);を呼び出して、セッションの値を削除しています。
これで表示したあとは、クリアになるので「画面をリロードしても2回表示される。」ようなことをふせいでいます。
ここまでで、名前のバリデーションは完了しました。
ナビバーに名前を表示する
バリデーションを行って、問題があった場合はゲーム開始画面でエラーにするところまでは作成できました。
セッションに名前を持つようにしたので、ナビバーにも名前を表示するようにしてみましょう。
下記のようにparts/navibar.phpを修正してください。
テンプレートのままだった一部を削除して、PHPのコードを追加します。
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">Webじゃんけんゲーム</a>
// -------- ここから削除する ---------
<div class="text-white">ようこそ、xxxさん</div>
// -------- ここまで削除する ---------
// -------- ここから追加する ---------
<?php if (isset($_SESSION['userName'])): ?>
<div class="text-white">ようこそ、<?php echo $_SESSION['userName'] ?>さん</div>
<?php endif; ?>
// -------- ここまで追加する ---------
</div>
</nav>
解説
バリデーションでエラーがなかったら、セッションにユーザーの名前を持つようにしました。
ユーザーの名前をゲーム画面の右上に表示します。
追加された下記で表示されるようになります。
<?php if (isset($_SESSION['userName'])): ?>
<div class="text-white">ようこそ、<?php echo $_SESSION['userName'] ?>さん</div>
<?php endif; ?>
セッションにユーザー名が入っていたら、セッションの中のユーザー名を表示しています。
動作確認する
`http://localhost:8080/php-rock-paper-scissors/index.php`にアクセスします。
空入力して送信すると、下記のように表示されます。
8文字以上入力して、送信すると下記のように表示されます。
バリデーションが効いていることが確認できました。
8文字以内で名前を入力すると、このようにゲーム画面の右上に名前が表示されました。
終わりに
今回はバリデーションと名前の表示を実装しました。
セッションを開始して$_SESSION変数を使うことで、値を次の画面や前の画面に持ち回れることが確認できたと思います。
次回は実際に対戦する機能を実装します。
コメント
分かりやすいです！ありがとうございます。
分かりやすいです！ありがとうございます。
コメントありがとうございます😄
役に立って良かったです