Halo teman-teman, pada kesempatan kali ini saya akan mencoba membuat form dengan captcha yang saya dapatkan dari salah satu website. Kita akan menggunakan jquery dan php di dalamnya. Pertama kita harus membuat folder di dalam folder xampp/htdocs. Saya beri nama phpcatcha. Sebelum memulai kita persiapkan dahulu jquerynya. Teman-teman bisa copy semua text pada url ini http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js dan paste pada text editor teman-teman. Kemudian save dengan nama jquery.min.js didalam folder phpcaptcha. Lalu cari gambar berukuran 60px X 30px yang akan menjadi background dari captcha nanti dan taruh di folder phpcaptcha . Gambar yang saya gunakan bernama cap_bg.jpg. jadi nanti teman-teman dapat sesuaikan namanya dengan gambar yang teman-teman pakai. Oke semuanya sudah siap, kita mulai saja. Pertama ketikkan baris program berikut
<?php
session_start();
$cap = ‘notEq’;
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) {
  if ($_POST[‘captcha’] == $_SESSION[‘cap_code’]) {
      // Captcha verification is Correct. Do something here!
      $cap = ‘Eq’;
  } else {
      // Captcha verification is wrong. Take other action
      $cap = ”;
  }
}
?>
<!DOCTYPE HTML”>
<html>
  <head>
      <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
      <title>Captcha PHP Jquery</title>
      <script type=”text/javascript” src=”jquery.min.js”></script>
      <script type=”text/javascript”>
          $(document).ready(function(){
              $(‘#submit’).click(function(){
                  var name = $(‘#name’).val();
                  var msg = $(‘#msg’).val();
                  var captcha = $(‘#captcha’).val();
                 Â
                  if( name.length == 0){
                      $(‘#name’).addClass(‘error’);
                  }
                  else{
                      $(‘#name’).removeClass(‘error’);
                  }
Â
                  if( msg.length == 0){
                      $(‘#msg’).addClass(‘error’);
                  }
                  else{
                      $(‘#msg’).removeClass(‘error’);
                  }
Â
                  if( captcha.length == 0){
                      $(‘#captcha’).addClass(‘error’);
                  }
                  else{
                      $(‘#captcha’).removeClass(‘error’);
                  }
                 Â
                  if(name.length != 0 && msg.length != 0 && captcha.length != 0){
                      return true;
                  }
                  return false;
              });
Â
              var capch = ‘<?php echo $cap; ?>’;
              if(capch != ‘notEq’){
                  if(capch == ‘Eq’){
                      $(‘.cap_status’).html(“Captcha Benar”).fadeIn(‘slow’).delay(3000).fadeOut(‘slow’);
                  }else{
                      $(‘.cap_status’).html(“Captcha Salah!”).addClass(‘cap_status_error’).fadeIn(‘slow’);
                  }
              }
          });
      </script>
      <link href=”style.css” rel=”stylesheet”>
  </head>
  <body>
              Â
               <div style=’margin:30px auto; width:380px’>
               <h2>Form</h2>
      <form action=”index.php” method=”post”>
          <div id=”form”>
              <table border=”0″ width=”100%”>
                  <tr>
                      <td colspan=”2″><label>Nama:</label><label class=”mandat”> *</label><br/>
                          <input type=”text” name=”name” id=”name”/></td>
                  </tr>
                  <tr>
                      <td colspan=”2″><label>Pesan:</label><label class=”mandat”> *</label><br/>
                          <textarea name=”msg” id=”msg”></textarea></td>
                  </tr>
                  <tr>
                      <td colspan=”2″><label>Masukkan Capcha</label><label class=”mandat”> *</label></td>
                  </tr>
                  <tr>
                      <td width=”60px”>                         Â
                          <input type=”text” name=”captcha” id=”captcha” maxlength=”6″ size=”6″/></td>
                      <td><img src=”captcha.php”/></td>
                  </tr>
                  <tr>
                      <td><input type=”submit” value=”Submit” id=”submit”/></td>
                      <td></td>
                  </tr>
              </table>
           </div>
      </form>
      <div class=”cap_status”></div>
                               </div>
                              Â
  </body>
</html>
Â
Save dengan nama index.php didalam folder phpcaptcha. Setelah itu kita akan buat CSSnya. Sebagai berikut :
          #form{
              margin:100px;
              width: 350px;
              outline: 2px solid #DE0812;
              border: 1px solid #D90F20;
              padding: 10px;
               margin:0 auto;
          }
          #form label{
              font:bold 11px arial;
              color: #565656;
              padding-left: 1px;
          }
          #form label.mandat{color: #f00;}
          #form input[type=”text”]{
              height: 30px;
              margin-bottom: 8px;
              padding: 5px;
              font: 12px arial;
              color: #0060a3;
          }
          #form textarea{
              width: 340px;
              height: 80px;
              resize: none;
              margin: 0 0 8px 1px;
              padding: 5px;
              font: 12px arial;
              color: #0060a3;
          }
          #form img{
              margin-bottom: 8px;
          }
          #form input[type=”submit”]{
              background-color: #F21313;
              border: none;
              color: #fff;
              padding: 5px 8px;
              cursor: pointer;
              font:bold 12px arial;
          }
          .error{
              border: 1px solid red;
          }
           .cap_status{
              width: 350px;
              padding: 10px;
              font: 14px arial;
              color: #fff;
              background-color: #10853f;
              display: none;
          }
          .cap_status_error{
              background-color: #bd0808;             Â
          }
Â
Save dengan nama style.css di dalam folder phpcaptcha. Terakhir kita buat file php untuk menampilkan captchanya, baris progranya seperti ini.
<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION[‘cap_code’] = $ranStr;
$newImage = imagecreatefromjpeg(“cap_bg.jpg”);
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header(“Content-type: image/jpeg”);
imagejpeg($newImage);
?>
Â
Kemudian save dengan nama captcha.php di dalam folder phpcaptcha. Setelah selesai coba jalankan dengan mengetikkan localhost/phpcaptcha.