電子商務(wù)網(wǎng)站建設(shè)實(shí)驗(yàn)指導(dǎo)書

1、電子商務(wù)網(wǎng)站建設(shè)實(shí)驗(yàn)指導(dǎo)書1. 實(shí)驗(yàn)?zāi)康碾娮由虅?wù)網(wǎng)站建設(shè)是電子商務(wù)專業(yè)中非常重要的一門技術(shù)基礎(chǔ)課程， 通過課程的理論學(xué)習(xí)之后， 急需學(xué)生通過一次網(wǎng)站建 設(shè)的實(shí)踐， 加強(qiáng)對(duì)所學(xué)知識(shí)的理解和掌握， 因此通過創(chuàng)建一個(gè)具 體的購物網(wǎng)站來鍛煉他們的實(shí)踐動(dòng)手能力。2. 實(shí)驗(yàn)要求通過本次實(shí)踐之后，掌握如何從需求，轉(zhuǎn)化為設(shè)計(jì)，然后將 設(shè)計(jì)轉(zhuǎn)變?yōu)榫唧w的代碼。 實(shí)驗(yàn)完成之后， 需提交網(wǎng)站設(shè)計(jì)的源代 碼一份，集中實(shí)踐報(bào)告一份。3. 實(shí)驗(yàn)指導(dǎo)3.1 總體結(jié)構(gòu)設(shè)計(jì)購物網(wǎng)站直接與客戶打交道， 其內(nèi)容的合理性和完整性， 是 網(wǎng)站能否吸引顧客的關(guān)鍵因素之一。 所以在網(wǎng)站設(shè)計(jì)總體結(jié)構(gòu)設(shè) 計(jì)時(shí)，應(yīng)盡量從客戶角度以及網(wǎng)絡(luò)營(yíng)銷的角度

2、出發(fā)來考慮其功能 的實(shí)現(xiàn)。網(wǎng)站的總體結(jié)構(gòu)設(shè)計(jì)包括： 網(wǎng)站各主要功能模塊的劃分、 相 關(guān)數(shù)據(jù)庫設(shè)計(jì)、各頁面程序模塊設(shè)計(jì)的確定及其工作流程的設(shè) 計(jì)。3.1.1 網(wǎng)站主要功能模塊本 次試驗(yàn)的 網(wǎng)站命 名為：新 世紀(jì)商 城，域名 設(shè)計(jì)為： 。網(wǎng)站主要功能模塊包括商品介紹， 在線 銷售；其中商品介紹又包括商品展示和商品搜索； 在線銷售分為， 放入購物車，顯示購物車，清空購物車，生成訂單。3.1.2 數(shù)據(jù)庫設(shè)計(jì)本次網(wǎng)站使用 Access 數(shù)據(jù)作為存放商品信息、客戶資料和 訂單信息的數(shù)據(jù)庫。本網(wǎng)站使用一個(gè)名為db2.mdb的數(shù)據(jù)庫，其 中包含的數(shù)據(jù)表如下：商品表( Products )，用于存放需在商品展示

3、頁面顯示的各 項(xiàng)商品信息，包括商品編號(hào)，商品名稱、市場(chǎng)價(jià)、優(yōu)惠價(jià)和商品 說明信息等。購物車表( Carts )，用于為每一個(gè)購物的客戶自動(dòng)產(chǎn)生一個(gè) 唯一的購物車編號(hào)，并保存該客戶的購物日期等信息。購物車明細(xì)表 (CartItems )，用來保存每一輛購物車中各項(xiàng) 所購物品的編號(hào)、名稱、單價(jià)和數(shù)量等信息。訂單表(Order )：在客戶確定購買之后，用來為該客戶自動(dòng) 產(chǎn)生一個(gè)唯一的訂單編號(hào)， 并保存該客戶的訂購日期和訂購總計(jì) 金額，同時(shí)保存該客戶的姓名、電子郵件地址、詳細(xì)住址、郵政 編碼和聯(lián)系電話等信息。訂單明細(xì)表( OrderItems )：用來保存每一個(gè)訂單中所訂購 的各項(xiàng)產(chǎn)品的編號(hào)、名稱、單

4、價(jià)和數(shù)量等信息。333主要程序模塊及其工作流程主要頁面模塊及其工作流程各主要頁面程序模塊的實(shí)現(xiàn)功能如下：Products.asp :商品展示頁面，用來將數(shù)據(jù)庫中當(dāng)前所選的 類別的商品表(Products )的各項(xiàng)商品信息顯示在網(wǎng)頁上，同時(shí) 提供到其他各類商品展示網(wǎng)頁的鏈接?？蛻艨稍诒卷撁纥c(diǎn)擊某件商品的旁的購買字樣鏈接，即可將該商品放入購物車此外，在次 頁面還有一個(gè)商品搜索區(qū)，可根據(jù)客戶輸入的搜索關(guān)鍵字啟動(dòng)商 品搜索程序，并將搜索到的商品展示在本頁面。Search.asp :商品搜索頁面，用來處理在商品展示頁面中客 戶提出的商品搜索請(qǐng)求，并將搜索的結(jié)果返回到商品展示頁面中 進(jìn)行展示。Addlte

5、rm.asp :添加商品頁面，一旦客戶點(diǎn)擊所選商品旁的 購買字樣鏈接，本頁面便立即判斷該客戶是否已擁有購物車，若沒有就為其新分配一個(gè)購物車。然后再將所購之物存入對(duì)應(yīng)的購 物車明細(xì)表， 并調(diào)用購物車頁面顯示該購物車中所選購物品的具 體信息。Cart.asp ：購物車頁面， 用來顯示客戶已購的各項(xiàng)商品信息， 包括：商品名稱、單價(jià)、數(shù)量、金額及所購商品的總價(jià)。在該頁 面允許客戶修改所購商品的數(shù)量，并重新顯示和計(jì)算金額和總 價(jià)。此外，該頁面還提供“繼續(xù)購物” 、“清除購物車”和“去收 銀臺(tái)”的鏈接。Recalc.asp ：重新計(jì)算頁面， 響應(yīng)客戶在購物車頁面提出的 “重新計(jì)算”請(qǐng)求，根據(jù)修改后的商品數(shù)

6、量重新計(jì)算金額和總價(jià)， 并負(fù)責(zé)修改購物車明細(xì)表中的相關(guān)數(shù)據(jù)， 然后再次調(diào)用購物車頁 面顯示重新計(jì)算后的購物車信息。Delete.asp ：清除購物車頁面， 響應(yīng)客戶在購物車頁面提出 的“清除購物車”請(qǐng)求，并負(fù)責(zé)刪除該客戶在購物車明細(xì)表中的 相關(guān)數(shù)據(jù)，然后調(diào)用商品展示頁面繼續(xù)顯示商品供客戶選購。Order.asp ：訂單頁面，響應(yīng)客戶在購物車頁面提出的“去 收銀臺(tái)” 請(qǐng)求，為確定要購買商品的客戶自動(dòng)產(chǎn)生一個(gè)唯一的訂 單編號(hào)，然后要求客戶如實(shí)填寫姓名，送貨地址，聯(lián)系電話等信 息，再將當(dāng)前購物日期、總計(jì)金額，以及送貨地址等信息保存到 訂單表中， 并負(fù)責(zé)將購物車內(nèi)的所購商品信息保存到訂單細(xì)節(jié)表 中。實(shí)

7、際編程時(shí)， 該訂單頁面實(shí)際上由 Order1.asp 、Order2.asp 、 Order3.asp 、 Order4.asp 這四個(gè)頁面組成。商品展示設(shè)計(jì)商品展示頁面涉及數(shù)據(jù)庫中的商品表 Products 、商品搜索 頁面 Search.asp 和商品展示頁面 Products.asp 的設(shè)計(jì)。為提高頁面的設(shè)計(jì)效率和代碼的重用性，考慮使用包含文件，包括Head.inc、Foot.inc 和 Conn.inc3 個(gè)包含文件。數(shù)據(jù)設(shè)計(jì)可參考下表了設(shè)名稱數(shù)州餐熨說m自#褊號(hào)IWdtKlNELmPncKb id Picture前晶閉片丈件名PraductRiX貨噸I'rrhiHkl.Sul

8、PfiiV釘幣BrodiicittescripiinnXA <255)Products 表包含文件設(shè)計(jì)包含文件設(shè)計(jì)是指可以包含在其他頁面中的文件。如果一個(gè)程序代碼段可能會(huì)多次出現(xiàn)在其他頁面中不妨將其保存為擴(kuò)展 名為.inc的包含文件。當(dāng)某個(gè)頁面中需要插入該代碼段的時(shí)候 即可使用如下形式包含進(jìn)來。<!in clude file= ” file name ” >不僅擴(kuò)展名為.inc可以包括到當(dāng)前頁面中，擴(kuò)展名為.html 或.asp的文件也都可以用此方式包含進(jìn)來。本網(wǎng)站中共涉及 head.inc、Foot.inc、Conn.inc3 個(gè)包含文件。本網(wǎng)站所展示的各類商品中，其網(wǎng)頁頭

9、部顯示信息通常相 同，故可設(shè)計(jì)head.inc來保存這一部分代碼，然后被其他網(wǎng)頁 調(diào)用。Head.inc頭文件源代碼如下：I. <litinl>3. ciwtent衛(wèi)審2訂2、4. <raeta nm1 .blERA 1 OR'*conKiit MFr創(chuàng)血辺少 4,0H>5. n汕叱“Pro附1* |川蝕1下曲訓(xùn)旳供用用佩6- <tit le>剳品晨7. <siyk tyfH- rext/c ss>S- id li Cijkjr; ftl007B; Font-Size; I3px; Line-Ueihi: lKpx ；9.a: I ink

10、 丨 Color: SCCXWOO; Font-Size: I2px; Text-1 Monition: bi ink ID” Liivisilcd ( Oik CCOOOO； FoiiE'Siitr: I2pi reaL-DuGH；Hiu：ti； none I 】.J C'olon 冉卜FonbSi?: !2px; TcAbDorahon; none 12. gylQ13” </he;id>耳 vbwl、bgCvlui SJ'IThFJ " lcriiiKiin-"C?" tnpniargirr "0" i

11、nuFinwidth-'O'niorirnieiglit 0 >L” <cerirer>” 6 <Uble 出i呼Ycnier bCoIor tfFCCL 17 hOrderO cdlPidmg-0 cellspacing ( widih=761>17* <tl>ody>18；<u>19* 媲 aJign-middk bjjCdorFFfefiOO width 269 hH綁i ”2護(hù)n20+<p iiHgncrj«crxf切 MiMhWxbxfomcolorBifFFFFFFS新貳圮惰城燈伽處血p;2

12、01pp aHg n J'entcf aMu m s i se"2 "xbxlbn l col n L FFFFFF" a斯也:tL SI 城 </font> & ii 恤p;<i h rc f-'' h i ip7/?. i o re. ri eu cent u ry i rn'd s ly Fc r 1 ext-1 Tccii n it io none'>見 <fon(o lor -" PF I 111 "c. ii t e n 111 ry x 0 rtrVft

13、)n I)></ ft ?n >23.24* <id alrgnTtnidtfle bgCdor ffFI'CCOO height2 26旳KF噸呂腳|2叫 widUv=*3S5>25. <a href- °Csr alogYS.asp"x foul(jo lor -<XM(J00> ®4!£</fDntx/a> l26. Iiref ( iHEilcigYY.Lisp xfont Cptor #000(K10> i'f 樂</fonixto |27. 心 hrcr

14、C.nLJSJsp'Stoni culcr #00tX叫帯詼S)ntxZa> I28. <a hreP= "CaialoHZ Tisp'XIbm co lor#OOOOQO '化a<A> I29. <a h ref-= hCaulagl：asp" xfont color'#0fl0000>rr</fnrtt><7u> |30. <a hfc& "CdtakigLiy仙忙 Wbiw colm啣KXkXXKb禮品刖bnx/a> |31. </(d>

15、;32. <id alln rirftt bgColoi _WCC9935 heiEbi 26style "Font-Si/fi： I2pr fcidiltB*.<i href "hiip:/AA)TiMiL55i山心丄Fit ntyle 'Text Dccdmi-：on: noncS<db】n 閃I時(shí)#FTI l l;l >fi' 3?.&gt;Apr St)mxAix7心3取<tbm color f4 lTr ='>35.</ld>36 <!va</tbudy></W

16、hk>在同一網(wǎng)站各個(gè)頁面的結(jié)尾， 通常需要顯示一些相同的網(wǎng)站 授權(quán)、經(jīng)營(yíng)許可證及網(wǎng)站聯(lián)系人等信息。于是也可通過統(tǒng)一的文 件來保存這些代碼 Foot.i nc，以便需要時(shí)方便地插入到網(wǎng)頁的尾部。Foot.inc腳本文件源代碼如下：I” <JlLl 111>I.4* <l-Eible7K(J IhjkIci Hnler cillpaddiiif iJ ceikpncing I5- Cld nlign 'tenter' hciirii'L MJ>6- <psiylc "linv height: 20,+ ulign "cjWxTonzi址7- fl叩yrifi.hi 2：KM.Tihsi.nbp; A9I rj；'-hrs resrveii.bo蟲網(wǎng)上悄彷就養(yǎng)許可證&nbap;XX001S G<fom><p>ia<Aia12. </trnier>13 </bcd y>14. eflitml>對(duì)于一個(gè)網(wǎng)站來講，其中許多頁面都要使用到數(shù)據(jù)庫，需要與數(shù)據(jù)庫建立連接，以便能夠打開其中所需的表進(jìn)行操作。因此可建立獨(dú)立文件來保存與數(shù)據(jù)庫 db2.mdb連接的代碼，文件名為Conn.inc。