Cara Membuat Captcha Dengan PHP AJAX

Hallo teman-teman Dumet School. Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Captcha Dengan PHP AJAX. Captcha adalah suatu bentuk uji tantangan-tanggapan yang digunakan dalam sistem komputer untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer atau memastikan bahwa user bukanlah komputer. Untuk membuat captcha maka kita akan membuat terlebih dahulu struktur html seperti di bawah ini.

<html>  
  <head>  
    <title>Cara Membuat Captcha Dengan PHP AJAX</title>  
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>  
  <body>  
    <div class="container" style="width: 600px">
      <h3 align="center">Cara Membuat Captcha Dengan PHP AJAX</a></h3><br />
      <div class="panel panel-default">
          <div class="panel-body">
           <form method="post" id="captch_form">
              <div class="form-group">
                <label>Kode</label>
                <div class="input-group">
                  <input type="text" name="captcha_code" id="captcha_code" class="form-control" />
                  <span class="input-group-addon" style="padding:0">
                    <img src="image.php" id="captcha_image" />
                  </span>
                </div>
              </div>
            <div class="form-group">
             <input type="submit" name="register" id="register" class="btn btn-info" value="Submit" />
            </div>
           </form>
          </div>
      </div>
    </div>
  </body>  
</html>

Jika sudah maka simpan dengan nama index.php dan langkah selanjutnya teman-teman buat script ajax masih dalam file yang sama untuk melakukan pengecekan kode captcha yang dimasukan ke dalam tag input html.

<script>
 $(document).ready(function(){  
  $('#captch_form').on('submit', function(event){
   event.preventDefault();
   if($('#captcha_code').val() == ''){
    alert('Enter Captcha Code');
    $('#register').attr('disabled', 'disabled');
    return false;
   }else{
    alert('Form has been validate with Captcha Code');
    $('#captch_form')[0].reset();
    $('#captcha_image').attr('src', 'image.php');
   }
  });

  $('#captcha_code').on('blur', function(){
   var code = $('#captcha_code').val();
   
   if(code == ''){
    alert('Enter Captcha Code');
    $('#register').attr('disabled', 'disabled');
   }else{
    $.ajax({
     url:"check_code.php",
     method:"POST",
     data:{code:code},
     success:function(data){
      if(data == 'success'){
       $('#register').attr('disabled', false);
      }else{
       $('#register').attr('disabled', 'disabled');
       alert('Invalid Code');
      }
     }
    });
   }
  });

 });
</script>

Jika sudah maka  teman-teman buat file baru dengan nama image.php untuk membuat kode captcha. sebelumnya teman-teman download terlebih dahulu jenis font arial.ttf.

<?php

session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION['captcha_code'] = $captcha_code;
header('Content-Type: image/png');
$image = imagecreatetruecolor(200, 38);
$background_color = imagecolorallocate($image, 250,128,114);
$text_color = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image, 0, 0, 200, 38, $background_color);
$font = dirname(__FILE__) . '/arial.ttf';
imagettftext($image, 20, 0, 60, 28, $text_color, $font, $captcha_code);
imagepng($image);
imagedestroy($image);

?>

Dan langkah terakhir teman-teman buat file baru dengan nama check_code.php untuk membuat alert yang ada kondisi jika kode captcha sama dengan yang diinput.

<?php

session_start();
$code = $_POST['code'];
if($code == $_SESSION['captcha_code']){
 echo 'success';
}

?>

Jika di tampilkan dihalaman browser maka akan tampil seperti pada gambar di bawah ini.