电子商务网站建设实验指导书模板.doc

电子商务网站建设实验指导书

25

资料内容仅供参考，如有不当或者侵权，请联系本人改正或者删除。
电子商务网站建设实验指导书

1.实验目的
电子商务网站建设是电子商务专业中非常重要的一门技术基础课程, 经过课程的理论学习之后, 急需学生经过一次网站建设的实践, 加强对所学知识的理解和掌握, 因此经过创立一个具体的购物网站来锻炼她们的实践动手能力。
2.实验要求
经过本次实践之后, 掌握如何从需求, 转化为设计, 然后将设计转变为具体的代码。实验完成之后, 需提交网站设计的源代码一份, 集中实践报告一份。
3.实验指导
3.1总体结构设计
购物网站直接与客户打交道, 其内容的合理性和完整性, 是网站能否吸引顾客的关键因素之一。因此在网站设计总体结构设计时, 应尽量从客户角度以及网络营销的角度出发来考虑其功能的实现。
网站的总体结构设计包括: 网站各主要功能模块的划分、 相关数据库设计、 各页面程序模块设计的确定及其工作流程的设计。
3.1.1网站主要功能模块
本次试验的网站命名为: 新世纪商城, 域名设计为: 。网站主要功能模块包括商品介绍, 在线销售; 其中商品介绍又包括商品展示和商品搜索; 在线销售分为, 放入购物车, 显示购物车, 清空购物车, 生成订单。
3.1.2数据库设计
本次网站使用Access数据作为存放商品信息、 客户资料和订单信息的数据库。本网站使用一个名为db2.mdb的数据库, 其中包含的数据表如下:
商品表( Products) , 用于存放需在商品展示页面显示的各项商品信息, 包括商品编号, 商品名称、 市场价、 优惠价和商品说明信息等。
购物车表( Carts) , 用于为每一个购物的客户自动产生一个唯一的购物车编号, 并保存该客户的购物日期等信息。
购物车明细表( CartItems) , 用来保存每一辆购物车中各项所购物品的编号、 名称、 单价和数量等信息。
订单表( Order) : 在客户确定购买之后, 用来为该客户自动产生一个唯一的订单编号, 并保存该客户的订购日期和订购总计金额, 同时保存该客户的姓名、 电子邮件地址、 详细住址、 邮政编码和联系电话等信息。
订单明细表( OrderItems) : 用来保存每一个订单中所订购的各项产品的编号、 名称、 单价和数量等信息。
3.3.3主要程序模块及其工作流程

主要页面模块及其工作流程
各主要页面程序模块的实现功能如下:
Products.asp: 商品展示页面, 用来将数据库中当前所选的类别的商品表( Products) 的各项商品信息显示在网页上, 同时提供到其它各类商品展示网页的链接。客户可在本页面点击某件商品的旁的购买字样链接, 即可将该商品放入购物车另外, 在次页面还有一个商品搜索区, 可根据客户输入的搜索关键字启动商品搜索程序, 并将搜索到的商品展示在本页面。
Search.asp: 商品搜索页面, 用来处理在商品展示页面中客户提出的商品搜索请求, 并将搜索的结果返回到商品展示页面中进行展示。
AddIterm.asp: 添加商品页面, 一旦客户点击所选商品旁的购买字样链接, 本页面便立即判断该客户是否已拥有购物车, 若没有就为其新分配一个购物车。然后再将所购之物存入对应的购物车明细表, 并调用购物车页面显示该购物车中所选购物品的具体信息。
Cart.asp: 购物车页面, 用来显示客户已购的各项商品信息, 包括: 商品名称、 单价、 数量、 金额及所购商品的总价。在该页面允许客户修改所购商品的数量, 并重新显示和计算金额和总价。另外, 该页面还提供”继续购物”、 ”清除购物车”和”去收银台”的链接。
Recalc.asp: 重新计算页面, 响应客户在购物车页面提出的”重新计算”请求, 根据修改后的商品数量重新计算金额和总价, 并负责修改购物车明细表中的相关数据, 然后再次调用购物车页面显示重新计算后的购物车信息。
Delete.asp: 清除购物车页面, 响应客户在购物车页面提出的”清除购物车”请求, 并负责删除该客户在购物车明细表中的相关数据, 然后调用商品展示页面继续显示商品供客户选购。
Order.asp: 订单页面, 响应客户在购物车页面提出的”去收银台”请求, 为确定要购买商品的客户自动产生一个唯一的订单编号, 然后要求客户如实填写姓名, 送货地址, 联系电话等信息, 再将当前购物日期、 总计金额, 以及送货地址等信息保存到订单表中, 并负责将购物车内的所购商品信息保存到订单细节表中。实际编程时, 该订单页面实际上由Order1.asp、 Order2.asp、 Order3.asp、 Order4.asp这四个页面组成。
商品展示设计
商品展示页面涉及数据库中的商品表Products、 商品搜索页面Search.asp和商品展示页面Products.asp的设计。为提高页面的设计效率和代码的重用性, 考虑使用包含文件, 包括Head.inc、 Foot.inc和Conn.inc3个包含文件。
数据设计可参考下表

Products表
包含文件设计
包含文件设计是指能够包含在其它页面中的文件。如果一个程序代码段可能会多次出现在其它页面中不妨将其保存为扩展名为.inc的包含文件。当某个页面中需要插入该代码段的时候即可使用如下形式包含进来。
<!—include file=”filename”>
不但扩展名为.inc能够包括到当前页面中, 扩展名为.html或.asp的文件也都能够用此方式包含进来。本网站中共涉及head.inc、 Foot.inc、 Conn.inc3个包含文件。
本网站所展示的各类商品中, 其网页头部显示信息一般相同, 故可设计head.inc来保存这一部分代码, 然后被其它网页调用。
Head.inc头文件源代码如下:

在同一网站各个页面的结尾, 一般需要显示一些相同的网站授权、 经营许可证及网站联系人等信息。于是也可经过统一的文件来保存这些代码Foot.inc, 以便需要时方便地插入到网页的尾部。Foot.inc脚本文件源代码如下:

对于一个网站来讲, 其中许多页面都要使用到数据库, 需要与数据库建立连接, 以便能够打开其中所需的表进行操作。因此可建立独立文件来保存与数据库db2.mdb连接的代码, 文件名为Conn.inc。Conn.inc源代码为:

商品搜索页面设计
一般网站均允许客户经过输入与商品有关的关键字来搜索所需的商品, 本网站设计时应经过search.asp页面来收集客户输入的关键字, 然后打开有关的商品表借助SQL语句的模糊查询功能实现对商品的搜索, 然后将搜索的结果展示出来。
Search.asp页面的参考代码如下:

商品展示页面设计
Products.asp商品展示页面主要用于商品信息的显示, 将db2数据库中的Products表中的信息展示出来。展示的效果如下:

在该页面需经过包含头部文件Head.inc显示网站的名称, 并提供到其它各类产品展示页面的链接。然后再将搜索页面包含进来, 如果客户在填写了搜索关键字, 需将搜索结果在本页面显示出来。然后逐行显示产品信息, 包括图片、 价格、 产品描述等信息。本页面的参考代码如下:

购物车设计
购物车页面设计时购物网站最为重要的页面程序设计。在本次实践网站中, 客户在商品展示页面浏览商品时, 只需用鼠标点击所选商品旁的”购买”字样链接即可将该商品放入自己的购物车。购物车页面所要实现的功能实际上是负责将客户选定的商品及该商品有关的信息保存到网站数据库相应的表中, 同时在网页上显示当前客户已购买各项商品的名称、 单价、 数量和金额等。除此之外, 当客户去收银台时, 一般需要根据购物车中保存的这些信息来自动生成对应的商品订单。
在购物车设计页面时, 要保存客户选择购物商品的信息以及客户信息, 这里一般经过以下3种方式解决
①将当前客户及所购商品信息保存在客户端的Cookie中。
②将当前客户及所购商品信息保存在服务器端的Session变量中。
③将当前客户及所购商品信息保存在服务器端的数据库中。
本次实践实例中使用第3种方式来保存客户及购物车中的信息, 包括两个表Carts和CartItems两个数据表。其中: Carts表的主要功能是用来自动为每个客户分配一辆购物车, 并保存购物车的编号及购物日期信息; CartsItems表则用来保存每辆购物车中每一件商品的编号、 名称、 单价和数量等购物明细信息。
Carts表和CartItems表的结构分别如下表

Carts表

CartItems表
放入购物页面设计
本网站购物车功能的实现是由添加商品页面AddItem.asp和购物车页面Cart.asp两个程序来完成。

显示购物车页面设计
在本网站中, 显示当前客户的购物车中已购商品的各项信息是由购物车页面Cart.asp来完成。在该页面中还能够为客户提供修改已订购物品数量、 重新计算的功能, 并提供转去”继续购物”或”去收银台”结账的超级链接。页面截图如下:

Carts.asp源代码如下:

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

Recalc.asp代码如下:

清空购物车页面设计
在显示购物车页面中, 客户能够点击”清除购物车”按钮来调用Delete.asp页面, 该页面负责清除这个客户已经放入购物车中的所有产品, 同时负责删除购物车明细表CartItems中所有与此购物车编号对应的记录, 最后再重定向到商品展示显示页面Products.asp, 供客户继续选购其它商品。
Delete.asp源代码如下:

收银台设计
在本示例网站中, 收银台页面设计也就是订单生成及其处理页面的设计。当客户选购好商品并确认购物之后, 若在购物车页面点击”去收银台”按钮即可进入最后的结账处理阶段, 并将自动生成该客户本次购物的订单。
收银台设计的任务主要包括:
⑴创立一个表单用于填写和收集客户信息, 以便为该客户送货。
⑵再次显示客户所购商品的信息和送货地址等信息, 并要求客户进一步确认。
⑶生成一个与此对应的新订单, 并将客户所购商品的信息及其送货信息保存到订单表和订单明细表中。

收银台各模块及其流程
Order1.asp页面提供一个表单, 用来要求客户填写真实姓名、 电子邮件地址、 详细住址、 邮政编码、 联系电话等信息。客户提交此表以后将激活Order2.asp页面。
Order2.asp用来再次显示客户所购各项商品的名称、 单价、 数量、 金额和总计金额等, 供客户进一步确认。同时将获得客户真实姓名及各项送货信息再次显示出来, 供客户确认。如果客户选择”确认订购”按钮, 将激活Order3.asp页面。如果客户选择”取消订购”按钮, 将调用Order4.asp终止本次购物。
Order3.asp页面用来在客户验证所显示的购物信息和送货信息并加以确认之后, 自动生成一个新的订单记录, 并把该客户的姓名及各项信息保存到订单中, 同时将客户购物车中的各项商品信息保存到相应订单明细表中。
Order4.asp页面用来清除当前客户的购物车编号以及该购物车内的商品记录, 然后返回本网站的商品展示页面。
数据库设计
在订单设计中需要在数据库db2中创立Orders和订单明细表OrderItems来存放有关信息。两表具体设计参考如下:

Orders表

OrderItems表