Saturday, October 26, 2013

Form Divalidasi Beserta Captcha di PHP

Kembali lagi di PHP

 Sekarang saya membahas form seperti di PHP 4

 tapi kali ini form saya disertai validasi dan captcha

 sebelumnya, di filepdf  ini ada beberapa tipe validasi
ada yang menggunakan kata-kata ataupun gambar

 download disini (file-save as)

Lalu sekarang kita bahas tentang captcha

 captcha yaitu suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia." CAPTCHA.

 sebelum itu,  buat gambar untuk background captcha
saya membuatnya di photoshop
misalnya seperti ini
captcha buatanku._.
script captcha.php

<?php
session_start();
$alphaNumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$random = substr(str_shuffle($alphaNumeric),0,5);
$image = imagecreatefromjpeg("images/captcha.jpg");
$textcolor = imagecolorallocate ($image, 2, 1, 3); //hitam
imagestring ($image, 5, 5, 8, $random, $textcolor);
$_SESSION['image_random_value']=md5($random);
//header("Expires: MOn, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s"). " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header('Content-type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Buat frm.php
sebenarnya intinya sama seperti php sebelumnya
tapi disini scriptnya lebih banyak dan sedikit ruwet.

<?php
    session_start();
    if(isset($_SESSION['error'])){
 $error = $_SESSION['error'];
    $true = $_SESSION['true'];
 $_POST = $_SESSION['post'];
 unset ($_SESSION['error']);
    unset ($_SESSION['true']);
 unset ($_SESSION['post']);
    }

  if (empty($nama) || empty($gender) || empty($email) || empty($alamat) || empty($tempat) || empty($pwd) || empty($agama) || empty($noHP) || empty($captcha) || empty($hari) ||empty($tahun) ||empty($bulan) ){
?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="nah.css" />
<title>Formulir</title>
</head>

 <body style="background-image:url(images/bcg.png); background-repeat:repeat;">
<form action="action.php" name="form1" method="post">
<center>

 <h2><font color="#FFFFFF"> Masukkan data dirimu di Form berikut :</font></h2>
<table  cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" border="0" width="700" height="420" Style='border-radius:10px;border-color:white;
box-shadow: 0 0 5px 5px black;'>

  <tr>
     <td rowspan="11" width="230" Style=' border-top-left-radius:20px;border-bottom-left-radius:20px '><center><img src="images/img.jpg" width="200" 0height="200" /></center></td>
        <td colspan="3" Style=' border-top-right-radius:20px; '>
         <center><font color="#445B23"><b>INPUTAN BIODATA</b></font></center>
        </td>
       
    </tr>
    <tr>
     <td> Nama Lengkap</td>
        <td width="1"><center>:</center></td>
        <td><input  type='text' name="nama" size="40" placeholder="Nama Lengkap" value="<?php echo isset($_POST['nama']) ? $_POST['nama'] : ''; ?>" />
   <font size="-1" color="red"><?php echo isset($error['nama']) ? $error['nama'] : '';?></font>
        <font ><?php echo isset ($true['nama'])? $true['nama'] : '';?></font>
        </td>
    </tr>
    <tr>
     <td> Jenis Kelamin</td>
        <td><center>:</center></td>
        <td>
        <input type="radio" name="gender" value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?>Laki - Laki <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>"/>&nbsp;Laki-Laki
   
            <input type="radio"  name=gender value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?> Perempuan <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>" />&nbsp;Perempuan
            <font size="-1" color="red"><?php echo isset($error['gender']) ? $error['gender'] : '';?></font>
     <?php echo isset ($true['gender'])? $true['gender'] : '';?>
     
        </td>
    </tr>
   
    <tr>
     <td>TTL</td>
        <td><center>:</center></td>
        <td>
    <input type='text' placeholder="Tempat" name="tempat" size="4" value="<?php echo isset($_POST['tempat']) ? $_POST['tempat'] : ''; ?>" />
        <font size="-1"  color="red"><?php echo isset($error['tempat']) ? $error['tempat'] : '';?></font>
  <font ><?php echo isset ($true['tempat'])? $true['tempat'] : '';?></font>
<?php
$bulan=array("Januari" ,"Februari", " Maret" ,"April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember");

echo '<select name="hari" >';
echo "<option value=hari>Hari</option>";
$hari=1;
$haripilih = isset($_POST['hari']) ? $_POST['hari'] : "hari";

 while($hari<=31) {
echo "<option value=$hari";
echo  $hari == $haripilih ? " selected" : "";
echo '>'.$hari.'</option>';
$hari++;
}
echo '</select>';

 echo '<select name="bulan">';
echo "<option value=bulan>Bulan</option>";
$jumlah=count($bulan);
$bulanpilih = isset($_POST['bulan']) ? $_POST['bulan'] : "bulan";
for($i=0; $i<$jumlah ; $i++){
 echo "<option value=$bulan[$i]";
 echo $bulan[$i] == $bulanpilih ? " selected" : "";
 echo '>'.$bulan[$i].'</option>';
}
echo '</select>';
echo '<select name="tahun">';
echo "<option value=tahun>Tahun</option>";
$tahunpilih = isset($_POST['tahun']) ? $_POST['tahun'] : "tahun";
for($tahun=1995; $tahun<2010; $tahun++){
echo "<option value='$tahun'";
echo $tahun == $tahunpilih? " selected" : "";
 echo '>'.$tahun.'</option>';
}
echo '</option>';

 ?>
        </td>
    </tr>
    <tr>
    <td>Agama</td>
        <td><center>:</center></td>
        <td><input type='text' placeholder="Agama" name="agama" size="40" value="<?php echo isset($_POST['agama']) ? $_POST['agama'] : ''; ?>" />
        <font size="-1" color="red"><?php echo isset($error['agama']) ? $error['agama'] : '';?></font>
        <font ><?php echo isset ($true['agama'])? $true['agama'] : '';?></font>
        </td></tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td><input type='text' name="email" placeholder="E-mail" size="40" value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>" />
        <font size="-1" color="red"><?php echo isset($error['email']) ? $error['email'] : '';?></font>
        <font ><?php echo isset ($true['email'])? $true['email'] : '';?></font>
        </td>
    </tr>
    <tr>
    <td>Password</td>
        <td><center>:</center></td>
        <td><input type='password' placeholder="Password" name="pwd" size="40" value="<?php echo isset($_POST['pwd']) ? $_POST['pwd'] : ''; ?>" />
        <font size="-1" color="red"><?php echo isset($error['pwd']) ? $error['pwd'] : '';?></font>
        <font ><?php echo isset ($true['pwd'])? $true['pwd'] : '';?></font>
        </td>
     </tr>
     <tr>
     <td>Alamat</td>
        <td><center>:</center></td>
        <td><input type='text' placeholder="Alamat" name="alamat" size="40" value="<?php echo isset($_POST['alamat']) ? $_POST['alamat'] : ''; ?>" />
        <font size="-1" color="red"><?php echo isset($error['alamat']) ? $error['alamat'] : '';?></font>
        <font ><?php echo isset ($true['alamat'])? $true['alamat'] : '';?></font>
        </td>
        </tr>
    <tr>
     <td>No. HP</td>
        <td><center>:</center></td>
        <td><input type='text' placeholder="No.HP" name="HP" size="40" value="<?php echo isset($_POST['HP']) ? $_POST['HP'] : ''; ?>" />
        <font size="-1" color="red"><?php echo isset($error['HP']) ? $error['HP'] : '';?></font>
        <font ><?php echo isset ($true['HP'])? $true['HP'] : '';?></font>
        </td>
    </tr>
     <tr>
     <td>Captcha  <img height="30" style="vertical-align:middle;" src="captcha.php?data=<?php echo date('YmdHis');?> alt="securiy image" /></td>
        <td><center>:</center></td>
        <td>
       
         <input name="pin" placeholder="Captcha" type="text"  value="<?php echo isset($_POST['captcha']) ? $_POST['captcha'] : ''; ?>" />
         
        <font size="-1" color="red"><?php echo isset($error['pin']) ? $error['pin'] : '';?></font>
        <font ><?php echo isset ($true['pin'])? $true['pin'] : '';?></font>
 
        </td>
    </tr>
    <tr>

      <td colspan="3"  Style=' border-bottom-right-radius:20px;'><center>&nbsp;
  <button type="submit" name="submit">&nbsp;Kirim&nbsp;</button>&nbsp;<button type="reset" value="Refresh" ONCLICK="history.go(0)">&nbsp;Reset&nbsp;</button></center>
  </td>      
    </tr>

 </table>
</center>
</form>
<?php } ?>
</body>
</html>


 hasilnya




Siapkan gambar untuk tampilan error, sebenarnya ini sesuai selera masing masing

1. untuk yang benar
2. data yang dimasukkan kurang benar

3. inputan salah

usahakan gambar kecil saja, kalau belum kecil tinggal rezise

lalu buat action.php untuk menampilkan yang sudah diinputkan tadi
<link rel="stylesheet" type="text/css" href="nah.css" />
  <title>Hasil</title>

     <body style="background-image:url(images/bcg.png); background-repeat:repeat;">
<?php
session_start();
if($_POST){
$nama=$_POST['nama'];
$gender=isset($_POST['gender'])? $_POST['gender']:"";
$tempat=$_POST['tempat'];
$hari=$_POST['hari'];
$bulan=$_POST['bulan'];
$tahun=$_POST['tahun'];
$agama=$_POST['agama'];
$alamat=$_POST['alamat'];
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$noHP=$_POST['HP'];

 $CAPTCHA=$_POST['pin'];
$emailpattern = '/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/';

 $imgTrue ='<img src="images/true.png" style="vertical-align:middle"/><br>';
$imgEmp ='<img src="images/false.png" style="vertical-align:middle"/><br>';
$imgErr ='<img src="images/warning.png" style="vertical-align:middle"/><br>';
$error = array();
    if(empty ($nama)){
        $error['nama'] = $imgEmp.'Nama harus diisi';
    } else if(preg_match('/[^a-zA-Z ]/', $nama))           {
        $error['nama'] = $imgErr.'Nama hanya mengandung huruf saja';
    } else{
        $true['nama'] = $imgTrue;
    }

if(empty ($agama)){
        $error['agamat'] = $imgEmp.'Agama tidak boleh kosong';

    } else{
        $true['agama'] = $imgTrue;
    }

     if(empty ($email)){
        $error['email'] = $imgEmp.'Email tidak boleh kosong';
    } elseif (!preg_match($emailpattern, $email)){
        $error['email'] = $imgErr.'Format Email  (xxxxxxx@xxxxx.xxx)';
    } else{
        $true['email'] = $imgTrue;
    }

 if(empty ($alamat)){
        $error['alamat'] = $imgEmp.'Alamat tidak boleh kosong';

    } else{
        $true['alamat'] = $imgTrue;
    }

 if(empty ($pwd)){
        $error['pwd'] = $imgEmp.'Password tidak boleh kosong';

    } else{
        $true['pwd'] = $imgTrue;
    }

 if (empty($gender)){
  $error['gender'] = $imgEmp.'Jenis kelamin masih kosong!'; 
 } else{
  $true['gender'] = $imgTrue;
 }

 if(empty ($tempat)){
        $error['tempat'] = $imgEmp.'TTL tidak boleh kosong';

    } else{
        $true['tempat'] = $imgTrue;
    }

 if(empty ($noHP)){
        $error['HP'] = $imgEmp.'No HP tidak boleh kosong';

    }  else if(preg_match('/[^0-9 ]/', $noHP))           {
        $error['HP'] = $imgErr.'Nomer HP hanya mengandung angka saja';
 }
 else{
        $true['HP'] = $imgTrue;
    }

 if(empty ($CAPTCHA)){
        $error['pin'] = $imgEmp.'Anda harus mengisi captcha';

    } elseif (md5($_POST['pin']) <> $_SESSION['image_random_value']){
  $error['pin'] = $imgErr.'Anda bukan manusia';
    
    } else {
      $true['pin'] = $imgTrue;
 }

if(empty($error)){
 if($gender=='Laki - Laki'){
  echo'<h2><font color="white"><center>Selamat Datang Saudara, '.$nama.'<br>Berikut Biodatamu</center></font></h2>';
  }
 else{
  echo'<h2><font color="white"><center>Selamat Datang Saudari, '.$nama.'<br>Berikut Biodatamu</center></font></h2>';
  }
print("
<center>
<table  cellspacing='3' cellpadding='0' bgcolor='#FFFFFF' border='0' width='550' height='300' Style='border-radius:20px;border-color:white;box-shadow: 0 0 5px 5px black; '>
 <tr>
     
        <td colspan='4' Style=' border-top-left-radius:20px; border-top-right-radius:20px'>
         <center><strong><font color='#445B23'><div class='Da'>DATA DIRI</div></font></strong></center>
        </td>
          
    </tr>
    <tr>
     <td> Nama Lengkap </td>
        <td width='1'><center>:</center></td>
        <td> $nama</td>
  

     </tr>
    <tr>
     <td> Jenis Kelamin</td>
        <td><center>:</center></td>
        <td> $gender </td>
    </tr>
  
    <tr>
     <td>TTL</td>
        <td><center>:</center></td>
        <td>$tempat, $hari - $bulan - $tahun</td>
    </tr>
<tr>
     <td>Agama</td>
        <td><center>:</center></td>
        <td> $agama</td>
    </tr>
<tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td>$email</td>
    </tr>
    <tr>
     <td>Password</td>
        <td><center>:</center></td>
        <td> $pwd</td>
    </tr>
    <tr>
     <td>Alamat</td>
        <td><center>:</center></td>
        <td> $alamat</td>
    </tr>
    <tr>
     <td Style=' border-bottom-left-radius:20px'>No. HP</td>
        <td><center>:</center></td>
        <td>$noHP</td>
    </tr>
   <tr>
   

 </table>
</center>
");

  }

 else{
 $_SESSION['error']=$error;
    $_SESSION['true'] =$true;
 $_SESSION['post'] =$_POST;
 header("location:frm.php");
}
}

?>
contoh ketika inputan data ada yang salah :



setelah semuanya benar 








sekian postingan kali ini
Terima kasih :)
pukul

No comments:

Post a Comment