AJAX İle Yerinde Düzenleme

Bu yazımızda AJAX'in kullanılabileceği yerler arasında özellikle veritabanı uygulamalarında işimizi oldukça kolaylaştıran Yerinde Düzenleme (Edit In Place) işlemini inceleyeceğiz. Konuyu daha iyi anlatabilmek için yine örnek bir uygulama hazırladık. Erhan (eburhan) tarafından yazılmış olan AJAX Yerinde Düzenleme Betiği'ni size ben anlatacağım. Neden böyle oldu derseniz, aslında kodları da ben yazacaktım fakat eburhan'ın zaten önceden kendisi için hazırladığını öğrendim. Kodlarını biraz düzenleyip gönderdi. Bize de anlatmak kaldı

Önce Mantık
Yerinde düzenleme betiğinde sayfamızdaki bir "div" içinde metnimiz bulunur. div'den başka bir etiket de olabilir. Örneğimizde div kullandığımız için açıklamalarımda div diyeceğim. Fare ile üzerine tıklandığında belirtilen div'in yerinde bir textarea veya textbox oluşturulur ve bu form nesnesinin (textarea/textbox) değeri, o an üzerine tıklanmış olan div'in değeri olur. Kutu içinde değişiklikler yapıldıktan sonra kutunun dışında bir yere tıklandığında yani onBlur olayında, kutudaki değer veritabanına veya metin (text) dosyasına kaydedilir. Örnek uygulamamız olan AJAX Yerinde Düzenleme Betiği'nde basit bir text dosyası kullandık.

Dosyalar
 

AJAX Yerinde Düzenleme Betiği dosyaları
eyceks: Bu uygulamamızda da eburhan'ın eyceks kütüphanesini kullanıyoruz. Görmüş olduğunuz eyceks klasöründe de bu kütüphanenin dosyaları mevcut.
depo.txt: Verileri sakladığımız metin dosyasıdır. Kutunun içine girilen yazı, yaz.php dosyası ile depo.txt'ye yazılır ve oku.php dosyası ile buradan okunur.
index.php: Betiğimizin temel dosyası, anasayfasıdır. Javascript fonksiyonlarımız ve css tanımlamalarımız yine bu dosyada bulunmaktadır.
oku.php ve yaz.php: Yerinde düzenlemenin gerçekleştiği div, betik çalıştırıldığı anda oku.php'nin depo.txt dosyasını okuyarak almış olduğu verileri görüntüler. div'in üzerine çift tıklandıktan ve metin kutusunda gerekli düzenleme yapıldıktan sonra ekranda başka bir yere tıklandığı anda metin kutusundaki bilgi yaz.php dosyası vasıtasıyla depo.txt dosyasına yazılır.

Fonksiyonlar
Bu sefer farklı bir yöntem deneyerek kodların açıklamasını hemen kodların bulunduğu satırlarda yaptık. Gelecek olan yorumlara/eleştirilere göre bundan sonraki açıklamalarımızı ona göre yapacağız. Fakat fonksiyonların maksatlarını kısaca anlatmanın faydalı olacağını düşünüyorum.

EditInPlace() : Temel fonksiyonumuzdur. div'in metin dosyasına dönüşmesini sağlar ve metin kutusundan farklı bir yere tıklandığında DepoyaYaz() fonksiyonunu çağırır.
DepoyaYaz() : Metin kutusundan farklı bir yere tıklandığı zaman EditInPlace() fonksiyonu tarafından bu fonksiyon çağırılır. Kutudaki veriyi depo.txt dosyasına yazmaya yarar. Bunu yaparken de AJAX ile yaz.php dosyasına metin kutusundaki veriyi gönderir.
DepodanOku() : div'in değerini bu fonksiyon döndürür. AJAX ile oku.php'ye çağrı yapar ve oku.php'nin depo.txt'yi okuyarak gönderdiği bilgiyi div'in içine yazar.

PLAIN TEXTJAVASCRIPT:
window.onload = function() {
// Pencere yüklendiği anda depodan AJAX ile okuma yap
DepodanOku();

// 'editlenebilir' alanının 'onclick' olayına 'EditInPlace' fonksiyonunu yerleştir
document.getElementById('editlenebilir').onclick = EditInPlace;
}


function DepodanOku()
{
JXG(1, 'editlenebilir', 'oku.php');
}

function DepoyaYaz(yazi)
{
// eğer 'yazi' boş ise uyar
if( yazi.length <1 )
{
alert('Boş kayıtlar gönderilmez !');
document.getElementById('yazi_kutusu').focus();
return false;
}
else
{
// Yukarıda oluşturduğumuz 'textarea' nesnesinden yazıyı al
document.getElementById('editlenebilir').innerHTML = yazi;

// AJAX ile veriyi kaydet
// 'no_id' demek AJAX ile veriyi gönder, ama geriye bir sonuç alma demek
var sc = 'yazi=' + fc_(yazi);
JXP(0, 'no_id', 'yaz.php', sc);

// Daha önce devre dışı bıraktığımız 'editlenebilir' alanının
// 'onclick' olayını yeniden etkinleştiriyoruz
document.getElementById('editlenebilir').onclick = EditInPlace;

return true;
}
}


function EditInPlace()
{
// geçerli yazıyı al
var GecerliYazi = document.getElementById('editlenebilir').innerHTML;

// 'editlenebilir' alanının 'onclick' olayını geçici olarak devre dışı bırak
document.getElementById('editlenebilir').onclick = function() { void(0) };

// yeni bir 'textarea' nesnesi oluştur
var textarea = '<textarea id="yazi_kutusu" onblur="return DepoyaYaz(this.value)">'+GecerliYazi+'</textarea>';

// 'geçerli yazı'nın olduğu yere yukarıda oluşturduğumuz
// textarea nesnesini yerleştiriyoruz. İçerisinde yazı da var.
document.getElementById('editlenebilir').innerHTML = textarea;

// Biraz önce oluşturduğumuz textarea nesnesine odaklanıyoruz
// Yani imleç otomatik olarak textarea nesnesinin içerisine giriyor
document.getElementById('yazi_kutusu').focus();
}

Sonuç
Bu örneği aslında ben hazırlayacaktım fakat eburhan zaten kendisi için önceden yazmış. Bunun üzerine onun betiğini size anlatmaya çalıştım. Umarım faydalı da olmuşuzdur.

PHP
Yerinde Düzenleme Betiği'ni buradan test edebilirsiniz.
Betiğin kaynak dosyalarını buradan indirebilirsiniz.

ASP (tşk. Janberk)
Yerinde Düzenleme Betiği'ni buradan test edebilirsiniz.
Betiğin kaynak dosyalarını buradan indirebilirsiniz.