AJAX - PHP İletişimi
Web-Tasarım 06.02.18 678

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...
Yorum Yaz
Onay Bekleyen Yorum : 0
YorumlarSitene Destek Ver

Sosyal Bağlantılar
İstatistiksel Veriler
- Yayın Süresi: 519 Gün
- Konu Sayısı: 211
- Bilim Konuları : 93
- Gezi Konuları : 12
- Teknoloji Konuları : 33
- Web-Tasarım Konuları : 35
- İlginçler Konuları : 38
- En Çok Okunan : Kuyruklu Yıldız, Asteroit, Meteoroit, Meteor, Meteorit Nedir? (4393 kere)
- En Çok Yorum Alan : Uzay Çöpleri ve Kessler Etkisi (2 kere)
Yeni 20
Abone Ol
Abone ol, sitemize eklenen haberler mailine gelsin.
Gitar Eğitim
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab veya akorlar için gitaregitim.net sitesini ziyaret edebilirsiniz.