Tekradan merhaba arkadaşlar. Yine bir AJAX uygulaması ile sizlerleyim. Bu yazımda sizlerle AJAX tekniğinin ne kadar hoş ve güzel bir teknik olduğunu tekrar görmüş olacağız. Sizlere bu makalemde AJAX ile filtreleme yönetimini PHP ile birleştirerek anlatacağım. Bu yöntemle çok daha hızlı arama yapabilir ve çok daha estetik bir görüntü ile filitreleme işlemini yapabilirsiniz.
Dosyalar
Bu uygulamada anasayfayı oluşturan index.php, filitrelemenin yapıldığı filitrele.php, oyuncuların özelliklerini göstermek istediğim oyuncu.php dosyası ve eyceks kütüphanesi içindeki dosyalar (loading.gif , eyceks.js) bulunmaktadır .
Başlıyoruz . . .
İlk olarak uygulamamıza filitrenin nasıl edileceği konusunda karar vermemiz lazım. Bu uygulamada aynı zamanda ajax'te Dinamik Formları da kullanmış olacağım. Biliyorsunuz ajax'in diğer bir güzel özelliği ise Dinamik Formlar'dır. Dinamik formdan kastım isteğimize o anda karşılık verecek olan formlarlardır. Dinamik formlarla ilgili AJAX Ne Gibi Durumlarda Kullanılmalı? başlıklı yazıya da bakabilirsiniz. Neyse konuyu fazla uzatmadan hemen ilk bölüme geçiyorum.
Filitreleme formumuz :
-
<form id="form1" name="form1" method="post" action="javascript:void(0)">
-
-
<select name="takimlar" onchange="hangi_takim()">
-
<option value="0">Takımlar</option>
-
<option value="1">Galatasaray</option>
-
<option value="2">Fenerbahçe</option>
-
<option value="3">Beşiktaş</option>
-
</select>
-
</form>
Şimdi bu formu eyceks kütüphanesi ile filitre.php'ye göndermek istiyorum. Hepimiz eyceks kütüphanesinin nasıl çalıştığını biliriz. Bunu da ek olarak yazayım.
Eyceks ile filitre.php ye gönderme :
-
function hangi_takim(){
-
-
var takimlar = document.form1.takimlar.value
-
-
var sc = 'takimlar='+ fc_(takimlar)
-
-
JXP(1, 'takim_goster', 'filitrele.php', sc)
-
-
}
Evet şimdi sıra sistemden herhangi bir takımı seçtiğimizde bize o takımın oyuncularından bazılarını nasıl getirebileceğimizde. Bu iş filitre.php'de bitiyor tabii ki. Ben oyuncuları gosterdikten sonra bir kez daha o oyuncular arasından seçim yaptırarak oyuncu hakkında kısa ve öz bir bilgiyi ekranda göstermek istiyorum. Onun için filitre.php'de de biraz farklılık yapacağım.
filitre.php dosyasındayız :
-
<?
-
$takim= $_POST['takimlar'];
-
?>
-
-
<form id="form2" name="form2" method="post" action="javascript:void(0)">
-
-
<?
-
if($takim==1){
-
?>
-
-
<select name="oyuncular" onchange="hangi_oyuncu()">
-
<option value="">Oyuncu Seciniz..</option>
-
<option value="1">Necati Ates</option>
-
<option value="2">Hakan Sukur</option>
-
<option value="3">Umit Davala</option>
-
</select>
-
-
<?
-
}elseif($takim==2){
-
?>
-
-
<select name="oyuncular" onchange="hangi_oyuncu()">
-
<option value="">Oyuncu Seciniz..</option>
-
<option value="1">Appiah </option>
-
<option value="2">Serkan</option>
-
<option value="3">M.Yozgatli</option>
-
</select>
-
-
<?
-
}elseif($takim==3){
-
?>
-
-
<select name="takimlar" onchange="hangi_oyuncu()">
-
<option value="">Oyuncu Seciniz..</option>
-
<option value="1">Vedran Runje</option>
-
<option value="2">Jose Kleberson Pereira</option>
-
<option value="3">Deivson Rogerio Da Silva</option>
-
</select>
-
-
<?
-
-
?>
-
-
</form>
filitre.php'de ise şu şekilde bir olay izledim. 1. Takımı seçerse şu futbolcuları sırala, 2. takımı seçerse şu futbolcuları sırala tarzında. Yine üzerine bastırarak belirtmek istiyorum. Amaç sadece mantık. İşin içine veritabanı da girince inanılmaz güzel, zevkli ve estetik hale getirebilirsiniz olayı.
filitre.php'de dikkat etmeniz gereken olay şu. Benim 3. bir aşama daha istemem. Yani Oyuncular hakkında kısa ve öz bir bilgi. Onun için tüm forumları ilk formumuz gibi düzenledim filitre.html içine çağırdıgımızda eyceks ile yine kodlar çalıştıracağız. Bu formların OnChange özelliğine dikkat edin ." hangi_oyuncu() " Görüyorsunuz değıl mi? Şimdi filitre.html de hangi_takim() altına bir de hangi_oyuncu() fonksiyonu yazmamız lazım. O da şu şekilde olacak:
hangi_oyuncu() fonksiyonu :
-
function hangi_oyuncu(){
-
-
var oyuncular = document.form2.oyuncular.value
-
-
var sc = 'oyuncular='+ fc_(oyuncular)
-
-
JXP(1, 'oyuncu_goster', 'oyuncu.php', sc)
-
-
}
İşte bu fonksiyonu aynı javascript bloğumuz içine yazıyoruz Çağırdığımızda ise eyceks kütüphanesini kullananların bildiği gibi oyuncu.php'nin çıktısı, ID'si "oyuncu_goster" olan bir DIV alanının içerisine yazdırılacak.
oyuncu.php dosyası :
-
<?
-
$oyuncu= $_POST['oyuncular'];
-
?>
-
-
<?
-
if($oyuncu==1){
-
?>
-
-
Bu Seçtiğiniz Oyuncu 1 numaralı bir oyuncudur.
-
-
<?
-
}elseif($oyuncu==2){
-
?>
-
-
Siz şimdi 2 numaralı oyuncuyu seçtiniz.
-
-
<?
-
} else if ($oyuncu==3){
-
?>
-
-
3 Numaralı oyuncuyu seçtiniz !
-
-
<?
-
-
-
-
?>
Sonuç :
İşte birkez daha ajax ile php birleşince neler yapabiliyor bunu gördük. Sizlere yardımcı olabildiysem ne mutlu bana .
Saygılarımla Umut ÇETİNKAYA.
Toplamda 7323 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 4 kez okunmuş.
Etiketler: ajax, eyceks, filtre, form, javascript, kütüphane, php
(30 oy, ortalama 4.4)
Oylanıyor ...
Trackback Yorumları takip et Baskı Önizleme
# murat yüksel | 05 Mayıs 2007, 17:20
yazınız için teşekkürler güzel bir çalışma.PHP ile MYSQL kullanılarak ve buna ek olarak AJAX sayesinden veri çekme işlemleri nasıl oluyor bu konu hakkında bilgi verebilirmisniz özellikle bir döküman hazırlayarak.Mesela bir yerdeki haberleri ajax ile mysqlden çekip sayfa yenilemeden sürekli olarak anasasayfaya gelmesini sağlamak için
# Nous | 13 Mayıs 2007, 06:24
selam hocam gayet güzel bir makale olmuş.. ellerine sağlık..
@murat yüksel;
şu yolu takip edebilirsin
$takimial = mysql_query(”SELECT * FROM takimlar where takimadi = ‘”.$_POST[’oyuncular’].”‘”);
$takim = mysql_fetc_array($takimlar);
vs vs vs vs..
# Nous | 13 Mayıs 2007, 06:25
$_POST[’oyuncular’] degilde $_POST[’takimlar’] olması gerekiyor.. en azından ben bu şekilde yapmıştım..
# Sefa | 14 Mayıs 2007, 21:19
Benim sorunumda databaseden bilgileri alip burada listeletebilirmiyiz..örnekse; http://unspace.ca/livefilter bu sitedeki gibi..bu sitede download da var ama php degil sanirim bisey anlamadim konuyla ilgili acil yardim ederseniz sevinirim
# selant | 18 Mayıs 2007, 22:57
Hocam dosyaları host’a atıp örnek için link verirseniz seviniriz. Saygılar, emeğinize teşekkürler.
# selant | 19 Mayıs 2007, 00:06
Bu projeyi hayata geçirmek konusunda yardımcı olabilir misiniz ?
# eburhan | 19 Mayıs 2007, 11:22
@selant
Yukarıdaki yazı zaten senin yapmak istediğin işlemi anlatıyor. Eğer adım adım uygularsan istediğin sonuca ulaşabilirsin. Biraz gayret
# Umut ÇETİNKAYA | 23 Haziran 2007, 12:25
@selant kardeşim yazdığım yazıyı biraz geliştirerek senin resimde gösterdiğin olay yapılabilir zaten
sadece biraz gayret !
# baris | 28 Haziran 2007, 09:58
bir sorum olacak mesela ben şunu yapmak istiyorum.
bir form alanım var ilk select box da araba markalarını çekiyorum. markayı seçtiğimde yanda ajax ile markaya ait modelleri listeliyorum. ancak bu bilgileri bir yere post ettiğimde ajax ile aldıgım modellere ait id bilgilerini gonderemiyorum gitmiyor bunun bir çözümü varmı
# gelgir | 25 Temmuz 2007, 03:39
Süpersin!!!
# Cumhur KORKUT | 01 Ağustos 2007, 21:41
@baris bir hidden inputu oluşturarak istediğin değeri atayabilirsin.
# Hakan | 03 Ağustos 2007, 14:07
Hocam ellerine sağlık güzel olmuş ama ben bu bahsettiğin dosyaları(loading.gif , eyceks.js) nereden alıcam
# yakuter | 03 Ağustos 2007, 22:17
Buradan indirebilirsin
# İİ çalışma | 10 Ağustos 2007, 22:04
Hocam ellerinize sağlık
# fatih uxun | 27 Kasım 2007, 18:02
Kaynak kodları veya en azından çalışan halinin demosu yok mu acaba?
# Kudret | 03 Aralık 2007, 23:30
Ellerinize sağlık ama ben bu kodları çalıştırdığımda hata veriyor.
onchange() hatası..
ne yapmalıyım…
# Selim Mavikareli | 05 Aralık 2007, 16:36
Merhabalar.
Bunun çalışan bir örneğini indirebileceğimiz bir ye var mı?
Saygılar.
# komik | 02 Ocak 2008, 20:34
teşekürler.
# Erdoğan | 03 Ocak 2008, 10:55
Merhabalar. Emeğinize sağlık hocam çok güzel çalışmalar bunlar. Sizlerin sayesinde çok şeyler öğrenmeye devam ediyoruz. Ancak ben asp ile çalışıyorum. Çalışmalarınızda genelde php iile örnekler vermişsiniz. Asp yede yer verirseniz çok mutlu oluruz. Herkese Kolay Gelsin
# sedat | 24 Ocak 2008, 09:59
teşekkür ederim akıcı ve açıklayıcı bir makale. Bu arada ajax ile php arasındaki ilişkiyi basit bir çizimle başlatırsanız çok daha faydalı olacağını düşünüyorum. Puanlama makalesinde dosyaların resimleri vardı. Ona benzer bir şelik oluşturup dosyalar arasındaki ilişkiyi çizerseniz bence tam verim alınmış olacaktır.
# Kanber | 25 Ocak 2008, 03:54
sanırım kodlarda küçük bir sorun var.
js ile formdan gelen verileri yakalıyoruz ama
var takimlar = document.form1.takimlar.value;
değeri boş dönüyor.
benzer şekilde
var takimlar = document.getElementById(’takimlar’).value;
denediğimde ise seçili olanı değil listede ilk sırada yer alan itemın değeri dönüyor.
bu sorunu nasıl aşabiliriz.
# serkan | 05 Mart 2008, 13:23
Gerçekten çok güzel bi çalışma yapmışsınız.Sayenizde ajax hakkında bilgi sahibi olmaya başladım.Yalnız bi yeri anlayamadım.formun action kısmındaki javascript:void(0) ne oluyo pek anlayamadım.Bir de örneklerinizde hep php ile beraber kullanımı anlatılıyor.Birazda asp ile ilgili örnekler verirseniz daha ii olur bence::) Teşekkürler
# eser | 06 Mart 2008, 15:56
@serkan arkadaşıma aynen katılıyorum. birazda asp olaydı iyi olurdu
çalışmalarınızda başarılar dilerim
# donkişot | 29 Mart 2008, 16:33
merhaba arkadaşlar… Siteniz ve ders anlatımlarınızdan dolayı çok teşekkür ediyorum..
bu anlatılan konuyu ben uygulamaya çalıştım fakat sürekli hata veriyor.. Yapılmış bir örneği varsa ve yüklerseniz belki ordan daha iyi anlayabilirim..
Başarılar dilerim çalışmalarınızda
# arslan | 06 Mayıs 2008, 19:41
merhaba ajax hakkında faydalı bir kaynak oluyor hepinize teşekkür ederim.
eyceks kütüphaneside türkçe karakter sorunu ile karşılaşıyorum karakter setleri uygun olmasına rağmen neden olabilir acaba
# Mert | 16 Temmuz 2008, 14:38
Arkadaşlar Yazılanları Teker Teker Okudum ve Denilenleri Yaptım Hatta Kopyala Yapıştır Yaptım Ama Olmadı Bir Sorun Oldu.Yardım Eder Misiniz.Hangi Dosyada Hangi Kodlar Olucak :S
# cem | 05 Ağustos 2008, 16:22
kod çalışmadı
# etiket | 13 Ağustos 2008, 00:53
Güzel bir yazı teşekkür ederiz.