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.