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

信息工程学院毕业设计说明书 企业网站的设计与实现 余姚市乔士制罐有限公司 二零零九 年 十二 月 信息工程学院毕业设计说明书 1 目录 摘要 . 1 第一章 设计任务分析 . 4 1.1 概述 . 4 1.2 开发工具介绍 . 5 1.2.1 Adobe Dreamweaver CS4 介绍 . 5 1.2.2 Mricosoft Access 2003 介绍 . 6 1.2.3 ASP 介绍 . 6 第二章 方案初选 . 8 2.1 网站布局介绍 . 8 2.2 网站流程介绍 . 8 第三章 方案的详细设计 . 10 3.1 开发配置 . 10 3.1.1 IIS 的安装与配置 . 10 3.1.2 主目录与父路径 . 10 3.1.3 设置主页文档 . 10 3.1.4 启动与停止 IIS 服务 . 11 3.2 首页设计样式 . 11 3.3 文章发布 . 11 3.4 在线订购 . 14 第四章 设计总结评价 . 118 参考文献 . 23 信息工程学院毕业设计说明书 2 摘要： 系统分为三大模块：文章发布、在线订购和用户添加。其中文章发布模块是进行文章的添加、存储和删除，是系统运行的基础；在线订购是实现用户无须注册即可订购产品。用户添加模块是为了满足多用户管理而开发的，后台可添加多个用户进行网站管理。系统选用的开发软件是 ASP,后台数据库为 ACCESS2003。 关键词 ：企业网站；在线订购；多用户管理 信息工程学院毕业设计说明书 3 第一章 设计任务分析 1.1 概述 信息时代的到来使我们淹没在无边际的信息海洋中，一方面我们确实脱离了信息贫乏的苦恼，另一方面却为找到对自己有用的信息而大伤脑筋。同时，信息的种类也在不断地扩展，越来越多的非结构化信息不断出现，如企业的各种报表、账单、电子文档、网站的各种元素、图片、传真、扫描影像，以及大量的多媒体的音频、视频信息等等。一方面是低下的内容处理效率，另一方面是不断膨胀的内容量。这简单的事实对比已经隐含了企业 的一个迫切需求，我们需要有效地管理我们的内容。内容管理系统 (Content Management System)由此产生。目前市场上的内容管理产品主要有三种：第一类是定位于政府、企业、事业单位的内容管理的产品。这些产品致力于解决企业内部的非结构化信息平台的建设，完成企业对内容管理提出的各种需求，并基于企业内容管理不断提供各种内容管理的垂直应用。第二类是关注于网站内容管理系统 (Web Content Management)的产品。网站内容管理指专门面向网站内容的编辑与发布的应用系统。在企业或组织中，用户可能会 需要对网站进行管理。例如：用户需要将一些内部的文档和资料发布出去，这时用户可以去选择一些网站发布工具。第三类则是一些特定的内容管理应用，如图片应用；或者是单独功能的产品，如全文搜索引擎等。 信息产业目前已成为第一大规模的产业，并位居全球第三位。这就意味着我国的企业信息化也迎来了前所未有的好时机。第四代智能网站的推出也为中小企业建站提供了思路，可以从企业实用角度出发，对网站进行“总体规划，分步实施”，既可以节省成本，又不影响企业的应用。 网站主要关键问题或难点问题：网站需要创建一个的文章发布功能和不需要注册就 可以在线订购的系统。两者功能的实现需要和后台的数据库进行连接，并对数据进行核对、判断、储存和更新。 应用服务提供商，英文是 Application Services Provider，简称 ASP。主要提供对不同用户的应用服务。目前行业的细分引起市场的细分，随着这种细分化，中小企业不希望也不可能花费较大的成本购买高价的软件产品和构建信息平台，因此随之而诞生了一类信息提供商，他们配置高性能的服务器、购买应用软件并由专人负责维护，为这些中小企业提供远程应用程序的租赁和信息共享服务，中小企业只需花费极低的租赁使用费即 可远程使用高性能的软硬件。对于应用服务提供商来说，如何为用户提供便捷、高效的应用服务，成为应用服务提供商之间竞争的筹码。 信息工程学院毕业设计说明书 4 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将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输信息工程学院毕业设计说明书 5 出 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 组件来执行各种各样的任务，例如存信息工程学院毕业设计说明书 6 取数据库、发送 Email 或访问文件系统等； （ 6）由于服务器是将 ASP程序执行的结果以 HTML格式传回客户端浏览器，因此使用者不会看到 ASP所编写的原始程序代码，可防止 ASP程序代码被窃取； (7) 方便连接 ACCESS与 SQL数据库； (8)开发需要有丰富的经验 ,否则会留出漏洞 ,让黑客利用进行注入攻击。 ASP(Application Service Provider,应用软体租赁服务提供者 )即是指通过网络以租赁方式提供应用软体服务的业者 ,即是 指业者以应用软体为主体 ,透过网路一对多地传递服务 ,这种以服务为主的交易模式促使企业可藉由租赁的方式 ,以更符合成本效益的方式拥有软体的使用权 ,并且亦能因为业者集中式的管理而大幅降低企业维护的成本。 ASP也不仅仅局限于与 HTML结合制作 WEB网站，而且还可以与 XHTML和 WML语言结合制作 WAP 手机网站。但是其原理也是一样的。 信息工程学院毕业设计说明书 7 第二章 方案初选 2.1 网站布局介绍 网站整体内容分六大部分：网站首页、公司介绍、新闻动态、产品介绍、在线订购和联系我们，如图 2-1所示。 图 2-1 网站整体结构 2.2 网站流程介绍 对于网站文章发布的功能基本思路是：进入管理员登陆页面输入用户名和密码通过 ASP 和后台数据库进行连接，判断是否正确正确登陆后可以发布文章，确定提交再次通过 ASP 保存数据更新页面，如图 2-2所示： 图 2-2 管理员登陆文件上传流程 第二个功能不需要注册就可以在线订购的基本思路是：用户在网站的可编辑区域填写相关信息，点击“确定” 通过 Javascript 语言进行后台数据库连接并保存。更新至网站后台“订单管理”，如图 2-3所示： 首 页 公司介绍 新闻 动态 产品介绍 在线订购 联系我们 N Y 判断 文章发布页面 Asp 保存数据库 提示保存成功 提示密码错误 输入用户名和密码 信息工程学院毕业设计说明书 8 图 2-3 在线订购数据流程 填写相关内容 Javascript 保存填写信息 更新至后台页面 信息工程学院毕业设计说明书 9 第三章 方案的详细设计 3.1 开发配置 3.1.1 IIS 的安装与配置 (a) 安装 IIS 若操作系统中还未安装 IIS 服务器，可打开“控制面板”，然后单击启动 “添加 /删除程序”，在弹出的对话框中选择“添加 /删除 Windows 组件”，在 Windows组件向导对话框中选中“ Internet 信息服务（ IIS）”，然后单击“下一步”，按向导指示，完成对 IIS 的安装。 (b) 启动 Internet 信息服务（ IIS） Internet 信息服务简称为 IIS，单击 Windows 开始菜单 -所有程序 -管理工具 -Internet 信息服务（ IIS）管理器，即可启动“ Internet 信息服务”管理工具。 (c) 配置 IIS IIS 安装后，系统自动创建了一个默认的 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。根据需要：利用“添加”和“删除”按钮，可为站点设置所能解析的主页文档。 信息工程学院毕业设计说明书 10 3.1.4 启动与停止 IIS 服务 在 Internet 信息服务的工具栏中提供有启动与停止服务的功能。单击可启动IIS 服务器；单击则停止 IIS 服务器。 3.2 首页设计样 网站整体色调以灰白色为主。头部 FLASH 为企业宣传语，中间为主体内容，顶部为页面版权及相关联系方式，每个页面都是在此处更新，如图 3-1所示： 图 3-1 网站首页结构和色彩 3.3 文章发布 文章发布中的管理员登陆和核对用户名和密码，是通过网页中输入的用户名和密码和在 Access 中的管理员用户名和密码进行核对，在进行判断。如果不一致着显示“用户或密码错误，请重新输入！”，如果一致则页面连接到 后台主页进行文章发布 。完成后在首页和新闻动态的页面中更新显示 。并把文章数据存放在 Access 的数据库中，如图 3-2所示： 信息工程学院毕业设计说明书 11 图 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 表 在文章发布模块中增加了对文章的编辑功能，运用 Javascript 语言对文章进字段名 数据类型 备注 newsid 自 动编号 title 文本 标题 content 备注 内容 author 文本 发表人 source 文本 来源 click 数字 点击数 date 日期 /时间 发表时间 bclass 文本 栏目 ID chk 是 /否 头条 sh 数字 审核 download 备注 上传文件地址 信息工程学院毕业设计说明书 12 行高级的编辑功能， 其实编辑器的相关代码为 : var htmlchk=false function 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) ; 信息工程学院毕业设计说明书 13 function fontsize (value) idc.document.execCommand (fontsize,false,value) ; 3.4 在线订购 在线订购是在在线订购页面中的可编辑区域输入相关信息，点击确定后。Javascript 语句对输入的内容进行类型验证，更新后显示在后台订单管理页面。如图 3-5所示： 信息工程学院毕业设计说明书 14 图 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 备注 交易类别 信息工程学院毕业设计说明书 15 email 备注 E-mail szdq 备注 所在地区 hylb 备注 行业类别 dh 数字 电话 sj 数字 手机 qymc 备注 企业名称 lxdz 备注 联系地址 gswz 备注 公司网站 xmjs 备注 项目介绍 cpsm 备注 产品说明 qd 备注 得知本公司渠道 date 日期 /时间 订单时间 在线订购处理过程代码如下 : 信息工程学院毕业设计说明书 18 第四章 设计总结评价 通 过 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 statusD and m.class_id=c.id and m.class_id= 信息工程学院毕业设计说明书 19 &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占用的空间小。 信息工程学院毕业设计说明书 20 制作过程中的常见错误 例： 1 sql=select * from biao1 rs.open sql,conn,1,3 if rs.eof then dim name name=rs(name) end if sql=select * from biao2 rs.open sql,conn,1,3 解决的办法有两个一个是： （ 1）在第二次 rs.open之前先关闭 rs.close 或； （ 2） set rs1=server.createobject rs1.open sql,conn,1,1 2用 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,1 rs.addnew 或 rs(userName)=aa rs.update - 当前记录集的打开方式为只读 解决 : 信息工程学院毕业设计说明书 21 改为 rs.open sql,conn,1,3 4在查询语句中采用的对比字段值与字段类型不符； - sql=select * from user where id= & myID & rs.open sql,conn,1,1 - 假设表中设计 ID为数字型，那么有时出错； 解决 : sql=select * from user where id= & myID 5未检查变量值而出错； - sql=select * from user where id= & myID rs.open sql,conn,1,1 - 假设 myID变量此时值为 null,那么 sql 将成为 sql=select * from user where id= 解决 : 在前面加上， if isnull(myID) then 出错提示 6未检查变量值类型而出错； - sql=select * from user where id= & myID rs.open sql,conn,1,1 - 假设 id 为数字型 ,myID 变量此时值不为 null,但为字符，比如 my