Membuat motion Captcha dengan jquery

Dalam mengisi buku tamu atau dalam login kita pasti tidak asing dengan captcha, captcha disini ditujukan untuk mengantisipasi  spam dan menyatakan yang masuk atau memberikan komentar memang sesorang/ human, generasi atau teknologi captcha berbagai macam mulai dari yang sederhana mulai dari inputan yang dimasukan berupa huruf dan angka, berikut ini salah satu contoh captcha yang biasa digunakan :  

 

 

Nah disini penulis ingin menjelaskan penggunaan captcha dari tipe yang berbeda, yakni dengan media canvas, disini seseorang yang ingin masuk atau login di menu-menu tertentu yang mengidentifikasi inputan captcha berdasarkan media canvas sebagai beground kemudian diikuti instruksi image yang dapat di create menggunakan mouse sesuai jalur image yang tertera disitu, berikut contoh captcha yang dimaksud :

Image yang dimasukan tidak sesuai dengan yang diminta, sehingga ada informasi please try again.

 

Baik sekarang masukan beberapa crips coding yang mendukung captcha tersebut:

Buat cript coding pemangilan jquery  di bagian header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>

Buat form code dengan id=”mycoolform”

<form action="#" id="mycoolform" method="[get/post]">

Pangil pungin dari form elemnt

$('#form-id').motionCaptcha({ action: '#fairly-unique-id' }); // Or, if you just used 'mc-action' as the hidden input's ID: $('#form-id').motionCaptcha();

Option yang tersedia

$('#form-id').motionCaptcha({ // Basics: action: '#mc-action',
// the ID of the input containing the form action divId: '#mc',
// if you use an ID other than '#mc' for the placeholder, pass it in here cssClass: '.mc-active',
// this CSS class is applied to the 'mc' div when the plugin is active
canvasId: '#mc-canvas',
// the ID of the MotionCAPTCHA canvas element
// An array of shape names that you want MotionCAPTCHA to use: shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag',
 
'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'], // These messages are displayed inside the canvas after a user
 finishes drawing:
errorMsg: 'Please try again.', successMsg: 'Captcha passed!', // This message is displayed if the user's browser doesn't
 support canvas:
noCanvasMsg: "Your browser doesn't support <canvas> -
try Chrome, FF4, Safari or IE9."
// This could be any HTML string (eg. '<label>Draw this shit yo:</label>'): label: '<p>Please draw the shape in the box to submit the form:</p>' });

Demikianlah info tutorial kali ini, semoga bermanfaat jika ingin meng download
 versi lengkap dari coding dapat di klik di sini,
dan penulis ucapkan terima kasih kepada
http://www.josscrowcroft.com yang memberika info penting ini


Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Livechat

  • Eddy Marketing

  • Iwan Marketing

  • Agus Support

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Marketing : 021-2636-3170
    021-4631-0337 (Edi)
    0812-3356-3561 (Edi)
    087-888-190-566 (Iwan)
     
WhatsApp : 0813-1977-8908 (Iwan)
    0812-806-2772
     
Support : 021 - 3377 0050
    08788-9089-588 (Agus)
     
Finance : 021-2636-3170
    0816-180-8005 (Yudi)
     
Web : www.proweb.co.id