Sihirli Fasulyeler
Yükleniyor...
AJAX - PHP İletişimi
 Web-Tasarım   1187   06.02.18   06.02.18   0
ajaxphpiletisimi.jpg

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 konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap