メールフォーム実習12：最終 - WEB制作の備忘録

送信ページ：send.php

【send.php】

<?php
require_once dirname(__FILE__).'/func.php';

if(!$_SESSION['success']){
  header('Location:index.php');
  exit;
}

$name = $_SESSION['mail']['name'];
$email = $_SESSION['mail']['email'];
$message = $_SESSION['mail']['message'];

$_SESSION = array();
unset($_SESSION['mail']);

if(isset($_COOKIE[session_name()])){
  setcookie(session_name(),'',time()-42000,'/');
}

session_destroy();

$body =<<<MBODY
{$name}様よりお問い合わせメールが送信されました。
-----------------------------------------------------------
【お問い合わせ内容】
{$message}
-----------------------------------------------------------
{$name}様のメールアドレス：{$email}
MBODY;
mb_send_mail('xxx@xxx.xxx','お問い合わせメール',$body);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メール送信終了</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>メール送信終了</h1>
<p>以下の内容でメールが送信されました</p>
<table>
<tr>
<th>お名前：</th><td><?php echo h($name);?></td>
</tr>
<tr>
<th>Eメール：</th><td><?php echo h($email);?></td>
</tr>
<tr>
<th>お問い合わせ：</th><td><?php echo nl2br(h($message));?></td>
</tr>
</table>
<p><a href="index.php">トップに戻る</a></p>
</body>
</html>

ポイント

セッション変数を解放（破棄）する

メモリ内部につくったセッション変数の小部屋を壊します

unset($_SESSION['name']);
unset($_SESSION['email']);
unset($_SESSION['message']);
unset($_SESSION['name_error']);
unset($_SESSION['email_error']);
unset($_SESSION['message_error']);
unset($_SESSION['success']);

多次元配列に変更して一行表記にする

上記unsetを一文にします

unset($_SESSION['mail']);

今までのセッションを囲む部屋をつくり、今までのセッションの前に追加します
index.php、check.phpにもセッションデータがあるので全て修正します

$_SESSION['mail']['   '];

セッションを終了

セッションを見に行く関係性を切ります

session_destroy();

クッキーを破棄

セッションが始まると自動的にクッキーが保存されます
セッションデータを消してもクッキーは残るため破棄します

if(isset($_COOKIE[session_name()])){
  setcookie(session_name(),'',time()-42000,'/');
}

session_name()=PHPSESSIDという名前のファイルがあったら、PHPSESSIDを空文字に書き換え、time()システムの時間（今の時間）から過去の時間に遡る

session_name()=PHPSESSID
setcookie=クッキーを書き換える
time()=システムの今の時間
time()-42000=時間をブラウザを閉じる前に遡る
/=パス

ヒアドキュメント

メール送信内容を整える

$body =<<<MBODY
…省略…
MBODY;

省略部分のインデント、改行は反映されます
MBODYは開始と終了が同じ文字であればどんな文字でも動きます
ただし、前後にスペースがあると動かないときが多いです

検証

index.php、check.php、send.php、func.phpをテストサーバーへアップロード
正規のテスト内容を入力して送信をクリック
設定したメールアドレスを確認
MBODYの内容が反映されていれば成功です

入力ページ：index.php

【index.php】

<?php
require_once dirname(__FILE__).'/func.php';

$name = '';
$email = '';
$message = '';
$name_error= '';
$email_error= '';
$message_error= '';
if(isset($_SESSION['mail']['name'])){
  $name = $_SESSION['mail']['name'];
}
if(isset($_SESSION['mail']['email'])){
  $email = $_SESSION['mail']['email'];
}
if(isset($_SESSION['mail']['message'])){
  $message = $_SESSION['mail']['message'];
}
if(isset($_SESSION['mail']['name_error'])){
  $name_error = $_SESSION['mail']['name_error'];
}
if(isset($_SESSION['mail']['email_error'])){
  $email_error = $_SESSION['mail']['email_error'];
}
if(isset($_SESSION['mail']['message_error'])){
  $message_error = $_SESSION['mail']['message_error'];
}

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせフォーム</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="check.php" method="post">
<table>
<tr>
<th><label for="name">お名前：</label><span class="small">(20文字以内))</span></th><td><input type="text" name="name" id="name" value="<?php echo h($name); ?>" maxlength="20" size="50" placeholder="例：山田太郎" required autofocus><?php if(!empty($email_error)){echo "<span class='red'>{$email_error}</span>";}?></td>
</tr>
<tr>
<th><label for="email">Eメール：</label><span class="small">(25文字以内)</span></th><td><input type="email" name="email" id="email" value="<?php echo h($email); ?>" maxlength="25" size="50" placeholder="例：example@example.com" required><?php if(!empty($email_error)){echo "<span class='red'>{$email_error}</span>";}?></td>
</tr>
<tr>
<th><label for="message">お問い合わせ：</label><span class="small">(150文字以内)</span></th><td><textarea name="message" id="message" maxlength="150" placeholder="例：資料を請求いたします。" cols="40" rows="5" required><?php echo h($message); ?></textarea><?php if(!empty($message_error)){echo "<span class='red'>{$message_error}</span>";}?></td>
</tr>
</table>
<p class="submit"><input type="submit" value="確認"></p>
</form>
</body>
</html>

ポイント

thタグの内容を成形

PHPの開発中に入れると検証できないので検証終了後に入れます
- sizeはブラウザによって見た目が変わります（カラム落ち）特にFirefox、デザイナーはwidthを使う人が多いです
maxlength=""
placeholder=""：入力サンプル文字を表示
size=""
cols=""
rows=""
required：送信時に必須項目の入力チェック：全ての項目に追加
autofocus：ページを開いたときに自動的に入力場所を選択：ページ内で1箇所指定

emailのinput typeを変更

"text"から"email"へ変更します
メールアドレス様の書式しか入力できなくなります

input type="email"

確認ページ：check.php

【check.php】

<?php
require_once dirname(__FILE__).'/func.php';

if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['message'])){
  header('Location:index.php');
  exit;
}
//var_dump($_POST);
$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')>25){
  $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['mail']['name']= $_POST['name'];
$_SESSION['mail']['email']= $_POST['email'];
$_SESSION['mail']['message']= $_POST['message'];
$_SESSION['mail']['success']= $success;

$_SESSION['mail']['name_error'] = $name_error;
$_SESSION['mail']['email_error'] = $email_error;
$_SESSION['mail']['message_error'] = $message_error;

if(!$success){
  header('Location:index.php');
  exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせ確認</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>お問い合わせ確認</h1>
<table>
<tr>
<th>お名前：</th><td><?php echo h($name); ?></td>
</tr>
<tr>
<th>Eメール：</th><td><?php echo h($email); ?></td>
</tr>
<tr>
<th>お問い合わせ：</th><td><?php echo nl2br(h($message)); ?></td>
</tr>
</table>
<p><a href="index.php">戻る</a></p>
<p><a href="send.php">送信</a></p>
</body>
</html>

ポイント

header正しい書き方

テスト段階では相対パスですが、サーバーに最終的にアップロードする場合は、絶対パスに修正します

【相対パス】

header('Location:index.php');

【絶対パス】

header('Location:http://xxx.com/xxx/index.php');

サーバーのパスを記述してください

関数ページ：func.php

【func.php】

<?php
function h($str){
  return htmlspecialchars($str,ENT_QUOTES,'utf-8');
}
session_start();

スタイルシート：style.css

保存場所は、index.php等の同階層にcssフォルダをつくり保存してください

【style.css】

@charset "utf-8";

/* reset */
html,body,div,ul,li,h1,p,table,tr,th,td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  background: #FFF;
}

/* layout */

/* item */
h1 {
  width: 800px;
  margin: 10px auto;
  font-size: 20px;
  color: #333;
}
table {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #CCC;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  border: 1px solid #AAA;
}
th {
  text-align: left;
  color: #FFF;
  background: #777;
  font-size: 14px;
  width: 120px;
  padding: 6px;
}
.small {
  font-size: 12px;
}
.red {
  color: red;
  font-size: 10px;
  vertical-align: top;
  margin-left: 5px;
}
.para {
  width: 800px;
  margin: 10px auto;
  text-align: center;
  color: red;
}