Dalam kesempatan pada tutorial kali ini kita akan membahas Cara Membuat CAPTCHA Menggunakan PHP, dalam tutorial ini kita akan membuat CAPTCHA secara manual atau sendiri dengan bahasa PHP.
Berikut adalah tampilan halaman CAPTCHA yang selesai dibuat, halaman ini terdiri dari satu Halaman HTML , dua file PHP dan satu file font. Ikuti langkah-langkah dibawah ini untuk dapat membuat CAPTCHA menggunakan PHP.
Sebelum langsung praktek dalam membuat CAPTCHA menggunakan PHP, ada baiknya kita mengetahui sedikit dari istilah dari CAPTCHA.
CAPTCHA merupakan sebuah alat untuk menguji inputan dari reader, apakah reader itu manusia atau robot atau alat yang digunakan oleh sebuah aplikasi untuk memastikan bahwa jawaban tidak dihasilkan oleh komputer secara otomatis. Dalam sebuah halaman web, alat ini berfungsi untuk menghindari spam atau robot yang mengisikan data secara otomatis.
Proses CAPTCHA biasanya melibatkan suatu komputer (server) yang meminta reader atau user untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut.
Karena komputer tidak dapat memecahkan CAPTCHA, user yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia. CAPTCHA umumnya menggunakan huruf dan angka dari citra terdistorsi yang muncul di layar.
Oke, mari kita mulai membuat CAPTCHA menggunakan PHP.
Cara Membuat CAPTCHA Menggunakan PHP
CAPTCHA sebenarnya mudah dibuat karena hanya membuat fungsi untuk menggenerate karakter random kemudian meletakkannya di dalam gambar. Serta menyimpannya dalam bentuk session atau variabel tertentu.
Tapi memang teknologi CAPTCHA belumlah sempurna, karena Spammer bisa saja mementahkan CAPTCHA secara manual, dan juga bisa membuat software untuk memecahkan CAPTCHA dengan tingkat kesulitan tertentu.
Walaupun demikian, CAPTCHA tetap penting untuk website. Karena sangat berperan mengurangi spam dan entri form yang salah.
Langkah 1: Membuat Halaman CAPTCHA Web
Seperti biasa silahkan anda membuka teks editor kesukaan anda, dalam tutorial ini nyekrip menggunakan notepad++, setelah itu sillahkan mengetikkan atau langsung salin kode/skrip dibawah ini dan simpan dengan nama index.html.
<html> <head> <title> Halaman Login </title> </head> <body> <p align="center"><b>Isi Username dan Password Anda</b></p> <!-- Membuat Form Login --> <!-- tentukan aksi jika form telah disubmit --> <form action="hasil.php" method="post"> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td> Username </td> <td><input name="username" value="" maxlength="10"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" value ="" maxlength="10"></td> </tr> <tr> <td>Captcha</td> <!-- kita tentukan letak dari skrip generate gambar --> <td><img src="gambar.php" alt="gambar" /> </td> </tr> <td>Isikan captcha </td> <td><input name="nilaiCaptcha" value="" maxlength="6"/></td> <tr> <td><input type ="submit" value="Masuk"></td> </tr> </table> </form> </body> </html>
Skrip diatas terdapat satu form yang terdiri dari input username
, input password
dan input CAPTCHA. Form tersebut jika disubmit akan menjalankan file hasil.php
.
Sedangkan skrip <img src="gambar.php" alt="gambar" />
berfungsi untuk menampilkan gambar CHAPTCHA.
Oke, kita sudah selesai membuat CAPTCHA pada halaman web, selanjutnya kita membuat skrip gambar.php, skrip ini seperti yang sudah dijelaskan diatas yaitu berfungsi sebagai generate sekaligus penampil gambar CAPTCHA.
Langkah 2: Membuat Skrip Generate CAPTCHA
Buat file baru di teks editor anda dan beri nama gambar.php, file gambar.php harus satu folder dengan file index.html. Berikut Skrip atau kode dalam generate CAPTCHA.
<?php //aktifkan session session_start(); header("Content-type: image/png"); // beri nama session dengan nama Captcha $_SESSION["Captcha"]=""; //tentukan ukuran gambar $gbr = imagecreate(200, 50); //warna background gambar imagecolorallocate($gbr, 167, 218, 239); $grey = imagecolorallocate($gbr, 128, 128, 128); $black = imagecolorallocate($gbr, 0, 0,0); // tentukan font $font = "monaco.ttf"; // membuat nomor acak dan ditampilkan pada gambar for($i=0;$i<=5;$i++) { // jumlah karakter $nomor=rand(0, 9); $_SESSION["Captcha"].=$nomor; $sudut= rand(-25, 25); imagettftext($gbr, 20, $sudut, 8+15*$i, 25, $black, $font, $nomor); // efek shadow imagettftext ($gbr, 20, $sudut, 9+15*$i, 26, $grey, $font, $nomor); } //untuk membuat gambar imagepng($gbr); imagedestroy($gbr); ?>
Kode di atas hanya berupa kode PHP saja, fungsinya untuk membuat gambar. Tidak ada sama sekali tag-tag HTML. Di atas ada tulisan $font='monaco.ttf'
. Ini karena nyekrip menggunakan font monaco yang diletakkan satu folder dengan file php-nya. Kalau Anda menggunakan font lain, tinggal diganti.
Kode session_start();
adalah untuk menjalankan session
, karena hasil angka yang digenerate akan ditampilkan di CAPTCHA dan dimasukkan ke session agar bisa disimpan.
Kode $_SESSION["CAPTCHA"]=""
digunakan untuk mengosongkan sesi nomor CAPTCHA agar kosong dahulu. Jika sebelumnya sudah terdapat session, maka kalau halaman di-refresh akan kosong lagi session-nya.
Perintah magecreate
di atas gunanya untuk membuat gambar dengan ukuran tertentu. Setelah itu Anda meng-generate nomor acak dengan perintah rand()
.
Nomor acak ini kemudian ditambahkan ke dalam CAPTCHA dengan loop FOR
. Kemudian dieksekusi pembuatan png dengan perintah imagepng()
.
Hasil Tampilan halaman website setelah kita selesai Membuat Skrip Generate CAPTCHA.
Coba refresh halaman browser, maka akan menampilkan kode CAPTCHA yang baru.
Jika anda memasukkan username dan password disertai dengan kode CAPTCHA dan klik tombol “Masuk”, maka tidak akan muncul apa-apa, karena pada proses form jika disubmit akan membutuhkan file hasil.php
.
Langkah 3: Membuat kode atau Skrip Hasil Form HTML
Mari kita periksa lagi kode/skrip dari file index.html, dari skrip tersebut terdapat baris kode <form action="hasil.php" method="post">
, baris kode ini membutuhkan file hasil.php
dalam memproses halaman web jika tombol “Masuk” diklik.
Sekarang kita buat file hasil.php
kemudian berikan kode untuk cek username, password dan CAPTCHA. Berikan kondisi jika pengisian kode CAPTCHA sesuai dengan session atau tidak. Berikut adalah kode/skrip dari file hasil.php
.
<html> <head> <title> Cek Hasil CAPTCHA </title> </head> <body> <p align="center"> Hasil Login <br/> <? //memanggil lagi session untuk dimulai session_start(); if($_SESSION["Captcha"]!=$_POST["nilaiCaptcha"]){ echo "Username anda ".$_POST["username"]; echo "<br />"; echo "Password anda ".$_POST["password"]; echo "<br />"; echo "Kode Captcha Anda Salah"; }else{ // jika teryata lolos echo "Username anda ".$_POST["username"] ; echo "<br/>"; echo "Password anda ".$_POST["password"]; echo "<br/>"; echo "Kode Captcha Anda Benar"; } ?> </p> </body> </html>
Kode diatas dimulai dengan session_start();
untuk memulai session, setelah itu ada pengecekan nilai session dengan input dari user. Jika hasil benar maka akan menampilkan pesan “Kode Captcha Anda Benar”, tetapi jika salah akan memunculkan pesan “Kode Captcha Anda Salah”.
Langkah 4: Uji Coba CAPTCHA dalam halaman web
Sekarang tiba saatnya untuk uji coba skrip CAPTCHA menggunakan PHP, silahkan buka file index.html
maka akan muncul halaman web seperti berikut.
Masukkan Username, Password dan jangan lupa masukkan kode CAPTCHA dengan benar, jika input anda benar maka akan muncul halaman web seperti gambar berikut.
Tetapi jika input kode CAPTCHA anda salah, maka akan menampilkan halaman web seperti berikut ini.
Anda bisa download Skrip CAPTCHA Menggunakan PHP ini dengan klik tombol “Download Skrip”.
Semoga tutorial Cara Membuat CAPTCHA Menggunakan PHP bisa bermanfaat bagi pembaca web www.nyekrip.com, jika ditemukan adanya kesulitan atau bahkan kesalahan dalam tutorial diatas, silahkan sampaikan pada kami melalui kotak komentar.
Happy Nyekrip!
dengan cara ini apa bisa dibilang aman? bagaimana kalau menggunakan plugin?
bisa dibilang cukup aman, tentunya juga masih terdapat celah :), anda bisa menggunakan recaptcha sebagai solusi :)
kok gambar captchanya ngg muncul
download dulu monaco.ttf
Nice info gan
Ijin download Skrip nya yah gan, terima kasih sudah berbagi
Very interesting topic , appreciate it for posting .
Gambar captcha ga keluar nape ya gan ?
sudah memakai php terbaru gan? :)
iya, tolong dong kasih solusi karena saya juga mengalami masalah yang sama
Makasih gan artikelnya sanggat membantu akhirnya setelah aq praktekan bisa,
thanks gan
saya sudah menggunakan php versi terbaru, tapi kenapa gambar captcha kgk keluar. malah muncul message : the image “localhost/ img.php” cannot be displayed becouse it contains errors.
kira2 itu settingan yang mananya yang error?
php versi berapa yang anda install?
php versi 5.6.15 dengan apache versi 2.4.12 win32 VC11, mohon bantuannya?
oke, akan saya coba dulu, nanti akan saya kabari.
Artikel ini “Cara Membuat CAPTCHA Menggunakan PHP” sangat berguna dan bermanfaat bagi siapapun. Semoga berkah ilmu yang di share ini. Aamiin.
Thanks min….
gambar nya nggak muncul kenapa min? apa gara2 font yang monaco.ttf itu? aku harus punya font itu dulu a min?
benar sekali, harus ada font itu :)
apakah ini menggunakan database ?
Soalnya pada form hasil.php dia tidak menangkap username dan pass yg diisikan
Hasil Login
“; echo “Password anda “.$_POST[“password”]; echo ”
“; echo “Kode Captcha Anda Salah”; }else{ // jika teryata lolos echo “Username anda “.$_POST[“username”] ; echo ”
“; echo “Password anda “.$_POST[“password”]; echo ”
“; echo “Kode Captcha Anda Benar”; } ?>
^hasil pada form hasil.php
Maaf sy msh pemula
tidak kok :)
iya gan di script hasil.php dirubah yg <? menjadi <?php sama saya juga hasil akhirnya gitu gan
gan, kok gambarnya ga mau muncul ya ??
masa’ sih gan? gambar yang mana? udah download font?
Contohin dong masukin captcha ke halaman login, kode di atas kan bukan real halaman login karena tidak ada koneksi ke database username dan password
tinggal konekin dengan session :) di web ini juga ada tutorial tentang membuat halaman login
gan kalau mau buat kebenaran captchanya sebagai sarat login gimana ya diletak? kan username sama pass diambil dari database, kalau kode captchanya?
dalam kode captcha ada kondisi bolean, jika true maka lanjutkan dengan cek username dan password dalam database… :)
nyimak, belum paham ??
kenapa gak tampil gambar font chaptha di login nya min?
coba download codenya langsung
agar captcha nya ada hurufnya gimana??
gambarnya kok enggak bisa keluar ya padahal semua udah aku lakuin tolong bagaimana cara nya
Untuk yg gk muncul gambarnya coba di bagian font tambahin ini __DIR__ . jadinya gini $font = __DIR__ . “monaco.ttf”;
kalo pakai notepadd++ bisa gan?
Bisa Gan..