企业网站的设计与实现 毕业设计说明书.doc

信息工程学院毕业设计说明书 企业网站的设计与实现余姚市乔士制罐有限公司二零零九 年 十二 月目录摘要1第一章 设计任务分析41.1 概述41.2 开发工具介绍51.2.1 Adobe Dreamweaver CS4介绍51.2.2 Mricosoft Access 2003介绍61.2.3 ASP介绍6第二章 方案初选82.1 网站布局介绍82.2 网站流程介绍8第三章 方案的详细设计103.1 开发配置103.1.1 IIS的安装与配置103.1.2 主目录与父路径103.1.3 设置主页文档103.1.4 启动与停止IIS服务113.2 首页设计样式113.3 文章发布113.4 在线订购14第四章 设计总结评价18参考文献23摘要：系统分为三大模块：文章发布、在线订购和用户添加。其中文章发布模块是进行文章的添加、存储和删除，是系统运行的基础；在线订购是实现用户无须注册即可订购产品。用户添加模块是为了满足多用户管理而开发的，后台可添加多个用户进行网站管理。系统选用的开发软件是ASP,后台数据库为ACCESS2003。关键词：企业网站；在线订购；多用户管理第一章 设计任务分析1.1 概述信息时代的到来使我们淹没在无边际的信息海洋中，一方面我们确实脱离了信息贫乏的苦恼，另一方面却为找到对自己有用的信息而大伤脑筋。同时，信息的种类也在不断地扩展，越来越多的非结构化信息不断出现，如企业的各种报表、账单、电子文档、网站的各种元素、图片、传真、扫描影像，以及大量的多媒体的音频、视频信息等等。一方面是低下的内容处理效率，另一方面是不断膨胀的内容量。这简单的事实对比已经隐含了企业的一个迫切需求，我们需要有效地管理我们的内容。内容管理系统(Content Management System)由此产生。目前市场上的内容管理产品主要有三种：第一类是定位于政府、企业、事业单位的内容管理的产品。这些产品致力于解决企业内部的非结构化信息平台的建设，完成企业对内容管理提出的各种需求，并基于企业内容管理不断提供各种内容管理的垂直应用。第二类是关注于网站内容管理系统(Web Content Management)的产品。网站内容管理指专门面向网站内容的编辑与发布的应用系统。在企业或组织中，用户可能会需要对网站进行管理。例如：用户需要将一些内部的文档和资料发布出去，这时用户可以去选择一些网站发布工具。第三类则是一些特定的内容管理应用，如图片应用；或者是单独功能的产品，如全文搜索引擎等。信息产业目前已成为第一大规模的产业，并位居全球第三位。这就意味着我国的企业信息化也迎来了前所未有的好时机。第四代智能网站的推出也为中小企业建站提供了思路，可以从企业实用角度出发，对网站进行“总体规划，分步实施”，既可以节省成本，又不影响企业的应用。网站主要关键问题或难点问题：网站需要创建一个的文章发布功能和不需要注册就可以在线订购的系统。两者功能的实现需要和后台的数据库进行连接，并对数据进行核对、判断、储存和更新。应用服务提供商，英文是Application Services Provider，简称ASP。主要提供对不同用户的应用服务。目前行业的细分引起市场的细分，随着这种细分化，中小企业不希望也不可能花费较大的成本购买高价的软件产品和构建信息平台，因此随之而诞生了一类信息提供商，他们配置高性能的服务器、购买应用软件并由专人负责维护，为这些中小企业提供远程应用程序的租赁和信息共享服务，中小企业只需花费极低的租赁使用费即可远程使用高性能的软硬件。对于应用服务提供商来说，如何为用户提供便捷、高效的应用服务，成为应用服务提供商之间竞争的筹码。1.2 开发工具介绍本网站介绍了几个重要的模块的设计方法，使用Adobe Dreamweaver CS4和ASP作为开发工具，数据库则使用Mricosoft Access 2003，前者利用与其他脚本语言组合使用提供各种面向对象的开发工具，能较好的完成网页的设计、布局及ASP程序。后者则利用Access的方便性、快捷性。1.2.1 Adobe Dreamweaver CS4介绍Dreamweaver是美国ADOBE公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash、hockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP、Apache、BroadVision、Cold Fusion、iCAT、Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。1.2.2 Mricosoft Access 2003介绍Microsoft Access（Microsoft Office Access）是由微软发布的关联式数据库管理系统。它结合了Microsoft Jet Database Engine和图形用户界面两项特点，是Microsoft Office的成员之一。Assess能够存取 Access/Jet、Microsoft SQL Server、Oracle，或者任何 ODBC 兼容数据库内的资料。熟练的软件设计师和资料分析师利用它来开发应用软件，而一些不熟练的程序员和非程序员的“进阶用户”则能使用它来开发简单的应用软件。虽然它支援部份面向对象（OO）技术，但是未能成为一种完整的面向对象开发工具。其实Access 也是微软公司另一个通讯程序的名字，想与 ProComm 以及其他类似程序来竞争。可是事后微软证实这是个失败计划，并且将它中止。数年后他们把名字重新命名于数据库软件。1.2.3 ASP介绍ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。与HTML相比，ASP网页具有以下特点：（1）利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术；（2）ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试；（3）服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页；（4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息；（5）ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、发送Email或访问文件系统等；（6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取； (7) 方便连接ACCESS与SQL数据库； (8)开发需要有丰富的经验,否则会留出漏洞,让黑客利用进行注入攻击。ASP(Application Service Provider,应用软体租赁服务提供者)即是指通过网络以租赁方式提供应用软体服务的业者,即是指业者以应用软体为主体,透过网路一对多地传递服务,这种以服务为主的交易模式促使企业可藉由租赁的方式,以更符合成本效益的方式拥有软体的使用权,并且亦能因为业者集中式的管理而大幅降低企业维护的成本。ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。但是其原理也是一样的。第二章 方案初选2.1 网站布局介绍网站整体内容分六大部分：网站首页、公司介绍、新闻动态、产品介绍、在线订购和联系我们，如图2-1所示。首 页公司介绍新闻动态产品介绍在线订购联系我们图2-1 网站整体结构2.2 网站流程介绍对于网站文章发布的功能基本思路是：进入管理员登陆页面输入用户名和密码通过ASP和后台数据库进行连接，判断是否正确正确登陆后可以发布文章，确定提交再次通过ASP保存数据更新页面，如图2-2所示：NY判断文章发布页面Asp保存数据库提示保存成功提示密码错误输入用户名和密码图2-2 管理员登陆文件上传流程第二个功能不需要注册就可以在线订购的基本思路是：用户在网站的可编辑区域填写相关信息，点击“确定” 通过Javascript语言进行后台数据库连接并保存。更新至网站后台“订单管理”，如图2-3所示：填写相关内容Javascript保存填写信息更新至后台页面图2-3 在线订购数据流程第三章 方案的详细设计3.1 开发配置3.1.1 IIS的安装与配置(a) 安装IIS若操作系统中还未安装IIS服务器，可打开“控制面板”，然后单击启动 “添加/删除程序”，在弹出的对话框中选择“添加/删除Windows组件”，在Windows组件向导对话框中选中“Internet信息服务（IIS）”，然后单击“下一步”，按向导指示，完成对IIS的安装。(b) 启动Internet信息服务（IIS）Internet信息服务简称为IIS，单击Windows开始菜单-所有程序-管理工具-Internet信息服务（IIS）管理器，即可启动“Internet信息服务”管理工具。(c) 配置IISIIS安装后，系统自动创建了一个默认的Web站点，该站点的主目录默认为C:Inetpubwww.root。用鼠标右键单击“默认Web站点”，在弹出的快捷菜单中选择“属性”，此时就可以打开站点属性设置对话框，在该对话框中，可完成对站点的全部配置。3.1.2 主目录与启用父路径单击“主目录”标签，切换到主目录设置页面，该页面可实现对主目录的更改或设置。注意检查启用父路径选项是否勾选，如未勾选将对以后的程序运行有部分影响。主目录配置选项。3.1.3 设置主页文档单击“文档”标签，可切换到对主页文档的设置页面，主页文档是在浏览器中键入网站域名，而未制定所要访问的网页文件时，系统默认访问的页面文件。常见的主页文件名有index.htm、index.html、index.ASP、index.php、index.jsp、default.htm、default.html、default.ASP等。IIS默认的主页文档只有default.htm和default.ASP。根据需要：利用“添加”和“删除”按钮，可为站点设置所能解析的主页文档。3.1.4 启动与停止IIS服务在Internet信息服务的工具栏中提供有启动与停止服务的功能。单击可启动IIS服务器；单击则停止IIS服务器。3.2 首页设计样网站整体色调以灰白色为主。头部FLASH为企业宣传语，中间为主体内容，顶部为页面版权及相关联系方式，每个页面都是在此处更新，如图3-1所示：图3-1 网站首页结构和色彩3.3 文章发布文章发布中的管理员登陆和核对用户名和密码，是通过网页中输入的用户名和密码和在Access中的管理员用户名和密码进行核对，在进行判断。如果不一致着显示“用户或密码错误，请重新输入！”，如果一致则页面连接到后台主页进行文章发布。完成后在首页和新闻动态的页面中更新显示。并把文章数据存放在Access的数据库中，如图3-2所示：图3-2 管理员登陆界面存放管理员用户名和密码的是User表，其中有userid、username、pass、sex、age、qx、email、logtime和date九个字段，如表3-3所示：表3-3 User表字段名数据类型备注userid自动编号username文本用户名pass文本密码sex文本性别age数字年龄qx数字权限email备注邮件logtime日期/时间登录时间date日期/时间注册时间存放文章的是news表，其中有newsid、title、content、author、source、click、date、bclass、chk、sh和download十一个字段。如表3-4所示：表3-4 news表字段名数据类型备注newsid自动编号title文本标题content备注内容author文本发表人source文本来源click数字点击数date日期/时间发表时间bclass文本栏目IDchk是/否头条sh数字审核download备注上传文件地址在文章发布模块中增加了对文章的编辑功能，运用Javascript语言对文章进行高级的编辑功能，其实编辑器的相关代码为:<script language="JavaScript">var htmlchk=falsefunction mysub() if(htmlchk) alert('在显示源代码状态不能添加') return(false); document.form1.content.value=idc.document.body.innerHTML;function document.onreadystatechange() idc.document.designMode="On"function SetMode(chk) if(chk) htmlchk=true idc.document.body.innerText=idc.document.body.innerHTML; else htmlchk=false idc.document.body.innerHTML=idc.document.body.innerText; function bold () idc.document.execCommand ("bold") ;function italic () idc.document.execCommand ("italic") ;function JustifyLeft () idc.document.execCommand ("JustifyLeft") ;function JustifyCenter () idc.document.execCommand ("JustifyCenter") ;function JustifyRight () idc.document.execCommand ("JustifyRight") ;function cut () idc.document.execCommand ("cut") ;function copy () idc.document.execCommand ("copy") ;function paste () idc.document.execCommand ("paste") ;function url () idc.document.execCommand ("CreateLink") ;function unurl () idc.document.execCommand ("unLink") ;function redo () idc.document.execCommand ("redo") ;function undo () idc.document.execCommand ("undo") ;function fontname (value) idc.document.execCommand ("fontname","false",value) ;function fontsize (value) idc.document.execCommand ("fontsize","false",value) ;</script><script type="text/JavaScript"><!-function MM_openBrWindow(theURL,winName,features) /v2.0 window.open(theURL,winName,features);/-></script><img src="./images/bold.gif" width="18" height="18" onClick="bold()"/><img src="./images/italic.gif" width="18" height="18" onClick="italic()"/><img src="./images/leftAlign.gif" width="16" height="16" onClick="JustifyLeft()"/><img src="./images/centerAlign.gif" width="16" height="16" onClick="JustifyCenter()"/><img src="./images/rightAlign.gif" width="16" height="16" onClick="JustifyRight()"/><img src="./images/cut.gif" width="18" height="16" onClick="cut()"/><img src="./images/copy.gif" width="18" height="16" onClick="copy()"/><img src="./images/paste.gif" width="18" height="16" onClick="paste()"/><img src="./images/Hyperlink.png" width="18" height="18" onClick="url()"/><img src="./images/Cfbreak.gif" width="18" height="18" onClick="unurl()"/><img src="./images/undo.gif" width="18" height="16" onClick="undo()"/><img src="./images/redo.gif" width="18" height="16" onClick="redo()"/>3.4 在线订购在线订购是在在线订购页面中的可编辑区域输入相关信息，点击确定后。Javascript语句对输入的内容进行类型验证，更新后显示在后台订单管理页面。如图3-5所示：图3-5 在线订购界面在Access数据库中对此功能建立了一张online表，其中有onid、lxr、sex、cz、g、email、szdq、hylb、dh、sj、qymc、lxdz、gswz、xmjs、cpsm、qd和date十七个字段。如表3-6所示：表3-6 online表字段名数据类型备注onid自动编号lxr备注联系人sex备注称呼cz备注传真g备注交易类别email备注E-mailszdq备注所在地区hylb备注行业类别dh数字电话sj数字手机qymc备注企业名称lxdz备注联系地址gswz备注公司网站xmjs备注项目介绍cpsm备注产品说明qd备注得知本公司渠道date日期/时间订单时间在线订购处理过程代码如下:<%LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!-#include file="Connections/conn.ASP" -><%lxr=trim(request("lxr")sex=trim(request("sex")cz=trim(request("cz")g=trim(request("g")email=trim(request("email")szdq=trim(request("szdq")hylb=trim(request("hylb")dh=trim(request("dh")sj=trim(request("sj")qymc=trim(request("qymc")lxdz=trim(request("lxdz")gswz=trim(request("gswz")xmjs=trim(request("xmjs")cpsm=trim(request("cpsm")qd=trim(request("qd")act=trim(request("act")if lxr="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if sex="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if cz="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if g="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if szdq="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if hylb="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if dh="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if sj="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if qymc="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if lxdz="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if xmjs="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if if cpsm="" then response.write"<script>alert('不能为空!');history.back();</script>" response.endend if set rs=server.CreateObject("adodb.recordset") sql="select * from online" rs.open sql,conn,1,3 rs.addnew rs("lxr")=lxr rs("sex")=sex rs("cz")=cz rs("g")=g rs("email")=email rs("szdq")=szdq rs("hylb")=hylb rs("dh")=dh rs("sj")=sj rs("qymc")=qymc rs("lxdz")=lxdz rs("gswz")=gswz rs("xmjs")=xmjs rs("cpsm")=cpsm rs("qd")=qd rs.update rs.close set rs=nothing response.redirect"tjcg.ASP" %>第四章 设计总结评价通过Adobe Dreamweaver CS4软件制作了班级网站的前台页面，利用Adobe Flash CS4 Professional软件制作了FLASH动画和网站的导航条，利用Adobe Photoshop CS4软件对图片进行了处理和美化。编写的Javascript、ASP脚本语言脚本对文章发布和在线订购功能进行了实现。1. 数据库的设计与连接前期数据库设计很重要的，如果设计不好，在开发过程中更改的话，以前做过的页面的程序也得重写，很费时间；万一有时再忘掉一些页面的SQL的修改，测试也比较费时间。所以最好刚开始能把数据库设计好，各项功能最好都能想到。2. 页面间/内传值作网页用的最多的是传值，包括同一页面和页面间传值两种。 页面内传值一般用地址栏传值法，如 index.ASP?id=4 ,接受的时候用Request.QueryString("id")来接受。 页面间传值可以用地址栏传，如上面的方法，只是链接到另一个页面而已；还可以用表单传值，有get和post两种方法，get方法是用地址栏来传的，可以被看到，一般传些长度不大、安全要求不高的值，接受页面也是用Request.QueryString()方法来接受；而post方法在地址栏看不出来，安全系数比较高，可以传值的长度比较大，如提交文章、文件等，用post方法都能实现，接受页面用Request.Form()方法来接受。 还有下拉菜单的值的问题，一般等于选择的那个option的value值。如果只有选项而没有value，值就应该等于选项的值。3. 数据库操作；一个网站如果没有数据库支持，即静态页面，更新会很麻烦的，一般动态动态网站有微软的ASP和ASP.net,Dhtml,jsp,php,还有比较老的cgi(现在很少用了).说一个比较简单的问题：网页中动态与静态的区别，静态一般用的是html，即只有超文本标记语言，一般没有交互功能；动态则用服务器脚本语言，如前面提到的几种，它们通过编程来实现，一般从数据库里提取数据来填充页面，如我们常见的留言本、论坛等。 下面说一下数据库常用的操作： (a) 查询一条记录；select * from DataTableName where id = "Request.QueryString("id") 跨表查询：sql = "select m.id,m.mod_name, c.class_name from I_TrainMod m, I_TrainClass c where status<>'D' and m.class_id=c.id and m.class_id=" &Request.QueryString("class_id")& " order by class_id" 这条语句是从三个表中查询的， (b) 记录集查询填充；dim sql,rs,conn,connstr connstr = "数据库连接语句" sql = "查询语句" set conn = Server.CreateObject("ADODB.Connection") set rs = Server.CreateObject("ADODB.Recordset") conn.open connstr '打开数据库连接 rs.open sql,conn,1,1 现在就可以从记录集中提取数据了，如rs("id"),rs("name")等 注意，数据库打开后一定要关闭，及时释放宝贵的资源： rs.close set rs=nothing conn.close set conn=nothing (c) 删除数据记录（删除行）；delete from TableName where id = id 中间没有号的。我当时就犯了这个错误，调试了半天才找到问题。 (d) 更新数据记录；update TableName set name="name" and content="content" where id="id" (e) 新插入记录；insert into TableName(name, content,等键值) values("对应的值") 注意SQL语句别些错了，比如表名，各列名，错了有时候提示不合法的SQL查询。 4. 数据库变量类型；Int,整形，如果取为id的话，设置标识，即Access里的自动增加，加入记录的时候不能手动添加id号。 varchar，可变长字符类型，通常是添加的长度没有定义的长度长的时候，不加空格。而char类型的自动补齐到定义的长度。一般varchar比较常用。 text,存储量比较大，一般用于存储整篇文章 。smalldatatime,短日期类型，最大到公元2999年，足够用了，比datatime占用的空间小。 制作过程中的常见错误例：1sql="select * from biao1"rs.open sql,conn,1,3if rs.eof thendim namename=rs("name")end ifsql="select * from biao2"rs.open sql,conn,1,3解决的办法有两个一个是：（1）在第二次rs.open之前先关闭 rs.close或；（2）set rs1=server.createobjectrs1.open sql,conn,1,12用SQL关键字做表名或字段名；-sql="select * from user"rs.open sql,conn,1,1-user为sql关键字解决:改为sql="select * from user"3用锁定方式去进行update；-sql="select * from user"rs.open sql,conn,1,1rs.addnew或rs("userName")="aa"rs.update-当前记录集的打开方式为只读解决:改为rs.open sql,conn,1,3