December 16th, 2009 
admin 
Web sitelerine kayıt olurken; username girişi sırasında anında kontrol edilmesini, veri tabanında eşleşen bir username olup olmadığını kontrol etmek isteyebiliriz. Bu örneğimizde, username, rumuz, eposta gibi bilgilerin sistemlere kayıt olurken kontrol ve uyarılarını öğreneceğiz. Örneğimizde username tablosundaki rumuz eşleşmesi olup olmadığını kontrol edeceğiz.
İlk olarak index.php kodlarımızdan başlayalım.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="text/html; charset=iso-8859-9" http-equiv="Content-Type"></meta>
<meta content="en-us" http-equiv="Content-Language">
<title>Ajax username control</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/settings.js" type="text/javascript"></script>
<script type="text/javascript">
pic1 = new Image(16, 16);
pic1.src="loader.gif";
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 6) // karekter uzunluğu kontolü yapıyoruz 6 ya eşit veya daha fazla ise
{$("#status").html('<img src="loader.gif" align="absmiddle"/> Tarama işlemi yapılıyor...');
$.ajax({type: "POST", // yolladığımız methodurl: "check.php", //kontrol işleminin yapıldığı php dosyamızdata: "username="+ usr, //gelen verisuccess: function(msg){$("#status").ajaxComplete(function(event, request, settings){if(msg == 'OK'){$("#username").removeClass('object_error');
$("#username").addClass("object_ok");
$(this).html(' <img src="accepted.png" align="absmiddle"/>
<font color="Green"> vvvv </font> ');
}else{$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
$(this).html(msg);}});}});}else
// 6 karekterden az ise uyarı verdiğimiz bölüm
{$("#status").html('<font color="red">Kullanıcı adı en az<strong>6</strong> karekter olmalıdır.</font>');
$("#username").removeClass('object_ok');
$("#username").addClass("object_error");}});});//--></script>
<style type="text/css">body{font-family:"Trebuchet MS";font-size:12px;}.inn{float:left;font-size:14px;border:solid 1px #000000;width:143px;font-family:Arial, Helvetica, sans-serif;color:#0066CC;font-weight:bold;
}
</style>
</meta>
</head>
<body>
<div style="float:left">
<input id="username" type="text" name="username" onkeyup="twitter.updateUrl(this.value)" />
</div>
<div id="status" style="float:left">
</div>
<script type="text/javascript">
$( function () {twitter.screenNameKeyUp();
$('#user_screen_name').focus();});
</script>
</body>
</html>
Gelen verilerin kontrol edildiği check.php dosyamız.
< ?php
if(isset($_POST['username'])) // post ile gelen username varsa{$username = $_POST['username']; //$username 'e post ile gelen username 'i aktardık.require_once("mysql.php"); // sayfamıza veri tabanı bağlantımızı ekledik.
$sql_check = $kdb->query("SELECT * FROM username WHERE rumuz='$username'"); // sql sorgumuz
if($kdb->num_rows($sql_check)) // eğer eşleşen bir değer varsa yani uyğun değilse no.png'yi ekrana yansıtıyoruz{echo '<img src="no.png" />';}else
// uygun ise ok.png yi ekrana yansıtıyoruz
{
echo '<img src="ok.png" />';
}
}
?>
Örnekte yer alan mysql.php,javascriptleri ve grafikleri buradan indire bilirsiniz.
Örnek uygulama görüntüleri;
Posted in 
