Yazar Mesaj
Kaan #54   2019-10-02 10:12 GMT        

Yönetici

Çevrimiçi durum

51 mesajları

Günümüzde internet’te artan talep web sayfalarının etkileşimli (interaktif) ve hızlı sonuçlanabilir olmasını zorunlu kılıyor. Bu da bir çok işlemin çok daha kısa bir sürede yapılmasını gerektiriyor. AJAX bu ihtiyaçtan doğmuş bir yapıdır.


AJAX, (Asynchronous JavaScript And XML) Asenkron JAvaScript ve Xml ifadesinin ilk harflerinden oluşan bir isimdir.

AJAX şu bileşenlerden faydalanarak işlemleri gerçekleştirir:
HTML / CSS
DOM / Javascript
XML / XMLHttpRequest

Bu bileşenlere bakıldığında aslında AJAX’ın yeni bir şey olmadığı, zaten var olan teknolojileri birleştirerek yeni bir yapı ortaya koyduğu görülür.

Klasik istemci-sunucu (client-server) yapısında bir web sayfasında yapılan her işlem sunucuya HTTP Request olarak gönderilir, yorumlanır ve veriler işlendikten sonra istemciye gönderilir. Bu durum bazı durumlarda çok yoğun ağ trafiğine neden olmaktadır.

AJAX’ta ise HTTP Request yerine XMLHTTP Request olarak gönderilir. Burada veriler istemci-sunucu arasında sıkıştırılmış olarak XML formatında taşınır. Böylece istemci-sunucu arasındaki ağ trafiği azaltılmış olur.

AJAX ile sağlanan en önemli özelliklerden biri de, bir sayfanın tümünün gönderilip alınmasına gerek kalmadan, sayfanın sadece bir kısmının gönderilip alınarak (Kısmi Gönderme) ağ trafiğinde azalmanın sağlanmasıdır.

AJAX’ta XMLHttpRequest nesnesi kullanılarak işlemler yapılır.
XMLHttpRequest web tarayıcısı üzerinde çalışan bir bileşendir. Bu bileşen web sitesine veya sayfasına istekte (request) bulunabilir ve yine isteğe karşı gelen cevabı (response) kendisini çağıran yere iletebilir. Bütün bu işlemleri siz farkına varmadan arka planda (background) yapıldığı için web uygulaması sanki bir masaüstü uygulamasıymış gibi davranır.

Bir örnek vermek gerekirse; bir web formu yaptınız ve formun sunucuya gönderilmesi için bir düğme (buton) koydunuz. Düğme’ye tıklandığında istemci (client) tarafında çalışan bir script aracılığıyla (örneğin javascript) bilgiler XMLHttpRequest bileşeni kullanılarak arka planda sunucuya gönderilebilir ve sunucudan istenilen cevap alınabilir. Boylece sayfada sabit kalması gereken içerikler yeniden sunucudan alınmayacağı için hem sunucu yorulmamış olacak hemde kullanıcı daha az beklemiş olacaktır. Bütün bu işlemler bir java applet yada actitiveX nesnesi ile değil bütün tarayıcılar tarafından desteklenen bir yöntemle yapılır.

Örnek:
Örneğimizde MySQL veritabanında kayıtlı olan il, ilçe ve köy/mahalle bilgileri AJAX yapısı kullanılarak liste kutularına aktarılmaktadır.
1. Sayfa açıldığında il listesi veritabından alınmaktadır.
2. İl listesinden il seçildiğinde, o ile ait ilçe isimleri veritabanından alınarak ilçe listesi oluşturulmaktadır.
3. İlçe listesinden bir ilçe seçildiğinde, o ilçedeki köy ve mahallelerin listesi yine veritabanından alınarak köy/mahalle listesi oluşturulur.
4. Gönder düğmesi tıklandığında seçilen il, ilçe ve köy/mahalle numaraları aynı GET methodu ile sayfaya gönderilmektedir.

index.php – 3 adet select oluşturalım.

<div class="container">
    <div class="row">
        <div class="col-md-12"><h1>PHP PDO ve MySQL ile il ilçe seçme</h1><hr></div>

        <div class="col-md-3">
            <label for="bolge">Bölge</label>
            <select name="bolge" id="bolge" class="form-control">
                <option value="">Seçin...</option>
            </select>
        </div>

        <div class="col-md-3">
            <label for="il">İl</label>
            <select name="il" id="il" class="form-control" disabled="disabled">
                <option value="">Seçin...</option>
            </select>
        </div>

        <div class="col-md-3">
            <label for="ilce">İlçe</label>
            <select name="ilce" id="ilce" class="form-control" disabled="disabled">
                <option value="">Seçin...</option>
            </select>
        </div>
    </div>
</div>

Şimdi dbConn.php isimli veritabanı bağlantısı ve fonksiyonlarımızı barındıran sayfamızın kodlarını yazalım:

class dbConn
{
    protected static $db;

    //veritabanına bağlanan fonksiyon
    public function __construct()
    {
        try{
            self::$db = new PDO("mysql:host=localhost;dbname=ililce;charset=utf8", "root", "123456");
        }
        catch (PDOException $exception)
        {
            print $exception->getMessage();
        }
    }
}

dbConn isimli bir class oluşturduk ve daha sonra static bir $db değişkeni ekledik. Çünkü bu değişkeni diğer fonksiyonlarımızda da kullanacağız. Daha sonra __construct metodunda veritabanına PDO kullanarak bağlandık. __construct metodu dbConn class`ı çağırıldığında otomatik çalışır.

Şimdi tüm bölgeleri alacağımız bir fonksiyon yazalım:

//Bölgeleri getiren fonksiyon
    public function getBolgeList()
    {
        $data=array();
        $query = self::$db->query("SELECT DISTINCT bolge from ilveilceler", PDO::FETCH_ASSOC);
        if($query->rowCount())
        {
            foreach ($query as $row)
            {
                $data[]=$row["bolge"];
            }
        }
        echo json_encode($data);
    }

getBolgeList() fonksiyonu ile veritabanımızdaki bölge isimlerini DISTINCT yaparak çektik. DISTINCT sql dilinde tekrar eden verileri 1 kez göstermek için kullanılır.

Daha sonra ikinci fonksiyonumuz olan seçilen bölgeye göre İl listesini getiren kodlarımızı yazalım:

//İlleri getiren fonksiyon
 public function getIlList($bolge){
 $data=array();
 $query = self::$db->prepare("SELECT DISTINCT il FROM ilveilceler WHERE bolge=:bolge");
 $query->execute(array(":bolge"=>$bolge));
 if($query->rowCount())
 {
 foreach ($query as $row)
 {
 $data[]=$row["il"];
 }
 }
 echo json_encode($data);
 }

Bu fonksiyonda diğerinden farklı olarak $bolge diye bir değişken alıyoruz. Bu değişken bize seçili olan bölge ismini verir. Buarada tüm fonksiyonlarda sonucu json_encode() ile JSON formatına çevirdik çünkü daha sonra bu verileri AJAX ile çekeceğiz ve JSON ile çalışmak daha mantıklı olacaktır.

Son olarak seçilen il bilgisine göre ilçe listesini getiren fonksiyonumuzu yazalım:

//İlçeleri getiren fonksiyon
    public function getIlceList($il){
        $data=array();
        $query = self::$db->prepare("SELECT DISTINCT ilce FROM ilveilceler WHERE il=:il");
        $query->execute(array(":il"=>$il));
        if($query->rowCount())
        {
            foreach ($query as $row)
            {
                $data[]=$row["ilce"];
            }
        }
        echo json_encode($data);
    }

Yine burada da $il diye bir değişken ile seçili olan il bilgisini aldık. Şimdi AJAX ile bu fonksiyonlar yardımı ile bilgileri çekerek select elemanlarına eklememiz gerekiyor. Bunun için ajax.php diye bir sayfa daha oluşturacağız:

<?php
include ("dbConn.php");
$action=$_POST["action"];
switch ($action)
{
    case "bolge":
        $db=new dbConn();
        return $db->getBolgeList();
        break;
    case "il":
        $db=new dbConn();
        $bolge=$_POST["name"];
        return $db->getIlList($bolge);
        break;
    case "ilce":
        $db=new dbConn();
        $il=$_POST["name"];
        return $db->getIlceList($il);
        break;
}
?>

Burada öncelikle dbconn.php dosyasını sayfamıza include ettik. Daha sonra index.php sayfasından bize action isimli bir veri gönderildiğini farzederek o veriyi almak için kodumuzu yazdık ve $action değişkenine aktardık. Switch fonksiyonunu kullanarak gelen action verisine göre gerekli olan işlemi yaptık. Bu işlem dbConn sınıfını çalıştırmak oldu aslında. Şimdi biz yukarıda dbConn diye bir class oluşturduk. Bu mantık aslında nesne yönelimli programlama (object oriented programming) mantığı olduğu için burada yeni bir obje oluşturmamız gerekiyordu. Bunu da $db=new dbConn(); bu şekilde olşturduk ve bu objede yer alan fonksiyonumuzu $db->getBolgeList(); diye çağırdık. Sonuç olarak bize JSON dönecektir çünkü dbConn sınıfında json_encode() kullanmıştık.

Şimdi gelelim son adıma. Son adımda artık herşey hazır olduğu için sadece AJAX ile verileri ajax.php dosyasından çekmemiz gerekiyor. Kodumuz şöyle olacaktır:

$(document).ready(function(){
        ajaxFunc("bolge", "", "#bolge");

        $("#bolge").on("change", function(){

            $("#il").attr("disabled", false).html("<option value=''>Seçin..</option>");
            console.log($(this).val());
            ajaxFunc("il", $(this).val(), "#il");

        });

        $("#il").on("change", function(){

            $("#ilce").attr("disabled", false).html("<option value=''>Seçin..</option>");
            console.log($(this).val());
            ajaxFunc("ilce", $(this).val(), "#ilce");

        });

        function ajaxFunc(action, name, id ){
            $.ajax({
                url: "ajax.php",
                type: "POST",
                data: {action:action, name:name},
                success: function(sonuc){
                    $.each($.parseJSON(sonuc), function(index, value){
                        var row="";
                        row +='<option value="'+value+'">'+value+'</option>';
                        $(id).append(row);
                    });
                }});
        }
    });

Burada anlayacağınız üzere ajaxFunc() isimli bir fonksiyon oluşturduk. Bu fonksiyon ajax kodlarını sürekli tekrar etmemek için oluşturuldu. Yoksa bu kadar kodu üç kez yazmak durumunda kalacaktık.

İlk önce sayfa yüklendiğinde ajaxFunc(“bolge”, “”, “#bolge”); şeklinde bölge isimlerini almış olduk. Daha sonra il ve ilçe select etiketlerinin değiştiği yani bir öğe seçildiği durumunda yeniden ajaxFunct() fonksiyonunu çağırdık.

Sonuç:

PHP ve jQuery (Ajax) ile dinamik bölge, il ve ilçe uygulaması

Tüm işlemler bu kadar. Uygulamanın tamamını github hesabından indirebilirsiniz.


Bu mesaj Kaan tarafından 2019-10-02 10:23 GMT, 12 Gün önce düzenlendi.