深入PHP许愿墙模块功能分析

许愿墙模块功能分析
一，热点技术
1，实现可拖放DOM技术移动许愿字条
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允许浏览者自己定义页面中各元素的位置，并且，只需要用鼠标选中要移动的部分，把它拖到新的位置上，就可以定制页面。

DOM是Document Object Model文档对象模型的缩写，是一种与浏览器、平台、语言无关的接口，使用户可以访问页面其他的标准组件。DOM是以层次结构组织的节点或信息片段的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档的构造层次结构，然后才能做任何工作。由于它基于信息层次，因此DOM被认为基于树或基于对象。
具体实现时以下时间会被触发：
(1)moveStart
(2)Move
(3)moveEnd
当按下鼠标左键，开始移动鼠标时，在被拖动的许愿条上就会触发moveStart事件。用户可以使用moveStart事件处理函数在拖动开始时允许javaScript代码。当moveStart事件被触发后，Move时间会一直触发，只要对象还在被拖动，就一直触发。当拖动停止时，则触发moveEnd事件。
echo输出许愿条样式布局，代码如下：

复制代码 代码如下:

echo "
 <DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z."' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>      
  <TABLE cellSpacing=0 cellPadding=0 border=0>
   <TBODY>
    <TR>
     <TD>
       <DIV class=shead>
         <span class='Num' >爱墙编号:".$id."   ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
      </DIV>
     </TD>
    </TR>
    <TR>
     <TD>
       <DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
        <span id='PickerSample'>".$Picker."</span><br>    <span id='ContentSample'>$content</span>
      </DIV>
       <DIV class=sbody >
       <H2><span id='authorSample'>".$author."</span></H2>
      </DIV>
      <DIV class=sbot align='right'>
       <br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福气:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' target='_blank'>图片
     document.getElementById('txt_hyan').value = getVcode; 
    }else{
     document.getElementById("messageImg").src="images/cuo.gif"; //验证码错误，输出显示错误图片
     document.getElementById('checkcode').focus();
     return false;
    }
   }
  }
 }
 xmlhttp.send(null);
}

codeChk.php验证码检验页面

复制代码 代码如下:

<?php 
 session_start();
 require 'secoder.class.php';  //先把类包含进来，实际路径根据实际情况进行修改。 
 $vcode = new YL_Security_Secoder();      //实例化一个对象 
 $code = $_GET['code'];
 echo $vcode->check($code);  //check($code)函数返回的是true或者false，返回true时，codeChk.php页面输出的是1，否则没有输出    
?>

secoder.class.php验证码类中的check($code)函数

复制代码 代码如下:

public static function check($code) {
 isset($_SESSION) || session_start();
 // 验证码不能为空
 if(empty($code) || empty($_SESSION[self::$seKey])) {
  return false;

 }
 // session 过期
 if(time() - $_SESSION[self::$seKey]['time'] > self::$expire) {
  unset($_SESSION[self::$seKey]);
  return false;
 }
 if(strtoupper($code) == $_SESSION[self::$seKey]['code']) {  //不区分大小写比较
  return true;  
 }
 return false;

}

5,定义生成指定范围的许愿条随机算法
本模块需要生成一个指定范围的随机算法，用来显示许愿字条的显示位置，以使每次展示在读者眼前的都是不同的许愿字条。本模块主要应用rand()函数控制许愿墙纸的显示位置。
rand()函数用于产生一个随机整数
语法：rand(min,max)
参数：min,max可选，规定随机数产生的范围
如果没有提供可选参数 min 和 max，rand() 返回 0 到 RAND_MAX 之间的伪随机整数。在某些平台下（例如 Windows）RAND_MAX 只有 32768。如果需要的范围大于 32768，那么指定 min 和 max 参数就可以生成大于 RAND_MAX 的数了，或者考虑用 mt_rand() 来替代它。
mt_rand() 使用 Mersenne Twister 算法返回随机整数
语法：mt_rand(min,max)
如果没有提供可选参数 min 和 max，mt_rand() 返回 0 到 RAND_MAX 之间的伪随机数。很多老的libc的随机数发生器具有一些不确定和未知的特性而且很慢。php的rand()函数默认使用libc随机数发生器。mt_rand()函数是非正式用来替换它的。该函数用了Mersenne Twister中已知的特性作为随机数发生器，它可以产生随机数值的平均速度比libc提供的rand()快四倍。
随机显示许愿墙纸的关键代码如下：

1. $T=rand(320,520); 
2. $L=rand(5,790);  
3. $Z=$page_count; 
4. $Z = $Z - 3; 
5. echo " 
6.  <DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z.";' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>       
7.   <TABLE cellSpacing=0 cellPadding=0 border=0> 
8.    <TBODY> 
9.     <TR> 
10.      <TD> 
11.        <DIV class=shead> 
12.          <span class='Num' >爱墙编号:".$id."   ".$sendtime." <a onclick='myClose(".$id.")'>×</span> 
13.       </DIV> 
14.      </TD> 
15.     </TR> 
16.     <TR> 
17.      <TD> 
18.        <DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'> 
19.         <span id='PickerSample'>".$Picker."</span><br>    <span id='ContentSample'>$content</span> 
20.       </DIV> 
21.        <DIV class=sbody > 
22.        <H2><span id='authorSample'>".$author."</span></H2> 
23.       </DIV> 
24.       <DIV class=sbot align='right'> 
25.        <br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福气:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='单击与他/她交谈' target='_blank'>".$QQ."</a></span> 
26.       </DIV> 
27.      </TD> 
28.     </TR> 
29.    </TBODY> 
30.   </TABLE> 
31.  </DIV>"; 

6,解析IP获取用户所在城市
在PHP中，使用PHP预定义变量$_SERVER['REMOTE_ADDR']获取客户端的IP地址。然后将IP按照通用的算法将其解析成一个数字串(每个城市都有一个对应的数字串)，通过这个数字串来确定查询用户所在的城市名称。
在数据库中，IP区域的存储时一个数字串，并非实际的IP地址，这时就需要对客户端或服务器端的IP转换成指定数字串的格式，从而进行地域信息的查询。

复制代码 代码如下:

$ip=getenv('REMOTE_ADDR');   //获取客户端IP地址
/********解释IP区域***********/
$cip=cip($ip);
$csql="select * from tb_ip where (ip1<'".$cip."' and  ip2>'".$cip."') or (ip1=ip2 and ip2='".$cip."')";
//执行查询
$res = $DB->fetch_one_array($csql);
$cip1=$res['country'];
if($cip1==""){
 $cip1="IP不详";
}

二,实现过程
1，双击许愿字条，该字条置顶显示，并屏蔽整个页面
当用户双击许愿字条后，该许愿字条将置顶显示，同时屏蔽整个页面，以达到突出显示的效果。
(1)控制DIV突显效果，首页设置一个隐藏的DIV，ID名称为“shadeDiv”，代码如下
<div style="display:none;" id="shadeDiv" onclick="Hide();"></div>
(2)应用Javascript脚本自定义一个Hide()函数，通过设置DIV的显示属性display设置为空，从而隐藏DIV，代码如下：

复制代码 代码如下:

function Hide(){
 document.getElementById("shadeDiv").style.display = "none";
 iLayerMaxNum = iLayerMaxNum+2;
}

(3)在CSS样式表中设置隐藏DIV的样式。代码如下：
#shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE浏览器下滤镜效果，兼容性不好
(4)接下来，双击已经设计好的许愿字条DIV图层，代码如下：
ondblclick=Show(".$id.",'shadeDiv')
(5)自定义一个函数show()，用来控制背景的效果。

复制代码 代码如下:

function Show(n,divName){
 document.getElementById(n).style.zIndex = iLayerMaxNum+1;
 document.getElementById(divName).style.display = "block";
 document.getElementById(divName).style.zIndex = iLayerMaxNum;
 var size = getPageSize(); //设置隐藏区域的面积，这里是获取许愿墙显示区域的面积，即本例中设置滤镜的面积
 document.getElementById(divName).style.width = size[0]+"px"; 
 document.getElementById(divName).style.height = size[1]+"px";
}

(6)设置纸条显示的区域,这里得到的仅仅是数字

复制代码 代码如下:

function getPageSize(){
 var w =document.body.clientWidth;
 var h= document.body.clientHeight;
 arrayPageSize = new Array(w,h);
 return arrayPageSize;
}

2,应用Jpgraph图形类库实现3D饼形图表按地域统计分析许愿比率,实现过程如下：
(1)应用浮动框架技术实现不同类别下的地域统计分析结果，每一个黄颜色的版块分别是一个浮动框架.浮动框架布局的代码如下：

复制代码 代码如下:

<!----------------------------应用3D饼形图按地域统计分析”全部“许愿的比率---------------------------->
<div align="center">
    <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_all.php" style="HEIGHT:290px;VISIBILITY:inherit;WIDTH:1004px;Z-INDEX:3">
    </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”亲情类“许愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_relative.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
    </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”爱情类“许愿的比率----------------------------> 
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_love.php"    style="HEIGHT:90px;VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX: 3">
    </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”友情类“许愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_friend.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
 </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”自己类“许愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_self.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
 </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”奥运会类“许愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_olympic.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
 </IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”汶川类“许愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_wch.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
 </IFRAME>
</div>

(2)应用3D饼形图动态统计分析全部区域的许愿比率
首先应用Jpgraph类库实现图表分析，需要应用include语句引用jpgraph.php文件。代码如下：

复制代码 代码如下:

<?php
 include("global.php");  //链接数据库源文件
 include("jpgraph/jpgraph.php");  //引用图表分析类文件
?>

绘制饼形图需要引用jpgraph_pie.php文件。绘制3D效果的饼形图需要创建PiePlot3D类对象，PiePlot3D类在Jpgraph_pie3d.php中定义，需要应用include语句调用该文件。代码如下：

复制代码 代码如下:

<?php
 include("jpgraph/jpgraph_pie.php");  //引用饼形图类文件
 include_once("jpgraph/jpgraph_pie3d.php");  //引用3D饼图PiePlot3D对象所在的类文件
?>

创建graph对象，生成一个990x276像素大小的画布，设置统计图所在画布的位置以及画布的阴影。设置标题的字体以及图例的字体。设置饼形图所在画布的位置以及半径，将绘制的3D饼形图添加到图像中。

复制代码 代码如下:

<?php
$graph = new PieGraph(990,276); //创建画布
$graph->SetShadow(); //设置阴影
$graph->title->Set("应用3D饼形图统计分析全部区域许愿比率"); //设置标题名称
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题的字体加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //设置饼形图文字的字体
$size=0.5; //设置饼形图的半径
/***********************统计全部许愿比率*************************/
//创建饼形图对象
$p0= new PiePlot3D($arraynum0); //创建饼形图对象
$p0->SetLegends($arraycip0); 
$p0->SetSize($size); //设置饼形图的大小
$p0->SetCenter(0.45,0.48); //设置饼形图的坐标位置
$p0->SetLegends($arraycip0); //设置城市名称
$p0->value->SetFont(FF_FONT0); //设置字体
$p0->title->SetFont(FF_SIMSUN,FS_BOLD);  //设置标题字体加粗
/*************************************************************/
$graph->Add($p0);  //添加3D饼形图到图像中
$graph->Stroke(); //输出图像
?>

(3)应用3D饼形图动态统计分析”亲情类“的许愿比率。其实现方法与获取全部的许愿比率的方法基本类似，不同的是这里在检索亲情类许愿人数时设置了where查询条件。另外在设置饼形图的半径和位置上稍微有变化。

复制代码 代码如下:

<?php
include("global.php"); //链接数据库文件
include ("jpgraph/jpgraph.php"); //引用图表分析类文件
include ("jpgraph/jpgraph_pie.php"); //引用饼形图类文件
include_once ("jpgraph/jpgraph_pie3d.php");  //引用3D饼图PiePlot3D对象所在的类文件
/***********************统计亲情类别*************************/
$sql2="select distinct(count(cip)) as num,cip from tb_wishes where wishsort='亲情' group by cip ";
$DB->query($sql2);  //动态统计亲情类许愿
$res2=$DB->get_rows_array($sql2); //生成二维数组
$rows_count2=count($res2);  //统计二维数组的数量
$arraynum2=array(); //声明城市”亲情类“许愿总数数组
$arraycip2=array();  //声明”亲情类“城市名称数组
//解析数组
for($k=0;$k<$rows_count2;$k++){
 array_push($arraynum2,$res2[$k][num]); //输出城市的许愿数量
 array_push($arraycip2,$res2[$k][cip]);  //输出城市名称
}
/*************************************************************/
//创建画布
$graph = new PieGraph(320,246);  //创建画布
$graph->SetShadow(); //设置阴影
$graph->title->Set("统计分析全部区域的[ 亲情类 ] 许愿比率");  //设置标题名称
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题的字体加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //设置饼形图文字的字体
$size=0.3;  //设置饼形图的半径
/***********************统计亲情许愿比率*************************/
$p= new PiePlot3D($arraynum2); //创建饼形图对象
$p->SetLegends($arraycip2);  //设置城市名称
$p->SetSize($size);  //设置饼形图的大小
$p->SetCenter(0.45,0.55); //设置饼形图的坐标位置
$p->value->SetFont(FF_FONT0); //设置字体
$p->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题字体加粗
/*************************************************************/
$graph->Add($p); //添加3D饼形图到图像中
$graph->Stroke(); //输出图像
?>

3,许愿墙列表,许愿墙字条高级搜索功能的实现
为了便于访客能更清晰地查看各种不同类别的许愿字条，本模块设计了爱墙列表和许愿字条高级搜索功能。其中，爱墙列表时在默认状态下检索全部的许愿字条，而高级搜索功能是按照访客设置的一定的查询条件来检索与之匹配的许愿字条。
设计爱墙列表及许愿字条高级搜索的表单元素如下：

1. <table width="1004" height="25" border="0" cellpadding="0" cellspacing="0"> 
2.  <form name="form" method="get" action=""> 
3.   <tr> 
4.    <td align="center" bgcolor="#339933">请输入查询条件： 
5.     <input type="text" name="content1" size="30" class="inputs">  
6.     <select name="select"> 
7.     <option value="奥运会">奥运会</option> 
8.     <option value="汶川">汶川</option> 
9.     <option value="爱情">爱情</option> 
10.     <option value="亲情">亲情</option> 
11.     <option value="友情">友情</option> 
12.     <option value="自己">自己</option> 
13.     <option value="全部" selected="selected">全部</option> 
14.     </select> 
15.     <input type="submit" name="submit" value="检索许愿" class="btn_search"> 
16.      (支持多条件查询，如：爱墙号、许愿人、许愿内容等)  
17.    </td> 
18.        </tr> 
19.     </form> 
20. </table> 

4,许愿墙显示效果如图：