Nisan 9

AJAX ile Eş Zamanlı Form Kontrolü

AJAX & JavaScript & DOM & Php Umut Çetinkaya

Merhabalar, ben Umut Çetinkaya. AJAX-TR konuk yazarı olarak hepinizi saygıyla selamlıyorum...

Buradan sizinle paylaşmak istediğim konu AJAX ile Eş Zamanlı Form Kontrolü.

Kısaca konuyu anlatmak gerekirse eski usulde form kontrolünde tüm formu doldururdunuz ve bittiği zaman "Gönder" düğmesine basardınız. Eğer girmiş olduğunuz kullanıcı adı veya e-posta adresi başkası tarafından kullanılıyorsa ancak tüm formu doldurup gönderdikten sonra bunu öğrenebilirdiniz. Oysa ki AJAX ile o an doldurmuş olduğunuz metin kutusunu eş zamanlı olarak kontrol edilmesini sağlama imkanınız var. Yani kontrolü, gönder butonuna basmadan önce, form elemanı doldurulduğu anda yapabileceğinizi kastediyorum. Konuyu anlatırken AJAX-TR için hazırladığım ve AJAX Tab Kontrol ismini verdiğim örnek uygulamayı kullanacağım. İsmine "Tab kontrol" dedim çünkü Tab tuşuna basıldığı anda veya kutudan çıkıldığı anda kontrolün yapılışını anlatacağım.

Dosyalar

Uygulamada ana sayfayı oluşturan index.php dosyası, kontrolün yapıldığı ve bilginin gönderildiği kontrol.php dosyası ile eyceks kütüphanesinin dosyaları (loading.gif, eyceks.js) bulunmakta.

İlk Adım

Kontrol edeceğimiz formu index.php dosyasında oluşturuyoruz. Sadece bir metin kutusu bize yetecektir. Yanına da yeşillik niyetine parola kutusu koydum :)

PLAIN TEXT
HTML:
  1. <form action="void(0)" method="POST" name="form1">
  2.     <table>
  3.         <tr><td colspan="2"><b>ÜYE GİRİŞİ</b><br><br></td></tr>
  4.         <tr><td width="100">Kullanıcı Adı</td><td width="350">: </td></tr>
  5.         <tr><td>Parola</td><td>: </td></tr>
  6.         <tr><td></td><td></td></tr>
  7.     </table>
  8. </form>

Dikkat ederseniz kullanıcı adı metin kutusunun onblur olayına kontrol_et() işlemini yapmasını belirttim. Bu kontrol_et() fonksiyonu form bilgisini kontrol.php dosyasına gönderecek olan fonksiyon. Aşağıda bu fonksiyonu açıklayacağım.

Formumuzu hazırladık diyelim. Bizim burada yapacağımız şey kontrol butonuna basılmadan kullanıcı adının girildiği kutuyu, biz parola hanesine geçerken kontrol edilmesini sağlamak. Kontrolde, girilen kullanıcı isminin var olup olmadığına bakılmasını ve kullanıcıyı buna göre uyarmasını istiyoruz.

İkinci Adım

AJAX Tab Kontrol'de bu sitenin yazarı eburhan'ın arkadaşımızın eyceks kütüphanesini kullandım.

Bu ikinci aşamada eyceks'i form kontolü yapacağımız index.php dosyasına çağıralım.

PLAIN TEXT
JAVASCRIPT:
  1. [/javascript]
  2.  
  3. Bu işlemi de tamamladıktan sonra sıra geldi <strong>Tab</strong> tuşuna bastığımızda işlemesi gereken javascript fonksiyonuna.
  4.  
  5. <h3>Üçüncü Adım</h3>
  6. [javascript]function kontrol_et(){
  7.     var sc = 'uyeadi='+ document.form1.kullanici_adi.value;
  8.         JXP(1, "sonuc", "kontrol.php", sc);
  9.    }

İşte bu kodlarla tabtuşuna basılıp parola kutusuna geçerken eyceks kutuphanesini de kullanarak kontrol.php dosyasına kullanıcı adını POST metoduyla (JXP) yolladık. Gelecek olan cevabı da "sonuc" id'sine sahip elemanda görünecek şekilde ayarladık.

Son Adım

Son adım ise kontol.php dosyasını oluşturduğumuz kısım. Bu dosyada kontrolü dilediğiniz gibi ayarlayabilirsiniz. İster veritabanına bağlantı kurun, isterseniz de bir e-posta adresinin uygun yazılıp yazılmadığını kontrol edin. Burası size kalmış. Ben ise sadece 5 tane üye ismi belirledim ve girilen ismin bunlardan birisiyle aynı olup olmadığını kontrol ediyorum. Ne de olsa önemli olan mantığı kavramak ;)

kontol.php

PLAIN TEXT
PHP:
  1. isim zaten mevcut :-(</font>';
  2.         break;
  3.     case "":
  4.     echo '<font>isim girmediniz!</font>';
  5.         break;
  6. default:
  7.     echo '<font color="blue">isim uygun :-)</font>';
  8. }
  10. ?&gt;

Sonuç

Umarım konuyu yeterince açık bir şekilde anlatabilmişimdir. AJAX'in gücünü farketmenin zamanı geldi de geçiyor ;)

Saygılarımla...

AJAX Tab Kontrol uygulamasını buradan test edebilirsiniz.
Kaynak kodları da buradan indirebilirsiniz.

Toplamda 11835 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 13 kişi aynı anda okumuş.
Bugün 3 kez okunmuş.

Etiketler: , , , , , , , 

1 oy2 oy3 oy4 oy5 oy (22 oy, ortalama 4.64) Oylanıyor ... Oylanıyor ...

  1.  

Trackback Yorumları takip et Baskı Önizleme

39 yorum var

  1. # Fred Coder | 10 Nisan 2007, 07:39 Gravatar

    kaynak kodları indiremiyorum linkte sorun var.

    The page you’re accessing no longer exists or you mistyped the URL.

  2. # eburhan | 10 Nisan 2007, 14:25 Gravatar

    Güzel ve pratik bir uygulama :)

  3. # yakuter | 10 Nisan 2007, 15:26 Gravatar

    @Fred haklıymışsın, linki yanlış koymuşum. Şimdi düzelttim. Teşekkür ederim ilgin için ;)

    @erhan dediğin gibi pratik bir örnek. Daha da önemlisi büyük bir binanın iskeleti gibi. Bununla bir formu dilediğin gibi kontrol edilmesini sağlayabilirsin ;)

  4. # Metin | 11 Nisan 2007, 12:28 Gravatar

    örnek uygulama ve anlatım için teşekkürler.
    kullanıcı isimlerini ve/veya e-posta adreslerini eşzamanlı olarak database’den almak için bir adaptasyon yapılabilir mi?

  5. # yakuter | 11 Nisan 2007, 18:42 Gravatar

    @Metin, burada vermiş olduğumuz örnek rahatlıkla geliştirilebilir. Yapman gereken sadece iki işlem var.

    Birincisi formdaki mail adresi olsun veya kontrol edilecek diğer bilgileri olsun formun kontrol edildiği dosyaya göndermek. Bunukontrol_et() isimli javascript fonksiyonundan ayarlayabilirsin.

    İkincisi ise kontrolü dilediğin gibi yaptırmak için kontrol.php dosyasında veritabanı bağlantısı yapmak ve bilgileri çekmek. Yani asıl iş php’de ve kontrol.php dosaysında bitiyor ;)

  6. # umut | 12 Nisan 2007, 10:31 Gravatar

    Arkadaşlar Öncelikle Beğendiğinize Çok sevindim bu uygulamada mantığını kavramanız için elimden geleni yaptım . @Metin kardeş senin dediğin gibi mysql den bilgilerin kontrolune adaptosyan olayı ise şöle olabilir . kontrol_et() Bu javascript fonksiyonu ve eyceks kütüphanesi yardımıyla kontrol.php dosyasına ulaşıyoruz.kontrol.php ye post ile veriyide yolluyoruz . Sonrasında kontrol.phpde aslen ekrana verecegı cıktıyı bız index.php içine gömüyoruz. Yani kontrol.php nasıl çıktı verirse versin onu biz index.phpde gösterceğiz. kontrol.php mysql de nasıl olduğu konusuna gelince onude normal ajax ve bu uygulamayı düşünmeden nasıl bir mysql ile baglantılı kontrol.php var ise bunuda öle düşünebilrsin . ;) Bendeki Tek Amaç estetik ve hız .

    Ajaxta bu değilmidir zaten . ?

  7. # evren | 23 Nisan 2007, 11:37 Gravatar

    Teşekkürler, üstünde biraz çalışıp geliştirmek mümkün…

  8. # ogalican | 27 Nisan 2007, 17:50 Gravatar

    Çok güzel bir yazı olmuş. Teşekkürler.

  9. # orhan | 02 Mayıs 2007, 14:52 Gravatar

    birden fazla parametreyle kontrol.php ye nasil gondeririz

  10. # Umut Çetinkaya | 05 Mayıs 2007, 23:29 Gravatar

    merhabalar herkese;
    Sevgili @orhan kardeş birden fazla parametre içn kontrol.php yi ben şu şekilde yaptım

    user kontrolü gönderdiğim php bölümü : kontorl.php?islem=user
    sifre kontrolü gönderdiğim php bölümü : kontrol.php?islem=sifre

    Tarzında aynı seylerı yaptım ;)

    Kolay gelsin herkese !

  11. # Genki | 12 Mayıs 2007, 19:57 Gravatar

    çok güzel bir yazı olmuş. fakat bunun yanında mesala e-mail kontrol yapmak istiorum. çok uraştım beceremedim eger hem k.adi hem email kontrol yapıp kaynak kodları mailime atarsan sevinirim.

    Başarılar dilerim..

  12. # selant | 18 Mayıs 2007, 23:41 Gravatar

    Genki arkadaşım neden sipariş verip de email adresine istiyorsun ? Burası paylaşım ve öğrenme platformu değil mi ? Birşey yapılacaksa doğru olanı buradan paylaşılmasıdır. Saygılar

  13. # ferdi | 25 Haziran 2007, 12:17 Gravatar

    Umut bey ellerie Saglik gusel Dokuman…

  14. # alper | 27 Temmuz 2007, 10:13 Gravatar

    oldukca kullanışlı. teşekkürler.

  15. # Onur Keskin | 11 Ekim 2007, 15:53 Gravatar

    Öncelikle bu güzel ve sade öğretici paylaşımlarınız için teşekkür ederim.

    Çok fazla uğraş vermeme rağmen çözemediğim bir sorunum var.

    Yukarıdaki örnekten gidersek;

    textfield yerine select kullanalım ve select’in içinde 2 değer olsun bu değerlerden ilki ajax olsun ve valuesi’de ajax olsun ikincisi tr olsun ve valueside tr olsun. şimdi selectteki ilk değeri seçtik ve sorunsuz bir şekilde kontrol.php ye gönderdik zaten burayakadar bir sorunum yok sorun bundan sonra başlıyor. ben bu noktadan sonra ikinci bir select yaratmak ve o selecteki değeride seçtirip ekrana seçmiş olduğum ajax ve seçtiğim ikinci selecteki değeri yan yana yazdırmak istiyorum.

    basit bir şekilde örneklendiriyim çünkü yukarısı pek anlamsız oldu

    ilk select te araba markaları olsun bmw,mercedes burda bmw yi seçtik yanına bir select daha geldi orda araç marka nın modelleri 3,20.3,18 burdada 3,20 yi seçtim sonra ekrana

    marka : bmw
    model : 3,20

    seçtiniz gibi bir yazı gelmesini istiyorum ama namümkün kuruttu beni..

  16. # Umut Çetinkaya | 04 Aralık 2007, 13:25 Gravatar

    @Onur Keskin Kardeşim bu sizin bahsettiğiniz olay bu makalem ile ilgili değil .. Sanırım tam anlamıyla sizin için şurda bi makale yazmıştım ;) herşeyiyle size örnek

    buyrun buraya bir bakın

    http://ajax-tr.com/ajax-ile-filtreleme/

  17. # Osman YILMAZ | 02 Mart 2008, 23:22 Gravatar

    Öncelikle ellerinize sağlık. çok güzel biçaışma gerçekten fakat benim bir sorunum var: ben bunu databaseden veri alacak şekilde ayarladım. bu sistem gayet güzel çalşıyordu ta ki türkçe karakterli bir isim alana kadar. database de türkçe karakter almamda bi sorun yok; giriş yapılabiliyor ama kullanıcı adı girildiğinde geçersiz yazısı görntüleniyor Yardımcı oluranız sevinirim.
    Teşekkürler

  18. # harunmursel | 08 Ağustos 2008, 17:46 Gravatar

    merhaba arkadaşlar umut arkadaşın ellerine sağlık çok işime yaradı ancak action kısmına action=”void(0)” şeklinde yazınca sürekli olarak java ile iletişime geçebiliyorum ben formdaki verileri bi php doyasına gönderip kayıt ettirmek istiyorum bunu nasaıl yapabilirim? yardımcı olrusanız sevinirim ;)

  19. # harunmursel | 11 Ağustos 2008, 09:17 Gravatar

    teşekkür ediyorum olayı çözdüm çok güzel bi uygulama olmuş ellerinize sağlık

  20. # buğra | 08 Eylül 2008, 02:39 Gravatar

    merhabalar
    öncelikle anlatım için sağolun gerçekten işime yaradı fakat küçük bir sorunum var :S

    kayıt formu için kullanacağım elimden geldiğince yaptım tek kontrol.php dosyasında yapamadım her sorugum için ayrı phplerde çalıştım fakat şifre ve şifretekrar alanlarımın birbirisi ile aynı olup olmadığını kontrol ettirmem için 2 veriyide göndermem gerekiyor beni oku dosyasında isim ve soyisim aynı anda gönderilmiş o şekilde de denedim farkı şekillerdede ama olmadı :) bu sorunu nasıl çözebilirim bi fikri olan varmı eminim sizde bu şekilde bi uygulama yapmışsınızdır küçük bi örnekle yada sadece nasıl yapılacağı konusunda yardımcı olursanız sevinirim..

  21. # harunmursel | 08 Eylül 2008, 14:44 Gravatar

    ben bu sekilde kullandım çalışıyor kontrol.php’de kontrolleri yapıyorum;

    function kontrol_et(){
    var sc = ’sfr1=’+ document.form1.sifre1.value +’&sfr2=’+ document.form1.sfr2.value;
    JXP(1, “sonuc”, “kontrol.php”, sc);
    }

  22. # buğra | 08 Eylül 2008, 21:16 Gravatar

    denedim ama çalışmadı :S kodlarında bi yanlışlık olaibilirmi :S

  23. # buğra | 09 Eylül 2008, 15:32 Gravatar

    arkadaşlar baska bir makalede buldum iki farklı veriyi göndermeyi fakat bişi daha danışmam gerekicek galiba

    var sifre = ’sifre=’+ document.form1.sifre.value;
    var sifre2 = ’sifre2=’+ document.form1.sifretekrar.value;

    var sc = “sifre=”+fc_(sifre)+”&sifre2=”+fc_(sifre2);
    JXP(1, “sonuc2″, “kontrol/sifrekontol2.php”, sc);

    şeklinde verilerimi gönderebiliyorum fakat sorunum şu ki echo ile gelen verileri yazdırarak bakıyorum verimin hali

    sifre=12345 şeklinde sifre= kısmını kendim yazmıyorum iki atama olduğu için galiba kaynaklanıyor sadece gelen veri olan 12345 in kalmasını nasıl sağlıyabilirim :S

    php ile gelen verilerde sifre= kısmını boş ifade ile değiştirerek yeni değere atarsam sorun kalkar ama ajax a alışmak için daha önce başına gelen bilen birileri yardım ederse sevinirim saygılar…

  24. # can | 11 Eylül 2008, 00:06 Gravatar

    kayıt butonuna bi care pls :S

  25. # can | 12 Eylül 2008, 00:11 Gravatar

    arkadaşlar formda bulunan radio butonun değerini bu yöntemle gönderemiyorum yardımcı olurmusunuz acaba?

  26. # can | 12 Eylül 2008, 00:22 Gravatar

    bugra arkadaşım

    var sifre = ’sifre=’+ document.form1.sifre.value;
    var sifre2 = ’sifre2=’+ document.form1.sifretekrar.value;

    var sc = “sifre=”+fc_(sifre)+”&sifre2=”+fc_(sifre2);
    JXP(1, “sonuc2″, “kontrol/sifrekontol2.php”, sc);

    bunu tanımlamalardan birisinde tanım değerini kaldırarak yapabilirsin :)

    var sifre = ’’+ document.form1.sifre.value;
    var sifre2 = ’’+ document.form1.sifretekrar.value;

    var sc = “sifre=”+fc_(sifre)+”&sifre2=”+fc_(sifre2);
    JXP(1, “sonuc2″, “kontrol/sifrekontol2.php”, sc);

    şeklinde:) saygılar…

  27. # Turan Mavituna | 19 Eylül 2008, 05:55 Gravatar

    Merhabalar.
    Benim yapamadığım şeye gelince… Utanıyorum kendimden.
    Ben sadece bir alanı değilde bir kaç alanı kontrol ettirmek istiyorum. Örneğin 1. kutucukta adı, 2. kutucukta soyadı, 3. kutucukta kullanıcı adını, 4. kutuckta ise e-posta adresini kontrol ettirmem istiyorum. Ama maalesef yapadım. Yardımlarınızı bekliyorum.
    Saygılarımla.

  28. # buğra | 19 Eylül 2008, 17:04 Gravatar

    bence hiç ugrasma beş para etmez :) kimse yardım edemio çünki kimse bilmio adam gibi:)

    baska kütüphane kullanmaya başlasan iyi olur :) option butonları gönderemiyorsun hatalı içinden kod değiştirerek saplarsın ama deyeceğini sanmıyorum :) ….

  29. # Turan Mavituna | 25 Eylül 2008, 13:13 Gravatar

    # buğra sanırım haklısın. Bir site yapılmış ama amacına ulaşmaktan uzak. Ben de şimdi başka kütüphane araştırmaya başladım. Teşekkür ederim.

  30. # Mehmet Demir | 25 Eylül 2008, 22:20 Gravatar

    @Turan Mavituna, her alan için bir tane ajax kontrolu yapabilirsin, tek fark her alan için başka bir fonksiyon yazman.
    örneğin ziyaretçi mail girerken onchange fonksiyonuna
    var sc = “mail=”+fc_(mail)+”&neyikontrol=mail”;
    JXP(1, “mailsonucu″, “kontrol/kotrol.php”, sc);
    kodunu içerir bir fonksiyon,
    yine kullanıcı adını girerken
    var sc = “kullanici=”+fc_(mail)+”&neyikontrol=kullaniciadini”;
    JXP(1, “kullaniciadisonucu″, “kontrol/kotrol.php”, sc);
    kodunu içerir bir fonksiyon yazmayı deneyebilirsin. ve diğer alanlar içinde.

    Aslında herbiri için ayrı bir fonksiyon yazmana gerek yok, şöyleki; fonksiyon çağrılırken this diyerek çağıran alanın kendisinide fonksiyona atarak fonksiyon içindeyken neyikontrol = gelen_alan.name; dersen ve kontrol.php yi de o isme göre kodlarsan bir tane fonksiyon yeterli olur düşüncesindeyim.
    Tabi denemek lazım ben deneme fırsatı bulamadım.

  31. # buğra | 26 Eylül 2008, 18:42 Gravatar

    yeterli olur tabikide :)

    yanlız şu war dönen sonuc tek bir alanda kalır sanırım yani tek sorugunun faydası her alanın karşısına bir sonuc döndürmek tek sonuc dönsün derseniz o şekilde olabilir..

    turan :
    Bir site yapılmış ama amacına ulaşmaktan uzak

    bu sözünü doğru bulmuyorum :) çünki site amacına ulaşmıştır büyük ihtimal siteyi açanlar maddiyat kısmıyla ilgileniyolardır :) ki sağlamışlardır 5-10 paylaşımları ile de senin işin olmuş olmamış önemsiyeceğini sanmam..

  32. # Mehmet Demir | 27 Eylül 2008, 07:22 Gravatar

    Öncelikle Arkadaşlar yukarıda yazdığım gibi tek fonksiyon ile birden çok alan alan kontrolü yapabilen bir uygulama hazırladım. Kullanıcı adı, eposta adresi, web adresi’ni kontrol ediyor. Şu linkten indirebilirsiniz. http://rapidshare.com/files/148732890/birdencokalankontrolu.rar.html

  33. # Turan Mavituna | 03 Ekim 2008, 06:16 Gravatar

    Çok teşekkür ederim. Mahcup oldum şimdi. :(

  34. # Mehmet Demir | 04 Ekim 2008, 15:03 Gravatar

    ben bu siteyi çok beğendim.
    Doğrusu internetteki ders ve makalelerin birçoğu konu hakkında bir miktar veya daha fazla bilgi sahibi olmayı gerektiriyor.
    hal böyle olunca herkesin aynı düzeyde fayda sağlaması mümkün olmuyor.
    bu site benim ajax ile tanışmamı sağladı. editörlere çok teşekkür ederim. böyle güzel makalelerin devamı dileğiyle.

  35. # Mert Ulubay | 14 Ekim 2008, 15:56 Gravatar

    Arkadaşlar,
    Ben submit olayını yapamadım. yani kontrol ettiğimiz alanlar ok lendikten sonra,formu nasıl submit edeceğiz?

  36. # Əflatun | 06 Mayıs 2009, 06:23 Gravatar

    Çox sağ olun. Təşəkkürlər.

    Teşekkürler. Bi program üzerinde çalışıyorum. Ajax desteğine ihtiyacım vardı.
    Teşekkürler Türkiye ve AJAX-TR.

  37. # akın | 10 Mayıs 2009, 17:12 Gravatar

    Arkadaşlar bu uygulamayı asp ile yapabilen var mı acaba. Kontrol.asp yi bir türlü çalıştıramadım yardımlarınızı bekliyorum teşekkürler.

  38. # herace | 01 Haziran 2009, 00:24 Gravatar

    Kaynak kodarı indiremiyorum ve makale içerisinde kodlarda da eksiklik var!

  39. # pasion | 26 Haziran 2009, 12:52 Gravatar

    linkler ölmüş

Yorum yazın

sayfa sayacı