动态网站“网络商城购物”的设计与实现.doc
【精品文档】如有侵权，请联系网站删除，仅供学习与交流动态网站“网络商城购物”的设计与实现.精品文档.网络购物商城动态网站设计制作实现江门广播电视大学2009春电子商务 陈爱贤摘要本文从网站流程规划，到功能模块划分，到数据结构设计，到开发工具与环境选择，到网站具体制作，逐步描述了“网络购物商城”的建设过程。详细讲述了ASP技术在网页设计上的具体应用，如商品动态更新、商品查询等。并结合本网站的设计，重点对ADO在数据库访问上的应用作了详细描述。通过对本网站设计与建设，具体说明了动态网页设计技术的优点及具体应用。关键词 ASP ADO 动态网页 电子商务一、前言所谓电子商务是指企业利用互联网络处理日常的业务、交易，即与供应商、顾客、银行、分销商和其他贸易伙伴的日常联系。美国学者Kalakota & Whinston认为，从通讯的角度来看，电子商务是利用电话线、电脑网络来传输资讯、产品和服务；从企业流程的角度来看，电子商务是商业交易及工作流程自动化的技术应用；从服务的角度来看，电子商务是企业管理阶层想要降低成本，同时又要提高产品品质及加速服务传递速度的一种工具；从网络的角度来看，电子商务提供了网络上的采购与销售产品和提供服务的能力。电子商务改变了传统的买卖双方面对面的交流方式，也打破了旧有的工作经营模式，它通过网络使企业面对整个世界，为用户提供全天候的服务。近年来，以发达国家为先导的全球电子商务高速增长，到2003年全球企业对企业 (B2B)的网络交易额将达3.2万亿美元。电子商务如此飞速的增长速度，使它带来的商机是巨大而深远的。网站的建设取代了以往商品流通中的中间行为，如层层叠叠的商品代理、分销等，大大简化了商品流通环节。另外，通过应用电子商务、建立网站，企业不仅可以提高自己的知名度，而且可以提供全天候的，即每年365天，每天24小时的服务。本网站由前台系统和后台系统两部分构成，前台系统是供顾客使用的界面，像商店的柜台一样，顾客可以在这里挑选商品、购物、支付；后台系统是供维护者对网站进行管理和维护的工具，包括订单管理、商品管理等。二、网站结构与系统分析（一）网站商业流程设计一个网站是否成功，其中一个重要的取决因素是该网站的流程是否设计合理。简便、快捷的购物流程是本网站的一个重要特点。（见图2-1）进入网站首页登录或注册查看商品下订单等待工作人员联系等待接收商品用户注册工作人员未注册图2-1 购物流程（二）网站功能模块划分为了实现上述流程，本网站从功能上划分为前台系统和后台系统两部分。前台系统主要实现与用户的交互，实现用户浏览及在线购物等功能，后台系统的设计主要目的在于系统管理，其中包括订单的处理、商品信息的添加及维护等功能。系统结构如图2-2所示。前台系统会员服务模块商品展示与查询模块购物车管理模块订单管理模块网络商城购物后台管理系统商品管理模块订单管理模块用户管理模块图2-2 网站功能结构图三、网站的设计与实现（一）页面主要功能1、网站总体设计主页企业简介产品信息产品目录新产品产品搜索在线订购下达订单发展动态业务联系会员服务用户登录购物车 管理网站公告后台管理模块商品管理注册用户管理订单处理图3-1 网站页面结构图（二）开发工具与环境1、操作平台鉴于Windows2000具有成本较低、功能强大、开发界面良好、易操作等特点，系统选用其作为操作平台。2、Web服务器微软的IIS5.0是目前较流行的Web服务器，界面良好、功能强大、安全性较好、与Windows XP兼容性好。3、数据库服务器Access是微软的办公软件Office系列的数据库组件，是一开放的数据库平台和开发平台。数据查询、增、删、改、链接、导入、导出都非常方便。另外，Access还有报表功能，创建报表、图表都很方便。针对Access的特点，且考虑到本网站是一专营儿童用品网站，主要面向一般消费者，规模较小，数据量不大，故选用Access2000作为后台数据库系统。4、数据库接口ASPASP是 Active Server Pages（动态服务器主页）的缩写，它是一个服务器端的脚本环境，在站点的Web服务器上解释脚本，可产生并执行动态、交互式、高效率的站点服务器应用程序。从软件的技术层面看，ASP有如下的特点： （1）无需编译。ASP脚本集成于HTML当中，容易生成，无需编译或链接即可直接解释执行。 （2）独立于浏览器。用户端只要使用可解释常规HTML码的浏览器，即可浏览ASP所设计的主页。ASP脚本是在站点服务器端执行的，用户端的浏览器不需要支持它。因此，若不通过从服务器下载来观察*.asp 主页，在浏览器端见不到正确的页面内容。 （3）面向对象。在ASP脚本中可以方便地引用系统组件和ASP的内置组件，还能通过定制ActiveX Server Component来扩充功能。 （4）源程序码不会外漏。ASP脚本在服务器上执行，传到用户浏览器的只是ASP执行结果所生成的常规HTML码，这样可保证程序代码不被他人盗取。 从应用的层面看，ASP有如下的功能：（1）处理由浏览器传送到站点服务器的表单输入。 （2）访问和编辑服务器端的数据库表。使用浏览器即可输入、更新和删除站点服务器的数据库中的数据。 （3）提供广告轮播器、取得浏览器信息、URL表管理等内置功能。 （4）由cookies读写用户端的硬盘文件，以记录用户的数据。 （5）可以实现在多个主页间共享信息，以开发复杂的商务站点应用程序。 （6）使用VBScript或JScript等简易的脚本语言，结合HTML码，快速完成站点的应用程序。通过站点服务器执行脚本语言，产生或更改在客户端执行的脚本语言。 （7）扩充功能的能力强，可通过使用Visual Basic、Java、Visual C + 等多种程序语言制作ActiveX Server Component以满足自己的特殊需要。5、开发工具静态页面：Dreamwearver CS3、Frantpage2000动态页面：InterDve6.0图象处理：Photoshop CS动画制作：Flash6.0（三）网站的具体制作与实现1、网页的具体制作与实现（1）网页布局网页采用拐角型布局方式。页面上方是标题及广告横幅；左侧是网站导航；中间为网站新品推介；右侧为常用功能控件，包括登录模块、购物车；下方以滚动的方式展示网站最新公告信息。页面尺寸为800x600。（见图3-2）图3-2（2）表格、表单应用举例本网站设计广泛应用了表格table、表单form，但主页index.asp就用到9个table、3个form。因此，选取用户登录部分页面说明表格及表单在网页设计中的应用。用户登录部分布局及结构如图3-3所示。图3-3 用户登录部分布局及结构图（3）动态链接应用列举商品展示模块实现过程描述由于商品更新速度较快，为提高效率，本网站使用动态方式实现商品的展示功能，即利用recordset读取商品记录表sb中的记录，再用循环实现商品记录的逐条输出。用户点击对应图片，即可进入商品展示子页。为使页面简洁明了，主页商品推介栏仅列出3件最新产品，用户可以点击下方“更多的”链接获取其余产品信息。具体实现asp代码如下。set rs=server.CreateObject("adodb.recordset")rs.Open "select * from sb order by id desc",MM_so_STRING ' 使用recordset读取数据库中商品表sb中的记录，按由新到旧排序<table width="100%" border="0"><tr> <td height="241"> <table width="90%" height="221" border="0" align="center">dim I ' I用于控制主页新品推介中显示3件最新的商品i=0do while not rs.eof ' 填充表格，直到最后一条记录，或输出已达到3个 if i<3 then%> <tr> <td width="62%"> <div align="left"><font color="#FF00FF"><%=rs("title").Value%></font><br> <%=rs("title_bbk").Value%></div> 注：读取字段title、title-bbk填充表格 </td> <td width="38%"> <div align="center"><a href="<%=rs("url").Value%>"><img src="images/<%=rs("gif").Value%>" width="144" height="60" border="1"></a></div> </td> 注：动态实现链接 </tr> <%end if i=i+1 rs.MoveNext ' 读取下一记录looprs.Close ' 关闭recordset <tr> <td><div align="left"></div></td> <td><div align="center"><a href="cbs.htm">更多的.</a></div></td> </tr></table>效果见图3-4。图3-4 商品展示效果图2、数据库设计（1）数据库创建数据库名称XIAO，包括login、admin、sb、online四张表。1.1注册用户表login该表用于记录注册用户信息，包括用户名、密码、用户姓名、联系电话、电子邮件地址等多项内容，具体描述见下表。字段数据类型字段描述备注Id长整型序号自动编号Username文本用户名主键Pass文本密码Xm文本用户姓名Tel文本联系电话Email文本电子邮件地址1.2管理员表admin该表用于记录管理员信息，各字段描述见下表。字段数据类型字段描述备注Id长整型序号自动编号log文本管理员用户名主键Pass文本密码1.3商品信息表sb字段数据类型字段描述备注Id长整型序号自动编号Title文本商品名称Title_bbk备注商品信息描述Gif文本商品实物照存放路径用于图片动态显示url文本商品详细介绍页面的htm文件名用于动态链接实现1.4订单表online该表记录用户所下达的订单信息。字段数据类型字段描述备注Id长整型序号自动编号A1文本商品名称A2数值订购数量A3文本用户姓名A4文本联系电话A5文本收货地址A6备注备注（2）数据源ODBC配置开放式数据库连（ODBC）是一个调用级接口，它使得应用程序得以访问任何具有ODBC 驱动程序的数据库中的数据。使用ODBC可以创建具有访问任何数据库（最终用户具有该数据库的 ODBC 驱动程序）的权限的数据库应用程序。ODBC提供了使应用程序独立于源数据库管理系统（DBMS）的API。 与本系统相关的ODBC配置步骤如下：1、打开ODBC数据源管理器。2、在“系统DSN”选项卡上单击“添加”。 3、在“创建新数据源”对话框中，选择一个ACCESS驱动程序并单击“下一步”。 4、数据源名称设为so，然后单击“浏览”，然后选择XIAO.mdb文件用作数据源。5、单击“完成”。 （3）包含的asp文件为方便各asp文件调用数据源，设计了so.asp文件，用于定义统一的数据源。文件内容如下：MM_so_STRING = "dsn=so;"其他需要使用该数据源的页面，用<!-#include file="./Connections/so.asp" ->调用即可。3、动态网页的设计与实现（1）用户登录模块设计与实现dim qstrIf Request.QueryString<>"" Then qstr=Request("act")' 获取参数act值end ifif qstr="chk" then' act值为chk，表明用户点击登录 MM_valUsername=CStr(Request.Form("q1") ' 获取用户名 If MM_valUsername <> "" Then' 若用户名不为空 set MM_rsUser = Server.CreateObject("ADODB.Recordset") ' 建立recordset对象 MM_rsUser.ActiveConnection = MM_so_STRING MM_rsUser.Source = "select username,pass from login where username='" & MM_valUsername & "' and pass='" & CStr(Request.Form("q2") & "'" MM_rsUser.CursorType = 0 MM_rsUser.CursorLocation = 2 MM_rsUser.LockType = 3 MM_rsUser.Open()' 判断用户名、密码是否匹配 If Not (MM_rsUser.EOF and MM_rsUser.BOF) Then ' 用户名、密码匹配，为合法用户，转移到产品展示主页cbs.htm Session("MM_Username") = MM_rsUser("username")' 将用户名添加到session变量MM_Username中 MM_rsUser.Close ' 读取数据完毕，关闭recordset对象 Response.Redirect("cbs.htm") else MM_rsUser.Close Response.Redirect("index.asp") ' 用户名、密码不匹配，为非法用户，重新回到主页index.asp End If End If end if（2）用户注册模块设计与实现' 声明变量MM_editAction = CStr(Request("URL")If (Request.QueryString <> "") Then MM_editAction = MM_editAction & "?" & Request.QueryStringEnd If' boolean to abort record editMM_abortEdit = false' 定义查询语句字符串MM_editQuery = ""' * 插入记录If (CStr(Request("MM_insert") <> "") Then MM_editConnection = MM_so_STRING' 定义数据库连接串 MM_editTable = "login"' 访问数据表为“login” MM_editRedirectUrl = "login_ok.asp" MM_fieldsStr = "username|value|pass|value|xm|value|tel|value|email|value" MM_columnsStr = "username|',none,''|pass|',none,''|xm|',none,''|tel|',none,''|email|',none,''" ' 创建数组MM_fields和MM_columns MM_fields = Split(MM_fieldsStr, "|") MM_columns = Split(MM_columnsStr, "|") ' 将用户填写的内容添加到数组MM_fields中 For i = LBound(MM_fields) To UBound(MM_fields) Step 2 MM_fields(i+1) = CStr(Request.Form(MM_fields(i) Next ' 为URL添加传递参数 If (MM_editRedirectUrl <> "" And Request.QueryString <> "") Then If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0 And Request.QueryString <> "") Then' 判断是否为第一个参数，采用Instr函数判断MM_editRedirectUrl中是否已包含"?"字符串MM_editRedirectUrl = MM_editRedirectUrl & "?" & Request.QueryString' 添加第一个参数 ElseMM_editRedirectUrl = MM_editRedirectUrl & "&" & Request.QueryString' 参数数目不止一个 End If End IfEnd If' * 插入记录处理过程If (CStr(Request("MM_insert") <> "") Then MM_tableValues = "" MM_dbValues = ""' 定义insert语句所用参数，并为各参数赋值。用循环实现 MM_editCmd.ActiveConnection.Close If (MM_editRedirectUrl <> "") Then Response.Redirect(MM_editRedirectUrl) End If End IfEnd If为保证用户对所有必须填写的栏目进行填写，采用了一段javascript语句进行控制，具体如下：<script language="javascript">function chk()if (document.forms("form1").item("username").value="")alert("请填写用户名");return false;if(document.forms("form1").item("pass").value="")|(document.forms("form1").item("pass2").value="")alert("请填写密码");return false;if(document.forms("form1").item("pass").value!=document.forms("form1").item("pass2").value)alert("两次输入的密码不一致，请重新输入");return false;if (document.forms("form1").item("xm").value="")alert("请填写姓名");return false;if (document.forms("form1").item("tel").value="")alert("请填写电话");return false;if (document.forms("form1").item("email").value="")alert("请填写电子邮件地址");return false;return true;</script>若用户有某一栏目没有填写，或两次填写的密码不一致，自动弹出警告框。（见图3-5）图3-5 用户注册模块（3）在线订购功能的实现在线订购页面如3-6所示。用户根据自己的需要从产品下拉菜单中选择产品，并清楚填写订购数量、用户姓名、联系电话、送货地点等资料。另外，若用户为注册用户且已经登录，则系统自动从注册用户表login中调出相关资料，即用户注册时填写的姓名、联系电话等资料。具体asp代码及说明如下。图3-6 在线订购主页</style><head><title><%=webname%>-您的购物车</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="Robots" content="index,follow"></head><body text="#000000" leftmargin="0" topmargin="0">ProductList = Session("ProductList")Products = Split(Request("Prodid"), ",")For I=0 To UBound(Products) PutToShopBag Products(I), ProductListNextSession("ProductList") = ProductListif request("payment")="去收银台" thenresponse.redirect "b2b_ddlcsys.asp?action=1"end ifIf Request("cmdShow") = "Yes" Then ProductList = "" Products = Split(Request("ProdId"), ", ") For I=0 To UBound(Products) PutToShopBag Products(I), ProductList Next Session("ProductList") = ProductListEnd IfIf Len(Session("ProductList") = 0 ThenResponse.write "<table height=100% width=100% ><tr><td align=center>您的购物车为空，<a href=index.asp><b>继续购物</b></a> <a href=""JavaScript:onClick=window.close();""><B>关闭窗口</B></a></td></tr></table>"Response.endend if<form action="check.asp" method="POST" name="check"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center"><tr> <td height="80"> </td> </tr><tr><td><table border="0" cellspacing="1" cellpadding="4" align="center" width="100%" bgcolor="#CCCCCC">Set rsCheck=Server.CreateObject("ADODB.RecordSet") strsql="select ID,Name,Score,Price1,Price2," & LstPrice & ",amount,VipPrice,Stock,Pic,Code from Product where ID in ("&Session("ProductList")&") order by ID"rsCheck.open strsql,conn,1,1Sum = 0response.write "<script language=javascript>alert('对不起，"&rsCheck("Name")&"暂时库存不足，请过段时间再来购买该商品！');window.close();</script>" Response.End() rsCheck.MoveNext LooprsCheck.closeset rsCheck=nothing </table> <table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td width="75%" align="right"><INPUT type=hidden value=Yes name=cmdShow>您的用户等级为：<%= strTitle %> | <span class="STYLE4"><strong>价格总计：<%=Round(Sum,2) %>元</strong></span> | 获得积分：<%=SumS %>分</td> <td width="25%" align="center" bgcolor="#FFCC00"> <input name="payment" type="submit" class="input_bot" value="去收银台"> <input name="button" type="button" class="input_bot" onClick="javascript:window.close()" value="继续购物" language=javascript></td> </tr> </table></td></tr> </table></form></body></html>四、结束语与传统静态网页相比，动态网页的主要优势在于数据发生更改时，无须人工对网页文件进行更新，客户端得到的网页信息始终是最新的。另外，动态网页可接收用户提交的信息并作出反应。例如：当在浏览器上填好表单并提交HTTP请求时，站点服务器上执行一个表单所设定的应用程序，而不只是一个简单的HTML文件。该应用程序分析表单的输入数据，根据不同的数据内容将相应的执行结果（通常是数据库查寻的结果集）以HTML的格式传送给浏览器。鉴于网页动态实现方式的各种优势，“网上购物商城”采用动态方式实现。通过动态的方式，向客户展示企业最新的产品及资讯。与此同时，通过网页的交互，实现在线订购商品功能，实现简单的电子商务。目前该网站还处于初探阶段，系统将在今后的运作中不断完善。七、致 谢在这次毕业设计中，曾遇到过不少问题，如果单靠我个人的努力，很难按时完成毕业设计，在此，我衷心感谢我的指导老师陈国强。我从这些老师身上学到了很多东西。他们认真负责的工作态度，严谨的治学精神和深厚的理论水平都使我获益非浅。无论在理论上还是在实践中，都给与我无私帮助和悉心的教导，使我的毕业设计得以顺利地按时完成。另外，还要感谢学校领导、班主任、各位同学对我们的关怀、帮助，为我们提供了良好的设计环境以及各方面的支持。感谢电大给我们创造学习的机会，感谢所有教过我的电大老师。参考文献1 彭万波等ASP 开发基础与范例M电子工业出版社 ，20032 廖信彦Active Server Pages应用大全ASP与数据库的整合M清华大学出版社，20003 Vivek Sharma,Rajiv Sharma电子商务网站开发指南M清华大学出版社，20024 周学泳ASP+SQL SERVER开发网上商店M人民邮电出版社，20005 黄斯伟，王玮动态网页制作HTML4.0使用详解M人民邮电出版社，1999
