Merhabalar 

Bu gün php ajax , json ve jquery kullanarak gerçek zamanlı veri akışını göstermek istiyorum.Biliyorsunuzdur ki php server-side çalışan bir proğramlama dilidir gerçek zamanlı işlem yapamamaktadır bunu ise ajax,jquery ile çözebiliyoruz.
Server Side Nedir ? Sunucu taraflı çalışan kodlardır Yani bir kod yığını çalıştığında ilk başta kodlar sunucu tarafında çalışır sonrasında size veriler işlenip geri dönderilir.Realtime olayları kendi bünyesinde barındırmaz ama yardımcı scripting proğramlama dili ile çözülebilir bu sorun.

Daha çok ileri seviye yazılım alanında kullanılan bir metod neden mi.Öncelikle sizin ilk başta html öğrenip sonra css(standart) öğrenip sonra php öğrenip sonra mysql,pdo sonrasında javascript öğrenip sonrasında jquery öğrenip sonrasında ajax öğrenip sonrasında ise json öğrenip sonrasında bu kodlamayı yapabilecek seviyeye gelebilirsiiniz :) O yüzden ileri seviye proğramalama dillerinde kullanılabilecek bir metod

 

Nerelerde kullanılır

- Form denetimlerinde

- Anlık veri kayıtlarında 

- Lightbox(açılır pencere)

- Anlık sıralama  / filtreleme

- Oy Verme / Değerlendirme

- Gerçek zamanlı sohbet ekranların da

- Captcha(Güvenlik önlemlerinde)

Daha bir çok kullanım alanları mevcut ama genel olarak en çok kullanılan yerler bunlardır.

 

Hadi başlayalım

Jquery cdn dahil edelim 

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

 

 

ilk önce bir html şablonu hazırlayalım Form da seçici olarak id="form1" olarak seçtim bu noktaya dikkat ediniz 

<form action="#" method="post" id="form1">
  <label for="adsoyad">Adınız:</label><br>
  <input type="text" id="adsoyad" name="adsoyad" value="Çağan"><br>
  <label for="soyadi">Soyadınız:</label><br>
  <input type="text" id="soyadi" name="soyadi" value="Bahri"><br><br>
  <input type="hidden" name="ajaxjson" value="1">
  <input type="button" id="submit" value="Gönder">
</form> 
<div id="adsoyad"></div>
<div id="soyadi"></div>

Not: Burada form da buttonu   submit yaparsak kullanıcı sayfadan yönlendirecek bu da kullanıcıya gerçek zamanlı işlemleri gösteremeyeceğiniz o yüzden button type kısmına button yazdık ve bunu js ile eventleri denetleyip verileri işleyebileceğiz.Tabi burada js tarafında müdahele edebirliiz return false yada e.preventDefault komutuyla fakat tarayıcılar arası uyumsuzluk söz konusu bazı mobil tarayıcılarda bu eventleri desteklemiyor bu da sorun çıkatabiliyor
Return false : İlgili kodların en son satırında bulunur ve sonraki eventler çalışmaz
e.preventDefault  : bu komut ise ilgili elemente default özelliğini veriyor 
Bu iki komut ile bu yönlendirmeyi düzeltebilirsiniz ama dediğim gibi çok nadir de olsa tarayıcıda bir tür sıkıntılar çıkartabiliyor.

Formun Görüntüsü bu şekilde 

Şimdi javascript,jquery,ajax ve json kodlarını yazalim

 

<script type="text/javascript">
$(document).ready(function(){   // Jquery sayfa yüklediğinde çalışmaya başlayacak kod yapısı
 
$("#submit").click(function(e) {  // Gönder butonuna tıklandığın da çalışacak event
  $.ajax({   
           type: "POST", 
           url: "ajax.php",
           dataType: 'JSON',
           data: $("#form1").serialize(), //form bilgilerini veri parametrelerine dönüştürecek kod
           success: function(data)
           {
           if(data.islem){
            $("div#adsoyad").html(data.adiniz); // php tarafından gelen json çıktı
            $("div#soyadi").html(data.soyadiniz); // php tarafından gelen json çıktı
        
    }else{

   alert("Bir hata meydana geldi");
}
        }    });


});



});
</script>

 

 

Sıra geldi php

dosyasına  burada veritabanı bağlantısını zaten yapmışsınızdır diye umuyorum zaten o kısımlara gelmeden bu seviyeye de birşey aramazsınız diye düşünüyorum :)

<?php
require_once("db.php"); // veritabanı bağlantısını yaptığınız dosya 

if($_POST){
$adi = $_POST["adiniz"]; // Formdan gelen input bilgilerini çekiyoruz
$soyadi = $_POST["soyadiniz"];  // Formdan gelen input bilgilerini çekiyoruz

if($adi and $soyadi){

$query = $db->prepare("INSERT INTO uyeler SET ad=?, soyad=?");
$insert = $query->execute(array($adi,$soyadi));

if ( $insert ){
$sonid = $db->lastInsertId();
// bu kısımda bir dizi oluşturalım
$jsoncikti = array(
"islem" => true,
"adi" => $adi, // dizin elemanı ve değeri
"soyadi" = $soyadi,  // dizin elemanı ve değeri
);

}

}else{
$jsoncikti = array(
"islem" => false
);

}

echo json_encode($jsoncikti);
}
?>

 

Buraya kadar herşeyi yaptıysak aşağıdaki gibi bir gerçek zamanlı işlem gerçekleştirir.

 

Görmüş olabileceğiniz üzere inputtan gelen verileri sunucu da kayıt ettirip geri döndürüp html etiketi arasına yazmayı başardık.Sayısal değerlerinde çalıştığıdan emin olmak için sayılar girip veritabanından dönderip geri dönderdim. Bu kısımdan sonra genel mantığını anlamışsınızdır.
Burada kullandığım teknoloji dilleri ise şunlar : Php,pdo,javascript,jquery,ajax,json

Pandemi sürecinde insanlar kendilerini geliştirmek adına yazılım dillerine merakları arttı.Bu süreçte bende kendi blogumda yazılım ile ilgili bilgileri paylaşmak istedim.Birilerine yardımcı olabildiysem ve birşey öğretebildiysem ne mutlu bana,yorum kısmından sorun yaşarsanız sorabilirsiniz.
Sağlıcakla kalınız