YOGO生活誌: Captcha圖形驗證 - Dreamweaver外掛篇（PHP篇）

2009年12月7日

Captcha圖形驗證 - Dreamweaver外掛篇（PHP篇）

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

首先開起瀏覽器，然後輸入以下網址「http://www.tecnorama.org/」。

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

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

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

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

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

下載完成後解壓縮檔案。

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

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

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

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

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

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

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

＜?php
phpinfo();
?＞

然後存檔命命名為index.php

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

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

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

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

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

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

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

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

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

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

點選「文字欄位」選項。

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

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

點選「按鈕」選項。

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

將上方的「設計師」模式下拉改選成「傳統」模式。

開啟「伺服器行為」-->「＋」-->「Captcha Image」。

以下的選項分別是：
Image widgh：圖片寬度。
Image height：圖片高度。
Number of char：圖形字元數。
Background color：背景顏色。
Text color：文字顏色。
Noise color：雜訊的顏色。
Captcha textfield：要填入圖型驗證表單的文字欄位名稱。
若無特殊需直接用預設值即可，然後按一下「確定」。

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

點選「程式碼」選項，切換到程式碼編輯畫面。

找到「$captcha_msg="Thank you";」這一行。

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

再來選擇「檔案」-->「儲存檔案」。

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

送出後可看到執行後的結果。

這個外掛是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的朋友可參考下面那一段的影音教學。