Ingin menggunakan Captcha di Blog/Web anda ?? Berikut Cara Membuat Captcha Dengan HTML

Membuat Captcha Dengan HTML – Captcha atau (CAP-CH-UH) merupakan singkatan dari Completely Automated Public Turing test to tel Computers and Humans Apart , adalah sejenis kaedah dan challenge-respons untuk memastikan bahwa repon yang di hasilkan hanya boleh di buat oleh manusia bukan computer.

Sebelum kita masuk pada pembuatan Captcha kita harus tahu dulu fungsi dari captcha tersebut.

1. Mencegah spam bot, mengapa captcha bisa mencegah dari adanya spam bot itu di karenakan bot tidak bisa membaca Captcha string-string pemrograman pada bot itu bersifat tetap. Maka dari itu bot tidak dapat membaca Captcha yang setiap saat dapat berubah kecuali bot tersebut berasal dari mesin blog atau website tersebut.

2. Mencegah dari Flood ( Flood yaitu menguirimkan data secara berulang-ulang )

3. Mencegah Comment yang bersifat spam, comment spam hanya membuat tampilan komentar kita semakin jelek dengan adanya spam yang di tempelkan pada kolom komentar Blog, Website, Dll

itulah sedikit ulasan tentang Captcha dan fungsi Captcha itu sendiri, baiklah sekarang kita akan masuk pada pembuatan Chaptcha itu sendiri. Adabaik nya anda sudah menguasai tentang HTML karena Untuk pemula kode-kode di bawah ini akan membuat anda sedikit bingung. Kali ini kita akan membuat Captcha yang sederhana dan nantinya dapat anda kreasikan dengan kreasi anda masing-masing.

Admin akan memberikan tutorialnya menggunakan Notepad++, mengapa Admin menggunakan notepad++ ??,, itu karena aplikasi Notepad++ lebih mudah digunakan dalam membuat kode-kode yang menggunakan Bahasa pemrograman HTML dan aplikasi tersebut sangat simple untuk di gunakan.

Sepertinya Admin banyak ceramah yaa …. :D

Nah sekarang kita langsung saja pada cara membuat captcha nya.

1. copy script yang saya bagikan di bawah ini kedalam Notepad++

<!DOCTYPE html>
<html>
<head>
<title>LazyCodding</title>
<h1>
 Membuat Captcha</h1>
<br />
<a>Cara Membuat Captcha Dengan HTML</a><br /><br />
<style>
.captcha
{ font: italic bold 16px "Arial", cursive, sans-serif; 
color:#a0a0a0;background-color:#c0c0c0;
width:100px;border-radius: 5px;
text-align:center;
text-decoration:line-through;
}
.errmsg
{color:#ff0000;}
</style>
<script>
var captcha= new Array ();
function validateRecaptcha(){
    var recaptcha= document.getElementById("recaptcha").value;;
    var validRecaptcha=0;
    for(var z=0; z<6; z++){
        if(recaptcha.charAt(z)!= captcha[z]){
            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';
    }
}
function createCaptcha(){
    for(q=0; q<6 ; q++){
        if(q %2 ==0){
            captcha[q] = String.fromCharCode(Math.floor((Math.random()*26)+65));
        }else{      
            captcha[q] = Math.floor((Math.random()*10)+0);
        }
    }
    thecaptcha=captcha.join("");
    document.getElementById('captcha').innerHTML=
     "<span class='captcha'> " + thecaptcha+ " </span>" + "  <a onclick='createCaptcha()' href='#'>recaptcha</a>"; 
}
</script>
</head>
<body>
<table>
<tr><td>Captcha</td>
    <td id="captcha">
    <script> createCaptcha(); </script>
    </td>
</tr>
<tr>
    <td>Type Captcha</td>
    <td><input type="text" name="recaptcha" id="recaptcha" placeholder="Type the captcha"/></td>
    <td id="errCaptcha" class="errmsg"></td>
</tr>
<tr>
    <td colspan="2" style="text-align:right;">
        <input type="button" value="Submit" onClick="validateRecaptcha()"/>
    </td>
</tr>
</table>
</body>
</html>
Script by : <a href='https://lazycodding.blogspot.com' taget='blank'><bold>LazyCodding</bold></a>

2. Lalu Paste kan Script tersebut kedalam Notepad++ sehingga akan menjadi seperti gambar di bawah ini

3. Save kode di atas dengan nama “ Captcha.html”

4. Lalu buka file yang telah di buat tadi dengan aplikasi browser anda, maka hasilnya akan seperti gambar di bawah ini

5. Tinggal anda ujicoba Captcha yang anda buat tadi dengan cara mengisi type captcha nya lalu submit. Jika anda mengisi kode captcha nya dengan benar maka akan muncul tulisan “OK” tetapi jika anda mengisi kode captcha yang salah makan akan muncul tulisan “ Sorry, Wrong Re-captcha” , begitulah cara menguji apakah captcha yang kita buat tadi berjalan atau tidak.

Dari script di atas anda bisa mengkreasikan nya lagi dengan ide-ide kreatif anda lain nya. Jangan hanya sekedar copy paste saja. Karena itu tidak akan membuat anda pintar dalam pemrograman HTML. TEMUKAN IDE-IDE BRILIAN LAIN NYA,, SALAM BLOGGER.

Itulah sedikit tutorial Membuat Captcha Dengan HTML. Semoga artikel admin kali ini dapat bermanfaat bagi anda semua dan jangan lupa untuk tetap mengikuti artikel dari LazyCodding selanjutnya. Jika anda menemukan error dari Script di atas silahkan tinggalkan komentar atau bisa langsung bertanya pada admin LazyCodding.

Keep Follow Next article from LazyCodding,, thank you.

Artikel Terbaru

Breaking

Wednesday, July 26, 2017

Ingin menggunakan Captcha di Blog/Web anda ?? Berikut Cara Membuat Captcha Dengan HTML

5 comments:

Cari Artikel

Label

Report Abuse

Tentang Saya

Pengertian,Fungsi dan Sejarah PHP

Formulir Kontak

Recent

Comments

Arsip Blog

Tags

Pages

Artikel Terbaru

Artikel Populer