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' : ''; ?>"/> Laki-Laki
<input type="radio" name=gender value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?> Perempuan <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>" /> 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>
<button type="submit" name="submit"> Kirim </button> <button type="reset" value="Refresh" ONCLICK="history.go(0)"> Reset </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 :)