15 Nisan 2016 Cuma

SQL / MySQL - Union ve Union All kullanımı

1 comment
Bu yazıda SQL'de UNION ve UNION ALL komutlarının ne işe yaradığını, nasıl kullanılacağını anlatmaya çalışacağım.

UNION ve UNION ALL komutları ile birden fazla sorguyu birleştirerek tek sonuç elde ederiz.

UNION komutu, sonuçların duplicate edilmesini engeller. Yani union komutu, DISTINCT komutu ile select sorgusu yazmak gibi düşünülebilir.

UNION ALL'da ise kayıtların duplicate olup olmadığına bakılmaz.

Komutlar hakkında kısa bilgi verdikten sonra örneğe geçiyorum.

"uye" adında bir tablom var ve tabloda aşağıdaki gibi 7 kayıt bulunuyor.



Şimdi Ulke alanı ABD olan kayıtları çekiyorum.

 SELECT * FROM uye WHERE Ulke = 'ABD'  




No alanı 30'dan büyük olan kayıtları çekiyorum.

 SELECT * FROM uye WHERE No > 30  



Şimdi bu kayıtları UNION ALL kullanarak birleştiriyorum.

 SELECT * FROM uye WHERE Ulke = 'ABD'  
 UNION ALL  
 SELECT * FROM uye WHERE No > 30  


Görüldüğü gibi Bobby Dixon'ın ülkesi ABD ve numarası 30'dan büyük olduğu için sorgu sonucunda iki kere gözüktü.

Şimdi UNION ALL yerine UNION komutunu kullanıyorum.

 SELECT * FROM uye WHERE Ulke = 'ABD'  
 UNION  
 SELECT * FROM uye WHERE No > 30  


Bu sefer Bobby Dixon için de sadece bir sonuç döndü.
Read More

8 Nisan 2016 Cuma

Sayfa aşağı kaydıkça içerik yükleme - scroll paging (sayfalama)

1 comment

Bu yazıda scroll aşağı kaydırıldığında içerik yükleme işlemini basit bir şekilde anlatmaya çalışacağım.

Çok fazla veriyi aynı anda çekerek ekrana basmak performans açısından sorun çıkarabilmekte. Bunu engellemek için kullanılan yöntemlerden bir tanesi de scroll'u kullanarak sayfalama yapmak.



1'den 18'e kadar olan sayıları yazılışlarıyla beraber ekrana yazdıracağım. Sayfa yüklendiğinde 1'den 9'a kadar olan sayıları, yüklendikçe de sıradaki 3 sayıyı (10,11,12 / 13,14,15 gibi) yazdıracağım.

body altına aşağıdaki gibi 9 sayıyı ekliyorum.

 <div id="items" class="col-xs-12 col-sm-8 col-sm-offset-2">  
      <div class="item col-xs-3">  
           <span class="letter">Bir</span>  
           <span class="number">1</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">İki</span>  
           <span class="number">2</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Üç</span>  
           <span class="number">3</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Dört</span>  
           <span class="number">4</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Beş</span>  
           <span class="number">5</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Altı</span>  
           <span class="number">6</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Yedi</span>  
           <span class="number">7</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Sekiz</span>  
           <span class="number">8</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Dokuz</span>  
           <span class="number">9</span>  
      </div>  
 </div>  

Javascript tarafında üzerinde letter ve number olan listemi tanımlıyorum.

 var itemList = [  
      { letter: 'Bir', number: 1 },  
      { letter: 'İki', number: 2 },  
      { letter: 'Üç', number: 3 },  
      { letter: 'Dört', number: 4 },  
      { letter: 'Beş', number: 5 },  
      { letter: 'Altı', number: 6 },  
      { letter: 'Yedi', number: 7 },  
      { letter: 'Sekiz', number: 8 },  
      { letter: 'Dokuz', number: 9 },  
      { letter: 'On', number: 10 },  
      { letter: 'On bir', number: 11 },  
      { letter: 'On iki', number: 12 },  
      { letter: 'On üç', number: 13 },  
      { letter: 'On dört', number: 14 },  
      { letter: 'On beş', number: 15 },  
      { letter: 'On altı', number: 16 },  
      { letter: 'On yedi', number: 17 },  
      { letter: 'On sekiz', number: 18 },  
 ];  

Şimdi scroll'un en alta geldiğini bulmak için gerekli fonksiyonu yazıyorum. Her scroll'da 3 item çekmek istediğim için, oluşturmuş olduğum pageSize değerini 3 yaptım. lastPage değişkeninde ise item sayısını pageSize'a bölerek görüntülenen son sayfayı buldum. pageSize ve (lastPage + 1) değerleriyle GetNextPage fonksiyonunu çağırdım.

 $(window).scroll(function(){  
      if($(window).scrollTop() == $(document).height() - $(window).height()) {  
           var pageSize = 3;  
           var lastPage = $("#items").find(".item").length / pageSize;  
           GetNextPage(lastPage + 1, pageSize)  
      }  
 });  

GetNextPage fonksiyonunda son index'i bularak sonraki 3 ürünün çekilmesini sağladım.

 function GetNextPage (page, pageSize) {  
      var result = [];  
      var lastIndex = ((page - 1) * pageSize);  
      for(var i = lastIndex; i < (lastIndex + pagesize); i++) {  
           result.push(itemList[i]);  
      }  
      DrawNextPage(result);  
 }  

DrawNextPage fonksiyonunda ise dönen değerleri kullanarak html append işlemini gerçekleştirdim.

 function DrawNextPage (data) {  
      if(data != null && data.length > 0) {  
           var content = "";  
           for(var i = 0; i < data.length; i++) {  
                content += '<div class="item col-xs-3">';  
                content += '     <span class="letter">' + data[i].letter + '</span>';  
                content += '     <span class="number">' + data[i].number + '</span>';  
                content += '</div>';  
           }  
           $("#items").append(content);  
      }  

} DEMO - DOSYALAR

Read More