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

PHP

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

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

会員登録テーブル作成

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

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

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

項目カラム名データ型長さ
会員IDidINT
登録日時dateTIMESTAMP
パスワードpassVARCHAR32
お名前nameVARCHAR20
メールアドレスemailVARCHAR90
郵便番号postalVARCHAR7
住所addressVARCHAR50
電話番号telVARCHAR15

顧客情報入力画面を修正

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

ファイル名: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]のデータ送信。

動作確認

顧客情報入力画面[inputinfo.html]から、
会員登録しないを選択すると、

「会員登録しません。」と表示されます。

会員登録を選択し、パスワードを入力しないと、
「パスワードが入力されていません。」と表示します。

会員登録を選択し、2つのパスワードが違うと、
「パスワードが一致しません。」と表示します。

会員登録を選択し、正確にパスワードを入力すると、
「会員登録します。」「パスワードが入力されました。」
と表示します。

登録までやりたかったのですが、今回はここまでにします。

コメント

タイトルとURLをコピーしました