Some text some message..
Some text some message..
Some text some message..
Some text some message..

Membuat Captcha Dengan Validasi Via Ajax Pada PHP

previous Previous Page

Captcha merupakan metode yang digunakan untuk mengetahui apakah pengguna yang sedang online adalah manusia atau bot. Captcha adalah singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart. Metode Captcha akan menampilkan teks dalam bentuk gambar atau image yang harus diketikkan secara manual oleh pengguna sebagai test bahwa pengguna tersebut adalah manusia dan bukanlah berasal dari script bot. Captcha digunakan untuk menghalangi masuknya bot otomatis ke dalam sistem yang mana bot tersebut dapat masuk ke dalam sistem secara berulang-ulang.

Hal yang perlu dipahami adalah bahwa tidak semua pengguna mempunyai maksud baik. Adakalanya mereka menciptakan bot tertentu untuk masuk ke dalam sistem kita dan mengupload post secara berulang-ulang tanpa mereka ketik secara manual. Untuk menghindari pengguna jenis ini, anda dapat membuat captcha sehingga mesin bot yang sudah mereka buat akan tertahan pada proses captcha dan tentu saja tidak akan bisa melewati proses selanjutnya.

Pada artikel kali ini, saya akan membahas cara membuat captcha yang terintegrasi dengan ajax. Ajax sendiri merupakan proses request dari client (komputer) ke server tanpa harus melakukan reload atau refresh halaman. Ide pembuatan captcha dengan ajax ini adalah saat pengguna akan melakukan pengiriman konten, kode berisi captcha akan ditampilkan. Kemudian jika pengguna mengetikkan kode captcha dan akan divalidasi oleh server via ajax secara langsung. Hasilnya akan ditampilkan saat itu juga pada komputer client dan akan merubah tampilan tombol submit form dari disabled menjadi enabled.

Membuat Captcha Dengan Validasi Via Ajax

Pada pembuatan captcha dengan ajax diperlukan beberapa file php untuk proses captcha-nya sendiri kemudian gambar latar (.png), dan file font (.ttf). Proses ajax menggunakan library jquery.

File index.php sebagai halaman utama tempat untuk menampilkan captcha sebagai berikut :

PHP

1.  <?php
2.  // Begin the session
3.  session_start();
4.  // Create a random string
5.  $char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));
6.  $str = rand(1, 7) . rand(1, 7) . $char;
7.  
8.  // Set the session contents
9.  $_SESSION['captcha_id'] = $str;
10. 
11. ?>
12. <!doctype html>
13. <html>
14. <head>
15.    <meta charset="utf-8">
16.    <title>Captcha With Ajax</title>
17.    <script src="../jquery-2.0.2.min.js"></script>
18.    <link href="style.css" rel="stylesheet">
19. </head>
20. <body>
21. <h1>Captcha With Ajax</h1>
22. <form id="captchaform" action="">
23.    <fieldset>
24.      <div id="captchaimage"><img src="images/image.php" width="132" height="46" alt="Captcha image"></div>
25.      <label for="captcha">Masukkan huruf / character seperti yang terlihat pada gambar di atas (case insensitive):</label>
26.      <input type="text" maxlength="6" name="captcha" id="captcha">
27.      <p>
28.      <img src="" id="img_result"><span id="result"></span>
29.      </p>
30.      <p><input type="button" id="btn_check" value="Check"><input type="button" id="btn_ulangi" value="coba lainnya" ></p>
31.      <label for="nama">Nama :</label>
32.      <input type="text" name="nama" id="nama">
33.      <label for="gender">Jenis Kelamin :</label>
34.      <input type="text" name="gender" id="gender">
35.      <p><input type="submit" id="btn_kirim" value="Kirim" disabled="disabled"></p>
36.    </fieldset>
37. </form>
38. <script src="captcha.js"></script>
39. </body>
40. </html>

Penataan style CSS-nya (style.css) :

CSS

1.  captchaimage img {
2.     border: 1px solid #ddd;
3.  }
4.  .status_green {
5.     background-color: #fff;
6.     color: #51c2d5;
7.  }
8.  .status_red {
9.     background-color: #fff;
10.    color: #ec4646;
11. }
12. fieldset label {
13.    display: block;
14.    margin: 5px 0px;
15. }
16. 
17. fieldset input#captcha,
18. fieldset input#nama,
19. fieldset input#gender{
20.    width: 220px;
21.    height: 33px;
22.    border: 1px solid #ddd;
23.    margin: 5px 0px;
24.    padding: 0px 5px;
25.    
26. }
27. #btn_check,
28. #btn_ulangi,
29. #btn_kirim {
30.    display: inline;
31.    margin-right: 10px;
32.    background-color: #11698e;
33.    color: white;
34.    border-radius:3px;
35.    opacity: 0.8;
36.    padding: 10px 40px;
37.    border: none;
38.    outline: none;
39.    cursor: pointer;
40. }
41. #btn_check:hover,
42. #btn_ulangi:hover,
43. #btn_kirim:hover{
44.    opacity: 1;
45. }
46. 
47. #btn_check:disabled,
48. #btn_ulangi:disabled,
49. #btn_kirim:disabled{
50.    background-color: #bbb;
51. }
52. #img_result{
53.    display: none;
54.    border: 1px solid #bbb;
55.    vertical-align: bottom;
56.    margin-right: 5px;
57.    padding: 2px;
58. }

Untuk Jquery-nya (captcha.js):

JQuery

1.  $(document).ready(function(){
2.     $("#captcha").focus();
3.     $("#btn_check").click(function(){
4.       $("#result").removeClass("status_green");
5.       $("#result").removeClass("status_red");
6.  
7.       var captcha= $("#captcha").val();
8.       if (captcha.length==0){
9.          $("#result").addClass("status_red").html("captcha kosong!");
10.         $("#captcha").focus();
11.      }else{
12.         $.ajax({
13.         url: "process.php",
14.         type: "GET",
15.         data: {"captcha":captcha},
16.         success: function(data){
17.         if(data=="1"){
18.         $("#img_result").attr("src","images/cek41.png").css("display","inline");
19.         $("#result").addClass("status_green").html("autentifikasi berhasil");
20.         $("#btn_kirim").prop("disabled", false);
21.         }else if(data=="0"){
22.         $("#result").addClass("status_red").html("autentifikasi gagal");
23.         $("#img_result").attr("src","images/cross.png").css("display","inline");
24.         $("#captcha").focus();
25.         }
26.         console.log(data);
27.         }
28.         });
29.      }
30.    });
31.    $("#btn_ulangi").click(function(){
32.      window.location.href="index.php";
33.    });
34. 
35. });
36. 

Perhatikan pada file index.php baris ke-24, terdapat elemen tag HTML <img>. Tag <img> tersebut mempunyai sumber rujukan gambar yang bukan berasal dari gambar biasa (png, jpg), namun berasal dari gambar yang sudah di-generate melalui script php. Atribut src tag <img> tersebut berasal dari file image.php. File image.php merupakan file php untuk menciptakan gambar yang disertai teks (angka/huruf)

Isi dari file image.php sebagai berikut :

PHP

1.  <?php
2.  session_start();
3.  
4.  // If the session is not present, set the variable to an error message
5.  if(!isset($_SESSION['captcha_id']))
6.     $str = 'ERROR!';
7.  else
8.     $str = $_SESSION['captcha_id'];
9.  
10. // Set the content type
11. header('Content-Type: image/png');
12. header('Cache-Control: no-cache');
13. 
14. // Create an image from button.png
15. $image = imagecreatefrompng('bg6.png');
16. //$colour = imagecolorallocate($image,20, 50, 120);
17. $colour = imagecolorallocate($image, 183, 178, 152);
18. $font = '../fonts/Anorexia.ttf';
19. $rotate = rand(-15, 15);
20. imagettftext($image, 14, $rotate, 18, 30, $colour, $font, $str);
21. 
22. // Output the image as a png
23. imagepng($image);
24. 

Pada file captcha.js, silahkan lihat pada baris ke-13. Terdapat file process.php. File ini digunakan untuk melakukan proses captcha yang sudah dikirimkan pengguna melalui request ajax. Isi dari file process.php adalah :

PHP

1.  <?php
2.  session_start();
3.  if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id']){
4.     echo '1';
5.  }else{
6.     echo '0';
7.  }
8.  ?>

Penjelasan :
Berhubung file dan scriptnya yang lumayan panjang, untuk penjelasan pada script-script di atas, saya akan membahas pada bagian intinya saja. Ide captcha berasal dari pencocokan nilai sesi (session) halaman asal (index.php) dengan nilai sesi halaman tujuan (process.php). Sesi sendiri merupakan bagian dari php yang dapat digunakan bersama-sama antar halaman. Sesi berisikan variable dengan nilai untuk digunakan bersama.

Sesi kali ini menggunakan variable captcha_id dengan nilai berupa angka acak dan huruf acak yang diciptakan terlebih dahulu (index.php baris ke-1 s.d ke-9). Proses analisa data terjadi pada process.php. Jika nilai captcha yang sesuai dengan nilai sesi variable captcha_id, maka akan menghasilkan nilai 1 (true) dan jika tidak sesuai akan menghasilkan nilai 0 (false). Nilai tersebut digunakan sebagai umpan balik proses ajax pada file captcha.js dan akan mempengaruhi tampilan berbagai elemen pada form. Seperti tombol disabled submit menjadi enabled atau pun tampilan hasil ajax pada formulir (process.php baris ke-12 s.d ke-24).

Pada image.php, seperti yang sudah dijelaskan di atas bahwa file ini digunakan untuk men-generate image. File image digenerate dengan latar belakang gambar bg6.png dengan ditempeli huruf acak yang sudah dihasilkan sebelumnya. Script ini akan menghasilkan file png.

Jika dijalankan akan menghasilkan tampilan sebagai berikut :

captcha with ajax

Jika pengguna memasukkan kode captcha dengan benar akan menghasilkan tampilan sebagai berikut :

captcha with ajax

Demikian tutorial tentang pembuatan captcha dengan validasi via ajax, semoga bermanfaat. Silahkan di sini untuk mendapatkan source code tutorial ini. File berbentuk file zip yang berisi file php, jquery dan image pendukung.

   0   69

Kategori : tag iconhtml - tag iconcss - tag iconjquery - tag iconphp - tag iconsecurity

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

Formulir ini hanya bagi member yang sudah terdaftar. disini.

Belum terdaftar? silahkan Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 

Silahkan login terlebih dahulu untuk mengirimkan polling. disini.

Belum terdaftar? silahkan Daftar disini.