Pada tutorial php kali ini saya akan membuat captcha menggunakan php. Untuk membuat captcha dengan menggunakan php ini saya juga akan menggunakan session php sebagai media untuk memvalidasi captcha tersebut dan membuat gambar png menggunakan fungsi imagepng. Selain itu saya akan menggunakan fungsi random php untuk mengenerate angka atau huruf.
Sebelum kita mulai tutorial ini ada baik nya kita mengeal terlebih dahulu apa itu captcha. Captcha adalah sebuah uji tantangan-respons yang digunakan untuk menentukan apakah pengguna itu manusia atau bukan. Istilah captcha ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford.
Berikut ini adalah tahapan untuk menggunakan captcha dengan menggunakan php
function generate()
{
$char = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
return substr(str_shuffle($char), 0, 5);
}
fungsi di atas bertujuan untuk menggenerate lia buah huruf atau angka yang akan digunakan.
Baca Juga : Membuat Gambar dengan PHP
function gambar($text)
{
//captcha image
$path = $_SERVER['DOCUMENT_ROOT'].dirname($_SERVER['PHP_SELF']);
$img = imagecreatetruecolor(70, 35) or die ("Gambar tidak dapat dibuat");
$white = imagecolorallocate($img, 255, 255, 255);
$black = imagecolorallocate($img, 0, 0, 0);
$font = $path.'/arial.ttf';
$bg = $black;
imagefill($img, 0, 0, $bg);
imagettftext($img, 16, 0, 5, 25, $white, $font, $text);
header( "Content-type: image/png" );
imagepng( $img );
}
$text = generate();
gambar($text);
session_start();
$_SESSION["captcha"] = $text;
Baca Juga : Membuat Form Login Menggunakan Bootstrap 4
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #17a2b8;
height: 100vh;
}
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 400px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
</style>
</head>
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Captcha Login PHP</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="validasi.php" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="password" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="captcha" class="text-info">Captcha:</label>
<input type="text" name="captcha" id="captcha" class="form-control">
<?php
echo '<img src="captcha.php">';
if (isset($_GET['msg'])){echo 'Captcha Salah';}
?>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<?php
session_start();
$a = $_SESSION["captcha"];
$b = $_POST["captcha"];
if ($a == $b)
{
echo 'captcha benar lanjutkan ke validasi login';
// Silahkan isi dengan skrip untuk memvalidasi login
}else
{
header('Location: index.php?msg=1');
}
?>
Demikian lah tutorial membuat captcha image pada form login dengan menggunakan php.