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.

kitchen.php

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

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.

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.