Halo teman-teman, di kesempatan kali ini saya akan mencoba merancang form dengan captcha yang saya dapatkan dari diantara blog. Kita akan menggunakan jquery dan php di dalamnya. Pertama-tama kita mesti merancang folder di pada folder xampp/htdocs. Saya beri nama phpcatcha. Sebelum memulai kita persiapkan dahulu jquerynya. Teman-teman dapat copy segala text di url ini http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js dan paste di 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 gunakan. Oke semuanya telah siap, kita mulai saja. Pertama-tama 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 bikin CSSnya. Selaku 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 pada folder phpcaptcha. Terakhir kita bikin file php bagi 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 pada folder phpcaptcha. Setelah selesai coba jalankan dengan mengetikkan localhost/phpcaptcha.
sumber :kursuswebprogramming.com/blog/
