前回までで一通りショッピングカートを作り終えました。
今回は、顧客会員登録をしていきます。
まずは、会員登録するためのテーブルを作ります。
会員登録テーブル作成
[fshop]データベースにテーブルを登録しますが、
そのテーブル名、カラム名を決めます。

データベース名:fshop
テーブル名:cust_member
各項目の項目名、データ型、長さは


項目 | カラム名 | データ型 | 長さ |
---|---|---|---|
会員ID | id | INT | |
登録日時 | date | TIMESTAMP | |
パスワード | pass | VARCHAR | 32 |
お名前 | name | VARCHAR | 20 |
メールアドレス | 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]のデータ送信。
動作確認

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

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

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

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

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

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