İlk Önce Çook İyi Anlaşılabilmesi tek tek ve cook acıklayıcı bır sekılde yazmaya ozen gosterecegım .
İlk Adım
Kontrol Yapacağımız Bir Form yazıyoruz .
<from action=”islem.php” method=”get” name=”form1″>
<input type=”text” name=”kullanici_adi”>
<br>
<input type=”submit” name=”gonder” value=”Kontrol”>
</form>
Bu Şekilde Bir Form Ayarladık dıyelım sımdi kontrol butonuna bastıgımızda hıc bısey yook aynen çalışacak . Biz Burda yapacağımız şey kontrol butonuna basılmadan kullanici adı inputuna bir değer yazılıdıgında diğer inputa geçerken örneğin password inputuna geçerken o kullanıcı adını dbde kontrol etmesi ve var olup olmadıgına bakmasını var ıse bu kullanıcı adı kullanımda diye kullanıcıya bir uyarı vermesini istiyoruz . Öncelikle Eburhan Arkadaşımızın ejeyks.js adlı ajax ile veri gönderimine yarayan kütüphanesını indiriyoruz .
ejeyks.js kütüphanesini bu adresten indirebilirsiniz tıklayın ve indirin.
İkinci Adım :
Sonra ejeyks.js içindeki kodları ya form kontolu yapacagımız form sayfasına cagırıyoruz yada içindekileri acıp dırek form kontrol sayfasına yazıyoruz .
Çağırma :
<script language=”javascript” src=”ejeyks.js”></script>
İçine direk yazma :
function AJAX() {
var ajax = false;
// Internet Explorer (5.0+)
try {
ajax = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
ajax = false;
}
}
// Mozilla veya Safari
if ( !ajax && typeof XMLHttpRequest != ‘undefined’ ) {
try{
ajax = new XMLHttpRequest();
}catch(e) {
ajax = false;
}
}
// Diger
if ( !ajax && window.createRequest ) {
try{
ajax = window.createRequest();
}catch(e) {
ajax = false;
}
}
return ajax;
}
function JXG(yukleniyor, yer, dosya) {
ajax = new AJAX();
if ( ajax ) {
ajax.onreadystatechange = function () {};
ajax.abort();
}
ajax.open(‘GET’, dosya, true);
ajax.setRequestHeader(“If-Modified-Since”, “Sat, 1 Jan 2000 00:00:00 GMT”);
ajax.setRequestHeader(“Connection”, “close”);
ajax.send(null);
ajax.onreadystatechange = function () {
if( yukleniyor == 1 && yer != ‘no_id’ ) {
if( ajax.readyState == 1 || ajax.readyState == 2 || ajax.readyState == 3 ) {
var loading = ‘Kulanilabilirligine Bakiliyor . . . ‘
document.getElementById(yer).innerHTML = loading;
}
}
if( ajax.readyState == 4 && yer != ‘no_id’ ) {
document.getElementById(yer).innerHTML = ajax.responseText;
function AJAX() {};
}
}
}
Şimdiye kadar formumuzdaki kullanici adı verisini userkontrol.php ye gondermek ıcın lazım olan kodları ayarladık .
Sıra Tab Tuşuna bastıgımızda işlemesi gereken kodlar ve forma eklenecek kodlarda …
Üçüncü Adım
function checkuser(){
var user = document.form1.kullanici_adi.value
var sc = ‘userkontol.php?user=’+ user
JXG(1,’ warning ‘, sc)
document.form1.kullanici_adi.className = ‘classdegis’;
}
İşte bu kodlarla tabtuşuna basılıp password inputuna gecerken eyeks.js kutuphanesınıde kullanarak userkontrol.php dosyasına kullanıcı adı valuesını ” GET ” olarak yolladık . Sıra Formdakii değişiklerlede ama o zaten o kadar cok bı degısıklık yok sadece forma onblur=’checkuser()” ozellıgını eklıcez ve bır warning diye div acıp uyarıyı o divde gostertecegiz . onu da direk şu şekilde yazabiliriz .
Dördüncü Adım :
<from action=”islem.php” method=”get” name=”form1″>
<input type=”text” name=”kullanici_adi” onblur=”checkuser()”><div id=”warning”></div>
<br>
<inpu type=”submit” name=”gonder” value=”Kontrol”>
</form>
İşte Formumuzun Sonhali şimdide checkuser() fonksiyonumuzu yazarken son satıra yazdıgımız document.form1.kullanici_adi.className = ‘classdegis’; satırının ne olduguna bu satır kullanıcı adında sorgu yapıldıgında ve sorgunun cıktısı alındıgında ınputun class degerını degıstırmesı ıcın konulmus bır satır.Bunun Etkin olabilmesi için bu script kodlarının en altına sole bır style kodu eklersenız estetık acısından guzel olabılır
<style type=”text/css”>
.classdegis {
border: 1px solid black;
background-color: #fff;
}
</style>
Son adım İse userkontol.php
userkontrol.php ‘yi istediğimiz şekilde düzenleyebiliriz . Ben sadece kullanıcı adının var olup olmadıgına baktım ve ona gore uyarılar verdım .Siz bu mantıkla degısık uyarılar yapabılırsınız . userkontol.php yi acıklama yapmıyacagım dırek kodlarını yazacagım umarım yazımı begenmısınızdır ?.
userkontol.php
<?
echo “<meta http-equiv=\”Content-Type\” content=\”text/html; charset=iso-8859-9\” />”;
$user = $_GET["user"];
include(‘baglanti.php’);
$user_varmi = mysql_query(“select user from user WHERE user=’$user’”);
if(mysql_num_rows($user_varmi) != 0){
echo “<font face=\”Arial,Verdana\” style=\”font-size:10px\” color=\”red\”><b>Bu Kullanici Adi Kullaniliyor ! </b></font>”;
}elseif($user == “”){
echo “<font face=\”Arial,Verdana\” style=\”font-size:10px\” color=\”red\”><b>Kullanici Adı Yazmalısınız</b></font><br>”; }
else{
echo “<font face=\”Arial,Verdana\” style=\”font-size:10px\” color=\”green\”><b>Bu Kullanici Adini Kullanabilirsiniz !</b></font>”;
}
?>
Umarım Anlayabilmişinizdir ve umarım bir faydam dokunmuştur.
UMUT ÇETİNKAYA (mail adresim )
AJAX Tab Kontrol uygulamasını buradan test edebilirsiniz.
Kaynak kodları da buradan indirebilirsiniz.
