网站前台功能设计与实现.ppt
第4章 网站前台功能设计与实现,学习目标,了解电子商务网站前台功能设计的方法。能够分析网站前台的功能构成。熟悉网上购物的业务流程。掌握网站前台系统的实现方法。,本章主要内容,4.1网站主页设计4.2购物管理功能设计4.3会员管理功能设计4.4商品展示功能设计4.5其他功能设计,导入案例:“宝宝365”网站前台功能需求,“宝宝365”网站前台商务系统需要实现以下基本功能:能够进行企业的品牌宣传,提供多形态的商品展示,完善而便捷的在线商品销售,内容丰富的促销快讯,个性的会员管理和订单查询,具有亲和力的育儿论坛,方便的在线咨询和多条件的搜索引擎。,“宝宝365”网站功能结构图,“宝宝365”网站主页,4.1网站主页结构设计,网站主页结构设计 页面标题 网站标识 首导部分 主内容区 尾导部分,4.1网站主页结构设计,4.1.2 主页程序设计(1)/babyshop/index.asp:网站前台主页。(2)/babyshop/top.asp:网站前台首导。(3)/babyshop/top1.asp:非会员通用功能。(4)/babyshop/topmemeber.asp:会员通用功能。(5)/babyshop/end.asp:网站前台尾导。(6)/babyshop/conn.inc:建立数据库连接。,4.2购物管理功能设计,网上购物流程包含:商品展示、查看购物车、填写订单、完成订单和订单查询等功能。以“宝宝365”网站为例,说明网站各项购物管理功能的设计。流程图中提示的页面文件其路径起始于网站根目录即/babyshop/.。,4.2购物管理功能设计,购物程序流程图,4.2购物管理功能设计,4.2.1 选购商品 客户可以在商品展示页面中,寻找要购买的商品,然后点击商品条目中的购物车链接,即可将商品放入购物车里。,4.2购物管理功能设计,4.2.2 购物车管理 购物车里存放的是客户希望购买的商品,通过购物车可以对其中的商品进行调整,如修改商品的数量、取消商品等,此页面还提供继续购买商品以及生成订单等功能。购物车管理程序文件(1)/babyshop/shoppingbagadd.asp:添加商品到购物车。(2)/babyshop/shoppingbag.asp:购物车管理(查看购物车)。(3)/babyshop/shoppingbagclear.asp:清空购物车。,4.2购物管理功能设计,4.2.3 订单处理 当客户完成商品的选购后,就要去收银台结账,这是在线生成订单的过程,也是完成网上购物重要的设计内容之一。订单处理程序文件(1)/babyshop/shoppingbagfinish.asp:填写订单内容。(2)/babyshop/shoppingjz.asp:非会员将订单信息写入数据库。(3)/babyshop/shoppingmemberjz.asp:会员将订单信息写入数据库。(4)/babyshop/shoppingsuccexx.asp:完成订单。(5)/babyshop/nothing.asp:购物车为空提示。,4.2购物管理功能设计,4.2.4 订单查询当客户完成网上购物订单的处理后,可以得到一个订单号。使用订单查询系统,输入订单号和订单中联系人的名字,就可以查询到此订单中的购物信息和此时订单的处理状态。订单查询流程如图418所示。订单查询程序文件(1)/babyshop/dingdan/dingdanindex.asp:接受订单查询条件。(2)/babyshop/dingdan/dingdancx.asp:显示订单查询结果。(3)/babyshop/dingdan/fail.asp:订单查询失败提示。,4.2购物管理功能设计,订单查询功能流程图,4.3会员管理功能设计,在“宝宝365”网站中设计了为会员提供综合服务的会员专区,提供了会员注册、登录、注销、会员信息修改、找回密码、订单查询、我的购物车等管理功能。会员管理程序文件(1)/babyshop/huiyuan/user_login.asp:会员登录。(2)/babyshop/huiyuan/hylogincheck.asp:会员登录身份验证。(3)/babyshop/huiyuan/index.asp:会员专区管理。(4)/babyshop/huiyuan/hyedit.asp:会员修改基本信息。(5)/babyshop/huiyuan/hyeditpw.asp:会员修改密码。(6)/babyshop/huiyuan/hyeditbaby.asp:会员更新宝宝信息。(7)/babyshop/huiyuan/hyloginout.asp:会员退出(注销)。(8)/babyshop/huiyuan/hyloginerror.asp:会员登录错误提示。(9)/babyshop/huiyuan/hyzcnew.asp:会员注册条款信息。(10)/babyshop/huiyuan/hyzcform.asp:会员注册信息录入。(11)/babyshop/huiyuan/hyzcsave.asp:保存会员注册信息。(12)/babyshop/huiyuan/hyzcsuccess.asp:会员注册成功提示。,4.4 商品展示功能程序,会员专区主要功能流程图,4.4商品展示功能设计,通过不同的商品表现形式,向客户展示网站的各类商品,使客户有目的且快速地挑选所需商品。商品展示程序文件(1)/babyshop/goodsindex.asp:商品陈列展示。(2)/babyshop/goodsnew.asp:新品推荐展示。(3)/babyshop/goodshotsale.asp:热销商品展示。(4)/babyshop/goodsbargain.asp:特价商品展示。(5)/babyshop/goodsdetail.asp:显示商品详情。,4.5其他功能设计,4.5.1 商品搜索引擎 4.5.2在线咨询4.5.3 在线调查,案例解析,根据网站系统的设计要求,对“宝宝365”网站进行前台功能分析和结构设计,产生网站前台的功能结构图。程序设计人员依据功能结构图进行功能模块的程序开发,分别进行了网站主页、购物管理、会员管理、商品展示、商品搜索引擎、在线咨询和在线调查等模块的功能设计和程序实现。通过对以上功能模块的程序设计和调试,“宝宝365”网站前台基本功能都已实现,但是对于从事商业活动的电子商务网站,只有网站前台功能是不完整的,网站信息的更新、订单的处理都将依赖于网站后台管理系统的工作,所以,网站前台功能开发只是网站建设的一个部分,为了更好地管理和经营网站,还必须进行网站后台系统的开发。,本章小结,本章以设计和实现“宝宝365”网站前台功能为主线,详细介绍了网站主页的结构设计和实现方法,并根据网站的功能结构图,进行了主要模块的流程设计、页面设计和程序代码设计,同时为用户将来进行网站建设提供了相应的技术解决方案。,作业与指导,1.简述电子商务网站前台系统的主要功能。2.试说明电子商务网站网上购物的业务流程。3.简述网站搜索引擎的实现技术。4.参照案例程序,进行网站促销快讯功能模块的程序设计,