wed留言板的设计与实现.docx

wed留言板的设计与实现 作者： 日期：2 wed留言板的设计与实现 留言板和其他的WEP应用程序一样.都是对数据库相关操作。比如留言就是插入记录 ，显示留言就是提取记录；回复留言就是更新记录，删除留言就是删除记录。数据库操作一样，操作说明不同，系统体现的功能也就不同。 1 留言板系统准备1.留言板系统需求分析 对于留言本的普通浏览者来说:(1)能够浏览查看当前已留言内容,并且能按照时间的降序顺序来查看最新的留言内容.(2)能够发表自己的留言内容,在留言发表页填写相关项后即可发表,并能查看到新留言内容. 1 对于留言板管理员来说:(1)对发表的留言进行回复,以实现网页访问者和网页所有者之间的互动.(2)对于不符合留言规范的内容项,可通过删除留言的方式去除.(3)既然管理员具备一些特殊权限,所以需要管理员登录页.留言本系统留言本前台普通用户浏览留言本后台浏览留言发表留言管理员登录回复留言删除留言图10-1留言板系统组织图2.留言板着战点的建立(1)本地站点的建立 在本地计算机中建立站点文件夹,表示留言本系统WEB应用程序所有的文件存储地.在本地计算机的磁盘目录中建立文件夹GOBBK表示留言本系统.(2)拷贝文件对于系统中数据库文件的建立,连接数据库文件,管理员登录页等多个WEB应用程序可共享的文件,可直接应用于在第9章已建立的文件.所以可将在第9章建立的数据库文件夹DATABASE,数据库连接文件所在文件夹CONNECTIONS,以及表示管理员操作的文件夹ADMIN拷贝至当前新建的GBOOK文件夹内. 图10-2拷贝相关文件到站点文件夹下3.建立虚拟目录 在GBOOK文件夹上单击鼠标右键,选择【共享和安全】打开属性面板,选择【WEB共享】选项,单击共享文件夹前的单选的按钮,弹出【编辑别名】对话框,输入与文件夹名相同的别名,单击【确定】按钮完成文件夹虚拟目录的定义. 4.建立Dreamweaver动弹站点 1打开Dreamweaver8，单击【站点】菜单，从弹出菜单中选择【新建站点】。2 弹出【站点定义】对话框，选择【高级】选项。3 设置【本地信息】中的【站点名称】为“留言版”：选择【本地跟文件夹】为当前在计算机中已经建立站点的文件夹路径地址：输入【HTTP地址】为文件夹虚拟目录访问地址http/localhost/gbook.4选择【测试服务器】分类，其中【服务器模型】选择“ASP VBScript”:【访问】选择本地/网络”【测试服务器文件夹】选择为本地站点文件夹路径：【URL前缀】输入为站点文件夹虚拟目录访问地址http:/localhost/gbook。5单击【确定】按钮完成Dreamweaver动态ASP站点的建立。3 留言板数据库的建立1 分析留言版分析留言表主要就是考虑设计留言表的字段内容，而字段的定义是由留言时需要填写的表单项决定的。那么一个简单的留言板在用户留言时输入什么内容，或者服务器需要接收客户端的什么内容？1 留言用户姓名，表示留言用户名，昵称等。2留言用户性别，通过接收的性别值可在显示留言时采用对应性别头像来形象表示。3 留言用户的电子邮箱，这是联系留言者最直接的方式。4 留言内容，当然也就是留言版主要体现的功能。5 留言时间。以表示留言的时间说明。6其他可选项比留言者的联系电话。留言者个人主页。留言者地区等。7回复留言内容，当然是管理员操作的，表示对该留言的回复内容。8回复留言时间，表示管理员是何时回复该留言的。2 建立数据库的留言表1在数据库文件窗口中选择【使用设计器创建表】在单击【设计】按钮。图10-3设计留言表2 打开数据库设计表，在表中:输入“g-id”字段，选择“自动编号”的数据类型，并设置为【主键】输入g-name字段，选择文本的数据类型，表示留言者用户名；输入g-sex字段，选择文本的数据类型，表示留言者性别；输入g-mail字段，选择文本的数据类型，表示留言者邮件地址；输入g-con字段，选择备注的数据类型，表示留言内容；输入g-time字段，选择日期/时间的数据类型，并输入其“默认值”为“now()”,表示留言发表的时间；输入g-r-con字段，选择“备注”的类型，表示留言回复内容；输入g-rtime字段，选择日期/时间的数据类型，并输入器默认值为now（）表示回复留言的时间;3保存该表在弹出的【另存为】对话框中输入【表名称】为book。4 数据库连接文件1如图10-4在【文档窗口】中打开定义站点任意一文件，使得【数据库】面版激活。图10-4修改【自定义连接字符串】2 双击【数据库】面板中的定义的连接字符串，弹出【自定义连接字符串】对话框。3 在【连接字符串】文本框中的原本路径“mynews/database/xw.mdb修改为“/gbook/database/xwmdb，表示虚拟目录book即本章定义站点目录下的数据库文件。4 单击【确定】按钮完成，。留言板前台用户1浏览留言在留言板系统中最主要的即是显示留言的内容，提偶那个过如下步骤欧克快速完成留言浏览页 的建立。1绑定记录集1如图10-5 在【文件】面板的站点目录下建立文件index.asp.2在【文档窗口】中打开该文件，按Crtrl+f10键.打开【绑定】面板。单击【添加】按钮，从弹出菜单中选择【记录集.查询】弹出【记录集】对话框。【表格】选择表示留言内容的Gbook表，【排序】选择字段g-id”的降序。单击【确定】按钮完成。图10-5绑定【记录集（查询）】2设计留言浏览页在文档中输入文本“当前还没有任何留言，请发表用以表示当前内容为空时的信息显示。并对文本范彪制作到addgb.asp的超级链接。图10-6 设计留言浏览页选择页面中的动态数据库表格，单击【应用程序】类别中的【如果记录集为不为空则显示】按钮。图10-9设置【如果记录集不为空则显示区域】弹出【如果记录集不为空则显示区域】对话框，选择当前绑定的【记录集】，单击【确定】按钮完成。4重复的区域1图10-10所示 选择页面中的动态表格，单击【应用程序】面板中的【重复的区域】按钮。图10-10设施重复的区域2弹出【重复区域】对话框，在【记录集】中选择当前页已绑定的记录集名，【显示】选择为“10”条记录，表示当前的动态页采用了分页技术，每页显示10天数据记录。5记录集导航条1在动态数据表格的重复区域后回车换行，打开【插入】面板，单击【应用程序】类别中的【记录集分页：记录集导航条】按钮。2弹出【记录集导航条】对话框，从【记录集】下拉列表中选择当前页已记录集，【显示方式】选择为文本。2发表留言1设计留言板表页1在【文件】面板的站点目录下建立文件“addgb.asp.表示留言发表页。图10-11 设计留言发表页2打开【插入】面板，单击【表单】类别中的【表单】按钮，在文档中插入黄色虚线框。3单击【文本字段】按钮，【标签文字】输入为“您的姓名”，在该表单元素插入文档后选择该表单元素，打开其【属性】面板，输入其【文本域】值为“g-name”.4单击【单选按钮】，【标签文字】输入为“男”字该表单元素插入文档后，在其【属性】面板中设置其名称为“g-sex”，【选定值】输入为“male”,【初始状态】选择“已勾选”。5 单击【单选按钮】，【标签文字】输入“女”，在该表单元素插入文档后在其【属性】面板中设置其名称为“g-sex”。【选定值】输入为“female”.6 单击【文本字段】按钮，【标签文字】输入为“您的邮箱”。在该表单元素插入文档后，在其【属性】面板中设置其【文本域】值为“g-mail”。7单g-name击【文本区域】按钮，【标签文字】输入 为留言内容在该表单元素插入文档后，在其【属性】面板中设置其【文本域】值为“g_com”。8单击【按钮】，取消输入【标签文字】，按钮【动作】设置为提交表单。检查表单1如图10-12所示，在文档中选择“提交”按钮，按住Shift+F4键打开【行为】面板，单击【添加】按钮，从弹出菜单中选择【检查表单】。图10-12 检查表单2弹出检查表单对话框，在【命名的栏位】中选择“g_name”、“g_com”并设置值为“必需”，【可接受】为“任何东西”对“g_mail”只选择【可接受】为电子邮件地址。单击【确定】按钮完成。插入记录如图所示，按住trl+F9键打开【服务器行为】面板，单击【添加】按钮，从弹出来菜单中选择【插入记录】。图10-13 插入记录弹出【插入记录】对话框，其中【插入到表格】选择为留言板表“gbook”，在【插入后，转到】留言浏览页“index.asp”将文档“forml”表单中的【表单元素】的值分别插入到数据库留言表中。单击【确定】按钮完成。3发表、浏览留言测试打开浏览器，向服务器申请获得留言浏览页地址。如图所示，因为当前没有留言记录，显示为无留言记录的信息说明。图10-14 没有留言的显示页单击“发表”超级链接，打开如图所示的留言发表页，输入表单元素内容，单击提交按钮即完成了留言的发表。图10-15发表留言在留言发表完成后，页面将跳转到留言浏览页，如图图10-16 有留言记录的显示页。留言板管理后台1留言管理表页在网页的内容和显示方式上，管理员进入的留言管理列表页与普通用户浏览的留言板列表页是相同的，区别在于管理页具备了每条留言的“回复”和“删除”的管理链接。绑定记录集打开【文件】面板，在表示管理的目录“admin”下建立文件“gblinst.asp”,以表框。在【文档窗口】中打开该文件，按Ctrl+F10键打开【绑定】面板。单击【添加】按钮，从弹出菜单中选择【记录集（查询）】，弹出【记录集】对话框。【表格】选择表示留言板内容的，“gbook”表，【排序】选择字字段“g_id”的“降序”。单击【确定】按钮完成。设计留言管理列表页如图所示，在页面文档中插入表格，通过排版布局将留言内容合理显示在页面中，并输入文本“回复”和“删除”，以方便制作回复留言和删除留言的链接跳转。图10-17布局留言内容如图所示，打开【绑定】面板中的【记录集】，选择同台数据【插入】在定义的内容显示位置。图10-18 插入动态数据如图所示，打开文档中选择文本“回复”，打开【插入】面板，单击【应用程序】类别中的转到详细页面按钮，弹出【转到详细页面】对话框，在【详细信息页】，中输入为“reb.asp”表示回复留言页，传递参数设置为当前记录集中的“g_id”留言编号【列】，单击【确定】按钮完成。图10-19 设置【转到详细页面】在文档中选择文本“删除”单击【插入】面板【应用程序】类别中的【转到详细页面】按钮，弹出【转到详细页面】对话框。在【详细信息页】中输入为“delb.asp”表示删除留言页，【传递参数】设置为当前记录集中的“g_id”留言编号【列】，单击【确定】按钮完成。重复的区域如图所示，选择页面中的动态表格，单击【应用程序】面板中的【重复的区域】按钮。10-20 设置【重复区域】图弹出【重复区域】对话框，在【记录集】中选择当前页已绑定的记录集名，【显示】悬着为“”条记录，表示当前的动态采用了分页技术，每夜显示条数据记录。记录集分页在动态数据表格的重复区域后回车换行，单击【插入】面板【应用程序】类别中的【记录集分页：记录集导航条】按钮。弹出【记录集导航条】对话框，从【记录集】下拉列表中选择当前页已绑定的记录集【显示方式】选择为选择为“文本。”2留言回复页绑定记录集如图所示，打开【文件】面板，在表示管理的目录“admin”下建立文件“reb.asp”以表示回复留言页。图10-21 绑定【记录集（查询）】打开【绑定】面板，单击【添加】按钮，从弹出菜单中选择【记录集（查询）】。弹出【记录集】对话框，【表格】悬着表示留言表的“gbook”【筛选】项中选择“g_id”4单击【确定】按钮完成。2设计回复留言页如图所示，打开【插入】面板，单击【表单】类别中的【表单】按钮，在文档中显示为黄色虚线框。图10-22 设计回复留言页在表单区域内输入文本“留言内容：”，打开【绑定】面板，在【记录集】中选择“g_r con”列插入。单击【表单】类别中的【文本区域】按钮，插入到文档后，打开其属性面板，输入【文本域】值为“_r_con”并从绑定面板的【记录集】中选择“g_r_con”列进行【绑定】。单击【表单】类别中的【隐藏域】按钮，打开其【属性】面板，设置其【隐藏区域】为“g_r_time”,并输入其【值】为“%=now%”,表示动态的当前时间。单击【表单】类别中的【按钮】，取消输入【标签文字】，在其【属性】面板中设置【动作】为“提交表单”。更新记录如图所示，打开【服务器行为】面板，单击【添加】按钮，从弹出菜单中选择【更新记录】。图10-23 更新记录弹出【更新记录】对话框，选择【要更新的表格】，为留言表“gbook”【惟一键列】选择“”列，【在更新后，转到】留言管理列表页“gblist.asp”。【获取值自】选择页面中的表单“firm1”,并将相关【表单元素】的值更新到数据库留言表的相应列表中。4单击【确定】完成。限制对页的访问、如图10-24所示，打开【插入】面板，选择【应用程序】类别。2单击【用户身份证验证】，按钮后的向下箭头，从弹出菜单中选择，【限制对页的访问】。图10-24 设置【限制对页的访问】3弹出【限制对页的访问】对话框，选择【基于以下内容进行限制】的具体内容，【如果访问被拒绝，则转到】管理员登陆页“login.asp”。4.单击【确定】按钮完成、3 留言删除页1.绑定记录集1.打开【文件】面板，在表示管理目录“admin”下建立文件“delb.asp”，以表示删除留言页。2.打开【绑定】面板，单击【添加】按钮，从弹出菜单中选择【记录集查询】。3.弹出【记录集】对话框，【表格】选择表示留言板的“gbook”【筛选】项中选择“g_id”、“=”“url参数”、“g_id”。4.单击【确定】按钮完成。2.设计删除留言页1.打开【插入】面板，单击【表单】类别中的【表单】【按钮，在文档中插入黄色虚线区域。2.单击【表单】类别中的【按钮】，取消输入其【标签文字】，在该表单元素插入文档后，打开其【属性】面板，输入【值】未确定删除，【动作】设置为提交表单。3.删除记录1.打开【服务器行为】面板，单击【添加】按钮，从弹出菜单中选择【删除记录】。2.弹出【删除记录】对话框，【从表格中删除】选择留言表“gbook”，【选取记录自】选择当前已绑定的记录集，【唯一键列】则选择留言编号“g_id”字段，在【删除后，转到】留言管理列表页“gblist.asp”.3单击【确定】按钮完成。4.限制对页的访问 选择【应用程序】中的【用户身份验证：限制对页的访问】，弹出【限制对页的访问】S对话框。选择内容显示的基于方式，访问拒绝时选择“login.asp”进行重新登录。4测试留言管理1.添加留言管理链接1.如图10-25所示，在【文档窗口】登陆成功的框架集页“admin.asp” 图10-25添加留言管理链接2.在框架左侧管理向导页中输入文本“管理留言”。并打开其【属性】面板，设置其【连接】为留言列表页“gblist.asp”，同时【目标】选择为“mainframe”。2.测试留言回复1.打开浏览器，请求获得管理员登陆页“login.asp”地址，输入正确的管理员账号和密码。2.进入管理员管理页面，单击其中的管理留言超级链接，打开留言管理列表页，如图10-26所示，单机列表页中的具体某条留言的“回复”连接。 图10-26 留言管理列表页3.打开如图10-27所示的留言回复页，在“回复内容”中输入相关内容进行留言的回复，单击【提交】按钮完成。 图10-27 回复留言4此时可直接浏览留言列表页，如图10-28所示，在该留言的显示位置同样显示了管理员回复的内容。 图10-28 留言列表页留言板的个性操作1留言者性别图像可以注意到留言列表中留言者性别既是将数据库记录直接显示出来，然而在此基础上，可以进行留言本的个性化操作。1因为当前性别显示记录只有两个值：male和femal。所以可以准备两张图像male.glf和female.gif分别代表男性头像和女性头像，并将图像文件保存在站点目录下，如图10-29。图10-29 准备两张图像2如图10-30所示，打开留言列表页“gblist.asp”更改其中表示留言者性别的位置内容，使用【图像占位符】进行插入。图10-30 插入【图像占位符】3选择【图像占位符】，打开【属性】面板，单击【源文件】输入框后的黄色文件夹按钮，打开图10-31所示的【选择图像源文件】对话框，【选择文件名自】选择为“数据库源”。图10-31 【选择图像源文件】对话框4在对话框中【域】的【记录集】内选择“g_sex”字段，在【URL】的文本框中即显示动态数据，再该数据前输入“img/”表示图像文件的路径，在该数据后输入“.gif”表示图像文件后缀。5单击【确定】按钮完成，如图10-32所示即为使用图像表示留言者性别的留言板列表内容。图10-32 留言列表页2留言板内容的格式化1如图10-33所示，在留言板内容中输入了回车换行的留言内容，并且还输入了HTML标签代码。图10-33 输入留言内容2在查看留言时，如图10-34所示，换行的内容并没有换行，而HTML标签代码却被执行显示了。图10-34 留言内容显示根据以上留言内容的显示情况，如同在“新闻系统”中显示内容那样，留言内容的格式，也需要调整，即将留言时的回车换行在显示留言的时候，同样能显示出来，同时为防止留言本恶意的HTML标签留言内容被执行，所以将需要将HTML标签进行过滤（既不执行）。3打开留言板内容显示页“index.asp”，如图10-35所示，切换至【代码】视图，在网页文档中输入如下代码。”“这就是自定义函数HTMLEncode0的功能代码。其中replace表示替换函数，将其函数参数中的“”替换为“>；”即“”的HTML标签，在留言页中只显示而不执行HTML。其他必然留言的换行等在本程序中都有替换说明。图10-35 输入代码4在定义了函数和其他功能后，就可以在网页中应用了。如图10-36所示，在默认的显示留言的动态内容中添加HTMLEncode()函数进行转变：%=HTMLEncode?(Recordset1.Fields.Item(“g_com”).Value。5如图10-37所示，即为使用了自定义函数后的留言显示效果，包括内容格式的转换，留言HTML标签的过滤。注意图10-34中显示内容的不同。图 10-36 应用自定义函数图10-37 调整后的留言显示本章小结留言本既是让普通用户能浏览留言、发表留言，让管理员能回复留言、删除留言，从而使得网站的浏览者和网站所有者之间建立了互动的联系。而这些有能都与数据库的炒作相联系，其实就是反复练习使用Dreamweaver建立动态ASP来显示、更新、删除数据库记录，这也就是动态ASP对数据库操作的主要内容。