实习二：网上商城订单系统功能模块开发.doc

实习二：网上商城订单系统功能模块开发(完整版)

———————————————————————————————— 作者：
———————————————————————————————— 日期：

25

个人收集整理 勿做商业用途
实习二
1. 在站点根目录下新建order文件夹，在该文件夹中设置个人购物订单payment。asp的静态效果及Css布局设置，效果如下图所示：

Html代码如下所示
〈％＠LANGUAGE=”VBSCRIPT” CODEPAGE=”936”％〉
<！DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1。0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1—transitional。dtd”〉
〈html xmlns="http://www.w3。org/1999/xhtml”>
〈head>
<meta http-equiv=”Content-Type" content="text/html； charset=gb2312” />
<title>生成订单页面</title〉
〈link href="../styles/payment。css" rel=”stylesheet” type="text/css" /〉
〈/head〉

〈body〉
<table align="center" border=”0" class="cart” cellspacing=”1” cellpadding="4” width=”770"〉
〈tr class=”tdtbg">
<td colspan="5”〉购物车</td〉
〈/tr>
〈tr class=”tdtbg"〉
<td class="l1" 〉商品编号〈/td>
〈td class=”l2” 〉名称</td>
<td class="l3" 〉单价</td〉
<td class="l4” 〉数量〈/td〉
〈td class=”l5” >金额</td〉
〈/tr〉
<tr class='tdbg’ >
<td colspan=”5” >目前您的购物车是空的。</td>
</tr〉
<tr class=’tdbg'>
<td〉＆nbsp;〈/td〉
〈td>＆nbsp；</td〉
〈td〉&nbsp;</td〉
〈td>＆nbsp;〈/td〉
<td>＆nbsp；〈/td〉
〈/tr〉
〈tr〉
<td colspan="5" align="center" class="total"〉总计金额：￥</td〉
〈/tr>
<tr>
〈td colspan="5” align=”center"〉〈input type=”button” value="修改购物车"〉<input type="button” value=”返回继续购物"〉〈/td〉
</tr〉
</table>
<form name=”form1" METHOD=”POST">
<table border=”0" class=”order” width=”770">
〈tr〉
〈td colspan=”2" class=”info">您购物车中没有商品,不可以填写订单！〈/td>
〈/tr>
〈tr>
〈td height=”35” colspan="2" align=”center">〈strong><font color="#0000FF”〉 收货人信息 〈/font〉</strong>〈/td>
</tr〉
<tr〉
<td class=”ol1” 〉会员名：〈/td>
<td class="ol2"〉&nbsp;〈/td〉
〈/tr〉
<tr〉
〈td class="ol1”>收货人姓名：〈/td〉
<td class="ol2”〉〈input type="text” name=”username” ize="15" maxlength=”25”>
〈span>*〈/span>〈/td>
</tr>
〈tr〉
〈td class=”ol1">联系电话：</td>
〈td class=”ol2"><input type=”text" name="tel" maxlength="64">〈span>＊〈/span〉</td〉
</tr〉
〈tr〉
〈td class=”ol1"〉收货地址：〈/td>
〈td class="ol2”><input type=”text” name="address" size=”40” maxlength="128”><span〉＊</span〉</td〉
</tr>
〈tr〉
<td class=”ol1”>邮编：</td〉
〈td class=”ol2">〈input type=”text" name=”postcode” size="15” maxlength="25”〉<span>＊</span〉</td〉
</tr〉
<tr〉
〈td class="ol1”〉付款方式：〈/td>
〈td class=”ol2”>〈select name="payment">〈option value="1">货到付款</option><option value=”2">网上支付</option〉〈/select〉<span〉＊</span>〈/td〉
</tr>
<tr>
〈td class=”ol1">备注:</td〉
〈td class="ol2"〉〈textarea name=”userremark" cols="70" rows=”10" 〉〈/textarea>〈span〉*〈/span>〈/td>
</tr〉
〈tr>
〈td colspan=”2”〉<input type=”submit” value="提交订单”>〈input type="button" value=”返回继续购物”></td>
〈/tr〉
〈/table>
</form>
</body>
〈/html〉
Css代码如下所示：
body {
font-size:12px;
background—color:#FFFFFF；
background-image: url(。。/img/back.gif）；
background—repeat： repeat;
｝
table
｛
width：770px；
margin：auto；
｝
。cart｛
background—color:#F0F0FF；
border：1px ＃884400 solid；
｝
。order ｛
margin—top：20px;
background-color：＃F0F0FF;
border：1px #884400 solid；
}
td ｛
font-size：12px;
text—align:center；
}
.l1，。l3，。l4｛
width：15％;
}
。l2{
width：30%；
｝
。tdtbg {
color：#FFFFFF；
background—color：＃996633;
}
。tdbg {
color:#000000；
background—color:#FFCC66;
｝
。total
｛
color:blue；background-color:＃FFFF66;”
｝
.ol1{
width：20％;
text-align:right；
padding—right:15px;
background：#996633；
color:＃FFFFFF；
｝
.ol2｛
text—align：left；
background:#FFCC66；
padding—left：15px；
｝
span
｛
color:#FF0000；
｝
。ordersuccess
｛
align：center;
border：0px;
width：550px；
｝
.info
｛
text-align：center；
font-size：18px；
color：＃FF0000；
font—family：”黑体”；
padding:10px；
｝
下面开始进行动态效果的开发.首先进行登录判断,根据登录成功标志变量session（“login”）是否为yes，如果是则表示登录成功,进入该页面下的购物车数据显示和订单表单的操作；否则,通过msgbox函数弹出一个对话框，并结束该网页的执行。代码如下：
在<%@LANGUAGE="VBSCRIPT” CODEPAGE="936"％〉之下加入：
〈！—-#include file=”.。/product/cartclass.asp”-—〉
〈％
response。buffer=true
response。expires=0
response。CacheControl="no-cache"
if session(”loginyes")<〉"yes" then
%〉
〈script language=”vbscript”〉
if msgbox(”您没有登录，不可以进行此操作！" & vbcrlf ＆ ”是否回首页登录？”,292,”登录警示!”）=vbyes then
window.location。href=".。/index。asp"
else
window。location.href="。。/product/basket。asp"
end if
</script〉
〈%
response。end（)
end if
%〉
购物车表格的内容与购物车网页文件basket。asp中购物车表格的设计是类似的，代码如下：
<％
dim ucart
set ucart=new usercart
ucart.createcart
％>
<!DOCTYPE html PUBLIC ”—//W3C//DTD XHTML 1.0 Transitional//EN” ”http：//www。w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”〉
<head〉
<meta http—equiv=”Content-Type" content=”text/html; charset=gb2312" /〉
〈title〉生成订单页面〈/title〉
<link href=”。./styles/payment。css" rel="stylesheet" type="text/css” /〉
〈/head〉

<body〉
<table align="center" border=”0” class="cart” cellspacing=”1” cellpadding=”4" width="770”>
<tr class="tdtbg”>
<td colspan="5">购物车〈/td〉
</tr〉
〈tr class=”tdtbg”〉
<td class="l1” 〉商品编号〈/td〉
<td class=”l2” >名称〈/td〉
<td class="l3" >单价〈/td>
<td class="l4” 〉数量〈/td>
<td class=”l5" >金额〈/td〉
〈/tr〉
〈%if ucart.checkempty（） then％>
〈tr class='tdbg' 〉
<td colspan=”5" 〉目前您的购物车是空的。〈/td〉
〈/tr>
〈％
else
for i=0 to ubound(ucart。viewcart（),2）
％>
<tr class=’tdbg'〉
<td>〈%=ucart。viewcart（）（0，i)％></td〉
〈td>〈％=ucart.viewcart（）(1,i）％〉</td>
<td〉〈％=ucart。viewcart（）(2,i）％〉</td〉
<td>〈％=ucart.viewcart(）(5,i)%></td〉
〈td><％=ucart。viewcart(）（3，i）*ucart.viewcart（)（5,i）%〉〈/td〉
</tr〉
<％next%〉
〈％end if％>
<tr>
<td colspan=”5" align=”center" class="total”〉总计金额:<%
if ucart。tprice（)（1）="" then
total=0
else
total=ucart.tprice（)(1)
end if
response。write total
％>￥〈/td〉
〈/tr〉
页面效果如下所示：

关于网页中的订单表单中显示的数据是从数据库中会员信息表member中取出来的，具体操作选择“应用程序—绑定",点击添加按钮，进入如下对话框:

然后展开记录集把相应字段拖放到相应位置，效果如下所示：

然后在表单form1中，添加5个隐藏控件,代码如下：
<input type=”hidden” name=”oldurl”>
<input type="hidden” name=”action" value="paid”〉
〈input name=”ordertime” type="hidden” value="<％=now(）％〉”〉
〈input name=”userid" type=”hidden" value=”<%=（Recordset1.Fields.Item(”id").Value)％〉"〉
<input name="total" type="hidden” value="〈%=total%>"〉

然后选择应用程序———服务器行为命令，单击添加按钮-—-插入记录，在弹出的对话框中进行如下所示的设置:

此时，网站具备了提交订单的功能,用户在如下面

检查购物车信息是否有误，检查收货人信息是否需要修改（注意：谁登陆就默认谁是收货人），比如你的收货人信息想要改为张三，那么直接在该页面上修改即可。如下：

改完成后,击交单，此时orderform数据库中会新增一条记录，如下所示：

下面开始设置订单插入成功后跳转至paymentsuccess。aspe页面,该页面的效果如下所示:

实现代码如下：
〈％＠LANGUAGE=”VBSCRIPT" CODEPAGE="936”%〉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ”http：//www。w3。org/TR/xhtml1/DTD/xhtml1—transitional.dtd”>
〈html xmlns=”http://www.w3.org/1999/xhtml">
〈head>
<meta http-equiv="Content—Type” content=”text/html; charset=gb2312" /〉
〈title>结账成功页面〈/title〉
〈script language="javascript"〉
function gouwu（）｛
window。location。href="../product/showclass。asp";
｝
〈/script>
<style type="text/css"〉
〈！-—
body ｛
font-size：12px;
background-color：＃FFFFFF;
background—image: url(img/back.gif)；
background—repeat: repeat;
｝
。ordersuccess ｛
align：center；
border：0px;
width:550px;
｝
.tdbg ｛ color：＃000000;
background—color：#FFCC66；
text-align:center;
}
。tdtbg {color:#FFFFFF;
background—color：＃996633;
｝
--〉
〈/style〉
</head〉

〈body〉
〈table class="ordersuccess" align=”center" border="0" cellspacing=”1" cellpadding=”4" width="550”〉
<tr class=”tdtbg"〉
〈td align="center"〉<strong〉提交订单成功〈/strong></td>
</tr>
<tr class="tdbg”〉
<td align="center”〉
您的订单已经提交成功，请等待我们给您发货。
请尽快付款,以便我们尽快给你们发货！
〈a href="#”>付款</a〉
〈/br〉</br>〈/br>
〈a href=”#">订单查询</a〉</td〉
</tr〉
<tr class=”tdbg">
<td>〈input type=”button" value="返回继续购物" onClick=gouwu()"/>〈/td>
</tr>
〈/table>
〈/body>
〈/html〉
在该页面中会根据付款类型的选择提示不同的信息，如选择的是货到付款，则显示“您的订单已经提交成功，请等待我们给您发货”，如选择的是货到付款,则显示“请尽快付款，以便我们尽快给您发货！付款"
为了取得刚提交成功的订单信息，可以通过对订单信息表orderform中所有的记录进行按照orderid字段的降序排序,并取得的第一条记录即是刚提交成功的订单记录。具体如下：

然后，利用判断语句实现，代码如下:
〈tr class=”tdbg"〉
〈td align=”center”〉
<％if (Recordset1.Fields.Item（"payment”)。Value）=1 then％〉
您的订单已经提交成功,请等待我们给您发货.
〈%else%>
请尽快付款，以便我们尽快给你们发货！
<a href=”#”〉付款〈/a>
<%end if%>
</br〉</br></br〉
<a href=”#”〉订单查询</a〉</td>
将session购物车中的所有信息内容存储至数据表orderform_sub中并清空购物车，具体实现代码参照如下：
<body〉
<％
dim ucart
set ucart=new usercart
ucart.createcart(）
set rs=server.CreateObject("adodb.recordset”）
sql="select * from orderform_sub"
rs.open sql,MM_conn_STRING，1,3
for i=0 to ubound(ucart。viewcart（）,2)
rs.addnew
rs（"orderid”)=（Recordset1。Fields。Item("orderid"）。Value)
rs（”proid"）=ucart。viewcart（)（0,i）
rs("proname")=ucart.viewcart（)(1，i)
rs（”proprice"）=ucart.viewcart（)(2,i)*0.8
rs（"proamount”）=ucart.viewcart（)（5，i)
next
rs。update
rs。close
set rs=nothing
total=ucart。tprice(）(1）
session。contents.remove（”usercart”)
%〉
〈table class=”ordersuccess" align=”center” border="0" cellspacing="1” cellpadding=”4” width="550”〉
<tr class="tdtbg”〉
〈td align=”center”〉<strong〉提交订单成功〈/strong>〈/td〉
</tr>
<tr class=”tdbg"〉
〈td align=”center">
〈％if (Recordset1.Fields。Item（”payment"）.Value）=1 then%〉
您的订单已经提交成功,请等待我们给您发货。
<％else%>
请尽快付款，以便我们尽快给你们发货!
<a href=”＃">付款〈/a>
<％end if%〉
</br〉</br>〈/br>
<form name="dopay" action=”orderlist.asp" method=”post”〉
〈input type="hidden” name="paytotal" value=”<%=total％〉">
〈input type=”hidden” name="orderid” value=”<％=（Recordset1.Fields。Item（”orderid”）。Value）%>">
</form〉
<a href=”＃" onclick="sub（)"〉订单查询〈/a〉</td>
〈/tr>
<tr class=”tdbg">
<td><input type="button” value=”返回继续购物” onClick=gouwu(）"/>〈/td〉
〈/tr>
</table>
〈/body>
单击订单查询超链接实现跳转至订单查询页面orderlist.asp，并传输订单号及该订单的总价格。具体实现思路是把订单号和订单的总价格分别放至表单dopay中的两个隐藏区域的值中,然后通过“订单查询"超链接的“单击”动作激活表单dopay的提交工作，代码如下:
〈a href=”＃”〉付款</a>
<％end if％>
</br〉</br></br〉
<form name=”dopay" action=”orderlist。asp” method="post">
<input type=”hidden" name=”paytotal” value="<％=total%〉"〉
〈input type="hidden" name=”orderid" value=”〈%=(Recordset1.Fields.Item（"orderid”).Value）%〉”〉
</form>
〈a href="＃” onclick=”sub（）"〉订单查询</a></td〉
</tr>

此时设置basket.asp页面中的结账按钮，单击结账按钮就会实现页面跳转至payment.asp，，代码如下:
input type=”button" value=”结账" onclick="jiezhang()”>
〈script language=”javascript"〉
function jiezhang（){
window.location。href="。。/order/payment.asp"
｝
下面开始设计订单查询页面orderlist.asp
页面效果如下:

实现代码如下:
<％@LANGUAGE="VBSCRIPT” CODEPAGE=”936”％〉
〈！DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN” ”http：//www.w3.org/TR/xhtml1/DTD/xhtml1—transitional.dtd”>
<html xmlns="http：//www。w3。org/1999/xhtml"〉
<head〉
<meta http-equiv=”Content-Type" content=”text/html； charset=gb2312” />
<title〉订单查询页面〈/title〉
〈link href=".。/styles/index。css” rel=”stylesheet" type=”text/css” />
<link href="../styles/payment。css” rel=”stylesheet" type="text/css” />
〈link href="。。/styles/orderlist。css" rel="stylesheet" type="text/css” /〉
〈/head〉

<body>
〈div id="box">
<！——＃include file=”../inc/top。asp”--〉
〈p align=”center"〉〈font size="+1”〉〈b〉您没有登录，不可以进行此操作,请返回〈a href=".。/index.asp”〉首页</a〉登录</b>〈/font></p〉
<div id=”left”〉
<table width=””>
<tr〉〈td>您没有订单！〈/td>〈/tr〉
<tr>〈td〉<％= Session（"MM_Username”） %〉客户，您的订单如下：</td></tr〉
<tr>〈td>〈a href=”＃">订单</a〉〈/td></tr>
</table〉
〈div〉&nbsp；&nbsp;〈/div〉
</div>
〈div id=”right">
〈table align=”center" border=”0” class="cart” cellspacing=”1" cellpadding="4”〉
〈tr class=”tdtbg”>
<td colspan=”5”>订单详细内容〈/td〉
</tr〉
<tr class=”tdtbg">
〈td class=”l1” 〉商品编号〈/td〉
<td class=”l2" 〉名称〈/td〉
<td class=”l3” >单价</td〉
〈td class="l4” 〉数量</td〉
〈td class="l5" >金额</td〉
〈/tr>
<tr class=’tdbg'>
<td〉1</td>
<td>1</td>
<td>1</td>
〈td>1</td>
〈td>1</td〉
〈/tr>
<tr>
<td colspan=”5" align=”center" class="total">总计金额:1￥〈/td>
〈/tr〉
</table>
<table border="0” class=”order" >
〈tr>
<td height="35” colspan=”2" align="center">〈strong〉<font color=”＃0000FF”〉 收货人信息 </font></strong>〈/td〉
</tr〉
<tr〉
<td class="ol1" 〉会员名：</td〉
〈td class="ol2”〉1〈/td〉
</tr>
〈tr〉
〈td class=”ol1"〉收货人姓名：</td>
〈td class=”ol2”>1〈/td〉
〈/tr>
〈tr>
<td class=”ol1”〉联系电话：〈/td>
<td class=”ol2”〉1〈/td>
〈/tr〉
〈tr〉
<td class="ol1”>收货地址：〈/td〉
〈td class=”ol2”〉1〈/td〉
〈/tr〉
〈tr>
<td class=”ol1”〉邮编：〈/td>
<td class=”ol2"〉1〈/td>
</tr〉
<tr〉
<td class=”ol1">付款方式：</td>
<td class=”ol2">1〈/td>
</tr>
<tr><td>
〈form action="pay.asp" method="post" name="dopay”>
<input type=”hidden” name="paytotal" value=””>
〈input type=”hidden" name=”orderid” value=”"〉
〈/form>
〈/td〉</tr>
<tr>
〈td class=”ol1”>备注:</td〉
〈td class="ol2”〉1〈/td>
</tr〉
〈/table>

〈/div〉
〈！—-＃include file=”。。/inc/foot。asp"-->
〈/div〉
〈/body>
</html〉
Orderlist.css代码如下:
＠charset "gb2312”;
*｛
margin：5px；
}
body{
color：#F00；
}
＃box ＃left{
float：left;
width:170px；

margin-right：10px；
text—align：center;
｝

＃box ＃right table｛
width:585px；
｝

在该页面中实现一个功能,判断用户是否登录，如果登录则显示该用户的订单信息，否则提示用户“您没有登录,不可以进行此操作，请返回”，并给出一个首页的超链接。实现代码如下：
〈div id=”box”>
〈!--＃include file=”。./inc/top。asp"—->
<％if session(”loginyes")〈〉"yes" then%>
<p align=”center"〉<font size="+1”〉<b〉您没有登录,不可以进行此操作，请返回<a href="。。/index.asp"〉首页</a〉登录</b〉〈/font〉〈/p〉
<！--#include file=".。/inc/foot。asp"--〉
<％
response。end()
end if
%>
然后对div=left这个盒子的内容进行动态开发，首先在应用程序-绑定标签中展开session,把session中的MM_username拖放到网页“客户”文本之前。
然后选择应用程序-绑定命令，单击添加按钮—记录集，进入记录集对话框，具体设计如图：

单击记录集对话框中的高级按钮，把sql代码改成如下所示的效果。

选中页面中您没有订单哪一行，选择应用程序-服务器行为命令，单击添加按钮—显示区域-如果记录集为空则显示区域.
选中订单文本后，选择应用程序—服务器行为命令，单击添加按钮—重复区域，具体设置如下图所示:

下面完善订单文本的超链接效果，使得单击订单文本能在右边的名为right框架内显示订单详细信息,而且能把订单编号传输过去,具体代码如下所示:
<tr>
〈td〉〈a href=”orderlist.asp？orderid=〈％=(Recordset1.Fields。Item("orderid”）。Value）％>”〉订单<%=i％〉〈/a>〈/td〉
〈/tr〉
其中<%=i％〉主要是用来显示订单编码,利用i变量来实现订单编码的全部程序，如下所示：
〈tr><td><%= Session（"MM_Username") ％〉客户，您的订单如下：〈/td></tr〉
<%i=1％〉
〈％
While （(Repeat1__numRows <〉 0) AND （NOT Recordset1。EOF))
％>
<tr>
〈td〉<a href=”orderlist。asp?orderid=〈％=（Recordset1.Fields。Item(”orderid")。Value）％>"〉订单<％=i％>〈/a〉〈/td>
</tr〉
〈％
i=i+1
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
Recordset1.MoveNext()
Wend
％〉
下面接收传输过来的订单编号然后根据orderid来查询出数据表orderform_sub中订单编号为orderid的商品记录信息。具体设置如下图：

然后把相应的字段拖放到网页的相应位置，如下图所示：

然后选中改行设置重复区域。其代码为：
<％
While （（Repeat2__numRows <> 0) AND （NOT Recordset2.EOF))
%>
<tr class=’tdbg'〉
〈td〉〈%=（Recordset2.Fields。Item(”proid"）。Value）％〉</td>
<td〉〈%=(Recordset2.Fields。Item（"proname”).Value）％〉</td〉
〈td〉<%=(Recordset2.Fields。Item("proprice"）.Value）%〉〈/td>
〈td〉〈％=(Recordset2。Fields.Item（”proamount")。Value）%〉</td〉
〈td>〈％=（Recordset2.Fields。Item(”proamount”）。Value）*(Record