Praktikum PHP 6, Validation Form dengan PHP

Pada Praktikum ke 6 ini kita akan membuat VALIDASI FORM DENGAN PHP, langsung saja tanpa basa basi berikut contoh scriptnya, buat file baru bernama form.php,
<?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($email) || empty($pwd) || empty($agama) || empty($noHP) || empty($captcha) || empty($hari) ||empty($bualan) ||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="anu.css" />
<title>Formulir</title>
</head>
<body style="background-image:url(blue.jpg); background-repeat:repeat;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<form action="action.php" name="form1" method="post">
<table  cellspacing="0" cellpadding="4" bgcolor="#FFFF99" border="1" width="700" height="420" Style='border-radius:20px;border-color:white;
box-shadow: 0 0 5px 5px #FC6; position:fixed;left:350px;top:55px; border:#Fc3; border-top-left-radius:25px;'>
 <tr style="border-top-left-radius:25px;">
     <td rowspan="10" width="230" style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><center><img  src="logo.png" width="200" 0height="200" /></center></td>
        <td colspan="3" Style=' font-family:Verdana, Geneva, sans-serif; border-top-right-radius:20px;border:none;background:#Ff9; font-family:Verdana, Geneva, sans-serif; color:#000;"'>
         <center><strong><font color="#000000" face="sans-serif">INPUTAN BIODATA</font></strong></center>
        </td>       
    </tr>
    <tr style="border: none">
     <td style=" border:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;"> Nama Lengkap</td>
        <td width="1" style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;"><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 style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"> Jenis Kelamin</td>
        <td style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;">
        &nbsp;Laki-Laki<input type="radio" name="gender" value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?>Laki - Laki <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>"/>    
            &nbsp;Perempuan<input type="radio"  name=gender value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?> Perempuan <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>" />
            <font size="-1" color="red"><?php echo isset($error['gender']) ? $error['gender'] : '';?></font>
     <?php echo isset ($true['gender'])? $true['gender'] : '';?>      
        </td>
    </tr>
   
    <tr>
     <td style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;">TTL</td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;">
    <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 style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;">Alamat</td>
        <td style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><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 style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;">E-mail</td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;"><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 style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;">Password</td>
        <td style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><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 style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;">No. HP</td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;"><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 style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;">Captcha  <img height="30" style="vertical-align:middle;" src="captcha.php?data=<?php echo date('YmdHis');?> alt="securiy image" /></td>
        <td style=" background:#FC6;border:none;font-family:Verdana, Geneva, sans-serif;"><center>:</center></td>
        <td style=" border:none;background:#FF9; font-family:Verdana, Geneva, sans-serif;">       
         <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:none;background:#FC6; font-family:Verdana, Geneva, sans-serif;"><center><button type="reset" value="Refresh" ONCLICK="history.go(0)">&nbsp;Reset&nbsp;</button>&nbsp;
  <button type="submit" name="submit">&nbsp;Kirim&nbsp;</button></center>
  </td>       
    </tr>
</table>
</form>
<?php } ?>
</body>
</html>
Setelah itu buat file baru bernama action.php, berikut contoh scriptnya,
<link rel="stylesheet" type="text/css" href="button.css" />
  <title>Hasil</title>

    <body style="background-image:url(blue.jpg); 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'];
$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="benar.png" style="vertical-align:middle"/><br>';
$imgEmp ='<img src="salah.png" style="vertical-align:middle"/><br>';
$imgErr ='<img src="salah.png" style="vertical-align:middle"/><br>';


$error = array();
    if(empty ($nama)){
        $error['nama'] = $imgEmp.'Nama tidak boleh kosong';
    } else if(preg_match('/[^a-zA-Z ]/', $nama))           {
        $error['nama'] = $imgErr.'Nama hanya mengandung huruf saja';
    } else{
        $true['nama'] = $imgTrue;
    }

    if(empty ($email)){
        $error['email'] = $imgEmp.'Email tidak boleh kosong';
    } elseif (!preg_match($emailpattern, $email)){
        $error['email'] = $imgErr.'Email salah tulis (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.'Anda tidak berjenis kelamin';
 } 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.'Nama hanya mengandung angka aja';
 }
 else{
        $true['HP'] = $imgTrue;
    }

 if(empty ($CAPTCHA)){
        $error['pin'] = $imgEmp.'Captcha tidak boleh kosong';

    } 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><center>Selamat Datang Saudari, '.$nama.'<br>Berikut Biodatamu</center></h2>';
  }
 else{
  echo'<h2><center>Selamat Datang Saudara, '.$nama.'<br>Berikut Biodatamu</center></h2>';
  }
print("
<table  cellspacing='0' cellpadding='4' bgcolor='#FFFFFF' border='1' width='650' height='300' Style='border-radius:20px;border-color:white; position:fixed;left:360px;top:110px;box-shadow: 0 0 5px 5px black; '>
 <tr>
    
        <td colspan='4'>
         <center><strong><font color='white'><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>Alamat</td>
        <td><center>:</center></td>
        <td> $alamat</td>
    </tr>
 
    <tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td>$email</td>
    </tr>
    <tr>
     <td>No. HP</td>
        <td><center>:</center></td>
        <td>$noHP</td>
    </tr>
   <tr>
</table>
");
 }
else{
 $_SESSION['error']=$error;
    $_SESSION['true'] =$true;
 $_SESSION['post'] =$_POST;
 header("location:form.php");
}
}
?>
Setelah itu buat file baru bernama Captcha.php, berikut contoh scriptnya,
<?php

session_start();
$alphaNumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$random = substr(str_shuffle($alphaNumeric),0,5);
$image = imagecreatefromjpeg("bg_captcha.jpg");
$textcolor = imagecolorallocate ($image, 0, 0, 0); //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);
?>
Dan untuk finishing kita hias dengan css, buat file css, bernama anu.css, berikut contoh scriptnya,
/* CSS Document */
td:hover{
                background:#666;
                color:#fff;
}
TEXTAREA, INPUT[type="text"]{
                font-family:Tahoma, Geneva, sans-serif;
                font-size:14px;
                color:#808080;
                padding:3px;
                background:#FF9;
                border-left:solid 1px #c1c1c1;
                border-top:solid 1px #cfcfcf;
                border-right:solid 1px #cfcfcf;
                border-bottom:solid 1px #6f6f6f;
}
INPUT[type="text"]:focus, INPUT[type="text"]:active{
                border-color:#646464;
                background-color:#0FF;
                font:Verdana, Geneva, sans-serif;
                font:#000;

}

Dan Berikut ini hasilnya,



0 comments:

Copyright © 2013 Laptop Corner and Blogger Templates - Anime OST.