jQuery, PHP ve MySQL ile Scroll ile Veri Yükleme

Kayıtları birden çok sayfada görüntülemek için web projelerinde büyük verilerle kullanılan sayfalandırmaya aşinasınız. Sayfalama, büyük veriler ve iyi bir kullanıcı arayüzü için hızlı çözüm sağlar, ancak sayfaları görüntülemek için sonraki veya önceki düğmesine tıklaması gerekir. Bir önceki sayfayı görüntülemek istiyorsanız, önceki sayfayı yüklemek için tekrar tıklamanız gerektiğini varsayalım.

Bu nedenle, sayfalandırmayı değiştirmek için daha kullanıcı dostu bir çözüm arıyorsanız, doğru yerdesiniz. Sayfa kaydırmayı her seferinde kayıt verilerini yüklemek için sayfalandırmayı daha kullanıcı dostu bir özellikle değiştirebilirsiniz. Bu özellik ile kullanıcıların bir sonraki veya bir önceki butonuna tıklamasına gerek kalmaz, sayfa kaydırıldığında kayıtlar yüklenir.

Bu uygulamada PHP ve MySQL ile Ajax kullanarak sayfayı kaydırırken dinamik olarak daha fazla kaydı nasıl yükleyeceğinizi öğreneceksiniz. Bu uygulamayı canlı demo ile kolay adımlarla ele alacağız.

PHP ve MySQL ile jQuery kullanarak Sayfa Kaydırmada Veri Yüklemeyi uygulamaya başlayalım. Başlamadan önce, dosya yapısına bir göz atın. Bu uygulama için aşağıdaki dosyalara ihtiyacımız var.

• db_connect.php
• index.php
• load_data.php
• ajax.js

Veritabanı Tablosu Oluşturun
 

Sayfa kaydırmada görüntülenecek kayıtları yüklemek için veritabanında tablo oluşturacağız.

CREATE TABLE IF NOT EXISTS `blogs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `description` longtext NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Veritabanı Bağlantısı Oluşturun

MySQL veritabanı ile bağlantı kurmak için bir PHP dosyası db_connect.php oluşturacağız.

<?php

	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "demo";

	try
	{
		$db = new PDO('mysql:host='.$servername.';port=3306;dbname='.$dbname.';charset=utf8', $username, $password);
	}
	catch(PDOException $e)
	{
		echo 'Bağlantı Hatası'.$e->getMessage();
	}

?>

Ana Dosya Oluşturun

Şimdi, sayfa kaydırıldığında dinamik olarak yüklenen veriyi görüntülemek için PHP dosyası index.php oluşturup içerisine HTML etikelerimizi ekliyoruz. Ayrıca sayfa yüklendiğinde verileri yüklemek için load_data.php'yi dahil edeceğiz ve sayfa kaydırıldığında kalan veriler görüntülenecektir.

<div class="container">
	
	<h2>Uygulama: jQuery, PHP ve MySQL ile Scroll ile Veri Yükleme</h2>		
	<div id="messages">
	<?php include('load_data.php'); ?>
	</div>
	<div id="loader" style="text-align:center;"><img src="loader.gif" /></div>	

</div>

Sayfa Kaydırıldığında Verileri Yüklemek için JavaScript Oluşturun

Şimdi, MySQL veritabanından kayıtları yüklemek ve görüntülemek için sunucu tarafında load_data.php'ye Ajax isteğinde bulunmak için ajax.js JavaScript dosyasını oluşturacağız. Aşağıdaki kodda, sayfa kaydırıldığında sayfa numarası ayrıntılarını alacağız ve ardından loadRecords() işlevini çağıracağız ve verileri yüklemek için sayfa ayrıntılarını içeren url'yi ileteceğiz.

$(document).ready(function(){ 
	$(window).scroll(function(){
		if ($(window).scrollTop() == $(document).height() - $(window).height()){
			if($(".page_number:last").val() <= $(".total_record").val()) {
				var pagenum = parseInt($(".page_number:last").val()) + 1;
				loadRecords('load_data.php?page='+pagenum);
			}
		}
	});	
});

JavaScript fonksiyonu loadRecords(), Ajax'ın sunucuya yüklenmesini istemek için scroll'u çağırır.

function loadRecords(url) {
	$.ajax({
		url: url,
		type: "GET",
		data:  {total_record:$("#total_record").val()},
		beforeSend: function(){
			$('#loader').show();
		},
		complete: function(){
			$('#loader').hide();			
		},
		success: function(data){			
			$("#messages").append(data);
		},
		error: function(){} 	        
	});
}

HTML ile MySQL'den Kayıt Alalım

Şimdi nihayet load_data.php içinde, verileri yüklemek ve verileri HTML olarak döndürmek için Ajax isteğine göre MySQL veritabanından kayıtlar alacağız.

<?php
include_once("db_connect.php");

$perPage = 3;
$sql = "SELECT id, description FROM blogs";

$page = 1;

if(!empty($_GET["page"])) {
	$page = $_GET["page"];
}

$start = ($page-1)*$perPage;

if($start < 0) $start = 0;

$query = $db->query($sql . " limit " . $start . "," . $perPage);

$records = $query->fetchALL(PDO::FETCH_ASSOC);
$resultset = $query->rowCount();

if(empty($_GET["total_record"])) {
	$_GET["total_record"] = $resultset; 
}

$message = '';

if(!empty($records))
{
	$message .= '<input type="hidden" class="page_number" value="' . $page . '" />';
	$message .= '<input type="hidden" class="total_record" value="' . $_GET["total_record"] . '" />';

	foreach( $records as $rows ) {
		$message .= '<div class="card mt-5"><div  class="card-body">' .$rows["id"] . ' - ' .$rows["description"] . '</div></div>';
	}
}
echo $message;
?>

İçeriği geliştirebilir yada bu haliylede kullanabilirsiniz. 

Canlı demoyu Demo bağlantısından görüntüleyebilir veya dosyaları aşağıdaki İndir bağlantısından indirebilirsiniz.

Demo İndir