PHPで簡単ショッピングカート！【3.カート本体】

PHP

前回、PHPの概要について再説明しました。

前回の記事を読んでいただければ、
今から説明するショッピングカートの内容が
わかりやすくなっていると思います。

では、ショッピングカート本体です。

ショッピングカート本体

ファイル名：item_cart.php

＜記述例＞

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../fshopstyle.css">
    <title>さかなショップショッピングカート</title>
  </head>
  <body>
    <main>
      <section class="txtbox">
<?php
require_once('../com_func.php');
if(isset($_POST['id']))
{
  $post=sanitize($_POST);
  $p_id=$post['id'];
  $p_name=$post['name'];
  $p_price=$post['price'];
  $p_num=$post['num'];
  $flag1=false;
  if(isset($_SESSION['id'])==true)
  {
    $id=$_SESSION['id'];
    $name=$_SESSION['name'];
    $price=$_SESSION['price'];
    $num=$_SESSION['num'];
    if(in_array($p_id,$id)==true)
    {
      $alert = "<script type='text/javascript'>alert('その商品はすでにカートに入っています。');</script>";
      print $alert;
      $flag1=true;
    }
  }
  if($flag1==false)
  {
    $id[]=$p_id;
    $name[]=$p_name;
    $price[]=$p_price;
    $num[]=$p_num;
    $_SESSION['id']=$id;
    $_SESSION['name']=$name;
    $_SESSION['price']=$price;
    $_SESSION['num']=$num;
  }
$max=count($id);
}
else
{
if(isset($_SESSION['id'])==false){
  $max=0;
}else{
  $id=$_SESSION['id'];
  $name=$_SESSION['name'];
  $price=$_SESSION['price'];
  $num=$_SESSION['num'];
  $max=count($id);
}
}
print '<h3>さかなショップショッピングカート</h3>';
print '<div style="text-align: center;">';
print '<ul class="cartflow">';
print '<li class="choice">カート</li>';
print '<li>情報入力</li>';
print '<li>入力確認</li>';
print '<li>注文確定</li></ul></div>';
print '<form method="post" action="change_num.php">';
print '<table><tr>';
print '<td>No.</td><td>商品名</td><td>価格</td><td>数量</td>';
print '<td>小計</td><td>削除</td></tr>';
if($max==0)
{
  print '<tr><td colspan="6">カートに商品が入っていません。</td></tr></table>';
  print '<a href="../items/item_list.html">商品一覧へ戻る</a>';
  exit();
}
$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><input type="text" name="num'.$i.'" style="width:30px;" value="'.$num[$i].'" class="right"></td>';
  $sub=$price[$i] * $num[$i];
  $sum += $sub;
  print '<td class="right">'.number_format($sub).'</td>';
  print '<td><input type="submit" name="del'.$i.'" value="削除" onClick="return confirm('."'削除してよろしいですか？');".'"></td></tr>';
}
print '<tr><td colspan="4" class="right">合　計</td>';
print '<td class="right">'.number_format($sum).'</td>';
print '<td></td></tr><tr>';
print '<td colspan="4" class="right">消費税</td>';
print '<td class="right">'.number_format($sum * 0.1).'</td>';
print '<td></td></tr><tr>';
print '<td colspan="4" class="right">合計金額</td>';
print '<td class="right">'.number_format($sum * 1.1).'</td>';
print '<td></td></tr></table>';
print '<input type="hidden" name="max" value="'.$max.'">';
print '<div class="btnright">';
print '<input class="btn3" type="submit" name="nchk" value="数量変更">';
print '<input class="btnr" type="submit" name="cclear" value="カートクリア" onClick="return confirm('."'カートクリアしますか？');".'">';
print '</div>';
print '<div class="btnbox">';
print '<input class="btn1" type="submit" name="back" value="商品一覧に戻る">';
print '<input class="btn2" type="submit" name="next" value="ご購入手続きへ">';
print '</div></form>';
?>
      </section>
    </main>
  </body>
</html>

＜表示例＞

1・3・14・109行目：PHP記述部分
PHPを記述する部分は、
「<?php」 と 「?>」の間です。
このファイルでは、2箇所（1～3・14～109）に記述しています。

2行目：セッションスタート
session_start 関数を使ってセッションをスタートさせます。
既にスタートしていたらそのセッションを再開します。

後で述べますが、$_SESSION（セッション）を
使用するためにスタートさせています。

15行目：require_once()を使いファイルを読み込んでいます。
ここで読み込むファイルは、
前回の記事で説明した[com_func.php]です。

16行目：if文を使い分岐しています。
ここでは、isset($_POST[‘id’])が
真(true)であれば、17～49行目までの処理を行い、
偽(false)であれば、51～61行目までの処理を行う
ということです。

この条件にあるisset関数は、その変数が存在し、
値があるかどうか、空（null）でないかをチェックします。

ここでの条件は、$_POST[‘id’]が存在し、空でなければ
真(true)となります。

18行目：15行目で読み込んだファイルにある関数[sanitize]
　　　　で受信した[$_POST]を変換し、$post変数へ代入
19～22行目：受信したデータをそれぞれの変数に代入
23行目：[$flag1]に偽(false)を代入
24行目：$_SESSION[‘id’] が真(true)なら25～36行目の処理を行う
26～29行目：セッションに保存されたデータを変数に代入

30行目：in_array関数で重複チェックし
　　　　重複していれば31～35行目の処理を行う
同じ商品がカートに入ったか確認（重複チェック）するために、
in_array関数を使います。
例：in_array(値1,配列1)
配列1の中に指定した値1があるかどうかを探します。

32・33行目：alertを使ってアラート（警告）を表示
alertは、JavaScriptです。
書式例：alert(‘アラートメッセージ’);
34行目：[$flag1]に真(true)を代入

ここで使われている $flag1 は、重複チェックで
重複していた場合に真(true)、
重複していない場合は偽(false)を代入しています。

37行目：$flag1が偽(false)の場合つまり
　　　　重複していなければ38～47行目の処理を行う
39～42行目：変数に代入
43～46行目：セッションに代入(保存)
書式例：$_SESSION[‘キー’]=値;

48行目：$max変数に$idのデータ数を代入
countは変数の要素の数を数える関数です。
例：count(変数)

52行目：$_SESSION[‘id’] が偽(false)なら53行目の処理を行い、
　　　　違っていたら55～59行目の処理を行う
53行目：$maxに0を代入
55～58行目：変数にセッションの値を代入
59行目：$max変数に$idのデータ数を代入
62行目：ショッピングカートのタイトル
63～68行目：カートの流れを表示
69行目：formで[change_num.php]へ送信
70～72行目：カートの見出し
73～78行目：[$max]が0の時カートが空である旨表示
78行目：exit()で強制的に終了させる
79行目：小計($sub)と合計($sum)とを初期化(0を代入)
80行目：for文で81～90行目の処理を繰り返し

for文は、繰り返し命令です。
例：for(条件){処理}
条件が真(true)の間処理を続けます。

$i=0：$i の初期値を0とする。
$i<$max：$max より $i が小さい間。
$i++：処理を行うごとに $i を1増やします。
という意味です。

$idの配列内のデータ数を$maxに代入し
その数だけfor文でループを組んで表示させています。
82行目で $i1 に $i+1 を代入し、No.の値を
1から表示させるようにしています。

84・88・92・95・99行目：number_formatで3桁のカンマ区切りにする

85行目：inputで数量を入力(修正)できるようにする
formでデータを送るときnameで識別していますが、
数量の名前がすべてnumだと区別が付きません。

それで、商品ごとにnameをnum1、num2、num3、と
変更させると解決します。

PHPでは、
name=”num’.$i.'”
HTMLでは、
name=”num<?php print $i; ?>”
と記述します。

89行目でもinputで個別削除のどのボタンを押したか
区別するために数量の時と同じくnameを
del1、del2、del3、としています。

86行目：価格($price) x 数量($num) を 小計($sub)に代入
87行目：小計($sub)を合計($sum)に代入演算子[+=]で加算
[$sum += $sub;] は [$sum = $sum + $sub;]と同じ

89・103行目：confirmを使って確認画面([OK][キャンセル])を表示
confirmは、確認ダイアログを表示するJavaScriptです。
書式例：confirm(‘メッセージ’);
89行目では個別削除の確認、103行目ではカートクリアの確認です。

91～93行目：合計を表示させています。
94～96行目：消費税(合計x0.1)を表示させています。
97～99行目：合計金額(合計x1.1)を表示させています。
100行目：type=”hidden”で表示させずに[$max]を送信
102行目：数量変更ボタンの表示
106・107行目：商品一覧へ戻るとご購入手続きへボタンの表示
108行目：formを終わる

24・26～29・43～46・52・55～58行目で
使われている変数[$_SESSION]は、
ほかのページに移動しても配列変数の情報を
保持し続けます。

$_SESSION（セッション）とは

PHPのファイル間を移動してもデータが残る変数として
$_SESSION（セッション）があります。
これはスーパーグローバル変数（定義済み変数）です。

CSSファイルの追加分

ファイル名：fshopstyle.css（追加分）

＜記述例＞

table {
  margin: 10px;
  padding: 10px;
  border-collapse: collapse;
  border: 2px solid dodgerblue;
}
table tr:nth-child(even) {
  background: whitesmoke;
}
table tr:nth-child(odd) {
  background: lightcyan;
}
table tr th,td {
  border: 1px solid dodgerblue;
  padding: 2px 10px;
  text-align: center;
}
table .right{
  text-align: right;
}
.btnright{
  text-align: right;
  margin: 10px 20px;
}
.txtbox{
  display: inline-block;
  margin: 5px;
}
.btnbox{
  text-align: center;
  margin: 10px 0;
}
.btn1{
  color: honeydew;
  font-size: 16px;
  background: gray;
  border-radius: 30px 0 0 30px;
  padding: 6px 20px;
  margin: 5px;
}
.btn2{
  color: honeydew;
  font-size: 16px;
  background: dodgerblue;
  border-radius: 0 30px 30px 0;
  padding: 6px 20px;
  margin: 5px;
}
.btn3{
  color: darkgreen;
  font-size: 16px;
  background: honeydew;
  border-radius: 30px;
  padding: 6px 12px;
  margin: 5px;
}
.btnr{
  color: crimson;
  font-size: 16px;
  background: lavenderblush;
  border-radius: 30px;
  border: 3px solid crimson;
  padding: 6px 12px;
  font-weight: bold;
  margin: 5px;
}
ul.cartflow {
  padding:10px;
  background:palegoldenrod;
  border:1px solid silver;
  margin: 10px auto;
  display:inline-block;
}
ul.cartflow li{
  background: darkgray;
  border-radius: 0 30% 30% 0 / 0 50% 50% 0;
  padding: 5px 15px 5px 10px;
  width:80px;
  display:inline-block;
  text-align: center;
  margin: 0;
}
ul li.choice{
  background: tomato;
  border:3px solid maroon;
  font-weight: bold;
}

今回は、[item_cart.php]と[fshopstyle.css]とを
説明しました。

結構長くなりましたので、
[change_num.php]は次回にします。

スポンサーリンク

コメント

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