Ajax ile dinamik listeleme

04 / Mart / 2008 Author

İsa Engiz

ajax

ajax

21 Yorum Yapilmis.

Bazen select ile oluşturulan menülerin, bir başka select alanından gelecek değerlere göre değişmesi gerekebilir. Mesela, kullanıcıya önce ilini seçmesini sorarsınız, ardından seçtiği ile göre ilçesini seçmesini sorarsınız. Böyle bir uygulama, dinamik listeleme gerektirir ve biz bu yazıda böylesine bir dinamik listelemeyi ajax tekniğini kullanarak yapmaya çalışacağız.

Biz bu yazımızda il-ilçe listeleme değilde, arabalar ve modellerini listleyeceğiz. Bu uygulamanın canlı örneğine buradan göz atabilirsiniz. Uygulamanın dosyalarını ise buradan indirebilirsiniz.

Uygulamamızın ana mantığı şu şekilde; kullanıcı ilk ekranı gördüğünde araba markalarından birini seçecek, seçilen bu araba markasına göre veritabanından o markaya sahip arabaların modelleri listelenecek, kullanıcı yine bu modellerden birini seçtiğinde buna göre araba yılları listelenecek.

Temel olarak iki dosyamız var, index.html ve sorgula.php. index sayfamızda gerekli html ve javascript kodları bulunuyor, sorgula.php sayfasında ise veritabanına bağlanıp gerekli verileri çekecek kodlar bulunmakta.

Veritabanı

İşe, veritabanımızı oluşturacak kodlar ile başlayalım. veritabanımız şu şekilde olmalı:

id	marka	model	yil
veri	veri	veri	veri
veri	veri	veri	veri

Bu tabloyu oluşturmak için gereken sql kodunu buradan indirebilirsiniz.

index.html

Sayfa ilkkez yüklendiğinde kullanıcının karşısına marka seçmesi için bir select alanı gelecek:

<select id="marka">
<option>Lütfen bir marka seçiniz.</option>
<option value="honda">Honda</option>
<option value="hyundai">Hyundai</option>
<option value="isuzu">Isuzu</option>
<option value="iveco">Iveco</option>
</select>

Bu select alanından markalardan biri seçildiğinde hemen altında modeller listelenecek, bunu yapması için de, bir javascript fonksiyonu ekliyoruz, “onchange=’modelGoster()’. Daha sonra bütün listelemelerimizde de bir sonraki aşamayı yapacak olan fonksiyonu çağıracağız.

Bunun dışında daha sonra model ve yılların lisiteleneceği alanları önceden belirliyoruz:

<div id="kutu2">
</div>
 
 
<div id="kutu3">
</div>
 
 
<div id="kutu4">
</div>

Javascript

Javascript kısmında ilk önce XMLHttpRequest nesnemizi oluşturuyoruz:

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

Tarayıcıya göre nesnemizi oluşturyoruz ve “istek” isimli değişkene yüklüyoruz. Bu işlem, her ajax işleminde aynı bir süreç, değişen pek fazla bir şey yok.

Ardından bizim uygulamamız için asıl önemli olan fonksiyon geliyor: modelGoster();

function modelGoster()
{
	document.getElementById("kutu2").innerHTML = "Yükleniyor, lütfen bekleyiniz...";
	document.getElementById("kutu2").style.backgroundColor = "#FFFF99";
	document.getElementById("kutu1").style.backgroundColor = "#FFF";
 
	var marka = document.getElementById("marka").value;
	istek.open("GET", "sorgula.php?islem=modellistele&amp;marka="+marka, true);
	istek.onreadystatechange = modeller;
	istek.send(null);
}

Dokümandaki select alanında bir değişiklik olduğunda bu fonksiyon çağrılıyordu. ModelGoster() fonksiyonunun ise ilk yaptığı iş, araba modellerinin listeleneceği ikinci kutuya, (“kutu2″ id’sine sahip div etiketinin bulunduğu yere), “yükleniyor, bekleyiniz” yazmak. Böylece kullanıcı araba markasını seçtikten sonra ajax uygulaması bitene kadar bu yazıyı görecek. Bunun ardından ise javascript ile dinamik olarak birkaç sitil düzenlemesi yapıyoruz.

Ardından ise, uygulamanın en önemli kısmı geliyor, seçilmiş olan arabayı almak:

var marka = document.getElementById("marka").value;

Dokümanda oluşturduğumuz select alanının id’si marka idi, bu kod parçası ile select alanında hangi değerin seçilmiş olduğunu bulabiliyoruz ve bunu marka isimli değişkenimize yüklüyoruz. Sonra ise php dosyamıza asenkronize veri yolluyoruz:

istek.open("GET", "sorgula.php?islem=modellistele&amp;marka="+marka, true);

php dosyamıza iki farklı değiken yolluyoruz, birincisi hangi işlemi yapması gerektiğini söylemek için, “islem=modellistele” ve ikincisi ise marka. php dosyasından gelecek verileri işleyecek fonksiyonumuz ise modeller():

istek.onreadystatechange = modeller;

sorgula.php

php dosyamızda yapacağımız ilk iş gelen verileri almak:

$islem = $_GET["islem"];
$marka = $_GET["marka"];
$model = $_GET["model"];
$yil   = $_GET["yil"];

$islem değişkeni her seferinde gelmeli ve eğer yapılacak işlem modelleri listelemekse, hangi markanın modellerinin listeleneceği de belirtilmeli.

$islem değişkenine göre yapılacak işlemi belirliyoruz:

if ($islem == "modellistele")
{
	$sorgu = mysql_query("SELECT DISTINCT model FROM arabalisteleme WHERE marka='$marka'");
 
	echo "
<select id="model">
	<option>Lütfen bir model seçiniz.</option><option value="&quot;.$yaz[&quot;model&quot;].&quot;">".$yaz["model"]."</option></select>
 
	<span>Arabanızın modelini seçiniz.</span>";
}

Bu if kod parçasının görevi veritabanına bağlanıp, belli bir markanın modellerini çekmek ekrana echo ile yazmak. Ajax uygulamasında ise biz bu ekrana yazdırılan veriyi “responseText” ile alıp kendi dokümanımıza ekleyeceğiz.

Bu kod parçasında önemli bir nokta php kodları ile oluşturulan select alanındaki “onchange=yilGoster()” fonksiyonu. Yani, select alanını oluştururken kullanılacak dokümana göre oluşturuyoruz, daha sonra bu select alanının kullanılacağı yer belli olduğu için bu şekilde sıkı tanımlamalar bizim uygulamamızda sorun yaratmayacak. Bir diğer önemli nokta ise select alanının yalnızca seçeneklerinin bir döngü ile yazdırılması. Her hangi bir arabanın kaç tane modelinin vertabanında kayıtlı olduğunu bilmediğimiz için, çekilen bütün modeller için bir seçenek oluşturuyoruz. (Ama aynı modeli çekmemek için de sorgu cümlemizde DISTINCT kullandık.)

Bu kod parçası ekrana bir select alanı yazdırırken, biz bu select alanını ise index.html dosyasındaki javascript ile alıyoruz ve dokümanımıza entegre ediyoruz.

Verileri işleme

php dosyası işlemini tamamlayınca verileri işleyecek fonksiyonumuz modeller() fonksiyonuydu:

function modeller() {
	if (istek.readyState == 4 &amp;&amp; istek.status == 200)
	{
		var cevap = istek.responseText;
		document.getElementById("kutu2").innerHTML = cevap;
	}
}

Bu fonksiyonun yaptığı iş ise diğerlerine göre oldukça basit, sorgula.php dosyasından gelen verileri cevap isimli değişkene yüklüyor ve bunu, olduğu gibi hiç değiştirmeden “kutu2″ id’li div etiketinin içine yerleştiriyor.

Sonuç

Aslında kod bu kadar, aynı işlemi veritabanındaki arabaların yıllarını listelemek için tekrarlıyoruz. Anlaşılır olması amacıyla her biri için ayrı fonksiyon yazdım ama tek bir fonksiyon ile de halledilebilirdi.

En son fonksiyonumuz ise sonucGoster() fonksiyonu:

function sonucGoster()
{
	document.getElementById("kutu4").style.backgroundColor = "#FFFF99";
	document.getElementById("kutu3").style.backgroundColor = "#FFF";
	document.getElementById("kutu4").innerHTML = "<span>Tebrikler! İşleminiz tamamlandı...</span>";
}

Sonuç olarak yalnızca “Tebrikler!!” yazıyoruz “kutu4″ id’sine sahip div etiketinin içine. Ancak burada seçilen aranbanın modelini ve yılını da yazabilirdik, “2005 model bir honda civic seçtiniz” diye. Bunu da siz yapabilirsiniz! (işlemin sonunda javascript ile her select alanının değerini alarak… )

Ajax ile veri tabanına bağlanıp dinamik olarak listeleme yapmanın temel mantığı böyle. Biz burada arabalar için yaptık, siz il ve ilçeler için de yapabilirsiniz. Sonuçta bunları geliştirmek sizin elinizde…

Bir sonraki ajax yazısında görüşmek üzere…

Güncelleme : ajaxlisteleme | Dosyayı indir!

- 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!