BG MVC Model View Controller eğitim serisi yayında...

Ana sayfa > Programlama > PHP > PHP AJAX DB

PHP AJAX DB

PHP ve AJAX ile sunucu veritabanı iletişimi

Aşağıdaki örnek, kullanıcı seçim kutusunda bir değişiklik yaptığında, bir web sayfasının sunucu ile haberleşerek veritabanından veri alma işlemini göstermektedir.

Aşağıdaki dosya bir web tarayıcısında ilk açıldığında, bir etiket (Adı:), isimlerin seçilebileceği bir seçim kutusu ve içinde seçim kutusunda seçili olan ismin veritabanı değerlerini içeren data id değerine sahip bir div elemanı gösterilir.

Örnekte kullanılan personel adlı veritabanı tablosu verileri aşağıda gösterilmektedir:

Kullanıcı seçim kutusundan bir isim seçtiğinde, işlemler aşağıdaki sıra ile gerçekleşir:

  • İlk olarak, showData() isimli Javascript fonksiyonu, seçim kutusunun seçili olan değeri str isimli parametre olarak geçirilerek, çalıştırılır.
  • Fonksiyona geçirilen değer boş bir karakter dizisi ise, data id değerine sahip html div elemanına boş bir karakter dizisi atanır ve fonksiyondan çıkılır.
  • İşlem normal bir şekilde devam ederse, bir XMLHttpRequest nesnesi oluşturulur.
  • Sunucunun döndüreceği değer hazır olduğunda çalıştırılacak fonksiyon oluşturulur.
  • İstek, name isimli bir parametreye str değerini geçirerek, sunucudaki index.php PHP dosyasına gönderilir.

    Bu örnekte PHP ve AJAX işlemlerinin her ikisi için index.php dosyası kullanılmaktadır. İstenirse, AJAX işlemleri için farklı bir dosya kullanılabilir.

  • İsteği alan index.php dosyası, name isimli bir parametre tanımlanıp tanımlanmadığını kontrol eder.
  • Parametre tanımlandığı için, veritabanındaki personel tablosunda bu parametre değerinin bulunduğu kaydı okur ve fname, lname ve age sütun değerlerini ekrana yazar.
  • Böylece, sunucu tarafında işlem tamamlanmış olur ve elde edilen değer geri döndürülür.
  • showData() fonksiyonu içinde oluşturulan ve sunucunun bir sonuç döndürmesini bekleyen fonksiyon devreye girer ve gönderilen değeri data id değerine sahip html div elemanına atar.
    
    document.getElementById("lname").innerHTML = xmlhttp.responseText;
    
    

Seçim kutusundan ""İbrahim" ismini seçtiğimizde tarayıcı ekran görüntüsü aşağıdaki şekilde olacaktır:


<html>
<head>
<script>
function showData(str) {
  if(str.length==0) {
     document.getElementById("data").innerHTML = "";
     return;
  } 
  else {
     var xmlhttp = new XMLHttpRequest();
     
	 xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {
           document.getElementById("data").innerHTML = xmlhttp.responseText;
        }
     };
    
	 xmlhttp.open("GET", "index.php?name=" + str, true);
     xmlhttp.send();
  }
}
</script>

</head>
<body>

<?php 
  function get_data($name) {
	 $server = "127.0.0.1";
	 $user = "kullanici_adi";
	 $password = "parola";
	 $dbase = "veritabani_adi";

	 try {
		$conn = new PDO("mysql:host=$server;dbname=$dbase", $user, $password);
		$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("SELECT * FROM personel WHERE fname='{$name}'");
        $stmt->execute();

        $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
		$record = $stmt->fetch();
		echo '<p>Adı: ' . $record["fname"] . '</p>';
		echo '<p>Soyadı: ' . $record["lname"] . '</p>';
		echo '<p>Yaşı: ' . $record["age"]. '</p>';
		
	 }
	 catch(PDOException $e) {
	    echo "Hata: " . $e->getMessage();
	 }
	  
	 $conn = null;
  }  

  if(isset($_GET['name'])) {
	 $param = $_GET['name'];
	 
	 get_data($param);
  }   
  else {
?>

  <label for="fname">Adı:</label>
  <select id="fname" name="fname" onchange="showData(this.value)">
	 <option value="Ahmet" selected>Ahmet</option>
	 <option value="İbrahim">İbrahim</option>
	 <option value="Leyla">Leyla</option>
	 <option value="Mecnun">Mecnun</option>
	 <option value="Nedim">Nedim</option>
  </select>  
  
  <div id="data" style="margin-top:20px;">
       <?php get_data('Ahmet'); ?>
  </div>

<?php } ?>

</body>
</html>