Sihirli Fasulyeler

AJAX - PHP İletişimi

Web-Tasarım 2843 06.02.18 06.02.18 2

Bu makalemde, AJAX ve PHP arasındaki iletişimin nasıl sağlandığını, bir veri tabanı uygulaması ile göstermek istiyorum. Bildiğiniz gibi AJAX teknolojisi sayfa ve sunucu arasındaki iletişimi gerçekleştiren ve iletişim sonucunu, sayfa yenilemesine gerek kalmadan, anlık olarak kullanıcıya gösteren bir teknolojidir.

Örnek olarak bazı ülke bilgilerini kullanıcının seçimine göre anlık göstereceğimiz bir uygulama tasarlayacağız. Ülkeleri liste şeklinde göstereceğimiz şablonumuzu oluşturduktan sonra, AJAX ve PHP kullanarak, kullanıcının seçtiği ülke bilgilerini sayfa yenilenmesine gerek kalmadan kullanıcıya göstereceğiz.

Aşağıdaki videoda AJAX ve AJAX ile haberleşen PHP sayfasının kodlamalarının nasıl yapıldığını izleyebilirsiniz. Videonun altında da videodaki bütün yapıların kaynak kodlamalarını inceleyebilirsiniz.

Veritabanı Bağlantısı (baglanti.php)

<?php
    $user="root";
    $pass="";

    try {
        $db = new PDO("mysql:host=localhost;dbname=ulkeler;charset=utf8",$user,$pass);
    } catch (Exception $e) {
        echo "Hata : " . $e->getMessage();
        die();
    }
?>

İndex Sayfası (index.php)

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Ülkeler</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/start.js"></script>
</head>
<body>
    <div id="liste">
        <ul>
            <?php require("lib/yukle.php"); ?>
        </ul>
    </div>
    <div id="sonuc"></div>
</body>
</html>

Listeyi Veri Tabanından Oluşturma (yükle.php)

<?php

    require("baglanti.php");

    $query = "SELECT * FROM bilgiler ORDER BY ulke ASC";
    $result = $db->prepare($query);
    $result -> execute();

    $data = $result->fetchAll(PDO::FETCH_ASSOC);

    $liste = "";

    foreach ($data as $sonuc) {
        $liste.='<li><label id="liste'.$sonuc['id'].'"><img src="images/'.$sonuc['bayrak'].'.png" alt="Bayrak">'.$sonuc['ulke'].'</label></li>';
    }

    echo $liste;

?>

Biçimler (style.css)

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

#liste ul{
    list-style: none;
    width: 100%;
}

#liste ul label{
    display: block;
    padding: 15px 15px 15px 70px;
    border-bottom: 2px solid #ccc;
    font-size: 22px;
    font-family: "Arial",sans-serif;
    cursor: pointer;
    position: relative;
}

#liste ul label:hover{
    background: #eee;
}

label img{
    position: absolute;
    left:10px;
    top: 5px;
    width: 48px;
    height: 48px;
}

label .sayac{
    float: right;
}

#sonuc{
    background: #f8f8f8;
}

#sonuc ul li{
    font-size: 16px;
    font-family: "Arial",sans-serif;
    border: 1px solid #ccc;
    display: block;
    padding: 20px 10px;
}

JQuery ve AJAX kodlaması (start.js)

$(function(){
    $("#liste ul li label").on("click",function(){
        $("#sonuc").hide();
        var i = $(this).attr("id").slice(5,8);
        var veri = "id="+i;
        $.ajax({
            url:"lib/goster.php",
            type:"POST",
            data:veri,
            success:function(sonuc){
                $("#sonuc").html(sonuc);
                $("#sonuc").fadeIn();
            },
            error:function(error){
                $("#sonuc").html("Veri Tabanı Bağlantı Hatası : "+error);
                $("#sonuc").fadeIn();
            }
        });
    });
});

AJAX ile haberleşen PHP sayfası kodlaması (goster.php)

<?php

    require("baglanti.php");
   
    $id = $_POS T['id'];
    $query2 = $db->prepare($query);
    $query2 -> bindParam(":id",$id);
    $query2->execute();

    $sonuc = $query2->fetch(PDO::FETCH_ASSOC);

    $liste = '<ul>';
    $liste .= '<li>Ülke : '.$sonuc['ulke'].'</li>';
    $liste .= '<li>Başkent : '.$sonuc['baskent'].'</li>';
    $liste .= '<li>Nüfus : '.$sonuc['nufus'].'</li>';
    $liste .= '<li>Yüzölçümü : '.$sonuc['yuzolcumu'].'</li>';
    $liste .= '</ul>';
    echo $liste;

?>

Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.

%100

Toplam Değerlendirme : 2

Bu konuyu paylaş

Yorum yaz, soru sor, geliştirme öner

Yorumlar

Hikmet

02.06.2021

Merhaba Emrah Bey Yine güzel bir çalışma yapmışsınız bu konuyu biraz genişletmek isterim örnek kodu şöyle planlayalım bu bir imsakiye olsun ve ülke yerine şehir olsun fakat veri tabanına daha önceden girilen imsakiye bilgilerini tarihe göre nasıl sıralarız ve her gün farklı saat ve bilgi verecek teşekkürler.

Emrah (Yönetici)

03.06.2021

Teşekkürler Hikmet bey. Bahsettiğiniz yazılım veritabanı ile kolaylıkla yapılabilir ama API kullanmak sizi büyük bir yükten kurtarır. Hiç veri tabanı ile uğraşmadan imsakiye API'si sunan bir web sitesi bulursanız (tahminimce çok vardır) kullanıcının isteğine göre bir sorgu oluşturabilir, bu sorguyu API hizmeti veren siteye gönderebilir ve cevabı istediğiniz şekilde kullanıcıya gösterbilirsiniz. Çok daha kolay olacaktır. Sitemizde JSON ve API'lerle ilgili makaleleririmiz vardı göz atabilirsiniz.

Sitene Destek Ver