Membuat Kode Captcha Menggunakan Javascript

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang cara Membuat Kode Captcha Menggunakan Javascript. Captcha adalah kependekan dari Completely Automated Public Turing test to tell Computers and Humans Apart, fungsi dari captcha sendiri adalah untuk memastikan bahwa respon yang dihasilkan hanya boleh dibuat oleh manusia dan bukan komputer. Langkah pertama untuk membuat kode Captcha menggunakan javascript adalah teman-teman buat fungsi javascript sebagai berikut ini.

function createCaptcha(){
        for(i=0; i<6 ; i++){
            if(i %2 ==0){
                captcha[i] = String.fromCharCode(Math.floor((Math.random()*26)+65));
            }else{      
                captcha[i] = Math.floor((Math.random()*10)+0);
            }
        }
        var thecaptcha=captcha.join("");
        var elm = document.getElementById('captcha');
        elm.innerHTML="<span class='captcha'> " + thecaptcha+ " </span>" + "&nbsp; <a onclick='createCaptcha()' class='badge badge-warning' href='#'>recaptcha</a>";
    }

Jika sudah maka tahap selanjutnya teman-teman bisa buat struktur html dengan menggunakan boostrap seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Kode Captcha dengan Javascript</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    .captcha
    { font: italic bold 16px "Comic Sans MS", cursive, sans-serif;
    color:#a0a0a0;background-color:#c0c0c0;
    width:100px;border-radius: 5px;
    text-align:center;
    text-decoration:line-through;
    }
    .errmsg
    {color:#ff0000;}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="offset-3 col-7">
                <h3>Membuat Kode Captcha dengan Javascript</h3>
                <table class="table">
                    <tr><td>Captcha : </td>
                        <td id="captcha" colspan="2">
                            <script> createCaptcha(); </script>
                        </td>
                    </tr>
                    <tr>
                        <td>Type Captcha : </td>
                        <td><input type="text" name="recaptcha" id="recaptcha" placeholder="Type the captcha" class="form-control"/></td>
                        <td id="errCaptcha" class="errmsg"></td>
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align:right;">
                            <input type="button" value="Submit" class="btn btn-sm btn-primary form-control" onClick="validateRecaptcha()"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Dan masih di file yang sama untuk memeriksa kode captcha sama dengan kode yang kita input maka teman-teman buat fungsi validasi captcha seperti di bawah ini.

var captcha= new Array ();
    function validateRecaptcha(){
        var recaptcha= document.getElementById("recaptcha").value;;
        var validRecaptcha=0;
        for(var j=0; j<6; j++){
            if(recaptcha.charAt(j)!= captcha[j]){
                validRecaptcha++;
            }
        }
        if (recaptcha == ""){
            document.getElementById('errCaptcha').innerHTML = 'Re-Captcha must be filled';
        } else if (validRecaptcha>0 || recaptcha.length>6){
            document.getElementById('errCaptcha').innerHTML = 'Sorry, Wrong Re-Captcha';
        } else{
            document.getElementById('errCaptcha').innerHTML = 'OK';
        }
    }

Dan jika teman-teman buka dihalaman browser maka akan tampil seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Kode Captcha Menggunakan Javascript. Semoga dapat bermanfaat dan selamat mencoba.