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

Dün paylaştığım il ve ilçe uygulamasında işlemlerimizi JSON ve jQuery ile yapmıştım. Biliyorum ki, gelen yorumlarda bu işlemi php ve mysql yardımı ile nasıl yapabiliriz diye sorular sorulacak. Sorular sorulmadan uygulamayı paylaşayım dedim 🙂

Şimdi mantık aslında yine aynı. Bu paylaşımımda bir işlem daha yapacağım. Yani sadece il ve ilçe değil bölge seçimini de ekledim. Gelelim kodlarımıza.

Önce yine HTML kodlarımızı yazalım bir kenarda dursun:

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ölgeeri 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);
 }

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ğım:

<?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 öğre seçildiği durumunda yeniden ajaxFunct() fonksiyonunu çağırdık.

Sonuç:

Tüm işlemler bu kadar arkadaşlar. Uygulamanın tamamını github hesabımdan indirebilirsiniz. Bu eğitimi video olarak izlemek isterseniz online öğren blog sayfamı ziyaret edebilirsiniz.