2009年12月7日

Captcha圖形驗證 - Dreamweaver外掛篇(PHP篇)


為防範有心人士利用網路機器人程式來猜測帳號與密碼,現在各大網站的會員登入系統,大多會多加一道「圖型驗證碼」的檢查,用以驗明正身,若今天我們也想為我們自己的網站也新增一個圖型驗證碼功能會很困難嗎?其實不會,因為Dreamweaver有外掛可以幫我們完成大部份的工作。

00.jpg

首先開起瀏覽器,然後輸入以下網址http://www.tecnorama.org/
01.jpg

點選左方的「DW Extensions」連結。
02.jpg

點選「PHP Captcha Image」中的「Read more」連結。
03.jpg

網站也有提供使用教學,有興趣的朋友可以看一下。
04.jpg

點選下方「You can download latest version fllowing this link」連結。
05.jpg

下載並儲存「captcha_image_1_0_2.zip」這個壓縮檔
06.jpg

下載完成後解壓縮檔案
07.jpg

解壓縮後會得到一個名為「captcha_image_1_0_2」資料夾
08.jpg

進入「captcha_image_1_0_2」資料夾後會看到一個名為「captcha_image.mxp」的Dreamweaver外掛安裝檔,跟一個名為「verdana.ttf」的字型檔
09.jpg

執行「captcha_image.mxp」後開啟「Dreamweaver的外掛管理程式」,然後按一下「接受」,進行「captcha_image」外掛的安裝
10.jpg

安裝完成後會,你會看到「Dreamweaver的外掛管理程式」中多出了一個名為「PHP Captcha Image」的外掛
11.jpg

因為再來的程式會用到「verdana.ttf」這個字型檔
12.jpg

所以先將它複製到「網站根目錄」底下
13.jpg

因為「圖型驗證」中的程式會用到PHP中的GD函式」,所以要先確定GD函式是否開啟」;首先請先確定Dreamweaver的網站定義已設定完成,若不會設定請參考YOGO的 Dreamweaver網站定義 教學;再來用Dreamweaver開啟一個新的php檔案 ,並輸入下方程式碼:

<?php
phpinfo();
?>


然後存檔命命名為index.php
14.jpg

接著開啟瀏覽器,然後在網址列的地方輸入http://localhost/
15.jpg

再來我們找到PHP資訊中的「Loaded Configuration File」欄位,它所指的是我們目前PHP環境中所讀取的php.in位置」,由此範例中我們可以知道目前PHP環境中所讀取的php.in位置是 C:\WINDOWS\php.ini」
16.jpg

再來開啟 「C:\WINDOWS\php.ini」 (請依個人的 「Loaded Configuration File 」所指定的位置開啟php.ini檔

17.jpg
然後找到「extension=php_gd2.dll」這一行字,若前方有;號請把它移除,若找不到這一行請自己加上去,改好之後存檔並重啟web server
18.jpg

接著開啟瀏覽器,然後在網址列的地方輸入http://localhost/












若php的環境資訊中有出現gd函式」的項目,表示gd函式」已經成功啟用了












再來 用Dreamweaver開啟一個新的php檔案






















然後在「插入」面版中選擇「表單」


















然後點選「表單」選項,在檔案內插入表單














並在表單內輸入以下文字「請輸入驗證碼:」











點選「文字欄位」選項














「輸入標籤輔助功能屬性」中的 ID」欄位填入「captcha」,然後按確定」








請確認文字欄位的部份是否為「Captcha、字元寬度欄位的部份是否「10」、最多字元數欄位的部份是否「5」













點選「按鈕」選項













「輸入標籤輔助功能屬性」頁面中, 直接按確定」








將上方的「設計師」模式下拉改選「傳統」模式
30.jpg

開啟「伺服器行為」-->「+」-->「Captcha Image」
31.jpg

以下的選項分別是:
Image widgh:圖片寬度
Image height:圖片高度
Number of char:圖形字元數
Background color:背景顏色

Text color:文字顏色

Noise color:雜訊的顏色
Captcha textfield:要填入圖型驗證表單的文字欄位名稱

若無特殊需直接用預設值即可,然後按一下「確定」
32.jpg

再來可以看到表單內多出一個「120 x 50的圖片預留位置」
33.jpg

點選「程式碼」選項,切換到程式碼編輯畫面
34.jpg

找到「$captcha_msg="Thank you";」這一行
35.jpg

改成
echo "Thank you";
exit();

36.jpg

再來選擇「檔案」-->「儲存檔案」
34.jpg

開起瀏覽器並輸入「http://localhos/」,然後在「驗證碼文字欄位」中,輸入圖型驗證碼內容,然後按下「送出」
38.jpg

送出後可看到執行後的結果
39.jpg


這個外掛是PHP版的,若想進一步了解相關內容,可參考下面那本書

精通Dreamweaver CS4與PHP & MySQL實例整合應用經典


















相關資訊:http://www.books.com.tw/exep/assp.php/yogo/exep/prod/booksfile.php?item=0010425577

內容簡介

這是一本適合希望能有利用Dreamweaver的能力,而不只是被限制在框框中使用之讀者所閱讀的Dreamweaver & PHP MySQL書籍。

 
本書於PHP MySQL語法章節介紹與Dreamweaver圖形介面的相關連性,並有詳盡的伺服器行為程式碼導覽,書中範例整合22個免費開放的擴充元件,包括圖形驗證Captcha、圓餅圖、分頁選單、檔案上傳、RSS等,除利用來產生基本程式架構以增加效率、降低製作門檻外,亦帶領閱讀程式架構流程與修改程式以符合需求,使讀者更容易瞭解在Dreamweaver中所做的動作實際上是如何達成,培養讀者閱讀、修改程式與利用Dreamweaver的能力。



本書特色

1.詳盡程式碼導覽帶領瞭解程式架構流程,培養讀者閱讀、修改程式與利用Dreamweaver的能力。
2.精選整合22個實用免費擴充元件、3種WYSIWYG編輯器。
3.最豐富完整的內容,獨家整合實做讀者最常見問題。


目錄

Ch 01 Getting Start
Ch 02 PHP MySQL環境架設與配置
Ch 03定義網站與範本
Ch 04 體驗Spry AJAX工具集
Ch 05 PHP語法入門與連結Dreamweaver
Ch 06 SQL語法入門與連結Dreamweaver
Ch 07 MySQL資料庫與phpMyAdmin
Ch 08 訊息發佈系統 - 深入瞭解內建伺服器行為
Ch 09 Ajax圖形驗證線上郵寄 - 深入瞭解PHP郵寄
Ch 10 會員搜尋管理系統 - 使用者驗證、多欄位條件搜尋、認證信、MD5加密
Ch 11 個人網誌 - 圖形驗證Captcha、FCKeditor、PHP HTTP身份驗證、Cookie資訊記錄
Ch 12 RSS feed與線上閱覽器 - 瞭解、製作與應用RSS
Ch 13 留言板 - TinyMCE、悄悄話、可回覆式、防止垃圾留言
Ch 14網路相簿 - PHP檔案處理、一行程式處理縮圖、階層式選單
Ch 15 投票系統 - 多筆記錄的處理、圓餅圖、以Access建立複雜SQL敘述
Ch 16 購物車 -以Session陣列實做完整購物車
Appx A 本機伺服器對外開放與動態網域名稱
Appx B 免費PHP & MySQL空間申請與無痛網站移植詳解
Appx C 擴充元件大補帖與書用擴充元件下載


若是使用ASP的朋友可參考下面那一段的影音教學


  1. 請打開喇叭,影片有茶米的講解。
  2. 您可按下方功能表列的 HQ 按鈕取得更好的播放品質喔。
若影音版的內容不清的話,這裡還有圖文版的 [教材]ASPCapthca 圖片驗證機制擴充程式 ;文淵閣米大出的書都有一定的水準,且這個ASP的AJAX圖形驗證比YOGO介紹的這個PHP版的更方便,ASP的AJAX圖形驗證外掛收錄在 「挑戰Dreamweaver CS4互動網站百寶箱--使用ASP」 一書中,有興趣的朋友可參考下方的相關連結

相關連結: http://www.books.com.tw/exep/assp.php/yogo/exep/prod/booksfile.php?item=0010446906


延伸閱讀:
Captcha 圖形驗證 - Free API篇(1)
Captcha 圖形驗證 - Free API 篇(2)
Captcha圖型驗證 - Dreamweaver外掛篇(ASP)篇
Captcha圖型驗證 - 手工寫code篇
Captcha圖形驗證 - 手工寫code篇(補遺篇)

如果覺得這篇文章對您有所幫助,在觀看完文章之餘,希望能點選下方方廣告,當作是對YOGO的支持,讓YOGO更有寫作的動力。

聖誕跑趴歡樂降★韓版假兩件針織連衣裙$890,新款顯瘦棒球服連帽風衣外套下殺$510,冬新款歐美棉襖棉服連帽短款外套限量↘$530,秋冬新款韓版大碼毛領氣質毛料外套↘$680,快上左耳貓網路購物

您好!如圖太小看不清楚,請 點選此處 看詳細內容 左耳貓蝦皮賣場 https://shopee.tw/hrf5168 左耳貓 露天賣場 http://class.ruten.com.tw/user/index00.php?s=starbox 左耳貓粉...