現在ショッピングカートを作成しており、セッションに連想配列で管理番号と購入個数のデータを保存しています。
確認画面で商品個数を変更すると確認画面を自動更新して個数の変更が反映されるようにしたいと考えています。
処理としては
★ 個数を変更した時点でページが更新される。
★ $_SESSION[cart]の$_SESSION[cart][kanri_no]に入っている個数のデータを管理番号を元に照合して上書き変更したいと考えています。
わかるかたおりましたらご回答いただければと考えております。
大変お手数をおかけしますがよろしくお願いいたします。
JavaScriptを使用して、個数を選択した時に画面に(金額と合計金額が)反映されるようにしてみました。
変更点が多いのと、コメントも多くなっていた事から、不要なコードを削除したものを以下にそのまま記載します。
主な変更点は、
1.JavaScriptによる個数選択変更時の画面への反映
2.PHPによる個数変更の適用(コメントに記載したコードと同じ)
3.SQLクエリ発行回数を1回に変更(コメントに記載したコードと同じ)
4.不要なコメント等の削除
変更点の細かい解説は省略させていただきます。m(__)m
※解説が必要な部分がありましたら、返信でお願いします。
「kakunin.php」
<? session_start(); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>カート確認・変更</title> <script type="text/javascript"> <!-- function selChange(sel, ptxt, sum){ var element = document.getElementById(sel); var num = element.selectedIndex; var price = document.getElementById(ptxt); var sumtxt = num * price.innerHTML; var sumprice = document.getElementById(sum); sumprice.innerHTML = sumtxt; var sumnum = document.getElementsByName("sumtxt"); var allsum = 0; for (var n=0;n<sumnum.length;n++) { var goukei = new Array(); goukei[n] = sumnum[n].innerHTML; allsum += parseInt(goukei[n]); } var allsumprice = document.getElementById("sougoukei"); allsumprice.innerHTML = allsum; } //--> </script> </head> <body> <div> <?php echo "<table border=\"1\" bordercolor=\"black\" cellspacing=\"0\" cellpadding=\"3\">\r\n<tbody>\r\n"; echo "<tr>\r\n<td bgcolor=\"yellow\">写真</td>\r\n<td bgcolor=\"yellow\">タイトル</td>\r\n<td bgcolor=\"yellow\">値段</td>\r\n <td bgcolor=\"yellow\">個数</td>\r\n<td bgcolor=\"yellow\">金額</td>\r\n<td bgcolor=\"yellow\">削除</td>\r\n</tr>\r\n"; require "database_connect.php"; $kanri_no = $_POST["kanri_no"]; $_SESSION["cart"]["$kanri_no"] = $_POST["kosuu"]; if($_POST["kosuu"] == "0" || $_POST["delete"]){ unset($_SESSION["cart"][$kanri_no]); } $fnum = 0; $n = 0; // 追加 foreach ($_SESSION["cart"] as $kanri_no => $kosuu){ if($kosuu != 0) { $fnum++; $fname = 'myForm'.$fnum; $selname = 'mySel'.$fnum; $ptxtname = 'myPrice'.$fnum; $sumname = 'mySum'.$fnum; $n++; echo "<tr>\r\n<td><form id=\"$fname\" name=\"$fname\" action=\"kakunin.php\" method=\"POST\">"; $sql = "select * from products_table WHERE PRODUCT_NAME = '".$kanri_no."'"; $result = mysql_query($sql); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { // 写真 // 価格もここで変数に入れておきます。 echo $picture = $row["PICTURE"]; $price = $row["PRICE"]; } // 合計を配列に代入。 $sum[$n] = $price * $kosuu ; //タイトル echo "</td>\r\n<td>".$kanri_no."</td>\r\n"; //値段 echo "<td><span id=\"$ptxtname\">$price</span><input type=\"hidden\" name=\"kanri_no\" value=\"$kanri_no\"></td>\r\n"; //個数 $html = "<td><select name=\"kosuu\" id=\"$selname\" onchange='selChange(\"$selname\", \"$ptxtname\", \"$sumname\")'>\r\n"; $html .= "<option selected>$kosuu</option>\r\n"; $html .= "<option value=\"1\">1</option>\r\n"; $html .= "<option value=\"2\">2</option>\r\n"; $html .= "<option value=\"3\">3</option>\r\n"; $html .= "<option value=\"4\">4</option>\r\n"; $html .= "<option value=\"5\">5</option>\r\n"; $html .= "<option value=\"6\">6</option>\r\n"; $html .= "<option value=\"7\">7</option>\r\n"; $html .= "<option value=\"8\">8</option>\r\n"; $html .= "<option value=\"9\">9</option>\r\n"; $html .= "</select>\r\n</td>\r\n"; echo $html; //金額 echo "<td><span id=\"$sumname\" name=\"sumtxt\">$sum[$n]</span></td>\r\n"; //削除ボタン echo "<td><input type=\"submit\" name=\"delete\" value=\"削除する\"><br>\r\n"; echo "<input type=\"submit\" name=\"submit\" value=\"変更する\"></form></td>\r\n</tr>\r\n"; } } // 総合計金額の計算 if($sum) { foreach($sum as $value) { $goukei += $value; } } echo "<tr>\r\n<td align=\"right\" colspan=\"6\"><b>合計金額:<font color=\"red\" size=\"+2\"><span id=\"sougoukei\">$goukei</span></font><font size=\"+2\">円</font></b></td>\r\n"; echo "</tr>\r\n</tbody>\r\n</table>\r\n"; $html = "<div>\r\n"; $html .= "<table height=\"40\" border=\"0\" valign=\"center\">\r\n"; $html .= "<tr>\r\n"; $html .= "<td valign=\"center\"><a href=\"http://www.aiomock2008.sakura.ne.jp/TEST/test2.php\">引き続き商品を購入する</a></td>\r\n"; $html .= "<td valign=\"center\"><form method=\"POST\" action=\"kakunin2.php\"> <input type=\"submit\" name=\"kara\" value=\"カートを空にする\"></form></td>\r\n"; $html .= "<td valign=\"center\"><form method=\"POST\" action=\"kakunin3.php\"> <input type=\"submit\" name=\"kounyuu\" value=\"購入する\" onClick=\"return confirm('本当にボタンを押しますか?')\"></form></td>\r\n"; $html .= "</tr>\r\n</table>\r\n</div>\r\n"; $html .= "</div>\r\n</body>\r\n</html>\r\n"; echo $html; ?>
個数の選択変更ごとにその都度セッションデータを変更するのではなく、変更ボタンで確定した時にPHPで変更するようにしてあります。
なお、コメントに記載したコードと同じように、フォームの送信先は「kakunin.php」自身にしてあります。
もし元のコードのように、一旦「kakunin4.php」に飛ばしたい場合は、フォームの送信先を「action=\"kakunin.php\"」から「 action=\"kakunin4.php\"」にして、kakunin4.phpを以下のように変更する事で動作するはずです。
<?php session_start(); $kanri_no = $_POST["kanri_no"]; $_SESSION["cart"]["$kanri_no"] = $_POST["kosuu"]; if(isset($_POST["delete"])) { unset( $_SESSION["cart"]["$kanri_no"] ); } header('Location:kakunin.php'); ?> ||>
セッションの値($_SESSION[cart]の中身)はサーバの方に保管されてますから、
ページ遷移を伴わずに画面に見えない所でサーバとやりとりしなければならなくなります。
(Ajaxと呼ばれる非同期通信を用いる方法です。)
ページ遷移を伴ったサイトを一人で作れない段階でAjaxはハードルが高すぎます。
お望みの方式は今のところはあきらめておくほうが良いでしょう。
楽天ですら、ページ遷移させているのだからと言えば納得できませんか?
ご回答ありがとうございます。
JavaScriptを使用して、個数を選択した時に画面に(金額と合計金額が)反映されるようにしてみました。
変更点が多いのと、コメントも多くなっていた事から、不要なコードを削除したものを以下にそのまま記載します。
主な変更点は、
1.JavaScriptによる個数選択変更時の画面への反映
2.PHPによる個数変更の適用(コメントに記載したコードと同じ)
3.SQLクエリ発行回数を1回に変更(コメントに記載したコードと同じ)
4.不要なコメント等の削除
変更点の細かい解説は省略させていただきます。m(__)m
※解説が必要な部分がありましたら、返信でお願いします。
「kakunin.php」
<? session_start(); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>カート確認・変更</title> <script type="text/javascript"> <!-- function selChange(sel, ptxt, sum){ var element = document.getElementById(sel); var num = element.selectedIndex; var price = document.getElementById(ptxt); var sumtxt = num * price.innerHTML; var sumprice = document.getElementById(sum); sumprice.innerHTML = sumtxt; var sumnum = document.getElementsByName("sumtxt"); var allsum = 0; for (var n=0;n<sumnum.length;n++) { var goukei = new Array(); goukei[n] = sumnum[n].innerHTML; allsum += parseInt(goukei[n]); } var allsumprice = document.getElementById("sougoukei"); allsumprice.innerHTML = allsum; } //--> </script> </head> <body> <div> <?php echo "<table border=\"1\" bordercolor=\"black\" cellspacing=\"0\" cellpadding=\"3\">\r\n<tbody>\r\n"; echo "<tr>\r\n<td bgcolor=\"yellow\">写真</td>\r\n<td bgcolor=\"yellow\">タイトル</td>\r\n<td bgcolor=\"yellow\">値段</td>\r\n <td bgcolor=\"yellow\">個数</td>\r\n<td bgcolor=\"yellow\">金額</td>\r\n<td bgcolor=\"yellow\">削除</td>\r\n</tr>\r\n"; require "database_connect.php"; $kanri_no = $_POST["kanri_no"]; $_SESSION["cart"]["$kanri_no"] = $_POST["kosuu"]; if($_POST["kosuu"] == "0" || $_POST["delete"]){ unset($_SESSION["cart"][$kanri_no]); } $fnum = 0; $n = 0; // 追加 foreach ($_SESSION["cart"] as $kanri_no => $kosuu){ if($kosuu != 0) { $fnum++; $fname = 'myForm'.$fnum; $selname = 'mySel'.$fnum; $ptxtname = 'myPrice'.$fnum; $sumname = 'mySum'.$fnum; $n++; echo "<tr>\r\n<td><form id=\"$fname\" name=\"$fname\" action=\"kakunin.php\" method=\"POST\">"; $sql = "select * from products_table WHERE PRODUCT_NAME = '".$kanri_no."'"; $result = mysql_query($sql); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { // 写真 // 価格もここで変数に入れておきます。 echo $picture = $row["PICTURE"]; $price = $row["PRICE"]; } // 合計を配列に代入。 $sum[$n] = $price * $kosuu ; //タイトル echo "</td>\r\n<td>".$kanri_no."</td>\r\n"; //値段 echo "<td><span id=\"$ptxtname\">$price</span><input type=\"hidden\" name=\"kanri_no\" value=\"$kanri_no\"></td>\r\n"; //個数 $html = "<td><select name=\"kosuu\" id=\"$selname\" onchange='selChange(\"$selname\", \"$ptxtname\", \"$sumname\")'>\r\n"; $html .= "<option selected>$kosuu</option>\r\n"; $html .= "<option value=\"1\">1</option>\r\n"; $html .= "<option value=\"2\">2</option>\r\n"; $html .= "<option value=\"3\">3</option>\r\n"; $html .= "<option value=\"4\">4</option>\r\n"; $html .= "<option value=\"5\">5</option>\r\n"; $html .= "<option value=\"6\">6</option>\r\n"; $html .= "<option value=\"7\">7</option>\r\n"; $html .= "<option value=\"8\">8</option>\r\n"; $html .= "<option value=\"9\">9</option>\r\n"; $html .= "</select>\r\n</td>\r\n"; echo $html; //金額 echo "<td><span id=\"$sumname\" name=\"sumtxt\">$sum[$n]</span></td>\r\n"; //削除ボタン echo "<td><input type=\"submit\" name=\"delete\" value=\"削除する\"><br>\r\n"; echo "<input type=\"submit\" name=\"submit\" value=\"変更する\"></form></td>\r\n</tr>\r\n"; } } // 総合計金額の計算 if($sum) { foreach($sum as $value) { $goukei += $value; } } echo "<tr>\r\n<td align=\"right\" colspan=\"6\"><b>合計金額:<font color=\"red\" size=\"+2\"><span id=\"sougoukei\">$goukei</span></font><font size=\"+2\">円</font></b></td>\r\n"; echo "</tr>\r\n</tbody>\r\n</table>\r\n"; $html = "<div>\r\n"; $html .= "<table height=\"40\" border=\"0\" valign=\"center\">\r\n"; $html .= "<tr>\r\n"; $html .= "<td valign=\"center\"><a href=\"http://www.aiomock2008.sakura.ne.jp/TEST/test2.php\">引き続き商品を購入する</a></td>\r\n"; $html .= "<td valign=\"center\"><form method=\"POST\" action=\"kakunin2.php\"> <input type=\"submit\" name=\"kara\" value=\"カートを空にする\"></form></td>\r\n"; $html .= "<td valign=\"center\"><form method=\"POST\" action=\"kakunin3.php\"> <input type=\"submit\" name=\"kounyuu\" value=\"購入する\" onClick=\"return confirm('本当にボタンを押しますか?')\"></form></td>\r\n"; $html .= "</tr>\r\n</table>\r\n</div>\r\n"; $html .= "</div>\r\n</body>\r\n</html>\r\n"; echo $html; ?>
個数の選択変更ごとにその都度セッションデータを変更するのではなく、変更ボタンで確定した時にPHPで変更するようにしてあります。
なお、コメントに記載したコードと同じように、フォームの送信先は「kakunin.php」自身にしてあります。
もし元のコードのように、一旦「kakunin4.php」に飛ばしたい場合は、フォームの送信先を「action=\"kakunin.php\"」から「 action=\"kakunin4.php\"」にして、kakunin4.phpを以下のように変更する事で動作するはずです。
<?php session_start(); $kanri_no = $_POST["kanri_no"]; $_SESSION["cart"]["$kanri_no"] = $_POST["kosuu"]; if(isset($_POST["delete"])) { unset( $_SESSION["cart"]["$kanri_no"] ); } header('Location:kakunin.php'); ?> ||>
ご回答ありがとうございます。
コードを実行してみたところ写真と値段が表示されず、また金額が表示されませんでした。。
個数を変えても自動的に切り替わるということができなかったです。。。
どのように対処すればよろしいでしょうか。お手数おかけします。。。
コード自体が実行できてどのような流れでできているかということが把握でき、その後の機能の追加に問題がなければ私の場合問題ありません。まず機能が充実してつかえるということを一番大事に考えています。プログラムは、その後勉強していければと考えています。。。
今回のrouge_2008さんの回答誠にありがとうございます。
用意していたものですが、動作確認は適当です。
javascriptで送信するという手を使っているので「カートを空にする」という事も、この中に入れ込む事なども可能になるでしょう。
<?php session_start(); // ***** POST受け取りとセッション格納 ***** // このような処理は最初のほうにまとめておくと見通しが良くなります。 // 追加が行われること無くカートの中身確認に来たときのため$_POST['kanri_no']の存在チェックは追加してます。 if(isset($_POST["delete"])) { unset($_SESSION["cart"][$_POST["delete"]]); } elseif(isset($_POST['kanri_no']) && isset($_POST['kosuu'])) { $_SESSION['cart'][$_POST['kanri_no']] = $_POST['kosuu']; } // ***** スタイルシート ***** // コードを短く見やすくするためにはスタイルシートを覚えるのは必須。これは記述例です。 // echoではなくヒアドキュメントを使って、そのままの形で出力というのも覚えておくと便利です。 print <<<endMark <style> th { background-color:yellow; } </style> endMark; // ***** javascript ***** print <<<endMark <script type="text/javascript"> <!-- function kosuu(k, c){ if(confirm(k + "の個数を変更します")) { document.forms[0].kanri_no.value = k; document.forms[0].kosuu.value = c; document.forms[0].submit; } } function sakujyo(k){ if(confirm(k + "を削除します")) { document.forms[0].sakujyo.value = k; document.forms[0].submit; } } //--> </script> endMark; // ***** TABLEヘッダ ***** print <<<endMark <form method="POST" action="kakunin4.php"> <input type="hidden" name="sakujyo" value=""> <input type="hidden" name="kanri_no" value=""> <input type="hidden" name="kosuu" value=""> <table border="1" bordercolor="black" cellspacing="0" cellpadding="3"> <thead> <tr><th>写真</th><th>タイトル</th><th>値段</th><th>個数</th><th>金額</th><th>削除</th></tr> </thead> <tbody> endMark; // ***** SQLの発行準備 ***** // データベースへの接続はコード内では一度行っておけば良いです。 require "database_connect.php"; // ***** TABLEボディ ***** // 並び順にこだわらないのであればSQLは一回で済ます事も可能だけど今回は既存の方式で。 $goukei = 0; foreach ($_SESSION["cart"] as $kanri_no=>$kosuu){ $sql = "SELECT * FROM TEST WHERE PRODUCT_NAME = '" . $kanri_no . "'"; $res = mysql_query($sql); while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) { $kingaku = $row['PRICE'] * $kosuu; $goukei += $kingaku; echo '<tr>' . '<td>' . $row['PICTURE'] . '</td>' . '<td>' . $row['PRODUCT_NAME'] . '</td>' . '<td>' . $row['PRICE'] . '</td>' . '<td><select onChange="kosuu(\'' . $row['PRODUCT_NAME'] . '\',this.options[this.selectedIndex].value)">' . '<option value="' . $kosuu . '" selected="selected">' . $kosuu . '</option>' . '<option value="1">1</option>' . '<option value="2">2</option>' . '<option value="3">3</option>' . '<option value="4">4</option>' . '<option value="5">5</option>' . '<option value="6">6</option>' . '<option value="7">7</option>' . '<option value="8">8</option>' . '<option value="9">9</option></select>' . '</td>' . '<td>' . $kingaku . '</td>' . '<td><input type="button" value="削除する" onClick="sakujyo(\'' . $row['PRODUCT_NAME'] . '\')"></td>' . "</tr>\n"; } } // ***** TABLEボディ最終行 ***** echo '<tr>' . '<td align="right" colspan="6">' . '<b>合計金額:<font id="goukei" color="red" size="+2">' . $goukei . '</font><font size="+2">円</font></b></td>' . "</tr>\n"; // ***** TABLEフッタ ***** print <<<endMark </tbody> </table> </form> endMark; // ***** 操作ボタン表示 ***** print <<<endMark <br /><br /> <table height="40" border="0" valign="center"> <tr> <td valign="center"> <a href="test2.html"> 引き続き商品を購入する</a> </td> <td valign="center"> <form method="POST" action="kakunin2.php"><br> <input type="submit" name="kara" value="カートを空にする"></form> </td> <td valign="center"> <input type="submit" name="kounyuu" value="購入する" onClick="return confirm('本当にボタンを押しますか?')"></form> </td> </tr> </table> endMark; ?>
ご回答ありがとうございます。非常に短くシンプルになっており感動しました。
ありがとうございます。
ご回答ありがとうございます。
コードを実行してみたところ写真と値段が表示されず、また金額が表示されませんでした。。
個数を変えても自動的に切り替わるということができなかったです。。。
どのように対処すればよろしいでしょうか。お手数おかけします。。。
コード自体が実行できてどのような流れでできているかということが把握でき、その後の機能の追加に問題がなければ私の場合問題ありません。まず機能が充実してつかえるということを一番大事に考えています。プログラムは、その後勉強していければと考えています。。。
今回のrouge_2008さんの回答誠にありがとうございます。