Infinite Scroll Nedir

Merhaba, bu yazımda sizlere jQuery ile birlikte birçok sosyal medya platformunda olan (Facebook, Twitter, Linkedin vb.) Infinite Scroll (sonsuz kaydırma) işlemini anlatacağım.

Sonsuz kaydırma (Infinite Scroll) Nedir?
Sonsuz kaydırma, birçok platformda olduğu gibi sayfayı aşağıya doğru kaydırdıkça yeni gönderilerin veri tabanından çekilmesidir. Yani yaptığımız web sitelerinde limiti 10 olarak belirlemişsek aşağıya doğru indiğimizde onuncu gönderinin sonunda yeni verileri çekmemiz lazım. Yeni verileri veri tabanından iki şekilde yapabiliriz.
1- Infinite Scroll (Sonsuz Kaydırma, Instagram gibi)
2- Pagination (Sayfalama, Google gibi)
Biz bugün birinci yöntem olan infinite scroll’u ele alacağız.

Neden Infinite Scroll ya da Pagination Kullanmalıyız?
Veri tabanımızdan çektiğimiz veri çok fazla olduğunda sunucunun cevap vermesi gecikebilir ya da hiç cevap vermeyebilir. Bu durumlarla karşılaşmamak için bu iki yöntemden birini kullanmamız gerekir.

Infinite Scroll Mu Yoksa Pagination Mu?
Aslında ikisi de fakat kullanım yerine göre değişmektedir. Eğer amacınız kullanıcı deneyimini arttırmak, mobil cihazlarda kullanımı kolaylaştırmak ve kullanıcının site içerisinde fazla zaman geçirmesini sağlamak ise Infinite Scroll en iyi çözüm olacaktır. Çünkü kullanıcı sayfayı sürekli aşağıya kaydıracağı için tam olarak ne zaman kaydırma işlemini bitireceğini tahmin edemez. Eğer amacınız sitenizde bir şeyler aratmak ya da bir ürün listesini sıralamak ise Pagination kullanmanız gerekmektedir.

Şimdi konumuza dönelim. İlk öncelikle yapmamız gereken şey bir html dosyası oluşturmak ve genel hatlarıyla bir iskelet oluşturmak. Daha sonra jQuery kütüphanesini html dosyamıza eklememiz gerekiyor. Bunları yaptıktan sonra <body></body> etiketleri arasına postArea ve loadingArea diye iki div ekleyelim.
<div class=”postArea”></div>
<div class=”loadingArea”></div>
Tüm bunlarla birlikte aşağıdakine yakın bir html dosyanız olması gerekmektedir.

<!DOCTYPE HTML>
<html>
<head></head>

<body>
<div class="postArea"></div>
<div class="loadingArea"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

Şimdi verilerimizi nasıl jQuery ile çekebiliriz diye düşünmeye başlayabiliriz. Mantık olarak öyle bir kod yazmalıyız ki sayfanın altına geldiğimizi anlayıp yeni gönderileri çekebilelim. Bunun için scrollun nerede olduğunu ve scrollun yüksekliğini anlamamız gerekiyor. Bunu şu şekilde anlayabiliriz:

window.innerHeight + window.scrollY; 
document.body.scrollHeight;

window.innerHeight + window.scrollY; kodu bize scrollumuzun pozisyonunu veriyor.
document.body.scrollHeight; kodu ise scrollumuzun yüksekliğini veriyor. Buradan sonra yapmamız gereken şey bu iki kodu birleştirerek sayfanın sonuna gelip gelmediğimizi anlamak. Bunu şu şekilde yapabiliriz:

if( (window.innerHeight + window.scrollY) >= document.body.scrollHeight )
{
//Yapmak İstediğimiz Şeyler
}

Bu kod bloğunda eğer scroll’umuzun pozisyonu kendisinin yüksekliğinden büyükse ya da eşitse içine yazacağımız kodları çalıştır diyoruz. Yani kısacası scroll en alta indiğinde yazdığım kodları çalıştır diyoruz.

En aşağıya indiğimizde verileri nasıl çekeceğiz?
bunu da jQuery kütüphanesindeki $.post() fonksiyonuyla yapacağız. Bunun yerine $.get() ya da $.ajax() fonksiyonları da kullanılabilir. Ben $.post()
fonksiyonunu kullanacağım yazımda.
Bu kodları github hesabıma önceden yükledim o yüzden ordaki kodları açıklayarak devam ediyorum. Öncelikle şunu açıklayayım SELECT işlemini yapan kodu birden fazla yazmamak için tüm SELECT işlemlerini jQuery tarafında istek oluşturarak yaptım bu nedenle jQuery dosyamın en başında verileri çektim sonra sayfanın altına geldikçe yeni verileri çektim.
Şimdi kodları açıklamaya gelelim.
jQuery kütüphanesini ekledikten sonra bir javascript etiketi açıp şu kodları ekliyoruz:

page=0;

selectPosts();

$(document).ready(function(){
$(window).scroll(function(){
if((window.innerHeight + window.scrollY) >= document.body.scrollHeight)
selectPosts();
});
})

function selectPosts()
{
$.post("select.php", { process: "getPosts", page: page }, function(data){
if( data.indexOf( "No Have Post Any More." ) == -1 )
{
$(".postArea").append(data);
page += 10
}

else
$(".loadingArea").html("<img src='loading.svg'><p>"+data+"<p>");
})
}

Buradaki page değişkeni ne işe yarayacak? Page değişkeni benim kaçıncı gönderide kaldığımı bana gösterecek yani eğer ben bunu 0 olarak gönderirsem veri tabanından 1. veriden itibaren 10 adet getirtmiş olurum eğer 10 olarak gönderirsem 10. gönderiden itibaren 10 gönderi getirtmiş olurum. SQL sorgumda bana dönecek olan post sayısını 10 olarak belirledim fakat siz bunu arttırabilirsiniz. Tabii serveri ve clienti göz önünde bulunduracak şekilde bunu yapmalısınız.

$(document).ready() fonksiyonu sayfamın tamamen hazır olduğunu yani tüm verilerimin çekildiğini ve sitemin tamamen yüklendiğini anlamamı sağlıyor.

$(window).scroll() fonksiyonu ise sayfada scroll işlemini yapıp yapmadığımı anlamamı sağlıyor.

 
if( (window.innerHeight + window.scrollY) >= document.body.scrollHeight ){
}

Kod bloğu ise az önce de değindiğimiz gibi scroll’un en aşağıda olup olmadığını kontrol ediyor. Onun içinde ise oluşturmuş olduğum selectPosts() fonksiyonu bulunuyor.
Artık veri tabanına istek gönderme kısmına geçebiliriz. Bunun için oluşturduğum selectPosts() fonksiyonunu inceleyelim.
$.post() fonksiyonu üç parametre bulundurur. Bunun ilk parametresi veri tabanıyla iletişime geçecek olan sayfayı tutar, ikinci parametre ise post işlemi ile birlikte göndereceğimiz verileri tutar. Burada süslü parantez açarak birden fazla veri gönderebiliriz. süslü parantezden sonra yazacağımız ilk kelime yani iki nokta(:)dan önceki kelime değişken adımız, diğeri ise değişkenin değeridir. Üçüncü ve sonuncu kısım ise verilerimizi post ettiğimiz sayfadan dönen cevabı tutan kısımdır. burada “data” isminde parametre alan bir fonksiyon oluşturduk böylece bize dönen response data parametresinde tutulacak.

if( data.indexOf( “No Have Post Any More.” ) == -1 ) {} bu kod bloğunda bize “data” parametresinden dönen verinin içinde No Have Post Any More. ibaresinin geçip geçmediğini kontrol ettik. Eğer indeOf() fonksiyonu bize -1 döndürürse bu ibare dönen verinin içinde yoktur demektir.

Peki bunu neden yaptım?
Eğer bunu yapmasaydım en aşağıya indiğimde yeni gönderi olmadığında ya da tüm gönderiler bittiğinde kullanıcıya gönderilerin bittiğini haber edemezdim.

$(“.postArea”).append(data); Koduyla ise yukarıda oluşturmuş olduğumuz postArea divinin içine gelen verileri eklettim. Eğer append() fonksiyonu yerine html() fonksiyonunu kullansaydım divin içindeki tüm verileri silip datadan dönen verileri yazdıracaktı. Bunu istemediğim için append() fonksiyonunu kullandım daha sonra da page değişkenime +10 ekledim çünkü onar onar veri çekmek istiyorum. Tüm verilerimi çektikten sonra artık veri kalmamışsa aşağıdaki gibi loadingArea divimin içini html() fonksiyonuyla tamamen değiştiriyorum.

else
$(“.loadingArea”).html(“<p>”+data+”<p>”);


Şimdi son olarak php kısmına bir bakalım.

<?php
if(isset($_POST))
{
if(isset($_POST["process"]) && $_POST["process"] == "getPosts")
{
$page = $_POST["page"];
$posts = $pdo->prepare("SELECT * FROM posts ORDER BY postID DESC LIMIT $page, 10");
$posts->execute();

if($posts->rowCount() > 0)
{
foreach($posts as $p)
{
echo "
<p>".$p["postTitle"]."<p>
<p>".$p["postText"]."<p>";
}
}

else
echo "No Have Post Any More.";
}
}
?>

Burada ilk olarak bir $_POST işlemi yapılmış mı diye kontrol ediyorum ve eğer yapılmışsa $_POST[“process”] diye bir şey var mı varsa değeri getPostsa denk mi diye bakıyorum. Eğer tüm bu kontrollerim true ise $page adında bir değişken tanımlıyorum ve değerini $.post() fonksiyonuyla yolladığımız page verisine eşliyorum. Daha sonra PDO kullanarak veri tabanımdan verilerimi çekiyorum. SELECT işleminin sonuna ORDER BY sutunAdi DESC ve LIMIT $page,10 yazdım.
ORDER BY sutunAdi DESC, veri tabanındaki verileri en yeniden en eskiye doğru sıralamamı sağlıyor. Eğer DESC yerine ASC yazarsak tam tersini yapmış oluruz.
LIMIT $page, 10, veri tabanından $page ile gönderdiğim sayıdan itibaren 10 adet veri çek dememe yarıyor. Burdaki 10 sayısını değiştirerek istediğiniz kadar anlık veri çekebilirsiniz. Hepsi bu kadar.

Bugün birlikte infinite scroll’un ne demek olduğunu ve nasıl yapıldığını öğrendik. Başka bir blogumda görüşmek üzere 🙂

Kodlara Github üzerinden ulaşmak için tıklayın.