いちから掲示板サイトを作ってみる講座、3回目になります。
前回の記事でフォームの作り方を説明しましたが、このままでは、フォームが空っぽのままでも登録できてしまいます。
今回はフォームの中が空っぽだったり、パスワードの文字数が少なすぎたり、あるいは確認用パスワードの値が違っていたりする場合にエラーを返す方法を解説します。
こういった機能をバリデーションと呼びます。
検証、といった意味です。
次のようにエラーが表示されるようにします。
「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。
↓↓↓
なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。
デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。
いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。
前回までの内容
掲示板作成の7ステップの目次と概要はこちらをご覧ください。
- 概要説明
- ① 設計図を作って、データベースの準備をしよう
- ②会員登録画面をつくる 前編
- ③会員登録画面をつくる 後編⇒今ここ
- ④会員登録確認画面をつくる
- ⑤ログイン画面をつくる
- ⑥投稿画面をつくる
- ⑦削除画面をつくる
PHPで会員登録フォームにエラーチェック機能を追加する
ではフォームにエラーチェック機能を付けていきましょう。
まずは前回作成した C:\xampp\htdocs\forum\register.phpファイルを開き、下記コードを追加します。
【C:\xampp\htdocs\forum\register.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<?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 2 |
// ★ポイント1★ if (!empty($_POST) ){ |
最初に if (!empty($_POST) ) というIF構文をいれています。
「もし$_POSTの値が空ではないなら、次の処理をしてね」という意味になります。
【$_POST】はフォームによって投稿される値です。
ポイント② 【フォームの要素が空っぽだったら】というif条件式を入れる
次に「各フォームの要素が空だったらエラーを返す」ための条件式をいれておきましょう。たとえば下記は、$_POST[‘name’]が空なら、’blank’エラーになります。
|
1 2 3 4 |
// ★ポイント2★ if ($_POST['name'] == "") { $error['name'] = 'blank'; } |
$_POST[‘name’]は、フォームの「名前」を通じて投稿される値です。
BODYタグ以降のフォーム内の名前を入力する箇所には、次のようにif構文を加えます。
|
1 2 3 |
<?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カラムに１つしか登録できないようにします。そのため、下記のコードを入れます。
|
1 2 3 4 5 6 7 |
// ★ポイント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構文を加えます。
|
1 2 3 |
<?php if (isset($error['email']) && ($error['email'] == "duplicate")): ?> <p class="error">すでにそのemailは登録されています。</p> <?php endif; ?> |
これによって「もしも$error[‘email’]という値があるなら、そして’duplicate’エラーが起こったら【すでにそのemailは登録されています。】と表示する」ことができます。
ポイント④ パスワードは一定の文字数以上で入力してもらう
パスワードを一定の文字数以上で入力してほしい時には、次のようにPHPコードをいれます。
|
1 2 3 4 |
// ★ポイント4★ if (strlen($_POST['password'])< 6) { $error['password'] = 'length'; } |
これによって、$_POST[‘password’]の値が6文字以下なら、【’length’】というエラーになります。
$_POST[‘password’]は、フォームの「パスワード」に投稿される値のことです。
【strlen】というのは文字列の長さを取得する関数のことです。
|
1 2 3 |
<?php if (isset($error['password']) && ($error['password'] == "length")): ?> <p class="error"> 6文字以上で指定してください</p> <?php endif; ?> |
これによって「もしも$error[‘password’]という値があるなら、そして‘length’エラーが起こったら【6文字以上で指定してください】と表示する」ことができます。
ポイント⑤ 確認用のパスワードの値を一致させる
今回のフォームでは、パスワードは、確認用にもう一度入力してもらいます。
もしも最初に入力したパスワードと違っていた場合にエラーを出すには、次のようにコードを書きます。
|
1 2 3 4 |
// ★ポイント5★ if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")) { $error['password2'] = 'difference'; } |
これによって、$_POST[‘password’]と$_POST[‘password2’]の値が違っていて、そして$_POST[‘password2’]が空ではない場合には、’difference’エラーになります。
条件式の中の【!=】は「等しくない」という意味です。
BODYタグ以降のフォームの確認用パスワードを入力する箇所には、次のように書きます。
|
1 2 3 |
<?php if (isset($error['password2']) && ($error['password2'] == "difference")): ?> <p class="error"> パスワードが上記と違います</p> <?php endif; ?> |
これによって「もしも$error[‘password2’]という値があるなら、そして’difference’エラーが起こったら【パスワードが上記と違います】と表示する」ことができます。
ポイント⑥ パスワードは入力中も見えないようにする
最後にパスワードの入力中の設定について解説します。
次のように、inputタグの中のtype属性を「password」としてあげると、パスワードが入力中に見られないようになります。
|
1 |
<input type="password"> |
入力中のパスワードは次のように表示されます。
パスワードなどの秘匿情報は、他の人に見られることがないよう、ツール側でも色々と対策をしておきましょう。
テスト
今の段階で一度、テストしてみましょう。
XAMPPを起動した状態で、下記のURLを開きます。
フォームに空のまま値をいれたり、【パスワード】と【パスワード再入力】の値を違うものにしたりした時にエラーメッセージがでるか、チェックしてみてくださいね。
確認するボタンをおすとconfirm.php画面になりますが、まだこのページができていないので、エラーになります。
さいごに
フォームを設置するときには、今回のようにチェックをかけるようにしましょう。
エラーチェックをしておかないと変な値がどんどんデータベースに入力されていってしまう恐れがあります…
パスワードに関しては特に面倒ですが、やっぱりセキュリティ関連は重要なので、しっかりとチェックをいれておきたいですね。
次回は登録した値を確認する画面を作っていきましょう。
