Lacodeid kali ini akan membuat tutorial php captcha code script, bila anda pernah mengisi formulir atau halaman registrasi email di satu form menemui angka atau huruf yang tampilananya sacara acak, bengkok lalu anda disuruh menuliskan huruf-huruf atau angka didalamnya ke sebuah text isian itu yang disebut CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) disini lacodeid akan memberikan tutorial secara gratis untuk anda baru belajar sama seperti saya baru belajar juga hehehe…
langsung saja buat folder latihan didalam localhost anda lalu buat 3 buah file php (index.php, contact_mail.php, captcha_code.php) bisa anda ikuti langkah-langkah dibawah ini, untuk script index.php seperti dibawah ini :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<title>PHP Captcha code</title>
<style>
#frmContact {
border-top:#F0F0F0 2px solid;
background:#FAF8F8;
padding:10px;
}
#frmContact div{
margin-bottom: 15px
}
#frmContact div label{
margin-left: 5px
}
.demoInputBox{
padding:10px;
border:#F0F0F0 1px solid;
border-radius:4px;
}
.error{
background-color: #FF6600;
border:#AA4502 1px solid;
padding: 5px 10px;
color: #FFFFFF;
border-radius:4px;
}
.success{
background-color: #12CC1A;
border:#0FA015 1px solid;
padding: 5px 10px;
color: #FFFFFF;
border-radius:4px;
}
.info{
font-size:.8em;
color: #FF6600;
letter-spacing:2px;
padding-left:5px;
}
.btnAction{
background-color:#2FC332;
border:0;
padding:10px 40px;
color:#FFF;
border:#F0F0F0 1px solid;
border-radius:4px;
}
.btnRefresh{
background-color:#8B8B8B;
border:0;
padding:7px 10px;
color:#FFF;
float:left;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function sendContact() {
var valid;
valid = validateContact();
if(valid) {
jQuery.ajax({
url: "contact_mail.php",
data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&content='+$("#content").val()+'&captcha='+$("#captcha").val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
}
function validateContact() {
var valid = true;
$(".demoInputBox").css('background-color','');
$(".info").html('');
if(!$("#userName").val()) {
$("#userName-info").html("(required)");
$("#userName").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#userEmail").val()) {
$("#userEmail-info").html("(required)");
$("#userEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#userEmail-info").html("(invalid)");
$("#userEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#subject").val()) {
$("#subject-info").html("(required)");
$("#subject").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#content").val()) {
$("#content-info").html("(required)");
$("#content").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#captcha").val()) {
$("#captcha-info").html("(required)");
$("#captcha").css('background-color','#FFFFDF');
valid = false;
}
return valid;
}
function refreshCaptcha() {
$("#captcha_code").attr('src','captcha_code.php');
}
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#" title='Programming Blog' style="text-transform: uppercase;">php captcha code</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div id="frmContact">
<div id="mail-status"></div>
<div>
<label style="padding-top:20px;">Name</label>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox form-control">
</div>
<div>
<label>Email</label>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox form-control">
</div>
<div>
<label>Subject</label>
<span id="subject-info" class="info"></span><br/>
<input type="text" name="subject" id="subject" class="demoInputBox form-control">
</div>
<div>
<label>Content</label>
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox form-control" cols="60" rows="6"></textarea>
</div>
<div>
<label>Captcha</label>
<span id="captcha-info" class="info"></span><br/>
<input type="text" name="captcha" id="captcha" class="demoInputBox form-control"><br>
</div>
<div>
<img id="captcha_code" src="captcha_code.php" />
<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
</div>
<div>
<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html><?php
session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill($target_layer,0,0,$captcha_background);
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring($target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/jpeg");
imagejpeg($target_layer);<?php
session_start();
if($_POST["captcha"]==$_SESSION["captcha_code"]){
$toEmail = "example@samples.com";
$mailHeaders = "From:".$_POST["userName"]."<".$_POST["userEmail"].">\r\n";
if(mail($toEmail,$_POST["subject"],$_POST["content"], $mailHeaders)){
print "<p class='success'>Contact Mail Sent.</p>";
}else{
print "<p class='Error'>Problem in Sending Mail.</p>";
}
}else{
print "<p class='Error'>Enter Correct Captcha Code.</p>";
}
Posting Komentar
Posting Komentar