Pada kali ini saya akan membagi tutorial dalam mengerjakan praktikum 6 PHP, pada praktikum kali ini pokok pembahasannya adalah tentang membuat validation form menggunakan Session ditambah validasi captcha.
Ya sudah langsung saja.. buka dreamweaver cs6,
1. Untuk pertama saya akan membuat captcha untuk ditambahkan pada validation form nanti. Yang belum tau tentang Apa si itu Captcha ?
Captcha adalah 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.
2.Berikut saya akan membuat captcha, sebelum membuat script captcha, pertama-tama kita harus membuat backgrounf image untuk background untuk captcha kita nanti. berikut contoh background captcha yg saya buat.
 |
| bg captcha |
untuk contoh berinama background tsb dengan nama bg_captcha.jpg, dan letakan backgroung tsb 1 folder dengan file captcha yg akan kita buat.
3. Sekarang saya akan membuat script captcha-nya. buat new file php pada DW cs6. dan tambahkan script dibawah ini.
Script :
<?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);
?>
Output ketika di RUN :
Catatan : jika di-RUN ulang atau di refresh maka output kombinasi huruf dan angka akan menghasilkan output yg beda lagi.
4. Lalu simpan file captcha tsb pada htdocs/PraktikumPHP21/Praktik6Php dan beri nama file dg captcha.php
5. Nah... captcha sudah dibuat.. :D. Sekarang saya akan membuat Form.php dimana form.php adalah halaman untuk memasukkan inputtan dimana inputtan itu nanti akan di resume pada halaman action.php.
catatan : pada form.php nanti akan meuncul pesan error jika inputtan masi kosong atau tidak sesuai dengan format yg dtentukan
6. ya sudah langsung saja,,, saya akan membuat form.php,buat new file php.
7. Dan berikut script form.php yg sudah saya kombinasikan dengan CSS, supaya tampilan terlihat sedikit cantik.
Script :
<?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="button.css" />
<title>Formulir</title>
</head>
<body style="background-image:url(blue.jpg); background-repeat:repeat;">
<form action="action.php" name="form1" method="post">
<table cellspacing="0" cellpadding="4" bgcolor="#FFFFFF" border="1" width="700" height="420" Style='border-radius:20px;border-color:white;
box-shadow: 0 0 5px 5px black; position:fixed;left:350px;top:55px;'>
<tr>
<td rowspan="10" width="230" Style=' border-top-left-radius:20px;border-bottom-left-radius:20px '><center><img src="logo.jpg" width="200" 0height="200" /></center></td>
<td colspan="3" bgcolor="#F90" Style=' border-top-right-radius:20px; '>
<center><strong><font color="white">INPUTAN BIODATA</font></strong></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>
Laki-Laki<input type="radio" name="gender" value="<?php echo isset($_POST['gender']) ? $_POST['gender'] : ''; ?>Laki - Laki <?php echo isset($_POST['gender']) ? ' checked' : ''; ?>"/>
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>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>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>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>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="reset" value="Refresh" ONCLICK="history.go(0)"> Reset </button>
<button type="submit" name="submit"> Kirim </button></center>
</td>
</tr>
</table>
</form>
<?php } ?>
</body>
</html>
8. Simpan file tsb pada folder htdocs/praktikumphp21/praktik6php dan beri nama file dengan Form.php
9. Form.php telah selesai.. selanjutmya waktunya membuat action.php dimana action.php halaman untuk menampilkan hasil inputan dari form.php. yasudah..buat new file php.
10. Dan berikut script action.php yg sudah saya kombinasikan dengan CSS (desain sama dengan form.php), supaya tampilan terlihat sedikit cantik.
Script :
<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="images/true.png" style="vertical-align:middle"/><br>';
$imgEmp ='<img src="images/empty.png" style="vertical-align:middle"/><br>';
$imgErr ='<img src="images/error.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 Saudara, '.$nama.'<br>Berikut Biodatamu</center></h2>';
}
else{
echo'<h2><center>Selamat Datang Saudari, '.$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' bgcolor='#F90' Style=' border-top-left-radius:20px; border-top-right-radius:20px'>
<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>Password</td>
<td><center>:</center></td>
<td> $pwd</td>
</tr>
<tr>
<td Style=' border-bottom-left-radius:20px'>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");
}
}
?>
11. Kemudian simpan action.php pada folder htdocs/PraktikumPHP21/Praktik6PHP/ dan beri nama action.php
Output :
disini akan timbul pertanyaan. Kenapa outputnya kok kosong ?
outputnya kosong karena saya langsung men-RUN action.php langsung, action.php adalah halaman untuk resume dari form.php karena saya tidak menjalankan form.php dulu + saya belum memasukan inputan yg mau ditampilkan pada action.php maka dari itu action.php kosong ketika di-RUN langsung. jadi harus menjalankan form.php dulu lalu isi inputannya.
12. Nah.. semua file sudah selesai dibuat.. sekarang saya akan men-DEMO kan hasil dari praktikum kali ini.
DEMO
1. RUN form.php pada browser kesayangan anda.
2. sebelum mengisi semua inputtan yang ada dengan benar pada form.php, saya akan mencoba mengisi inputtan dengan format penulisan yg salah dan mengosongkan beberapa beberapa inputtan. Hal ini bertujuan untuk mengecek session yg telah dibuat pada form.php dan action.php bekerja atau tidak. jika bekerja makan akan muncul tampilan seperti berikut.
 |
4. Jika berhasil maka akan muncul action.php/halaman baru yg berisi data inputtan dari halaman form.php. berikut hasilnya.
Sekian tutorial saya pada praktikum kali ini..
Semoga bermanfaat.. Wassalamu'alaikum..
 ){kind=link}
1 Comments
Ben ini kok gambarnya kepotong ya jadi bikin bingung :3
ReplyDelete