5 April 2012

Membuat Captcha dengan cakePHP 2.0

follow article
 

contoh captchaRequirement : bisa melakukan instalasi cakePHP 2.0 melalui perintah bake

Menurut Wikipedia, CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Biasanya Captcha digunakan dalam form, untuk memvalidasi bahwa yang mengisi form adalah manusia, bukan robot, mesin, atau komputer.

Artikel ini akan menjelaskan tahap demi tahap pembuatan captcha dengan cakePHP. Agar bisa portable, captcha akan dibuat dalam plugin.

Persiapan yang dilakukan sebelum membuat plugin captcha adalah membuat gambar-gambar yang akan dijadikan sebagai background, dan memilih font yang ingin dipakai. Sebagai sample bisa download disini.

Membuat Plugin Captcha

Sebagai langkah awal, buatlah folder-folder berikut di dalam folder APP/Plugin (folder APP adalah folder aplikasi yang Anda buat) :


APP/Plugin
---	Captcha
   	--- Controller
	--- Vendor

Kemudian, image background dan font silahkan dicopy ke dalam folder APP/Plugin/Captcha/Vendor. Langkah berikutnya adalah membuat file APP/Plugin/Captcha/Controller/CaptchaController.php dengan kode sebagai berikut:


<?php
App::uses('Controller', 'Controller');
class CaptchaController extends Controller{
	var $name = "Captcha";
		
	function index(){
		Configure::write('debug', 0);
		$this->layout = false;
			
		// Untuk menghilangkan keraguan antara o dengan 0, i dengan 1, dan g dengan 9, maka angka 019 tidak disertakan.
		$str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz2345678';
	
		// menggenerate 4-6 karakter kode verifikasi secara random
		$iRand = rand(4, 6);
		$sKodeVerifikasi = "";
		for ($i=1; $i<=$iRand; $i++) {
			// str_shuffle digunakan untuk mengacak string, kemudian substr digunakan untuk mengambil 1 karakter paling depan.
			$code = substr(str_shuffle($str), 0, 1);
			$sKodeVerifikasi .= $code;
		}
		echo $sKodeVerifikasi;
		exit;
	}
}
?>

Kode di atas sudah berhasil membuat 4-6 karakter kode verifikasi secara random. Untuk melihatnya, pastikan plugin Captcha sudah diload. Buka file APP/Config/bootstrap.php, di akhir baris, Anda bisa menambahkan kode CakePlugin::loadAll(); untuk meload seluruh plugin. Atau tulis kode CakePlugin::load('Captcha'); jika hanya ingin menambahkan plugin Captcha saja. Setelah itu kembali ke browser, dan ketikkan url http://localhost/myapp/captcha, Anda akan mendapatkan kode verifikasi tercetak di layar.

Untuk membuat image dari file background yang kita miliki, tambahkan kode berikut sebelum eksekusi perintah for (). Misalnya kita taruh di bagian atas setelah perintah $this->Layout=false;


// Mengambil file image background secara acak dari folder Vendor, kemudian membuatnya menjadi image baru.
$vendor = APP."Plugin".DS."Captcha".DS."Vendor".DS;
$bgimg = $vendor."captcha".rand(1,5).".jpg";

Dan di akhir baris, kita tambahkan kode untuk mencetak image di layar. Ganti perintah echo $sKodeVerifikasi; dengan kode berikut :


header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Pragma: no-cache");
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);

Kemudian kembali ke browser, dan tekan F5 untuk merefresh halaman. Tampak di layar image dari file background ditampilkan secara acak.

Untuk menambahkan teks kode verifikasi ke dalam image, gunakan perintah imagettftext, kita menambahkan satu persatu karakter, sehingga kita letakkan perintah ini di dalam (di akhir) perulangan for ().

imagettftext ($img , $size=15 , $angle=0 , $x=$i*15 , $y=25 , $color=0 , $fontfile=$vendor."captcha.ttf" , $text=$code );

Kemudian kembali ke browser, dan tekan F5 untuk merefresh halaman. Tampak di layar image captcha sesuai dengan harapan. Sampai di sini sebenarnya controller captcha sudah berjalan secara fungsional, namun kita bisa memodifikasi size, angle, $x, $y, dan $color dari teks kode verifikasi yang kita masukkan ke dalam gambar. Sebagai contoh, silahkan ganti kode imagettftext dengan kode di bawah ini.


// Membuat warna secara random
$color1 = rand(0, 100);
$color2 = rand(0, 100);
$color3 = rand(0, 100);
$imageColor = imagecolorallocate($img, $color1, $color2, $color3);
	
imagettftext ($img , $size=rand(15, 18) , $angle=rand(-5,5) , $x=$i*15 , $y=rand(20,30) , $color=$imageColor , $fontfile=$vendor."captcha.ttf" , $text=$code );

Langkah terakhir adalah menyimpan kode verifikasi yang dihasilkan ke dalam SESSION. Di dalam cakePHP kita bisa memanfaatkan component Session, setelah kode verifikasi dihasilkan (setelah proses perulangan for selesai), tambahkan kode $this->Session->write('kode_rahasia', md5(strtolower($sKodeVerifikasi))); untuk menyimpan kode verifikasi ke dalam session.

Menggunakan Captcha dalam Form

Sebagai sample, buatlah file APP/Controller/SamplesController.php dengan kode sebagai berikut:


<?php
App::uses('AppController', 'Controller');
class SamplesController extends AppController {
	var $name='Samples';

	function index(){
		if ($this->request->is('post')) {  
			if (md5(strtolower(trim($this->request->data['Sample']['captcha'])))<>$this->Session->read('kode_rahasia')){
				$this->Session->setFlash('Kode captcha yang Anda masukkan tidak valid.');
			}
			else pr($this->request->data);
		}
	}
}
?>

Dan buat file APP/View/Samples/index.ctp dengan kode sebagai berikut:


<div style="padding:10px 20px;">  
	<?php echo $this->Form->create('Sample');?>
	<?php echo $this->Form->input('name');?>
	<h3 style="border:none;font-size:140%;margin:0;padding:0;">Captcha</h3>
	<table style="border:none;"><tr style="border:none;">
	<td style="border:none;width:180px;"><img src="<?php echo $this->Html->url('/captcha');?>" id="captchaImage" name="captchaImage"/><br/>
	<a href="javascript:window.location.reload()" style="color:orange;">Reload image</a></td>
	<td style="border:none;"><?php echo $this->Form->input('captcha', array('label'=>false, 'div'=>false, 'style'=>'width:200px;float:left;'));?></td>
	</tr></table> 
	<?php echo $this->Form->end('submit comment', array('class'=>'submit'));?>
</div>

juga buat file APP/Model/Sample.php dengan kode sebagai berikut:


<?php
App::uses('AppModel', 'Model');
class Sample extends AppModel{
	var $name='Sample';
	var $useTable=false;
}
?>

Untuk hasilnya, silahkan dicoba dengan memanggil url http://localhost/myapp/samples

UPDATED:
Untuk hasil akhir script di atas, silahkan download plugin simple captcha

follow article


Ada 5 komentar untuk artikel ini

wah keren mas rijal.. posting ilmu nya disini dong mas.. biar saya bisa terus belajar... :D hehehe

salam.. dukati..
 
Ecko
from (Unknown Country?)
on Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
mas rijal.. ko saya ngga keluar ya gambarnya... sama error message nya ngga nongol..
 
Ecko
from (Unknown Country?)
on Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
yup, doakan rajin posting artikel baru. pas error nyoba-nya udah sampe mana?
 
Rijal Asep Nugroho
from (Unknown Country?)
on Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0
saya udah coba semua...

klo pake...
http://localhost/myapp/captcha, -->>berhasil mas, ketika di form dia ngga nongol text nya..
saya coba yang pake image juga gitu.. kenapa ya mas..
coding plugins-nya...

App::uses('Controller', 'Controller');
class CaptchaController extends Controller{
var $name = "Captcha";

function index(){
Configure::write('debug', 0);
$this->layout = false;

// Mengambil file image background secara acak dari folder Vendor, kemudian membuatnya menjadi image baru.
$vendor = APP."Plugin".DS."Captcha".DS."Vendor".DS;
$bgimg = $vendor."captcha".rand(1,5).".jpg";

// Untuk menghilangkan keraguan antara o dengan 0, i dengan 1, dan g dengan 9, maka angka 019 tidak disertakan.
$str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz2345678';

// menggenerate 4-6 karakter kode verifikasi secara random
$iRand = rand(4, 6);
$sKodeVerifikasi = "";
for ($i=1; $iSession->write('kode_rahasia', md5(strtolower($sKodeVerifikasi)));
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Pragma: no-cache");
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
//echo $sKodeVerifikasi;
exit;
}
}
 
Ecko
from (Unknown Country?)
on Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
Sebagai update, saya tambahkan link download untuk plugin simple captcha. sukses ya..
 
Rijal Asep Nugroho
from INDONESIA
on Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0
 

Leave Comment

<i>, <u>, <b> and <a>

Captcha


Reload image