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 6497 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 13 kişi aynı anda okumuş.
Bugün 0 kez okunmuş.

Etiketler: , , , , , , , 

1 oy2 oy3 oy4 oy5 oy (19 oy, ortalama 4.89) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

17 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

Yorum yazın

sayfa sayacı