网页设计及制作实训报告.docx

1、网页设计及制作实训报告天津冶金职业技术学院网页设计与制作实训报告冶金饰品店网上购物系统设计与实现专 业：电子商务专业班 级：电商2班组 员：尹aq 张qy张 tw 李 xg郭 tj 实训成绩： 课程成绩： 2012年6月13号目 录一、系统模块划分 5二、系统业务流程图 6三、数据表结构 8四、网页所使用的技术 13五、系统详细设计 21六、小结 38七、参考文献 40小组分工尹aq：数据表结构系统模块划分张qy：系统业务流程图参考文献张xg： 网页所使用的技术李tw： 系统详细设计郭tj; 网页技术小结引言随着网络技术的普及以及快速的发展，网页成为媒体传播的一个重要途径，我们足不出户就可以了

2、解天下事，做我们以前不能在家做的事。企业在电子商务的潮流中对电商网页的要求也越来越高，客户在通过网页浏览、查询想要知道了解企业的信息，通过这样一个途径使企业与客户间沟通越来越便利因为时间以及个人能力等多方面的原因，本系统有许多不完善的地方，在以后的学习中会不断的改进，希望老师能给点意见。一、系统模块划分系统设计的总体规则企业平台主要是对后台管理和前台操作。后台管理是管理员对本网站的维护，通过企业资料（企业文化、企业介绍、企业概述）、企业新闻中心（会员注册、优秀员工）等功能达到对网站的管理。前台操作是用户登录到本网站，可以进行用户注册。无论哪个网站都要有它自己的设计规则。该平台也一样，它的主要设

3、计规则有：简单性：在实现平台的功能的同时，尽量让平台操作简单易懂，这对于一个网站来说是非常重要的。针对性：该平台设计是企业系统及后台管理的定向开发设计，所以具有专业突出和很强的针对性。实用性：该平台能完成电子商品展示和管理员管理的基本信息，具有良好的实用性。企业系统总体模块二、系统业务流程图三、数据表结构客户信息表 字段名数据类型说明UserID自动编号客户编号，主键UserName文本客户名UserPassword文本客户登陆密码UserEmail文本邮箱Sex数字性别addDate日期/时间注册时间Logins数字登录次数Usercookies数字电脑是否保存用户信息Birthday日期/

4、时间生日Quesion文本安全问题Answer文本安全答案Address文本地址管理员数据表管理员信息表 字段名数据类型说明ID自动编号管理员编号，主键UserName文本用户名Password文本用户密码LastLogin日期/时间上次登录时间LastLoginIP数字上次登录IP附友情连接表 字段名数据类型说明Linkid自动编号连接编号，主键Linkname文本连接网站名Linkurl文本连接网址Linkidorder数字网址顺序新闻及公告的管理字段名称数据类型Id自动编号新闻IDTitle文本名称Content备注内容Indate日期/时间发表时间 State是/否状态 新闻 公告会员

5、数据表网站的基本信息设置Personal文本身份证号码Sex是/否男/女Indate 文本注册时间Webmail文本联系电邮Post文本邮编Phone文本电话Copyright文本版权Weblogo文本网站logoAddress文本联系地址网站设置数据表2 数据库逻辑结构设计数据库设计要遵循一些规则，一个好的数据库满足一些严格的约束和要求。尽量分离各实体对应的表，一个实体对应一个表，搞清楚该实体有哪些属性，对应有些什么字段，以及各实体之间有何种联系。实体、属性与联系是进行概念设计时要考虑。数据库关系图四、网页所使用的技术1. 程序开发的技术基础1） HTML语言HTML（Hyper Text

6、Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。与常见的字处理文件不同,Web页以超文本标识语言编排格式。HTML文件是带有特定HTML插入标记的用以编排文档属性和格式的标准文本文件。它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有. html或. htm的文件扩展名。生成一个HTML文档主要有

7、以下三种途径：（1）手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。（2）通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。（3）由Web服务器（或称HTTP 服务器）一方实时动态地生成。一般的HTML页面具有如下的结构： html , 这是HTML正文部分 /body 可见在一个HTML网页文件中，一般必须有一对html标记作为文件的开头和结尾，在标记后是头部标记,其后是实体标记。2） JAVASCRIPT语言JAVASCRIPT脚本语言脚本是应用程序在网页上表达的语言,可以将脚本嵌入Web页中。通常脚本在服务器上运行,但也可以采用客

8、户端和服务器端结合使用JAVASCRIPT脚本语言。2. ASP技术1） ASP概述ASP（Active Sever Pages动态网页）是微软公司推出的一种用以取代CGI(Common Gateway Interface)技术。目前，Internet上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI。ASP是一个位于服务器端的脚本运行环境。通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互 式动态网页，包括使用HTML 表单收集和处理信息、上传与下载等。 通常情况下，用户通过浏览器看到的网页大多是静态的，目前Internet上的许多站点，仍然提供“静

9、态”（static）的主页内容。所谓“静态”，是指站点的主页内容是“固定不变”的。一个“静态”的站点，若要更新主页的内容，必须手动更新其 HTML的文件数据。而随着Web技术的发展，用户希望能够看到根据要求而动态生成的主页，例如响应用户查询数据库的要求而生成报表等。站点服务器收到要求执行的应用程序，分析表单（form）的输入数据，将执行的结果以HTML的格式传送给浏览器。根据用户请求生成动态主页的传统方法有CGI、ISAPI等。CGI是根据浏览器端的http请求激活响应进程，每一个请求对应一个进程。当同时有很多请求时，程序挤占系统资源，造成效率低下。ISAPI针对这一缺点进行了改进，利用dll

10、（动态链接库技术），以线程代替进程，提高了性能和速度，但要考虑线程的同步问题，而且开发步骤烦琐。这两种技术和另一普遍使用的开发动态网页的技术 Java都还存在着另外一个问题，那就是开发困难，程序的开发和HTML写作是两个完全不同的过程，需要专门的程序员开发。ASP使用的ActiveX技术基于开放设计环境，用户可以自己定义和制作组件加入其中，使自己的动态网页几乎具有无限的扩充能力，这是传统的CGI等程序所远远不及的地方。2） ASP特点 ASP具有易用性、兼容性、安全性、可扩充性等特点：易用性：使用VBScript、JavaScript等简单易学的脚本语言，结合HTML代码，即可快速地完成网站的

11、应用程序。无须编译、容易编写，可在服务器端直接执行。使用普通的记事本既可以进行编辑设计。兼容性：ASP能与任何ActiveX语言相容，除了可使用 VBScript、JavaScript等语言设计外，通过plug-in的方式，还可以使用第三方所提供的其他脚本语言。安全性：ASP的源代码不会被传到客户浏览器，从而避免了缩写的源程序被他人剽窃，从而提高了程序的安全性。可扩充性：可以使用 Visual Basic、 Java、Visual C+和 COBOL等编程语言来编写所需的服务器控件。3） ASP工作原理ASP与常见的在Client端实现动态主页的技术如Java applet、 ActiveX

12、Control、VBScript、JavaScript等不同，ASP中的命令和 Script语句都是由服务器来解释执行的，执行结果产生动态生成的Web页面并送到浏览器；而Client端的Script命令则是由浏览器来解释执行。由于 ASP是在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP，也不必担心别人下载程序从而窃取编程逻辑。ASP程序通过后缀名为asp的ASP文件来实现其功能，一个asp文件相当于一个可执行文件，因此必须放在Web服务器上有可执行权限的目录下。当用户从浏览器输入了asp文件的地址后，浏览器就将这个URL请求发给Web服务器。如果Web服务器上装ASP，就调用ASP

13、，ASP读出相应asp文件，解释并执行命令，动态生成一个HTML页面回传Web服务器，然后Web服务器把结果发送给浏览器。ASP文件的制作和HTML类似，且可和HTML开发集成，可以在同一个过程完成，利用ASP将可以执行的脚本嵌入到HTML文件中，这使得HTML文件的编写与脚本的开发融合在一起。通过ASP内置的对象、服务器组件（Sever Component）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。ASP与网关及服务器扩展模式相比有以下优点：（1）完全与HTML文件融合在一起； （2）容易创建，不需要其它编译、链接程序；（3）面向对象的并通过Ac

14、tiveX Sever对象可扩展。在电子商务中，对用户而言，进行网上信息查询的目的是寻找自己需要的产品或服务，而对于服务提供者来说，其目的则是向用户推销自己的产品或服务。因此，让用户通过浏览器查询服务的后端数据是许多Web服务提供者必须提供的服务，ASP通过内置的ADODB组件来实现这一功能。可以使用ADO去编写紧凑简明的脚本，以便连接到ODBC兼容的数据库和OLE DB兼容的数据源。4） ASP的发布当编辑好ASP文件后，必需发布后才能实现其功能，ASP文件本身并不能运行。我们用Windows自带的工具IIS（windows2000 XP）来发布ASP文件。（Windows 98用PWS发布

15、）IIS的配置在本次设置中相当重要，IIS是我们测试网站的一个平台，在ASP开发中，少不了使用IIS，本设置使用的是WINDOW XP 中的 IIS 5.1 。操作如下： 1、点击“开始”“设置”“控制面版”“管理工具”“Internet 信息服务”，打开IIS配置控制面版。 2、点击进入“网站”“默认网站”，然后右键“属性”，弹出“默认网站 属性”对话框。 3、在“默认网站 属性”对话框中选择“主目录”，选择你存放网页的文件夹，其它值默认。 4、选择“文档”选项卡，添加自己网页默认的文件名，如“index.asp”。 通过上述操作，你的IIS基本上就配置好了，如过你要访问，你可以直接输入以下

16、IP：http:/127.0.0.1，您的网站就能在浏览器中显示信息或错误信息了。3. 数据库原理1） SOL语言简单介绍SQL是英文Structured Query Language的缩写，意思为结构化查询语言。 SQL语言的主要功能就是同各种数据库建立联系，进行沟通。按照ANSI（美国国家标准协会）的规定，SQL被作为关系型数据库管理系统的标准语言。SQL语句可以用来执行各种各样的操作，例如更新数据库中的数据，从数据库中提取数据等。 目前，绝大多数流行的关系型数据库管理系统，如Oracle、 Sybase、 Microsoft SQL Server、 Access等都采用SQL语言标准。虽

17、然很多数据库都对SQL语句进行了再开发和扩展，但是包括Select、Insert、Update、Delete、Create 以及Drop在内的标准的SQL命令仍然可以被用来完成几乎所有的数据库操作。在众多的SQL命令中，select语句应该算是使用最频繁的。select语句主要被用来对数据库进行查询并返回符合用户查询标准的结果数据。select语句中位于select关键词之后的列名用来决定哪些列将作为查询结果返回。用户可以按照自己的需要选择任意列，还可以使用通配符“*”来设定返回表格中的所有列。select语句中位于from关键词之后的表格名称用来决定将要进行查询操作的目标表格。除了上面所提到

18、的运算符外，LIKE运算符在where条件从句中也非常重要。LIKE运算符的功能非常强大，通过使用LIKE运算符可以设定只选择与用户规定格式相同的记录。2） ADO技术介绍ADO（ActiveX Data Objects）技术是微软公司推出的数据库连接技术，运用该技术可以对各种数据库（如SQL Server、Access、Oracle及Sybase等）的链接、查询、存取等操作。ADO对象给开发人员提供一种快捷、简单、高效的数据库访问方法，ADO可以包含在脚本中来产生对数据库的连接，并从数据库表中读取数据，形成实际要使用的对象集合。而且，对于数据资源，提供了应用程序一级的界面。不过，ADO并不与

19、数据资源直接通信，而是通过称为OLE DB的中间界面，对于数据资源（Microsoft SQL Server），OLE DB提供了系统一级的界面。ADO是一组优化的访问数据库的对象集，为Web数据库开发者提供完整的网站数据库解决方案。ADO可以与ASP紧密结合，运行在服务器端，从而制作出功能完善的数据库网页。ADO除了支持各种数据库平台外，它还支持VB、VC和Script等多种程序设计语言。在利用ADO技术进行数据库网页制作的第一步就是要建立服务器端的数据库，即后台数据库，一般可选择SQL Server或者Access作为后台数据库。本次的毕业设计是以Access作为后台数据库。3） Acce

20、ss数据库Access是一个数据库管理系统，它之所以被集成到Office中而不是Visual Studio中，是因为它与其它的数据库管理系统（如Visual FoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。而且最重要的一点是，Access的功能足够强大，足以应付一般的数据管理及处理需要。Access可以实现建立数据库、报表，以及对数据库、报表的修改、查询等功能。 VBScript 和JavaScript 等脚本语言融合在一起的技术。五、 系统详细设计界面设计与实现1.连接方式 本系统采用ADO连接方式，通过ADO把数据库与界面连接起来，把数据库的内显示于主界面，主界面的信

21、息保存与数据库中，实现数据间的传递与存储。本系统中把该方法单独放入到conn.asp中,因为驱动要重复使用，为了方便，一般我们就把它单独放在一页中，当使用时，可以用调用。 2.前台显示与会员管理1） 主界面设计与实现 前台主要分为信息显示（如商品信息、商品分类、商品资讯等）和会员管理（如会员注册、购物车、修改会员信息、会员订单等）。信息显示供会员查看与订购。每个前台界面都分为上、下、左、右四个版块。上为top.asp主要是设置网站的logo、网站导航条等，调用的方法也是；下为脚注，主要显示网站的版权、联系信息；左为辅助工具（如登陆框、排行榜、分类）；右为具体操作与显示的版块。主界面如图所示：2

22、） 登陆页面设计与实现 登陆界面提供给浏览者登陆、注册、找密码的入口。登陆界面前后如图所示：登陆前的登陆框 登陆后显示个人信息登陆成功后，系统将把用户的ID等信息通过cookies存起来。返回是就是通过cookies的值来判断会员是否登陆。只有退出或关闭界面时，cookies的值才回清空。如图(b)。会员登陆的主要实现如下代码（checklogin.asp）：%dim username,upassword,comeurl,Getcodeusername=replace(trim(request(username),)upassword=md5(replace(trim(request(upas

23、sword),)Getcode=replace(trim(request(Getcode),)if username= or upassword= then response.write alert(您的用户名或密码有误！);history.go(-1); response.endend ifif cstr(session(pSN)cstr(trim(request(Getcode) then response.Write alert(请输入正确的验证码！);history.go(-1); response.endend ifset rs=server.CreateObject(adodb.r

24、ecordset)rs.Open select * from user where username=&username& and password=&upassword& ,conn,1,3if not(rs.bof and rs.eof) then if upassword=rs(password) then response.cookies(user)(username) = trim(request(username) response.cookies(user)(vip)=rs(vip) rs(lastlogin)=now() rs(hits)=rs(hits)+1 rs(zhife

25、n) = rs(zhifen) + 1 rs(userlastip)=Request.ServerVariables(REMOTE_ADDR) rs.Update end ifend ifrs.Closeset rs=nothingif session(UserID) then conn.execute(delete from BuyGood where UserID = &session(UserID)& and GoodState = 9)end ifresponse.Redirect(index.asp)%6) 其它设计与实现 客户的信息只对客户开放，为了防止用户的非法进入，我们设计了s

26、ession.asp页面，目的就是验证用户是否合法，只有符合信息的才给予进入。代码如下：%if request.Cookies(user)(UserID) = then response.Cookies(shangcheng).Expires = NOW() -1 response.Write(alert(登陆超时或您还没登陆！);location.href=userlogin.asp;)end if% 为了防止网站注入非法代码，系统中还设置了防注入脚本，过滤掉非法的关键字符。其内容设计在，这样就可以加强网站的安全性。3 后台设计与实现1) 登陆界面设计 后台只能给管理员进入使用，所以要严格控

27、制访问的权限。进入后台要有登陆界面，登陆采用账号、密码、验证码、MD5四步验证。系统后台登陆登陆代码如下（admin/login.asp）：验证通过后，页面将转到后台管理的主界面。2) 后台管理主界面设计与实现主界面分为左右两版块，左边是菜单设置，右边是具体操作模块。其界面如图所示：系统后台主界面菜单分为管理员管理、公司简介、新闻中心管理、在线招聘等部分下3) 网站设置设置实现 网站设置如图所示：网站设置及其相关操作管理员管理设置包括网站设置、密码修改、是部分。网站设置为网站的基本设置，如名称、logo图、地址等网页信息。这些信息可以显示在页面的下方几头部；密码修改针对管理用户的密码修改，属于人员管理的一部分 企业介绍修改管理员界面：添加按钮代码实现（admin/password.asp）：%if request.querystring(act)=tj thenset rsa=server.createobject (adodb.recordset