Membuat Captcha Dengan Validasi Via Ajax Pada PHP


<?php
// Begin the session
session_start();
// Create a random string
$char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));
$str = rand(1, 7) . rand(1, 7) . $char;

// Set the session contents
$_SESSION['captcha_id'] = $str;

?>
<!doctype html>
<html>
<head>
   <title>Captcha With Ajax</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Captcha With Ajax</h1>
<form id="captcha_form" action="">
   <fieldset>
     <div id="captcha_image"><img src="images/image.php" width="132" height="46" alt="Captcha image"></div>
     <label for="captcha">Masukkan huruf / character seperti yang terlihat pada gambar di atas (case insensitive):</label>
     <input type="text" maxlength="6" name="captcha" id="captcha">
     <p>
     <img src="" id="img_result"><span id="result"></span>
     </p>
     <p><input type="button" id="btn_check" value="Check"><input type="button" id="btn_ulangi" value="coba lainnya" ></p>
     <label for="nama">Nama :</label>
     <input type="text" name="nama" id="nama">
     <label for="gender">Jenis Kelamin :</label>
     <input type="text" name="gender" id="gender">
     <p><input type="submit" id="btn_kirim" value="Kirim" disabled="disabled"></p>
   </fieldset>
</form>
<script src="captcha.js"></script>
</body>
</html>


<?php
session_start();
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id']){
   echo '1';
}else{
   echo '0';
}
?>


$(document).ready(function(){
   $("#captcha").focus();
   $("#btn_check").click(function(){
     $("#result").removeClass("status_green");
     $("#result").removeClass("status_red");

     var captcha= $("#captcha").val();
     if (captcha.length==0){
           $("#result").addClass("status_red").html("captcha kosong!");
           $("#captcha").focus();
     }else{
           $.ajax({
           url: "ajax_captcha.php",
           type: "GET",
           data: {"captcha":captcha},
           success: function(data){
           if(data=="1"){
           $("#img_result").attr("src","images/cek41.png").css("display","inline");
           $("#result").addClass("status_green").html("autentifikasi berhasil");
           $("#btn_kirim").prop("disabled", false);
           }else if(data=="0"){
           $("#result").addClass("status_red").html("autentifikasi gagal");
           $("#img_result").attr("src","images/cross.png").css("display","inline");
           $("#captcha").focus();
           }
           console.log(data);
           }
           });
     }
   });
   $("#btn_ulangi").click(function(){
     window.location.href="index.php";
   });

});


#captcha_image img {
   border: 1px solid #ddd;
}
.status_green {
   color: #51c2d5;
}
.status_red {
   color: #ec4646;
}
fieldset label {
   display: block;
   margin: 5px 0px;
}

fieldset input#captcha,
fieldset input#nama,
fieldset input#gender{
   width: 220px;
   height: 33px;
   border: 1px solid #ddd;
   margin: 5px 0px;
   padding: 0px 5px;
   
}
#btn_check,
#btn_ulangi,
#btn_kirim {
   display: inline;
   margin-right: 10px;
   background-color: #11698e;
   color: white;
   border-radius:3px;
   opacity: 0.8;
   padding: 10px 40px;
   border: none;
   outline: none;
   cursor: pointer;
}
#btn_check:hover,
#btn_ulangi:hover,
#btn_kirim:hover{
   opacity: 1;
}

#btn_check:disabled,
#btn_ulangi:disabled,
#btn_kirim:disabled{
   background-color: #bbb;
}
#img_result{
   display: none;
   border: 1px solid #bbb;
   vertical-align: bottom;
   margin-right: 5px;
   padding: 2px;
}