Banjarnegara, Jawa Tengah, Indonesia.
Tutorial Membuat Simple Captcha PHP Lengkap dengan Validasi
Tutorial Membuat Simple Captcha PHP – Halo sobat, pada artikel kali ini kita akan membahas tutorial yang masih berhubungan dengan artikel sebelumnya tentang mencegah serang bot dengan .htaccess pada website. Selain menggunakan konfigurasi .htaccess, mencegah serangan bot bisa juga dengan menggunakan simple captcha PHP.
Lalu, apa sebenarnya itu captcha dan bagaimana cara membuatnya untuk mencegah serangan bot pada website? Simak penjelasannya berikut ini.
Apa Itu Captcha?
Captcha merupakan kepanjangan dari (Completely Automated Public Turing test to tell Computers and Humans Apart) yaitu sistem keamanan yang digunakan untuk memastikan bahwa respons yang diberikan pada suatu situs web atau aplikasi berasal dari manusia dan bukan dari bot atau program otomatis. Tujuan utamanya adalah untuk mencegah spam, penyalahgunaan, dan serangan otomatis pada layanan online.
Ada beberapa jenis captcha yang paling umum digunakan yaitu Teks Distorsi, Checkbox “I’m not a robot”, ReCAPTCHA, Gambar, Audio Captcha, dan Puzzle. Namun, pada tutorial ini kita akan membuat captcha dengan jenis Teks Distorsi.
Dimana, captcha dengan jenis Teks Distorsi ini nantinya pengguna diminta untuk memasukkan karakter yang ditampilkan dalam gambar dengan teks yang sedikit terdistorsi. Bot sulit membaca teks yang telah diubah ini, sementara manusia biasanya dapat mengenalinya dengan cukup mudah.
Tutorial Membuat Simple Captcha PHP
Untuk membuat simple captcha PHP lengkap dengan validasinya, silahkan Anda persiapkan bahan-bahan berikut untuk nantinya kita akan gunakan.
Step #1: Persiapan Bahan
Bahan yang akan kita gunakan cukup beberapa file, oleh karena itu pastikan Anda membuat file berikut di file manager hosting yang digunakan.
- captcha.html, digunakan untuk menampilkan form captcha.
- captcha.php, digunakan untuk menampung class captcha.
- validate.php, digunakan untuk validasi captcha.
Selain ketiga file utama di atas, tentu kita memerlukan font untuk digunakan dalam tampilan simple captcha PHP yang muncul. Anda tidak perlu repot mencari font yang cocok, source code lengkap yang di dalamnya sudah dilengkapi font dapat diunduh di akhir tutorial.
Step #2: Membuat Form Captcha
Pada langkah kedua ini kita akan membuat form yang nantinya akan menampilkan gambar dari simple captcha PHP. Silahkan Anda copy dan pastekan kode berikut ke dalam file captcha.html yang telah dibuat sebelumnya lalu save.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Captcha by Afid Arifin</title>
<script>
function refreshCaptcha() {
const captchaImage = document.getElementById('captchaImage');
captchaImage.src = 'captcha.php?' + new Date().getTime();
}
</script>
</head>
<body>
<form action="validate.php" method="POST">
<img style="margin-bottom: 10px;" id="captchaImage" src="captcha.php" title="Human Verification">
<br/>
<span onclick="refreshCaptcha()" title="Refresh Captcha" style="margin-left: 4px;">
<a href="javascript: void(0);">Refresh</a>
</span>
<br/>
<input type="text" name="captcha" id="captcha" value="" placeholder="Tulis kode captcha di sini..." autocomplete="off" spellcheck="false" maxlength="6" required>
<input type="submit" name="submit" value="Validasi">
</form>
</body>
</html>Source code di atas sudah dilengkapi dengan tombol refresh captcha. Sehingga, apabila simple captcha PHP sulit terbaca oleh pengguna maka dapat direfresh dengan mudah tanpa perlu reload halaman.
Step #3: Membuat Class Captcha
Class Captcha ini digunakan untuk me-generate gambar dari simple captcha PHP yang dimunculkan pada halaman captcha.html. Silahkan Anda copy dan pastekan kode berikut ke dalam file captcha.php yang telah dibuat sebelumnya lalu save.
<?php
ini_set('display_errors', 0);
ob_start();
session_start();
class Captcha {
private $captchaText;
private $image;
private $imageWidth = 150;
private $imageHeight = 50;
private $backgroundColor;
private $textColor;
private $font;
public function __construct() {
$this->captchaText = $this->generateRandomString();
$_SESSION['captcha_text'] = $this->captchaText;
$this->image = imagecreatetruecolor($this->imageWidth, $this->imageHeight);
$this->backgroundColor = imagecolorallocate($this->image, 255, 255, 255);
$this->textColor = imagecolorallocate($this->image, 0, 0, 0);
$this->font = __DIR__.'/captcha.ttf';
}
private function generateRandomString($length = 6) {
$characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
$charactersLength = strlen($characters);
$randomString = '';
for($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
public function generateCaptcha() {
imagefilledrectangle($this->image, 0, 0, $this->imageWidth, $this->imageHeight, $this->backgroundColor);
for($i = 0; $i < 10; $i++) {
$lineColor = imagecolorallocate($this->image, rand(0, 255), rand(0, 255), rand(0, 255));
imageline($this->image, rand(0, $this->imageWidth), rand(0, $this->imageHeight), rand(0, $this->imageWidth), rand(0, $this->imageHeight), $lineColor);
}
$fontSize = 20;
$angle = rand(-6, 6);
$textSize = imagettfbbox($fontSize, $angle, $this->font, $this->captchaText);
$textWidth = $textSize[2] - $textSize[0];
$textHeight = $textSize[1] - $textSize[7];
$x = ($this->imageWidth - $textWidth) / 2;
$y = ($this->imageHeight + $textHeight) / 2;
imagettftext($this->image, $fontSize, $angle, $x, $y, $this->textColor, $this->font, $this->captchaText);
for($i = 0; $i < 1000; $i++) {
$pixelColor = imagecolorallocate($this->image, rand(0, 255), rand(0, 255), rand(0, 255));
imagesetpixel($this->image, rand(0, $this->imageWidth), rand(0, $this->imageHeight), $pixelColor);
}
header('Content-Type: image/png');
imagepng($this->image);
imagedestroy($this->image);
}
}
$captcha = new Captcha();
$captcha->generateCaptcha();
?>Pada baris ke-22 terdapat properti $this->font, dimana properti tersebut merupakan tempat dimana font akan diload pada gambar captcha, sehingga Anda dapat menyesuaikan font captcha di sini dengan mudah.
Kemudian pada baris ke-45 $angle dapat kalian ubah angka derajat posisi teks captcha yang muncul. Dalam kode di atas diberi nilai -6, 6 berarti teks yang muncul akan memiliki posisi sudut yang random.
Step #4: Membuat Validasi
Selanjutnya kita akan membuat file PHP yang nantinya digunakan untuk validasi. Langsung saja Anda copy dan pastekan kode berikut ke dalam file validate.php yang telah dibuat sebelumnya lalu save.
<?php
global $_SESSION;
if(isset($_POST['submit'])) {
$userCaptcha = strip_tags($_POST['captcha']);
$sessionCaptcha = $_SESSION['captcha_text'];
if($userCaptcha != $sessionCaptcha) {
echo 'Kode keamanan Anda salah!';
} else {
echo 'Kode Keamanan Benar!';
}
}
?>Nah, apabila semua langkah sudah dibuat maka hasilnya apabila kode dijalankan akan tampil seperti gambar berikut.
Untuk mempermudah pemahaman Anda, silahkan unduh versi lengkap kode yang telah kita buat secara gratis lalu ekstrak dan jalankan file captcha.html di laptop atau komputer Anda.
Penutup
Membuat captcha tentu saja dapat menggunakan layanan pihak ketika seperti Google reCaptcha karena lebih cepat dan ringkas. Namun, bagi Anda yang sedang belajar membuat captcha secara manual, cara ini lebih direkomendasikan.
Demikian artikel pada kesempatan kali ini mengenai tutorial membuat simple captcha PHP lengkap dengan validasi. Sekian dari saya, semoga bermanfaat dan tunggu tutorial menarik lainnya di blog ini.
Anda mungkin menyukai postingan ini:
