一、需要實(shí)現(xiàn)的頁(yè)面：
Index.aspx：瀏覽商品頁(yè)面，顯示商品列表，用戶可以點(diǎn)擊“加入購(gòu)物車(chē)“。
ViewCart.aspx：查看購(gòu)物車(chē)頁(yè)面，顯示已購(gòu)買(mǎi)的商品信息，可以點(diǎn)擊“刪除“和“提交添加訂單購(gòu)買(mǎi)”商品
ViewAccount.aspx：查看個(gè)人賬戶余額
Login.aspx：登錄頁(yè)面
二、實(shí)現(xiàn)功能：
1.顯示商品列表
2.實(shí)現(xiàn)購(gòu)買(mǎi)功能，購(gòu)買(mǎi)的時(shí)候動(dòng)態(tài)顯示購(gòu)物車(chē)中的商品數(shù)量和商品總價(jià)格
3.點(diǎn)擊查看購(gòu)物車(chē)后，顯示已購(gòu)買(mǎi)的商品。注意“購(gòu)買(mǎi)數(shù)量”列，如果對(duì)一種商品點(diǎn)擊購(gòu)買(mǎi)多次，其“購(gòu)買(mǎi)數(shù)量”不斷增加。
4.刪除購(gòu)物車(chē)中已購(gòu)買(mǎi)的商品。
如果某商品的“購(gòu)買(mǎi)數(shù)量”為1時(shí)，則點(diǎn)擊“刪除”時(shí)，直接從購(gòu)物車(chē)中刪除該商品；
如果商品的“購(gòu)買(mǎi)數(shù)量”大于1時(shí)，點(diǎn)擊一次“刪除”時(shí)，把其購(gòu)買(mǎi)數(shù)量減1。直到該商品購(gòu)買(mǎi)數(shù)量為1時(shí)，再點(diǎn)擊刪除時(shí)，刪除該商品
5.在查看完購(gòu)物車(chē)后還可以點(diǎn)擊“瀏覽商品”繼續(xù)購(gòu)買(mǎi)。并在上面顯示已購(gòu)買(mǎi)的商品數(shù)量和總價(jià)格。
6.在“查看購(gòu)物車(chē)“后，可以提交訂單。
但在提交訂單時(shí)，須完成以下功能：
(a)檢查用戶是否已登錄，未登錄則轉(zhuǎn)到Login.aspx頁(yè)面
(b)檢查用戶賬戶余額是否能夠滿足本次夠買(mǎi)
(c)檢查庫(kù)存數(shù)量是否滿足本次夠買(mǎi)
(d)如果以上條件都滿足則
i.從用戶賬戶中扣除本次購(gòu)買(mǎi)的總價(jià)格
ii.從商品庫(kù)存中扣除本次每種商品的購(gòu)買(mǎi)數(shù)量
iii.向訂單表和訂單內(nèi)容表中加入本次購(gòu)買(mǎi)的商品信息
7.點(diǎn)擊查看賬戶，可以查看該用戶的賬戶余額
操作代碼如下：
1.首先先做一個(gè)登錄頁(yè)面：loginpage.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/>
</head>
<style>
.title{
margin-left: 750px;
margin-top: 150px;
}
.quanju{
margin-left: 650px;
margin-top: -460px;
}
.name,.pwd{
max-width: 120px;
}
.yangshi1{
margin-top: 200px;
}
.header{
width: 100%;
height: 80px;
background: #e0e0e0;
}
.ps{
margin-left: 100px;
margin-top: -100px;
}
</style>
<body>
<form class="form-horizontal" role="form" action="dengluchuli.php" method="post">
<div class="header">
<img src="img/logo.png" width="200" height="50" />
<div >果 蔬 網(wǎng)</div>
</div>
<h3 class="title">用戶登錄</h3>
<img src="./img/果蔬專(zhuān)場(chǎng).jpg" width="500" height="400" class="ps" />
<div class="quanju">
<div class="form-group yangshi1">
<label for="firstname" class="col-sm-2 control-label">用戶名:</label>
<div class="col-sm-10">
<input type="text" class="form-control name" name="uid" placeholder="請(qǐng)輸入用戶名">
</div>
</div>
<div class="form-group yangshi2">
<label for="lastname" class="col-sm-2 control-label">密碼:</label>
<div class="col-sm-10">
<input type="text" class="form-control pwd" name="pwd" placeholder="請(qǐng)輸入密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
保存密碼 </label>
<label>
<input type="checkbox">
下次自動(dòng)登錄 </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-warning" value="登錄" onclick="return login()" >
登錄
</button>
</div>
</div>
</div>
</form>
</body>
<script>
function login(){
var uid = document.getElementsByTagName("input")[0].value;
if(uid==""){
alert("請(qǐng)輸入用戶名!");
return false;
}
var pwd = document.getElementsByTagName("input")[1].value;
if(pwd==""){
alert("請(qǐng)輸入密碼!");
return false;
}
}
</script>
</html>
效果如圖：
2.在做一個(gè)登錄的處理頁(yè)面:dengluchuli.php
<?php
session_start();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
require_once "./DBDA.class.php";
$db = new DBDA();
$sql = "select * from login where username='{$uid}'";
$arr = $db->query($sql,0);
if($arr[0][2]==$pwd && !empty($pwd)){
$_SESSION["uid"]=$uid;
header("location:shopping_list.php");
}else{
echo "登陸失敗!";
}
這樣就可以和數(shù)據(jù)庫(kù)聯(lián)系了，這個(gè)是數(shù)據(jù)庫(kù)的登錄帳號(hào)和密碼，驗(yàn)證帳號(hào)，密碼，然后跳到主頁(yè):shopping_list.php
