Cara Membuat Captcha dengan JQuery Plugin

Hallo sobat program, bertemu lagi dengan saya Rizal dan masih tetap diwebsite dumetschool. Pada kesempatan ini saya akan membahas tentang plugin jquery dan disini saya menemukan pluging jquery untuk membuat captcha sederhana. Maka untuk judul artikel kali ini adalah tentang Cara Membuat Captcha dengan JQuery Plugin.

Sebelum kita masuk kepembahasan alangkah baiknya teman-teman sudah mengenal tentang javascript serta jquery. agar dapat lebih memahami dengan mudah pada pembahasan ini. Dan kebetulan disini saya menemukan sebuah plugin jquery dimana berfungsi untuk membuat captcha.

CAPTCHA atau Captcha merupakan suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu computer (robot) dan Captcha dapat berupa angka, gambar, maupun huruf.

Cara Membuat Captcha dengan JQuery Plugin

Dibawah ini merupakan salah satu contoh captcha yang umum dan pasti teman-teman sudah pernah melihatnya :

Oke disini kita tidak akan membuat captcha yang sudah keren seperti pada gambar diatas tp disini kita akan membuat captcha sederhana dengan menggunakan jquery plugin.

Langsung saja kita mulai, langkah pertama teman-teman buat dulu file HTML nya lalu tambahkan library jquery nya seperti pada contoh dibawah ini :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Jika sudah langkah berikutnya teman-teman tambahkan kode HTML nya seperti pada contoh dibawah ini :

<div class="container">
    <form id="my-form">
        <small>CARA MEMBUAT CAPTCHA DENGAN JQUERY</small>
        <h1>FORM</h1>
        <input type="email" name="email" placeholder="Email Anda.." required>
        <textarea name="message" placeholder="Pesan Anda.." required></textarea>
        <input type="submit" value="Send">
    </form>
 </div>

Jika sudah, selanjutnya tambahkan kode style CSS nya agar terlihat lebih menarik seperti pada contoh dibawah ini :

.container {
    width:600px;
    margin:auto;
    border:1px solid grey;
    padding:20px;
}
input[type="email"],
input[type="text"],
textarea {
    padding: 7px 14px;
    border: 1px solid lightgrey;
    width: 570px;
    color: #7a7a7a;
}
input[type="submit"] {
    background-color: #efefef;
    color: #3a3a3a;
    cursor: pointer;
    float: right;
    padding: 0 28px;
    height: 28px;
    border: solid 4px #1bbd4f;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;
}
input[type="submit"]:hover {
    background-color: #1bbd4f;
    color: #fff;
}
input[type="submit"]:disabled {
    border: solid 4px #ccc;
    color: #999;
}
input[type="submit"]:disabled:hover {
    background-color: #efefef;
}

#captchaInput {
    width: 35px;
    margin-left: 7px;
}

Dan langkah selanjutnya teman-teman gunakan plugin jquery captchanya seperti pada contoh dibawah ini :

!function(t){"use strict";t.fn.captcha=function(a){var e=t.extend({idCaptchaText:"captchaText",idCaptchaInput:"captchaInput",class:""},a),i=t(this).find("input[type=submit]");i.attr("disabled","disabled"),t('<label id="'+e.idCaptchaText+'"></label>').insertBefore(i),t('<input id="'+e.idCaptchaInput+'" aria-label="Captcha Input" type="text" required>').insertBefore(i);var d=this.find("#"+e.idCaptchaText),s=this.find("#"+e.idCaptchaInput),n=Math.floor(10*Math.random()),r=Math.floor(10*Math.random()),c=n+r;return t(d).text(n+" + "+r+" ="),t(s).keyup(function(){t(this).val()==c?i.removeAttr("disabled").addClass(e.class):i.attr("disabled","disabled").removeClass(e.class)}),this}}(jQuery);

Kode diatas disimpan dengan nama captcha.min.js lalu panggil di file HTMLnya Dan langkah terakhir tambahkan kode jquery nya seperti pada contoh dibawah ini :

<script type="text/javascript">
      $(document).ready(function () {

          $('#my-form').captcha();

      });
 </script>

Jika sudah silahkan disimpan, dan coba dijalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Hasil diatas merupakan captcha perhitungan tambah yang sederhana. Jadi seperti itulah contoh dari pembahasan yang sederhana ini tentang Cara Membuat Captcha dengan JQuery Plugin. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

sumber : www.jqueryscript.net

Cara Membuat Captcha dengan JQuery Plugin

Kategori