bildirgec.org

Web sayfanız büyüdükçe ve içerikleriniz uzayıp gittiikçe herşeyi aynı sayfada göstermek yerine sayfalama yapmanız gerekecektir.

Sizlerde sitelerinizde sayfamalama yöntemlerinden birini kullanıyor yada kullanmak istiyor olabilirsiniz. Peki ya bu işi Twiitter yada facebook tarzında yapmak ister misiniz?

Twitter Tarzı Sayfalama

Herşeyi aynı sayfada göstermek bant genişliğinize de olumsuz etkiliyecektir. Ayrıca sitenizin misafirleri, sayfanızda gösterdiğiniz içeriğin sadece bir ksımı ile ilgeniyorlardır.

Merhaba,
Bu yazımda ASP.NET ile sayfalama işlemleri hakkında bilgi vereceğim. Sayfalama işlemlerini veritabanımızda çok veri olduğu zaman kullanmaktayız. Benim yapacağım örnekte DataList ile sayfalama yapacağım. Kodumuzda en önemli kısım ise SqlDataAdapter’ın Fill() metodudur. Fill metodunun parametreleri arasında kaçıncı kayıttan başlanacağı ve kaç kayıt gösterilereceği gibi bizim işimize oldukça yarayan parametreler bulunmaktadır. Kaçıncı sayfada olduğumuzu QueryString ile almaktayız. Kodlar ise aşağıdaki gibidir :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

/// <summary>
/// Summary description for Sayfalama
/// </summary>
public class Sayfalama
{   
    //DataList'te bulunan verileri sayfalama kodu
    //Veriyi Çekme
    /*
        int sayfano = 1;
        if (String.IsNullOrEmpty(Request.QueryString["sayfa"].ToString()))
        {
            sayfano = 1;
        }
        sayfano = int.Parse(Request.QueryString["sayfa"].ToString());

        //Bu kısımdaki 3 sayısı bizim sayfa başına göstereceğimiz kayıt sayısıdır. Bu kısmı kendinize göre değiştirmeniz gerekmektedir.
        DataList1.DataSource = Sayfalama.DataListVeriGetir(sayfano, 3, "isimler", new System.Data.SqlClient.SqlConnection(@"Data Source=.\sqlexpress; Database=master;Integrated Security=true"), "select * from isimler");
        DataList1.DataBind();

        int toplamkayit = Sayfalama.TablodakiKayitSayisi("isimler", new System.Data.SqlClient.SqlConnection(@"Data Source=.\sqlexpress; Database=master;Integrated Security=true"));

        //Bu kısımdaki 3 sayısı bizim sayfa başına göstereceğimiz kayıt sayısıdır. Bu kısmı kendinize göre değiştirmeniz gerekmektedir.
        decimal sayfanumaralari = Math.Round((decimal)toplamkayit / 3);
        
        LinkButton sayfalar;

        for (int i = 1; i <= sayfanumaralari; i++)
        {
            sayfalar = new LinkButton();
            sayfalar.Text = i.ToString();
            sayfalar.Attributes["href"] = "default.aspx?sayfa=" + i.ToString();

            Panel1.Controls.Add(sayfalar);
        }
    */

    //Verilen tablodaki toplam kayıt sayısını geri döndürür.
    public static int TablodakiKayitSayisi(string TabloAdi, SqlConnection BaglantiCumlesi)
    {
        string SqlKomut = "SELECT COUNT(*) FROM " + TabloAdi;
        SqlCommand komut = new SqlCommand(SqlKomut, BaglantiCumlesi);
        int KayitSayisi = 0;

        try
        {
            BaglantiCumlesi.Open();
            KayitSayisi = int.Parse(komut.ExecuteScalar().ToString());
        }
        finally
        {
            BaglantiCumlesi.Close();
        }

        return KayitSayisi;
    }

    //Verilen SQL cümlesine uygun veri setini geri döndüren fonksiyon
    //SayfaNo = Kaçıncı sayfa olduğunu belirtir.
    //KayitSayisi = Sayfada kaç tane kayıt gösterileceğini belirtir.
    //TabloAdi=Veritabanındaki tablo adı.
    //BaglantiCumlesi=SQL bağlantı cümlesi.
    //SqlCumle = Select sorgusu
    public static DataSet DataListVeriGetir(int SayfaNo, int KayitSayisi, string TabloAdi, SqlConnection BaglantiCumlesi, string SqlCumle)
    {
        SqlDataAdapter da = new SqlDataAdapter(SqlCumle, BaglantiCumlesi);
        DataSet ds = new DataSet();

        int baslangic = ((SayfaNo * KayitSayisi) - KayitSayisi);

        da.Fill(ds, baslangic,KayitSayisi, TabloAdi);

        return ds;
    } 
}

Bizim bu kodumuzda sayfa başına 3 adet kayıt gösterilmektedir.

Merhabalar geçmiş sayfalardan örnek bir datagrid html modelinin sıfırdan html’e aktarılış hikayesini tüm incelikleriyle açıklamaya çalıştığımız bu yazımızı okuyanlarımız hatırlayacaktır.

O gün için CSS3 multiple background özelliğine destek veremeyen tarayıcıların kodumuza yansıttığı zahmeti belirtmişdik. Bu gün ise explorer haricindeki tarayıcılarımız bu zahmetleri, rahmete çevirecek desteklerine kavuşdukları görünmektedir.

Başta haber siteleri olmak üzere, farklı bakış açıları ile tasarlanan web siteleri için vazgeçilmez bir yöntem olan; içeriğin oldukça şık tasarlanmış geçiş animasyonları ile ziyaretçilere bir slayt gösterimi şeklinde sunulması yöntemi için web’te onlarca ücretli veya ücretsiz eklenti bulmak mümkün.

Mevcut veya ileride hazırlayacağınız web projelerinde kullanılmak üzere arşivinizde saklayabileceğiniz bir jQuery slayt gösterim eklentisi olan simpleSli.de, aman aman bir görsel sunum ve özellikler sunmasa da, çoğu web projesinde kullanılabilecek bir şıklığa ve sadeliğe sahip.

simpleSli.de; 4kb’lık (sıkıştırılmış hali) boyutu, HTML ile düzenlenebilir görsel ve metin içeriklerin eklenebilmesi (sayfalama (paging) için kullanılabilmekte), slayt geçişleri ile ilgili bazı ayarların yapılabilmesi ve slay geçişlerinin otomotik olarak yapılabilmesi gibi özellikleri tasarımcılara/geliştiricilere sunmakta.

Herkes bilir günümüzün teknolojisinde olmassa olmazlardandır ajax. Artık benimde uygulamarıma ajax katma zamanım geldi diyorsanız doğru yerdesiniz..
Jquery ile yapacağımız bu basit ama işlevsel uygulamayı her türlü projenizde kullanabilirsiniz. Size önerim az sayfalı uygulamalarda kullanmaktır. Çünkü sayfaların hepsi tek seferde yüklenir ve sayfa değiştirildiğinde sayfa yenilenmeden geçilmiş olur. Eğer sayfa sayınız fazla ise bu boşuna yükleme yapmanıza ve sayfanın geç açılmasına sebep olur. 3-5 sayfalık sayfalandırma işlerinde kullanmak akıllıca olur..

İnternet hayatımızın bir parçası haline geldiğinden beri ansiklopedileri kullanmayı bıraktık. Çünkü A-C, C-F… diye bakarak önce hangi cilt olduğunu anlayıp sonra da kelimeyi dakikalarımızı alacak şekilde aramamızı; internette, aradığımız şeyi yazmamız esnasında geçen süre kadar kısa bir zaman diliminde yapabiliyoruz. Bu işi yaparken de çoğunlukla başvurduğumuz yer Google oluyor. İlk başlarda inanılmaz gibi görünen Google’ın (ki hala öyle) elbette ki tatmin edemediği kullanıcıları da vardır. Onlar ellerinden geleni yaptılar, ama bu bile bana yetmiyor diyenler varsa gelin bu işi Google’a bırakmadan küçük bir eklenti ile halledelim. Firefox Autopager Eklentisi ile.

Firefox Autopager Eklentisi

Bu eklenti Google’ın 1, 2, 3, … diye sıraladığı ve bizim tıklamayla diğerine geçmemiz gereken sayfaları tek bir ekranda siz sayfanın sonuna doğru gelirken bir sonrakini mevcut olan sayfanın altına yüklüyor. Bunu da anlık bir dilim içerisinde gerçekleştiriyor. Kullanmak için; Autopager eklentisini yükledikten sonra sayfalı bir siteye geldiğinizde açılan uyarıya “Evet, Autopager’ı aktifleştirmek istiyorum” demek yeterli.

Firefox Autopager Eklentisi İşlevi Resmi

Kullanmak isteyenlere;
https://addons.mozilla.org/en-US/firefox/addon/4925

Bir site ya da projeye başladığımda, yazması en sıkıcı gelen işlerin başında veri sayfalama gelir. Her seferinde sayfalama işlemlerini bu yüzden en sona bırakırım. Daha önceki sayfalama makalelerimi okuduysanız hep karmaşık kodlardan oluştuğunu görebilirsiniz. Her seferinde bu kodları tekrar tekrar yazmak nedendir bilmem beni hep bunaltmıştır, öyle ki kopyala-yapıştır bile angarya gelir. Buna bir son vermem gerektiğini düşünüp, hazır OOP programlamaya kendimi alıştırmaya başladığım şu zamanlarda bununla ilgili bir sınıf yazmak istedim ve birşeyler karaladım. Benim can sıkıntımı fazlasıyla ortadan kaldıran bir sınıf hazırladım ve bunu sizlerle paylaşmak istedim.

Lookbook adresine girdiğinizde sayfanın en altına indiğinizde önceki sayfalar otomatik olarak ekleniyor. Bu sayfalama sistemi çok hoşuma gitti. Nasıl yapılabileceği hakkında bilgisi olan var mı acaba?

JavaScript‘ler web sitelerin vazgeçilmez kaynaklarıdır. JS ile kullanıcı dostu, interaktif arayüzler oluşturulurken bu arayüzlerin tarayıcıdan (browser) tarayıcıya farklılık göstermesi, hem web site geliştiricisi hem sitenin ziyaretçisi açısından en istenilmeyen durumlardan bir tanesidir.

JavaScript’in gücü ve etkileyici yanları çeşitli açık kaynak kodlu JavaScript kütüphanesinin yazılmasını sağladı. Bu kütüphanelerden siteler için hazırlanmış, açık kaynak kodlu, görselliği etkileyici ve çeşitli tarayıcılarda testleri yapılmış ExtJS ve ExtGWT‘den bahsetmek istiyorum.

Bu JS kütüphaneleri, yüksek performans elde etmek, zengin internet uygulamaları üretmek amacıyla geliştirilmiş.

Demolarda da göreceğiniz üzerine Ajax‘sal özellikler kütüphanelerin beğeni kazanmasını sağlıyor.

Şimdi ExtJS‘den örneklere bakalım.

• ExtJS Feed Viewer (demo)
  
  ExtJS Feed Viewer

flickrleech

flickr‘ı duymayanınız yoktur sanırım. “yok ben duymadım, yok ben görmedim” diyenleri buraya ve buraya alalım.

bahsedeceğimiz site ise, flickr’daki fotoğrafları hızlıca ve kategorilendirilmiş şekilde sayfalamanıza ve görüntülemenize olanak sağlamakta… flickr içerisinde sizin belirleyeceğiniz ve ana başlıklar halinde sunulan kriterlere göre arama yapabilmeniz için tasarlanmış site, bir nevi flickr arama motoru şeklinde çalışıyor.