在InterDev中實現網上購物推車

interdev 　　本文將介紹在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"); }