Cara Membuat CAPTCHA Sederhana Dengan HTML Dan JavaScript

Pendahuluan

Jika anda pengguna web browser yang aktif, pasti anda pernah menemukan sebuah tampilan website yang bertuliskan Are you robot?. Tampilan tersebut dinamakan CAPTCHA.

Apa itu CAPTCHA? CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah suatu sistem uji tantangan-tanggapan (challenge-response test) yang digunakan untuk memastikan bahwa responden hanya dilakukan oleh manusia (pengguna) dan bukan oleh robot komputer.

CAPTCHA biasanya berbentuk huruf, angka atau gambar yang dibuat bertumpuk atau agak buram sehingga robot komputer akan kesulitan dalam mengartikannya dan manusia (pengguna) lebih mudah untuk membacanya.

Tutorial

Dalam kesempatan kali ini penulis tidak akan membahas CAPTCHA secara detail, tapi disini penulis akan memberikan tutorial Cara Membuat CAPTCHA Sederhana Dengan HTML Dan JavaScript. Yuk langsung saja ke langkah-langkahnya:

Pertama (1) - Pastikan dulu anda sudah menginstall aplikasi text editor di laptop anda. Ada banyak pilihan aplikasi text editor yang bisa anda pilih diantaranya: Notepad++, Visual Code Studio, Atom, Eclipse, NetBeans, Sublime Text dan masih banyak lagi. Disini penulis menggunakan aplikasi Sublime Text

Kedua (2) - Buka aplikasi Sublime Text, jika sudah tampilan nya akan seperti gambar di bawah ini

Ketiga (3) - Salin kode di bawah ini

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript">
         function generateCaptcha()
         {
             var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','1','2','3','4','5','6','7','8','9');
             var i;
             for (i=0;i<4;i++){
               var a = alpha[Math.floor(Math.random() * alpha.length)];
               var b = alpha[Math.floor(Math.random() * alpha.length)];
               var c = alpha[Math.floor(Math.random() * alpha.length)];
               var d = alpha[Math.floor(Math.random() * alpha.length)];
              }
            var code = a + '' + b + '' + '' + c + '' + d;
            document.getElementById("mainCaptcha").value = code
          }
          function CheckValidCaptcha(){
              var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
              var string2 = removeSpaces(document.getElementById('txtInput').value);
              if (string1 == string2){
         document.getElementById('success').innerHTML = "Captcha Berhasil";
         //alert("Captcha Berhasil");
                return true;
              }
              else{       
         document.getElementById('error').innerHTML = "Masukkan Ulang Captcha"; 
         //alert("Masukkan Ulang Captcha");
                return false;
         
              }
          }
          function removeSpaces(string){
            return string.split(' ').join('');
          }
      </script>    
   </head>
   <body onload="generateCaptcha();">
      <center>
         <h1>Mohon Dilengkapi Captcha Di bawah Ini.</h1>
         <table>
            <tr>
               <td>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="text" id="mainCaptcha"readonly="readonly"/>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="text" id="txtInput"/>    
               </td>
            </tr>
            <tr>
               <td>
                  <input type="button" id="refresh" value="Refresh" onclick="generateCaptcha();" />
                  <input id="Button1" type="button" value="Konfirmasi" onclick="CheckValidCaptcha();"/>
               </td>
            </tr>
            <tr>
               <td><span id="error" style="color:red"></span></td>
            </tr>
            <tr>
               <td><span id="success" style="color:green"></span></td>
            </tr>
         </table>
         <h4>COPYRIGHT&#169; <a href="https://it-ilmu.com">IT-ILMU.COM</h4>
      </center>
   </body>
</html>

Keempat (4) - Kemudian pastekan di halaman aplikasi Sublime Text anda, lalu tekan CTRL+S

Kelima (5) - Pilih tempat penyimpanan yang anda inginkan, disini penulis simpan di Documents, pada File name isikan index dan bagian Save as type pilih HTML (*.html;*.htm;*.shtml;*.xhtml;) setelah itu klik Save

Keenam (6) - Langkah terakhir, jika ingin melihat hasilnya anda tinggal cari file index.html lalu klik kanan pada mouse pilih Open with > Google Chrome, maka hasilnya seperti gambar di bawah ini