第 15 讲 电子商务网站创建实例

1. 第15讲 电子商务网站创建实例

2. 15.1 总体结构设计15.2 商品展示设计 15.3 购物车设计15.4 收银台设计15.5 后台管理设计

3. 15.1 总体结构设计 • 15.1.1 网站主要功能模块 • 本示例网站命名为：新世纪商城，域名为：store.newcentury.com。主要功能模块如下： 图 网站主要功能模块

4. 15.1.2 数据库设计 • 本示例网站创建一个db2.mdb数据库，其中包含的主要数据表有： • 商品表（Products）：包括商品编号、商品名称、市场价、优惠价和简短说明等信息。 • 购物车表（Carts）：为每一个购物的客户自动产生一个唯一的购物车编号，并保存该客户的购物日期等信息。 • 购物车明细表（CartItems）：保存每一辆购物车中各项所购商品的编号、名称、单价和数量等信息。

5. 订单表（Order）：为确定购买的客户自动产生一个唯一的订单编号，并保存该客户的订购日期和订购总计金额，同时保存该客户的姓名、电子邮件地址、详细住址、邮政编码和联系电话等信息。订单表（Order）：为确定购买的客户自动产生一个唯一的订单编号，并保存该客户的订购日期和订购总计金额，同时保存该客户的姓名、电子邮件地址、详细住址、邮政编码和联系电话等信息。 • 订单明细表（OrderItems）：保存每一个订单中所订购的各项商品的编号、名称、单价和数量等信息。

6. 15.1.3 主要程序模块及其工作流程 • 1．需要编写的主要页面程序模块及其工作流程 图 主要页面模块及其工作流程

7. 2．各主要页面程序模块实现的功能 • Products.asp：商品展示页面，同时提供到其他各类商品展示网页的链接。客户点击某商品旁的“购买”链接，即可将该商品放入购物车。 • Search.asp：商品搜索页面，用来处理在商品展示页面中客户提出的商品搜索请求，并将搜索的结果返回到商品展示页面中进行展示。 • AddItem.asp：添加商品页面，一旦客户点击所选商品旁的“购买”链接，本页面立即判断该客户是否已拥有购物车，若没有就为其分配一辆，再将所购之物存入对应购物车明细表，并调用购物车页面显示所购商品的具体信息。 • Cart.asp：购物车页面，显示客户已购的各项商品信息，包括：商品名称、单价、数量、金额及所购商品的总价。允许客户修改所购商品的数量，并重新计算和显示金额和总价。该页面还提供“继续购物”、“清除购物车”和“去收银台”链接。

8. Recalc.asp：重新计算页面，响应客户的“重新计算”请求，根据修改后的商品数量重新计算金额和总价，并负责修改购物车明细表中的相关数据。Recalc.asp：重新计算页面，响应客户的“重新计算”请求，根据修改后的商品数量重新计算金额和总价，并负责修改购物车明细表中的相关数据。 • Delete.asp：清除购物车页面，响应客户提出的“清除购物车”请求，并负责删除该客户在购物车明细表中的相关数据。 • Order.asp：订单页面，响应客户的“去收银台”请求，为确定要购买商品的客户自动产生一个唯一的订单编号，然后要求客户如实填写姓名、送货地址、联系电话等信息，再将当前购物日期、总计金额，以及送货地址等信息保存到订单表中，并负责将购物车内的所购商品信息保存到订单细节表中。

9. 15.2 商品展示设计 表 Products表 • 15.2.1 Products商品表设计

10. 15.2.2 包含文件设计 • 在本示例网站中，使用了Head.inc、Foot.inc和Conn.inc三个包含文件。 • 1．Head.inc • 在本网站展示各类商品的页面中，其网页头部显示的信息通常是相同的，为此将相应的代码段保存为称为头文件的包含文件Head.inc，以便在各页面头部需要时被调用。

11. 2．Foot.inc • 在同一网站各个网页尾部通常需要显示一些相同的网站版权、经营许可证及网站联系人等信息。为此将相应的代码段保存为包含文件Foot.inc，以便需要时方便地插入到各网页的尾部。 • 3．Conn.inc • 一个网站的多个页面通常都需要建立与数据库的连接，以便能够打开其中所需的表进行操作。本网站把与数据库连接的代码段保存为Conn.inc包含文件。

12. 15.2.3 商品搜索页面设计 图 搜索页面Search.asp显示效果

13. 15.2.4 商品展示页面设计 • 图 商品展示网页显示效果

14. 15.3 购物车设计 • 15.3.1 数据表设计 • 本示例网站创建Carts和CartItems两个表来保存客户购物信息。其中：Carts表用来自动为每个客户分配一辆购物车，并保存每个客户的购物车编号及购物日期信息；CartItems表用来保存每辆购物车中每一件商品的编号、名称、单价和数量等信息。

15. 表 Carts表结构

16. 表 CartItems表结构

17. 15.3.2 放入购物车页面设计 • 购物车功能是由添加商品页面AddItem.asp和购物车页面Cart.asp来完成的。AddItem.asp页面的功能为：当客户选中某项商品并点击“购买”链接而激活AddItem.asp页面，该页面首先判断这个客户是否已经有了购物车（即该客户是否为进入本网站后的第一次购物），若没有购物车就为其新分配一辆（即为该客户在Carts表中自动产生一个新的购物车编号CartID）；若客户已有购物车，则从Session变量中获取对应购物车编号。最后再调用购物车页面Cart.asp显示该客户购物车中已购商品的详细内容。

18. 15.3.3 显示购物车页面设计 • 显示当前客户的购物车中已购商品的各项信息是由购物车页面Cart.asp来完成的。在该页面中还将为客户提供更改已购商品的数量、重新计算应付金额等功能，并提供转去“继续购物”或“去收银台”结帐的超级链接。

19. 图 购物车页面效果

20. 15.3.4 重新计算功能的实现 • 在上述购物车页面所显示的购物清单中，客户可在“数量”列的文本框中修改所购商品的数量，然后点击“重新计算”按钮调用Recalc.asp程序对该项商品的金额和总计金额进行重新计算，并将计算后所得的结果再次显示在购物车页面中。

21. 图 重新计算后的结果

22. 15.3.5 清空购物车页面设计 • 客户可在购物车页面中点击“清除购物车”按钮来调用Delete.asp页面，该页面负责清除这个客户已经放入购物车中的所有商品，同时负责删除购物车明细表CartItems中所有与此购物车编号对应的记录，最后再重定向到商品展示页面Products.asp，供客户继续选购其他商品。

23. 15.4 收银台设计 • 15.4.1 收银台设计概述 • 1．收银台各页面模块 • 本示例网站用Order1.asp~Order4.asp四个页面来协同实现收银台功能。 • Order1.asp页面提供一个表单，用来要求客户填写真实姓名、电子邮件地址、详细住址、邮政编码、联系电话等信息，以便准确及时地将货物送达。 • Order2.asp页面用来再次显示客户所购各项商品的名称、单价、数量、金额和总计金额等，供客户加以确认。如果客户点击“确认订购”按钮，将激活Order3.asp页面。如果客户点击“取消订购”按钮，则将调用Order4.asp页面立刻终止本次购物行为。

24. Order3.asp页面用来在客户验证所显示的购物信息和送货信息并加以确认之后，自动生成一个新的订单记录，并把该客户的姓名及各项送货信息保存到订单表中，同时将客户购物车中的各项商品信息保存到相应的订单细节表中。 • Order4.asp页面用来清除当前客户的购物车编号以及该购物车内的商品记录，然后返回本网站的商品展示页面。

25. 2．收银台各页面模块工作流程 图 收银台各模块工作流程

26. 15.4.2 数据表设计 • 为完成本阶段任务并生成客户的购物订单，需要创建订单表Orders和订单明细表OrderItems来存放有关的信息。

27. 表 Orders表结构

28. 表 OrderItems表结构

29. 15.4.3 获取送货信息设计 • 客户点击“去收银台”按钮将激活Order1.asp页面，该页面首先判断当前客户是否确实已经购物，只有已经购物才能进一步结帐，否则就提示客户还没有购买任何商品不能结帐，并提供一个转到商品展示页面去继续购物的链接。 • 客户若已经购物，就需要填写如下表单，输入客户真实姓名、电子邮件地址、所在省市、详细住址、邮政编码和联系电话等信息，以便准确及时地将所购商品送达客户。

30. 图 填写送货信息表单

31. 15.4.4 确认购物及送货信息 • 若客户已将各项必填的表单内容填写完毕，接下来就向客户显示已购商品的帐单以及由客户所填表单中获取的送货信息，供客户最后一次加以确认。

32. 图 客户确认订购页面

33. 15.4.5 生成订单页面设计 • 客户若在Order2.asp页面中点击“确认订购”按钮，将激活Order3.asp页面，在此页面中首先获取由Order2.asp传递来的各项送货数据及总计金额信息，并分别保存到相应变量中。然后Order3.asp页面将在订单表Orders中添加一条新记录，把当前客户的姓名和各项送货信息保存到该记录对应的字段中，并获得一个自动增长的订单编号OrderID。再获取当前客户的购物车编号，并根据此编号在CartItems表中取得对应此购物车的商品记录，并将这些记录数据及当前客户的订单编号OrderID逐条保存到订单明细表OrderItems中。

34. 15.4.6 购物车信息的清理 • 完成结帐和生成订单任务之后，将进入Order4.asp页面。如果客户在Order2.asp页面点击“取消订购”按钮也将直接进入Order4.asp页面。Order4.asp页面的任务是获取当前客户的购物车编号，并据此编号删除Carts表中对应这个购物车编号的记录，同时删除CartItems表中对应这个购物车编号的所有商品记录。

35. 15.5 后台管理设计 • 15.5.1 后台管理概述 • 1．后台管理功能模块构成 图 后台管理功能模块构成

36. 2．主要功能模块及其功能 • （1）后台管理主控页面Admin.asp • 管理者登录此页面后即可根据需要选择所要进入的具体管理页面。 • （2）商品管理页面ProductsAd.asp • 负责进行商品类别管理和各类商品的上架（新增商品）和下架（删除商品），以及各类商品信息的查看和修改等。这是购物网站后台管理中最繁忙的页面。 • （3）订单管理页面OrdersAd.asp • 负责对客户订单进行跟踪处理，包括浏览和查询订单信息，将订单交由商品配送部门和帐务结算部门处理，并根据商品流动情况及时标明订单处理状态等。 • （4）客户管理页面CustomersAd.asp • 负责查询、修改或删除客户信息，提供客户自己修改已注册信息的功能，并进行客户邮件列表管理，在需要时通过电子邮件与客户保持联系。

37. 3．后台管理主页面界面 图 后台管理主页面

38. 表 Products表结构 • 15.5.2 商品管理页面 • 1．商品表设计

39. 2．商品管理主页面设计 • 商品管理主页面ProductsAd.asp以列表的形式，逐行显示每项商品的编号、名称、单价等信息，并在每行右侧为该项商品提供“删除”和“修改”字样的两个链接，再在页面的右上方提供一个“新增商品”字样的链接。从而不仅方便管理者对各项商品信息的查看，并可实现对商品表Products信息的维护和管理。

40. 3．新增、编辑与删除商品页面 • 在商品管理主页面ProductsAd.asp中，需要调用相应的几个子程序来实现新增商品、修改商品信息或删除指定商品记录的功能。

41. 15.5.3 订单管理页面 • 1．订单管理页面OgdersAd.asp的主要功能 • 订单管理主页面OgdersAd.asp的主要功能是以列表形式分页显示Orders表中每条订单记录的订单号、订货人、金额和订货日期等，并在每条记录的尾部添加一个下拉列表框用于显示该订单的当前处理状态和提供对该状态的修改。同时在页面右下角提供一个“更新订单状态”的链接按钮。

42. 2．订单管理页面设计 • 通过订单管理页面OgdersAd.asp，并结合两个相应的订单数据表来保存和查看订单状况并实现订单管理功能。 • 订单数据表包括订单表Orders与订单明细表OrderItems，在订单表Orders中应添加一个Status字段来标明各个订单的当前状态。 • 在订单管理主页面OgdersAd.asp中，需要包含或调用相关的几个程序来实现订单表中订单记录的查询、各条订单记录状态的更新，以及显示订单细节等功能。

43. 15.5.4 客户管理页面 • 1．客户信息管理 • 面向管理者的客户信息管理是由CostomerAd.asp页面完成的，管理员通过身份验证可以在此页面中查看或修改存放在Users表中的客户信息，也可根据情况注销一些客户记录。

44. 2．客户信息的自管理 • 客户在网站注册之后，可能出于各种原因需要改变其注册信息，例如更换了电子邮件地址或者联系电话，也可能是先前填写的信息不够准确等。另一个需要改变注册信息的重要原因是需要更换密码，以确保客户自身信息的安全。为此，就需要网站为客户提供在线修改自身信息的功能。