网站设计动态网站编程实训指导书.docx
- 文档编号:17071228
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:21
- 大小:1.31MB
网站设计动态网站编程实训指导书.docx
《网站设计动态网站编程实训指导书.docx》由会员分享,可在线阅读,更多相关《网站设计动态网站编程实训指导书.docx(21页珍藏版)》请在冰点文库上搜索。
网站设计动态网站编程实训指导书
电子商务系统
随着网络的不断普及与发展,近几年来,以网上购物交易为代表的电子商务获得了蓬勃的发展。
借助网络,利用网上购物系统,可以享受到足不出户,坐在家中敲敲键盘、点点鼠标就能买到您心仪已久的商品,便可以体验到便利、快捷、安全可靠的购物乐趣。
本次实训将以结合实例,综合前面章节所学的技术,讲解网上购物系统的设计思想,设计思路。
一、总体设计
对于每一个网站来说,实际上分为两个部分:
一部分是普通用户可以看到的部分,通常我们称之为前台部分;另一部分是网站管理人员对网站功能进行管理、维护的部分,通常称之为后台管理部分。
还可以将这两部分按照功能模块做进一步的划分。
实际上在前台划分的每一个功能模块,在后台都有相应的功能模块与其对应,实现着对网站功能的管理与定制。
例如本实训中将要介绍的网上购物系统,它的总体设计如图1所示。
图1网上购物系统总体设计
如上图所示,一个简单的网上购物系统可以分为三个部分,第一部分是前台的用户注册与登陆以及后台的用户管理部分,第二部分是前台的商品列表与后台的商品管理部分,第三部分是前台的生成订单与后台的订单管理部分。
二、数据库设计
一个简单的网上购物系统可以设计5张数据表来满足系统的需求。
第一张表为用户信息表,用来记录网站注册用户资料。
第二张表为商品信息表,用来记录商品的各种信息,比如商品的名称,图片信息,价格,类别等等。
第三张表为订单表,此表用来记录用户进行网上购物的一次活动。
第四张表为订单详细表,用来记录一个订单中购买了多少商品。
第五张表为管理员信息表,用来记录管理此网站的管理员信息。
有关数据表的详细设计如下所示。
用户信息表的设计,如表1所示
表1用户信息表UserInfo结构
商品信息表的设计,如表2所示
表2商品信息表CommodityInfo结构
订单表的设计,如表3所示
表3订单表Order的结构
订单详细表的设计,如表4所示
表4订单详细表OrderInfo的结构
管理员信息表可以设计得比较简单,只需要用用户名和密码用可以了,该数据表的设计如表5所示。
字段
类型
长度
必填字段
允许空值
备注
ManagerNo
自动编号
Y
N
管理员编号,主键
ManagerID
文本
20
Y
N
管理员ID
ManagerPassord
文本
16
Y
N
管理员密码
表5管理员表ManagerInfo的结构
三、具体实现
在总体设计中将此网上购物网站按照功能模块进行了划分,本节中将按照这些功能模块分别实现。
在使用DreamWeaver8进行设计之前,需要做一些准备工作,例如定义IIS站点,定义DreamWeaver站点,以及在DreamWeaver中建立数据库连接。
在进行页面设计之前,第一步也是最重要的一步就是设计首页,一般首页必须包含所有的功能模块(只针对用户访问的部分),所以首先设计首页是实现一个系统的第一步,也是最重要的一步。
在设计完首页之后,再分别针对首页划分的模块进行设计。
1.首页设计
对于网上购物系统来说,首页一般抱愧热销的商品列表、推荐商品列表、用户登陆与搜索,商品搜索等等。
在本实例中,首页包括用户的登陆与注册部分、部分商品列表以及商品搜索等3部分组成,如图2所示。
图2首页的制作index.asp
参见图2,首页由框架网页组成。
其中上部的框架页面是本网站的Banner,左下部的框架页面是用户登陆窗口或者显示用户登陆后的提示信息,右下部的框架页面显示推荐商品列表。
有关首页的设计步骤如下。
(1)首先判断名为UserID的Session变量值是否为空,如果不为空,表示会员已经登陆,左下部分显示“欢迎用户”字样的信息,提示提供到会员中心和退出登陆的链接。
(2)如果Session变量值为空,则表示用户还没有登陆到系统,则显示会员登陆框,让用户可以登陆或者注册。
(3)设计一个可以提供商品查询的表单。
(4)从CommdityInfo表中查询Commend字段为True的商品,即推荐商品并显示在首页上。
2、用户登陆与管理模块
用户登陆注册与管理模块可以分为前台和后台两个部分,其中用户登陆注册属于前台部分,用户管理属于后台部分。
2.1.用户登陆与注册页面
用户登陆与注册的页面参见图3。
可以参照用户登陆与注册页面介绍的技术加以实现。
管理员登陆页面设计原理也是一样的,在这里不再重复介绍。
图3用户注册页面Register.htm
2.2.用户管理页面
如图4和图5所示,对于系统管理员来说,首先必须设计一个可以让管理员登陆到后台管理系统的页面,可以设计一个单独的管理员登陆页面。
登陆成功之后赋予的Seesion变量名称和普通用户登陆之后赋予的Session变量名称是不同的。
登陆成功之后就可以对用户进行管理。
例如添加、修改或者删除用户信息。
图4管理员登陆页面Admin_login.asp
图5后台管理页面与用户管理页面Admin_index.asp
如图5所示,管理员后台管理系统设计为框架结构,其中左框架是一个目录树状导航菜单,右上部分框架为网站Banner,右下部分框架为内容显示框架。
3、商品列表和管理商品模块
当用户在首页上搜索指定类别或者关键字的商品后,就会筛选出符合指定条件的商品。
此页面的设计参见图2所示的右下框架页面设计。
同样的,在后台管理部分也可以对商品进行管理,可以添加,修改或者删除商品信息,另外在添加商品信息时,还需要一个上传页面,将商品的图片上传到服务器上。
后台商品列表部分的页面设计,如图6所示。
可以参照前面有关分页显示页面介绍的方法来实现此页面功能。
图6商品列表管理页面Manage_Com.asp
添加商品的页面设计如图7所示。
图7添加商品页面AddCom.asp
在此页面可以添加商品的详细信息,并可以及时地在网站中发布。
4、生成订单和订单管理模块
4.1.添加到购物车
当用户在某一个商品信息的下方单击“添加到购物车”图片按钮之后,表示此商品列入待购买列表列表中,将自动转跳到购物车页面,如图8所示。
图8购物车页面pushcart.asp
在购物车页面列出了选择的商品列表,包括商品名称、数量、原价、折扣价和小计等信息,有3个选项可供选择:
刷新列表,去收银台和继续购物三个按钮。
当用户对同一件商品需要多件购买时,可以在“数量”文本框里面输入需要购买的件数,单击“更新商品”,则会更新商品列表信息并重新计算总价;当用户需要取消某个商品的时候,可以取消“选择”复选框的选中标记,然后单击“更新商品”按钮,将重新更新商品列表信息并重新计算总价;用户可以单击“继续购物”按钮,将重新更新商品列表信息;用户可以单击“继续购物”按钮,将返回到商品列表页面,但是以前已经选择的商品不会从购物车中消失;用户单击“去收银台”按钮,将转到确认选择填写收货人信息页面。
对于购物车来说,用户选择商品之后,并没有确认购买,所以用户进行的选择不会写入到数据库中去,但是又需要记录用户选择的商品ID号,购买数量等信息。
解决的不能就是定义一个名为ComID的Session变量来存储用户的选择;也可以定义一个多维数组的Session变量来保存用户的选择。
或者也可以将用户的选择记录到一个临时表里面,当用户下单(CheckOut)之后,将用户的选择从临时表里面删除。
这些实现购物车的方法各有利弊,感兴趣的读者可以查阅相关的文献资料做深入的了解,在本实训中,将通过第一种方法来实现购物车功能。
此页面的源代码如下。
在上面的代码段中,第4~6行代码判断提交表单中的“payment”的值是否为“去收银台”,如果是,表示用户单击了“去收银台”按钮,则重定向到pay.asp页面。
第8行代码判断提交的表单中“order”的值是否为“更新商品”,如果是的话,表示用户单击了“更新产品”按钮,则执行9~16行代码;如果不是,则执行18~34行代码。
第9~16行代码表示用户单击了“更新商品”按钮,则将PayType设置为1,此时此页面是从提交表单表单中显示的页面,而且从提交的表单中获得comNo和Amount的值,这些值是由“,”组成的字符串。
然后将comNo字符串放入名为comNoStr的Seesion变量中。
第18~34行代码表示用户是选购商品的时候打开此页面,先将PageType的值设置为0,然后从前面的页面获得comNo的值,将此comNo的值组成字符串存入comNoStr的Session变量中,其中,第24~32行代码是判断选购的商品有没有重复的ID号,如果由,则不需要将此comNo的值存入Session中。
第40~54行代码创建了一个名为rs的ADODB记录集,用此记录集做为存储comNo字段和指定comNo值的计录。
上面的代码段是购物车页面的HTML段。
第85行代码定义了一个名为sum的变量,用于存储折扣后的总价格。
第86行代码定义了一个名为sum1的变量,用于存储折扣前的总价格。
第93行代码是在循环中插入了一个复选框,此复选框的值为记录集中的comNo的值。
第95行代码是在循环中读取并显示记录集中商品名称。
第96~100行代码是通过判断PageType的值来显示商品的件数,第102行代码是在玄幻中读取并显示记录集中商品价格。
第108~114行代码是循环中根据PageType的值来计算单个商品的总价格,并由此计算sum和sum1的值。
在上面的代码中,第127行代码为“继续购物”设置了链接到js关闭窗口的函数。
因为商品的ID信息是保存在Session变量中的,所以在此只需要将页面关闭即可。
当用户在购物页面选购了商品之后,会再次打开购物车页面,第129行代码显示了所选购的所有商品的总价格,第130行代码显示了所选购的所有商品的折扣总价格。
第146~157行代码定义了如果未找到商品信息的出错提示,此种问题可能是Session超时或者非法操作造成的。
4.2.确认选择填写收货人信息页面
此页面是在用户单击“去收银台”按钮之后转到的页面,在此页面中列出了用户选择的商品列表信息,让用户进一步确认并填写收货人的信息,如图9所示。
图9确认并填写收货人信息页面pay.asp
在此页面中需要用户填写收货人的详细信息,如果用户还想选购其它商品或者删除某件商品,可以单击“返回修改”按钮,则返回到购物车页面;用户如果单击“确认订单”按钮,则转到确认订单页面,让用户再次确认生成的订单。
4.3.确认订单页面
在确认订单页面显示了刚才所填写的收货人信息以及所选的商品列表信息,需要用户再次确认,如图10所示。
图10确认订单页面Confirmorder.asp
在此页面显示了有关订单的详细信息,当用户当即“马上提交订单”按钮,则将转到后台处理页面,将订单信息以及订单的详细信息写入到数据库中并显示付款方式页面;用户如果单击“返回修改订单”,则将返回到前一个页面可以重新修改订单。
4.后台处理页面
在此页面需要将订单的信息以及订单的详细信息分别写入到订单表与订单详细信息表中,然后将网页重定向到提示付款方式页面。
此页面的源代码如下。
在上面的代码段中,第4~25行代码是向OrderTable表中插入一个订单计录。
第32~41行代码是通过数据库查询操作,获得刚刚插入的计录的订单号,第45,45行是获得选购的商品编号和数量的字符串,并将该字符串分割为数组。
第50~57行通过循环,向数据库中插入此订单订购的每一个商品相关的信息,包括订单编号、商品编号和商品数量,第64行代码是完成插入操作之后将网页重定向到显示付款方式的页面。
4.5.显示付款方式页面
此页面只需要显示银行的账户信息,如图11所示。
图11显示付款方式页面PayType.asp
此页面只需要显示商家的银行账号信息以方便用户会款或者转账,在本实例中是直接在页面上显示银行信息,更好的方法是江银行账号信息保存在数据库里面,需要在显示的时候从数据库中读取,也方便更新操作。
4.6.订单管理
订单管理分为订单管理和订单内容管理两个部分,这两个部分的页面设计分别如图12和图13所示。
图12订单管理页面Manage_Order.asp
图13订单内容管理页面Manage_OrderInfo.asp
在此页面中,如果商家收到了用户的汇款,并且已经将货物发出去了,则需要修改订单表中的OrderStatus字段,表示此订单已经生效。
有些订单可能是用户恶意行为而生成的(例如填写的是很明显的虚假的收货人信息),则需要将此订单删除。
需要注意的是,在本系统中删除计录时,则需要从订单表以及订单详细信息表中分别删除相应的计录。
这样,就完成了一个简单的购物网站的设计。
四、总结与提高
本实训以总结的当时介绍了前面章节所用到的ASP网页设计的方法,并将他们综合起来设计了一个网上购物系统,对于前面章节没有介绍的技术在本章中进行了详细的介绍。
对于使用ASP系统设计的网站,大多数都与数据库操作有关,这涉及到数据库的查询,
插入,更新,删除等操作,这些操作是ASP程序涉及的灵魂所在,读者可以在学习中慢慢体会。
在本章中,使用了5张数据表来实现网上购物平台的设计。
在实际应用中,所使用到的数据库表可能会更多,使网站的功能更加完善。
利用DreamWeaver8可以很方便的实现对数据库的操作,利用“绑定”和“服务器行为”面板提供的技术,只需要操作鼠标并在对话框中做简单的设置即可完成对数据库的查询、修改、更新和删除操作。
在当前的网站中,可以提供网上购物的网站越来越多。
如图14所示,是著名的贝塔斯曼书友会网站页面。
图14贝塔斯曼书友会页面
从上图可以看出,此网站在数据库设计方面,对于商品的信息以及用户信息方面进行了更详细的设计。
对于不同级别的用户设置不同的折扣率,对于商品分类比较全面,搜索功能很强大。
这样用户可以很方面的找到自己喜欢的图书。
许多网站还提供和一些支付接口对接,比如各大商业银行在线支付平台,阿里巴巴旗下支付宝平台,以及国外的PayPal平台的对接,使得交易更方便,更安全。
有兴趣的读者可以到网上查询相关的资料。
五、实训安排及考核方式
时间
内容安排
1.2节
了解实训内容,熟悉数据库的构成,分组分工,完成首页的静态页面index.asp。
每组2人。
3.4节
完成主要页面的静态页面制作,Register.htm,Admin_index.asp,Admin_login.asp,Manage_Com.asp,AddCom.asp,pay.asp,Manage_Order.asp
5.6节
为页面添加功能模块
7.8节
为页面添加功能模块
9.10节
链接数据库,页面调试
11.12节
实训报告,1组交1份
考核:
页面功能
分值
首页功能(会员登录、产品显示)
20%
管理员功能(管理员登录,用户、商品添加修改等)
30%
购物功能(购物车、购物查询)
20%
订单功能(订单的确认、管理)
10%
实训报告
10%
考勤
10%
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计 动态 编程 指导书