いちから掲示板サイトを作ってみる講座、3回目になります。
前回の記事でフォームの作り方を説明しましたが、このままでは、フォームが空っぽのままでも登録できてしまいます。
今回はフォームの中が空っぽだったり、パスワードの文字数が少なすぎたり、あるいは確認用パスワードの値が違っていたりする場合にエラーを返す方法を解説します。
こういった機能をバリデーションと呼びます。
検証、といった意味です。
次のようにエラーが表示されるようにします。
「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。
↓↓↓
なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。
デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。
いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。
前回までの内容
掲示板作成の7ステップの目次と概要はこちらをご覧ください。
- 概要説明
- ① 設計図を作って、データベースの準備をしよう
- ②会員登録画面をつくる 前編
- ③会員登録画面をつくる 後編⇒今ここ
- ④会員登録確認画面をつくる
- ⑤ログイン画面をつくる
- ⑥投稿画面をつくる
- ⑦削除画面をつくる
PHPで会員登録フォームにエラーチェック機能を追加する
ではフォームにエラーチェック機能を付けていきましょう。
まずは前回作成した C:\xampp\htdocs\forum\register.phpファイルを開き、下記コードを追加します。
【C:\xampp\htdocs\forum\register.php】
<?php
session_start();
require('dbconnect.php');
// ★ポイント1★
if (!empty($_POST) ){
// ★ポイント2★
if ($_POST['name'] == "") {
$error['name'] = 'blank';
}
if ($_POST['email'] == "") {
$error['email'] = 'blank';
} else {
// ★ポイント3★
$member = $db->prepare('SELECT COUNT(*) AS cnt FROM members WHERE email=?');
$member->execute(array($_POST['email']));
$record = $member->fetch();
if ($record['cnt'] > 0) {
$error['email'] = 'duplicate';
}
}
if ($_POST['password'] == "") {
$error['password'] = 'blank';
}
if ($_POST['password2'] == "") {
$error['password2'] = 'blank';
}
// ★ポイント4★
if (strlen($_POST['password'])< 6) {
$error['password'] = 'length';
}
// ★ポイント5★
if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")) {
$error['password2'] = 'difference';
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<title>会員登録をする</title>
<style>
.error { color: red;font-size:0.8em; }
</style>
</head>
<body>
<h1>会員登録をする</h1>
<form action="" method="post" class="registrationform">
<label>
名前
<input type="text" name="name" style="width:150px" value="<?php echo $_POST['name']??""; ?>">
<?php if (isset($error['name']) && ($error['name'] == "blank")): ?>
<p class="error">名前を入力してください</p>
<?php endif; ?>
</label>
<br>
<label>
email
<input type="text" name="email" style="width:150px" value="<?php echo $_POST['email']??""; ?>">
<?php if (isset($error['email']) && ($error['email'] == "blank")): ?>
<p class="error">emailを入力してください</p>
<?php endif; ?>
<?php if (isset($error['email']) && ($error['email'] == "duplicate")): ?>
<p class="error">すでにそのemailは登録されています。</p>
<?php endif; ?>
</label>
<br>
<label>
パスワード
<input type="password" name="password" style="width:150px" value="<?php echo $_POST['password']??""; ?>">
<?php if (isset($error['password']) && ($error['password'] == "blank")): ?>
<p class="error"> パスワードを入力してください</p>
<?php endif; ?>
<?php if (isset($error['password']) && ($error['password'] == "length")): ?>
<p class="error"> 6文字以上で指定してください</p>
<?php endif; ?>
</label>
<br>
<label>
パスワード再入力<span class="red">*</span>
<input type="password" name="password2" style="width:150px">
<?php if (isset($error['password2']) && ($error['password2'] == "blank")): ?>
<p class="error"> パスワードを入力してください</p>
<?php endif; ?>
<?php if (isset($error['password2']) && ($error['password2'] == "difference")): ?>
<p class="error"> パスワードが上記と違います</p>
<?php endif; ?>
</label>
<br>
<input type="submit" value="確認する" class="button">
</form>
<a href="login.php">ログイン画面に戻る</a>
</body>
</html>
★ポイント★ごとに、今回追加したコードを解説していきます。
ポイント① IF構文
// ★ポイント1★
if (!empty($_POST) ){
最初に if (!empty($_POST) ) というIF構文をいれています。
「もし$_POSTの値が空ではないなら、次の処理をしてね」という意味になります。
【$_POST】はフォームによって投稿される値です。
ポイント② 【フォームの要素が空っぽだったら】というif条件式を入れる
次に「各フォームの要素が空だったらエラーを返す」ための条件式をいれておきましょう。たとえば下記は、$_POST[‘name’]が空なら、’blank’エラーになります。
// ★ポイント2★
if ($_POST['name'] == "") {
$error['name'] = 'blank';
}
$_POST[‘name’]は、フォームの「名前」を通じて投稿される値です。
BODYタグ以降のフォーム内の名前を入力する箇所には、次のようにif構文を加えます。
<?php if (isset($error['name']) && ($error['name'] == "blank")): ?> <p class="error">名前を入力してください</p> <?php endif; ?>
これによって「もしも$error[‘name’]という値があるなら、そして’blank’エラーが起こったら【名前を入力してください】と表示する」ことができます。
ちなみに、$error[‘name’]を入れておかないと、そんな値はないため、下記のように「undefined(定義されていない）」とエラーが出ます。
前回も似たような処理を行いましたが、変数が存在しない可能性がある場合は、if構文を入れておく必要があります。
ちょっと面倒ですが、慣れていきましょう。
名前以外にも、すべての入力項目に、同様のコードを追加しておきます。これによって、要素が空のまま送信されると、エラーになります。
ポイント③ 同じEmailは一度しか登録できないようにする
同じEmailはmembersテーブルのemailカラムに１つしか登録できないようにします。そのため、下記のコードを入れます。
// ★ポイント3★
$member = $db->prepare('SELECT COUNT(*) AS cnt FROM members WHERE email=?');
$member->execute(array($_POST['email']));
$record = $member->fetch();
if ($record['cnt'] > 0) {
$error['email'] = 'duplicate';
}
もし既に同じEmailが登録されていた場合には、$record[‘cnt’] が1以上となります。その場合は、duplicate(重複）エラーになります。
BODYタグ以降のフォーム内の名前を入力する箇所には、次のようにif構文を加えます。
<?php if (isset($error['email']) && ($error['email'] == "duplicate")): ?> <p class="error">すでにそのemailは登録されています。</p> <?php endif; ?>
これによって「もしも$error[‘email’]という値があるなら、そして’duplicate’エラーが起こったら【すでにそのemailは登録されています。】と表示する」ことができます。
ポイント④ パスワードは一定の文字数以上で入力してもらう
パスワードを一定の文字数以上で入力してほしい時には、次のようにPHPコードをいれます。
// ★ポイント4★
if (strlen($_POST['password'])< 6) {
$error['password'] = 'length';
}
これによって、$_POST[‘password’]の値が6文字以下なら、【’length’】というエラーになります。
$_POST[‘password’]は、フォームの「パスワード」に投稿される値のことです。
【strlen】というのは文字列の長さを取得する関数のことです。
<?php if (isset($error['password']) && ($error['password'] == "length")): ?> <p class="error"> 6文字以上で指定してください</p> <?php endif; ?>
これによって「もしも$error[‘password’]という値があるなら、そして‘length’エラーが起こったら【6文字以上で指定してください】と表示する」ことができます。
ポイント⑤ 確認用のパスワードの値を一致させる
今回のフォームでは、パスワードは、確認用にもう一度入力してもらいます。
もしも最初に入力したパスワードと違っていた場合にエラーを出すには、次のようにコードを書きます。
// ★ポイント5★
if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")) {
$error['password2'] = 'difference';
}
これによって、$_POST[‘password’]と$_POST[‘password2’]の値が違っていて、そして$_POST[‘password2’]が空ではない場合には、’difference’エラーになります。
条件式の中の【!=】は「等しくない」という意味です。
BODYタグ以降のフォームの確認用パスワードを入力する箇所には、次のように書きます。
<?php if (isset($error['password2']) && ($error['password2'] == "difference")): ?> <p class="error"> パスワードが上記と違います</p> <?php endif; ?>
これによって「もしも$error[‘password2’]という値があるなら、そして’difference’エラーが起こったら【パスワードが上記と違います】と表示する」ことができます。
ポイント⑥ パスワードは入力中も見えないようにする
最後にパスワードの入力中の設定について解説します。
次のように、inputタグの中のtype属性を「password」としてあげると、パスワードが入力中に見られないようになります。
<input type="password">
入力中のパスワードは次のように表示されます。
パスワードなどの秘匿情報は、他の人に見られることがないよう、ツール側でも色々と対策をしておきましょう。
テスト
今の段階で一度、テストしてみましょう。
XAMPPを起動した状態で、下記のURLを開きます。
フォームに空のまま値をいれたり、【パスワード】と【パスワード再入力】の値を違うものにしたりした時にエラーメッセージがでるか、チェックしてみてくださいね。
確認するボタンをおすとconfirm.php画面になりますが、まだこのページができていないので、エラーになります。
さいごに
フォームを設置するときには、今回のようにチェックをかけるようにしましょう。
エラーチェックをしておかないと変な値がどんどんデータベースに入力されていってしまう恐れがあります…
パスワードに関しては特に面倒ですが、やっぱりセキュリティ関連は重要なので、しっかりとチェックをいれておきたいですね。
次回は登録した値を確認する画面を作っていきましょう。
コメント