セッション処理の応用02
☆★データーでの確認★☆
カートに入れる仕組みを作る(セッション版)
カートに入れる仕組みを作る(セッション版)
- 1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。
- 1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。
一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。
この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。
【 書式 】
<?php if (isset($_GET[id])) { // データが渡されたとき // セッションを開始 session_start(); if ($_GET[id] == 0) { // id=0 が渡されたときはカートをクリア unset($_SESSION[sescart]); } else { // id=0 以外はカートに入れる if (! session_is_registered("sescart")) { // セッション変数が未定義なら新規に登録 session_register("sescart"); } // 現在のカートデータに今回の商品IDをカンマ区切りで追加 $cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id]; // セッション変数にデータを代入して保存 $_SESSION[sescart] = $cart; } } ?> <?php // 追加したデータを表示 print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>"; ?>
ソースコード
ソースコード【 HTML 】
[1-2.php]<?php if (isset($_GET[id])) { // データが渡されたとき // セッションを開始 session_start(); if ($_GET[id] == 0) { // id=0 が渡されたときはカートをクリア unset($_SESSION[sescart]); } else { // id=0 以外はカートに入れる if (! session_is_registered("sescart")) { // セッション変数が未定義なら新規に登録 session_register("sescart"); } // 現在のカートデータに今回の商品IDをカンマ区切りで追加 $cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id]; // セッション変数にデータを代入して保存 $_SESSION[sescart] = $cart; } } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>webサイト開発 | PHPサンプルサイト</title> <link href="../css/reset.css" rel="stylesheet" type="text/css" media="screen"> <!-- CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/example.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <!-- End CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/embet.css"> <link href="../css/common.css" rel="stylesheet" type="text/css" media="screen"> <link href="../css/page.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#list_menu > li > ul').slideUp() }); $('#list_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#list_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <style type="text/css"> #main_menu > li > ul { display:none; padding: 10px 10px 5px; background: rgba(169, 169, 170, 1.0); cursor: pointer!important; } </style> </head> <body> <!--▽#container--> <div id="container"> <header class="clearfix"> <h1><a href="../index.html"><img src="../images/logo.png" width="75" alt=""></a><span>webサイト開発 | PHPサンプルサイト</span></h1> <!--▽#menu--> <ul id="main_menu"> <li><a href=""><img src="../images/menu.png" width="38px" alt=""></a> <ul class="menu_home"> <li><span class="menu_title">HOME</span> <li><a href="#top">TOP</a></li> </li></ul> <ul class="menu_link"> <li><span class="menu_title">LINK</span> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/"></a>動画で確認するscript | FlashとJavaScrip</li> <li><a href="http://webry.dousetsu.com/"></a>実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</li> </li></ul> <ul class="menu_sns"> <li><span class="menu_title">SNS</span> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </li></ul> </li> </ul> </header> <!--▽.content--> <div class="content"> <!--▽.col1--> <section class="col1"> <h2>セッション処理の応用</h2> </section><!--▲.col1--> <!--▽.content_inner--> <div class="content_inner"> <section class="col2"> <section id="post01" class="col2-1 post"> <a href="#post01"><h2><span class="ita">1-2 </span>カートに入れる仕組みを作る(セッション版)</h2></a> <div class="post_inner"> <p class="p_point"><span class="point">point </span>カートに入れる仕組みを作る(セッション版)</p> <ul class="list01"> <li>1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。</li> <li>1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。<br> 一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。<br> この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。</li> </ul> </div> </section><!--▲.col2-1--> <section class="col-code"> <div id="post02" class="post"> <a href="#post02"><h2><span>PHPのコードを表示</span></h2></a> <div class="post_inner"> <div class="inner"> <pre> <code> <?php if (isset($_GET[id])) { // データが渡されたとき // セッションを開始 session_start(); if ($_GET[id] == 0) { // id=0 が渡されたときはカートをクリア unset($_SESSION[sescart]); } else { // id=0 以外はカートに入れる if (! session_is_registered("sescart")) { // セッション変数が未定義なら新規に登録 session_register("sescart"); } // 現在のカートデータに今回の商品IDをカンマ区切りで追加 $cart .= (strlen($cart) == 0 ? "" : ",") . $_GET[id]; // セッション変数にデータを代入して保存 $_SESSION[sescart] = $cart; // 追加したデータを表示 print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>"; } } ?> </code> </pre> </div> </div> </div> </section> <section class="col2"> <div id="post03" class="post"> <a href="#post03"><h2><span>PHPでの表示</span></h2></a> <div class="post_inner"> <div class="inner"> <div class="php wd_wrap"> <?php // 追加したデータを表示 print "今回カートに入れた商品IDは" . $_GET[id] . "<br><br>"; ?> </div> </div> </div> </div> </section> <section class="col2"> <div id="post04" class="post"> <a href="#post04"><h2><span>FORMでの入力</span></h2></a> <div class="post_inner"> <div class="inner"> <div> <table border="1"> <tr> <th>商品ID</th> <th>商品名</th> <th><br></th> </tr> <tr> <td>1</td> <td>冷蔵庫 AB-1234</td> <td><a href="<?=$_SESSION[PHP_SELF] . "?id=1"?>">カートに入れる</a></td> </tr> <tr> <td>2</td> <td>エアコン AC-99999(w)</td> <td><a href="<?=$_SESSION[PHP_SELF] . "?id=2"?>">カートに入れる</a></td> </tr> <tr> <td>3</td> <td>テレビ TV-A3456-k123</td> <td><a href="<?=$_SESSION[PHP_SELF] . "?id=3"?>">カートに入れる</a></td> </tr> <tr> <td>4</td> <td>パソコン PC-A99999 Win-98</td> <td><a href="<?=$_SESSION[PHP_SELF] . "?id=4"?>">カートに入れる</a></td> </tr> <tr> <td>5</td> <td>洗濯機 SK-TK2424 380L</td> <td><a href="<?=$_SESSION[PHP_SELF] . "?id=5"?>">カートに入れる</a></td> </tr> <tr> <td colspan="3" align="center"> <a href="<?=$_SESSION[PHP_SELF] . "?id=0"?>">カートをクリア</a> </td> </tr> <tr> <td colspan="3" align="center"> <a href="1-2_02.php#post04">カートの中身を見る</a> </td> </tr> </table> </div> </div> </div> </div> </section> <p class="c_top"><a href="../index.html#13">▲ カテゴリートップへ戻る</a></p> <section class="bottom clearfix"> <a href="#"><p class="page_top">TOP</p></a> <div class="share_box"> <p><span>このサイトをシェアする</span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="webrynote">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></p> </div> </section><!--▲.bottom--> </section><!--▲.content--> <footer> <ul> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/">動画で確認するscript | FlashとJavaScrip</a></li> <li><a href="http://webry.dousetsu.com/">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </ul> <address>Copyright © 2014 webry - 『 webサイト開発 | PHPサンプルサイト 』 All Rights Reserved.</address> </footer> </div><!--▲.content_inner--> </div><!--▲#container--> </body> </html>
ソースコード【 HTML 】
[1-2_02.php]<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>webサイト開発 | PHPサンプルサイト</title> <link href="../css/reset.css" rel="stylesheet" type="text/css" media="screen"> <!-- CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/example.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <!-- End CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/embet.css"> <link href="../css/common.css" rel="stylesheet" type="text/css" media="screen"> <link href="../css/page.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#list_menu > li > ul').slideUp() }); $('#list_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#list_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <style type="text/css"> #main_menu > li > ul { display:none; padding: 10px 10px 5px; background: rgba(169, 169, 170, 1.0); cursor: pointer!important; } </style> </head> <body> <!--▽#container--> <div id="container"> <header class="clearfix"> <h1><a href="../index.html"><img src="../images/logo.png" width="75" alt=""></a><span>webサイト開発 | PHPサンプルサイト</span></h1> <!--▽#menu--> <ul id="main_menu"> <li><a href=""><img src="../images/menu.png" width="38px" alt=""></a> <ul class="menu_home"> <li><span class="menu_title">HOME</span> <li><a href="#top">TOP</a></li> </li></ul> <ul class="menu_link"> <li><span class="menu_title">LINK</span> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/"></a>動画で確認するscript | FlashとJavaScrip</li> <li><a href="http://webry.dousetsu.com/"></a>実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</li> </li></ul> <ul class="menu_sns"> <li><span class="menu_title">SNS</span> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </li></ul> </li> </ul> </header> <!--▽.content--> <div class="content"> <!--▽.col1--> <section class="col1"> <h2>セッション処理の応用</h2> </section><!--▲.col1--> <!--▽.content_inner--> <div class="content_inner"> <section class="col2"> <section id="post01" class="col2-1 post"> <a href="#post01"><h2><span class="ita">1-2 </span>カートに入れる仕組みを作る(セッション版)</h2></a> <div class="post_inner"> <p class="p_point"><span class="point">point </span>カートに入れる仕組みを作る(セッション版)</p> <ul class="list01"> <li>1-2.php と 1-2_02.php は、セッション機能を使ってショッピングカートの基本的な処理を行う例。</li> <li>1-2.php の画面で「カートに入れる」のリンクをクリックすると、その行の商品IDがGETで自分自身に送られる。1-2.php はそのデータを受け取り、現在のセッション変数のデータを取り出した後、今回選択された商品IDをカンマ区切りで追加して、再度同じ変数に保存する。<br> 一方、「カートの中身を見る」のリンクをクリックすると 1-2_02.php の画面へページ移動する。<br> この PHP ファイルでは、カート情報の入ったセッション変数の内容を読み込み、商品データの配列を参照しながら、カートの内容を一覧表示する。</li> </ul> </div> </section><!--▲.col2-1--> <section class="col-code"> <div id="post02" class="post"> <a href="#post02"><h2><span>PHPのコードを表示</span></h2></a> <div class="post_inner"> <div class="inner"> <pre> <code> <?php ?> </code> </pre> </div> </div> </div> </section> <section class="col2"> <div id="post03" class="post"> <a href="#post03"><h2><span>PHPでの表示</span></h2></a> <div class="post_inner"> <div class="inner"> <div class="php wd_wrap"> <?php // セッション開始 session_start(); if (! session_is_registered("sescart")) { // セッション変数が未定義の場合 $html = "【 現在、カートは殻です 】"; } else { // セッション変数のデータを読み込み $cart = $_SESSION[sescart]; // 商品名データを配列に代入 $product = array("冷蔵庫 AB-1234" , "エアコン AC-99999(w)", "テレビ TV-A3456-k123", "パソコン PC-A99999 Win-98", "洗濯機 SK-TK2424 380L"); // 現在のカート内容を列挙 $html = "【 現在のカートの現状 】<br><br>"; $cartarray = explode(",", $cart); foreach ($cartarray as $data) { // 商品IDから商品名を取得してHTML文に追加 $html .= $product[$data - 1] . "<br>"; } } ?> </div> </div> </div> </div> </section> <section class="col2"> <div id="post04" class="post"> <a href="#post04"><h2><span>FORMでの入力</span></h2></a> <div class="post_inner"> <div class="inner"> <div> <?=$html ?> <br> <br> <a href="1-2.php#post04">戻る</a> </div> </div> </div> </div> </section> <p class="c_top"><a href="../index.html#13">▲ カテゴリートップへ戻る</a></p> <section class="bottom clearfix"> <a href="#"><p class="page_top">TOP</p></a> <div class="share_box"> <p><span>このサイトをシェアする</span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="webrynote">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></p> </div> </section><!--▲.bottom--> </section><!--▲.content--> <footer> <ul> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/">動画で確認するscript | FlashとJavaScrip</a></li> <li><a href="http://webry.dousetsu.com/">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </ul> <address>Copyright © 2014 webry - 『 webサイト開発 | PHPサンプルサイト 』 All Rights Reserved.</address> </footer> </div><!--▲.content_inner--> </div><!--▲#container--> </body> </html>
追加された外部ファイル
- page.css