网站留言板留言板简易教程.docx
《网站留言板留言板简易教程.docx》由会员分享，可在线阅读，更多相关《网站留言板留言板简易教程.docx（18页珍藏版）》请在冰豆网上搜索。
网站留言板留言板简易教程
用DreamweaverMX设计超简留言本
初学者在学ASP的时候往往是无从学起，学理论的时候又太抽象不好懂，实践的时候又找不到合适的例子来分析练习，有时候找到一个源程序学习的时候，功能太繁杂，涉及到的ASP模块太多，也附带了不少的函数，这样使初学者一头雾水，知难而退，实际上ASP是比较容易掌握的，今天就是为了这个目的，剥茧抽丝做了一个非常简单的留言板，只有留言，删除和回复的功能，没有管理权限功能（站长登录，修改密码等）、判断功能（表单验证等）及分页功能，简洁干炼，主要是为了初学者掌握最重要的知识，就是如何抓取数据库以及如何查看、删除、修改记录的操作，我们先从这个超级简单的留言板开刀吧，此关只要能过，恭喜您了，将来即可步入ＡＳＰ应用的行列了！
：
）本教程完成后会提供下载！
首先我们先做准备工作，先做一下策划，看看我们可能要做哪些页面，所谓说好的开始就是成功的一半，所以大家不要急着做，听我慢慢讲来。
为了让大家都能制作出自己的留言板，尽量实现一个网页一个功能模块，我们就做以下六个网页：
一、index.asp----首页即显示留言页
二、conn.asp----公共网页，每个网页都要包含它，是连接打开数据库的操作。
三、write.asp和save.asp----分别是发表留言的表单网页和保存留言页。
四、del.asp----删除留言页
五、reply.asp----回复当前留言页
做好的留言板效果图如下：
好了，说到这里我们可以动工了，首先做一个最重要的工作，就是建立起一个数据库，将来存放网友的留言所用。
1、数据库名：
db1.mdb
2、数据库表：
只有一个表：
book
3、数据表book里增设以下字段，见图1
说明：
·任一字段的数据类型中的“常归”项中的“允许空字符串”最好填“是”
·日期/时间的“常归”项中默认值为Now（）；站长回复里的“常归”项中的默认值为“暂没有回复”，注意此处要加双引号，是半角而不是全角。
数据库建好后开始做公共网页，用来打开数据库，打开DreamweaverMX，按如下方法新建动态ASP网页：
并保存为CONN.ASP,在编辑区里切换到显示代码视图里，注意把第一行自动生成的代码删掉。
这次主要是写连接数据库和参数设置的ASP代码，不用输出什么HTML标签，所以把代码全部删掉，用DREAWMEAVER插入栏自带的ASP对象写入以下代码，ASP栏里没有的代码只能自己手写输入了。
注意要把所有要编译的ASP代码放在<%%>之间，这样才能正常运行，否则会出错！
这是基本常识哦。
让我解释以上代码的意思吧：
代码第一行:
用来建立connection对象，connection对象扮演着十分重要的前期连接工作，连接成功数据库才会有以后的数据操作功能。
代码第二行：
设置数据库连接参数。
包括有数据库驱动程序和数据库文件名。
代码第三行：
用conn连接对象打开数据库。
这些是通用连接数据库的方法，任何需要打开数据库的动态网页都可以照搬以上代码就行了，只把数据库的名字换成你的数据库名字就行了，注意路径要正确。
所以可以把这些代码用Dreawmeaver里的代码片断复制下来，以后直接插入就可以用了，比较方便，也不用记忆，这是一个小技艺吧！
好了，今天就先说到这里。
有什么错误和更好的建议也希望你能到腾风在线论谈提出来。
现在我们继续前面的内容。
新建动态网页index.asp：
先在设计视图里排版好一个留言板的界面，设计好的页面效果图如下：
下面表格规划和显示都很清楚，一目了然，什么排版的我就不说了吧：
），这可是基本功啊，如果不行的话可先学好Dreamweaver，再来学ASP哦！
稳打稳进，至理名言^_^.如果想偷懒的话，可以直接下载源代码，学习研究ASP代码也可以啊，我不反对哦，至少我也是这么懒的，理解万岁！
：
）
排好版后再进入代码视图里，在不同的位置插入以下ASP代码：
如下图：
在网页代码的最上面第一行，点击用红线圈起来的标志可以插入第一行的代码，并可以浏览到具体文件上，比较方便，注意选择file文件类型的，不是virtual虚拟类型的。
这样就插入了conn.asp数据库连接代码页，此代码被包含在当前网页位置中进行正常编译，不用重复写数据库连接代码，它的好处很大哦，使页面结构化，容易修改和维护，如果数据库连接错误，或数据库文件变动，只需更改conn.asp即可，不必要修改每一页的代码。
要善于用这个方法啊，会使你的程序简单化，清晰化，这是常用的编程方法。
然后再输入以上第二行到第六行的划红线的代码块，此代码块的意义让我一一讲来：
第三行代码：
既然网页和数据库用connection建立连接打开关系了，之后最重要的工作就是读取数据了。
建立rs对象变量为recordset对象，这样以后可以用rs对象变量来存取数据库操作。
第四行代码：
把从数据表book里查询的结果放到sql变量上。
它的意思是把book里所有的数据都取出来，并按id从大到小排序。
desc表示从大到小排序，如果不加的话，最新的留言可是在最后面哦，不方便了。
第五行代码：
表示用rs对象变量open方法来打开数据表book，取出结果按sql的查询方法。
以上是通用的读取记录的方法，到其它地方都可以举一反三，要熟悉使用！
接着我们要做无留言记录的判断显示代码出来，我们要定位到“暂无留言”这个表格标签代码的开头，加上第29行如下划红线的代码即可，此代码表示判断语句：
如果RS记录指针的EOF结尾和BOF开头都为空，就返回真，执行以下标签，即输入暂无留言这个表格，而不输出下面的其它标签了。
再定位到“暂无留言”表格标签的结尾，输入以下37、38行划红线的代码完成判断条件，Response.end表示输出结束，不再输出以下的代码。
其次再做如果记录不为空的情况下输入留言的表格出来，分别定位在输出留言表格标签的前面和后面，插入ASP代码块如下图输入：
此代码块的意思为：
将RS记录指针指向第一个记录，然后开始判断移动记录时，记录结尾是否为空，如果不为空接着移动指针，把所有数据都读取出来。
直到结尾为空时，退出循环。
然后我们做最重要的也是最频繁使用的工作了，就是把数据表里各字段的记录分别读取出来放在表格的不两路位置上，例姓名，QQ，邮箱及留言等。
先转换到设计视图和代码视图的环境下，如下图：
我们发现上图多了很多
标记，这就是刚才在代码视图中输入的ASP代码，方便我们在设计视图中进行修改，输出预览是不影响排版的。
我们把光标定位在姓名旁边的表格里，点击插入栏ASP里的
，自动插入代码区里指定位置，比较方便，不容易搞错，如下图：
然后选中姓名旁边的
标记，点属性栏里的Edit编辑按钮，输入rs（"name"）即可。
<%=%>表示输出变量值，相当于response.write的简化版。
rs是上次已建过的recordset对象，可以直接读取字段里的内容，name是数据表里book里的姓名字段。
同理按以上方法再插入ASP代码留言内容、发表者、发表时间及回复内容在不同位置，分别是：
留言内容：
<%=server.htmlencode（rs（"content"））%>
发表者：
<%=rs（"name"）%>
发表时间：
<%=rs（"time"）%>
站长回复：
<%=rs（"repcontent"）%>
大家可能发现了，留言内容插入的代码和别的稍微不一样，多了server.htmlencode这个对象，这是为了安全问题设置的，是ＨＴＭＬ编码对象，可以使带有ＨＴＭＬ标签的文本不被解释为ＨＴＭＬ标记，这样可以防止被恶意者来写入特殊执行代码，造成不必要的损失。
这样就写好了，如下图所示：
接着再做OICQ,EMAIL,HOMEPAGE的链接设置，这个和上述不太一样，它不是直接显示出记录即可，而是将鼠标移到QICQ上浮现留言者的QQ号码，点击EMAIL自动给留言者发信，点击HOMEPAGE直接到达留言者的网站。
选中OICQ，加上“#”空链接，同样的也给EMAIL和HOMEPAGE加上“#”空链接。
如下图所示：
大家都知道给图片加提示比较简单，直接在ＡＬＴ里设置文字说明就可以了，但文字却没有ＡＬＴ，没关系，我们的Dreamweaver早就想到了，很强大哦！
在代码区里OICQ的空链接#后，按空格（注意是英文输入法才有效）会出现智能提示参数出来，我们选择“title”，然后接着打上"<%=rs（"oicq"）%>"即可！
如下图所示：
同样的方法给EMAIL和HOMEPAGE加上啊，方法如下图划红线所示：
一切ＯＫ了！
！
！
＾＿＾发现设计视图里的OICQ,EMAIL和HOMEPAGE的背景变成了浅蓝色,这说明我们在链接上给它们加了ASP代码，这样不同的提示是否很体贴啊：
）
你肯定等不及了，看看效果吧！
但还没有记录啊，没有做留言提交页和回复页，删除页，只好暂时在数据库里手动添加记录吧。
经过一些时间，千呼万唤始出来，不好意思，让大家久等了。
上次做的留言板只能显示数据，让我们赋于它生命吧，让这个留言板把网友们互动起来，大家可以积极发言，讨论侃山。
首先要做一个写留言的网页，为了简单化，我们把写入留言的网页和提交保存留言的网页分成两个，这样容易看懂，方便学员分析。
我们先做写入留言的网页，静态或动态网页均可，不需要任何ＡＳＰ代码，最好建个静态文件，这样浏览速度快，不增加服务器负担，也不是说全是ＡＳＰ网页就好哦，有必要的时候该出手就出手！
：
）只需提供写留言的界面让网友填均可，新建write.htm，排版如下图：
注意给各个文本域命名，最好和数据表里的各个字段相同，这样赋值的时候容易对应，不会出错。
然后选中红色虚线的表单，在属性栏里action栏里填入save.asp，这是将来接收网友的留言并保存到数据库里，我们后面会接着做这个网页。
如下图：
写留言的表单页很简单，就这样制作完了，大家不要以为有多麻烦啊：
）
下一步我们开始制作接收网友留言并处理的网页，新建save.asp网页，将上次做的表单提交的网页名称要一致啊，不能随便命名了。
在网页HTML标签的最上面加入以下红线框起来的代码,如下图:
以上代码分几个段落，并说明了每一块代码的意思，都是通用的基本操作，比较简单，如果有点困难的话，先放一放，先学好ＡＳＰ基础再说哦．注意在划红线的地方我们增加了两个函数使用.
一个是Trim函数，是用来帮助我们除去不必要的空格符，有很多人习惯多打几个空格出来，我们用这个函数来去掉空格就行了。
还有一个是Replace函数，我们在留言内容写了很多字，它到了边上会自动换行，或生成段落会生成回车符，这在提交前表单文本区域是正常的，但提交后数据库不能正常识别这两个特殊符号，在显示留言页只会生成一行，这可不得了啊，把表格撑得宽宽的，很不舒服。
而Replace帮助我们来解决这个问题，它可以把文字段落里所有的自动换行符和回车符找出来（vbCrLf是自动换行符和回车符的代码），并自动转换为
字符串，这样HTML就可以正常解释了。
提交保存留言页基本上就完成了，为了更加友好一点，表示提交成功，我们再多做一点工作，一切为了网友方便嘛！
我们回到设计视图环境中，插入大表格在正中央，写入“留言成功！
2秒后自动返回首页”，在返回首页加入链接到index.asp网页里。
如下图：
提交成功后2秒钟后自动返回首页，是不是很难啊？
？
其实一点都不难！
用Dreamweaver自带的功能就轻松解决这个问题，我们操作如下图：
插入栏中切换到head栏里，点击Refresh按钮，会弹出对话框，如下图：
按以上内容填好，就万岁了，是不是太简单了，别太得意了啊^_^
我们的发表提交留言页就到此结束了，大家是不是很激动，可以留言了，赶紧拉人来试试吧，猛灌水过把自己的瘾吧：
），这关我们顺利过了，就要一鼓作气做完其它的工作，就是回复页和删除页，有了以上的基础，就更加轻松了，相信我，是真的！
人总是不满足现状的，我们要永无止步，拿下最后的任务吧。
上次做的留言板有了生命力，可以互动提交留言了，但不能这么泛滥下去，我们还要做个删除页，删除无用的垃圾，网上也需要环保哦^_^.
废话少说吧，我们开始建删除页，命名为del.asp。
切换到代码视图中，把所有的ＨＴＭＬ标签全部删掉，加入如下代码，见下图：
写完这些代码即完成了删除页的制作。
让我们分析一下上面代码块的意思：
代码第三行：
是删除语句，WHERE后面跟的是条件语句，只删除接受传递过来ID值的数据，这个很关键，一定要设好，否则会把数据表里的全部字段全部清空了，这也太恐怖了吧。
代码第四行：
CONN对象执行DELESQL删除语句结果。
代码第五行和第六行：
关闭CONN对象并设为空释放资源。
代码第七行：
response.redirect是输出转向对象，表示删除后自动转向到首页去。
接着我们还要再做回复页，总得有来有回嘛，否则别人再大的热情你不回复，也会冷却下来的。
所以很有必要哦：
），新建reply.asp网页，在设计视图里先排好版，如下图：
注意红线的地方要加隐藏域,这样的目的是为了防止表单未提交但页面刷新却执行代码的错误,设置如上图.
排好后再切换到代码视图里，定位到HTML标签的最上面，加入如下红线框起来的代码，见下图：
以上代码块的意思有部分我已经在上面反复讲过了，不在重复了，如有不懂请在论谈提出来，我会补充的。
这里我再说明一下回复的模块代码：
代码第四行：
定位回复的位置，WHERE后面跟的是回复条件，只接受我们传递过来的留言ID值，并赋值到当前的ID变量上，这样我们只会对当前回复的留言页来回复，这个很关键，不然都乱套了。
代码第六行：
用来判断是表单提交还是刷新页面，如果是提交表单，那么隐藏域的值肯定被提交，这样Request.Form（"active"）不为空，就执行以下回复语句．如果没提交表单，而是刷新页面，那么那么隐藏域的值没有提交，Request.Form（"active"）肯定为空，就跳过不执行．
代码第八行：
注意此代码前没有加rsedit.addnew，因为这是更新原有的记录，在原有的留言中在追加回复内容，而不是再添加一条新记录。
回复的代码设置好，我们再回到设计视图环境中，先定位到要回复的留言旁边的单元格里，点击
后再点属性栏里的edit编辑按钮，弹出编辑框后填写代码“rsedit（"content"）”确定即可。
如下图：
选中红色虚线表单，在action栏里填写如下：
“reply.asp?
id=<%=request（"id"）%>”，如下图：
回复页我们也做好了，是不是完事了？
先别激动，还有一件事呢，忘了给首页index.asp的删除和回复还有发表新主题这三个加链接了，那不是空谈嘛，赶紧补上吧！
链接设置见下图：
超简留言板的教程就到此结束了，是不是非常超简啊：
），不知道大家收获怎么样？
希望能反馈给我哦。
在这里我把本教程的源代码提供出来，给大家一个方便，可以直接对照一下，祝你成功了！
编辑后话：
幻想曲还可以更人性化一点！
比如如果用户没有填写OICQ或是EMAIL地址就不显示出来！
当然，回复和删除是要经过登录验证的！
这些东东我相信是作者留下来让朋友们自行完成的吧！
鼓励一下这篇不错的教程！
作者虽然是在用DW,但没有依赖于DW自动生成的代码.这对于那些想学ASP而又一直借助于DW的朋友们来说确是一个不小的帮助!
另外:
提交留言时是不是要把单引号屏蔽掉呢?
不然SQL语句是很容易出错的!
作者后话：
我已经有了完善版的大飞猪留言板,但考虑到是让学生更能入门,所以没有加上去,免得起不到效果,完善版的主要是加了权限功能,登录系统,主要是版主才能回复和删除才行的.这个会更多的,怕吓跑了初学者,有经验的学习者可以向我索要源代码!
改日我再发布完善版的教材出来!
升级会员 