首页 » Forums » Drupal 一般讨论区 » 模块专区

简单的drupal留言板模块，相信大家有些网站都会用到，带验证码，和js校验

由 zsj1029 于 星期二, 2009-06-30 10:08 发表

先说一下这个模块的功能吧，就是简单的前台页面添加留言信息，校验完之后提交到数据库保存，后台也就是drupal的管理员登录可以直接看到所有留言详细信息，并且可以删除留言，前台客户留言，客户是无法看到自己的留言的，这个模块可以算是公司类网站的一个简易留言板。
废话少说，先上图，没在这里发过图，这也算第一次，看看行不行
tijiao
这是提交页面，使用的失去焦点的js验证，验证码看不清，可直接点击后刷新

这个是后台管理页面
guanli
使用了分页，每页显示10条记录，每次显示5页，可以一次删除多条记录，由于整合在drupal内部，所以登录后台找到管理-》留言管理菜单即可管理，如果非管理员打开该页面，会提示没有权限。

下面说一下该模块的实现原理
此模块使用的是drupal的page（页面）内容类型，相当于添加了一篇文章，只要管理员开启PHP code 模式，文章内容（也就是php代码即可执行），这是drupal很方便的特性，如果不是很清楚drupal的模块编写和运行机制，我们只需要把自己的php代码放入文章即可执行，从而实现模块的一些功能

下面开始该模块的实现过程

1.首先客户的留言都是提交到数据库里面，所以需要有一个表保存用户提交的留言数据
对应第一幅图，该表字段如下
表名：ls_message（当然这个随你们愿意了）由于使用的是drupal的数据库，我们只需要在mysql的drupal数据库内添加这张表
biao
懒得自己创建的可以下载这张表用phpmyadmin导入数据库
表（zip格式自己解压）

2.创建类文件，由于涉及到数据的操作，把这些连接数据库和操作数据库的方法写在单独文件里比较好
这里我们们用到了两个文件mysqlconn.inc数据库连接文件和lsfunction.inc数据库操作方法（插入和删除记录）
这两个文件我也传上来，但是数据库的连接信息，由于每个服务器的数据库帐号密码不同，大家需要自己修改
类文件（zip格式自己解压）
需要大家注意的是这个压缩包内部的两个文件需要保存到 drupal目录-》includes文件夹下
修改数据库连接：打开mysqlconn.inc

<?php
function mysqlconn()
    {
        $this->database="dq";
        $this->server_username="root";
        $this->server_userpassword="";
    }
    function conn()
    {
        $conn=mysql_connect('127.0.0.1',$this->server_username,$this->server_userpassword);
        mysql_select_db($this->database,$conn);
?>

database修改成你的数据库名，server_username你的数据库帐号，server_userpassword你的数据库密码，web服务器和数据库在同一台电脑127.0.0.1就不需要改了
修改留言表的表名，打开ls_function.inc
<?php
$result=$list->excute("select * from ls_message");
?>

就是把该文件所有的sql语句中的ls_message换成你自己的表名，如果你用我刚才的数据表导入，这里的表名就不用改了

3.创建用户留言提交页面（也就是前台页面）
管理员登录后台-》创建内容-》页面（page）
插入如下代码，输入格式选择php code以便下面代码可以执行，发布选项只选择已发表，然后把该篇文章跟相应菜单建立关联:

<?php
header("Content-Type:text/html; charset=UTF-8");
require_once("includes/mysqlconn.inc");
require_once("includes/lsfunction.inc");
if($_POST[submit]=="提交留言")
{   
        $arr1=array("<",">","\"");
    $arr2=array("&lt;","&gt;","&quot;");
    $cont=nl2br(str_replace($arr1,$arr2,$_POST[content]));
    $tit=nl2br(str_replace($arr1,$arr2,$_POST[title]));   
    $excu=new lsfunction();
    $excu->insertmessage($_POST[name],$_POST[sex],$_POST[email],$_POST[telnumber],$tit,$cont);
    echo "<script>alert('留言提交成功，谢谢,我们会尽快给您回复！'); </script>";
}
?><script>
window.onload =validteCode;
   var a=0;
   var b=0;
   var c=1;
   var d=0;
   var e=0;
   var yz="";
   var patrn=/^['　']+$/;
function trim(mystr){
while((mystr.indexOf(" ")==0) && (mystr.length>1)){
mystr=mystr.substring(1,mystr.length);
}
while ((mystr.lastIndexOf(" ")==mystr.length-1)&&(mystr.length>1)){
mystr=mystr.substring(0,mystr.length-1);
}
if (mystr==" "){
mystr="";
}
return mystr;
}
function validteCode()
{
    var codes = new Array(4);    
var colors = new Array("Red","Blue","Maroon","Green","Fuchsia");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
    for(var i=0;i < codes.length;i++)
    {
        var charIndex = Math.floor(Math.random()*36);  
        codes[i]=selectChar[charIndex];  
    }
    for(var i=1;i<=4;i++)
    { 
       var sp = document.getElementById("span"+i);
       sp.innerHTML=codes[i-1];
       sp.style.color = colors[Math.floor(Math.random()*10)];      
    }
yz = codes.join("");
    }
function namecheck()
{
         if(trim(document.getElementById("name").value)=="" || document.getElementById("name").value==null ||patrn.exec(document.getElementById("name").value))
document.getElementById("namechk").innerHTML="用户名不能为空！";
else if(document.getElementById("name").value.length<3||document.getElementById("name").value.length>10)
document.getElementById("namechk").innerHTML="用户名长度在3-10个字符之间！";
else
{
document.getElementById("namechk").innerHTML="";
a=1;
}
}
function mailcheck()
{
var CheckMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var email = document.getElementById("email").value;
if(trim(document.getElementById("email").value)=="" ||patrn.exec(document.getElementById("name").value))
document.getElementById("mailchk").innerHTML="电子邮箱地址不能为空！";
else if(!CheckMail.test(email))
document.getElementById("mailchk").innerHTML="电子邮件格式必须为abc@xxx.com！";
else
{
document.getElementById("mailchk").innerHTML="";
b=1;
}
}
function telcheck()
{
var checktel = /^[-]{0,1}[0-9]{1,}$/;
var tel = document.getElementById("telnumber").value;
if(tel=="")
{
document.getElementById("telchk").innerHTML="";
c=1;
}
else if(!checktel.test(tel)||document.getElementById("telnumber").value.length<3||document.getElementById("telnumber").value.length>15)
{
document.getElementById("telchk").innerHTML="电话必须为数字，且长度在3-15位之间！";
c=0;
}
   else
   {
   document.getElementById("telchk").innerHTML="";
   c=1;
   }
}
function titlecheck()
{
if(trim(document.getElementById("title").value)=="" ||patrn.exec(document.getElementById("title").value))
{
document.getElementById("titlechk").innerHTML="标题不能为空！";
}else if(document.getElementById("title").value.length>20)
document.getElementById("titlechk").innerHTML="标题不能超过20个字符";
else
{
document.getElementById("titlechk").innerHTML="";
d=1;
}
}
function contentcheck()
{
if(trim(document.getElementById("content").value)=="" ||patrn.exec(document.getElementById("content").value))
{
document.getElementById("contentchk").innerHTML="留言内容不能为空！";
}else if(document.getElementById("title").value.length>255)
document.getElementById("contentchk").innerHTML="留言内容不能超过255个字符";
else
{
document.getElementById("contentchk").innerHTML="";
e=1;
}

}
function checker()
{
if(a==1&&b==1&&c==1&&d==1&&e==1)
       {
        var yz1=document.getElementById("validate").value;
        if(yz.toLowerCase()==yz1.toLowerCase()){
       return true;
        }
           else{
            document.getElementById("yz").innerHTML="验证码有错误"; 
               return false;
        }
}
         else
{
alert("请填写完整正确的信息后提交！");
return false;
}
}
function check(){
    document.form1.image1.src="includes/yz.php?t="+Math.round(Math.random()*1e17);
    }
</script>
<p><style type="text/css">
<!--
.STYLE1 {font-size: 12px}
--></style></p>
<p><style type="text/css">
<!--
.STYLE1 {color: #FF0000}
--></style></p>
<p><style type="text/css">
<!--
.STYLE1 {
color: gray;
}
.STYLE2 {
font-size: 20px;
font-weight: bold;
color: #009999;
}
.rtecenter{
font-size:12px;
}
.color {
color:red;
}
.saveHistory {behavior:url(#default#savehistory);}
#aaa {
   background:#00CC99;
}

--></style></p>
<form method="post" action="" onSubmit="return checker()" name="form1">
    <table border="1" cellspacing="0" width="510" style="width: 510px; height: 417px">
        <tbody>
            <tr>
                <td colspan="2">
                <div class="STYLE2" align="center">欢迎留言</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter" height="25" width="115"><span class="STYLE1"><span class="color">*</span>姓名：</span></td>
                <td class="rteleft" width="375">&nbsp;<input id="name" class="saveHistory" onBlur="namecheck()" name="name" type="text" />
                <div id="namechk" width="300" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter" height="25"><span class="STYLE1"><span class="color">*</span>邮箱：</span></td>
                <td class="rteleft">&nbsp;<input id="email" class="saveHistory" onBlur="mailcheck()" name="email" type="text" />
                <div id="mailchk" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter" height="25">&nbsp;<span class="STYLE1">电话：</span></td>
                <td class="rteleft">&nbsp;<input id="telnumber" class="saveHistory" onBlur="telcheck()" name="telnumber" type="text" />
                <div id="telchk" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter STYLE1" height="25">&nbsp;性别：</td>
                <td class="rteleft">&nbsp;<input checked="checked" type="radio" name="sex" value="男" /> <span class="STYLE1">先生</span> <input type="radio" name="sex" value="女" /> <span class="STYLE1">女士</span></td>
            </tr>
            <tr>
                <td class="rtecenter" height="25"><span class="STYLE1"><span class="color">*</span>标题：</span></td>
                <td class="rteleft">&nbsp;<input id="title" class="saveHistory" onBlur="titlecheck()" name="title" type="text" />
                <div id="titlechk" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter" height="25"><span class="STYLE1"><span class="color">*</span>留言内容：</span></td>
                <td class="rteleft" height="25">&nbsp;<textarea id="content" class="saveHistory" rows="5" cols="25" onBlur="contentcheck()" style="width: 300px; height: 120px" name="content"></textarea>
                <div id="contentchk" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td class="rtecenter" height="25"><span class="STYLE1"><span class="color">*</span>验证码:</span></td>
                <td class="rteleft" height="25"><input maxlength="4" size="4" style="float: left; margin-right: 5px" name="validate" type="text" />
                <div id="aaa">
                <div id="span1" style="float: left">&nbsp;</div>
                <div id="span2" style="float: left">&nbsp;</div>
                <div id="span3" style="float: left">&nbsp;</div>
                <div id="span4" style="float: left">&nbsp;</div>
                </div>
                <a class="STYLE1" href="javascript:validteCode();">看不清楚</a>
                <div id="yz" style="width: 300px; float: left; color: red; font-size: 12px">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                <div align="center"><input type="submit" name="submit" value="提交留言" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" name="reset" value="重新输入" /></div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

4.创建后台留言管理页面
管理员登录后台-》创建内容-》页面（page）
插入如下代码，输入格式选择php code以便下面代码可以执行，发布选项只选择已发表。

<?php
header("Content-Type:text/html; charset=UTF-8");
require_once("includes/mysqlconn.inc");
require_once("includes/lsfunction.inc");
require_once("includes/pageclass.inc");
  global $user;
if ($user -> uid == 1){ //判断当前登录用户是否为管理员
if($_POST[del]=="删除")
{
    $list=new lsfunction();
    foreach($_POST[delid] as $a){
            $list->delmessage($a);
    }
    echo "<script>alert('留言删除成功！'); </script>";
}

if(!isset($_GET['page'])){$page = 0;}else{$page = $_GET['page'];}
$pagedemo = new pageclass;
$pagedemo->set_sql("SELECT * FROM ls_message ORDER BY `id` DESC");
$pagedemo->set_params("type=".$type."");
$pagedemo->set_setpage($page);
$pagedemo->set_pagesize(10);
$pagedemo->set_filename("?q=node/21");
$pagedemo->set_pagenumber(5);
$pagedemo->show();
$result=$pagedemo->result;
$pagedemo->showpage();
?><script>
function checker()
{
var objs=document.getElementsByName('delid[]');
var isSel=false;//判断是否有选中项，默认为无
for(var i=0;i<objs.length;i++)
{
if(objs[i].checked==true)
{
isSel=true;
break;
}
}
if(isSel==false)
{
alert("您尚未选择任何项目,请重新选择");
return false;
}else
{
return true;
}
}
</script>
<form method="post" action="" onSubmit="return checker()">
    <div style="width: 650px"><input type="submit" onclick="return confirm('确认删除选中的记录？')" style="float: right" name="del" value="删除" /></div>
    <?php
      while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        ?>
    <table class="style1" border="1" align="left" style="border-bottom: #808080 1px solid; text-align: left; border-left: #808080 1px solid; width: 650px; border-collapse: collapse; word-wrap: break-word; margin-bottom: 10px; float: left; table-layout: fixed; font-size: 12px; word-break: break-all; border-top: #808080 1px solid; border-right: #808080 1px solid">
        <tbody>
            <tr>
                <td style="width: 41px; color: red">姓名</td>
                <td style="width: 71px"><?php echo $row[name];?></td>
                <td style="width: 41px; color: red">性别</td>
                <td style="width: 53px"><?php echo $row[sex];?></td>
                <td style="width: 73px; color: red">电子邮箱</td>
                <td style="width: 129px"><?php echo $row[email];?></td>
                <td style="width: 70px; color: red">联系电话</td>
                <td><?php echo $row[telnumber];?><input type="checkbox" style="float: right" name="delid[]" value="<?php echo $row[id]?>" /></td>
            </tr>
            <tr>
                <td style="width: 41px; color: red">标题</td>
                <td colspan="4"><?php echo $row[title];?></td>
                <td style="width: 129px; color: red">留言日期</td>
                <td colspan="2"><?php echo $row[time];?></td>
            </tr>
            <tr>
                <td colspan="8"><?php echo $row[content];?></td>
            </tr>
        </tbody>
    </table>
    <?php  }
echo "</form>";
}
else {
    echo "对不起您无权访问该页！！！" ;
  }
?>
</form>

看第二张截图我的留言管理菜单是直接放在管理菜单下面的
下面告诉大家创建的方法
管理-》站点构建-》菜单，右边选择导航（它的内容就是控制左侧的管理菜单）
新建菜单 留言管理，路径输入刚才留言管理那篇文章的节点类似：node/21
上级菜单选项选择 管理。

至此基于drupal的留言板模块制作完成，希望大家喜欢

感谢我的朋友小吉、jackson

附件大小
tijiao.jpg28.98 KB
guanli.JPG106.83 KB
biao.JPG41.34 KB
ls_meaasge.zip1.89 KB
includes.zip798 个字节
‹ 求过滤模块~ 有没有什么方法或模块能实现下面的应用？ ›
»
由 ttian20 在 星期二, 2009-06-30 16:49 发表。

说两句： 虽然条条大路通罗马，但如果你用了drupal,

说两句：

虽然条条大路通罗马，但如果你用了drupal, 就该在drupal的框架下做开发。

1. drupal有自己的数据库layer, 所以不用自己写代码去连接数据库.

2. 用drupal_get_form生成表单。

3. 在jquery框架下开发js

======================================
http://universalsoft.org (环球软件, 专注drupal开发)
http://aymoo.cn (blog)

»