KliniKomputer

    
Apakah anda pernah mengisi form di sebuah website, dimana anda harus menulis kombinasi angka atau huruf (biasanya 4 huruf/angka) dari yang ada di gambar sebagai konfirmasi atau verifikasi? Nah itu namanya gambar Captcha, singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart. Tujuan utamanya adalah agar orang lain tidak bisa menggunakan program (robot atau bot) untuk secara otomatis mengisi form dan mengirimnya ke website tujuan. Dengan adanya gambar captcha tersebut, maka orang harus mengisi/menulis ulang huruf atau angka yang tertera pada gambar captcha tersebut.

Dalam tutorial kali ini kita akan membuat gambar captcha sendiri (yang sederhana) yang kiranya bisa sobat sekalian manfaatkan di websitenya untuk menghindari spam. Di sini saya buatkan garis-garis silang sebagai latarnya, agar walaupun orang lain pakai program OCR (program pembaca teks di dalam gambar) tetap tidak bisa mendeteksi tulisannya. Ingin lihat contohnya, coba deh masuk ke situs gue gamegratis33.com  (sekalian promosi nih ...  he he he (:-) , lalu klik salah satu game-nya dan coba kirim review, pada form pengisian review tersebut terdapat gambar captchanya.

Mari kita mulai, di sini kita buat tiga buah file, satu adalah file php untuk gambar captcha, yang satu lagi adalah file html (form pengisian) sebagai contoh untuk penggunaan gambar captcha tersebut, dan yang satu lagi adalah file php untuk merespon form pengisian.

File 1. File php untuk gambar captcha. (Nama file: tes_captcha.php)

<?php

session_start();

//menentukan kode captcha. Disini saya pakai angka acak sebanyak 4 angka.
$angka_acak = rand(0, 9) . rand(0, 9) . rand(0, 9) . rand(0, 9);
$_SESSION['kode_captcha'] = $angka_acak;

//atur header
header("Pragma: no-cache");
header('Content-type: image/jpeg');

//tentukan ukuran gambar
$width = 80;
$height = 30;
//inisialisasi gambar
$my_image = imagecreatetruecolor($width, $height);

//fungsi warna
function warna_acak($jenis_warna = 0){
    global $my_image;
    if ($jenis_warna == 0){  //warna background
        return imagecolorallocate($my_image, rand(210, 255), rand(210, 255), rand(210, 255));
    }else if ($jenis_warna == 1){  //warna noise
        return imagecolorallocate($my_image, rand(10, 100), rand(10, 100), rand(10, 100));
    }else if ($jenis_warna == 2){  //warna teks
        return imagecolorallocate($my_image, rand(0, 80), rand(0, 80), rand(0, 80));
    }
}

//menentukan warna latar. Disini warna latarnya saya acak.
imagefill($my_image, 0, 0, warna_acak());

// tambahkan noise - bintik-bintik. Sobat bisa pakai ini bisa juga tidak.
for ($c = 0; $c < 50; $c++){
    $x = rand(0,$width-1);
    $y = rand(0,$height-1);
    imagesetpixel($my_image, $x, $y, warna_acak(1));
}

//tambah garis menyilang
for ($hor = (rand(1, round($height / 2)) -$height); $hor < $width; $hor+=12){
    $warna = warna_acak(1);
    for ($ver = 0; $ver < $height; $ver++){
        imagesetpixel($my_image, ($hor + $ver), $ver, $warna);
    }
}
for ($hor = (rand(1, round($height / 2)) -$height); $hor < $width; $hor+=12){
    $warna = warna_acak(1);
    for ($ver = 0; $ver < $height; $ver++){
        imagesetpixel($my_image, ($hor + $ver), ($height - $ver), $warna);
    }
}

//buat gambar - sekalian mengacak posisi teks
$x = rand(5,30);
$y = rand(0,15);
imagestring($my_image, 9, $x, $y, substr($angka_acak, 0, 1), warna_acak(2));
$x += 12;
$y = rand(0,15);
imagestring($my_image, 9, $x, $y, substr($angka_acak, 1, 1), warna_acak(2));
$x += 12;
$y = rand(0,15);
imagestring($my_image, 9, $x, $y, substr($angka_acak, 2, 1), warna_acak(2));
$x += 12;
$y = rand(0,15);
imagestring($my_image, 9, $x, $y, substr($angka_acak, 3, 1), warna_acak(2));

imagejpeg($my_image);
imagedestroy($my_image);

?>

Untuk teks berwarna merah di atas adalah untuk menambahkan noda-noda titik, jika sobat tidak senang menggunakannya (mungkin akan kelihatan agak semrawut), bisa di-non-aktifkan. caranya tambahkan tanda // di depannya. Jadinya akan seperti begini:
//imagesetpixel($my_image, $x, $y, warna_acak(1));

File di atas adalah untuk membuat gambar captcha. Berikut ini adalah contoh form (html) yang menggunakan captcha di atas.

File 2. Contoh Form Pengisian Yang Menggunakan Captcha. (Nama file: tes_form.html)

<html><head>
<title>Tes Penggunaan Captcha</title>
</head><body>
<p align="center"><strong>Tes Penggunaan
Captcha</strong></p>
<p><form name="frsmt" method="post" action="http://127.0.0.1/tes_respon.php">
<table border="0" >
    <tr><td>Nama: </td>
    <td><input size="30" name="nama" id="nama"></td>
    </tr>
    <tr><td>Alamat:</td>
    <td><input size="50" name="alamat" id="alamat"></td>
    </tr>
    <tr><td valign="top">Konfirmasi : </td>
    <td>Tulis kembali kode yang tertera pada gambar di bawah ini: <p>
    <img style="float:left; border:1px solid silver; margin:-10px 0 0 0; " src="http://127.0.0.1/tes_captcha.php">
    <input style="float:left; margin:-10px 0 0 10px; text-align:center; height:32px; font-size:1.3em; "
       type="text" maxlength="4" size="5"
       id="kodecaptcha" name="kodecaptcha" > </p>
    </td>
    </tr>
</table>
<input value="Kirim" name="submit" type="submit"> <input
value="Reset" name="reset" type="reset">
</body>
</html>

Perhatikan teks berwarna merah, di sana tertulis "http://127.0.0.1". Ini diganti dengan alamat website anda. Berikut ini adalah file php untuk merespon data yang dikirim melalui file form di atas.

File 3. Contoh script PHP untuk merespon form di atas. (Nama file: tes_respon.php)

<?php

session_start();

$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kodecaptcha = trim($_POST['kodecaptcha']);
$kodecaptcha_sebenarnya = trim($_SESSION['kode_captcha']);

//tulis hasil
echo "Tes Pengecekan Captcha<BR>===============<BR>" .
    "Nama: $nama <BR>" .
    "Alamat: $alamat<BR>=============<BR>";
echo "Kode captcha yg diinput: $kodecaptcha <BR>" .
    "Kode captcha sebenarnya: $kodecaptcha_sebenarnya
<br>Kesimpulan: ";

if ($kodecaptcha === $kodecaptcha_sebenarnya) {
    echo "Kode captcha <B>BENAR</B>";
}else{
    echo "Kode captcha <B>SALAH</B>";
}
?>

Selesai. Untuk kode lengkapnya bisa didownload di sini.
Ini adalah screenshot jika menjalankan program di atas: