JQuery ve PHP/MySQL ile kullanıcı adını gerçek zamanlı kontrol etme
Bu yazımızda JQuery ajax özelliğini ve PHP kullanarak MySQL’de oluşturulmuş bir tablodan kullanıcı adını daha evvelden bir başkası tarafından kullanılıp kullanılmadığı gerçek zamanlı olarak kontrol etmeden bahsedeceğiz.
Eğer kullanıcı ismi daha evvelden bir başkası tarafından kullanıldıysa “”Kullanıcı ismi mevcut değil”, kullanılmadysa “Kullanıcı ismi mevcut” uyarısı ile sitemize kayıt olmaya çalışan kullanıcımızı uyaracağız.
İlk olarak MySQL veritabanında kullanici_adlari tablosu oluşturalım.
CREATE TABLE IF NOT EXISTS `kullanici_adlari` ( `kullanici_no` int(11) NOT NULL, `kullanici_adi` varchar(20) DEFAULT NULL, `isim` varchar(50) DEFAULT NULL, `soyad` varchar(50) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
Tablomuzu oluşturduktan sonra tablomuzu bazı veriler ile dolduralım.
INSERT INTO `kullanici_adlari` (`kullanici_no`, `kullanici_adi`, `isim`, `soyad`) VALUES (1, 'hakan', 'Hakan', 'Atılgan'), (2, 'solak', 'Süleyman', 'Solak'), (3, 'mustafa', 'mustafa', 'mustafa'), (4, 'murat', 'murat', 'murat');
Veritabanınızda tabloyu oluşturduktan sonra index.php ve ajax.php dosyaları oluşturun. index.php, ajax ile her harf girildiğinde gerçek zamanlı olarak ajax.php sayfasına giderek, girilen ismi yukarıda oluşturduğumuz kullanıcı_adı tablosundan kontrol edecektir.
index.php
CSS: <body> etiketinin hemen üzerine kopyalayalım.
<style>
.yesil {
color:#0C6;
}
.kirmizi {
color:#F00;
}
</style>
HTML: <body> etiketinin hemen altina kopyalayalım.
<input class="form-control" name="kullaniciadi" id="kullaniciadi" type="text" /> <div id="hatabilgi"></div>
Jquery: <body> etiketinin hemen üzerine kopyalayalım.
(function($){
$(document).on("keyup", "#kullaniciadi",function(){
$.post( "ajax.php", { isim: $(this).val() } )
.done(function( data ) {
$("#hatabilgi").html(data);
});
});
})(jQuery);
ajax.php
PHP: ajax.php sayfasına aşağıdaki php kodunu içine kopyalayın.
// Burada veritabanı bağlantısını unutmayın
$ret ='';
$isim = $mysqli->real_escape_string($_POST['isim']);
$sql="SELECT * FROM kullanici_adlari WHERE kullanici_adi='".$isim."'";
$result = $mysqli->query($sql);
$nt = $result->fetch_array();
if ($result->num_rows){
$ret .= '<span class="kirmizi">Kullanıcı ismi mevcut değil</span>';
} else {
$ret .= '<span class="yesil">Kullanıcı ismi mevcut</span>';
}
echo $ret;
index.php dosyası yukarıdaki kodları kopyaladığımızda söyle olacaktır.
<!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" />
<title>Bilgisayar.me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.yesil {
color:#0C6;
}
.kirmizi {
color:#F00;
}
</style>
</head>
<body>
<input class="form-control" name="kullaniciadi" id="kullaniciadi" type="text" /><br />
hakan, solak, mustafa veya murat isimlerini deneyin
<div id="hatabilgi"></div>
<script>
(function($){
$(document).on("keyup", "#kullaniciadi",function(){
$.post( "ajax.php", { isim: $(this).val() } )
.done(function( data ) {
$("#hatabilgi").html(data);
});
});
})(jQuery);
</script>
</body>
</html>
Bu yazıda JQuery ve PHP/MySQL ile kullanıcı adını veritabanından gerçek zamanlı kontrol etme nasıl kodlanırı açıklamaya çalıştım. Bir hata bulduysanız veya kod çalışmadıysa, üşenmeyin aşağıya iki tıklama, bir cümleyle yorum yazın.
