Ajax ile Veritabanına Veri Ekleme

24 / Şubat / 2008 Author

İsa Engiz

ajax

ajax

4 Yorum Yapilmis.

Daha önceki yazımızda phpmyadmin kullanmadan nasıl veritabanı ve tablolar oluşturacağımızı tartışmıştık. Şimdi oluşturduğumuz tabloya veri ekleme zamanı ve bunu da ajax ile yapacağız.

Bir önceki yazıyla ilişkili olması için orada oluşturduğumuz cd tablosuna veri ekleyeceğimizi varsayıyoruz. Bu çalışma sonunda yapacağımız örneği bu sayfada görebilirsiniz. Dosyaları ise buradan indirebilirsiniz.

Form

İlk önce oluşturacağımız form ile başlayalım. Tablomuzda 4 tane alan vardı ve bunun bir tanesi auto_increment olarak tanımlandığından biz sadece diğer üç alana veri ekleyeceğiz, album_adi, sanatci_adi ve album_yili. Formumuzun kodları aşağıdaki gibi olacak:

<form>
    <span>Albüm Adı:</span> <input type="text" id="album_adi" class="girdi" /><br />
    <span>Sanatçı Adı:</span> <input type="text" id="sanatci_adi" class="girdi" /><br />
    <span>Albüm Yılı:</span> <input type="text" id="album_yili" class="girdi" /><br />
    <input type="button" onClick="kaydet()" value="KAYDET!" />
</form>

Bu form yazımında ajax kullanılmayan mantığa göre 3 farklı yön bulunmakta. Birincisi form’u tanımlarken action=”" dosyasının tanımlanmaması, çünkü bu dosyayı ajax tekniğiyle çağıracağız. Aynı şekilde method=”" da tanımlanmamış durumda. Üçüncü nokta ise formu kaydetmek için ajax tekniğini nasıl kullanacağımız konusunda:

<input type="button" onClick="kaydet()" value="KAYDET!" />

Görüleceği üzere input type=”submit” yerine normal “button” kullanıyoruz ve bu düğmeye bir javascript olayı ekliyoruz: onclick=”kaydet()”. Düğmeye tıklandığında kaydet() isimli fonksiyon çağrılıyor. İşte bu şekilde formu işlemeye başlıyoruz.

Javascript ve XMLHttpRequest()

Şimdi dosyanın javascript kısmına bakalım, ilk önce httpRequest’imizi oluşturuyoruz:

if (window.XMLHttpRequest)
{
	istek = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	istek = new ActiveXObject("Microsoft.XMLHTTP");
}

istek isimli değişkenimize tarayıcıya göre httprequest’imizi yüklüyoruz. Ardından kaydet() fonksiyonu geliyor:

function kaydet()
{
	album_adi = document.getElementById("album_adi").value;
	sanatci_adi = document.getElementById("sanatci_adi").value;
	album_yili = document.getElementById("album_yili").value;
        var number = Number(new Date);
 
	istek.open("GET", "kaydet.php?album_adi="+album_adi+"&sanatci_adi="+sanatci_adi+"&album_yili="+album_yili+"&number="+number, true);
	istek.onreadystatechange = verileriAl;
	istek.send(null);
}

Formdaki düğmeye tıklandığında bu fonksiyon çağrılıyordu, bu fonksiyonun ilk yaptığı iş ise forma girilmiş olan verilerin değerlerini almak. Bunu şu şekilde başarıyoruz:

album_adi = document.getElementById("album_adi").value;

“album_adi” id’sine sahip doküman elemanının değerini alıyoruz. Formdaki değerleri aldıktan sonra hedefimiz bu verileri php dosyasına göndermek. Bunu, oluşturduğumuz istek nesnesini kullanarak yapıyoruz;

istek.open("GET", "kaydet.php?deger=1", true)

open metodunun kullanımı bu kadar basit, belirlememiz gerekn 3 değer var, kullanılacak metod, GET veya POST olabilir, bu örnekte ise biz GET kullandık. Ardından adresi yazıyoruz, yukarıdaki küçük örnekte bu adres “kaydet.php?deger=1″. Burada kaydet dosyasına GET metoduyla yollanan bir değişken var, $değer=1. Bizim örneğimizde ise kaydet.php dosyasına yolladığımız değerler biraz daha uzun ama mantığımız aynı, sonuçta bizim örneğimizdeki adres şöyle gözükecek:

kaydet.php?album_adi=metamorfoz&sanatci_adi=tarkan&album_yili=2008&number=85

Bu adreste sizinde dikkatinizi çeken bir husus, bizim hiç bir işimize yaramayacak olan number adlı değişken ile yollanan değer. Bunun bizim uygulamamızla hiç bir alakası yok, ama GET metodunu kullandığımızda bunu hep yapmalıyız, nedeni ise başka bir yazının konusu olsun.

open metodunda belirlememiz gerek 3. girdi ise “true” veya “false” değerini alabilir, true ile ilgili sayfanın asenkronize çağrılmasını sağlarız. Bu değeri “false” yaparsak uygulamamızın hiçbir anlamı kalmaz.

open metodu ile php dosyasına asenkronize bağlantı açtıktan sonra, karşı dosyadan bir cevap gelmesini bekliyoruz, bunu ise “onreadystatechange” metodu ile yapyoruz.

istek.onreadystatechange = verileriAl

Bu metodun özelliği karşı taraftaki dosyaya (kaydet.php) durmadan “tamam mı, bitti mi?” diye sormasıdır, karşı taraftaki dosya “bitti!!!” dediğinde ise “verileriAl()” fonksiyonunu çağırır. (dikkat ederseniz, verileriAl fonksiyonunu yazarken () parantezlerini kullanmadık, bunun anlamı fonksiyonu daha sonra tanımlayacağımızdır.)

.php dosyası

kaydet.php sayfası ise bildiğimiz şekilde verileri veritabanına ekleyecek dosya.

<?php
 
$sanatci = $_GET["sanatci_adi"];
$album = $_GET["album_adi"];
$yil = $_GET["album_yili"];
 
include("baglanti.php");
 
$sorgu = mysql_query("INSERT INTO cdlerim VALUES ("", "$sanatci", "$album", "$yil")");
 
if ($sorgu)
{
     echo "İşleminiz başarıyla gerçekleştirildi!";
}
else
{
     echo "HATA!!! Verileriniz eklenemedi...";
}
 
?>

kaydet.php dosyasında ajax tekniği açısından önemli olan tek şey dosyanın geriye ne döndürdüğüdür, bizim uygulamamızda basit bir şekilde “başarı” veya “başarısızlık” diye bir sonucu ekrana yazmasıdır.

Verileri işleme

Gelelim bu kaydet.php dosyasından gelen verileri işleyecek fonksiyona, verileriAl()

function verileriAl() {
	if (istek.readyState == 4 && istek.status == 200)
	{
		var cevap = istek.responseText;
		document.getElementById("sonuc").innerHTML = cevap;
		document.getElementById("sonuc").style.backgroundColor="#F2E6B6";
	}
}

istek nesnesi ile kaydet.php dosyasına bir bağlantı oluşturmuştuk, verileriAl() fonksiyonu çağrıldığında istek nesnesi ile oluşan bağlantıdan gelen verilerin tamamlanıp tamamlanmadığını sorgulayarak işe başlıyor:

if (istek.readyState == 4 && istek.status == 200)

readystate=4 ve status=200 bağlantıdan akan verilerin tamamlandığına işaret eder. If kısmının içinde ise ilk yaptığımız kaydet.php dosyasından gelen verilerin “cevap” isimli değişkene atanması:

var cevap = istek.responseText;

kaydet.php dosyası sonuç olarak sadece ekrana birşeyler yazdırıyordu, işte bu ekrana yazılan değerler, kaydet.php dosyasının çıktısı oluyor bizim uygulamamızda. Bu çıktı düz bir metin olduğu için “responseText” metodu ile alıyoruz. (kaydet.php dosyasının çıktısı XML’de olabilirdi, o halde responseXML metodunu kullanacaktık.)

Şimdi cevap değişkeninde kaydet.php dosyasının ekran çıktısı bulunmakta. Biz bunu dokümana, daha önceki yazımıda gösterdiğimiz gibi innerHTML kullanarak ekliyoruz ve işte bu kadar! “İşleminiz başarıyla gerçekleştirildi!” yazısını gördüğümüzde işlemimiz gerçekten başarıyla gerçekleştirilmiş olacak.

Ajax ile bu şekilde veritabanımıza veriler ekleyebiliriz, php dosyasının asenkronize çağrılması ile hem zamandan hem performanstan kazanmış oluruz.

Bir sonraki ajax yazısında buluşmak üzere!

Not: Dosyaları buradan indirebilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!