前回、カートの数量変更と削除が出来るようにしました。
今回から、購入手続きに進みます。
顧客情報入力
ファイル名: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行目:入力ミスがある場合、[戻る]ボタンのみ表示。
動作確認
それでは、動作確認します。
顧客情報入力画面[inputinfo.html]です。

各項目を入力し、[確認画面へ]をクリックします。

正確に入力されていましたら、入力内容とカートの商品データが
表示され、[注文確定]ボタンが表示されます。

入力内容にミスがあると、エラー表示され、[戻る]ボタン
だけが表示されますので、[戻る]を押して訂正します。

これでショッピングカートの後の購入手続きを作成できました。
次は、注文確定した後の処理をしていきます。
コメント