<?php
/* Begin the session */
session_start();
/* Create a random string */
$char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));
$str = rand(1, 7) . rand(1, 7) . $char;
/* Set the session contents*/
$_SESSION['captcha_id'] = $str;
?>
<!doctype html>
<html>
<head>
<title>Membuat CAPTCHA</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Membuat CAPTCHA</h1>
<form id="captcha_form" action="process.php">
<fieldset>
<label for="nama">Nama :</label>
<input type="text" name="nama" id="nama">
<label for="gender">Jenis Kelamin :</label>
<input type="text" name="gender" id="gender">
<!-- img src coming from php script on folder images/-->
<div id="captcha_image"><img src="images/image.php" width="132" height="46" alt="Captcha image"></div>
<label for="captcha">Masukkan huruf / character seperti yang terlihat pada gambar di atas (case insensitive):</label>
<input type="text" maxlength="6" name="captcha" id="captcha">
<label id="result"></label>
<input type="submit" id="btn_kirim" value="Kirim">
</fieldset>
</form>
</body>
</html>
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<title>Result</title>
<style>
.status_green {
color: #51c2d5;
}
.status_red {
color: #ec4646;
}
</style>
</head>
<body>
<?php
$nama = isset($_GET['nama']) ? ($_GET['nama']) : "";
$gender = isset($_GET['gender']) ? ($_GET['gender']) : "";
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id']){
echo "<p class='status_green'>Autentifikasi berhasil</p>";
echo "<p>Nama : ".$nama."</p>";
echo "<p>Jenis Kelamin : ".$gender."</p>";
}else{
echo "<p class='status_red'>Autentifikasi gagal</p>";
}
?>
</body>
</html>
#captcha_image img {
border: 1px solid #ddd;
}
.status_green {
color: #51c2d5;
}
.status_red {
color: #ec4646;
}
fieldset label {
display: block;
margin: 5px 0px;
}
fieldset input[type=text] {
width: 220px;
height:33px;
border: 1px solid #ddd;
margin:5px 0px;
padding: 0px 5px;
}
#btn_kirim {
display: block;
background-color: #e27802;
color: white;
border-radius:3px;
opacity: 0.8;
padding: 15px 70px;
border: none;
outline: none;
cursor: pointer;
}
#btn_kirim:hover{opacity: 1;}