跳到主要內容

於Xoops佈景中製作一個profile模組註冊頁面的防機器人機制(js+php+ajax)-教學撰寫:徐嘉裕Neil hsu

相信用過Xoops架站的朋友最怕就是遇到機器人了，每天都來註冊產生一大推的垃圾帳號，刪到手都酸了還刪不完，所想以說在佈景中寫一個js+php+ajax的防機器人驗證機制來阻擋垃圾帳號的建立，解決註冊機器人出亂的問題。

範例網站：http://demoweb.neodw.com/themesdemo/modules/profile/register.php



防機器運作方式是這樣，先由js建立10位數的隨機碼，然後透過js建構一個name='verification'欄位取得隨機碼值，另外再透過ajax吧隨機碼值存入$_SESSION['profile_post']中，當user送出表單時所建構的欄位name='verification'會吧數值post到註冊表單的第二頁，然後php會讀取ajax的$_SESSION['profile_post']數值與post過來的$verification核對，如果數值相符則進行後續的註冊流程，若不相符或是$_SESSION['profile_post']為空值則返回首頁顯示【本站不歡迎機器人註冊】的文字，所以就算機器人使用的瀏覽器沒啟用javascript也一樣無法送出註冊會員表單，在第二頁就會被阻擋，資料不會被寫入資料庫中。




製作註冊表單防機器人方法如下(請先安裝profile會員管理模組)：

 1、於Xoops佈景根目錄中建立一個js資料夾(佈景最頂層目錄)，然後建立一個anti-robot.js檔，並貼入以下的code



/*==========註冊頁面防機器人設置==============*/

/*================產生亂數==================*/

var chars = ['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'];


function generateMixed(n) {

var res = "";

for(var i = 0; i < n ; i ++) {

var id = Math.ceil(Math.random()*35);

res += chars[id];

}

return res;

}

var $randomvalue=generateMixed(10);


$(window).load(function() {


$('#profile-form-regform .odd .formButton').attr('disabled', true);

$('#regform #step').attr('disabled', true);

$("#profile-form-regform .odd .formButton").before("<input type='checkbox' id='notarobot' /><label>"+$notarobot+"</label><br /><br />");

$("#profile-form-regform .odd .formButton").after("<input class='verification' type='hidden' disabled='disabled' name='verification' value='"+$randomvalue+"'>");


$("#notarobot").click(function(){

$('#notarobot').attr('disabled', true);

$('#regform #step').attr('disabled', false);

$('.verification').attr('disabled', false);

$('#profile-form-regform .odd .formButton').attr('disabled', false);


$.ajax({

url: $ajaxurl+'/ajax.php',

type: 'POST',

data: {id: '1',random: $randomvalue},


})

});


2、於Xoops樣板<head></head>之間貼上以下的引入js語法連結及代入變數

<{*防機器人*}>

<{if $xoops_dirname eq profile}>

<script>

var $ajaxurl="<{$xoops_imageurl}>program";

var $notarobot="<{$smarty.const._MD_IMNOTAROBOT}>";

</script>

<script type="text/javascript" src="<{$xoops_imageurl}>js/anti-robot.js"></script>

<{/if}>

3、於Xoops佈景根目錄中建立一個program資料夾(佈景最頂層目錄)，於program資料夾中建立一個ajax.php檔，用筆記本打開，貼入一下的code


<?php

include "../../../mainfile.php";

$random=(empty($_REQUEST['random']))?"":$_REQUEST['random'];

$id=(empty($_REQUEST['id']))?"":$_REQUEST['id'];

if($id==1){

$_SESSION['profile_post']["random"]=$random;

}

?>

4、於Xoops佈景的language資料夾中找到tchinese_utf8/main.php，用筆記本打開，貼上以下的code：


/*===註冊表單防機器人========*/

define('_MD_NOTWELCOME','機器人請勿註冊');

define('_MD_IMNOTAROBOT','我不是機器人(請勾選)');


5、於xoops佈景根目錄中建立一個modules資料夾，然後在其中在建立一個profile資料夾，於profile資料夾中建立一個profile_form.tpl檔，用筆記本打開並貼上以下的code

<{php}>

$step=$_POST['step'];

$verification=$_POST['verification'];

if($step==1 and ($verification!=$_SESSION['profile_post']["random"] or $_SESSION['profile_post']["random"]==NULL)){

redirect_header(XOOPS_URL,0 , _MD_NOTWELCOME);

}

<{/php}>


<{$xoForm.javascript}>

<form id="<{$xoForm.name}>" name="<{$xoForm.name}>" action="<{$xoForm.action}>" method="<{$xoForm.method}>" <{$xoForm.extra}> >

<table class="table table-striped profile-form" id="profile-form-<{$xoForm.name}>">

<{foreach item=element from=$xoForm.elements}>

<{if !$element.hidden}>

<tr>

<td class="head">

<div class='xoops-form-element-caption<{if $element.required}>-required<{/if}>'>

<span class='caption-text'><{$element.caption}></span>

<span class='caption-marker'>*</span>

</div>

<{if $element.description != ""}>

<div class='xoops-form-element-help'><{$element.description}></div>

<{/if}>

</td>

<td class="<{cycle values='odd, even'}>">

<{$element.body}>

</td>

</tr>

<{/if}>

<{/foreach}>

</table>

<{foreach item=element from=$xoForm.elements}>

<{if $element.hidden}>

<{$element.body}>

<{/if}>

<{/foreach}>

</form>


6、清除xoops暫存檔，就完成註冊表單防機器人的建置工作了!

暫存檔清除路徑

xoops_data\caches\smarty_cache
xoops_data\caches\smarty_compile
xoops_data\caches\xoops_cache

 備註：neilambilight2.5版後的佈景都會配置此項功能
教學撰寫：徐嘉裕 neil hsu



標籤：

留言

張貼留言

這個網誌中的熱門文章

好用的windows備份檔案dos指令XCOPY-教學撰寫:徐嘉裕Neil hsu

要快速的備份某個硬碟全部資料到備份硬碟中，雖然是可以用windows內建的備份與還原，但如果重灌windows可會有key不同而無法還原的問題，還要改一堆設定煩死了，直接用dos指令XCOPY來做檔案的複製就很快了，資料也不會丟失，好朋友可以參考看看!! 首先開啟windows所有程式->附屬應用程式->開啟命令提示字元! 然後輸入以下指令 XCOPY C:\xxx   F:\xxx /s 藍字的 C:\xxx  為複製檔案來源位置例如要複製整個C槽就輸入 C:\ 綠色的   F:\xxx 為複製目的位置，例如要放到F槽的備份資料夾，就輸入  F:\ 備份 紅字的 S 為複製類型參數，可以自行修改為以下的參數設定： ================================================================= /A    只複製設定成保存屬性的檔案，不要改變屬性的設定。 /M    只複製設定成保存屬性的檔案，並清除保存屬性。 /D:m-d-y  複製指定日期當天或之後變更的檔案。如果沒給日期，只複製那些來源檔案日期比目的檔案日期為新的檔案。 /EXCLUDE:file1[+file2][+file3]...         指定檔案清單字串。每個字串應在不同行。如果有字串對應到要進行複製的檔案絕         對路徑的任何部分，這個檔案會被排除複製。例如，指定字串         \obj\ 或 .obj 的話，會排除所有在 obj 目錄下副檔名是.obj 的檔案複製。 /P    在建立每個目的檔案時顯示提示。 /S    複製每個目錄及其包含的子目錄，不複製空目錄。 /E    複製每個目錄及其包含的子目錄，也複製空目錄。/S 與 /E相同，能夠用來修改 /T。 /V   ...
3 則留言
閱讀完整內容

jQuery取得下拉選單selected中數值與內容的方法

假設選單狀態為： <select id='selectname '> <option value='v1' data-id="d1">選單A</option> <option value='v2' data-id="d2">選單B</option> <option value='v3' data-id="d3">選單C</option> </select> 以jQuery取得選單數值與內容方法如下： 1、取得下拉選單 value 數值的方法 $selectname=$('#selectname').val(); alert($selectname); //顯示選單中 selected 狀態的value數值v1 or  v2  or  v3。 2、取得下拉選單中 data-id 數值的方法 $data-id= $(this).find(':selected').attr('data-id'); alert($data-id); //顯示選單中 selected 狀態的data-id數值d1 or  d2 or  d3。 3、取得下拉選單中 文字 的方法 $selecttext=$(this).find(':selected').text(); alert($selecttext); //顯示選單中 selected 狀態的文字內容，如選單A or  選單B or 選單C。 教學撰寫：徐嘉裕 Neil hsu
張貼留言
閱讀完整內容

PhpSpreadsheet電子表格PHP匯出excel排版範例->Xoops-教學撰寫:徐嘉裕Neil hsu

在開發模組時如果要吧資料表內容匯出excel，最常用的套件因該就是PHPExcel，但是官網已經說明PHPExcel套件因升級不易只能支援到php5.6， 該物件已於2017年正式棄用，並於2019年永久歸檔 ，換句話說PHPExcel套件對於日後新版的excel格式均不支援，為保持程式在最新狀態只好棄用PHPExcel改使用PhpSpreadsheet電子表格套件，該套件也是能匯出excel，還能匯出LibreOffice Calc，感覺還不錯! 唯一比較麻煩的是使用PhpSpreadsheet要先佈署composer，如果沒佈署composer是沒辦法使用的，還好官方有釋出已經設定好的phpoffice套件可以直接引入使用，省了很多麻煩，使用PhpSpreadsheet方法如下： 1、先下載PhpSpreadsheet套件，我已經幫大家吧phpoffice一起打包上傳 https://drive.google.com/file/d/1jw73diWVjbcr1ycY-gtqM2cGfpLp1zS_/view?usp=sharing 下載回來後解壓縮吧phpoffice跟PhpSpreadsheet丟到Xoops模組的class資料夾中，未來如需更新PhpSpreadsheet可到官網下載最新版覆蓋即可 https://github.com/PHPOffice/PhpSpreadsheet 2、然後建立一個excel.php放在模組根目錄中 以下為編排excel表格常用的函數設定 include_once "header.php"; //先引入autoload.php檔 include_once XOOPS_ROOT_PATH.'/modules/ 模組ID /class/phpoffice/vendor/autoload.php'; use PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpreadsheet\IOFactory; $spreadsheet = new Spreadsheet(); //實體化Excel工作表 //設置電子表格元數據的操作： $spreadsheet->getProperties() ->setCreator...
張貼留言
閱讀完整內容