Cegah Spam dengan Menggunakan QapTcha

Cegah Spam dengan Menggunakan QapTcha

Teknologi spam semakin hebat. Dahulu, orang-orang dibayar untuk menyebarkan spam secara manual. Seiring dengan perkembangan teknologi, maka spam sudah dilakukan oleh komputer (robot). Namun…

Teknologi spam semakin hebat. Dahulu, orang-orang dibayar untuk menyebarkan spam secara manual. Seiring dengan perkembangan teknologi, maka spam sudah dilakukan oleh komputer (robot). Namun justru itu tercipta kelemahan yang cukup besar, yaitu tidak bisa membaca konfirmasi yang “berbau” manusia dan justru lebih mudah terlacak dari jejak-jejaknya.

Salah satu sasaran empuk program spammer adalah form di sebuah website. Bila form itu terbuka untuk umum, program dapat dengan mudah mendeteksi adanya kode html form kemudian mengisikan seluruh field yang ada, kemudian mengirimkannya. Salah satu contoh yang banyak terlihat adalah pada blog dengan sistem komentar pengunjung.

Ada banyak pula cara penanggulangannya, antara lain menggunakan servis engine anti spammer seperti Akismet, menggunakan text captcha (termasuk recaptcha), menggunakan logical captcha (hitung-hitungan), dan deteksi email atau IP pengirim. Masing-masing memiliki kelebihan dan kekurangannya sendiri. Ada yang cukup efektif, namun kurang user-friendly. Ada juga yang sangat user-friendly, namun performa dapat menjadi lebih lambat dan berbayar cukup mahal.

Pada artikel ini penulis mencoba berbagi salah satu cara yang mudah untuk menanggulangi spam pada berbagai jenis form. Sistemnya hampir sama dengan captcha, namun lebih user-friendly dan dapat diimplementasikan pada touchscreen. Selain itu, library ini merupakan plugin yang bekerja dengan menggunakan jQuery. Penerapannya, pengunjung cukup menggeser slider ke kanan untuk mengaktifkan tombol submit. Untuk lebih jelasnya, ikuti langkah-langkah berikut ini.

  1. Plugin jQuery satu ini bernama Qaptcha. Pertama-tama Anda harus mendownloadnya terlebih dahulu di http://www.myjqueryplugins.com/QapTcha. Versi terbaru saat artikel ini ditulis adalah v3.0.
  2. Setelah itu, ekstrak file ZIP hasil download ke dalam folder proyek web Anda. Yang perlu Anda ekstrak hanyalah folder images, jquery, dan php. Setelah itu, Anda bisa membuat file index.php untuk mencoba menggunakan Qaptcha ini. Sehingga, struktur file dalam proyek Anda seperti pada gambar.
  3. Langkah berikutnya adalah mengisi file index.php dengan kode standar, yaitu untuk memasukkan css, javascript, dan file gambar ke dalam halaman website. Buatlah seperti kode berikut ini.
    <?php
    session_start();
    ?>
    <!doctype html>
    <html>
      <head>
        <title>Test QapTcha untuk BisaKomputer.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
          form{margin:30px;width:330px}
          label{float:left;clear:both;width:100px;margin-top:10px}
          input, textarea {float:left;margin-top:10px}
          .clr{clear:both}
          .notice {background-color:#d8e6fc;color:#35517c;border:1px solid #a7c3f0;padding:10px}
        </style>
        <link rel="stylesheet" type="text/css" href="jquery/QapTcha.jquery.css" />
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui.js"></script>
        <script type="text/javascript" src="jquery/jquery.ui.touch.js"></script>
        <script type="text/javascript" src="jquery/QapTcha.jquery.js"></script>
      </head>
      <body>
    
      </body>
    </html>
  4. Biasanya, robot spam akan mengisi semua input kemudian mengirimnya. Ide yang diterapkan di Qaptcha ini bekerja dengan cara membuat sebuah input lagi yang diisi dengan nilai acak. Program diatur hanya akan menerima data tersebut bila input buatan Qaptcha ini telah kosong, yang berarti itu harus dilakukan oleh pengunjung dengan cara menggeser slidernya. Tidak hanya itu, Qaptcha juga mengirimkan data dengan menggunakan AJAX untuk mengatur nilai sebuah session data menjadi “true”. Sehingga bila javascript dinonaktifkan, maka data tidak akan bisa terkirim (bot biasanya tidak dapat mengatasi javascript untuk melakukan spam). Untuk lebih jelasnya, Anda bisa meletakkan kode PHP berikut ini di dalam tag body bagian atas sendiri. Kode inilah yang akan mengecek apakah user sudah mengisi captcha dengan benar.
        <?php
        if(isset($_POST['submit'])) {
          $response = '<div class="notice">';
    
          if (isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) {
            $response .= 'Form has been submited';
            unset($_SESSION['iQaptcha']);
          }
          else {
            $response .= 'Form can not be submited';
          }
    
          $response .= '</div>';
    
          echo $response;
        }
        ?>
  5. Kemudian, di bawah kode tersebut, Anda bisa membuat form sesuka Anda. Komponen paling penting dari form ini untuk mengaktifkan Qaptcha adalah Anda menyediakan satu div yang nantinya secara otomatis akan diubah menjadi sebuah input oleh plugin Qaptcha. Untuk itu, Anda bisa membuat kode form seperti berikut ini.
        <h2>Demo Qaptcha untuk BisaKomputer.com</h2>
        <form method="post" action="">
          <fieldset>
            <label>Name</label> <input type="text" name="name" />
            <label>Email</label> <input type="text" name="email" />
            <label>Comment</label> <textarea name="comment"></textarea>
            <div class="clr"></div>
            <div class="QapTcha"></div>
            <input type="submit" name="submit" value="Submit form" />
          </fieldset>
        </form>
  6. Di bagian akhir sebelum penutup tag body, Anda tinggal memanggil fungsi Qaptcha untuk mengaktifkannya.
        <script>
          $(document).ready(function() {
            $('.QapTcha').QapTcha({});
          });
        </script>
  7. Form dengan qaptcha telah selesai dibuat. Cobalah akses proyek Anda menggunakan browser favorit Anda.

    Tampilan hasil percobaan QapTcha

  8. Anda bisa mencoba menggeser slidernya ke kanan untuk mengujinya. Qaptcha ini menyediakan 5 opsi yang bisa Anda lihat secara lengkap di website resminya. Dengan memanfaatkan berbagai opsi itu Anda bisa bereksplorasi lebih lanjut. Selamat mencoba.

    Setelah digeser, akan muncul notifikasi

Artikel oleh Penulis dengan versi sebelumnya telah dipublikasikan di PC Mild edisi 14/2011
Tag: , , , , ,

3 Comments

Leave Comment
  1. sip..mau saya coba dulu slidernya mas
    saya pas ngeliat captchanya photobucket kok di slide dan mantep bgt gitu jadi saya nyari tuto di situs luar negeri tapi gk ngerti, akhirnya nemu ini hehe :)

  2. Waduh, pakai edit script segala,

    adakah yang pakai plugin ?

Write Comment

Your email will not be published. The marked label is required.