Focus mode

Node.js

PCAT Sayfalama

Pagination (Sayfalama)


Uygulamamızın yavaş yavaş sonuna geliyoruz. Ama bir sorunumuz var, uygulamamıza yüklediğimiz tüm fotoğraflar anasayfada sıralanıyor. Fotoğraf sayımız arttığında sayfamızın aşağıya doğru uzadığını göreceğiz. Bunun önüne geçmek için farklı çözümler var biz bu çalışmamızda Pagination kavramı üzerine konuşacağız. Sayfalama özelliğine geçmeden önce req.query özelliği üzerine konuşmamız gerekir.


req.query


req.query özelliği ile ilgili yönlendirmede bulunan sorgu parametrelerini yakalamamızı sağlar. URL de ?user=test&pass=1234 sorgusu yapıldığında req.query özelliği bize sorgu parametlerini ve değerlerini gösteren bir key - value objesi döner.


{ user: 'test', pass: '1234' }


Bu özellik sayesinde biz ne yapabiliriz? Eğer hangi sayfada olduğumuzu bir şekilde query ile yakaladığımızda biz sayfa içeriğimizi de o anda bulunan sayfaya göre belirleyebiliriz. Her sayfada bulunan içerik sayısını da belirledikten sonra her sayfaya hangi içeriğin düşeceğini belirleyebiliriz. Bu arada toplam fotoğraf sayımızı her sayfada bulunmasını istediğimiz fotoğraf sayısına bölersek toplam sayfa sayımız da ortaya çıkar. Nasıl karışık geldi değil mi?:)))


Şimdi hemen ilgili kodumuzu yazalım ve ve yanlarına açıklamalarımızı koyalım.


 const page = req.query.page || 1;                        // Başlangıç sayfamız veya ilk sayfamız.
  const photosPerPage = 3;                                 // Her sayfada bulunan fotoğraf sayısı
  const totalPhotos = await Photo.find().countDocuments(); // Toplam fotoğraf sayısı

  const photos = await Photo.find({})                      // Fotoğrafları alıyoruz  
  .sort('-dateCreated')                                    // Fotoğrafları sıralıyoruz
  .skip((page-1) * photosPerPage)                          // Her sayfanın kendi fotoğrafları
  .limit(photosPerPage)                                    // Her sayfada olmasını istediğimi F. sayısını sınırlıyoruz.


index.js sayfasındaki pagination kodu ise aşağıdadır.


<div>
 <% if (pages > 0) { %>
   <ul class="nav tm-paging-links">
     <% for (i=1; i <=pages; i++) { %>
       <%   if (i == current) { %>
         <li class="nav-item active"><a href="/?page=<%= i %>" class="nav-link tm-paging-link"><%= i %></a></li>
       <% } else if (i < pages) { %>
         <li class="nav-item"><a href="/?page=<%= i %>" class="nav-link tm-paging-link"><%= i %></a></li>
       <%  } else { %>
         <li class="nav-item"><a href="/?page=<%= i %>" class="nav-link tm-paging-link">></a></li>
       <%  } %>
     <%  } %>
   </ul>
 <% } %>
</div>


Yazılım Kariyerinde İlerlemeni Hızlandıracak Eğitimler

Kendi kendine yazılım öğrenirken zorlanıyor, takıldığın noktalarda bir mentore mi ihtiyaç duyuyorsun? Patika+ programlarımız ile 4-8 aylık yoğun eğitim kamplarına katıl, proje tabanlı canlı dersler ve sana özel hazırlanmış eğitimlerle gereken tüm yetenekleri kazan, iş hayatına başla!

Comments

You need to enroll in the course to be able to comment!