Selamat pagi pengunjung setia J.OOO, pada artikel sebelumnya saya telah membahas contoh crud menggunakan ekstensi PDO. Pada kesempatan ini saya akan share bagaimana menambahkan Captcha Pada Form Login. Tapi sebelum itu saya akan sedikit menjelaskan apa itu Captcha
Captcha adalah suatu tantangan atau challenge yang harus di jawab oleh siapapun user yang menggunakan sebuah system atau aplikasi, baik mobile atau web. Fungsi utamanya adalah memastikan bahwa pengguna system tersebut manusia dan bukan robot atau komputerisasi.
Langsung saja mari masuk kedalam pembahasan inti.
Yang pertama kalian harus membuat script captcha, buat file dengan nama captcha.php kemudian masukkan script di bawah ini.
<?php
session_start();
$text = rand(10000,99999);
$_SESSION["vercode"] = $text;
$height = 25;
$width = 65;
$image_p = imagecreate($width, $height);
$black = imagecolorallocate($image_p, 0, 0, 0);
$white = imagecolorallocate($image_p, 255, 255, 255);
$font_size = 14;
imagestring($image_p, $font_size, 5, 5, $text, $white);
imagejpeg($image_p, null, 80);
?>Jika kalian ingin mengubah ukuran dari captcha tersebut supaya menyesuaikan form login kalian, tinggal ubah dibagian $height dan $width.
Berikutnya kita buat form login, kemudian didalam form login tersebut kita panggil captcha yang telah dibuat di atas. Buat file dengan nama index.php kemudian masukkan script di bawah ini.
<?php
session_start();
include('config.php');
if(isset($_POST['submit']))
{
if ($_POST["vercode"] != $_SESSION["vercode"] OR $_SESSION["vercode"]=='') {
echo "<script>alert('Incorrect verification code');</script>" ;
}
else {
$name=$_POST['name'];
$email=$_POST['email'];
$ad="insert into user(name,email) values(?,?)";
$stmt= $mysqli->prepare($ad);
$stmt->bind_param(ss,$name,$email);
$stmt->execute();
$stmt->close();
echo "<script>alert('Data added Successfully');</script>" ;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://jasawebsite.ooo">J.OOO</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Menambahkan Captcha Pada Form Login</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-3"></div>
<div class="col-md-6">
<h3 class="text-success">User Login</h3>
<br />
<form name="stmt" method="POST">
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" name="name" required="required"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" required="required"/>
</div>
<div class="form-group">
<label>Kode Verifikasi</label>
<input type="text" class="form-control" name="vercode" required="required"/>
<img src="captcha.php" style="margin-top: 1%">
</div>
<center><button class="btn btn-primary" type="submit" name="submit" value="submit"><span class="glyphicon glyphicon-log-in"></span> Login</button></center>
</form>
</div>
</div>
</body>
</html>Oh ya di atas ada script ini.
//code for captach verification
if ($_POST["vercode"] != $_SESSION["vercode"] OR $_SESSION["vercode"]=='') {
echo "<script>alert('Incorrect verification code');</script>" ;
} Script ini digunakan ketika kamu mengaplikasikan captcha di atas untuk aplikasi web kamu.
Sekian artikel singkat ini kalian bisa melihat demo dan mendownloadnya lansgung pada button di bawah ini.
Jika kedua button di atas tidak berfungsi kalian bisa mengunjungi link ini, terima kasih dan sampai dijumpa di artikel berikutnya. salam J.OOO
