AJAX - PHP İletişimi

Web-Tasarım 06.02.18 573

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;

?>

Bu Konular da İlginizi Çekebilir...