首页 > 代码库 > session实现购物车
session实现购物车
为实现简单的购物功能(购物车添加、账户查看、购物车商品删除、实时的购物商品数量及价格的计算显示、购物车商品数量可手动输入等),用session实现了一简单的以php语言为基础、连接MySQL数据库的购物车系统。
为了实现用户移动及pc端的适应,用媒体查询实现了响应式效果(文章最后实现)。
程序效果
登录界面:
添加购物车界面(购买数量和总价会在界面动态显示):
可以通过在文本框里输入数字来控制购买数量, 点击删除删除整行,点击清空清所有数据。
不可在文本框里输入小于零或者其他违法字符:
提交订单界面:
点返回购物车中数据没有发生变化,点确认购买库存及账户余额都会相应减少:
点击购买时会先判断余额,如果不足会显示余额不足;然后判断库存,如果不足会显示库存不足;最条件都成立显示购买成功。
其中登录信息以及商品信息从数据库中导出:
需要用到的数据库信息:
订单选项会显示之前的购买记录:
点击会显示详细信息:
做的比较快,大体框架比较简单,还有些许内容待补充、完善。
首先登陆界面代码比较简单,直接上代码:
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px} #backimg{ background-image: url(‘Login/bg.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 100%; height: 100%; } #denglu{ background-image: url(‘Login/bg2.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 40%; height: 48%; position: absolute; left: 30%; top: 23% } #huanchong{ background-image: url(‘Login/login-v2-load_02.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 30%; height: 12%; cursor: pointer; } #huanchong1{ background-image: url(‘Login/login-v2-load_01.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 28%; height: 8%; cursor: pointer; text-align: right; padding-top: 4%; padding-right: 2%; } #shuru{ left: 20%; width: 70%; position: relative; top: 40%; } #uid{ width: 100%; } #pwd{ padding-top: 8%; padding-bottom: 8%; width: 100%; } </style> <body style=" height: 100%"> <div id="backimg"> <div id="denglu" > <div id="shuru"> <form action="dengluchuli.php" method="post" id="myform"> <div id="uid"> 用户名: <input type="text" name="uid" style="width: 40%; height: 8%" /> </div> <div id="pwd" > 密 码: <input type="text" name="pwd" style="width: 40%; height: 8%" /> </div> <div id="huanchong" onclick="denglu()" style="display: block;"></div> <div id="huanchong1" style="display: none;"> <img src="http://www.mamicode.com/Login/loading.gif" /> </div> </form> </div> </div> </div> </body> <script type="text/javascript">function denglu() { var a=document.getElementById("huanchong"); var b=document.getElementById("huanchong1"); a.style.display="none"; b.style.display="block"; document.getElementById("myform").submit(); }</script> </html>
横向长度使用的百分比以,纵向也是用的百分比,前提是使用html5 或者html4 的头部声明:
<!doctype html HTML>
body标签设置百分比为100%:
<body style=" height: 100%">
登录时失败会直接显示失败,由于做得比较简单,没有进行完善就直接输出了:
登陆界面的php跳转代码,首先我做了一个登录类(LOGIN.class.php),只是为了以后方便:
<?php class DBDA { public $host = "localhost"; public $uid = "root"; public $pwd = ""; public $dbname = "12345"; //成员方法 public function Query($sql, $type = 1) { $db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname); $r = $db -> query($sql); if ($type == 1) { return $r -> fetch_all(); } else { return $r; } } } class LoGin { public static $uid; public static $pwd; function __construct($x, $y) { self::$uid = $x; self::$pwd = $y; } static function logi($table, $username, $password, $name) { $db = new DBDA(); $nnn = self::$uid; $sql = " select $name,$password from $table where $username=‘$nnn ‘"; $at = $db -> Query($sql); $p = self::$pwd; if (!empty($p) && $p == $at[0][1]) { $_SESSION["uid"] = $at[0][0]; header("location:main.php"); } else { echo "用户名或密码错误"; } } } ?>
还有一个访问数据库的类(DBDA.class.php),直接上代码:
<?php class DBDA { public $host = "localhost"; public $uid = "root"; public $pwd = ""; public $dbname = "12345"; //成员方法 public function Query($sql, $type = 1) { $db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname); $r = $db -> query($sql); if ($type == 1) { return $r -> fetch_all(); } else { return $r; } } }
使用时直接输入变量和登录数据库的信息就可以了(dengluchuli.php):
<?php session_start(); include("LOGIN.class.php"); $dd = new LoGin($_POST["uid"],$_POST["pwd"]); $ae = $dd::logi("login","username","password","name"); ?>
登录界面做完之后是主界面:
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #right { position: relative; float: right; width: 60%; padding-right: 5%; padding-top: 2%; height: 82%; } #bottom { font-size: 24px; color: white; text-align: center; } table { text-align: center; } table tr td { height: 40px; } table tr th { height: 40px; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } include ("DBDA.class.php"); echo $_SESSION["uid"]; ?> </span> ! </div> <div style="height: 70%; "> <div id="left"> <ul> <li> <a href="http://www.mamicode.com/main.php"> 浏览商品 </a> </li> <li> <a href="http://www.mamicode.com/zhanghu.php"> 查看账户 </a> </li> <li> <a href="http://www.mamicode.com/gouwuche.php"> 查看购物车 </a> </li> <li> <a href="http://www.mamicode.com/dingdan.php"> 订单信息 </a> </li> </ul> </div> <div id="right"> <?php if (!empty($_SESSION["gwc"])) { $atter = $_SESSION["gwc"]; $sum = 0; $total = 0; foreach ($atter as $v) { $db = new DBDA(); $sql = " select price from fruit where name = ‘{$v[0]}‘ "; $at1 = $db -> Query($sql); $total = $total + $at1[0][0] * $v[1]; $sum = $sum + $v[1]; } echo "<div style=‘ background-color: white; width: 100%; ‘ >购物车中有{$sum}件商品,总价格为:{$total} 元。</div>"; } ?> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr style="background-color: darksalmon;"><th>代号</th><th>水果名称</th><th>水果价格</th><th>原产地</th><th>货架</th><th>库存量</th><th></th></tr> <?php $dd = new DBDA(); $sql1 = " select * from fruit "; $at = $dd -> Query($sql1); for ($i = 0; $i < count($at); $i++) { if ($i % 2 == 0) { echo " <tr style=‘ background-color: cornflowerblue ;‘> <td> {$at[$i][0]}</td> <td>{$at[$i][1]}</td> <td>{$at[$i][2]}</td> <td>{$at[$i][3]}</td> <td>{$at[$i][4]}</td> <td>{$at[$i][5]}</td> <td><a href=http://www.mamicode.com/‘jia.php?name={$at[$i][1]}‘ onclick=\"return confirm(‘确定购买么‘)\">购买 </a></td> </tr> "; } else { echo " <tr style=‘background-color:whitesmoke ;‘> <td> {$at[$i][0]}</td> <td>{$at[$i][1]}</td> <td>{$at[$i][2]}</td> <td>{$at[$i][3]}</td> <td>{$at[$i][4]}</td> <td>{$at[$i][5]}</td> <td><a href=http://www.mamicode.com/‘jia.php?name={$at[$i][1]}‘ onclick=\"return confirm(‘确定购买么‘)\">购买 </a></td> </tr> "; } } ?> </table> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
然后是实现点击购买动态的在表格上方显示商品数量和总价(jia.php):
<?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } $name = $_GET["name"]; include ("DBDA.class.php"); $db = new DBDA(); $sql = " select price,numbers from fruit where name=‘{$name}‘ "; $at = $db -> Query($sql); if (empty($_SESSION["gwc"])) { $atter = array( array($name, 1, $at[0][0], $at[0][1])); $_SESSION["gwc"] = $atter; } else { $atter = $_SESSION["gwc"]; if (panduan($name, $atter)) { for ($i = 0; $i < count($atter); $i++) { if ($name == $atter[$i][0]) { $atter[$i][1]++; } } $_SESSION["gwc"] = $atter; } else { $arr = array($name, 1, $at[0][0], $at[0][1]); $atter[] = $arr; $_SESSION["gwc"] = $atter; } } function panduan($name, $atter) { $n = 0; foreach ($atter as $v) { if ($name == $v[0]) { $n++; } } if ($n == 0) { return false; } else { return true; } } header("location:main.php"); ?>
查看账户界面比较简单,就是直接访问数据库就可以了:
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #he { height: 70%; } #right { background-color: white; position: relative; float: right; width: 55%; padding-right: 5%; padding-top: 2%; height: 82%; margin-right: 5%; margin-top: 2%; } #bottom { font-size: 24px; color: white; text-align: center; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } include ("DBDA.class.php"); echo $_SESSION["uid"]; ?></span> ! </div> <div id="he"> <div id="left"> <ul> <li> <a href="http://www.mamicode.com/main.php"> 浏览商品 </a> </li> <li> <a href="http://www.mamicode.com/zhanghu.php"> 查看账户 </a> </li> <li> <a href="http://www.mamicode.com/gouwuche.php"> 查看购物车 </a> </li> <li> <a href="http://www.mamicode.com/dingdan.php"> 订单信息 </a> </li> </ul> </div> <div id="bao"> <div id="right"> 您的账户中还有余额 <span style="color: red;" > <?php $uid = $_SESSION["uid"]; $db = new DBDA(); $sql = " select account from login where name=‘{$uid}‘ "; $at = $db -> Query($sql); echo $at[0][0]; ?></span> 元。 </div> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
查看订单界面(dingdan.php)也比较简单,但是数据库中的内容是在提交订单界面,把数据传入数据库的,然后这个界面直接访问数据库就可以了:
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #right { position: relative; float: right; width: 60%; padding-right: 5%; padding-top: 2%; height: 82%; } #bottom { font-size: 24px; color: white; text-align: center; } table { text-align: center; } table tr td { height: 40px; } table tr th { height: 40px; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } echo $_SESSION["uid"]; ?> </span> ! </div> <div style="height: 70%; "> <div id="left"> <ul> <li><a href="http://www.mamicode.com/main.php">浏览商品</a></li> <li><a href="http://www.mamicode.com/zhanghu.php">查看账户</a></li> <li><a href="http://www.mamicode.com/gouwuche.php">查看购物车</a></li> <li><a href="http://www.mamicode.com/dingdan.php">订单信息</a></li> </ul> </div> <div id="right"> <table border="0" cellspacing="0" cellpadding="0" width="90%"> <tr style="background-color:salmon;"><th>订单号</th><th>订购人</th><th>订购时间</th><th></th></tr> <?php include ("DBDA.class.php"); $db = new DBDA(); $sql = "select * from orders "; $v = $db -> Query($sql); for ($i = 0; $i < count($v); $i++) { if ($i % 2 == 0) { echo " <tr style=‘background-color: burlywood;‘><td> {$v[$i][0]}</td><td> {$v[$i][1]}</td><td> {$v[$i][2]}</td><td><a href=http://www.mamicode.com/‘chakan.php?code={$v[$i][0]}‘> 查看详情"; } else { echo "<tr style=‘background-color: darkgrey;‘><td> {$v[$i][0]}</td><td> {$v[$i][1]}</td><td> {$v[$i][2]}</td><td><a href=http://www.mamicode.com/‘chakan.php?code={$v[$i][0]}‘> 查看详情"; } } ?> </table> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
查看详情(chakan.php)也是直接通过上一层的a标签get一个索引:
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #right { position: relative; float: right; width: 60%; padding-right: 5%; padding-top: 2%; height: 82%; } #bottom { font-size: 24px; color: white; text-align: center; } table { text-align: center; } table tr td { height: 40px; } table tr th { height: 40px; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } echo $_SESSION["uid"]; ?> </span> ! </div> <div style="height: 70%; "> <div id="left"> <ul> <li><a href="http://www.mamicode.com/main.php">浏览商品</a></li> <li><a href="http://www.mamicode.com/zhanghu.php">查看账户</a></li> <li><a href="http://www.mamicode.com/gouwuche.php">查看购物车</a></li> <li><a href="http://www.mamicode.com/dingdan.php">订单信息</a></li> </ul> </div> <div id="right"> <table border="0" cellspacing="0" cellpadding="0" width="90%"> <tr style="background-color:salmon;"><th>水果名称</th><th></th><th>水果数量</th></tr> <?php include ("DBDA.class.php"); $db = new DBDA(); $sql = "select fruitname,count from orderdetails where ordercode=‘{$_GET["code"]}‘ "; $v = $db -> Query($sql); for ($i = 0; $i < count($v); $i++) { if ($i % 2 == 0) { echo " <tr style=‘background-color: burlywood;‘><td> {$v[$i][0]}</td><td> ×</td><td> {$v[$i][1]}</td></tr>"; } else { echo "<tr style=‘background-color: darkgrey;‘><td> {$v[$i][0]}</td><td> ×</td><td> {$v[$i][1]}</td></tr>"; } } ?> </table> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
这个项目主要是查看购物车界面比较复杂,需要多条件判断,引入多个session。
首先购物车里的信息是放在 $_SESSION["gwc"] 里面,
还有 购物商品总数 $_SESSION["sum"] 购物商品总价格 $_SESSION["total"] 。订单确认之后访问数据库减少相应金额,订单数据同时也导入数据库,同时库存也相应减少。
上代码(gouwuche.php):
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #right { position: relative; float: right; width: 60%; padding-right: 5%; padding-top: 2%; height: 82%; } #bottom { font-size: 24px; color: white; text-align: center; } table { text-align: center; } table tr td { height: 40px; } table tr th { height: 40px; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } if (!empty($_SESSION["sz"])) { echo " <script>alert(‘输入须为大于零的数‘) </script> "; $_SESSION["sz"] = ‘‘; } echo $_SESSION["uid"]; ?> </span> ! </div> <div style="height: 70%; "> <div id="left"> <ul> <li> <a href="http://www.mamicode.com/main.php"> 浏览商品 </a> </li> <li> <a href="http://www.mamicode.com/zhanghu.php"> 查看账户 </a> </li> <li> <a href="http://www.mamicode.com/gouwuche.php"> 查看购物车 </a> </li> <li> <a href="http://www.mamicode.com/dingdan.php"> 订单信息 </a> </li> </ul> </div> <div id="right"> <table border="0" cellspacing="0" cellpadding="0" width="80%"> <tr style="background-color: darksalmon;"> <th colspan="5">购物车中有以下商品</th> </tr> <tr style="background-color:whitesmoke ; "> <td>商品名称</td><td>商品单价</td><td>购买数量</td><td>库存</td><td></td> </tr> <form action="tijiao.php" method="post"> <?php if (!empty($_SESSION["gwc"])) { $_SESSION["gwc"] = array_values($_SESSION["gwc"]); $atter = $_SESSION["gwc"]; for ($i = 0; $i < count($atter); $i++) { if ($i % 2 == 0) { echo " <tr style=‘background-color:cornflowerblue;‘><td>{$atter[$i][0]} </td><td>{$atter[$i][2]} </td> <td><input type=‘text‘ name=‘{$atter[$i][0]}‘ value=http://www.mamicode.com/‘{$atter[$i][1]}‘ style=‘width:20%‘ />{$atter[$i][3]} {$atter[$i][3]} "xianshi" style=" float: left; "> <?php if (!empty($_SESSION["low"])) { echo $_SESSION["low"]; unset($_SESSION["low"]); } else if (!empty($_SESSION["cun"])) { echo $_SESSION["cun"]; unset($_SESSION["cun"]); } else { if (!empty($_SESSION["success"])) { echo $_SESSION["success"]; unset($_SESSION["success"]); } } ?> </div> </td> </tr> <tr style=‘text-align: right;‘> <td colspan=‘5‘> <a href="http://www.mamicode.com/qingkong.php"> <input type="button" style=‘width: 20%; height: 100%;‘ value="http://www.mamicode.com/清空购物车" /> </a></td> </tr> </table> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
没有添加购物车是是空。
添加过商品了:
通关文本框输入数字来操作购买数量:
存货不足时:
余额不足时:
判断条件会先判断余额,在判断库存,最后点击提交订单确认确认:
确认之前会跳转一个处理界面(tijiao.php)是判断输入信息是否合法,输入库存是否符合,余额是否符合:
<?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } $atter = $_SESSION["gwc"]; for ($i = 0; $i < count($atter); $i++) { if (!empty($_POST[$atter[$i][0]])) { $sz = $_POST[$atter[$i][0]]; if (is_numeric($sz) && $sz > 0) { $atter[$i][1] = $_POST[$atter[$i][0]]; } else { $_SESSION["sz"] = "输入须为大于零的数字"; header("location:gouwuche.php"); exit ; } } } $_SESSION["gwc"] = $atter; include ("DBDA.class.php"); //求商品数和总价格 $sum = 0; $total = 0; for ($i = 0; $i < count($atter); $i++) { $dbd = new DBDA(); $sqld = " select price from fruit where name = ‘{$atter[$i][0]}‘ "; $at1 = $dbd -> Query($sqld); $total = $total + $at1[0][0] * $atter[$i][1]; $sum = $sum + $atter[$i][1]; } $uid = $_SESSION["uid"]; $db = new DBDA(); $sql = " select account from login where name = ‘{$uid}‘ "; $ss = $db -> Query($sql); if (!empty($atter) && $ss[0][0] < $total) { $_SESSION["low"] = "账户余额不足"; header("location:gouwuche.php"); } else { $cunbuzu = ""; foreach ($atter as $v) { if ($v[1] > $v[3]) { $cunbuzu = $cunbuzu . $v[0] . "的存货不足。"; $_SESSION["cun"] = $cunbuzu; } } if (!empty($cunbuzu)) { header("location:gouwuche.php"); exit ; } if (empty($cunbuzu) && !empty($atter)) { $_SESSION["price"] = $total; $_SESSION["sum"] = $sum; header("location:querengoumai.php"); } else { header("location:gouwuche.php"); } } ?>
购物车中点击删除会删除本条数据,点击清空会删除所有数据(qingkong.php)。
<?php session_start(); if(empty($_SESSION["uid"])) { header("location:denglu.php"); exit; } $_SESSION["gwc"] = ""; header("location:gouwuche.php"); ?>
删除一条数据代码(shanchu.php):
<?php session_start(); if(empty($_SESSION["uid"])) { header("location:denglu.php"); exit; } $atter = $_SESSION["gwc"]; $i = $_GET["name"]; if( count($atter)==1 ) { $atter = ""; } else{ unset($atter[$i]); } $_SESSION["gwc"]=$atter; header("location:gouwuche.php"); ?>
确认界面点击返回购物车信息不变,账户余额不变,点击购买操作数据库和引入session。
直接上代码(querengoumai.php):
<!doctype html HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> * { margin: 0px auto; padding: 0px; } a { text-decoration: none; } #back { background-image: url(Login/bg.jpg); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } #top { height: 10%; font-size: 36px; padding-top: 2%; padding-left: 4%; font-family: "微软雅黑"; font-weight: 700; color: white; } #denglu { text-align: right; padding-right: 5%; font-size: 24px; } #left { padding-left: 15%; position: relative; float: left; height: 70%; padding-top: 10%; } #left ul li { display: block; margin-top: 20%; font-size: 24px; } #he { height: 70%; } #right { position: relative; float: right; width: 55%; padding-right: 5%; padding-top: 2%; height: 82%; margin-right: 5%; margin-top: 2%; } #bottom { font-size: 24px; color: white; text-align: center; } </style> <body style="height: 100%;"> <div id="back"> <div id="top" > 大苹果购物网 </div> <div id="denglu"> 欢迎您, <span style=" color:white;"> <?php session_start(); if (empty($_SESSION["uid"])) { header("location:denglu.php"); exit ; } include ("DBDA.class.php"); echo $_SESSION["uid"]; ?> </span> ! </div> <div id="he"> <div id="left"> <ul> <li> <a href="http://www.mamicode.com/main.php"> 浏览商品 </a> </li> <li> <a href="http://www.mamicode.com/zhanghu.php"> 查看账户 </a> </li> <li> <a href="http://www.mamicode.com/gouwuche.php"> 查看购物车 </a> </li> <li> <a href="http://www.mamicode.com/dingdan.php"> 订单信息 </a> </li> </ul> </div> <div id="bao"> <div id="right"> <table border="0" cellspacing="0" cellpadding="0" width="50%" style="text-align: center;"> <tr style="background-color:red;"> <th colspan="3">订单详情</th> </tr> <?php $atter = $_SESSION["gwc"]; for ($i = 0; $i < count($atter); $i++) { if ($i % 2 == 0) { echo "<tr style=‘background-color: blueviolet;‘><td> {$atter[$i][0]} </td><td>× </td><td> {$atter[$i][1]} </td></tr> "; } else { echo "<tr style=‘background-color:greenyellow;‘><td> {$atter[$i][0]} </td><td>× </td><td> {$atter[$i][1]} </td></tr> "; } $total = $_SESSION["price"]; $sum = $_SESSION["sum"]; } ?> <tr style="background-color:white;"><td colspan="3">商品总价为<?php echo "$total" ?> 元</td></tr> <tr style="background-color:white;"> <td colspan="3"> <a href="http://www.mamicode.com/goumaichuli.php"> <input type="button" name="" id="" value="http://www.mamicode.com/确认购买" /> </a> <a href="http://www.mamicode.com/gouwuche.php"> <input type="button" name="" id="" value="http://www.mamicode.com/返回购物车" /> </a></td> </tr> </table> </div> </div> </div> <div id="bottom" style="padding-top: 1%;"> 发瑞 </div> </div> </body> </html>
之后是购买提交之后的后台数据库处理界面(goumaichuli.php):
<?php session_start(); if(empty($_SESSION["uid"])) { header("location:denglu.php"); exit; } include("DBDA.class.php"); $total = $_SESSION["price"]; $atter = $_SESSION["gwc"]; $uid = $_SESSION["uid"]; $db= new DBDA(); $sql = " select account from login where name = ‘{$uid}‘ "; $ss = $db->Query($sql); $ss[0][0] = $ss[0][0]-$total; $_SESSION["success"] = "购买成功"; $sql1 = " update login set account={$ss[0][0]} where name=‘{$uid }‘ "; $zhifu = $db->Query($sql1,0); for($i =0 ;$i<count($atter);$i++) { $df = new DBDA(); $sqq = " select numbers from fruit where name = ‘{$atter[$i][0]}‘ "; $tt = $df->Query($sqq); $tt[0][0] = $tt[0][0] -$atter[$i][1]; $df1 = new DBDA(); $sqq1 = " update fruit set numbers=‘{$tt[0][0]}‘ where name = ‘{$atter[$i][0]}‘ "; $tt1 = $df1->Query($sqq1,0); } //订单表制作 $ddbzz = $_SESSION["gwc"]; $time = date("Y-m-d,h:i:s"); $sqldd = " select count(*) from orders "; $nb = $df1->Query($sqldd); $code = $nb[0][0]; $code = $num=str_pad($code,4,"0",STR_PAD_LEFT); $sqlgmr = " select username from login where name = ‘{$uid}‘ "; $nn = $df1->Query($sqlgmr); $ordercode = $nn[0][0].$code; $sqltj = " insert into orders values(‘{$ordercode}‘,‘{$uid}‘,‘{$time}‘) "; $ntj= $df1->Query($sqltj,0); //订单详情表 foreach($ddbzz as $n) { $sqllz= " insert into orderdetails values(‘‘,‘{$ordercode}‘,‘{$n[0]}‘,‘{$n[1]}‘) "; $ordertj = $df1->Query($sqllz,0); } unset($_SESSION["gwc"] ); header("location:gouwuche.php") ?>
查看数据库,数据库中内容改变成功。
代码还剩媒体查询内容,以登录界面做例子就是屏宽在范围之内用另一套css样式,直接代码:
@media only screen and (max-width: 500px){ //屏宽小于500px * { margin: 0px auto; padding: 0px} #backimg{ background-image: url(‘Login/bg.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 100%; height: 100%; } #denglu{ background-image: url(‘Login/bg2.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 80%; height: 40%; position: absolute; left: 5%; top: 23% } #huanchong{ background-image: url(‘Login/login-v2-load_02.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 30%; height: 12%; cursor: pointer; } #huanchong1{ background-image: url(‘Login/login-v2-load_01.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 28%; height: 8%; cursor: pointer; text-align: right; padding-top: 4%; padding-right: 2%; } #shuru{ left: 20%; width: 70%; position: relative; top: 40%; } #uid{ width: 100%; } #pwd{ padding-top: 8%; padding-bottom: 8%; width: 100%; } } @media only screen and (min-width: 500px){ //屏宽大于500 * { margin: 0px auto; padding: 0px} #backimg{ background-image: url(‘Login/bg.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 100%; height: 100%; } #denglu{ background-image: url(‘Login/bg2.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 55%; height: 38%; position: absolute; left: 20%; top: 23% } #huanchong{ background-image: url(‘Login/login-v2-load_02.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 30%; height: 10%; cursor: pointer; } #huanchong1{ background-image: url(‘Login/login-v2-load_01.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 28%; height: 7%; cursor: pointer; text-align: right; padding-top: 4%; padding-right: 2%; } #shuru{ left: 20%; width: 70%; position: relative; top: 40%; } #uid{ width: 100%; } #pwd{ padding-top: 8%; padding-bottom: 8%; width: 100%; } } @media only screen and (min-width: 768px){ //屏宽768以上 * { margin: 0px auto; padding: 0px} #backimg{ background-image: url(‘Login/bg.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 100%; height: 100%; } #denglu{ background-image: url(‘Login/bg2.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 50%; height: 48%; position: absolute; left: 20%; top: 23% } #huanchong{ background-image: url(‘Login/login-v2-load_02.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 30%; height: 12%; cursor: pointer; } #huanchong1{ background-image: url(‘Login/login-v2-load_01.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 28%; height: 8%; cursor: pointer; text-align: right; padding-top: 4%; padding-right: 2%; } #shuru{ left: 20%; width: 70%; position: relative; top: 40%; } #uid{ width: 100%; } #pwd{ padding-top: 8%; padding-bottom: 8%; width: 100%; } } @media only screen and (min-width: 1024px){ //屏宽1024以上 * { margin: 0px auto; padding: 0px} #backimg{ background-image: url(‘Login/bg.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 100%; height: 100%; } #denglu{ background-image: url(‘Login/bg2.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 40%; height: 48%; position: absolute; left: 30%; top: 23% } #huanchong{ background-image: url(‘Login/login-v2-load_02.jpg‘); background-size: 100% 100%; background-repeat:no-repeat; width: 30%; height: 12%; cursor: pointer; } #huanchong1{ background-image: url(‘Login/login-v2-load_01.png‘); background-size: 100% 100%; background-repeat:no-repeat; width: 28%; height: 8%; cursor: pointer; text-align: right; padding-top: 4%; padding-right: 2%; } #shuru{ left: 20%; width: 70%; position: relative; top: 40%; } #uid{ width: 100%; } #pwd{ padding-top: 8%; padding-bottom: 8%; width: 100%; } } </style>
会实现:
响应式
其他是相同道理:
session实现购物车
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。