在INTERDEV中实现网上购物推车
类别: ASP教程
本文将介绍在InterDev中实现网上商店购物车功能的方法,具体步骤如下:
一、 数据库结构:
产品数据表(Products): 存放产品信息
产品名 ProductName
产品编号 ProductID
单价 Price
分类编号 CategoryID
Cart:购物车数据表,临时存放客户的订单
产品编号 ProductID
产品名 ProductName
价格 Price
客户Session标号 SessionID
订购数量 Quantity
Orders:订单,当用户确认订单后,订货数据将由Cart表转存入此表
产品编号 ProductID
客户Session编号 SessionID
订购数量 Quantity
Customers:客户,实现客户登录时将使用该表
二、 建立数据库连接:
1、 添加数据源:在控制面板中选择:管理工具/ODBC数据源,单击添加,选择数据库驱动程序为Microsoft Access Driver,单击"完成",在弹出的对话框中为数据源命名为"Store",单击选择,找到建立好的.mdb文件,然后单击确定
2、 建立连接:在InterDev中的Project Exlporer中右击选择Add Data Connection,选择数据源,命名为Con,连接建立后的所有数据存取都将基于此连接。
三、 购物车要实现的基本功能和对应的文件:
产品浏览和选购 Products.asp
放入购物车 AddtoCart.asp
浏览购物车 ViewCart.asp
删除一个产品 DeleteItem.asp
更新购物车 UpdateCart.asp
确认订单 SaveOrder.asp
四、 Products.asp
本页以表格显示客户所选的产品分类中的所有商品,每一个商品后都有一个"添加到购物车"按钮,指向AddtoCart.asp。
1、 添加prodRec控件,设定记录源为Products表。
2、 添加Grid控件,设定其数据源为prodRec
3、 添加"选购此产品"链接
在Grid的属性页中单击Add Unbound Column,在Header中输入:"选购此产品",在Field/expression中输入:="<A href=AddtoCart.asp?ProductID="+[ProductID]+">选购"+"</A>"。此语句的作用是,将当前选定的产品的产品编号存放在变量ProductID中传递给AddtoCart.asp,在AddtoCart.asp中将根据此产品编号为购物车添加记录。
五、 AddtoCart.asp
本页提供用户所选商品的详细信息,用户在此页可以修改订购数量。
1、 添加一个记录集,命名为prodRec,设定记录源为SQL statement,输入:SELECT * FROM Products。在<Head>区中输入如下代码:
<Script Language=Javascript Runat=Server>
function prodRec_onbeforeopen(){
newSQL="Select * From Products Where ProductID="+Request("ProductID");
prodRec.setSQLText(newSQL);
}
</Script>
此段代码在记录集打开之前执行,根据Products.asp传递来的ProductID参数,过滤记录集,获得用户选择的商品。
2、 再添加一个记录集,命名为cartRec,该记录集的作用是根据用户的Session编号和选定的产品编号,确定所选商品是否已经在购物车中,如果已经在购物车中,则提取Cart表中的记录,提示用户该商品已选购,并让用户更改选购数量:
<Script Language=Javascript Runat=Server>
Var Incart; //是否在购物车中
Var QtyinCart; //用户已经选购的数量
function cartRec_onbeforeopen(){
newSQL="Select * From Cart Where (SessionID="+\'Session.SessionID\'+")
and (ProductID="+Request("ProductID")+")";
cartRec.setSQLText(newSQL);
}
function cartRec_ondatasetcomplete(){
if(cartRecrdset.getCount()==1)
//过滤后记录集不为空,用户已选购了该商品
{
Incart=true;
QtyinCart=cartRec.fields.getValue("Quantity");
//取出用户已经选购的数量
}
</Script>
3、 <Body>中的代码:
<Form Action="UpdateCart.asp" Method="Post">
您选定的商品为:
<%=prodRecorset.fields.getValue("ProductNAME")%>
<%If Incart=true Then%>
您的购物车中已有
<%=QtyinCart%>件此商品,请更新您选购的数量:
<Input Type="Text" Name="OrderQty" Value="<%=QtyinCart%>">
<%Else%>
请输入您的选购数量:
<Input Type="Text" Name="OrderQty" Value="1">
<%End If%>
<Input Name="prodID" Type="hidden" Value="<%=prodRec.fields.getValue("ProductID")%>">
//使用一个隐藏的编辑框,存放用户选定的产品编号,供UpdateCart.asp使用。
<Input Name="prodName" Type="hidden" Value="<%=prodRec.fields.getValue("ProductName")%>">
<Input Name="prodPrice" Type="hidden" Value="<%=prodRec.fields.getValue("Price")%>">
//使用三个隐含编辑框,向UpdataCart.asp传递产品编号、名称和价格。
<Input Type="Submit" Value="添加至购物车">
</Form>
六、 UpdateCart.asp
接收AddtoCart.asp传递来的prodID、prodName、prodPrice和OrderQty,加上客户的Session编号,存入Cart表中。
1、 添加记录集cartRec,设置数据源为Select * From Cart
2、 添加更新数据的代码:
<Script Language=Javascript Runat=Server>
function cartRec_onbeforeopen(){
if(Request("InCart")==0)
{
newSQL="Select * From Cart";
}//不在购物车中,取出所有数据
else
{
newSQL="Select * From Cart Where SessionID="+Session.SessionID;
}//已经在购物车中,取出唯一的数据,准备修改数据
cartRec.setSQLText(newSQL);
}
function cartRec_ondatasetcomplete(){
if(Request("InCart")==0) //如果不在购物车中,添加新纪录
{
fields=new Array("ProductID","ProductName"Quantity","SessionID");
values=new Array(Request("prodID"),Request("prodName"),Request("OrderQty"),Session.SessionID);
cartRec.AddImmeidate(fields,values);
}
else//如果已经在购物车中,更新购买数量
{
cartRec.fields.setValue("Quantity",Request("OrderQty"));
}
Response.Redirect("ViewCart.asp");
</Script>
七、 ViewCart.asp
1、 添加记录集,命名为cartRec,设置数据源为Select * From Cart
2、 添加Grid控件,设定数据源为cartRec,显示三个字段:ProductName、Quantity、Price。添加两个Unbounded Column:
1) 显示总价格,Field/Expression为:=[Quantity]*[Price]。
2) 编辑/删除按钮,Field/Expression为:="<A Href=AddtoCart.asp?ProductID="+[ProductID]+"编辑/A>/<AHref=DeleteItem.asp? ProductID="+[ProductID]+">删除</A>"。这两个超链接分别将ProductID传递给AddtoCart.asp和 DeleteItem.asp。
3、 添加指向SaveOrder.asp的链接
<A href="SaveOrder.asp">确认订单</A>
八、 DeleteItem.asp删除用户选定的一条购物车记录
1、 添加记录集cartRec,设置数据源为Select * From Cart
2、 添加代码:
<Script Language=Javascript Runat=Server>
function cartRec_onbeforeopen()
{
newSQL="Select * from Cart Where (SessionID="+\'Session.SessionID\'+")
And (ProductID="+Request("ProductID")+")";
cartRec.setSQLText(newSQL);
}//过滤记录集得到当前用户选定要删除的购物车记录
function cartRec_ondatasetcomplete()
{
cartRec.deleteRecord();
Response.Redirect("ViewCart.asp");
}//删除客户选定的购物车记录,然后转向ViewCart.asp
十、SaveOrder.asp保存购物车中的临时数据至Order表
1、 添加记录集cartRec,设定数据源为Select * From Cart,在onbeforeopen()中过滤用Select * From Cart Wher SessionID=Session.SessionID过滤记录集,得到当前用户的所有未保存购物车记录
2、 添加记录集orderRec,设定数据源为表Order
3、 捕获cartRec的ondatasetcomplete()事件,输入代码:
function cartRec_ondatasetcomplete()
{
while(!cartRec.EOF)
{
fields=new Array("ProductID","SessionID","Quantity");
values=new Array(cartRec.fields.getValue("ProductID"),
carRec.fields.getValue("SessionID"),
carRec.fields.getValue("Quantity"));
orderRec.Addimediate(fields,values);//向Order表中添加新记录
cartRec.deleteRecord();//删除购物车中的一条记录
cartRec.Movenext();//继续处理下一条记录
}
Response.Redirect("ViewCart.asp");
}
一、 数据库结构:
产品数据表(Products): 存放产品信息
产品名 ProductName
产品编号 ProductID
单价 Price
分类编号 CategoryID
Cart:购物车数据表,临时存放客户的订单
产品编号 ProductID
产品名 ProductName
价格 Price
客户Session标号 SessionID
订购数量 Quantity
Orders:订单,当用户确认订单后,订货数据将由Cart表转存入此表
产品编号 ProductID
客户Session编号 SessionID
订购数量 Quantity
Customers:客户,实现客户登录时将使用该表
二、 建立数据库连接:
1、 添加数据源:在控制面板中选择:管理工具/ODBC数据源,单击添加,选择数据库驱动程序为Microsoft Access Driver,单击"完成",在弹出的对话框中为数据源命名为"Store",单击选择,找到建立好的.mdb文件,然后单击确定
2、 建立连接:在InterDev中的Project Exlporer中右击选择Add Data Connection,选择数据源,命名为Con,连接建立后的所有数据存取都将基于此连接。
三、 购物车要实现的基本功能和对应的文件:
产品浏览和选购 Products.asp
放入购物车 AddtoCart.asp
浏览购物车 ViewCart.asp
删除一个产品 DeleteItem.asp
更新购物车 UpdateCart.asp
确认订单 SaveOrder.asp
四、 Products.asp
本页以表格显示客户所选的产品分类中的所有商品,每一个商品后都有一个"添加到购物车"按钮,指向AddtoCart.asp。
1、 添加prodRec控件,设定记录源为Products表。
2、 添加Grid控件,设定其数据源为prodRec
3、 添加"选购此产品"链接
在Grid的属性页中单击Add Unbound Column,在Header中输入:"选购此产品",在Field/expression中输入:="<A href=AddtoCart.asp?ProductID="+[ProductID]+">选购"+"</A>"。此语句的作用是,将当前选定的产品的产品编号存放在变量ProductID中传递给AddtoCart.asp,在AddtoCart.asp中将根据此产品编号为购物车添加记录。
五、 AddtoCart.asp
本页提供用户所选商品的详细信息,用户在此页可以修改订购数量。
1、 添加一个记录集,命名为prodRec,设定记录源为SQL statement,输入:SELECT * FROM Products。在<Head>区中输入如下代码:
<Script Language=Javascript Runat=Server>
function prodRec_onbeforeopen(){
newSQL="Select * From Products Where ProductID="+Request("ProductID");
prodRec.setSQLText(newSQL);
}
</Script>
此段代码在记录集打开之前执行,根据Products.asp传递来的ProductID参数,过滤记录集,获得用户选择的商品。
2、 再添加一个记录集,命名为cartRec,该记录集的作用是根据用户的Session编号和选定的产品编号,确定所选商品是否已经在购物车中,如果已经在购物车中,则提取Cart表中的记录,提示用户该商品已选购,并让用户更改选购数量:
<Script Language=Javascript Runat=Server>
Var Incart; //是否在购物车中
Var QtyinCart; //用户已经选购的数量
function cartRec_onbeforeopen(){
newSQL="Select * From Cart Where (SessionID="+\'Session.SessionID\'+")
and (ProductID="+Request("ProductID")+")";
cartRec.setSQLText(newSQL);
}
function cartRec_ondatasetcomplete(){
if(cartRecrdset.getCount()==1)
//过滤后记录集不为空,用户已选购了该商品
{
Incart=true;
QtyinCart=cartRec.fields.getValue("Quantity");
//取出用户已经选购的数量
}
</Script>
3、 <Body>中的代码:
<Form Action="UpdateCart.asp" Method="Post">
您选定的商品为:
<%=prodRecorset.fields.getValue("ProductNAME")%>
<%If Incart=true Then%>
您的购物车中已有
<%=QtyinCart%>件此商品,请更新您选购的数量:
<Input Type="Text" Name="OrderQty" Value="<%=QtyinCart%>">
<%Else%>
请输入您的选购数量:
<Input Type="Text" Name="OrderQty" Value="1">
<%End If%>
<Input Name="prodID" Type="hidden" Value="<%=prodRec.fields.getValue("ProductID")%>">
//使用一个隐藏的编辑框,存放用户选定的产品编号,供UpdateCart.asp使用。
<Input Name="prodName" Type="hidden" Value="<%=prodRec.fields.getValue("ProductName")%>">
<Input Name="prodPrice" Type="hidden" Value="<%=prodRec.fields.getValue("Price")%>">
//使用三个隐含编辑框,向UpdataCart.asp传递产品编号、名称和价格。
<Input Type="Submit" Value="添加至购物车">
</Form>
六、 UpdateCart.asp
接收AddtoCart.asp传递来的prodID、prodName、prodPrice和OrderQty,加上客户的Session编号,存入Cart表中。
1、 添加记录集cartRec,设置数据源为Select * From Cart
2、 添加更新数据的代码:
<Script Language=Javascript Runat=Server>
function cartRec_onbeforeopen(){
if(Request("InCart")==0)
{
newSQL="Select * From Cart";
}//不在购物车中,取出所有数据
else
{
newSQL="Select * From Cart Where SessionID="+Session.SessionID;
}//已经在购物车中,取出唯一的数据,准备修改数据
cartRec.setSQLText(newSQL);
}
function cartRec_ondatasetcomplete(){
if(Request("InCart")==0) //如果不在购物车中,添加新纪录
{
fields=new Array("ProductID","ProductName"Quantity","SessionID");
values=new Array(Request("prodID"),Request("prodName"),Request("OrderQty"),Session.SessionID);
cartRec.AddImmeidate(fields,values);
}
else//如果已经在购物车中,更新购买数量
{
cartRec.fields.setValue("Quantity",Request("OrderQty"));
}
Response.Redirect("ViewCart.asp");
</Script>
七、 ViewCart.asp
1、 添加记录集,命名为cartRec,设置数据源为Select * From Cart
2、 添加Grid控件,设定数据源为cartRec,显示三个字段:ProductName、Quantity、Price。添加两个Unbounded Column:
1) 显示总价格,Field/Expression为:=[Quantity]*[Price]。
2) 编辑/删除按钮,Field/Expression为:="<A Href=AddtoCart.asp?ProductID="+[ProductID]+"编辑/A>/<AHref=DeleteItem.asp? ProductID="+[ProductID]+">删除</A>"。这两个超链接分别将ProductID传递给AddtoCart.asp和 DeleteItem.asp。
3、 添加指向SaveOrder.asp的链接
<A href="SaveOrder.asp">确认订单</A>
八、 DeleteItem.asp删除用户选定的一条购物车记录
1、 添加记录集cartRec,设置数据源为Select * From Cart
2、 添加代码:
<Script Language=Javascript Runat=Server>
function cartRec_onbeforeopen()
{
newSQL="Select * from Cart Where (SessionID="+\'Session.SessionID\'+")
And (ProductID="+Request("ProductID")+")";
cartRec.setSQLText(newSQL);
}//过滤记录集得到当前用户选定要删除的购物车记录
function cartRec_ondatasetcomplete()
{
cartRec.deleteRecord();
Response.Redirect("ViewCart.asp");
}//删除客户选定的购物车记录,然后转向ViewCart.asp
十、SaveOrder.asp保存购物车中的临时数据至Order表
1、 添加记录集cartRec,设定数据源为Select * From Cart,在onbeforeopen()中过滤用Select * From Cart Wher SessionID=Session.SessionID过滤记录集,得到当前用户的所有未保存购物车记录
2、 添加记录集orderRec,设定数据源为表Order
3、 捕获cartRec的ondatasetcomplete()事件,输入代码:
function cartRec_ondatasetcomplete()
{
while(!cartRec.EOF)
{
fields=new Array("ProductID","SessionID","Quantity");
values=new Array(cartRec.fields.getValue("ProductID"),
carRec.fields.getValue("SessionID"),
carRec.fields.getValue("Quantity"));
orderRec.Addimediate(fields,values);//向Order表中添加新记录
cartRec.deleteRecord();//删除购物车中的一条记录
cartRec.Movenext();//继续处理下一条记录
}
Response.Redirect("ViewCart.asp");
}
- 上一篇: 用ASP设计一个留言薄
- 下一篇: 人文的ASP开发基础入门之简介
-= 资 源 教 程 =-
文 章 搜 索