PHPでショッピングカートを！【10.顧客会員登録】

前回までで一通りショッピングカートを作り終えました。
今回は、顧客会員登録をしていきます。

まずは、会員登録するためのテーブルを作ります。

会員登録テーブル作成

[fshop]データベースにテーブルを登録しますが、
そのテーブル名、カラム名を決めます。

データベース名：fshop
テーブル名：cust_member

各項目の項目名、データ型、長さは

項目	カラム名	データ型	長さ
会員ID	id	INT
登録日時	date	TIMESTAMP
パスワード	pass	VARCHAR	32
お名前	name	VARCHAR	20
メールアドレス	email	VARCHAR	90
郵便番号	postal	VARCHAR	7
住所	address	VARCHAR	50
電話番号	tel	VARCHAR	15

顧客情報入力画面を修正

顧客情報入力画面からそのまま会員登録
できるようにしましょう。

ファイル名：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; width: 600px;}
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;width: 200px;}
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>
  <table>
  <tr>
    <th>【登録の有無】</th>
    <td>
      <input type="radio" name="mem" value="yes"> 会員登録する
      <input type="radio" name="mem" value="no" checked> 会員登録しない
    </td>
  </tr>
  <tr>
    <th>【ログインID】</th>
    <td>ログインIDは上記メールアドレスを使用します　</td>
  </tr>
  <tr>
    <th>【パスワード】</th>
    <td><input type="password" name="lpass1" style="width:200px"><br>
    ※半角英数字でお願いします<br>
    <input type="password" name="lpass2" style="width:200px"><br>
    ※確認のためもう一度入力してください</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>

追加した部分は、57～76行目です。

ここで会員登録するかしないか、
登録する場合、
パスワードを入力するようにしています。

顧客情報入力チェックの修正

顧客情報入力チェックファイルも修正します。

ファイル名：inputinfo_chk.php

＜記述例＞

<!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'];
$mem=$post['mem'];
$lpass=$post['lpass1'];
$lpass2=$post['lpass2'];

$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 '<tr><th>会員登録</th>';

if($mem=='yes')
{
  print '<td>会員登録します。</td></tr>';
  print '<tr><th>パスワード</th><td>';
  if($lpass=='')
  {
    print '<span class="red">パスワードが入力されていません。</span>';
    $flag1=false;
  }
  elseif($lpass!=$lpass2)
  {
    print '<span class="red">パスワードが一致しません。</span>';
    $flag1=false;
  }
  else
  {
    print 'パスワードが入力されました。';
  }
  print '</td></tr>';
}
else
{
  print '<td>会員登録しません</td></tr>';
}
print '</table>';

if($flag1==true)
{
  session_start();
  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 '<input type="hidden" name="mem" value="'.$mem.'"><br>';
  print '<input type="hidden" name="lpass" value="'.$lpass.'"><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>

追加した部分は3か所です。

41～42行目：[$mem][$lpass][$lpass2]の代入追加。
108～133行目：会員登録の入力チェック。
110行目：[$mem]変数が[yes]だったら登録する。
114行目：[$lpass]に入力されていなかったらエラー表示。
119行目：[$lpass]と[$lpass2]とが違ったらエラー表示。
180～181行目：[$mem][$lpass]のデータ送信。