Anasayfa > Hazır Kodlar > PHP > php de list/menü ve select olayi

php de list/menü ve select olayi




<select name=slcBrand id=slcBrand onchange="location.href='?brand_id='+this.options[this.selectedIndex].value">
<option value=-1>Bir Marka Seçiniz</option>
<?php 
$result = mysql_query("SELECT brand_id, brand_title FROM brands;", $cn);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option value=\"".$row['brand_id']."\">".$row['brand_title']."</option>";
}
?>
</select>

<?php 

if($_GET['brand_id']!='') {
?>
<select name=slcModels id=slcModels>
<?php
$result = mysql_query("SELECT model_id, model_title FROM models WHERE model_brand_id=".$_GET['brand_id'].";", $cn);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option value=\"".$row['model_id']."\">".$row['model_title']."</option>";
}
?>
</select>
<?php
}
?>

2.

AJAX ile dinamik select menüleri

Turk-PHP’deki bir konudan ilham alarak yazdığım bir makaleyi şimdi yayınlayacağım. Hem biraz bu sitede de AJAX’a giriş yapmış olurum hem de arkadaşların sorununa çözüm de getiririm belki :)

Başlayalım o zaman…

Şimdi Öncelikle ben AJAX kütüphanesi olarak prototype‘ı kullanıyorum, onu belirteyim. Öncelikle adım adım gösterimi yapacağımız sayfanın kodunu yazmaya başlayalım.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-9″ />
  5. <script language=“JavaScript” type=“text/javascript” src=“prototype.js”></script>

GÖrdüğünüz gibi prototype.js dosyasını da ekledik. Şimdi sıra bizim yaratacağımız, bize gereken javascript fonksiyonlarını yazmakta.

  1. <script language=“JavaScript” type=“text/javascript”>
  2. function akg() {
  3.         var url = ‘kat2.php’;
  4.         var pars = ‘marka=’ + $F(’marka’);
  5.         var myAjax = new Ajax.Updater(
  6.         ‘form2′,
  7.         url,
  8.         {
  9.                 method: ‘get’,
  10.                 parameters: pars,
  11.                 onComplete: ShowResponse,
  12.                 onFailure: Failed
  13.         });
  14. }
  15.  
  16. function bilgigoster() {
  17.         var url = ‘kat2.php’;
  18.         var pars = ‘model=’ + $F(’model’);
  19.         var myAjax = new Ajax.Updater(
  20.         ‘mesaj’,
  21.         url,
  22.         {
  23.                 method: ‘get’,
  24.                 parameters: pars,
  25.         });
  26. }
  27.  
  28. function markalar() {
  29.                 var url = ‘kat2.php’;
  30.         var pars = ‘komut=markagoster’;
  31.         var myAjax = new Ajax.Updater(
  32.         ‘marka’,
  33.         url,
  34.         {
  35.                 method: ‘get’,
  36.                 parameters: pars,
  37.         });
  38. }
  39.  
  40. function ShowResponse(originalRequest) {
  41.         $F(’form2′).value = originalRequest.responseText;
  42.         $(’mesaj’).value = ‘Oldu’;
  43. }
  44. function Failed() {
  45.         $(’mesaj’).value = ‘olmadı’;
  46. }
  47. </script>

Bunu anlatmama gerekecek. Burada öncelikle akg() fonksiyonu alt kategoriler getirmek için kullandığım, daha doğrusu seçilen markaya ait model adlarını getirmek için kullandığımız bir fonksiyon. url olarak kat2.php‘yi parametre olarak ise marka = $F(’marka’) dedik. Burada $F filan ne diye soracaksınız işte bu da prototype özgün yazım şekli. $F ile belirttiğiniz bir değişken adı yani burada marka daha sonra da göreceğimiz gibi marka id sine sahip bir form elementini belirtiyor. örneğin herhangi bir idye sahip bir değişkene erişmek için ise

$(’degisken’)
diyebilirdik. Yani burada $ ile başlayanlar kısaca
document.getElementByID
oluyor.

Kodda gördüğünüz gibi, onComplete ve onFailure gibi iki seçenek belirlemişiz. OnComplete de yani olay bitince ShowResponse() fonksiyonu çalışır, OnFailure da yani herhangi bir hata oluşmasında ise Failed() fonksiyonu.

bilgigoster() ve markalar() fonksyionları da aynı şekilde çalışıyor sadece görevleri birinin model bilgisi göstermesi diğeri ise markaları getirmesi. Sayfamızda ilk markaları görmek isteyeceğimizden markalar() fonksyionunu body tag’ında onLoad oalrak belirleyeceğiz.

  1. <title>Ajax</title>
  2. </head>
  3.  
  4. <body onload=“markalar();”>
  5. <form id=“form1″ name=“form1″ method=“get”>
  6.   <label for=“marka”>Marka</label>
  7.   <select name=“marka” id=“marka” onchange=“akg();”>
  8.  
  9.   </select>
  10. </form>
  11. <form id=“form2″ name=“form2″ method=“post”>
  12.  
  13. </form>
  14. <div id=“mesaj”>Lütfen istediğiniz modeli ve markasını seçiniz.</div>
  15. </body>
  16. </html>

Evet, şimdi gelelim şu kat2.php dosyasına bakalım neler oluyor.

  1. <?php
  2. $markavemodeller = array(
  3.                                                         “audi” => array(“A3″, “A4″),
  4.                                                         “bmw”    => array(“1″, “3″, “5″),
  5.                                                         “mercedes” => array(“A Serisi”, “B Serisi”),
  6.                                                         “peugeot” => array(“106″, “206″)
  7.                                                         );
  8. $modelinfos = array(
  9.                                                         “A3″ => “Audi’nin küçük yıldızı”,
  10.                                                         “A4″ => “Audi’nin parlak ateşi”,
  11.                                                         “1″ => “Güzel araba”,
  12.                                                         “3″ => “Bomba araba”,
  13.                                                         “5″ => “Büyük araba”,
  14.                                                         “106″ => “Ölüm makinesi”,
  15.                                                         “206″ => “Modifiye için birebir”,
  16.                                                         “A Serisi” => “Klas ve küçüklüğün uyumu”,
  17.                                                         “B Serisi” => “Yolların yeni bücür fatihi”
  18.                                                         );
  19.                                                        
  20. if($_GET[‘marka’]) {
  21. echo ‘<label for="model">Model</label>
  22.   <select name="model" id="model" onchange="bilgigoster();">’;
  23.  
  24. $modeller = $markavemodeller[$_GET[‘marka’]];
  25. foreach ($modeller as $model) {
  26.         echo ‘<option value="’. $model .‘">’. $model .‘</option>’;
  27. }
  28.  
  29. echo ‘  </select>’;
  30. }
  31.  
  32. if ($_GET[‘model’]) {
  33.         echo $modelinfos[$_GET[‘model’]];
  34. }
  35.  
  36. if ($_GET[‘komut’] == ‘markagoster’) {
  37.         $markalar = array_keys($markavemodeller);
  38.         foreach ($markalar as $marka) {
  39.         echo ‘<option value="’. $marka .‘">’. ucwords($marka) .‘</option>’;
  40. }
  41. }
  42. ?>

Gördüğünüz gibiben burada bilgileri arraylere koyarak aldım, tabii ki bunu daha güzel bir şekilde veritabanıyla sorgulamalar yaparak veritabanından bu bilgileri almanız mümkün. Burada küçük bir örnek diye ben array’lerle gösterdim bunu. Farkındaysanız hep

  1. <?php
  2. if($_GET[‘model]) {
  3. ?>

gibi kontroller var. Burada Ajax fonksiyonlarımıza baktığınızda method’u get olarak ayarlayıp ayrıca parametrelerde model ve marka diye belirttiğimizden bu dosya onları bu şekilde algılıyor. Ben de burada kontrolü yaptıktan sonra işlemini yaratıyorum.

Mesela markalar fonksiyonuna baktığımızda parametre olarak

“komut=markagoster”
demişiz. kat2.php’de ise

  1. <?php
  2. if ($_GET[‘komut’] == ‘markagoster’) {
  3.         $markalar = array_keys($markavemodeller);
  4.         foreach ($markalar as $marka) {
  5.         echo ‘<option value="’. $marka .‘">’. ucwords($marka) .‘</option>’;
  6. }
  7. ?>

bu şekilde kontrolü yaparak bu olay gönderilmişse tüm markaları bir select menüsü gibi yazdırmışız.

Arkadaşlar umarım az çok yardımı dokunur bu makalenin. İleride daha gelişmiş konulara da değineceğim AJAX ile ilgili.

Herkese iyi çalışmalar

Kaynak: http://www.mudkicker.com

<?php
$markalar=array('OPEL','FORD','MERCEDES','VOLKSWAGEN','RENAULT');
$model = array(
'OPEL' => array('Ekonomik','Sedan', 'Astra', 'Vektra'),
'FORD' => array('Ekonomik','Sedan', 'Heacback','Tanus','Manuse'),
'MERCEDES' => array('Ekonomik','Sedan', 'Heacback','Primeline'),
'VOLKSWAGEN' => array('Ekonomik','Sedan', 'Heacback','Bora','Strex'),
'RENAULT' => array('Ekonomik','Sedan', 'Heacback','Clio','Partner')
);?>
<form name='marka' method='POST'>
<select name="marka" onChange="submit(marka)">
<option><?php if($_POST['marka']): print $_POST['marka']; else: print 'Marka Seçiniz'; endif;?>
</option>
<?php for($i=0;$i<count($markalar);$i++){?>
<option value="<?=$markalar[$i]?>"><?=$markalar[$i]?></option>
<?php }?></select><BR>
<?php
$a = '0'; $b = count($model[$_POST['marka']]);
while ($a <= $b) { print $model[$_POST['marka']][$a]."<br>";  $a++;}
?>




Bu makale hakkında ek bilgi eklemek için buraya tıklayınız

Bu makalenin yazar yada kaynağını bildirmek için tıklayınız.

Digg this Post! Add Post to del.icio.us Bookmark Post in Technorati Furl this Post!
Eklenme tarihi: 3-2-2006  Okunma: 3800

Arkadaşa Postala      Yazdır      Rapor Et  
Bu Makaleye Verilen Puan:    Bu makaleye puan verilmemiş.
Bu Makaleye Puan Ver  

Bölüm Başlık Kullanıcı Yorumları


Bu makaleye yorum gönderilmemiş, ilk yorumu sen gönder !
Reklam Netinternet
Bazı hakları saklıdır: İçeriğin editör ve yazarlarımız tarafından oluşturulan kısımları ve site tasarımının hakkı saklıdır.  Bu sayfa en iyi 1280x1024 ve 1024x768 çözünürlükte izlenir.
Powered by BilgiPortal v2.2
Emlak Yorumlar Müzik