卡通花束之恋网站设计与开发 论文.docx
《卡通花束之恋网站设计与开发 论文.docx》由会员分享,可在线阅读,更多相关《卡通花束之恋网站设计与开发 论文.docx(35页珍藏版)》请在冰点文库上搜索。
卡通花束之恋网站设计与开发论文
引言
随着电子商务的普及,安全交易的完善,电子商务在中国市场已经得到了很好的应用,越来越多的商家选择网络营销,不仅降低了店面租赁的固定成分费用,还省略了维护店内装潢费用。
实体店铺要保持卫生环境的整洁有序,不仅浪费精力,人力,更大大耗用了财力,而电子商务摒弃了这些缺点。
为扩大企业规模,让产品更加专业化,品牌更加明朗化,卡通花束之恋的生产工厂店迫切的需要一个成熟独立、属于自己专营品牌的电子商务网站进行专业的卡通花束销售。
应此要求,我在此次毕业设计的过程中,帮助该公司建设一个能进行有效交易的电子商务网站。
此网站的主要功能有:
用户、管理员的登录、注册功能,其中管理员用户可对该网站的任何信息进行修改、查询、删除和更新的操作,此外还包括购物车的添加和订单提交等。
用户可以对自己的交易信息进行任何操作,可对自己的信息进行修改、查询。
网站包括文本框、标签、图片框、datalist、formview、dropdownlist等控件的应用,可实现商品信息展示、关键字搜索、分类检索、留言板等功能。
1.系统分析与总体设计
1.1系统功能分析
卡通花束之恋网店提供一个能进行真实的网络交易平台,在此网站中,用户可以挑选自己喜欢的商品,加入购物车,填写订单,提交订单给订单系统,付款,当卡通花束之恋网店收到货款之后,便会立即为顾客定做其指定的花束,发货,告诉顾客所购买产品运送快递的快递单号,顾客可以根据此单号在快递的官方网站上查询自己所订购货物的详细物流跟踪情况。
交易完成,顾客自愿留言给商家,此留言对所有访问此网站的用户可见,可作为店铺提升业务能力的依据,也可作为供其他顾客购买的主观意见。
此外,本网站还提供本公司的疯魔网站店铺、淘宝店铺、腾讯拍拍店铺等知名网站的购买网址。
顾客可通过:
支付宝、财付通、网银、邮局汇款、货到付款等多种方式进行付款。
只有在本网站注册的用户才可享用购物车,留言板,订单管理,店铺管理员等VIP特权。
此外,本网店特色为用户提供一个可视化的产品设计界面,顾客可根据系统中提供的真实设计效果,设计自己独一无二的花束。
此网站提供帮助工能,可供新用户做各个交易细节的导向依据。
提供超级管理员页面,方便商家对自己网站的用户、产品、留言、订单等与交易有关的各种信息进行管理。
特点:
1.注册成为会员之后,才有可能申请管理员的权限。
2.DIY花束
1.2功能模块划分
总体功能包括:
登录程序、用户管理、商品信息管理、关键字搜索、购物车、订单管理、留言板、计数器
此系统分为前台和后台两个主要功能模块:
前台的具体功能包括:
用户注册、登录、商品的浏览、查询、采购、订单查询、帮助导航等部分。
后台主要是对网站信息的维护和管理,具体功能包括用户、产品、留言、订单等。
用户注册
图1-1前台功能模块图
图1-2后台功能模块图
1.3系统流程分析
电子商务交易的流程与现实中的购物流程基本一致,如下图所示:
图1-3购物流程图
电子商务是在Internet等网络上进行的,因此,网络是电子商务最基本的构架;电子商务还强调要使系统的软件和硬件、参加交易的买方、卖方、银行或金融机构、厂商、企业和所有合作伙伴,都要在Internet、Intranet、Extranet中密切结合起来,共同从事在网络计算环境下的商业电子化应用。
虽然交易的介质不同,但电子商务和实际中的商务交易流程是基本一致的。
都是卖家需要一个展示自己产品的平台向顾客表明自己经营的产品,顾客根据自己的挑选或者询问,找到自己需要的商品,付款,完成交易。
唯一不同的是,电子商务网站的交易因为缺少面对面交易的可靠性,则需要顾客注册成为本商务网站的会员,具有真实有效的信息即可进行安全而真实的交易;还有个区别就是电子商务的交易,为切实保障买家的利益,还有一个评价系统,但此次交易进行完毕,顾客和卖家需要对双方的服务信用做出评价,供其他交易体参考借鉴。
这也保证了电子商务交易的完整性。
1.4系统概述
本系统主要是为卡通花束之恋网店建设一个可进行实际交易宣传的网站,其主要功能必须包括用户、管理员的登录、注册功能,其中管理员用户可对该网站的任何信息进行修改、查询、删除和更新的操作,此外还包括购物车的添加和订单提交等。
用户可以对自己的交易信息进行任何操作,可对自己的信息进行修改、查询。
可实现商品信息展示、关键字搜索、分类检索、留言板等功能。
系统的整体风格设计应该是简单大气而颜色引人注目的。
所以我选择的红色白色为主色调。
简单大方的设计,没有特殊的广告弹出等繁琐设计页面。
系统的主要流程,就是用户在本网站上浏览商品信息,然后选择购买,其中商品信息的展示和用户购买须先注册登录等功能在第三章会有详细介绍。
2.系统设计
2.1总体设计
建立数据库环节极为重要,需仔细规划。
它对后面的所有工作都起着重要的作用,所以要对数据库进行良好的规划。
根据网站的功能,我们可知,需要保存商品的信息,用户会员的信息,订单相关的信息,收件地址相关信息和留言相关信息。
用户信息与订单,收件,留言等相关联。
订单中具体化为购物车和已经生成的订单,订单也需与商品信息和收件信息相关联。
2.1.1模块设计(H图)
图2-1H图
留言管理模块块
操作员模块
商品管理模块
商品类别模块
计量单位模块
留言板模块
用提交订单模块
用户留言模块
系统设置模块
信息管理模块
用户管理模块
主界面模块
订单管理模块
商品采购模块
管理员管理模块
商品浏览模块
商品查询模块
用户登录模块
用户注册模块
2.1.2输入-处理-输出设计(IPO图)
模块名称:
信息管理模块
图2-2IPO图
模块名称:
用户管理模块
备注:
图2-3IPO图
备注:
IPO图
上层调用模块:
主界面模块
可调用的下层模块:
:
留言模块
管理留言模块
输入:
留言内容
操作留言内容
输出:
留言内容
操作后的留言内容
处理内容:
如要留言,则调用留言模块
如要对留言内容进行操作,则调用管理留言模块
内部数据元素:
日期:
2012.1.3
设计人:
孔祥屏
模块名称:
留言板模块
系统名称:
卡通花束之恋网店
图2-4IPO图
模块名称:
用户管理模块
图2-5IPO图
IPO图
上层调用模块:
主界面模块
日期:
2012.1.3
设计人:
孔祥屏
模块名称:
系统设置模块
系统名称:
卡通花束之恋网店
图2-6IPO图
可调用的下层模块:
:
操作员
商品管理
商品类别
计量单位
输入:
添加/管理操作员
添加/管理商品
添加/管理商品类别
添加/管理计量单位
输出:
添加/修改后的操作员
添加/修改后的商品
添加/修改后的商品类别
添加/修改后的计量单位
处理内容:
如设置操作员,则调用操作员模块
如设置商品,则调用商品管理模块
如设置商品类别,则调用商品类别模块
如设置计量单位,则调用计量单位模块
备注:
内部数据元素:
2.2数据库设计
2.2.1数据库概念设计
得到上面的数据项和数据结构以后,就可以设计出能够满足用户需求的各种实体结构,以及他们之间的关系,为以后的逻辑结构设计打下基础。
命名数据库为企业名称的缩写:
kthszl。
其中包括:
用户表、管理员表、商品表、分类表、设计表、购物车表、订单表、留言板表7张表。
根据上面的设计规划出的实体有:
现有库存管理信息实体、入库信息实体、出库信息实体、客户/供应商实体。
各个实体具体的描述E-R图如下:
2.2.2数据库逻辑设计
管理员(管理员编号、管理员名、管理员密码)
用户(用户编号、用户名、用户密码、用户地址、用户电话)
购物车(购物车编号、产品编号、用户名、购物数量、产品价格)
产品(产品编号、产品名、产品价格、产品描述、产品图片、类目编号)
类目(类目编号、类目名)
设计(设计编号、用户名、设计花束形状、设计花束侧面款式、设计花束包装颜色、设计花束包装材料、设计花束装饰辅料、设计花束装饰辅料颜色、设计花束玩偶名称、设计花束玩偶枝数、设计花束拉花、备注、粗略估计价格)
评价(评价编号、用户编号、评价内容、评价日期)
交易(订单编号、购物车编号、产品编号、购物数量、总计价格、用户编号、收件人姓名、收件人电话、收件地址、物流单号、交易日期、备注)
2.2.3数据库物理设计
整个系统的ER图展现了各个实体和数据间的关系,如下图所示
n
图2-7整体ER图
将逻辑设计转换为物理设计,如下各实体图所示,方框内是实体,椭圆是该实体的属性。
图2-8产品实体图
图2-9交易实体图
图2-10用户实体图
图2-11评价实体图
图2-12管理员实体图
设计花束装饰辅料颜色
图2-13设计实体图
图2-14购物车实体图
图2-15类目实体图
2.2.4各个表的设计如下各表:
表2-1:
用户表
表2-2:
管理员表
表2-3:
类目表
表2-4:
产品表
表2-5:
设计表
表2-6:
购物车表
表2-7:
交易表
表2-8:
评价表
2.3网页目录及功能结构
对于一个成熟的电子商务网站,需要用到的网页很多,而每个网页也会对应着不同的功能,以下是此网站的主要网页对应的功能目录及其属性。
2.3.1数据字典
数据流
系统名:
卡通花束之恋网店
条目名:
登录
编号:
F1
别名:
登录
来源:
S1管理员
去处:
界面管理
数据流结构:
登录:
用户名+密码进行确认
简要说明:
管理员进行登录
修改记录:
编写
孔祥屏
日期
2012-01-01
审核
孔祥屏
日期
2012-01-01
表2-9数据流
数据元素
系统名:
卡通花束之恋网店
条目名:
订单管理
编号:
F1
别名:
仓库
属于数据流:
管理订单操作
存储处:
订单管理
产品:
订单类别:
有2位组成按类别编码如:
部,件
订单部分:
订单品牌:
有2位组成按顺序来
订单编号:
校验:
有2位组成按顺序来
例如:
X类X品牌XXX编号手机
数据元素结构:
XXXXXX
校验位
订单编号
订单类别
订单品牌
简要说明:
管理员执行管理订单操作
修改记录:
编写
孔祥屏
日期
2012-01-01
审核
孔祥屏
日期
2012-01-01
表2-10数据元素
数据存储
系统名:
卡通花束之恋网店
条目名:
存储查询
编号:
别名:
存储组织:
花束产品信息
主关键字:
ID号
记录组成:
ID号+产品名称+产品数量+产品类型
简要说明:
管理员进行记录
修改记录:
编写
孔祥屏
日期
2012-01-01
审核
孔祥屏
日期
2012-01-01
表2-11数据存储
加工
系统名:
卡通花束之恋网店
条目名:
信息管理
编号:
别名:
输入:
F1登录操作
输出:
F2信息管理操作
加工逻辑:
根据管理员操作情况,输入需要管理的产品信息进行信息管理操作
。
简要说明:
无
修改记录:
编写
孔祥屏
日期
2011-05-05
审核
孔祥屏
日期
2011-05-05
表2-12加工
外部项
系统名:
卡通花束之恋网店
条目名:
客户
编号:
M1
别名:
客户
输入数据流:
签收,付款单据,发票
输出数据流:
货款,货物
主要特征:
顾客主要特征是:
姓名、地址、电话、编号
简要说明:
无。
修改记录:
编写
孔祥屏
日期
2011-11-05
审核
孔祥屏
日期
2011-11-05
表2-13外部项
2.3.2网页简要说明
网页名称
网页功能
前台/后台
bangzhu.aspx
帮助信息主页
前
chakansypj.aspx
查看所有评价
前
changjianwenti.aspx
帮助信息子项:
常见问题
前
denglu.aspx
普通用户登录页面
前
dingdan.aspx
添加订单页面
前
diyzhuanqu.aspx
Diy设计
前
gouwuche.aspx
添加到购物车
前
gouwuliucheng.aspx
帮助信息子项:
购物流程
前
guanyukthszl.aspx
关于卡通花束之恋公司的介绍
前
jiage.aspx
按价格搜索
前
jiamengwomen.aspx
加盟须知
前
jiaoyitiaokuan.aspx
交易条款
前
kefuzixun.aspx
客服联系中心
前
lianxiwomen.aspx
联系我们公司
前
login.aspx
普通用户登录验证
前
peisongfangshi.aspx
帮助信息子项:
配送方式
前
pinglun.aspx
插入评论
前
sousuo.aspx
关键字搜索
前
user.aspx
用户个人中心(暂未开发)
前
wdgwc.aspx
查看用户自己的购物车
前
wdlyb.aspx
查看用户自己的留言板
前
wdxiaofeijl.aspx
查看用户自己的消费记录
前
wodedingdan.aspx
查看用户自己的订单
前
xiangqing.aspx
产品的详细信息
前
zhifufangshi.aspx
帮助信息子项:
支付送方式
前
zhuce.aspx
用户注册
前
zhuye.aspx
网站主页
前
zhuye1.aspx
用户登录后的主页
前
Global.asax
统计人数
后
gldd.aspx
管理订单
后
glpl.aspx
管理评论
后
glsp.aspx
管理商品信息
后
glyh.aspx
管理本网站用户
后
glydl.aspx
管理员登录页面
后
glylogin.aspx
验证管理员登录
后
glyzhuce.aspx
管理员注册
后
glzy.aspx
管理后台主页
后
表2-14:
网页中文对应说明
3.功能设计
3.1登录注册页面
功能总体设计包括对登陆页面,商品搜索、管理页面等的具体功能设计。
主要是利用SQl语句及VisualStudio2005的可视化控件对所有信息进行增删改查的具体实施。
3.1.1注册功能
要想登录必须先有此网站的账号,由此,注册是实现此企业网站交易的基础功能,我们用formview的默认插入形式实现此功能。
从工具区拖入一个formview,在属性栏将其默认形式改为插入:
链接数据库,配置数据源,链接到用户表。
编辑insert模板,拖入一个fileupload控件,此控件可以用来上传用户的个人头像图片。
在源设计器中,insert语句后有关自动生成的、只读字段等删掉,where后面只留主键—用户编号。
由此,可实现数据的插入。
其中,对与用户名、用户密码、重复密码不能为空的验证设置,我们可以采用VisualStudio中的requiredfilevalidator控件,记得此控件的controlvalidate属性要选中所要验证的控件。
重复密码可用于避免用户误输入,而不知道自己真正密码的情况,由此,重复密码需要一个comparevilidator的控件来验证两次输入的密码是否一致,也需要在右边的属性中选中要匹配的控件名称和匹配的控件名称。
在用户上传头像的单击按钮事件中,需要验证用户是否输入的提示信息。
代码如下:
stringsavePath=Server.MapPath("~/yhimg/");
FileUploadfile1=FormView1.FindControl("FileUpload1")asFileUpload;
if(file1.HasFile)
{
stringfileName=file1.FileName;
savePath+=fileName;//目标路径+文件名
file1.SaveAs(savePath);//上传文件
(FormView1.FindControl("头像TextBox")asTextBox).Text="~/yhimg/"+fileName;
}
else
{
Response.Write("");
}
运行界面如下图所示:
图3-1:
用户注册页面
3.2登录功能
用户注册后,就有了自己的用户名和密码,有权登录本网站进行购买,留言等功能(这些功能是普通浏览用户无法体会的,只有注册为本网站的用户,才有购买产品,下单,申请企业管理员的特权)。
点击登录后,跳转到登陆界面,登录界面是在用户输入完有效的用户名、正确的密码和验证码后出发按钮的单击事件,经过验证合格,储藏用户名session进行传递,才可以进行电子交易的。
同样,需对用户名,密码,验证码进行不能为空的验证设计,用上面提到的requiredfilevalidator控件,验证码是用一段随机打印数字的函数来实现的,如下所示:
publicstringinCode="";
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!
IsPostBack)
{
RandominCode=newRandom();
LinkButton1.Text=inCode.Next(1000,9999).ToString();
TextBox1.Text=LinkButton1.Text;
}
}
对验证码进行判断时候,可用个中间控件来实现,代码如下所示:
if(LinkButton1.Text==TextBox4.Text)
{
Session["un"]=TextBox2.Text;
Response.Redirect("login.aspx?
yhm="+TextBox2.Text+"&mm="+TextBox3.Text);
}
else
{
Response.Write("");
}
}
protectedvoidLinkButton1_Click(objectsender,EventArgse)
{
RandominCode=newRandom();
LinkButton1.Text=inCode.Next(1000,9999).ToString();
TextBox1.Text=LinkButton1.Text;
}
当所有基本验证成功后,便跳转到验证用户名密码是否在本企业网站的用户信息中所有,此网页可用FormView1绑定字段来实现。
也可用如下SQL查询语句:
SELECT[用户名]FROM[用户]WHERE(([用户名]=@用户名)AND([用户密码]=@用户密码))
若验证不成功,将会在验证页面显示:
“您输入的信息有误,请重新输出“。
并设置一个返回登录页面的返回链接,方便用户重新输入。
3.3管理页面
管理页面是管理后台的主页,是所有后台模块的集成区域。
在此页面,管理员可方便的对自己网站的用户、产品、留言、订单等与交易有关的各种信息进行管理。
管理主页由一个两行一列的表格组成,第一行用来盛放menu菜单导航,第二行用
首先要通过登录,才可进入管理界面。
每个有权登录管理界面的人,都必须先在本网站注册信息,然后再主页先从普通用户登录后,提出申请,经过本站初始管理员的统一,方可有权对本站所有信息进行操作。
此登录页面和普通用户的登录页面功能基本一致,此处就不在复述。
由于此网页是对用户、产品、留言、订单等与交易有关的各种信息进行的增删改查,所以功能是一致的,就是增加新数据,删除无价值的数据,修改并更新陈旧的数据,查询自己需要的数据,只是分别管理的信息在数据库中药变更的表不同而已。
所以此处,只着重介绍用户的管理功能,同理就可以说明对其他信息的管理,故其他信息管理制作简单介绍。
3.3.1用户管理
我们可以用GridView1控件实现对用户的修改,删除功能,链接到数据库中的用户表。
3.3.1.1修改语句:
UPDATE[用户]SET[用户名]=@用户名,[用户密码]=@用户密码,[用户性别]=@用户性别,[用户地址]=@用户地址,[用户电话]=@用户电话,[个性签名]=@个性签名,[头像]=@头像WHERE[用户编号]=@original_用户编号
3.3.1.2增加语句如下:
INSERTINTO[用户]([用户名],[用户密码],[用户性别],[用户地址],[用户电话],[个性签名],[头像])VALUES(@用户名,@用户密码,@用户性别,@用户地址,@用户电话,@个性签名,@头像)
3.3.1.3删除语句如下:
DELETEFROM[用户]WHERE[用户编号]=@original_用户编号
图3-2:
管理用户页面
3.3.2商品管理
用Gridview和formview一起实现,首先链接数据库,配置数据源,链接到商品表。
3.3.2.1:
添加商品
INSERTINTO[产品信息]([产品编号],[产品名],[产品价格],[产品描述],[产品图片],[类别编号],[颜色属性])VALUES(@产品编号,@产品名,@产品价格,@产品描述,@产品图片,@类别编号,@颜色属性)
3.3.2.2:
修改商品
UPDATE[产品信息]SET[产品名]=@产品名,[产品价格]=@产品价格,[产品描述]=@产品描述,[产品图片]=@产品图片,[类别编号]=@类别编号,[颜色属性]=@颜色属性WHERE[产品编号]=@original_产品编号
3.3.2.3删除商品
DELETEFROM[产品信息]WHERE[产品编号]=@original_产品编号
图3-3:
删除商品页面
3.3.3评论管理
3.3.3.1增加评论
是在主页中,登录成功的用户有权操作的功能:
他用的也是一个formview,默认插入形式:
INSERTINTO[评价]([用户编号],[评价内容],[评价日期],[用户名])VALUES(@用户编号,@评价内容,@评价日期,@用户名)
图3-4:
留言板添加页面
3.3.3.2更新评论
当用户点击留言之后,他的留言就会自动添加到数据库当中:
UPDATE[评价]SET[评价内容]