編輯“HDWiki/許愿墻插件開(kāi)發(fā)實(shí)例”

{{HDWiki top}}
本條目以本地[[HDwiki]][[IP地址]]： <nowiki>http://10.0.0.121/HDwiki/</nowiki>為例進(jìn)行講解

==具體步驟==
第一步：把[[插件]]開(kāi)發(fā)向?qū)?pluginwizard.php 這個(gè)工具放到HDwiki的根目錄下面。 

第二步：在[[瀏覽器]]里面輸入地址 ：<nowiki>http://10.0.0.121/HDwiki/pluginwizard.php</nowiki> ，然后Enter 確定，出現(xiàn)如下頁(yè)面：

[[Image:HDwish.jpg|800px]]

第三步：我們這里做的插件是許愿墻，給許愿墻取一個(gè)唯一標(biāo)識(shí)符（也就是英文名字）wish;
*插件名稱(chēng)：許愿墻。
*插件是否前臺(tái)可見(jiàn)：可見(jiàn) 
*插件簡(jiǎn)介：就是插件的說(shuō)明和描述，做什么用的等
*作者：就是你自己了，真實(shí)的名字和昵稱(chēng)都可
*作者主頁(yè)：就是你的個(gè)人主頁(yè)
*適用于HDwiki的版本：就是說(shuō)這個(gè)插件能夠在哪些HDwiki上正常運(yùn)行？，我們?cè)S愿墻插件依賴(lài)于[[jquery]]，但是HDwiki從4.0.3才開(kāi)始有jquery，所以這里填寫(xiě) 4.0.3,4.0.4 ,多個(gè)版本用逗號(hào)隔開(kāi)

填寫(xiě)完畢，如下圖所示：

[[Image:HDwish 1.jpg|800px]]

第四步：點(diǎn)擊生成，如下圖所示，插件生成成功！

[[Image:HDwish 2.jpg|800px]]

第五步：進(jìn)入HDwiki的plugins目錄，查看已經(jīng)生成的插件?？梢钥吹揭粋€(gè)叫做wish的目錄，這個(gè)就是自動(dòng)生成的插件。

[[Image:HDwish 3.jpg]]

第六步：進(jìn)入HDwiki的管理員后臺(tái)，點(diǎn)擊HDwiki插件下面的【全部推薦插件】->【本地已有插件】（4.0.3下是插件管理），如下圖所示：

[[Image:HDwish 4.jpg|800px]]

點(diǎn)擊【安裝此插件】即可。從這個(gè)時(shí)候開(kāi)始就可以編寫(xiě)插件代碼并測(cè)試插件了。

第七步：進(jìn)入HDwiki的plugins目錄下的子目錄wish，增加相關(guān)文件，編寫(xiě)相關(guān)[[代碼]]，如下圖所示：

wish這個(gè)目錄里面包括model、cotrol、view 三個(gè)子目錄，我們自己創(chuàng)建一個(gè)目錄images，放入需要用到的圖片和[[js]][[腳本]]等，并自己編寫(xiě)兩個(gè)htm頁(yè)面：allwish.htm 和postwish.htm
目錄文件列表如下圖：

[[Image:HDwish 5.jpg]]

==詳細(xì)解釋==
1、admin_wish.php :這個(gè)是后臺(tái)點(diǎn)擊插件的【管理】需要調(diào)用的，在許愿墻插件中用不到，所以可以不用修改。
<pre>
<?php

!defined('IN_HDwiki') && exit('Access Denied');

class control extends base{

        function control(& $get,& $post){
                $this->base( & $get,& $post);
                $this->load('plugin');
                $this->loadplugin('wish');
                $this->view->setlang('zh','back');
        }

/*在后臺(tái)點(diǎn)擊管理觸發(fā)的方法，因?yàn)樵S愿墻用不到后臺(tái)，所以這里是默認(rèn)的echo語(yǔ)句 */
        function dodefault() {
                echo 'nothing!';  
        }

}

?>
</pre>

2、wish.php ：前臺(tái)訪問(wèn)許愿墻插件需要用到的control，要編寫(xiě)代碼，我們需要改寫(xiě)下：
<pre>
<?php

!defined('IN_HDwiki') && exit('Access Denied');

class control extends base{

        function control(& $get,& $post){
                $this->base( & $get,& $post);
                $this->loadplugin('wish');
        }

/*顯示所有的許愿*/
        function dodefault(){
                $wishlist=$_ENV['wish']->get_list();
                $this->view->assign('wishlist',$wishlist);
                $this->view->display('file://plugins/wish/view/allwish');
        }
        
/*ajax提交許愿*/
        function dopost(){
                $receiver=empty($this->post['receiver'])?'自己'this->post['receiver'];
                $author=empty($this->post['author'])?'匿名'this->post['author'];
                $wish=$this->post['wish'];
                $_ENV['wish']->add_wish($receiver,$author,$wish);
                $this->message('1','',2);
        }

/*點(diǎn)擊我來(lái)貼一張顯示提交頁(yè)面*/
        function dowill(){
                $this->view->display('file://plugins/wish/view/postwish');
        }
        
}

?>
</pre>
3、wish.class.php ：許愿墻插件用到的model，要編寫(xiě)代碼，我們需要改寫(xiě)下：
<pre>
<?php

!defined('IN_HDwiki') && exit('Access Denied');

class wishmodel {

        var $db;
        var $base;

        function wishmodel(&$base) {
                $this->base = $base;
                $this->db = $base->db;
        }
        
/*這里是每個(gè)插件都需要編寫(xiě)的方法，安裝插件的時(shí)候會(huì)自動(dòng)調(diào)用此方法*/
        function install(){
                $sqls="CREATE TABLE wiki_wish (
                                `id` mediumint(8) unsigned NOT NULL auto_increment,
                                `wish` varchar(200) NOT NULL default '',
                                `receiver` varchar(15) NOT NULL default '',
                                `author` varchar(15) NOT NULL default '',
                                `style` int(2) NOT NULL default '1',
                                `time` int(10) unsigned NOT NULL default '0',
                                PRIMARY KEY  (`id`),
                                KEY `time` (`time`)) TYPE=MyISAM DEFAULT CHARSET=".DB_CHARSET.";";
                $this->db->query($sqls); //創(chuàng)建許愿的數(shù)據(jù)表
                $plugin=array(
                        'name'=>'許愿墻',
                        'identifier'=>'wish',
                        'description'=>'每個(gè)人都有很多美好的愿望，許愿墻，一個(gè)你可以隨意許愿的地方，
這里人人平等，朋友之間也可以互相祝福！',
                        'datatables'=>'',
                        'type'=>'1',
                        'copyright'=>'lovewiki',
                        'homepage'=>'http://hi.baidu.com/songdenggao',
                        'version'=>'1.0',
                        'suit'=>'4.0.3,4.0.4',
                        'modules'=>''
                );
                $plugin['vars']=array();
                $plugin['hooks']=array();
                return $plugin;
        }


/*這里是每個(gè)插件都需要編寫(xiě)的方法，卸載插件的時(shí)候會(huì)自動(dòng)調(diào)用此方法*/
        function uninstall(){
                $this->db->query("DROP TABLE IF EXISTS wiki_wish");
        }
        
        
/*自己編寫(xiě)的方法，插入一個(gè)許愿到數(shù)據(jù)庫(kù)表中*/
        function add_wish($receiver,$author,$wish){
                $style=rand(1,8);
                $this->db->query("INSERT INTO  ".DB_TABLEPRE."wish 
(receiver,author,wish,style,time) 
VALUES ('$receiver','$author','$wish',$style,'".$this->base->time."') ");
        }
        
/*自己編寫(xiě)的方法，從數(shù)據(jù)庫(kù)讀取許愿數(shù)據(jù)*/
        function get_list($start=0,$limit=100){
                $wishlist=array();
                $query=$this->db->query
("SELECT *  FROM ".DB_TABLEPRE."wish ORDER BY time DESC limit $start,$limit ");
                while($wish=$this->db->fetch_array($query)){
                        $wish['time']=$this->base->date($wish['time']);
                        $wish['left']=rand(1,1024);
                        $wish['top']=rand(1,800);
                        $wishlist[]=$wish;
                }
                return $wishlist;
        }

}        

?>
</pre>
4、allwish.htm：顯示所有許愿用到的view，也就是許愿墻的顯示頁(yè)面，要編寫(xiě)代碼，最終代碼如下：
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>許愿/祝福墻 - {$setting['site_name']}</title>
<meta http-equiv="Content-Type" content="text/html; charset={WIKI_CHARSET}" />
<meta name="author" content="lovewiki" />
<meta name="description" content="愛(ài)情墻,祝福墻,許愿墻,愿望墻,wish wall,jQuery wish wall " />
<meta name="keywords" content="愛(ài)情墻,祝福墻,許愿墻,愿望墻,wish wall,jQuery wish wall " />
<link rel="stylesheet" type="text/css" href="plugins/wish/images/html.css" />
<link rel="stylesheet" type="text/css" href="plugins/wish/images/layout.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript">
        var zindex=0;
        $(function() {
                $(".wall").draggable({
                        start: function(e, ui) { 
                        var        curdiv=$(this);
                        $(".wall").each(function (index, element) { 
                                  var index=parseInt($(this).css('z-index'));
                                  if(index>=zindex){
                                          zindex=index+1;
                                  }
                        });
                        curdiv.css('z-index',zindex);
                 }
                });
        });
        $(document).ready(function(){         
                $("span[class=x]").click(function(){
                        $(this).parents(".wall").hide();
                }); 
        });
</script>
</head>

<body>

<div id="top_pad">
        <span style="float: right; padding-right: 10px"><input type="button" value="我來(lái)貼一張>>" 

class="button" onclick='location.href="{$setting[seo_prefix]}plugin-wish-wish-will";' /></span>
        <span style="font-size:large; font-weight: bold">許愿墻</span>
        <span style="font-size: 11px">(<a href="{$setting['site_url']}">回首頁(yè)</a>)</span>
</div>

{loop $wishlist $index $wish}
<div class="wall" style="z-index:{$index};left:{$wish['left']}
px;top:{$wish['top']}px; opacity: 1;">
       
 <div class="top-{$wish['style']}"><span class="x">×</span>第[{$wish['id']}]條  
{$wish['time']}</div>
        <div class="mid-{$wish['style']}"><span class="wt"><b>{$wish['receiver']}</b>：
</span><span>{$wish['wish']}</span></div>
        <div class="bot-{$wish['style']}"><img src="plugins/wish/images/{$wish['style']}.gif"  />
<span class="inline">{$wish['author']}</span></div>
</div>
{/loop}

</body>
</html>
</pre>
5、postwish.htm：提交許愿用到的view，也就是發(fā)布許愿用到的頁(yè)面，需要編寫(xiě)代碼，最終代碼如下：
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>我來(lái)貼祝福，我來(lái)貼愿望 - {$setting['site_name']}</title>
<meta http-equiv="Content-Type" content="text/html; charset={WIKI_CHARSET}" />
<meta name="author" content="lovewiki" />
<meta name="description" content="愛(ài)情墻,祝福墻,許愿墻,愿望墻,wish wall,jQuery wish wall " />
<meta name="keywords" content="愛(ài)情墻,祝福墻,許愿墻,愿望墻,wish wall,jQuery wish wall " />
<link rel="stylesheet" type="text/css" href="plugins/wish/images/html.css" />
<link rel="stylesheet" type="text/css" href="plugins/wish/images/layout.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function mypost(){
        var        wish=$('#wish').val();
        if(wish.length>100 || wish.length==0 ){
                alert('祝福內(nèi)容必須介于1～100字之間！');
                return;
        }
        $.ajax({
                url: "index.php?plugin-wish-wish-post",
                data: {receiver('#receiver').val(),author('#author').val(),wish:wish},
                cache: false,
                dataType: "xml",
                type:"post",
                beforeSend:function(){
                        $('#success').html('');
               $('#waiting').html('<img src="plugins/wish/images/loading.gif" alt="osting..." /> 
正在發(fā)布，請(qǐng)稍等...');
                },
                success: function(xml){
                        var        message=xml.lastChild.firstChild.nodeValue;
                        if(message=='1'){
                          $('#waiting').html('');
                          $('#success').html('<img src="plugins/wish/images/ok.gif" alt="OK" /> 

OK,貼好了，快去look一下吧');
                        }else{
                                alert('發(fā)布失敗！');
                        }
                }
        });
}
</script>
</head>
<body>
<form action style="margin-top: 80px">
        <div class="pad_box">
          <span>我的祝福 （<a href="{$setting['site_url']}">{$setting['site_name']}</a>）</span>
                
<table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                                <td>貼給？</td>
                                <td><input type="text" maxlength="30" size="40" id="receiver" 

name="receiver" value="自己" /></td>
                        </tr>
                        <tr>
                          <td>你是？</td>
                          <td><input type="text" maxlength="20" size="40" id="author" name="author" 

value="匿名" /></td>
                        </tr>
                        <tr>
                           <td>Wish：<br />(<=100字)</td>
                           <td><textarea id="wish" name="wish" cols="50" rows="4"></textarea></td>
                        </tr>
                        <tr>
                                <td colspan="2" style="text-align: center">
                                <input type="button" class="button" value="我貼!" />
                                <input type="reset"  class="button" value="重來(lái)？" />
                                <input type="button" class="button" value="去看看" />
                                <input type="button" class="button" value="回首頁(yè)" /></td>
                        </tr>
                        <tr>
                                <td colspan="2" style="text-align: center">
                                        <span id="waiting"></span>
                                        <span id="success"></span>
                                </td>
                        </tr>
                </table>
        </div>
</form>
</body>
</html>
</pre>
第八步：編寫(xiě)完代碼并測(cè)試通過(guò)后發(fā)布到到插件共享平臺(tái)。首先進(jìn)入后臺(tái)管理中心，查看【已安裝插件】。如下圖，可以看到許愿墻插件：

[[Image:HDwish 6.jpg]]

然后點(diǎn)擊【分享】，如下圖，填寫(xiě)完所有的信息，然后【確定】即可完成分享。

[[Image:HDwish 7.jpg|800px]]

分享后的插件在HDwiki開(kāi)源官方站上有展示，默認(rèn)的是顯示為【未審核】，審核通過(guò)后，所有的HDwiki管理員都可以在后臺(tái)【全部推薦插件】看到你分享的插件。

==參考來(lái)源==
http://kaiyuan.hudong.com/

{{HDWIKI}}

[[category:HDWiki|X]]