Membina Contact Form Bersama Captcha (Kod Sekuriti)

Membina Contact Form Bersama Captcha (Kod Sekuriti)

Pernahkah anda lihat borang-borang yang mempunyai CAPTCHA? Contohnya borang login, daftar, hubungi kami dan sebagainya. Jom berkenalan dahulu sebelum lihat demo.

Apakah CAPTCHA?

Captcha merupakan singkatan dari “Completely Automated Public Turing test to tell Computers and Humans Apart” adalah sejenis kaedah challenge-respons untuk memastikan bahawa respon yang dihasilkan hanya boleh dibuat oleh manusia dan bukannya  komputer.

Manakala dari segi istilah “CAPTCHA” berasal dari kata bahasa Inggeris “capture” atau menangkap.

Apa tujuan CAPTCHA? Bila diperlukan?

CAPTCHA digunakan untuk mengelakkan perisian automatik (bot) dari melakukan tindakan sama seperti manusia melakukan sign up atau login dan sebagainya. Misalnya ketika sign up untuk akaun e-mel baru, anda akan menemui CAPTCHA di bahagian bawah sign-up, Ini sebenarnya untuk memastikan bahawa form tersebut hanya boleh diisi oleh manusia dan bukannya perisian automatik atau komputer bot. Cuba anda bayangkan adalah mustahil bagi bot untuk meneka tepat CAPTCHA yang dihasilkan. Jika kaedah ini tidak digunakan, maka bertambah banyaklah akaun yang dihasilkan oleh bot.

Skrip CAPTCHA

Sebenarnya terdapat banyak pilihan untuk menggunakan CAPCHA ini. Dalam tutorial ini saya akan menunjukkan salah satu kaedah yang biasa saya gunakan. Yang penting ianya mudah.

captcha

Lihat DEMO

LIhat DEMO Versi PRO

Tutorial:

LANGKAH 1

Bina satu fail baru dan namakannya php_captcha.php Taipkan kod ini:

 <?php
session_start();

$RandomStr = md5(microtime());// md5 to generate the random string

$ResultStr = substr($RandomStr,0,3);//trim 5 digit

$NewImage =imagecreatefromjpeg("img.jpg");//image create by existing image and as back ground

$LineColor = imagecolorallocate($NewImage,233,239,239);//line color
$TextColor = imagecolorallocate($NewImage, 255, 255, 255);//text color-white

imageline($NewImage,1,1,40,40,$LineColor);//create line 1 on image
imageline($NewImage,1,100,60,0,$LineColor);//create line 2 on image

imagestring($NewImage, 5, 20, 10, $ResultStr, $TextColor);// Draw a random string horizontally

$_SESSION['key'] = $ResultStr;// carry the data through session

header("Content-type: image/jpeg");// out out the image

imagejpeg($NewImage);//Output image to browser

?>

LANGKAH 2

img

Sila download gambar ini. img.jpg (right click save as) dan masukkan ke folder yang sama dengan fail di atas.

 

LANGKAH 3

Bina fail borang hubungi. Dalam contoh ini saya gunakan index.php Kodnya:

<?
session_start();

if ($_REQUEST['act'] == "email")
{
    $nama= (isset($_REQUEST['nama'])) ? trim($_REQUEST['nama']) : '';
    $email= (isset($_REQUEST['email'])) ? trim($_REQUEST['email']) : '';
    $tel= (isset($_REQUEST['tel'])) ? trim($_REQUEST['tel']) : '';
    $subjek= (isset($_REQUEST['subjek'])) ? trim($_REQUEST['subjek']) : '';
    $mesej= (isset($_REQUEST['mesej'])) ? trim($_REQUEST['mesej']) : '';
    

    if ($nama == '')
    $errors ="Nama Perlu dimasukkan<br/>";
    
    if ($email == '')
    $errors="Email Perlu dimasukkan<br/>";
    
    if ($subjek == '')
    $errors="Subjek Perlu dimasukkan<br/>";
    
    if ($mesej == '')
    $errors="Sila masukkan mesej / pertanyaan<br/>";
    
    $key=substr($_SESSION['key'],0,3);
    $number = $_REQUEST['number'];
    if($number!=$key)
    $errors= 'No Sekuriti Tidak Sah<br/>';
    
    if ( !$errors ) {
    
        // -------- Hantar Email START --------------
        $adminemail='Support <support@domainanda.com>';
        $subject =  'Pertanyaan Oleh Ahli ' . $nama . ' - DOMAINANDA.COM';
        $message = 'Hai Admin,  
    
    Ahli  ' .$nama. ' , telah menghantar borang hubungi.
    
    ------------------------------------------
    MAKLUMAT AHLI
    ------------------------------------------
    Nama       :' .$nama. '
    Email Ahli :' .$email. '
    Tel Bimbit :' .$tel. '
    
    
    Subjek     :' .$subjek. '
    Pertanyaan :' .$mesej. '
    ------------------------------------------
    
    
    Regards;
    ' .$nama. '
    ';
            //mail($adminemail, $subject, $message, "From: " .$nama. " < " .$email. " >\r\nReply-To: ".$email."\r\nReturn-Path: ".$email."\r\n");
            
            // -------- Hantar Email END --------------    
    
    
        $success = TRUE;
        }
}
?>


<style type="text/css">
<!--
.style11 {    color: #FFFFFF;
    font-weight: bold;
}

-->
</style>




<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="1020" border="0" align="center" cellpadding="1" cellspacing="1" class="style4">
      
      <tr>
        <td align="center"><p>
          <? if ($success) { ?></p>
          <table width="90%" cellspacing="0" cellpadding="0">
            <tr>
              <td class="icon-ok"><font color="green">Email Anda telah dihantar. 
Pihak kami akan respond dengan kadar segera</font> </td>
            </tr>
          </table>
          <p>
            <script language='JavaScript' type="text/javascript">
            alert('Email Anda telah dihantar. Pihak kami akan respond dengan kadar segera');
            </script>
            <? }else{ ?>
          </p>
          <table width="90%" align="center" cellpadding="0" cellspacing="0" class="icon-go" style="border-style:dotted" >
            <tr>
              <td><div>
                  <blockquote>
                    <form action="" method="post" name="form1" id="form1">
                      <div id="inputs">
                      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="style4">
                        
                        <tr>
                          <td colspan="3" align="center"><? if ($errors ) { ?>
                            <table width="100%" cellspacing="0" cellpadding="0">
                              <tr>
                                <td><font color="#FF0000"><? echo $errors; ?></font></td>
                              </tr>
                            </table>
                            <? } ?></td>
                          </tr>
                        <tr>
                          <td width="15%">Nama</td>
                          <td width="48%"><input name="nama" type="text" id="nama" value="<? echo $nama; ?>" size="40" title="Sila masukkan nama" /></td>
                          <td width="37%" rowspan="8" align="right"><img src="greenmouse.png" width="400" height="239" /><br />
                          <br />
                              Email : support [at ] belajarphp.com<br />
                              SMS : 017 - 3969383 </td>
                        </tr>
                        <tr>
                          <td>Email</td>
                          <td><input name="email" type="text" id="email" value="<? echo $email; ?>" size="40" title="Masukkan email anda" /></td>
                          </tr>
                        <tr>
                          <td>Telefon</td>
                          <td><input name="tel" type="text" id="tel" value="<? echo $tel; ?>" /></td>
                          </tr>
                        <tr>
                          <td>Subjek</td>
                          <td><input name="subjek" type="text" id="subjek" value="<? echo $subjek; ?>" size="40" /></td>
                          </tr>
                        <tr>
                          <td>Soalan</td>
                          <td><textarea name="mesej" cols="30" rows="4" id="mesej"></textarea></td>
                          </tr>
                        <tr>
                          <td>No Sekuriti</td>
                          <td valign="top"><table cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="85"><img src="php_captcha.php" /></td>
                                <td width="50" align="center"><input name="number" type="text" id="\&quot;number\&quot;" size="4" title="Masukkan No Sekuriti" /></td>
                              </tr>
                          </table></td>
                          </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                          </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td><label for="Submit"></label>
                              <input name="Submit" type="submit" class="button_oren" id="Submit" value="Hubungi Kami Sekarang"  />
                              <input name="act" type="hidden" id="act" value="email" /></td>
                          </tr>
                      </table>
                      </div>
                    </form>
                  </blockquote>
              </div></td>
            </tr>
          </table>
          # Free Contact Us Form with Captcha by BelajarPHP.com.<br />
          <br />
          <? } ?></td>
      </tr>
    </table></td>
  </tr>
  
</table>

 

Tak menjadi? Jangan pening. Download (FREE) source code di sini.

Leave a Reply

comment-avatar

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.