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)" class="inn" />
</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;
4 Comments
vermiş olduğunuz kodda e-posta adresi ve şifre girişi için input parametreleri eksik… bilginize…
onu da sen tamamlayabilirsin artık, diğer html form elemanlarını yazmaya gerek yok.
ajax sisteminin çalışma mantığını kavradıysan, bu yazı işini yapmış demektir
örnek için çok teşekkür ederim. Bu bir sorunla karşılaşıyorum, kullanıcı adını değiştirdiğim halde ilk istediğim kullanıcıyı buluyor ve ikinci yazdığım kullanıcı adını imkansız ekranad basmıyor. sanırım cache ile ilgili bir sorun var, bu konuda öneriniz ne olabilir. tşk ederim
şükrü, CTRL+F5 veya farklı bi tarayıcıdan dene bir de