PHPでショッピングカートを！【8.顧客情報入力】

前回、カートの数量変更と削除が出来るようにしました。
今回から、購入手続きに進みます。

顧客情報入力

ファイル名：inputinfo.html

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>お客様情報入力</title>
    <style type="text/css">
<!--
.txtbox{display: inline-block;margin: 10px;}
h3{color: white;background-color:seagreen;padding: 5px 20px;border-radius: 6px;}
table {margin: 10px;padding: 10px;border-collapse: collapse;border: 2px solid seagreen;}
table tr:nth-child(even) {background: mintcream;}
table tr:nth-child(odd) {background: honeydew;}
table tr th,td {border: 1px solid seagreen;padding: 5px 10px; text-align: left;}
table tr th {background-color:mediumaquamarine;}
table .right{text-align: right;}
.btnbox{text-align: center;}
.btn1{color: honeydew;font-size: 16px;background: gray;border-radius: 30px 0 0 30px;padding: 10px 24px;margin: 5px 10px;}
.btn2{color: honeydew;font-size: 16px;background: seagreen;border-radius: 0 30px 30px 0;padding: 10px 24px;margin: 5px 10px;}
.red{color: orangered;}
-->
    </style>
  </head>
  <body>
    <main>
      <section class="txtbox">

  <h3>お客様情報入力</h3>
  　以下の項目をご入力ください。<br>
  <form method="post" action="inputinfo_chk.php">
  <table>
  <tr>
    <th>【お 名 前】<span class="red">(必須)</span></th>
    <td><input type="text" name="cname" style="width:200px"></td>
  </tr>
  <tr>
    <th>【メールアドレス】<span class="red">(必須)</span></th>
    <td><input type="email" name="email" style="width:200px"></td>
  </tr>
  <tr>
    <th>【郵便番号】<span class="red">(必須)</span></th>
    <td><input type="text" name="postal" style="width:100px" maxlength="7"><br>※半角数字のみ7桁で入力してください
    </td>
  </tr>
  <tr>
    <th>【住　　所】<span class="red">(必須)</span></th>
    <td><input type="text" name="address" style="width:350px"></td>
  </tr>
  <tr>
    <th>【電話番号】<span class="red">(必須)</span></th>
    <td><input type="text" name="tel" style="width:200px"></td>
  <tr>
    <th>【備　　考】(任意)</th>
    <td><textarea name="note" cols="70" rows="5" style="width: 350px"></textarea>
    </td>
  </tr>

  </table>
<div class="btnbox">
  <input type="button" value="　 戻　  る 　" onclick="history.back()" class="btn1">
  <input type="submit" value="確 認 画 面 へ" class="btn2">
</div>
</form>

      </section>
    </main>
  </body>
</html>

このファイルは、HTMLなので簡単に解説します。

29行目：フォームをはじめます。送り先：[inputinfo_chk.php]
32～54行目：お名前、メールアドレス、郵便番号、住所、
　　　　　　電話番号をinputで作成、備考はtextareaで作成。
59行目：history.back()で戻るボタン表示。
60行目：formの送り先、確認画面へのボタン表示。

では次の確認画面にいきます。

顧客情報入力確認画面

ファイル名：inputinfo_chk.php

＜記述例＞

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>お客様情報入力チェック</title>
    <style type="text/css">
<!--
.txtbox{display: inline-block;margin: 10px;}
h3{color: white;background-color:seagreen;padding: 5px 20px;border-radius: 6px;}
h4{background-color:mediumaquamarine;padding: 3px 10px;}
table {margin: 10px auto;padding: 10px;border-collapse: collapse;border: 2px solid seagreen;}
table tr:nth-child(even) {background: mintcream;}
table tr:nth-child(odd) {background: honeydew;}
table tr th,td {border: 1px solid seagreen;padding: 5px 10px; text-align: left;}
table tr th {background-color:mediumaquamarine;}
table .right{text-align: right;}
.btnbox{text-align: center;}
.btn1{color: honeydew;font-size: 16px;background: gray;border-radius: 30px 0 0 30px;padding: 10px 24px;margin: 5px;}
.btn2{color: honeydew;font-size: 16px;background: crimson;border-radius: 0 30px 30px 0;padding: 10px 24px;margin: 5px;}
.red{color: red;font-weight: bold;}
-->
    </style>
  </head>
  <body>
    <main>
      <section class="txtbox">
        <h3>入力内容の確認</h3>
入力内容に間違いがないかご確認の上 [注文確定] ボタンを押してください。<br>
<?php

require_once('../com_func.php');

$post=sanitize($_POST);

$cname=$post['cname'];
$email=$post['email'];
$postal=$post['postal'];
$address=$post['address'];
$tel=$post['tel'];
$note=$post['note'];

$flag1=true;

print '<table><tr><th>お名前</th>';

if($cname=='')
{
  print '<td class="red">お名前が入力されていません。</td></tr>';
  $flag1=false;
}
else
{
  print '<td>'.$cname.'</td></tr>';
}

print '<tr><th>メールアドレス</th>';

if(preg_match('/^[\w\-\.]+\@[\w\-\.]+\.([a-z]+)$/',$email)==0)
{
  print '<td class="red">正確に入力してください。</td></tr>';
  $flag1=false;
}
else
{
  print '<td>'.$email.'</td></tr>';
}

print '<tr><th>郵便番号</th>';

if(preg_match('/^[0-9]{7}+$/',$postal)==0)
{
  print '<td class="red">半角数字7桁です。';
  $flag1=false;
}
else
{
  print '<td>'.substr($postal,0,3).'-'.substr($postal,3,4);
}

print '<tr><th>住所</th>';

if($address=='')
{
  print '<td class="red">住所が入力されていません。</td></tr>';
  $flag1=false;
}
else
{
  print '<td>'.$address.'</td></tr>';
}

print '<tr><th>電話番号</th>';

if(preg_match('/^\d{2,5}-?\d{2,5}-?\d{4,5}$/',$tel)==0)
{
  print '<td class="red">電話番号を正確に入力してください。</td></tr>';
  $flag1=false;
}
else
{
  print '<td>'.$tel.'</td></tr>';
}

print '<tr><th>備　考</th><td>'.nl2br($note).'</td></tr>';
print '</table>';

if($flag1==true)
{
  if(isset($_SESSION['id'])==true)
  {
    $id=$_SESSION['id'];
    $name=$_SESSION['name'];
    $price=$_SESSION['price'];
    $num=$_SESSION['num'];
    $max=count($id);
  }
  else
  {
    $max=0;
  }
  print '<h4>ショッピングカートの商品内容</h4>';
  print '<form method="post" action="inputinfo_end.php">';
  print '<table><tr>';
  print '<td>No.</td><td>商品名</td><td>価格</td>';
  print '<td>数量</td><td>小計</td></tr>';
  $sum=0; $sub=0;
  for($i=0; $i<$max; $i++)
  {
    $i1=$i+1;
    print '<tr><td>'.$i1.'</td><td>'.$name[$i].'</td>';
    print '<td class="right">'.number_format($price[$i]).'</td>';
    print '<td class="right">'.$num[$i].'</td>';
    $sub=$price[$i] * $num[$i];
    $sum += $sub;
    print '<td class="right">'.number_format($sub).'</td></tr>';
  }
  print '<tr><td colspan="4" class="right">合　計</td>';
  print '<td class="right">'.number_format($sum).'</td></tr>';
  print '<tr><td colspan="4" class="right">消費税</td>';
  print '<td class="right">'.number_format($sum * 0.1).'</td></tr>';
  print '<tr><td colspan="4" class="right">合計金額</td>';
  print '<td class="right">'.number_format($sum * 1.1).'</td></tr>';
  print '</table>';
  print '<input type="hidden" name="cname" value="'.$cname.'">';
  print '<input type="hidden" name="email" value="'.$email.'">';
  print '<input type="hidden" name="postal" value="'.$postal.'">';
  print '<input type="hidden" name="address" value="'.$address.'">';
  print '<input type="hidden" name="tel" value="'.$tel.'">';
  print '<input type="hidden" name="note" value="'.$note.'"><br>';
  print '<div class="btnbox">';
  print '<input type="button" onclick="history.back()" class="btn1" value="　戻   る　">';
  print '<input type="submit" value="注 文 確 定" class="btn2">';
  print '</form>';
}
else
{
  print '<span class="red">入力内容に誤りがあります。</span><br>';
  print '[戻る]ボタン押して入力を訂正してください。<br>';
  print '<button type="button" onclick="history.back()" class="btn1">　戻   る　</button>';
}

?>

      </section>
    </main>
  </body>
</html>

解説します。

2行目：セッションスタート
34行目：関数読み込み。
36行目：フォームから送られたデータをサニタイジング。
38～43行目：サニタイジングしたデータを変数に代入。
45行目：[$flag1]に真(true)を代入。これで入力ミスを判断する。
49行目：名前が書かれてあるか確認。
52・64・76・88・100行目：入力ミスがあると[$flag1]に偽(false)を代入。
61行目：[preg_match]でメールアドレスの簡易チェック。
73行目：[preg_match]で半角数字の簡易チェック。
85行目：住所が書かれてあるか確認。
97行目：[preg_match]で電話番号の簡易チェック。
114～117行目：セッションからカートデータを変数に代入。
154・162行目：history.back()で戻るボタン表示。
155行目：注文確定ボタンを表示。
160～162行目：入力ミスがある場合、[戻る]ボタンのみ表示。