Salam jagocoding,, udah lama ga bikin tutor lagi nih sejak …......... ah, sudahlah.. Kesempatan kali ini saya mau share lagi tutorial untuk membuat captcha.. Tapi captcha yang akan kita buat kali ini bukan captcha model tulisan standar,, tapi Button Captcha. Untuk membuat Button Captcha kali ini saya akan menggunakan HTML + CSS + PHP dan bantuan Font Awesome untuk mengerjakan semuanya..
Langsung aja ya,, pertama-tama kita bikin dulu desain layout captchanya pake HTML + CSS dulu. Di bagian ini sebenernya terserah kitanya aja mau desain kayak gimana, cuma kalo desain dari ane sih hasil jadinya mau seperti ini :
Pertama-tama, untuk resource yang akan saya pakai,, di tutorial ini saya pake Font Awesome sebagai resource icon-iconnya (bisa download di Font Awesome), dan Bootstrap untuk bantu bikin responsive sama tombol-tombolnya biar cepet.. Jangan lupa download file-file itu ya.. Soalnya untuk HTML dan CSSnya nggak akan terlalu saya jelasin begitu detail.. Karena bagian rumit yang lebih saya konsen yaitu di PHPnya..
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Captcha</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--sesuaikan dengan tempat kita meletakkan resource CSS kita--> <style> /*CSS Untuk Captchanya aja~*/ *{margin:0px auto;} .captcha-form{background:#f7f7f7; border:1px solid #ededed; padding:10px; border-radius:4px; -moz-border-radius:4px; margin:5px; display:inline-block; vertical-align:top;} .captcha-form .big-thumb{background:#fff; display:inline-block; text-align:center; padding:10px 0px; font-size:30px; line-height:50px; width:70px; vertical-align:top;} .captcha-form .right{display:inline-block;} .captcha-form .helper{display:block;} .captcha-form .button-cont{display:inline-block; padding:10px;} .captcha-form .button-cont button{float:left; margin:0px 5px;} .clear{clear:both;} </style> </head> <body> <div class="container"> <form action="" method="post" enctype="multipart/form-data">
<div class="captcha-form"> <!--container captcha utama--!> <div class="big-thumb"> <!--layer penampung icon besar--> <span class="fa "><!--random icon besar akan muncul disini--></span> </div> <div class="right"> <div class="helper">Tekan tombol dengan icon yang sama seperti gambar yang sama seperti disamping untuk mengirim.</div> <div class="button-cont"> <!--semua opsi tombol akan muncul dibawah ini secara random--> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <button name="" class="btn btn-primary btn-lg"> <span class="fa fa-fw"></span> </button> <div class="clear"></div> </div> </div> </div>
</form> </div> </body> </html>
Hasilnya sementara seperti ini :
Kok masih kosong? Ya wajar.. nama icon font-awesomenya sama sekali belum dipanggil.. Semuanya icon akan kita panggil secara acak dengan PHP nantinya. Karena layout sudah oke,, sekarang kita akan masuk ke bagian script PHPnya ya untuk memasukkan icon-icon ke tempat semestinya..
Pertama-tama kita buat file PHP baru dengan nama file captcha.php. File captcha.php ini akan kita buat dengan model OOP biar lebih enak diaplikasiin.. Strukturnya yang saya gunakan seperti ini :
<?php
class Captcha{
var $token, $iconlist, $tokenlist;
function __construct(){
}
function create(){
}
function draw(){
}
function get_icon(){
}
}
Class Captcha ini akan berisi 3 atribut, yaitu $token, $iconlist, dan $tokenlist. Atribut $token digunakan sebagai kode autentikasi valid yang nantinya akan dicek kesesuaiannya. $iconlist akan digunakan untuk menampung nama-nama icon yang akan muncul di tombol-tombol, $tokenlist akan berisi kode autentikasi acak untuk masing-masing tombol icon.
Untuk method-methodnya sendiri akan kita buat terdiri dari create(), draw(), dan get_icon(). Method create() adalah method utama yang akan mengerjakan semuanya, method draw() yang akan menggambar captcha tersebut, dan method get_icon() adalah method yang akan mengacak-acak urutan icon yang ditampilkan.
Selanjutnya, di method konstruktor [ __construct() ] kita langsung beri nilai atribut $token dengan nilai acak.
...
function __construct(){
//Fungsi SHA1 akan memberikan karakter 40 digit acak yang akan digunakan sebagai kode autentikasi captcha kita nantinya.
$this->token = sha1(md5(rand(1,10000)));
}
...
Setelah itu, di method get_icon() yang paling bawah, kita hanya perlu mengisi sebuah array yang berisi nama-nama class icon Font Awesome (nama icon lengkap bisa dilihat di https://fortawesome.github.io/Font-Awesome/cheatsheet/ dan ditambah ke method get_icon sesuai kebutuhan)
...
function get_icon(){
$arr = array(
"fa-ambulance",
"fa-anchor",
"fa-android",
"fa-automobile",
"fa-bed",
"fa-bell",
"fa-bicycle",
"fa-birthday-cake",
"fa-bomb",
"fa-child",
"fa-cloud",
"fa-cutlery",
"fa-cut",
"fa-diamond",
"fa-eye",
"fa-fighter-jet",
"fa-flask",
"fa-globe",
"fa-home",
"fa-leaf",
"fa-meh-o",
"fa-music",
"fa-paper-plane",
"fa-paw",
"fa-puzzle-piece",
"fa-star",
"fa-sun-o",
"fa-trash",
"fa-users",
"fa-warning",
"fa-wrench",
"fa-wifi",
"fa-user-secret",
"fa-university",
"fa-linux",
"fa-paint-brush",
"fa-money",
"fa-thumb-tack",
"fa-thumbs-up",
"fa-motorcycle",
"fa-newspaper-o",
"fa-heartbeat",
"fa-coffee"
);
return $arr;
}
Setelah itu, di method create() kita akan membuat sebuah session dengan nilai sesuai token di konstruktor tadi, lalu memanggil icon di method get_icon() untuk ditampilkan.
...
function create(){
$limit = 6; //jumlah tombol yang akan tampil
$_SESSION['token'] = $this->token; //membuat session token berdasarkan atribut token di method konstruktor tadi
$iconlist = $this->get_icon(); // mengambil nilai icon yang sudah kita buat tadi
shuffle($iconlist); // mengacak urutan icon dari method get_icon()
//perulangan dilakukan sebanyak $limit yg ditentukan diatas
//atribut iconlist akan diisi sebanyak 6 icon acak
//seluruh atribut token akan diisi dengan karakter acak
for($i=0;$i<$limit;$i++){
$this->iconlist[$i] = $iconlist[$i];
$this->tokenlist[$i] = sha1(md5(rand(1,10000)));
}
//setelah semuanya siap, method draw() yang akan menampilkannya ke browser
$this->draw();
}
...
Udah mau selesai.. Beneran.. Sekarang di method draw() ini kita akan mengetik ulang struktur HTML yang kita buat diawal, akan tetapi akan langsung kita isi dengan icon dan nilai token yang sudah diisi di method create() tadi. Icon yang akan muncul nanti akan selalu acak tiap refreshnya, karena fungsi shuffle() di method create() tadi..
...
function draw(){
$out = ""; //semua tag HTML nantinya akan dimasukkan ke tag $out ini..
#PERLU DIBEDAKAN, DIBAWAH INI SEMUA VARIABEL $out diberi TITIK SAMA DENGAN.
$out .="
<input type='hidden' name='form-captcha' value='1'>
<div class='captcha-form'>
<div class='big-thumb'>
<span class='fa ".$this->iconlist[0]."'></span>
</div>
<div class='right'>
<div class='helper'>
Tekan tombol dengan icon yang sama seperti icon disamping untuk mengirim
</div>
<div class='button-cont'>
";
#$THIS->ICONLIST[0] di class big-thumb menunjuk ke icon pertama di list icon yang sudah diacak tadi.
#Array dibawah ini akan menampung tag <button>2 yang akan muncul, akan tetapi nantinya diacak urutannya sebelum benar-benar ditampilkan.
$arr = array();
//push data tombol jawabannya
array_push($arr,"
<button name='".$this->token."' class='btn btn-primary btn-lg'>
<span class='fa ".$this->iconlist[0]." fa-fw'></span>
</button>
");
#array_push() pertama sengaja tidak dimasukkan kedalam perulangan dibawah, karena nama button diambil dari atribut $token, bukan dari $tokenlist. Tombol ini nantinya akan menjadi tombol kirim yang sesungguhnya
#perulangan dibawah digunakan untuk membuat tombol-tombol sembarang
$num = count($this->iconlist);
for($i=1;$i<$num;$i++){
array_push($arr,"
<button name='".$this->tokenlist[$i]."' class='btn btn-primary btn-lg'>
<span class='fa ".$this->iconlist[$i]." fa-fw'></span>
</button>
");
}
#fungsi shuffle wajib dilakukan, supaya urutan tombol submit sesungguhnya dengan tombol bohongannya selalu acak.
shuffle($arr);
//dari semua urutan tombol-tombol yang sudah diacak tadi dimasukkan ke variabel $out lagi.
foreach($arr as $o){
$out.= $o;
}
$out .= "
<div class='clear'></div>
</div>
</div>
</div>
";
//yang diatas ini hanya tag-tag penutup yang sudah dibuka sebelumnya saja..
echo $out; //menampilkan output sesuai yang sudah dibuat diatas
}
...
Okee!! Untuk class captchanya sudah selesai semuanya!! Sekarang dari class Captcha tersebut tinggal kita panggil ke dokumen yang ingin kita isi captchanya.. Jadi di form yang ingin kita isikan captcha, cukup kita tambahkan baris ini ..
... <form action="" method="post" enctype="multipart/form-data"> <!--ANGGEP AJA ADA KOMPONEN FORM LAINNYA DISINI--> <?php include "captcha.php"; //lokasi class captcha yang kita buat tadi $captcha = new Captcha(); $captcha->create(); // untuk menampilkan captcha, cukup seperti ini saja ?> </form> ...
Kalau semua urutan dari atas sampai terakhir tadi diikuti dengan benar,, maka hasil jadinya sudah pasti seperti yang diinginkan kayak di halaman demo saya. Dan langkah terakhir yang benar-benar terakhir adalah bagian validasinya..
Perintah validasi berikut ini diletakkan di bagian kita ingin memvalidasi form kita nantinya. Di halaman demo saya, form validasi diletakkan satu halaman dengan index biar nggak ribet.. Tapi bisa disesuaikan dengan kebutuhan kita kedepannya..
<?php
session_start(); //KALAU UDAH BUAT DEKLARASI SESSION SEBELUMNYA, BARIS INI BOLEH DIHAPUS
//cek
if(isset($_POST['form-captcha'])){
//nilai variabel bener diambil dari session token jika ada.
$bener = isset($_SESSION['token']) ? $_SESSION['token'] : "";
//kalau tombol dengan nama sesuai session sudah ada, maka captcha sukses, selain itu gagal.
if(isset($_POST[$bener])){
echo "
<script>
alert(\"Captcha Benar!!\");
</script>
";
}
else{
echo "
<script>
alert(\"Captcha Salah!!\");
</script>
";
}
}
?>
Demikian tutorial panjang saya hari ini.. Alangkah baiknya kalau Anda mengerjakan semuanya ini step by step.. Tapi kalau ternyata hasilnya nggak sesuai, atau kebetulan lagi males,, silakan download di sini.
Sekian, dan terima kasih..
