Ana Sayfa   Weblog   Realtime   Galeri   Arşiv   İletişim-Referanslar

Sayfa Yükleniyor...
blank
  Merhaba , kişisel weblog alanıma hoşgeldiniz...  
    AJAX ile Dinamik Select Menüsü II22 Haziran, Perşembe 2006  

  
 

Şimdi sıra geldi dosyamız ve fonksiyonumuzla etkileşip AJAX adını yaratmaya. Bu dosyayıda ilce_xml.php ismiyle kaydedebilirsiniz:
Burada bir xml dosyamız var, seçilen il adına göre veritabanından ilçelerimizi çağırıyor, bu şekilde xml dosyamız asıl dosyamızla iletişim halinde olduğundan dolayı ilçelerimiz dinamik olarak geliyor.

<?php
ob_start();
header("Cache-Control: no-cache");
//include_once("baglan.php");

header('Content-Type: text/xml');

mysql_connect("localhost","root","") || die ("OoopsI: ".mysql_errno() ." : " .mysql_error()." !!!");
                   mysql_select_db("test") || die ("Ooops: " .mysql_errno() ." : " .mysql_error()." !!!");
                   @mysql_query ("SET NAMES 'latin5' ");

echo "<?xml version='1.0' encoding='iso-8859-9' standalone='yes'?>";
echo '<ilcelerxml etiketadi="ilce">';

//POST Metoduyla Gelen İl Numarasının Alımı
$ilno = intval($_POST['ilno']);
if ($ilno)
{
  //Veritabanından İle Göre İllerin Çekilmesi
  $ilceler_sql = mysql_query("SELECT county_id,county_name,city_id FROM ilceler WHERE city_id=$ilno");
  $sayi = mysql_num_rows($ilceler_sql);
  if ($sayi > 0)
  {
    while($ilce = mysql_fetch_object($ilceler_sql))
    {
                  $ilceno  = $ilce->county_id;
                        $ilceadi = $ilce->county_name;
                        echo '<ilce ilceno="'.$ilceno.'" ilceadi="'.$ilceadi.'" />';
                }
        } else {
    echo '<ilce ilceno="" ilceadi="İlçe Bulunamadı" />';
        }
}
echo '</ilcelerxml>';
?>

PHP nin güzel yanı işte :) bir header ile dosyamızın browser tarafından xml olarak algılanmasını sağladık...
Bu örnek ile etkileşimli başka select alanları yaratabilir, örneğin üyelik formunuzu "uzman" bir görünüşe kavuşturabilirsiniz.

  
     
  EkleBunu Sosyal Paylaşım Butonu
 
 



* Opsiyonel : Web Adresiniz
 
  
    AJAX ile Dinamik Select Menüsü I22 Haziran, Perşembe 2006  

  
 

Turk-PHP FORUM 'da bir script görüp denemek istedim, koca bir hata deposuydu. Düzenledim ve çalışır halini paylaşmak istedim.
İller ve İlçeler tablolarımız var. İlimizi seçince dinamik olarak ilçeler menümüz oluşuyor.

Tablolar ile başlayalım:
»Yeniden düzenlediğim tabloları buradan indirebilirsiniz.

 Bir veritabanında bu sorguları çalıştırıp gerekli tabloları yarattıktan sonra , 2 adet dosyamız var. Bir tanesi bizim html kodumuz arasında yer alacak bölüm, diğeri AJAX vasıtasıyla , xml kullanarak çağırdığımız dosyamız: ilce_sorgula.php

<?php
mysql_connect("localhost","root","") || die ("OoopsI: ".mysql_errno() ." : " .mysql_error()." !!!");
                   mysql_select_db("test") || die ("Ooops: " .mysql_errno() ." : " .mysql_error()." !!!");
                  @mysql_query ("SET NAMES 'latin5' ");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>İLE GÖRE İLÇELER</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />

<script language="javascript"  type="text/javascript">
var http = getHTTPObject(); // HTTP Nesnesi Oluşturuluyor
//Sonuçları Alan Fonksiyon
function handleHttpResponse()
{
  if (http.readyState == 1)
        {
          document.getElementById('mesaj').innerHTML = 'Sorgu Tamamlanıyor ...';
        } else if (http.readyState == 4) {
    if (http.status == 200)
    {
      //XML Verileri Alınıyor
      var xmlDocument = http.responseXML;
      var etiketadi       = xmlDocument.getElementsByTagName('ilce');
      //XML İlçeler Sayısını Alıyoruz
      var ilce_sayi   = etiketadi.length;
      if (ilce_sayi>0)
      {
        var ilce_secim_kutusu = document.getElementById("ilceler");
       
        var ilce_no;
        var ilce_adi;
        var i;
        ilce_kutu_temizle(ilce_secim_kutusu);
        ilce_kutu_olustur(ilce_secim_kutusu,'İlçe Seçiniz','');
                               
        for (i=0; i< ilce_sayi; i++)
        {
          ilce_adi  = etiketadi.item(i).getAttribute('ilceadi');
          ilce_no   = etiketadi.item(i).getAttribute('ilceno');
          ilce_kutu_olustur(ilce_secim_kutusu,ilce_adi,ilce_no);
        }
      }
                        document.getElementById('mesaj').innerHTML = 'İşlem Tamamlandı';
    } else {
      document.getElementById('mesaj').innerHTML = 'Hata Oluştu';
    }      
  }
}
//XML Sayfasından Gelen İlçeleri Seçim Kutusuna Gönderen Fonksiyon
function ilce_kutu_olustur(ilce_secim_kutusu,isim,deger)
{
  var new_option   = document.createElement('option');
  new_option.text  = isim;
  new_option.value = deger;
                  
  try {
    ilce_secim_kutusu.add(new_option, null);
  } 
  catch(ex) {
    ilce_secim_kutusu.add(new_option);
  }
}

function ilce_kutu_temizle(xmlkok_etiket)
{
  while (xmlkok_etiket.length > 0)
  {
    xmlkok_etiket.remove(0);
  }
}

//İstekte Bulunan Fonksiyon
//İl Numarası XML Sayfasına Gönderiliyor
function ilceleri_getir()
{
  var iller = document.getElementById("iller");
        var ilno  = iller.options[iller.selectedIndex].value;
  http.open("POST", 'ilce_xml.php', true);
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=iso-8859-9');
  http.onreadystatechange = handleHttpResponse;
  http.send("ilno="+ilno);
}

function getHTTPObject()
{
  var retval=null;
  try
  {
    retval=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
    try
    {
      retval=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(oc)
    {
      retval=null;
    }
  }

  if(!retval && typeof XMLHttpRequest != "undefined")
  {
    retval=new XMLHttpRequest();
  }
  return retval;
}

İşte AJAX 'ın sevmediğim hantallığı. Halbuki php de herşey ne kadar kısaltılabiliyor (tabi iyice öğrendikten sonra) Gördüğünüz üzere Javascript fonksiyonlarımızı yazıyoruz. Bu kadar fonksiyon mu çalıştıracak scriptimizi, tabiki hayır Surprised

</script>
</head>
<body>

<table align="center" width="300">
<form action="post">
<tr>
<td width="50%" align="center">
<b>İller</b><br />
<select name="iller" id="iller" size="1" onChange="ilceleri_getir();"  />
<option value="">Bir İl seçiniz</option>
<?php
//İLLER SEÇİM KUTUSU
//include_once("baglan.php");
$sql   = "SELECT city_id,city_name FROM iller ORDER BY city_id ASC";
$sonuc = mysql_query($sql);
$sayi  = mysql_num_rows($sonuc);
while ($satir = mysql_fetch_array($sonuc))
{
  $ilno   = $satir["city_id"];
        $iladi  = $satir["city_name"];
  echo ' <option value="'.$ilno.'">'.$iladi.'</option>';
}
mysql_free_result($sonuc);
?>
   </select>
      </td>
      <td width="50%" align="center"><b>İlçeler</b><br />
        <select name="ilceler" id="ilceler" size="1" />
       
        <option value="">İlçe Seçiniz</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center"><label id="mesaj">Bir İl Seçiniz</label>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center"><!--<input type="button" value="İLÇELERİ GETİR" onClick="ilceleri_getir();"  />-->
      </td>
    </tr>
  </form>
</table>
</body>
</html>

<!-- Devamı 2. Bölümde ;) --> 		 
     
  EkleBunu Sosyal Paylaşım Butonu
 
 



* Opsiyonel : Web Adresiniz
 
  
    Firefox' ta Yer İmi Ekleme Linki18 Haziran, Pazar 2006  

  
 

Web de surf yaparken tesadüfen rastladığım bu Javascript v.1.2 kodun özellikle Firefox un
yaygınlaştığı şu dönemde bütün webmaster lara faydalı olacağına inanıyorum.
Fonksiyonumuzu

<head></head>

tagleri arasına koyuyoruz ve

<body></body>

tagleri arasında çağırıyoruz. Bu script ister Iexplorer, ister
Firefox , ister Opera olsun, browser ı algılayıp çalışıyor...
Gelelim Kodumuza:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>Firefox - Iexplorer - Opera Bookmarking</title>
<script language="JavaScript1.2" type="text/javascript"><!-- 
function CreateBookmarkLink() {
  title = "<<(C) AZIZCE.COM (R)>>";

  url = "http://www.azizce.com";

  if (window.sidebar) {
    window.sidebar.addPanel(title,url,"");   
 } else if( window.external ) {
     window.external.AddFavorite(url,title);

 } else if(window.opera && window.print) {

     return true; }
}
//--></script>
</head>

Diyerek <head> tag i ne fonksiyonumuzu yazdık;
title : Yer İmi eklerken oluşturacağımız isim,
url : Yer İmi nin gideceği adres
Devam edelim;

<body>
 <script language="JavaScript1.2" type="text/javascript"><!-- 
  if (window.external) {
      document.write('<a xhref="javascript:CreateBookmarkLink();" class="side" title="Favorilerime
  Ekle :  AZIZCE.COM"><b>Favorilerime Ekle</b></a>');
     } else  if (window.sidebar) {
      document.write('<a xhref="javascript:CreateBookmarkLink();" class="side" title="Yer İmi Ekle :  AZIZCE.COM"><b>Siteyi Yer İmlerine Ekle</b></a>');
     } else if (window.opera && window.print) {
     document.write('<a xhref="javascript:CreateBookmarkLink();" class="side" title="Yer İmi Ekle :  AZIZCE.COM"><b>Yer İmi Ekle</b></a>');
     }
    //--></script>
 </body>
 </html>

Gördüğünüz gibi <body> tag inde fonksiyonumuzu çağırıyor ve çalıştırıyoruz.Ekstra bir işlemimiz yok. Script browser ı tanıyarak 3 seçenekten birini sunuyor. Burada
title kısmına, oluşacak linkin üzerine gelindiğinde çıkacak "tip" i yazıyoruz.
Hepsi bu kadar,
İyi Çalışmalar

Alihan Çetin

  
     
  EkleBunu Sosyal Paylaşım Butonu
 
 



* Opsiyonel : Web Adresiniz
 
  
 

   << Önceki Sayfa       Sonraki Sayfa >>    		 
blank
#Sayfa Başı
Arama İpucu
blank
  Temel Kaynaklar
  •  Giriş
  •  Üyelik
  •  
  • Arşiv Arşiv
  • RSS 2.0 RSS
  • Smart RSS Smart RSS
  •  
  •   Add to Technorati Favorites
blank
  Kategoriler
blank
  Tavsiye Linkler