PHP Ajax il ilçe listeleme uygulaması nasıl yapılır?

PHP jQuery |16/09/2019 09:40 | 255 gösterim | 0 yorum
PHP Ajax il ilçe listeleme uygulaması nasıl yapılır?

PHP Ajax il ilçe seçimi, il ilçe listeleme nasıl yapılır?

Çoğu projemde kullandığım ajax il ilçe listeleme uygulamasını sizlerle paylaşmak istiyorum. Birçok e-ticaret sitesinde, otomasyon uygulamalarında bu sistem kullanılıyor. Sizler de kendi sistemlerinizde-projelerinizde kullanabilirsiniz.

Php il ilçe uygulaması yapmak bu derste anlatılanlar kadar kolay. İstiyoruz ki php il seçince ilçeler gelsin. Sıfırdan başlayarak html, mysql ve jquery kodlarını ayrıntılı bir şekilde adım adım anlatım yapacağım böylelikle projelerinize kolayca dahil edebileceksiniz. Haydi, kolları sıvayalım, klavyemizi kuşanalım.

Ajax il ilçe uygulamasını yapabilmek için minimum bilgi düzeyi

Bu makalede anlatılanları başarılı bir şekilde uygulayabilmek için minimum düzeyde en az html, php ve jquery bilgisine sahip olmanız gerekmektedir.

 

1.Adım: Veritabanına Tablo Yükleme

Öncelikle veritabanı kısmını bir halledelim diyorum. Bunun için vermiş olduğum il_ilce.sql dosyasını indirerek mysql veritabanımıza yükleme yapalım. Bu tablodaki bilgiler son güncelleme tarihi 20/05/2016 olan il ilçe excel listesini Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü’nden alarak oluşturdum. Excel formatında il ilçe listesi'ne şu linkten ulaşabilirsiniz.

adresleme_ajax” isminde “utf8_turkish_ci” karakter setli bir veritabanı oluşturdum ve il_ilce.sql’i içe aktardım.

Başarılı bir şekilde veritabanına dosyayı aktardığınızda aşağıdaki resimdeki gibi bir tablo ile karşılaşacaksınız. Eğer aşağıdaki gibi bir tablo görmüyorsanız veritabanı kısmı olmamış demektir. Tekrar deneyiniz. 

ajax il ilçe listeleme 1

 

 

2.Adım: HTML kodlarıyla il ilçe listbox oluşturma

Veritabanı kısmını sorunsuz bir şekilde atlattıysak şimdi de bootstrap şablonunu kullanarak en basit düzeyde kendi sitenize dahil edip şekillendirebileceğiniz html kodlarıyla dropdown listesini oluşturalım. 

Ben bootstraptan 3.4 versiyonunu kullandım. Siz işleminize göre seçim yapabilirsiniz tabiki. Getting started” sayfasından “Basic template” alıyoruz. En basit şablonu kullanarak işlemlerimizi gerçekleştireceğiz.

Şablonu oluşturduğumuzda ise, “CSS” sayfasından “Forms” sekmesine gidip basit bir form oluşturuyoruz. Bu formda 2 adet label, 2 adet select list kullanacağız.

Şu anda kullandığımız index.php sayfamızın kodları şöyle: 

<!doctype html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP Ajax ile İl İlçe Seçimi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">
    <h1>İl İlçe Seçimi</h1>

    <form class="form-horizontal">
        <div class="form-group">
            <label for="il" class="col-sm-2 control-label">İl</label>
            <div class="col-sm-10">
                <select class="form-control" id="il" name="il">
                    <option value="0">İl Seçiniz</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="ilce" class="col-sm-2 control-label">İlçe</label>
            <div class="col-sm-10">
                <select class="form-control" id="ilce" name="ilce">
                    <option value="0">İlçe Seçiniz</option>
                </select>
            </div>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

ajax il içe listeleme 2

Bu kodları kullanarak resimdeki gibi bir görünüm elde ettik. Ancak bunlar php mysql ve jquery ile bağlanmadığı için bomboş görünmekte. Bu aşamayı da sorunsuz hallettiysek artık php kodlarını yazmaya başlayabiliriz.

 

3.Adım: PHP baglanti.php, adresleme.php sayfalarının yapımı

Bağlantı kurmak için pdo kullanıyoruz ki güvenlik kısmından oluşabilecek ufak tefek açıklara engel oluyoruz. Çoğu sitede mysql_ komutları kaldı içerikler eski. Ben sizi düşünüyorum :) pdo ya geçin, sql injectiona mahal vermeyin. 

baglanti.php adında bir php sayfası oluşturarak veritabanını projemize bağlayacağız. Veritabanı ismimiz 1. Adımda yazmıştık “adresleme_ajax” olacak. Localhost’da çalıştığım için kullanıcı adıroot”, şifre ise boş. Siz kendi sisteminize göre ilgili kısımları değiştirirsiniz.

baglanti.php sayfamızın kodları:


$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "adresleme_ajax";

try {
    $db = new PDO("mysql:host={$DB_host};dbname={$DB_name};charset=utf8", $DB_user, $DB_pass);
    $db--->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    echo $e->getMessage();
}

Arka planda post metoduyla il değişimine göre ilçe çektireceğimiz “adresleme.php” sayfamızı oluşturalım. Bu sayfada gelen il_id varsa veritabanından ilgili il_id’ye ait ilçeleri bir json formatında geri alacağız.

adresleme.php sayfamızın kodları:


require_once 'baglanti.php'

$il_id = $_POST['il'];
if(isset($il_id)){

    if($il_id-->0) {

        $ilce   = $db->query("SELECT DISTINCT ilce_id, ilce FROM adresleme WHERE il_id='$il_id' ORDER BY ilce_id ASC");
        $bas    = '[{"ilce_id": "", "ilce": "Seçiniz"},'
        $son    = ']'
        $liste  = ''

        while($satir = $ilce->fetch(PDO::FETCH_ASSOC)){
            $liste.='{"ilce_id": '.$satir['ilce_id'].', "ilce": "'.$satir['ilce'].'"},'
        }
        echo $bas.rtrim($liste,",").$son;
    }
}

ajax il ilçe listeleme 3

 

 

4.Adım: jQuery ajax kullanarak il ve ilçe seçimini html sayfamıza çekme

İl ve ilçe seçimini index.php sayfamıza dahil edelim. Burada yapmamız gereken ilk şey baglanti.php sayfasını çağırmak olacak. Bu sayede veritabanına ulaşacağız. Sonrasında il listesini çekip birinci select liste yazdıracağız. Sonra da jquery ajax ile ilçe listesini ikinci select liste yazdıracağız. Her il değişiminde ilçe listesinin içeriği güncellenecek.

index.php sayfasının en son hali:


require_once 'baglanti.php'

<!doctype html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP Ajax ile İl İlçe Seçimi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">
    <h1>İl İlçe Seçimi</h1>

    <form class="form-horizontal">
        <div class="form-group">
            <label for="il" class="col-sm-2 control-label">İl</label>
            <div class="col-sm-10">
                <select class="form-control" id="il" name="il">
                    <option value="0">İl Seçiniz</option>
                    <?php
                    $ilsorgu = $db->query("SELECT DISTINCT il_id, il FROM adresleme ORDER BY il_id ASC");
                    while($satir = $ilsorgu->fetch(PDO::FETCH_ASSOC)){
                        echo '<option value="'.$satir['il_id'].'">'.$satir['il'].'</option>'
                    }
                    ?>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="ilce" class="col-sm-2 control-label">İlçe</label>
            <div class="col-sm-10">
                <select class="form-control" id="ilce" name="ilce">
                    <option value="0">İlçe Seçiniz</option>
                </select>
            </div>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //bu kodda ilçe select list ilk önce kapalı olarak geliyor.
    $("#ilce").attr("disabled", "true");

    //il select değişikliğe uğrarsa işlemler yapılacak.
    $("#il").change(function()
    {
        var il = $(this).val();

        if(il > 0) {
            // il id sıfırdan büyükse, ilce select seçilebilir hale gelecek ve ilçe içindeki seçenekler silinecek.
            $("#ilce").removeAttr("disabled");
            $("#ilce option").remove();

            // bu işlemlerden sonra ajax ile ilçe seçimi yapacağız. hatta şöyle yapalım. il id sıfırdan büyük olduğunda ajax çalışsın.
            // adresleme.php sayfamızı yapalım.
            /*
                adresleme.php sayfasına il idsini post metoduyla gönderiyoruz. Json dökümü alıyoruz.
                işlem doğru olursa #ilce select list içerisine gelen ilçeleri yazdıracağız.
             */
            url = "adresleme.php";
            $.ajax({
                type    : "post",
                url     : url,
                dataType: "json",
                data    : {
                    il : il
                },
                success : function (response) {
                    var ilceler = response;

                    for(var ilce in ilceler) {
                        $(ilceler[ilce]).each(function(index, deger) {
                            $("#ilce").append('<option value="' + deger.ilce_id + '">' + deger.ilce + '</option>');
                        });
                    }
                },

                error: function (response) {
                    console.log("Hata: Adresleme ajax.");
                    console.log(response);
                }
            });

        } else if(il < 1) {
            // il id 1 den küçükse yani boşsa ilçe tekrar seçilemez hale gelecek, ilçe içindeki seçenekler tekrar temizlenecek, sadece ilçe seçiniz seçeneği gelecek.
            $("#ilce").attr("disabled", "true");
            $("#ilce option").remove();
            $("#ilce").append('<option value="">İlçe Seçiniz</option>');
        }


    });
</script>
</body>
</html>

ajax il ilçe listeleme 4

 

Tüm adımları tamamladığımıza göre ajax-php-mysql ile il ilçe seçme işlemini başarıyla yaptık demektir. Herhangi bir sorun yaşadıysanız aşağıdaki yorum kısmından karşılaştığınız hatayı yazdığınız takdirde sizlere yardımcı olmaya hazırım. Dostlarınızla paylaşarak onların da kendi sistemlerine dahil etmelerini sağlayabilirsiniz. Hoşça ve sağlıcakla kalın.

Proje kaynak dosyaları: indir

Tepkini Göster




Paylaş




Abone Ol


Yorumlar ( 0 )

Yorum Yap

Adınızı soyadınızı, mail adresinizi ve yorumunuzu girip gönderiniz, inceleme sonunda yayına alacağız.
Yukarı Çık