Cara Membuat CAPTCHA Menggunakan PHP – Halo sahabat iltekkomputer, pada postingan kali ini saya ingin membuat tutorial bagaimana sih cara membuat captcha menggunakan PHP. Disini, kita akan membuat captcha nya secara manual menggunakan bahasa pemrograman PHP.
CAPTCHA merupakan sebuah tools untuk memverifikasi inputan dari user, misalnya pengunjung website yang mau berkomentar pada sebuah artikel. Hal ini untuk mengetahui apakah pengunjung tersebut manusia atau robot, jadi bisa dikatakan bahwa captcha adalah sebuah aplikasi untuk memastikan bahwa jawaban yang diinput tidak dihasilkan oleh komputer secara otomatis (bot). Pada sebuah website, tools ini berfungsi untuk menghindari adanya SPAM atau ROBOT yang mengisikan data secara otomatis, misalnya mereka hanya mengirimkan/promot produknya dengan secara otomatis/spam.
Dalam menggunakan captcha, biasanya akan selalu melibatkan komputer (server) yang meminta user untuk menyelesaikan jawaban sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut atau hanya sekedar menampilkan karakter acak kemudian user tersebut harus mengetikan-nya. Kenapa kok kalo pake captcha bisa menghindari spam? Yup, hal ini karena komputer (bot) tidak bisa memecahkan captcha, user yang bisa menjawab/memberikan jawaban yang benar akan dianggap manusia.
Cara Membuat CAPTCHA Menggunakan PHP
Cara membuat CAPTCHA sebenarnya sangatlah mudah, karena kita hanya akan membuat fungsi yang bisa menggenerate karakter secara random dan tinggal meletaknnya didalam gambar serta menyimpannya dengan bentuk session.
Tools CAPTCHA sebenarnya belumlah sempurna, karena bisa saja para spammer menguasai bahasa pemrograman tingkat tinggi dan membuat software untuk memecahkan CAPTCHA tersebut. Tapi, memasang CAPTCHA pada sebuah website tetaplah hal yang penting, karena sangat berguna untuk mengurangi spam dari orang yang tidak bertanggung jawab.
Oke tidak perlu berlama-lama lagi, sekarang mari kita mulai membuat CAPTCHA menggunakan PHP.
1. Membuat Halaman Web
Silahkan buka text editor anda masing-masing, dalam tutorial ini saya menggunakan sublime text. Jadi, hal pertama yang kita lakukan adalah membuat form terlebih dahulu, dimana nanti form ini yang akan diberikan CAPTCHA. Silahkan anda buat folder baru terlebih dahulu dengan nama “captcha” kemudian buat file baru dengan nama index.php didalamnya dan ketikkan kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 align="center"><b>Halaman Login - Iltekkomputer.com</b></h2>
<!-- Membuat Form Login -->
<form action="hasil-captcha.php" method="post">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Username</td>
<td><input name="username" value="" maxlength="20"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value ="" maxlength="15"></td>
</tr>
<tr>
<td>Captcha</td>
<!-- tentukan letak script generate gambar -->
<td><img src="captcha.php" alt="gambar" /> </td>
</tr>
<td>Isikan captcha </td>
<td><input name="kodecaptcha" value="" maxlength="5"/></td>
<tr>
<td><input id="submit" type ="submit" value="Login"></td>
</tr>
</table>
</form>
</body>
</html>
Walaupun pada kode diatas tidak terdapat kode HTML, itu tidak masalah tetap simpan file dengan akhiran .php. Anda juga bisa melihat pada script diatas, ada satu form yang terdiri dari 3 bagian, yaitu input username, input password, dan input captcha. Nah, form diatas jika di klik submit, maka akan memproses atau lebih mudahnya “menjalankan” file hasil-captcha.php.
2. Membuat Generate CAPTCHA
Buat lagi file baru dengan nama captcha.php dan ingat, file captcha.php harus satu folder dengan file index.php. Tadi kita sudah membuat satu folder yang bernama captcha, silahkan letakkan semua file pada folder captcha. Setelah itu, ketikkan script dibawah ini:
<?php
session_start();
function acakCaptcha() {
$alphabet = "abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ0123456789";
//untuk menyatakan $pass sebagai array
$pass = array();
//masukkan -2 dalam string length
$panjangAlpha = strlen($alphabet) - 2;
for ($i = 0; $i < 5; $i++) {
$n = rand(0, $panjangAlpha);
$pass[] = $alphabet[$n];
}
//ubah array menjadi string
return implode($pass);
}
// untuk mengacak captcha
$code = acakCaptcha();
$_SESSION["code"] = $code;
//lebar dan tinggi captcha
$wh = imagecreatetruecolor(173, 50);
//background color biru
$bgc = imagecolorallocate($wh, 22, 86, 165);
//text color abu-abu
$fc = imagecolorallocate($wh, 223, 230, 233);
imagefill($wh, 0, 0, $bgc);
//( $image , $fontsize , $string , $fontcolor )
imagestring($wh, 10, 50, 15, $code, $fc);
//buat gambar
header('content-type: image/jpg');
imagejpeg($wh);
imagedestroy($wh);
?>
Kode di atas hanya berupa kode PHP saja yang berfungsi untuk membuat gambar. Tidak ada sama sekali tag-tag HTML didalamnya. Kode session_start(); adalah untuk menjalankan session, karena hasil angka yang digenerate akan ditampilkan di CAPTCHA dan dimasukkan kedalam bentuk session supaya bisa disimpan.
Kode $_SESSION["code"]="$code" digunakan untuk membuat sesi alphabet CAPTCHA. Jika sebelumnya sudah terdapat sebuah session, maka jika halaman di refresh sessionnya akan kosong.
Perintah magecreate di atas fungsinya untuk membuat gambar dengan ukuran yang ditentukan. Setelah itu meng-generate alphabet secara acak dengan perintah rand().
Alphabet acak inilah yang kemudian ditambahkan ke dalam CAPTCHA dengan loop FOR. Kemudian dieksekusi pembuatan jpeg dengan perintah imagejpeg().
Kita sudah berhasil membuat halaman CAPTCHA-nya, silahkan kalian buka browser nanti kira-kira tampilannya akan seperti ini:
Kalau kalian refresh halamannya, nanti kode CAPTCHA akan menampilkan yang baru. Coba silahkan anda refresh halamannya dan lihat lagi pada kode CAPTCHA-nya.
Sebenarnya sampai sini kita sudah berhasil membuat CAPTCHA-nya, tapi kalau anda coba memasukkan username, password, dan CAPTCHA kemudian klik tombol “Login”, maka akan mengakibatkan “Halaman tidak ditemukan” atau error. Karena pada script index.php kita membutuhkan proses form jika tombol di pencet yaitu hasil-captcha.php.
3. Membuat Hasil atau Proses CAPTCHA
Coba kita cek lagi script dari index.php yang tadi sudah kita buat, pada script tersebut terdapat kode <form action="hasil-captcha.php" method="post">, nah pada baris kode ini kita membutuhkan file hasil-captcha.php untuk memproses halaman web kalau tombol “Login” diklik.
Silahkan anda buat file baru dengan nama hasil-captcha.php, disini kita akan membuat kondisi jika user input CAPTCHA-nya benar, maka akan muncul tulisan “Kode CAPTCHA anda benar” dan jika user input CAPTCHA-nya salah, maka akan muncul tulisan “Kode CAPTCHA anda salah”. Silahkan ketikkan script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cek Hasil CAPTCHA</title>
</head>
<body>
<h2 align="center">Berikut detail Login anda:</h2>
<p align="center">
<?php
$nama = $_POST["username"];
$pwd = $_POST["password"];
//memanggil lagi session untuk dimulai
session_start();
//mengecek apakah user menginput captcha dengan benar
//jika captcha salah, maka akan menjalankan yang pertama
if ($_SESSION["code"] != $_POST["kodecaptcha"]) {
echo "Username anda adalah <b>$nama</b>"; echo "<br />";
echo "Password anda adalah <b>$pwd</b>"; echo "<br />"; echo "<br/>";
echo "Kode CAPTCHA anda salah";
} else { // jika captcha benar, maka perintah yang bawah akan dijalankan
echo "Username anda <b>$nama</b>"; echo "<br/>";
echo "Password anda <b>$pwd</b>"; echo "<br/>"; echo "<br/>";
echo "Kode CAPTCHA anda benar";
}
?>
</p>
</body>
</html>
Pada kode diatas akan dimulai dengan membuat variabel terlebih dahulu, untuk menyimpan inputan username dan password kedalam variabel $username dan $pwd. Kemudian dilanjutkan dengan membuat session_start(); untuk memulai sesi, kemudian kita akan membuat pengecekan nilai session dari inputan user. Seperti yang saya katakan diatas bahwa ketika user memasukkan kode CAPTCHA dengan benar maka akan muncul tulisan “Kode CAPTCHA anda benar” dan begitu juga sebaliknya.
4. Memberikan Style Pada Form Login
Sebelum kita menguji CAPTCHA yang sudah dibuat, ada baiknya kita memberikan style terlebih dahulu pada form loginnya, agar tampilannya agak sedikit menarik. Silahkan buat file baru dengan nama style.css kemudian simpan dalam folder capthca. Setelah itu silahkan ketikkan kode dibawah ini:
body{
font-family: monaco;
background-color: #0984e3;
}
h2 {
font-family: arial;
font-size: 25px;
color: #fff;
}
/* Button Style */
input#submit{
cursor:pointer;
padding:5px 25px;
background:#74b9ff;
border:1px solid #0984e3;
border-radius: 50px;
box-shadow: 0 0 5px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:18px;
}
/* Button Hover */
input#submit:hover, input#submit:focus{
background-color :#0984e3;
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
/* untuk memberikan style pada semua elemen */
table {
background-color: #fff;
padding:25px;
box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
}
table tr,td {
padding:10px;
}
table tr td input {
width:100%;
height:40px;
border:solid #e1e1e1 1px;
border-radius:3px;
padding-left:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
background:#f9f9f9;
transition:0.5s;
box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}
Sekarang coba liat lagi pada halaman webnya, nanti kira-kira tampilannya akan menjadi seperti ini:
Nah, kalau gitu kan sedikit enak dilihat-nya, iya kan? Oke sekarang kita akan langsung menguji coba CAPTCHA yang tadi sudah kita buat
5. Mencoba CAPTCHA yang Sudah Jadi
Untuk mencoba/menguji CAPTCHA yang sudah kita buat, silahkan buka file index.php dan isikan field yang sesuai/benar seperti gambar dibawah ini:
Setelah itu coba kalian klik “Login”. Jika semua input benar, maka akan muncul seperti gambar dibawah ini
Hasil jika inputan CAPTCHA benarTapi, jika inputan CAPTCHA-nya salah, maka nanti akan muncul gambar seperti dibawah ini
Hasil jika inputan CAPTCHA salahSampai disini, tutorial yang anda ikuti untuk membuat CAPTCHA menggunakan PHP sudah selesai dan berjalan dengan baik. Tinggal anda interaksikan pada database dan ubah lagi sesuai dengan keinginan anda masing-masing.
Saya tidak menyediakan source codenya untuk di download, kenapa? Karena tujuan dibuatnya tutorial ini supaya anda mengerti konsep untuk membuat CAPTCHA sederhana dengan menggunakan PHP. Karena jika disediakan source code untuk didownload, rata-rata orang hanya mendownload-nya tanpa membaca konsep/alurnya. Yups, tutorial ini memang dibagikan untuk kalian yang sudah familiar dengan PHP, karena jika kalian belum mengerti sama sekali tentang PHP, saya yakin kalian tidak akan mengerti kode diatas walaupun sudah saya jelaskan. Nah, untuk kalian yang mau belajar PHP dasar, iltekkomputer.com telah menyediakan tutorial bagi orang-orang yang ingin belajar PHP. Silahkan klik disini untuk melihat seluruh Tutorial Belajar PHP Dasar.