在線購物系統(tǒng)

1、第14章 設(shè)計制作在線購物系統(tǒng)本章導(dǎo)讀網(wǎng)上購物系統(tǒng)是在網(wǎng)絡(luò)上建立一個虛擬的購物商場，使購物過程變得輕松、快捷、方便，很適合現(xiàn)代人快節(jié)奏的生活；同時又能有效地控制“商場”運(yùn)營的成本，開辟了一個新的銷售渠道。本章主要講述購物網(wǎng)站的制作過程。技術(shù)要點l 熟悉系統(tǒng)設(shè)計分析l 掌握創(chuàng)建數(shù)據(jù)表l 掌握創(chuàng)建數(shù)據(jù)庫連接l 掌握制作購物系統(tǒng)前臺頁面l 掌握制作購物系統(tǒng)后臺管理14.1購物網(wǎng)站設(shè)計策劃網(wǎng)上購物系統(tǒng)使消費(fèi)者的購物過程變得輕松、快捷、方便，極其適合現(xiàn)代人快節(jié)奏的生活，面對日益龐大的電子商務(wù)市場，越來越多的企業(yè)建立了自己的購物網(wǎng)站?；靖拍钯徫锞W(wǎng)站是電子商務(wù)網(wǎng)站的一種基本形式。電子商務(wù)在我國一開始出現(xiàn)的

2、概念是電子貿(mào)易。電子貿(mào)易的出現(xiàn)，簡化了交易手續(xù)，提高了竟效率，降低了交易成本，很多企業(yè)競相效仿。按電子商務(wù)的交易對象來分，包含以下4類。l 企業(yè)對消費(fèi)者的電子商務(wù)（BtoC）。一般以網(wǎng)絡(luò)零售業(yè)為主，例如經(jīng)營各種書籍、鮮花、計算機(jī)等商品。BtoC就是商家與顧客之間的商務(wù)活動，它是電子商務(wù)的一種主要商務(wù)形式之一，商家可以根據(jù)自己的實際情況來發(fā)展電子商務(wù)。選擇所需的功能系統(tǒng)，組成自己的電子商務(wù)網(wǎng)站。l 企業(yè)對政府的電子商務(wù)（BtoC）l 消費(fèi)者對消費(fèi)者的電子商務(wù)（CtoC），如一些二手市場、跳蚤市場等都是消費(fèi)者對消費(fèi)者的個人交易。購物網(wǎng)站設(shè)計要點網(wǎng)上購物這種新型的購物方式已經(jīng)吸引了很多購物者的注意。

3、購物網(wǎng)站應(yīng)該能夠隨時讓顧客參與購買，商品介紹應(yīng)更詳細(xì)，更全面。要達(dá)到這樣的網(wǎng)站水平就要使網(wǎng)站中的商品能夠進(jìn)行秩序、科學(xué)化的分類，從而便于購買者查詢。同時把網(wǎng)頁制作得更加美觀，來吸引大批的購買者。1. 分類體系一個好的購物網(wǎng)站除了需要銷售好的商品之外，更要有完善的分類體系來展示商品。所有需要銷售的商品都可以通過相應(yīng)的文字和圖片來說明。分類目錄可以運(yùn)用一級目錄和二極目錄相配和形式來管理，顧客可以通過點擊商品類別名稱來了解這類商品的所有信息2.購物車對于很多顧客來講，當(dāng)他們從眾多的商品信息中結(jié)束采購時，恐怕已經(jīng)不清楚自己所采購的東西了。所以他們更需要能夠在網(wǎng)上商店中的某個頁面存放所采購的商品，并能夠

4、計算出所有商品的總價格。而購物車便能夠幫助顧客通過存放購買商品的信息，從而將它們列在一起，并提供商品的總共數(shù)目和價格等功能，更方便顧客進(jìn)行統(tǒng)一的管理和結(jié)算。3.信用卡支付既然在網(wǎng)上購買商品，顧客自然就希望能夠通過網(wǎng)絡(luò)直接付款。這種電子支付正受到人們更多的關(guān)注。4.安全問題網(wǎng)上購物需要涉及很多安全性問題，如密碼、信息卡號碼及個人信息的安全等。如何將這些問題處理得當(dāng)是十分必要的。目前有許多公司或機(jī)構(gòu)都能夠提供安全認(rèn)證，如SSL證書。通過這樣的認(rèn)證過程，可以使顧客認(rèn)為比較敏感的信息得到保護(hù)。5.顧客跟蹤在傳統(tǒng)的商品銷售體系中，對于顧客的跟蹤是比較困難的。如果希望得到比較準(zhǔn)確的跟蹤報告。6.商品促銷在

5、現(xiàn)實購物過程中，人們更關(guān)心的是正在銷售的商品，尤其是價格。通過網(wǎng)上購物網(wǎng)站將商品進(jìn)行管理和推銷，使顧客很容易地了解商品的信息。主要功能頁面購物類網(wǎng)站是一個功能復(fù)雜、花樣繁多、制作煩瑣的商業(yè)網(wǎng)站，但也是企業(yè)或個人推廣和展示商品的一種非常好的銷售方式。本章所制作的網(wǎng)站頁面主要包括前臺頁面和后臺管理頁面。在前臺顯示瀏覽商品，在后臺可以添加、修改和刪除商品，也可以添加商品類別。如下圖所示是本章制作的在線購物系統(tǒng)的結(jié)構(gòu)圖。購物系統(tǒng)前臺頁面后臺管理商品分類展示頁面商品詳細(xì)信息頁面添加商品頁面商品管理頁面修改頁面刪除頁面圖141 在線購物系統(tǒng)的結(jié)構(gòu)圖商品分類展示頁面class.asp，在此頁面中顯示了商品的

6、列表信息，可通過頁面分類來瀏覽商品，如商品名稱、商品價格和商品圖片等信息。商品詳細(xì)信息頁面detail.asp，在此頁面中顯示了商品的詳細(xì)內(nèi)容。管理員登錄頁面login.asp，在此頁中輸入用戶名和密碼后就可以進(jìn)入后臺頁面。添加商品分類頁面addfenlei.asp，在此頁面中可以添加商品類別。制作添加商品頁面addshp.asp，在此頁面中可以添加商品，添加后就可以提交到后數(shù)據(jù)庫表中。商品管理頁面admin.asp，在此頁面中可以查看所有的商品，還可以選擇修改和刪除商品記錄。14.2 創(chuàng)建數(shù)據(jù)庫表本章講述的在線購物系統(tǒng)創(chuàng)建數(shù)據(jù)庫shop.mdb 包括3個表，分別是商品表products、商品

7、類別表 leibie和管理員表admin，其中的字段名稱、數(shù)據(jù)類型和說明分別如下：商品表products字段名稱數(shù)據(jù)類型說明shpID自動編號自動編號shpname文本商品名稱shichjia數(shù)字商品的市場價huiyjia數(shù)字商品的會員價leibieID數(shù)字商品分類編號conten備注商品介紹image文本商品圖片商品類別表leibie字段名稱數(shù)據(jù)類型說明leibieID自動編號商品分類編號leibeiname文本商品分類名稱管理員表admin字段名稱數(shù)據(jù)類型說明ID自動編號自動編號Name文本用戶名pass文本用戶密碼14.3創(chuàng)建數(shù)據(jù)庫連接創(chuàng)建數(shù)據(jù)庫連接的具體操作步驟如下：（1）打開 要創(chuàng)建

8、數(shù)據(jù)庫連接的文檔，執(zhí)行“窗口”“數(shù)據(jù)庫”命令，打開“數(shù)據(jù)庫“面板，在面板中單擊添加按鈕，在彈出的菜單中選擇“算定義連接字符串”選項（）彈出“自定義連接字符串”對話框，在對話框的“連接名稱”文本框中輸入shop，“連接字符串”文本框中輸入以下代碼，如下圖“provider=microsft.jet.oledb.4.0;data source=”&server.mappath(“/shop.mdb”)（）單擊“確定”按鈕，即可成功連接，此時“數(shù)據(jù)庫”面板如下圖：14.4制作購物系統(tǒng)前臺頁面前臺頁面主要是瀏覽者可以看到的頁面，主要包括商品分類頁面和商品詳細(xì)信息頁面，下面具體講述它們的制作過程。.制作

9、商品分類展示頁面商品分類展示頁面效果如下圖所示，主要利用創(chuàng)建記錄集、綁定字段、重復(fù)區(qū)域、創(chuàng)建轉(zhuǎn)到詳細(xì)頁面和記錄分頁服務(wù)器行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔index.html，將其另存為class.asp（） 將光標(biāo)置于相應(yīng)的位置，執(zhí)行“插入記錄”“表格”命令，插入行列的表格，此表格記為表格，在表格中插入行列的表格，此表格記為表格，在“屬性”面板中將“填充”設(shè)置為。（） 將光標(biāo)置于表格的第行單元格中，將“水平”設(shè)置為“居中對齊”，執(zhí)行“插入記錄”“圖像”命令，插入圖像images/shang1.jpg（） 將光標(biāo)置于表格的第行單元格中，輸入相應(yīng)的文字（） 單擊“綁定”面板中的按鈕

10、，在彈出的菜單中選擇“記錄集（查詢）”選項，彈出“記錄集”對話框，設(shè)置如下圖：（） 設(shè)置完以后，單擊“確定”按鈕。（） 選中圖像，在“綁定”面板中展開記錄集Rs1，選中image字段，單擊右下角的“綁定”按鈕，綁定字段（） 重復(fù)（），將shpname 、shichjia和 huijia字段綁定到相應(yīng)的位置（） 選中表格，單擊“服務(wù)器行為”面板中的添加按鈕，在彈出的菜單中選擇“重復(fù)區(qū)域”選項，按下圖進(jìn)行設(shè)置：（） 設(shè)置完以后，單擊“確定”按鈕，創(chuàng)建重復(fù)區(qū)域服務(wù)器行為（） 選中“服務(wù)器行為”面板中創(chuàng)建的“重復(fù)區(qū)域（R1）”，切換到代碼視圖，在代碼如下圖所示位置輸入被選中的內(nèi)容。（） 選中R1.sh

11、pname，單擊“服務(wù)器行為”面板中的添加按鈕，選擇“轉(zhuǎn)到詳細(xì)頁面”選項，按下圖所示設(shè)置，設(shè)置完后單擊“確定”。（） 將光標(biāo)置于表格的右邊，插入一個行列的表格，設(shè)置其屬性為：“填充”為，并右對齊（） 將光標(biāo)置于表格中，輸入相應(yīng)的文字，如下圖：（） 選中文字“首頁”，添加服務(wù)器行為：“記錄集分頁”“移至第一條記錄”，在彈出的對話框中按下圖進(jìn)行設(shè)置，設(shè)置完畢后單擊“確定”（） 分別為文字“上一頁”、“下一頁”和“最后一頁”創(chuàng)建“移至前一頁記錄”、“移至下一條記錄”和“移至最后一條記錄”服務(wù)器行為（） 光標(biāo)置于如下圖所示位置，插入行列的表格，并進(jìn)行居中對齊，在第列單元格內(nèi)插入圖像images/men

12、u_ico.gif（） 單擊綁定面板中的添加按鈕，選擇“記錄集（查詢）”，按下圖所示設(shè)置，設(shè)置完畢后單擊“確定”（） 將光標(biāo)置于表格中，在綁定面板中展開記錄集Rs2選中l(wèi)eibiename，單擊右下角的“插入”按鈕，綁定字段（） 選中表格，添加服務(wù)器行為“重復(fù)區(qū)域”，按下圖進(jìn)行設(shè)置，設(shè)置完畢后單擊“確定”按鈕。（） 選中占位符Rs2.leibiename，添加服務(wù)器行為“轉(zhuǎn)到詳細(xì)頁面”，按下圖進(jìn)行設(shè)置，設(shè)置完成后“確定”。.制作商品詳細(xì)信息頁面商品詳細(xì)信息頁面，主要是創(chuàng)建記錄集和綁定字段制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔，將其另存為detail.asp。按照.節(jié)步驟（）（）的方法，插

13、入表格，創(chuàng)建記錄集、綁定字段、創(chuàng)建重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁面服務(wù)器行為（） 將光標(biāo)置于下圖所示位置，插入行列的表格，表格的填充為，對齊方式為“居中對齊”，并按下圖所給效果合并單元格，并插入圖片及輸入文字（） 單擊綁定面板的添加按鈕，選擇“記錄集（查詢）”選項，按下圖設(shè)置對話框，設(shè)置完后單擊“確定”按鈕（） 選中剛才插入的圖像，在綁定面板中展開記錄集Rs2，選中image字段，單擊右下角的綁定按鈕，綁定字段（） 按照步驟（）的方法，分別將shpname、shichjia、huiyjia和content字段綁定到相應(yīng)的位置.制作購物系統(tǒng)后臺管理本節(jié)將講述購物系統(tǒng)后臺管理頁面的制作。后臺管理頁面主要包括

14、管理員登錄頁面、添加商品類別頁面、添加商品信息頁面、刪除商品和商品管理主頁面。.制作管理員登錄頁面管理員登陸頁面效果如上圖，主要利用插入表單對象和創(chuàng)建登錄用戶服務(wù)器行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔index.asp，將其另存為login.asp。按照.節(jié)步驟（）（）的方法，插入表格，創(chuàng)建記錄集、綁定字段、創(chuàng)建重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁面服務(wù)器行為（） 將光標(biāo)置于下圖所示位置，按回車鍵換行，執(zhí)行“插入記錄”“表單”“表單”，然后在表單中，插入一個行列的表格，在屬性面板中將填充設(shè)為，對齊設(shè)為“居中對齊”，并按下圖樣式布局表格（） 單擊“服務(wù)器行為”面板的添加按鈕，選擇“用戶身份驗證”“登

15、陸用戶”選項，按下圖設(shè)置對話框相應(yīng)內(nèi)容，設(shè)置完后單擊“確定”按鈕.制作添加商品分類頁面添加商品分類頁面，主要利用插入表單對象、創(chuàng)建記錄集、創(chuàng)建插入記錄和限制對頁的訪問服務(wù)器行為制作的。（） 打開網(wǎng)頁文檔index.htm，將其另存為addfenlei.asp。將光標(biāo)置于下圖所示相應(yīng)的位置，按回車鍵換行，插入一個表單。并在表單內(nèi)插入行列的表格，填充為，居中對齊，在表格中填入相應(yīng)內(nèi)容（） 單擊綁定面板中的添加按鈕，選擇“記錄集（查詢）”，按下圖設(shè)置對話框?qū)傩?，設(shè)置完后單擊“確定”按鈕。（） 單擊“服務(wù)器行為”面板中的添加按鈕，選擇“插入記錄”，按下圖設(shè)置對話框?qū)傩?，設(shè)置完畢后單擊“確定”按鈕。（）

16、 單擊“服務(wù)器行為”面板中的添加按鈕，選擇“用戶身份驗證”“限制對頁的訪問”，按下圖設(shè)置對話框?qū)傩?。設(shè)置完后單擊“確定”。（） 打開網(wǎng)頁文檔index.html，將其另存為addfenleiok.asp。將光標(biāo)置于如下圖所示位置，按回車鍵換行，輸入文字，設(shè)置為居中對齊。（） 選中文字“添加商品分類頁面”，在“屬性”面板 的鏈接文本框中輸入addfenlei.asp.制作添加商品頁面添加商品頁面效果如上圖所示，主要利用插入表單對象、插入記錄和限制對頁的訪問服務(wù)器行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔index.html，將其另存為addshp.asp。單擊“綁定”面板中的添加按鈕，選擇

17、“記錄集（查詢）”，按下圖所示設(shè)置相應(yīng)屬性，設(shè)置完后單擊“確定”按鈕。（） 單擊“數(shù)據(jù)”插入欄中的“插入記錄表單向?qū)А卑粹o，彈出“插入記錄表單”對話框，在對話框的“連接”下拉列表中選擇shop，“插入到表格”下拉列表中選擇products，“插入后，轉(zhuǎn)到”文本框中輸入addshpok.asp，“表單字段”列表框中選中shpID,單擊刪除按鈕將其刪除，選中shpname，“標(biāo)簽”文本框中輸入“商品名稱：”，選中shichjia，“標(biāo)簽”文本框中輸入“市場價：”，“顯示為”下拉列表中選擇“菜單”，單擊“菜單屬性”按鈕，彈出“菜單屬性”對話框，在對話框的“填充菜單項”中選中“來自數(shù)據(jù)庫”單選按鈕，如

18、下圖（） 在對話框中單擊“選取值等于”文本框右邊的“閃電”按鈕，彈出“動態(tài)數(shù)據(jù)”，在對話框的“域”列表選擇leibiename，如下圖。（） 單擊“確定”按鈕，返回到“菜單屬性”對話框，單擊“確定”按鈕，返回到“插入記錄表單”對話框，選中content，“標(biāo)簽”文本框中輸入“商品介紹：”，“顯示為”下拉列表中選擇“文本區(qū)域”，選中image ,“標(biāo)簽”文本框中輸入“商品圖片：”，（） 單擊“確定”按鈕，插入記錄表單向?qū)?，如下圖：（） 單擊“服務(wù)器行為”面板中的添加按鈕，在彈出的菜單中選擇“用戶身份驗證”“限制對頁的訪問”選項，彈出“限制對頁的訪問”對話框，在對話框的“如果訪問被拒絕，則轉(zhuǎn)到”文

19、本框中輸入login.asp,如下圖所示：（） 單擊“確定”按鈕，創(chuàng)建限制對頁的訪問服務(wù)器行為。（） 打開網(wǎng)頁文檔index.asp，將其另存為addshpok.asp。將光標(biāo)置于相應(yīng)的位置，按回車鍵換行，輸入文字，設(shè)置為“居中對齊”，選中文字“添加商品頁面”，在“屬性”面板的“鏈接”文本框中輸入addshp.asp，如下圖所示制作商品管理頁面商品管理頁面效果如圖所示，主要利用創(chuàng)建記錄集、綁定字段、重復(fù)區(qū)域、轉(zhuǎn)到詳細(xì)頁面、創(chuàng)建記錄集分頁和顯示區(qū)域服務(wù)器行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔index.asp，將其另存為admin.asp。按照.節(jié)步驟（）（）的方法，插入表格，創(chuàng)建記錄

20、集、綁定字段、創(chuàng)建重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁面服務(wù)器行為。將光標(biāo)置于 相應(yīng)的位置，插入2行6列的表格1，在屬性面板中將“填充”設(shè)為2，對齊設(shè)為“居中對齊”（） 分別在單元格中輸入相應(yīng)的文字（） 單擊“綁定”面板中的添加按鈕，選擇“記錄集（查詢）”，按下圖樣式設(shè)置相應(yīng)內(nèi)容，設(shè)置完成后單擊“確定”按鈕（） 將光標(biāo)置于表格1的第2行第1列單元格中，在“綁定”面板中展開記錄集RS2，選中shpID字段，單擊右下角的“插入”按鈕，綁定字段（） 同樣的方法，將shpname、 shichjia和huiyjia字段綁定到相應(yīng)的位置，如下圖所示（） 選中表格1的第2行單元格，單擊“服務(wù)器行為”面板中的添加按鈕，選擇

21、“重復(fù)區(qū)域”選項，按下圖所示設(shè)置對話框的相應(yīng)屬性，設(shè)置完成后單擊“確定”按鈕。（） 選中文字“修改”，單擊“服務(wù)器行為”面板中的添加按鈕，選擇“轉(zhuǎn)到詳細(xì)頁面”選項，按下圖設(shè)置該對話框的相關(guān)內(nèi)容，設(shè)置完成后單擊“確定”按鈕。（） 選中文字“刪除”，單擊“服務(wù)器行為”面板中的添加按鈕，選擇“轉(zhuǎn)到詳細(xì)頁面”選項，按下圖設(shè)置該對話框的相關(guān)內(nèi)容，設(shè)置完成后單擊“確定”按鈕。（） 將光標(biāo)置于 表格1的右邊，按回鍵換行，插入一個1行1列的表格2，在屬性面板中將“填充”設(shè)置為2，“對齊”設(shè)置為“居中對齊”（） 將光標(biāo)置于表格2中，輸入相應(yīng)的文字：“首頁、上一頁、下一頁和最后頁”（） 選中文字“首頁”，添加服務(wù)

22、器行為：“記錄集分頁”“移至第一條記錄”，在彈出的對話框中按下圖進(jìn)行設(shè)置，設(shè)置完畢后單擊“確定”（） 分別為文字“上一頁”、“下一頁”和“最后一頁”創(chuàng)建“移至前一頁記錄”、“移至下一條記錄”和“移至最后一條記錄”服務(wù)器行為（） 選中文字“首頁”，單擊“服務(wù)器行為”面板中的添加按鈕，在彈出的菜單中選擇“顯示區(qū)域”“如果不是第一條記錄則顯示區(qū)域”選項，然后按下圖所示設(shè)置所彈出的對話框的相應(yīng)內(nèi)容，設(shè)置完成后單擊“確定”按鈕（） 按照步驟（13）的方法，分別對文字“上一頁”、“下一頁”和“最后一頁”創(chuàng)建“如果為最后一條記錄則顯示區(qū)域”、“如果為第一條記錄則顯示區(qū)域”和“如果不是最后一條記錄則顯示區(qū)域”

23、服務(wù)器行為制作修改頁面修改頁面效果，主要是利用創(chuàng)建數(shù)據(jù)記錄集、綁定字段和創(chuàng)建更新服務(wù)行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔addshp.asp，將其另存為modify.asp。在“服務(wù)器行為”面板中選中“插入記錄（表單“form1”）”，單擊刪除按鈕刪除，按照節(jié)步驟 （19）（26）的方法，插入表格，創(chuàng)建記錄集、綁定字段、創(chuàng)建重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁面服務(wù)器行為，如下圖（） 單擊“綁定”面板中的添加按鈕，在彈出的菜單中選擇“記錄集（查詢）”選項，按下圖所示設(shè)置對話框，設(shè)置完成后單擊“確定”按鈕（） 選中“商品名稱：”右邊的文本域，在“綁定”面板中展開記錄集RS3，選中shpname字段，

24、單擊“綁定”按鈕，綁定字段（） 按照步驟（4）的方法，分別將shichjia、huiyjia、content和image字段綁定到相應(yīng)的位置，如下圖（） 單擊“服務(wù)器行為”面板中的添加按鈕，選擇“更新記錄”選項，按下圖設(shè)置對話框中的內(nèi)容，設(shè)置完成后單擊“確定”按鈕（） 打開網(wǎng)頁文檔index.htm，將其另存為modifyok.asp。將光標(biāo)置于相應(yīng)的位置，按回書鍵換行，輸入文字，設(shè)置為“居中對齊”，選中文字“商品管理頁面”，在“屬性”面板的“鏈接”文本框中輸入admin.asp， 如下圖制作刪除頁面刪除頁面效果，主要利用創(chuàng)建記錄集、綁定字段和創(chuàng)建刪除記錄服務(wù)器行為制作的，具體操作步驟如下：（） 打開網(wǎng)頁文檔index.asp，將其另存為del.asp。按照.節(jié)步驟（）（）的方法，插入表格，創(chuàng)建記錄集、綁定字段、創(chuàng)建重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁面服務(wù)器行為（） 將光標(biāo)置于相應(yīng)的位置，插入4行1列的表格，在屬性面板