jQuery ile VeriTabanından Anlık Veri Çekme

Bu makale @mahmutemir tarafından @kodrehberi telegram grubu İçin oluşturulmuştur.

Herkese merhaba diyerek klasik girişimizi yaptığımıza göre jquery ile veritabanından anlık veri çekme işlemimize geçelim.

Eee Hadi...

jquery

Öncelikle bu işlemde jquery kullanacağımız için code jquery internet sitesinden gerekli güncel sürümü indirin ve projenize dahil edin yada;

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

benim yaptığım gibi jquery dosyasını internet üzerinden projenize çağırma işlemini yapın karar size kalmış.(Sürümün değişkenlik gösterebileceğini unutmayın).

İndex Sayfamızı Oluşturalım.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
	<title>Jquery Veri Çekme | KODREHBERİ </title>
	
	<script>
		$(document).ready(function() {
			$("#krdiv").load("vericek.php");
		});
		setInterval(function() {$("#krdiv").load('vericek.php');},3000);
	</script>
</head>
<body>
	<div id="krdiv"></div>
</body>
</html>

Daha sonra veritabanımızı oluşturalım ben mysql(phpmyadmin) kullandım.

Veritabanımızın adı : kodrehberi

Veritabanı Tablo Adı İse: kullanici, olsun

Kullanıcı Tablomuzda id,ad,soyad,telefon alanlarımız mevcut.Kendi veritabanı tablonuzu tabiki şekillendirebilirsiniz.

İndex dosyamızda yer alan bu koddaki 3000 sayısı milisaniye cinsinden yazılmıştır. 3 saniyede bir veriler gelecektir. 3000ms yi artırabilir yada azaltabilirsiniz.

<script>
		$(document).ready(function() {
			$("#krdiv").load("vericek.php");
		});
		setInterval(function() {$("#krdiv").load('vericek.php');},3000);
	</script>

index dosyamızda bir div alanı oluşturduk o div alanının adı krdiv. KRDİV alanı bize vericek.php dosyamızdan gelen verilerin anlık olarak yazılacağı kısımdır.

Şimdi ise veritabanından gelen verileri vericek.php dosyamıza yazdıralım.Ben tercihimi PDO'dan yana kullandım.

vericek.php

<?php include "baglan.php"; 
$kullanicisor=$db->prepare("SELECT * FROM kullanici order by id desc");
$kullanicisor->execute();  ?>
<table border="0" cellpadding="5" cellspacing="2" width="500">
	<tr style="background-color:#009900; font-family:Tahoma; color:#ffffff;">
		<td>ID</td>
		<td>AD</td>
		<td>SOYAD</td>
		<td>TELEFON</td>
	</tr>
	<?php 
	 while($kullanicicek=$kullanicisor->fetch(PDO::FETCH_ASSOC)) {?>
		<tr>
			<td><?php echo $kullanicicek['id']; ?></td>
			<td><?php echo $kullanicicek['ad']; ?></td>
			<td><?php echo $kullanicicek['soyad']; ?></td>
			<td><?php echo $kullanicicek['telefon']; ?></td>
		</tr>
	<?php } ?>
</table>

Veritabanı bağlantısı için baglan.php dosyamızı, vericek.php dosyamıza dahil ettik.

baglan.php

<?php 
try {
	$db = new PDO("mysql:host=localhost; dbname=kodrehberi; charset=utf8", "root", "");
} catch (Exception $e) {
	echo $e->getMessage(); 
}
?>

Şimdi ise veritabanında bulunan kullanıcı tablomuza kullanıcı girişi yaptığımız zaman index.php sayfamıza anlık olarak verilerin geleceğini gözlemleyebilirsiniz.Şuan ben veritabanında verileri girdim.Verileri dilerseniz bir form ile veritabanında gönderebilirsiniz tabiki :)

Bu makalede sizlere jQuery ile Veritabanından anlık veri çekme işlemini anlattım.Umarım sizler için yararlı olmuştur.Sorunuz varsa bana buradan ulaşabilirsiniz.

Yazılım için aklınıza takılan tüm soruları telegram grubumuza sorarak öğrenebilirsiniz.

Telegram: @kodrehberi

Twitter: @kodrehberi

Bekleriz... ;)