Django Sonsuz Sayfa Oluşturma | Pelerin Kutusu | Bilim Sanat Yazılım Kitap Oyun Teknoloji Gündemi

Django Sonsuz Sayfa Oluşturma

Django Sonsuz Sayfa Oluşturma işleminden kastım, bir siteye girdiğiniz zaman aşağı doğru indikçe diğer verileri sayfa yenilenmeden gösterir. Sayfalama mantığı gibi çalışır ama kullanıcının bir sonraki sayfa diye bir butona tıklayıp seçmesine gerek kalmaz. Bu duruma Infinite Scroll denir. Bu işlem için, Waypoints ve Infinite javascript kütüphanelerini kullanırız. İsterseniz gelin birlikte nasıl kullanılır kısmına geçelim, beni takip edin :’)

Django Infinite Scroll Kullanımı

Django Sonsuz Sayfa Oluşturma işlemi için düzelteceğimiz 3 adet dosya var. urls.py’de Url tanımı, Views.py’de kodlarımızı yazacağız ve template için index.html dosyamız üzerinde düzenlemeler yapacağız.

Url Oluşturmak

urlpatterns = [
    url('', PostsView.as_view(),  name="index"),
]
Django Sonsuz Sayfa Oluşturma

Url tanımlamasını bu şekilde yapabilirsiniz.

View Oluşturmak

Django Sonsuz Sayfa Oluşturma
View kısmı oluşturulması gereken kodlar

View kısmında bu şekilde bir yapıyla bilgileri gönderiyoruz. Peki, başka bir tablo daha işin içine girirse ne olacak? Bu tür durumlarda bir def yazmamız gerekiyor.

Django Sonsuz Sayfa Oluşturma
Fazladan tablo kullanımı
class PostsView(ListView):
    model = Yenioyun
    paginate_by = 1
    
    context_object_name = 'oyunlar'
    template_name = 'index.html'
    ordering = ['oyun_adi']
    def get_context_data(self, *args, **kwargs):
        context = super(PostsView, self).get_context_data(*args, **kwargs)
        context['alert'] = "Bu ikinci verinin içeriğidir. Pelerinkutusu.com"
        return context 

Template kısmını oluşturmak

template kısmında öncelikle kütüphanlerimizi dahil etmek gerekiyor. Kütüphane linkleri şu şekildee biyyyrunnnn :’)

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.js"></script>

Sonrasında sayfanın sonuna geldiğimizde ajax atıp, güncelleme işlemini yapması için Waypoints kütüphanesinin hazır fonksiyonlarını kullanıyoruz.

<script>
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
 //Güncellemeden önce
      $('.infinite-loading').show();
      },
    onAfterPageLoad: function ($items) {
//Güncellemeden sonra
        $('.infinite-loading').hide();
      },
  });
</script>

Şu an sadece javascript kodlarımızı yazdık, html kısmında class isimlerini ve düzenlemeleri yapmamız gerekiyor haydi birlikte yapalım :’)

<div class="infinite-container">

infinite-container classını en üst düzey divde kullanmamız gerekir.

<div class="infinite-item">

infinite-item classımızı item olan div classına ekliyoruz. Genelde for döngüsünün ilk div’i olur.

<div class="infinite-container">
  <div class="row">
    {% for oyun in oyunlar %}
    <div class="card col-sm-4 mt-5 infinite-item">
      <div class="card-body">
        <p class="card-text">{{oyun.oyun_aciklama}}</p>
        <p class="card-text">{{oyun.oyun_tarihi}}</p>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

oyunlar” adı ile view’den değeri döndüğümüz için, o şekilde alarak for işlemine tabi tutarak alanlarımızı ekrana bastık.

{% if page_obj.has_next %}
    <a class="infinite-more-link" href="?page={{ oyunlar.next_page_number }}">Devam</a>
  {% endif %}
  <div class="d-flex justify-content-center" style="display:none;">
      <div class="spinner-border" role="status">
          <span class="sr-only">Yükleniyor...</span>
      </div>
  </div>
  <div class="row">
    <div class="col-12">
        {% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ oyunlar.next_page_number }}">Geç</a>
        {% endif %}
        </span>
    </div>
  </div>

Bu kodlar ile siteye ileri, geri butonlarını ve yükleniyor mesajını kazandırıyoruz. Ben göstermek istedim, kullanmanıza gerek yoktur.Uzun uzun anlatmayacağım biraz inceleyerek çözebilirsiniz.

Evet arkadaşlar django ile Django Sonsuz Sayfa Oluşturma işlemi bu şekilde anlatılabilir. Bu tür işlemler çok açık bir dünya, benim bu anlattığım ile tüm sorunlarınız mucizevi bir şekilde iyileşmeyecek. Sizin buradan aldığınız benzinle ilerlemeniz gerekiyor. Eğer sormak istediğiniz bir şey olursa, yorum kısmından veya instagram sayfamızdan ulaşabilirsiniz. İyi kodlamalar :’)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir