Widget HTML #1

Beranda / CSS / HTML / JavaScript

Membuat Form CAPTCHA 4-Digit dengan HTML, CSS, jQuery, dan Bootstrap

Posting Komentar

Halo teman-teman! Pernah nggak sih kalian ketemu CAPTCHA di sebuah website yang meminta kita memasukkan kode acak untuk verifikasi? Nah, pada artikel kali ini, kita akan membuat aplikasi sederhana yang menampilkan CAPTCHA 4-digit. CAPTCHA ini akan kita buat menggunakan HTML, CSS, jQuery, dan sedikit tambahan Bootstrap agar tampilannya lebih cantik.

CAPTCHA adalah singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart. Fungsinya, tentu saja, untuk memastikan bahwa yang mengakses situs atau layanan online benar-benar manusia, bukan bot. Jadi, dalam artikel ini kita akan membuat CAPTCHA yang bisa:

  • Menampilkan 4 digit angka secara acak.
  • Menggunakan font yang juga acak dan menampilkan CAPTCHA dalam bentuk gambar.
  • Mencegah pengunduhan gambar CAPTCHA dengan klik kanan.
  • Menggunakan Bootstrap untuk tampilan yang rapi dan responsif.

Ayo kita mulai dari langkah pertama!

1. Membuat Struktur Dasar HTML

Langkah pertama adalah kita buat struktur HTML-nya terlebih dahulu. Kita juga akan menyertakan Bootstrap untuk membuat tampilannya lebih rapi. Kalau teman-teman belum tahu, Bootstrap adalah framework CSS yang mempermudah kita dalam membuat layout yang cantik dan responsif.

Berikut adalah kode HTML dasarnya:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAPTCHA 4 Digit</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center vh-100">
        <div class="captcha-container card p-4 shadow-sm">
            <h2 class="text-center mb-4">CAPTCHA Verification</h2>
            <canvas id="captchaCanvas" width="150" height="50" class="border mb-3"></canvas>
            <div class="d-flex justify-content-between mb-3">
                <button id="reloadCaptcha" class="btn btn-outline-primary">Reload CAPTCHA</button>
            </div>
            <div class="mb-3">
                <input type="text" id="captchaInput" class="form-control" placeholder="Enter CAPTCHA">
            </div>
            <div class="d-grid">
                <button id="submitCaptcha" class="btn btn-primary">Submit</button>
            </div>
            <p id="captchaMessage" class="text-center mt-3"></p>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Penjelasan singkat:

  • Di bagian <head>, kita menambahkan link ke Bootstrap agar nanti semua elemen seperti tombol, form input, dan container-nya memiliki style yang rapi.
  • Di dalam <body>, kita buat kontainer yang diisi dengan elemen canvas untuk menampilkan CAPTCHA dalam bentuk gambar, form input untuk memasukkan CAPTCHA, dan tombol untuk reload dan submit.

2. Styling dengan CSS

Untuk membuat tampilannya lebih enak dipandang, kita akan menambahkan beberapa kode CSS. Walaupun sudah menggunakan Bootstrap, kita masih perlu beberapa penyesuaian agar CAPTCHA lebih menarik. 


body {
    background-color: #f4f4f4;
}

.captcha-container {
    max-width: 350px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

canvas {
    display: block;
    margin: 0 auto;
}

Penjelasan:

  • background-color: #f4f4f4 memberikan warna latar belakang abu-abu muda untuk halaman.
  • .captcha-container kita buat maksimal selebar 350px agar terlihat proporsional di berbagai ukuran layar. Kita juga tambahkan box-shadow agar tampilannya sedikit timbul.

3. Membuat CAPTCHA dengan JavaScript

Sekarang, bagian yang paling seru! Kita akan menambahkan fungsi jQuery dan JavaScript untuk membuat CAPTCHA bekerja. Di sini kita akan:

  • Menghasilkan CAPTCHA acak berupa angka 4 digit.
  • Menampilkan CAPTCHA tersebut di dalam canvas dengan font yang juga acak.
  • Membuat CAPTCHA berubah saat tombol "Reload CAPTCHA" ditekan.
  • Mencegah pengunduhan gambar dengan klik kanan dan mengganti CAPTCHA secara otomatis saat ada upaya klik kanan.

Berikut adalah kode jQuery dan JavaScript-nya:


$(document).ready(function () {
    const canvas = document.getElementById('captchaCanvas');
    const ctx = canvas.getContext('2d');

    function getRandomFont() {
        const fonts = ['Arial', 'Courier', 'Georgia', 'Times New Roman', 'Verdana'];
        return fonts[Math.floor(Math.random() * fonts.length)];
    }

    function generateCaptcha() {
        let captcha = '';
        for (let i = 0; i < 4; i++) {
            captcha += Math.floor(Math.random() * 10); // Generate random digit 0-9
        }

        drawCaptcha(captcha);
        return captcha;
    }

    function drawCaptcha(captcha) {
        // Bersihkan canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Set latar belakang
        ctx.fillStyle = '#f1f1f1';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Gambar CAPTCHA dengan font dan warna acak
        for (let i = 0; i < captcha.length; i++) {
            const x = 20 + i * 25;
            const y = 40;
            ctx.font = `bold 30px ${getRandomFont()}`;
            ctx.fillStyle = getRandomColor();
            ctx.fillText(captcha[i], x, y);
        }
    }

    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    let generatedCaptcha = generateCaptcha();

    // Reload CAPTCHA
    $('#reloadCaptcha').click(function () {
        generatedCaptcha = generateCaptcha();
        $('#captchaMessage').text('');
    });

    // Cek CAPTCHA pada saat submit
    $('#submitCaptcha').click(function () {
        const enteredCaptcha = $('#captchaInput').val();

        if (enteredCaptcha === generatedCaptcha) {
            $('#captchaMessage').text('CAPTCHA is correct').css('color', 'green');
        } else {
            $('#captchaMessage').text('CAPTCHA is incorrect, try again').css('color', 'red');
        }
    });

    // Mencegah klik kanan dan regenerate CAPTCHA saat ada percobaan download
    $('#captchaCanvas').on('contextmenu', function (e) {
        e.preventDefault();  // Disable right-click context menu
        generatedCaptcha = generateCaptcha();  // Regenerate CAPTCHA
        alert('CAPTCHA regenerated due to attempted download!');
    });
});

Penjelasan singkat:

  • generateCaptcha(): Fungsi ini membuat kode acak 4 digit dan menampilkan hasilnya di canvas.
  • drawCaptcha(): Ini menggambar CAPTCHA di dalam canvas menggunakan font dan warna acak.
  • getRandomFont() dan getRandomColor(): Fungsi untuk mengambil font dan warna acak.
  • contextmenu event: Ini digunakan untuk mencegah pengguna mendownload gambar CAPTCHA dengan klik kanan. Kalau ada yang mencoba klik kanan, CAPTCHA akan tergenerate ulang.

4. Menjalankan dan Menguji CAPTCHA

Sekarang, teman-teman sudah memiliki semua komponen yang diperlukan untuk membuat CAPTCHA bekerja. Tinggal jalankan di browser dan tes:

  1. Saat pertama kali halaman dimuat, CAPTCHA akan ditampilkan.
  2. Coba klik tombol "Reload CAPTCHA", maka CAPTCHA akan tergenerate ulang.
  3. Masukkan CAPTCHA yang benar di form input, lalu klik submit. Jika benar, akan muncul pesan sukses, dan jika salah, akan muncul pesan gagal.
  4. Coba klik kanan di area CAPTCHA untuk mencoba mendownload gambar, CAPTCHA akan tergenerate ulang dan pesan peringatan akan muncul.

5. Menutup Artikel

Teman-teman, itulah cara membuat aplikasi CAPTCHA 4 digit dengan HTML, CSS, jQuery, dan Bootstrap. Walaupun ini adalah aplikasi sederhana, CAPTCHA seperti ini sangat penting untuk menjaga keamanan situs dari bot.

Jika teman-teman mau memodifikasi, bisa menambahkan lebih banyak fitur seperti CAPTCHA yang lebih kompleks dengan huruf besar-kecil, atau menambahkan noise pada CAPTCHA agar lebih sulit dibaca oleh bot.

Semoga artikel ini bermanfaat dan bisa membantu teman-teman memahami bagaimana membuat CAPTCHA dari nol. Jangan ragu untuk berkreasi dan kembangkan ide-ide kalian lebih jauh lagi. Happy coding, teman-teman!

Posting Komentar untuk "Membuat Form CAPTCHA 4-Digit dengan HTML, CSS, jQuery, dan Bootstrap"

Posting Komentar