AJAX ve PHP ile Form Doğrulama

AJAX ve PHP ile Form Doğrulama
Ekim 08 20:10 2012 Bu yazıyı yazdır

Bu yazıda, PHP ve AJAX kullanarak form alanlarına kullanıcının submit tuşuna bastığı anda, alanlar istenilen doğrultuda doldurulup doldurulmadığını kontrol eden bir uygulama yapacağım. Bildiğiniz gibi, AJAX, javascript kullanılarak icra edilen bir teknolojidir, programlama dili değildir. En büyük özelliği, sayfa yenileme işlemine ihtiyaç duymadan çalışabilmesidir. Ajax teknolojisi, HTML, CSS, PHP, ASP, JavaScript, XML gibi platform, teknoloji ve dillerle iç içe çalışabilmektedir.

Yapacağımız uygulama, kullanıcı verileri alınan form butonuna basıldığında devreye girecek bir kontrolu temsil etmektedir. Bu noktada 2 işlem vardır:

  1. Kullanıcı bir şeyler yazar veya yazmaz.
  2. Sistem yazılan datayı ekrana yazdırır, ya da data yazılıp yazılmadığını ekrana yazdırır.

3 adet dosyamız mevcut:

  • example.html (kullanıcının veri gireceği formun bulunduğu sayfa)
  • kitchen.php (formdan, ajax ile gönderilen verilerin analiz edildiği sayfa)
  • lib.ajax.js (ajax dosyası [kütüphane])

lib.ajax.js

example.html

[javascript]
<script language="javascript" src="lib.ajax.js">
var ajaxObject;

function CheckItOut() {
subject = ajaxObject;
method = ‘GET’;
path = ‘kitchen.php’;
func = sonuc;
dataMore = document.getElementById("data").value;
more = ‘data=’ + dataMore;
statu = "true";

UJaX(subject, method, path, more, func, statu);
}

function sonuc() {
if(ajaxObject.readyState == 4) {
if(ajaxObject.status == 200) {
DM = ajaxObject.responseText;
//DM = document.form1.data.value;
if(DM == "You must write something!")
document.getElementById("MyButton").disabled = true;
else
document.getElementById("MyButton").disabled = false;
} else
DM = "Error = Nu/1";
} else
DM = "Loading…";
document.getElementById("MyLabel").innerHTML = DM;
}
</script>
[/javascript]
example.html dosyasının içerisinde include edilecek olan bu javascript kodlarını yazdıktan sonra example.html sayfasının içerisindeki form alanını kodlayabiliriz.

Kullanıcı data giriş alanı


kitchen.php

Evet! Kodlama işlemimiz bitti. Uygulamayı görmemizin vakti geldi. Bunun için example.html sayfasını açıyoruz ve veri giriyoruz.

Kullanıcı data girerken


Enter tuşuna ya da butona basıldığı anda, girilen data ekrana yazdırılacaktır. Ancak eğer form alanına herhangi bir data girmez isek, aşağıdaki görüntü elde edilecektir.

Kullanıcı data girerken


Görüldüğü gibi, buton pasif halde bulunmakta ve form alanına bir şeyler girilmesini beklemektedir. Aynı zamanda ekrana uyarı da gelmektedir.
Eğer bu uygulamanın demo görüntüsünü incelemek istiyorsanız, buraya tıklayabilirsiniz.

Not: Bu makale, tarafımdan http://stdioe.blogspot.com/2011/10/form-validation-using-ajax-and-php.html adresinde İngilizce dilinde de yayınlanmıştır.

  Yazı şöyle etiketlendi:
  Kategoriler:
A.Gökhan, M.Sc.
A.Gökhan, M.Sc.

My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com

Daha fazla yazı görüntüle
Yorum yaz

0 Yorum

Henüz yorum yok

Tartışma başlatabilirsin.

Yorum ekle

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.

*