Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[PHP]フォームの制作…チェック機能を働かせる

PHP

これまで実装した仕様

  • index.php⇒フォームをpostで送信、エラーがあればここに戻る
  • check.php⇒index.phpからのpostをsessionに書き込み、エラーチェック、正しければ先へ
  • send.php⇒sessionのデータをメール送信
index.php
  • フォームのpostメソッドでname,email,messageをcheckに送信する
  • checkから戻ったとき…sessionに記録されたそれまでの入力値とエラー内容を表示する
<?php
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* sessionを利用 */
session_start();
/* 空文字を入れておく */
  $name = '';
  $email = '';
  $message = '';
  $name_error = '';
  $email_error = '';
  $message_error = '';
/* 初回はsessionの値が無い⇒undefinedなので@でエラー回避する(応急策) */
  $name = @$_SESSION['name'];
  $email = @$_SESSION['email'];
  $message = @$_SESSION['message'];
/* エラー */
  $name_error = @$_SESSION['name_error'];
  $email_error = @$_SESSION['email_error'];
  $message_error = @$_SESSION['message_error'];
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問合せフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>メールフォーム</h1>
<form action="check.php" method="post">
<table>
  <tr>
    <th><label for="name">お名前</label><br><small>(20文字以内)</small></th>
    <td><input type="text" name="name" id="name" value=<?php echo($name); ?>><?php if(!empty($name_error)){echo "<span>{$name_error}</span>";}?></td>
  </tr>
  <tr>
    <th><label for="email">Eメール</label><br><small>(25文字以内)</small></th>
    <td><input type="text" name="email" id="email" value=<?php echo ($email); ?>><?php if(!empty($email_error)){ echo '<span>',$email_error,'<span>';}?>
    </td>
  </tr>
  <tr>
    <th><label for="message">お問合せ</label><br><small>(150文字以内)</small></th>
    <td><textarea name="message" id="message"><?php echo($message); ?></textarea><?php if(!empty($message_error)){ echo '<span>',$message_error,'<span>';}?>
    </td>
  </tr>
</table>
<input type="submit" value="確認" id="submit">
</form>
</div>
</body>
</html>
check.php
  • いきなりアクセスされたときはindex.phpにリダイレクト
  • formから送られたデータを変数に格納
  • エラーメッセージを変数に格納
  • 送られてきたデータをsessionに格納
  • 適合値かチェックする
  • 入力されているか…empty
  • 文字数は大丈夫か…mb_strlen
  • 指定した文字が含まれるか…strpos
  • 全角/半角の判断…strlen != mb_strlen
  • いずれかに適合しなければフラグ$successをfalseにし、エラー内容をsessionに返す
  • $successがfalseであれば「送信」を表示しない
  • $successの結果をsessionに格納
<?php
/* htmlspecialcharsを使いやすくするために自作関数化 */
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* フォーム情報がない場合index.phpにリダイレクト */
if( !(isset($_POST['name'])) || !(isset($_POST['email'])) || !(isset($_POST['message']))){
  header('Location:index.php');
  exit;
}
/* 変数に格納 */
  $name = ($_POST["name"]);
  $email = ($_POST["email"]);
  $message = ($_POST["message"]);

/* エラー時のフラグと表示する文言を格納する変数 */
  $success = true;
  $name_error = '';
  $email_error = '';
  $message_error = '';
/* メールアドレスに@が入っているか */
  if(strpos($email,'@') === false){
    $email_error = '@マークが入力されていません';
    $success = false;
}
/* メールアドレスが全角文字 */
  if(strlen($email) != mb_strlen($email,'utf-8')){
    $email_error = 'メールアドレスに全角文字が含まれています';
    $success = false;
}
/*文字数チェック*/
  if(mb_strlen($name,'utf-8') > 20){ $name_error =  'お名前が長すぎます';  $success = false;}
  if(mb_strlen($email,'utf-8') > 20){ $email_error =  'メッセージが長すぎます';  $success = false;}
  if(mb_strlen($message,'utf-8') > 150){ $message_error =  'お問い合わせ内容が長すぎます';  $success = false;}
/* もし変数の中身が空なら */
  if(empty($name)){ $name_error = '名前が入力されていません';  $success = false;}
  if(empty($email)){ $email_error = 'メールアドレスが入力されていません';  $success = false;}
  if(empty($message)){ $message_error = 'お問合せ内容が入力されていません';  $success = false;} 
/* セッションを使う⇒入力内容 */
session_start();
  $_SESSION['name'] = $_POST['name'];
  $_SESSION['email'] = $_POST['email'];
  $_SESSION['message'] = $_POST['message'];
  $_SESSION['success'] = $success;
/* セッションを使う⇒エラー内容 */
  $_SESSION['name_error'] = $name_error;
  $_SESSION['email_error'] = $email_error;
  $_SESSION['message_error'] = $message_error;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力内容の確認</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>入力内容の確認</h1>
<table>
<tr><th>お名前</th><td><?php echo h($name); echo '<span>',h($name_error),'</span>'; ?></td></tr>
<tr><th>Eメール</th><td><?php echo h($email); echo '<span>',h($email_error),'</span>'; ?></td></tr>
<tr><th>お問合せ</th><td><?php echo nl2br(h($message)); echo '<span>',h($message_error),'</span>'; ?></td></tr>
</table>
<div id="lastBtn">
<p><a href="index.php" >戻る</a></p>
<?php
  if($success){
    echo '<p><a href="send.php">送信</a></p>';
  }
?>
</div>
</div>
</body>
</html>
send.php
  • いきなりアクセスされたときはindex.phpにリダイレクト
  • しかしsessionに格納されたsuccessがtrueであれば(checkをクリアしていれば)メールを送信
<?php
/* セッションを利用 */
  session_start();
/* 直接アクセスされたときindex.phpにリダイレクト */
  $success = $_SESSION['success'];
    if( !$success ){
        header('Location:index.php');
        exit;
  }
  $name = $_SESSION['name'];
  $email = $_SESSION['email'];
  $message = $_SESSION['message'];
/* サーバからメールを送信 */
  mb_send_mail('hoge@hoge.com', 'お問い合わせメール', $name.$email.$message);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<h1>お問合せメールを送信しました</h1>
<p>お問合せありがとうございました。</p>
<p><a href="index.php" >トップへ戻る</a></p>
</body>
</html>
strpos()
  • 指定した変数に指定した文字が入っているか?
  if(strpos($email,'@') === false){
    $email_error = '@マークが入力されていません';
    $success = false;
}
mb_strlen
  • 指定した変数の指定した文字コードの文字列長を調べる
  if(mb_strlen($name,'utf-8') > 20){ $name_error =  'お名前が長すぎます';  $success = false;}
全角/半角チェック
  • strlenは文字のバイト長を返し、mb_strlenは指定した文字コードの文字長を返す。半角文字は１文字1バイト、utf-8は１文字３バイトの性質を利用し、比較演算子でつなげることで全角文字が含まれているか調べる。
  if(strlen($email) != mb_strlen($email,'utf-8')){
    $email_error = 'メールアドレスに全角文字が含まれています';
    $success = false;
}

　その他

  • 境界線テスト⇒文字列が指定されたフォームで実際に文字数を入力してチェックすること
  • POST⇒サーバ上の「メモリ」にデータが蓄えられる
  • セッションのデータができるタイミング⇒session_start()後
  • 有効期限⇒標準：２４分