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键.打开【绑定】面板。
<3>单击【添加】按钮，从弹出菜单中选择【记录集.查询】弹出【记录集】对话框。
<4>【表格】选择表示留言内容的Gbook"表，【排序】选择字段"g-id”的降序。
<5>单击【确定】按钮完成。

图10-5绑定【记录集（查询）】
2设计留言浏览页
<1>在文档中输入文本“当前还没有任何留言，请发表用以表示当前内容为空时的信息显示。并对文本范彪制作到"addgb.asp"的超级链接。

图10-6 设计留言浏览页
<2》在页面文档中插入表格，进行拍板布局以将留言内容合理显示在页面中。
《3》 打开【绑定】面板，将动弹数据【插入】在已定义的内容显示位置。

图10-7 插入动态数据
3设置显示区域
《1》 选择文本内容“当前没有任何留言，强发表”，打开【应用程序】类别，单击其中的【如果记录集为空则显示】按钮。

图10-8设置【如果记录集为空则显示区域】
《2》弹出【如果记录集为空则显示】对话框，选择当前绑定的【记录集】单击确定按钮完成。
《3>选择页面中的动态数据库表格，单击【应用程序】类别中的【如果记录集为不为空则显示】按钮。

图10-9设置【如果记录集不为空则显示区域】
<4>弹出【如果记录集不为空则显示区域】对话框，选择当前绑定的【记录集】，单击【确定】按钮完成。
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标签代码。

图1033 输入留言内容
2在查看留言时，如图10-34所示，换行的内容并没有换行，而HTML标签代码却被执行显示了。

图10-34 留言内容显示
根据以上留言内容的显示情况，如同在“新闻系统”中显示内容那样，留言内容的格式，也需要调整，即将留言时的回车换行在显示留言的时候，同样能显示出来，同时为防止留言本恶意的HTML标签留言内容被执行，所以将需要将HTML标签进行过滤（既不执行）。
3打开留言板内容显示页“index.asp”，如图10-35所示，切换至【代码】视图，在网页文档中输入如下代码。
<%
Function HTMLEncode(fstring)
Tf not isnull(fstring) Then
Fstring = replace(fString . “>”“
这就是自定义函数HTMLEncode0的功能代码。其中replace表示替换函数，将其函数参数中的“<”替换为“>；”即“<”的HTML标签，在留言页中只显示而不执行HTML。其他必然留言的换行等在本程序中都有替换说明。

图10-35 输入代码

4在定义了函数和其他功能后，就可以在网页中应用了。如图10-36所示，在默认的显示留言的动态内容<%=(Recordsrt1.Fields.Item(“g_com”).Value)%>中添加HTMLEncode)函数进行转变：<%=HTMLEncode?(Recordset1.Fields.Item(“g_com”).Value。
5如图10-37所示，即为使用了自定义函数后的留言显示效果，包括内容格式的转换，留言HTML标签的过滤。注意图10-34中显示内容的不同。

图 10-36 应用自定义函数

图10-37 调整后的留言显示
本章小结
留言本既是让普通用户能浏览留言、发表留言，让管理员能回复留言、删除留言，从而使得网站的浏览者和网站所有者之间建立了互动的联系。而这些有能都与数据库的炒作相联系，其实就是反复练习使用Dreamweaver建立动态ASP来显示、更新、删除数据库记录，这也就是动态ASP对数据库操作的主要内容。