PHP, AJAX ve json_encode kullanarak veritabanı tablo verilerini HTML etiketinde gösterme
İlk önce bir veritabanı tablosu oluşturalım.
CREATE TABLE IF NOT EXISTS `musteri` ( `no` int(11) NOT NULL, `musteri_isim` varchar(50) DEFAULT NULL, `sehir` varchar(50) DEFAULT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
Oluşturduğumuz tabloyu güncelleyelim
INSERT INTO `musteri` (`no`, `musteri_isim`, `sehir`) VALUES (1, 'Hakan Atilgan', 'İstanbul'), (2, 'Murat Yalçın', 'Çorum'), (3, 'Süleyman Solak', 'Burdur'), (4, 'Emine Gürel', 'Sivas'), (5, 'Mustafa Doğan', 'İzmir');
ajax.php sayfasi oluşturalım. Oluşturduğumuz sayfada veritabanımıza bağlanalım ve verilerimizi json_encode PHP işlevi ile HTML sayfamıza göndermek için hazıe hale getirelim.
<?php
$host="localhost"; // yerel bilgisayar için 'localhost' veya '127.0.0.1'
$kullaniciadi="Veritabanı kullanici adı";
$sifre="Veritabanı şifresi";
$veritabani= "Veritabanı ismi";
/* Veritabanı bağlantı parametreleri ile yeni bir mysqli nesnesi oluştur */
$mysqli = new mysqli($host, $kullaniciadi, $sifre, $veritabani);
if(mysqli_connect_errno()) {
echo "Hata oluştu: " . mysqli_connect_errno();
exit();
}
$sql = "SELECT * FROM musteri";
$sonuc = $mysqli->query($sql);
$rows = array();
while($r = $sonuc->fetch_assoc()) {
$rows[] = $r;
}
print json_encode($rows);
?>
Yukarıdaki PHP kodu çalıştığında aşağıdaki gibi olacaktır.
[{"no":"1","musteri_isim":"Hakan Atilgan","sehir":"\u0130stanbul"},{"no":"2","musteri_isim":"Murat Yal\u00e7\u0131n","sehir":"\u00c7orum"},{"no":"3","musteri_isim":"S\u00fcleyman Solak","sehir":"Burdur"},{"no":"4","musteri_isim":"Emine G\u00fcrel","sehir":"Sivas"},{"no":"5","musteri_isim":"Mustafa Do\u011fan","sehir":"\u0130zmir"}]
index.php sayfamızı oluşturalım ve aşağıdaki html kodunu kopyalayıp yapıştıralım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilgisayar.me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul></ul>
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON('ajax.php', function(data) {
$.each(data, function(no, deger) {
$('ul').append('<li id="' + no+ '">' + deger.musteri_isim + ' - ' + deger.sehir + '</li>');
});
});
});
</script>
</body>
</html>
index.php sayfasını çalıştırdığımızda aşağıdaki gibi bir liste elde oluruz.
- Hakan Atilgan – İstanbul
- Murat Yalçın – Çorum
- Süleyman Solak – Burdur
- Emine Gürel – Sivas
- Mustafa Doğan – İzmir
Dosyaları buradan yükleyebilirsiniz.
