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.

Cara Membuat Captcha Dengan PHP AJAX

12 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat