留言板系统设计报告

ASP 网络留言板系统设计报告学 校：西安石油大学院 系：经济管理学院 专 业：信息管理与信息系统 班 级：经管1002班 小组成员：蔡庆丰 吴泓言 穆拉迪力指导老师：朱养鹏目 录第一章 系统开发环境41 小旋风 ASPWebserver 200541.2 Access41.3 EditPlus41.4 Dreamweaver 85第二章 系统概述52.1 系统功能模块设计52.1.1 公用模块52.1.2 用户系统功能模块62.2 总体设计72.2.1 页面功能分配72.2.2 系统工作流程72.3 数据库概要设计82.3.1 用户信息表：82.3.2 留言信息表9第三章 系统详细设计93.1 公用模块设计93.1.1 数据库连接文件conn.asp103.1.2 层叠样式文件style.css103.2 首页设计123.3 用户注册与登录页面设计143.4 用户留言与管理页面设计16第四章 系统调试与测试184.1.配置运行184.2.系统测试184.2.1 常见问题解决184.2.2 系统测试示例18总结20前 言随着网络的应用越来越广泛，国内外不少大中小型企业都不约而同地意识到利用网络传递信息可以在一定程度上提高办事效率，而搭建一个用户与企业的在线交流平台亦显得非常重要。留言板是目前网站中使用较广泛的一种与用户沟通、交流的方式。通过留言板，可收集来自用户的意见或需求信息，并可作出相应的回复，从而实现网站与客户之间及不同客户之间的交流与沟通。通过留言板系统，令信息的发布可以面向个人和群组，来自不同部门、不同地区、具有不同身份的人可以一起交流讨论大家感兴趣的话题。在线留言系统和互联网上的其他信息一样，具有范围广，内容庞杂，动态变化性强等特点，但是它还有两个最重要的特点：交互性和时效性。交互性是指用户能够参加到留言信息的交流过程中来，可在在线留言中发布自己的信息并且可以得到其他用户的反馈，这是在线留言最基本和最重要的特征。一位用户发布信息，往往有很多人回应，可以开展多人讨论，这是一个多向交流信息的过程，它使人们能够便捷地进行交流。由于互联网信息传播的快捷与方便以及在线留言的交互性，使得人们能够及时的从中获取某一技术和行业的发展动态与最新的进展，专业技术论坛中信息时效性更强，往往一些最新的技术信息可以从中获取。网络中各种留言板系统在Dreamweaver等工具的编辑美化后和网站融为一体，作为网站的交流平台起到举足轻重的作用。留言板可以提供一个公共的信息发布平台，适用于作为企业内部个人办公助手以及企业与企业之间进行信息交流，在线解决某些客户需求的工具，是网站中信息多、人气旺的地方。好的留言板可以吸引相当数量的访客，同时也担负着网站对外宣传、发布消息、收集客户反馈的重任，是网站、单位内联网必不可少的一部分。留言板的原理是将留言内容等写入服务器端的文本或数据库，再显示出来，用ASP开发留言板可以很方便的嫁接在网站中运行。系统开发环境1 小旋风 ASPWebserver 2005该软件是由残剑无敌在NETBOX核心下开发的一套强大简洁的ASPWEB服务器，使用这个软件的您完全可以抛弃体积庞大的WINNT，WIN2000服务器系统及漏洞百出的IIS了。可以在任何一个系统上调试和发布ASP程序。目前测试通过的操作系统为：Windows 98；Windows 98 SE；Windows ME；Windows NT+IE4；Windows 2000；Windows XP；Windows .NET Server。现在完全支持ACCESS，SQL数据库。1.2 AccessAccess是Office系列软件中用来专门管理数据库的应用软件。所谓数据库是指经过组织的、关于特定主题或对象的信息集合。数据库管理系统分为两类：文件管理系统和关系型管理系统。Access应用程序就是一种功能强大且使用方便的关系型数据库管理系统，一般也称关系型数据库管理软件。它可运行于各种Microsoft Windows系统环境中，由于它继承了Windows的特性，不仅易于使用，而且界面友好，如今在世界各地广泛流行。它并不需要数据库管理者具有专业的程序设计水平，任何非专业的用户都可以用它来创建功能强大的数据库管理系统。Access的用途体现在两个方面： 一、用来进行数据分析： access有强大的数据处理、统计分析能力，利用access的查询功能，可以方便地进行各类汇总、平均等统计,并可灵活设置统计的条件。 二、用来开发软件： access用来开发软件，比如生产管理、销售管理、库存管理等各类企业管理软件，其最大的优点是：易学！非计算机专业的人员，也能学会。 另外，在开发一些小型网站WEB应用程序时，用来存储数据。将Access运用于留言板系统主要适用于存储数据1.3 EditPlus EditPlus(文字编辑器)是一套功能强大，可取代记事本的文字编辑器，EditPlus拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，能够同步于剪贴板自动将文字粘贴进 EditPlus 的编辑窗口中，让你省去粘贴的步骤。另外它也是一个非常好用HTML 编辑器，它除了支持颜色标记、HTML 标记，同时支持 C、C+、Perl、Java。另外，它除了可以颜色标记HTML Tag (同时支 援 C/C+、Perl、Java) 外，还内置完整的HTML和 CSS1 指令状态，支持 HTML, CSS, PHP, ASP, Perl, C/C+, Java, Javas cript and VBs cript；对于习惯用 记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间。倘若你有安装 IE 3.0以上版本，它还会结合IE 浏览器于EditPlus的窗口中，让你可以直接预览编辑好的网页(若没安装IE，也可指定浏览器路径)。是一个相当棒又多用途多状态的编辑软件。1.4 Dreamweaver 8Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。是目前网站设计、开发、制作的首选工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。在该留言板系统的设计中，用Dreamweaver 8作为辅助工具，大大减少了纯粹写代码来实现所需功能的麻烦。 系统概述2.1 系统功能模块设计该留言板系统主要功能如下： 用户注册功能 用户登录功能，且用户使用留言功能必须先注册 用户登录后可以看到并浏览所有用户的留言 用户修改信息功能 用户发表留言功能 用户只能修改和删除自己的留言 记录用户留言内容、留言时间和IP地址等信息 退出登录状态功能系统分为公用模块和用户系统功能模块。2.1.1 公用模块 此模块包括数据库连接文件和层叠样式文件，分别负责与数据库的连接和定义页面风格。该系统中任何页面需要此模块时，直接调用即可，这样可以减少源代码，使整个系统紧凑有序。2.1.2 用户系统功能模块此模块实现了用户功能区的所有功能，由用户注册与登录模块、用户留言与管理模块、用户浏览模块、资料修改模块和退出系统模块组成，功能如下所示： 用户注册与登录模块：此模块包括用户注册页和用户登录页，负责保存用户注册信息，并根据用户输入的用户名和密码是否正确返回包含不同模块的页面。 用户留言与管理模块：此模块用于签写留言页、修改留言页和删除留言，并把用户的留言信息提交给数据库并在留言信息显示页中显示。 用户浏览模块：此模块包括系统首页，详细内容显示页，负责留言信息的显示，用户点击留言标题后即可浏览留言的详细内容。 资料修改模块：此模块包含资料修改页面，用于用户修改自己的信息，并提交到数据库进行保存。 退出系统模块：此模块包括退出系统页，负责结束用户在登录模块中所获得的Session变量，退出系统，返回到首页。用户系统功能模块图示效果如下所示：留言板系统前台用户注册与登录模块用户留言与管理模块用户浏览模块资料修改模块用户注册保存用户注册信息用户登录检验登录信息签写留言修改留言删除留言浏览所有用户留言并与用户联系修改自己的资料退系统录模块用户退出登录状态2.2 总体设计2.2.1 页面功能分配 conn.asp:用于进行数据库连接。 style.css:层叠样式表文件，用于定义页面风格。 index.asp:留言板系统首页，显示系统中的留言信息和其他相关信息。 Register.asp:用户注册。 bbs-add.asp:用户发表新的留言。 bbs-xx.asp: 用户浏览留言。 bbs-bianji.asp:用户修改自己的留言。 delete.asp: 用户删除自己的留言。 bbs-module.asp: 显示用户删除留言后的所有留言信息 bbs-menber.asp:用户修改自己的资料。 sorry.asp:用户退出已登录状态，并返回系统首页。2.2.2 系统工作流程访问留言板系统否成功注册成功登录是否浏览留言言是退出登录言进入首页发表留言言修改资料言修改留言言删除留言言2.3 数据库概要设计系统采用Access 2003作为后台数据库，在设计数据库表的过程中，一般要遵循几条原则：数据库设计一个表最好只存储一个实体或对象的相关信息，不同的实体最好存储在不同的数据表中，如果实体还可以再划分，实体的划分原则是最好能够比当前系统要开发的实体的复杂度小；数据表的信息结构一定要合适，表的字段的数量一般不要过多；扩展信息和动态变化的信息一定要分开在不同的表里；多对多这样的表关系尽量不出现等。通过分析，该留言板系统需建两个数据表，分别用于存储用户信息和留言信息。这两个表之间相互关联，共同存储着系统所需要的数据。2.3.1 用户信息表：用于存储用户基本信息，包括用户ID号、用户性别、用户密码、用户注册时间、用户QQ、用户邮箱、用户文化学历、用户头像、用户IP地址、用户个性签名等，在已创建的Access数据库guestbook中，创建一个名为menber的表，向表中添加字段如下表所示：2.3.2 留言信息表用于存储留言的基本信息，包括留言ID号，留言主题、留言标题、留言内容、留言时间等，在已创建的Access数据库guestbook中，创建一个名为 BBs-Modulecontent的表，向表中添加字段如下表所示：第三章 系统详细设计3.1 公用模块设计为了使留言板系统的结构清晰，代码规范，且为省去一些写ASP代码的时间，可以把系统中重复使用的代码写在一个页面内，当需要的时候直接加载进来即可。该系统的公用模块包括以下页面：3.1.1 数据库连接文件conn.asp 系统中几乎所有页面都要进行数据库的连接，把数据库连接代码保存在页面conn.asp 中，可以避免重复编程。其代码如下所示：在文件中引用此文件时，把该文件作为头文件直接调用即可，代码如下所示： 3.1.2 层叠样式文件style.css为了使留言板系统的界面美观、风格统一、修改方便，创建一个层叠样式文件style.css，用来对留言板系统的部分网页文件中所标记的属性进行统一的控制。其代码如下所示：table font-size: 9pt;color: #;A:link COLOR: #; TEXT-DECORATION: noneA:visited COLOR: #CCCCCC; TEXT-DECORATION: noneA:hover COLOR: #7d376a; TEXT-DECORATION: underline.log_td_table BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #ffffff.log font-size: 12px;background-color: #f5f5f5;border-top: 1px groove;border-right: 1px ridge;border-bottom: 1px ridge;border-left: 1px groove;.box padding-bottom: 1px.ipt background-color: #FFFFFF; border: 1px # solid; height: 12pt.textarea BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; COLOR: #; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana, Arial, 宋体; BACKGROUND-COLOR: #ffffff.input BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; COLOR: #; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana, Arial, 宋体; HEIGHT: 18px; BACKGROUND-COLOR: #ffffffSELECT FONT-SIZE: 12px; FILTER: Alpha(Opacity=50); COLOR: #; FONT-FAMILY: song, MS Shell Dlg, 宋体; BACKGROUND-COLOR: #f5f5f5.se BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #ffffff 1px solid; COLOR: rgb(255,255,255); BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #.input1 BORDER-RIGHT: # 1px solid; BORDER-TOP: # 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: # 1px solid; COLOR: rgb(255,255,255); BORDER-BOTTOM: # 1px solid; BACKGROUND-COLOR: #CCCCCC编写页面代码时，在需要统一风格的页面中的和标记之间包含该样式表文件，就起到了统一页面风格的作用，其具体代码如下所示：由于上述公用模块的两个页面没有任何HTML代码，也没有任何ASP的输出显示代码，所以浏览这两个页面时没有任何效果。3.2 首页设计用户访问系统时首先进入首页，最上边部分是利用Dreamer 8制作的的一个三列一行的表格，两边单元格插的是图片，中间单元格用的是背景图片，可在上面写文本。登录前在首页会显示“欢迎您，请先登陆或先注册”字样，登录后用户名会在首页显示。中间部分的右半部分显示注册用户数、新进用户的用户名、留言总数、今日留言数等，左半部分在用户登录之前显示用户当前的相关信息：地址、操作系统版本和浏览器版本，登录之后显示”资料修改”和”退出登录”。中间还有一个滚动字幕，显示欢迎信息：欢迎大家访问本站，这里是大家学习交流的平台，期待你加我QQ和我交流。首页下部分显示用户留言信息，包括留言标题、留言人、留言点击率和最后更新时间，用户可以点击标题一栏的所有标题浏览留言的详细内容。用户登录前页面：登录后页面：显示用户登录框的代码如下：用户名： 密码：验证码： input onselectstart=return false name=yzz type=text readonly=id=yzz style=font-size:15pt;background-color:#FFFfff;border:#FFFfff;color:#FF0000;height:25s;width:45 value= size=4 /    点击资料修改即可进入资料修改页面，用户可以修改自己的信息，点击“确认提交”后回到首页，修改的信息也就自动保存，该页面显示效果如下：3.3 用户注册与登录页面设计用户进入系统首页后，点击“注册”按钮，先进入阅读协议页面，点击“同意”后，即可进入登录页面，页面显示效果如下图：注册页面的控件及其功能如下表所示：对象功能表格控制页面信息显示位置表单名称为myform，提交目标网页Register.asp文本框用于输入注册用户的用户名列表/菜单名称为Image,用于注册用户选择自己喜欢的头像单选按钮名称为sex,用于注册用户选择性别文本框名称为password用于注册用户设置密码文本框用于确认密码文本框名称为Email,用于注册用户填写自己的邮箱地址文本框用于注册用户输入自己的QQ文本域名称为Content,用于用户的个性签名按钮单击“提交”按钮,提交表单按钮单击“重置“按钮，清空文本框等中的内容出现下列情况而提交时，会出现相应的提示信息：如果用户名没填写，则会弹出“请填写您的账号！”提示信息；没输入密码则弹出“密码不能为空！”提示信息；密码少于六个字符则提示密码不能少于6个字符！；确认密码与前面所输密码不一致时则提示“两次密码输入不同！”；用户名与之前注册过的重叠则显示“用户名已经存在”。相关代码如下：if(myform.Admin.value=)alert(请填写您的帐号！);myform.Admin.focus();return false;if(myform.Password.value=)alert(密码不能为空！);myform.Password.focus();return false;if(myform.Password.value.length6)alert(密码不能少于6个字符！);myform.Password.focus();return false;if(myform.Password.value != myform.Passwordd.value)alert(两次密码输入不同！);myform.Passwordd.focus();return false;sql=select * from Member where MemberAdmin=&Admin&rs.open sql,conn,2,3if not rs.eof thenresponse.writealert(用户名已经存在);window.history.back();用户注册成功后进入首页，即可在首页的登录区域输入自己的用户名、密码及验证码，输入正确即登录成功。3.4 用户留言与管理页面设计用户登录成功后，即可点击首页的“发表留言”按钮，进入签写留言的页面bbs-add.asp进行留言，该页面显示效果如下图：页面控件及其功能如下表：对象功能表格用于控制页面显示信息位置表单提交目标网页bbs-add.asp，数据采用隐式传递方式文本框名称为title,用于输入留言的主题标题文本域名称为GuestContent，用于输入留言的内容按钮单击“发表“按钮，提交表单按钮单击“重写“按钮，清空文本框等中的内容用户写好留言后，点击“发表“按钮，即回到首页。用户可以看到自己的留言，点击自己留言的标题，进入bbs-xx.asp页面。在这个页面中，可以显示用户的留言信息以及用户的头像、邮箱、QQ、IP地址、注册时间、个性签名、留言发表时间等信息，其他用户浏览时也同样能看到这些信息，并可点击页面上方的“与我联系”链接即可给用户发电子邮件，用以回复留言。用户可以点击“返回首页”链接回到首页，用户还可以修改和删除自己的留言，但不能修改和删除其他用户的留言。点击“编辑”链接后即可进入修改页面 bbs-bianji.asp，用户可以任意修改自己的留言，修改好后点击“提交”按钮重新回到bbs-xx.asp页面。bbs-xx.asp页面的显示效果如下：修改留言信息的页面如下图所示：用户点击“删除“按钮后，页面跳转至bbs-Moudle.asp,该页面显示留言信息，被用户删除的留言已不再显示，点击左上方的“退出登录”链接，即可退出登录状态；点击“返回首页”即可回到首页页面。bbs-Moudle.asp页面显示效果如下：第四章 系统调试与测试4.1.配置运行 要运行留言板系统的ASP程序，需要安装小旋风服务器，安装好后，在小旋风的wwwroot文件夹目录下新建文件夹bbsbook4，将所编写的ASP文件全部保存在bbsbook4文件夹里，在IE浏览器地址栏里输入http:/localhost,就可以访问小旋风默认的主页面；在IE浏览器地址栏里输入http:/localhost/bbsbook4/index.asp,就能访问留言板系统的首页。4.2.系统测试4.2.1 常见问题解决在调试过程中，系统出现数据库创建错误的问题。解决方法：运行Microsoft Office Access, 创建guestbook.MDB文件， 并按照前文所述设计表格。