网页设计与网站建设.docx
- 文档编号:13924300
- 上传时间:2023-06-19
- 格式:DOCX
- 页数:27
- 大小:365.55KB
网页设计与网站建设.docx
《网页设计与网站建设.docx》由会员分享,可在线阅读,更多相关《网页设计与网站建设.docx(27页珍藏版)》请在冰点文库上搜索。
网页设计与网站建设
榆林学院
课程设计报告
课程名称网页设计与网站建设
课题名称网络购物车
专业
班级
学号
姓名
指导教师刘红霞,张峰
2016年6月2日
目录
一、需求分析1
1.1功能需求1
1.2开发及运行环境2
1.2.2硬件平台2
1.2.2软件要求2
二、总体设计2
2.1网站的设计目标2
2.2网站的深入调查3
2.3网站设计的特点3
2.4网站开发的设计思想3
三、模块设计4
3.1基于MVC的应用开发模型4
3.2平台功能模块的设计分析5
四、程序模块设计6
4.1系统流程分析6
4.1.1前台购物流程如图4-2所示6
4.1.2注册功能流程如图4-3所示6
4.1.3商品搜索流程如图4-4所示7
4.1.4用户登录流程8
4.1.5商品管理流程9
4.1.6购物车流程9
五、详细设计与代码实现10
5.1注册设计10
5.2登录设计12
5.3购物车设计13
5.3.1购物车模块的实现13
5.3.2商品信息16
5.3.3后台管理模块的实现17
5.3.4商品管理17
5.3.5会员管理19
5.3.6商品搜索模块的实现21
六、总结22
计算机与通信学院课程设计评分表23
参考文献24
一、需求分析
网络购物车是现在广泛用于网上购物的工具之一。
购物车主要提供了基本的用户注册,用户登录,增删物品,统计价格等功能。
用户在使用购物车时,可以方便的使用这些简易的功能。
1.1功能需求
从部署的位置来看,本项目可以分为服务器端和客户端。
服务器端的应用主要是起管理作用,用户端发送的所有消息都将被发送到服务器端,经过服务器端的出来后,服务器端可以选择将消息丢弃或者转发。
用户端的应用分成三种。
第一种是提供基本的登录界面,在登录界面中应该有服务器地址选择、服务器端口选择以及用户登录昵称等信息;第二种是想服务器发送消息,比如用户注册,用户登录、用户退出、添加物品,删除物品,统计价格等消息;第三种是响应服务器的消息,即当接收到服务器端方式的消息后,采取响应的动作。
比如当用户端收到服务器端发送的添加物品的消息后,用户端应该从消息中提取添加物品的信息,并将信息按要求添加到适当的位置。
综上所述,本系统需要提供一下的界面和功能:
(1)用户注册。
当用户第一次使用购物车时,提供用户注册界面,以便后期进行各种购物车功能
(2)在用户端提供登录界面,支持服务器的选择,并提供所选择服务器的端口号,以及基本的登录昵称的输入。
(3)提供一个完整的网络消息协议的设计以及实现。
该消息协议应包括登录消息、添加物品、删除物品、统计价格等。
每一种网络消息都应该有响应处理以及回复的方法。
(4)在客户端提供购物车页面。
用户在购物车页面可以进行添加、删除等操作,并可以实时统计价格。
(5)在服务器端提供消息出来机制。
对客户端发送的各种消息,服务器端应该在进行分析后,进行响应的处理。
1.2开发及运行环境
1.2.1硬件平台
CPU:
Pentium42.0GHz以上
内存:
512MB以上容量
显卡:
32MB或以上显存之AGP接口显卡
1.2.2软件要求
操作系统:
MicrosoftWindowsXP
运行环境:
Tomcat/jdk1.6
开发工具:
MyEclipse
二、总体设计
2.1网站的设计目标
本购物系统由于需要演示程序,故为了演示方便,采用JSP+Access数据库的架构实现的,此系统分为前台管理和后台管理。
前台管理是友好的操作界面,供用户浏览、查询使用。
包括:
浏览商品、查询商品、订购商品、购物车、用户维护等功能;后台管理是提供给管理员的,其中包括:
商品管理、用户管理、网站信息管理、和广告友情链接等。
使管理员从繁琐的手工操作中解脱出来,并提高了办公效率。
2.2网站的深入调查
经过以上的初步调查和研究,并且确定了该平台的可行性,并决定开发本平台,为了能够对现行的平台内容进行充分了解,使所要开发的平台更具有实用性和适应性,通过两个月的实习调查和指导老师的耐心介绍,设计出该平台功能如下:
1.能够完成用户基本信息录入的注册和用户基本信息的个人前台与后台管理。
2.能够完成管理员对网站的商品资料(商品添加、商品审查)会员管理(会员审查)、网站信息管理(新闻添加、修改删除、公告设置),以及常规设置(广告添加,友情链接)的功能。
3.能过电子商品的名称,电子商品的分类进行搜索。
4.能够通过查看购物车对所选商品进行确定、挑选,通过定单查询对支付费用进行确定。
经过前一阶段的调查与研究分析,我已确定了该平台设计的主要功能,对每个功能模块也作了具体描述,下面就来具体分析该平台的设计特点与具体思想。
2.3网站设计的特点
我所设计和开发的网上购物平台是经过很长时间的调查和分析才开始具体实施的,它的主要特点是改变了以往的购物只能过现实的商场才能达到的结果,采用Web技术,借助于Internet互联网广泛应用技术,达到资源共享,提高以往购物的局限性,缩短人们的时间和提高工作效率,具有较好的交互性,从而实现信息化,规范化,系统化,网络化的平台,使整个购物活动过程简单、方便、易行。
2.4网站开发的设计思想
网上购物平台主要是对后台管理和前台操作。
后台管理是管理员对本网站的维护,通过商品资料(商品添加、商品修改)会员管理(会员审查)网站信息管理(新闻添加、修改删除、公告设置),以及常规设置(广告添加,友情链接)等功能达到对网站的管理。
前台操作是用户登录到本网站,可以进行用户注册,通过网站的精品推荐或商品搜索功能,找到自己想要买的商品,装入购物车,提交定单进行购买。
网上购物平台的特点是客户和电子商品信息量很大,管理员需要整理的信息很多,为让管理员轻松、方便、快捷的管理,该平台采用符合购买电子商品基本的原则,满足广大客户的日益增长的数量,并达到操作过程中的直观、方便、实用、安全等要求。
三、模块设计
根据需求分析以及功能需求,我们得出我们的购物网站的总体框架以及程序的实际运用流程.
3.1基于MVC的应用开发模型
在传统的基于Web的应用系统中,例如ASP,CGI等,通常开发者将业务逻辑,数据逻辑、展示逻辑等混杂在一起,在同一个界面面里既进行后台数据库的访问和操作,同时还包含业务流程和页面表示。
这样编写出来的程序,既不利于程序员对业务代码的调试,同时也不利于编辑人员进行交互页面的设计。
同时系统也不具备可扩展性,当我们要在现有业务上进行扩展的时候,通常无法借助于现有的资源和应用,而只能够重新编写,大大增加了投资,延长了系统上线的时间,失去了竞争市场的优势。
在本网上购物系统中,将采用通行的MVC模式来构建应用。
这种结构解决了前面所述的所有问题,在我们的应用集成网络中,通过企业级高端J2EE应用服务器实现MVC开发模型。
图3-3MVC业务流程示意图
通过这种方案,我们可以迅速地实现整个业务,其优势和特点如下:
Model(模型)层:
由EJB组件来实现,EJB将具体的业务封装在组件内部,具备安全、高性能、可重用等优秀的特征。
View(视图)层:
由JSP、HTML组成。
这一层次的特点是能够真实地展示和客户交互的界面,具备可描绘的功能。
同时能够嵌套动态数据,可以进行动态页面的展示。
同时可以方便地进行客户端的个性化定制。
根据每个客户的需求来展示不同风格的界面。
Controller(控制器)层:
是非常重要的一层,这一层是连接View和Model的纽带,同时也是将这两层进行最大限度分离的工具。
通常由Servlet来实现,Servlet和JSP虽然同样都属于页面展示工具,但分属两层。
主要在于JSP以脚本语言的形式存在,它的主要优势是进行动态数据的Web展示,而Servlet是一个完整的Java程序,进行业务的调用和流程的处理是它的长处。
3.2平台功能模块的设计分析
用户进入网上购物平台,用户可以注册,然后登录后可以进行修改资料,用户可以通过商品搜索,找到自己想要产品。
管理员可以通过后台登录进去进行会员管理,商品管理,新闻管理和广告链接管理。
在会员管理中,可以对会员就行添加删除,在商品管理中可以对商品进行添加修改,在广告链接里面可以对广告设置和友情链接进行管理。
四、程序模块设计
4.1系统流程分析
4.1.1前台购物流程如图4-2所示
图4-1前台购物流程图
用户再前台可以浏览商品,然后选择商品,然后订购商品,这时需要进行判断,如果是没有注册的用户,那么系统跳到注册页面,如果是注册了没有登录的用户,则跳转到登录页面,已经登录的用户则跳转到购物车页面,再去收银台结帐,提交订单。
4.1.2注册功能流程如图4-3所示
图4-3注册功能流程图
注册的具体实现为:
点击主页面的用户注册选项后,会弹出一个注册信息页面,用户需要如实填写用户名,密码,E_mail,地址,电话,真实,姓名等各项信息,提交后,系统进行检测判断该用户名是否已经注册过,如果已经存在则弹出新页面,提示用户该用户名已经注册过,如果没有则进行下一步判断,用户输入的两次密码是否一致,然后依次往后判断用户所填写的各项信息是否符合要求,直到所有信息均正确无误,系统将该用户注册信息写入会员表即member并提示用户注册成功,用户登陆后,就可以进行有效的购物了。
4.1.3商品搜索流程如图4-4所示
图4-4商品搜索流程图
商品的搜索功能使用户更加方便的进行自己所需要的商品的查询,节省时间,提高效率。
用户搜索时只要输入商品的关键字就能搜索到所有相关的商品。
并且能列出通过搜索得到的商品的详细信息。
4.1.4用户登录流程
如图4-5所示
图4-5用户登陆流程图
用户登录,首先要有一个提供用户登录的表单。
用户登录的表单应该嵌入整体的结构当中。
在实际的应用中,可以这样设计,如果用户没有登录,则在页面中显示用户登录的选项,用户登录后,则可隐藏用户登录的选项而代之以用户的基本信息。
首先,用户要有一个用户名和密码。
商务网站需要很高的稳定性和安全性,因此对用户名不允许使用恶意的代码作为用户名。
同时对密码也要求保密,将密码加密后再存入数据库。
另外,一个电子商务网站。
用户的真实姓名是必不可少的。
除此之外还需要用户的性别、E-MAIL、电话号码等。
4.1.5商品管理流程
如图4-6所示
图4-6商品管理流程图
在该功能里管理员可以进行不需要的商品的删除,在这里管理员当然也可以浏览到商品的详细信息。
并且比普通用户在浏览商品界面里所看到的商品信息多一个该商品在数据库中的ID。
4.1.6购物车流程
如图4-7所示
购物车具体的实现可采用这种形式:
定义一个购物车的类(Class)。
1.列出商品的列表,使用户能够自由选择所需要的商品。
2.当用户在点击“添加到购物车”的链接时,执行如下功能:
检查用户购物车类是否存在。
如不存在,则建立,并注册这Session变量;在有用户购物车类存在的情况下,检查该类中是否有该商品。
如存在,则商品数量相应加1;如没有该商品,则将该商品添加到该类中。
图4-7购物车流程图
五、详细设计与代码实现
5.1注册设计
如果用户还不是会员则提示用户进行注册,用户提交信息之后,系统开始判断用户的注册信息是否有效,首先是用户名是否为空,(该处存在用户名命名规则的问题,后面问题中会详细解决)用户输入的两次密码是否一致,然后依次往后判断用户所填写的各项信息是否符合要求,直到所有信息均正确无误,系统将该用户注册信息写入会员表即member并提示用户注册成功,用户登陆后,就可以进行有效的购物了。
注册页面的效果图如下图5-3所示:
图5-3注册页面示意图
系统对用户的注册信息的验证实现如下:
用户输入的各项信息分别对应字段
先判断用户名是否为空request.getParameter("user_name").equals("")
同样道理对密码进行判断
判断两次输入是否一致user_pass.equals(user_pass2)
其他选项与上面类似,如果条件符合则将该值赋给各个字段
用户名重复的验证代码为:
sql="select*frommemberwhereuser_name='"+user_name+"'";
当所有条件都符合的时候,系统将数据写入数据表,并返回成功页面,显示用户所填的注册信息,写入关键语句为:
sql="Insertintomember(user_name,user_pass,user_adds,user_mail,user_tel,user_regip,user_namec)values('"+user_name+"','"+user_pass+"','"+user_adds+"','"+user_mail+"','"+user_tel+"','"+request.getRemoteHost()+"','"+getStr(request.getParameter("user_namec")))";
5.2登录设计
用户登陆模块是防止非法用户登陆的第一道防线,通过它可以保护后台数据库的安全性,当用户要进行定购时,首先要进入的就是身份验证界面,只有在密码正确的情况下才能进行以后的购物,如果输入的密码不正确,则不能进行定购。
如果用户以浏览者的身份进入网站,则只能进行一般的商品浏览和搜索,而不能进行选购,在点击添加购物车后,系统会判断该用户是否是登陆用户,如果不是则弹出提示页面,提示用户必须先登陆才能定购商品。
登陆的具体实现要通过一个全程变量,即Session变量来实现,在系统中则由一个单独的session.jsp页面来放置该session。
用户登录的界面dengluyufou.jsp,从member表查得用户提交的帐户名和密码正确后,用一个全局变量,即Session变量保存这一消息(该变量名称为Session(“user_name”))。
示意图如图5-4所示
图5-4登录示意图
具体的判断过程为:
若session中user为空即session.getAttribute("user_name")==null,表明没有经过登陆与否的验证,则立即跳转到dengluyufou.jsp,请用户登录;并将用户登陆的帐号和密码通过
关键代码为:
Stringsql="select*frommemberwhereuser_name='"+user_name+"'";
如果user_name存在的话则判断其密码是否正确如果为真则将用户信息赋给sessionsession.setAttribute("user_name",""+rs.getString("user_name")+"");
以方便系统对用户在操作一些会员功能时进行用户身份验证。
登录后,可以马上看到自己的资料,如图5-5所示:
图5-5用户信息示意图
用户在登录之后也可以对自己的资料进行修改,在点击主页面的修改资料之后,弹出这样的一个页面,用户可以直接在文本框里修改,然后确认。
如图5-6所示
图5-6用户资料修改示意图
修改这一过程的具体实现过程为
sql="select*frommemberwhereuser_name='"+user_name+"'";
根据用户名将该用户的所有信息列出来,以供用户修改,
修改的方法采用的是rs.updateString("user_pass",user_pass);其他的类似。
5.3购物车设计
5.3.1购物车模块的实现
当用户登陆成功以后,找到了定购的物品,在点击物品下方的定购以后,系统会弹出一个新的页面,显示该物品已经添加进购物车,然后用户需要选择定购的数量。
页面效果如图5-7所示:
图5-7购物车示意图
在点击确认以后,该物品信息被后台添加到购物车表即basket表中,如果用户需要继续购物,可以继续选择,不断添加,系统会自动将所有信息写入basket表,同时显示用户所购买的物品列表,及合计价格。
其具体代码实现过程为:
从session中取得该用户的信息
user_name=(String)session.getValue("user_name");
对商品的信息进行提取以写入购物车表
具体的写入语句为:
sql="insertintobasket(hw_id,user_name,basket_count,hw_name,hw_cash)";
sql=sql+"values('"+hw_ids+"','"+user_name+"','"+counts+"','"+hw_name+"','"+hw_cashs+"')";
以下是用户执行确认后的示意图,如图5-8所示
图5-8所购商品信息示意图
如果用户在去收银台结帐前对已经选购的物品不满意时,可选择清空购物车,同时系统也将basket表中相关信息删除。
用户完成选购之后,可点击收银台付款,系统返回最终选购物品列表和合计价格,如图5-9所示:
图5-9收银台结帐示意图
该步骤实现的关键语句为:
Stringsql="select*frombasketwhereuser_name='"+user_name+"'andbasket_check=false";
系统只统计basket_check为否的该用户选购的商品信息。
用户再一次确认后,系统会显示购物成功并返回给用户一个定购单号,提示用户填写收货人详细信息,包括姓名、地址、邮编、邮箱、电话、付款方式、备注等信息,这些信息是系统自动从用户表中提取出来的,用户可以修改。
这一步的具体实现与用户资料修改类似,都是先将该用户的相关资料从数据库中调出来sql6="select*frommemberwhereuser_name='"+(String)session.getValue("user_name")+"'";然后使用方法update对表中各项信息进行修改。
确认后,系统弹出提交成功页面,如图5-11所示:
图5-11订货成功示意图
该页面也就是将用户提交的订单信息返回,并产生了一个唯一订单号,以方便用户查询,这个订单号的产生,并不是随机产生的,而是使用了一定的规则,在这里主要是根据用户名和订单产生的时间来生成订单号,具体的代码如下:
Stringsub_number="";
Stringnow=(String)((newjava.util.Date()).toLocaleString());
sub_number=user_name+now;
相类似的,系统中的其他类似字段也可以使用这样规则来产生随机编号,以方便管理
5.3.2商品信息
商品信息主要是为了让顾客对所需要的信息就行了解。
其中商品显示的关键代码如下:
sql="select*fromhwwherehw_id="+hw_id;
然后用<%=pifa%>的方法读出数据库内容。
5.3.3后台管理模块的实现
网上购物系统除了能够让用户实现前台的浏览和购物等操作之外,还必须能够使管理人员能够对系统的各种信息进行维护,比如商品的增加、删除、修改,会员的审查,网站新闻的更新等等。
管理功能是网上购物系统相当重要的一部分功能。
管理员可以通过主页面的“后台管理”进入系统后台进行维护,点击之后,首要的就是进行身份验证,输入正确的帐号,密码之后,方能进入。
由于涉及到交易,出于安全性考虑,管理员帐号应尽量少分配,密码也要尽量复杂,经常更换。
这个过程中,点击登录后,将用户名和密码框中的值传递到2login.jsp中进行验证,如果用户名和密码同数据库中的一致,那么登录成功,转到manage.jsp页面中。
具体实现关键代码如下:
Stringsql="select*fromadminwhereadmin_name='"+admin_name+"'andadmin_pass='"+admin_pass+"'";
进入之后系统管理的主页面采用了框架结构,左边是一个树型菜单,右边显示具体信息。
如图5-15所示:
图5-15后台登录首页界面
5.3.4商品管理
管理的主要功能有商品信息的更新,会员信息维护,网站信息维护,广告链接设置等四大块,商品信息管理,主要就是添加新的商品,删除和修改已经添加的商品。
添加商品的界面如图5-16所示:
图5-16商品添加界面
这一部分的实现也没有新的方法,使用的依然是一些sql语句来对相关数据进行添加和修改,添加的关键的sql语句用insertinto插入就可以。
这里不在贴出
修改则使用update语句。
删除商品主要用到的关键语句为sql语句:
sql="delete*fromhwwherehw_id="+Cint(request.getParameter("hw_id"));
其中需要用到记录集分页功能,由于代码过长,故只说出主要思想:
intPageSize=20;//设置每张网页显示两条记录
intShowPage=1;//设置欲显示的页数
intRowCount=0;//ResultSet的记录数目
intPageCount=0;//ResultSet分页后的总页数
intduoyu=0;
sql="select*fromhworderbyhw_idDESC";
rs=mdb.executeQuery(sql);
然后for循环hw表,对数目进行判断。
点击修改,可看到以下界面,如图5-18所示:
图5-18商品修改界面
实现方法和添加的sql语句差不多,修改用update语句实现就可以了。
5.3.5会员管理
会员信息管理,则主要是添加会员和对一些恶意注册用户进行删除。
添加会员主要分两种,一种是付费的享受最低价格的VIP用户,另一种是网站注册的普通用户。
界面如图5-19所示:
图5-19用户添加界面
添加用户和添加商品的语句都是用insert插入,主要sql语句是:
sql="insertintomember(user_name,user_pass,user_type)values('"+user_name+"','"+user_pass+"','"+user_type+"')";
mdb.executeInsert(sql);
以下是用户删除界面如图5-20所示:
图5-20会员信息管理界面
删除则用delete语句:
sql="select*frommemberwhereuser_id="+user_id+"";
网站信息管理,进行网上新闻的发布,修改删除,以及系统公告等信息的设置,这些功能虽然无关紧要,但在实际中却能方便用户,提高网站效益。
下面用到分页技术,intPageSize=20;//设置每张网页显示两条记录
intShowPage=1;//设置欲显示的页数
intRowCount=0;//ResultSet的记录数目
intPageCount=0;//ResultSet分页后的总页数
intduoyu=0;
sql="select*fromnewsorderbynews_idDESC";
rs=mdb.executeQuery(sql);
然后for循环news表,对数目进行判断。
友情链
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 网站 建设