jquery.ui.dialog eklentisini kullanarak pencere içinde resim göstermek

Eğer jquery.ui hakkında bilginiz varsa muhtemelen ui.dialog eklentisini duymuşsunuzdur. Bu eklenti sayfanızda sürüklenebilir ve boyutlandırılabilir pencereler oluşturmanızı sağlar. Ancak bu eklentiyi kullanırken içeriğe göre pencerenin boyutunu önceden belirlemeniz ve eklentiye aktarmanız gerekiyor. Geçenlerde dialog eklentisiyle boyutu belli olmayan bir resmi göstermek üzere bir çalışma yaptım ve paylaşmak istedim. Aşağıdaki işlevlerden newid() işlevi sayfada benzersiz id değeri oluşturan basit bir işlev. Takip eden pageWidth ve pageHeight işlevleri de (internetten buldum) sayfanın görünür boyutunu almak için kullandığım işlevler. newWindow işlevi ise daha sonra oluşturacağımız pencere için yeni bir div oluşturup ona ait seçici ifadesini dönüyor. showImageWindow işlevi de parametre olarak aldığı dosya adını ve başlık değerini kullanarak yeni bir pencere oluşturuyor ve pencerenin boyutlarını resim ekrana sığacak şekilde küçültmek üzere boyut oranını koruyarak img imindeki width yada height değerlerini ayarlıyor. Bu yöntemle genel lightbox eklentilerinin aksine aynı anda birden fazla resim penceresi gösterilebiliyor.

var uid=0;

function newid (){ return ++uid;}

function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
    return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function newWindow(title){
    var id;
    var t;
    t='';
    if(title!=undefined){
        t=' title="'+title+'" ';
    }
    id = 'dialog_'+newid();
    $('body').append('<div id="'+id+'" '+t+'class="flora"></div>');
    return '#'+id;
}

function showImageWindow(file,title){
    $imgWindow = $(newWindow(title));
    img = new Image();
    img.src=file;
    img.onload=function(){
        w = img.width;
        h = img.height;
        r = w/h;
        pagew = pageWidth();
        pageh = pageHeight();
        attr =null;
        val ='';
        if(w>(pagew-20)){
            w=pagew-20;
            h = w/r;
            attr ="width";
            val = w;
        }
        if(h>(pageh-50)){
            h=pageh-50;
            w=h*r;
            attr ="height";
            val = h;
        }
        $imgWindow.hide().html(" <img src='"+file+"' /> ");
        $imgWindow.find("img[src='"+file+"']").click(function(){
            $imgWindow.dialog("destroy");
        });
        if(attr!=null){
            $imgWindow.find("img[src='"+file+"']").attr(attr,val);
        }
        $imgWindow.show().dialog(
        {
            width:parseInt(w)+20,
            height:parseInt(h)+50,
            modal: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        });
        $(".ui-dialog-titlebar-close").blur();
    };
}

Live Query eklentisi

Bu yazıda size faydalı bir jquery eklentisi olan Live Query 'den bahsetmek istiyorum. Kısaca açıklamak gerekirse Livequery jquery 'de kullanılan seçicileri dinamik hale getirir. Jquery'de bir seçici ile sayfanın DOM (document object model) kapsamındaki bir yada daha fazla öğesini seçtiğinizde bu öğelerin o anda mevcut olması gerekir. Ancak livequery bu zorunluluğu ortadan kaldırır. Livequery ile yapılan seçme işlemi sayfaya sonradan eklenen öğeleri de kapsar. Örneğin sayfanıza ajax ile içerik eklediğinizde bu içerikteki öğeler daha önce kullandığınız seçicilere uysa bile artık iş işten geçmiştir çünkü siz sayfanızdaki nesneleri seçtiğinizde yeni eklenen içerik yoktu. Ancak bu seçme işlemini livequery ile yaparsanız daha sonra eklenen içerikteki uygun öğeler de bu seçime dahil olacaktır. Örneğin aşağıdaki kodu kullanarak sayfanıza daha sonradan eklenecek olan bağlantıların da tıklandığında uyarı vermesini sağlayabilirsiniz:

$('a').livequery('click', function(event){
    alert('tıklandı');
    return false;
});

Ayrıca livequery ile seçicinize uyan bir nesne eklendiğinde ve kaldırıldığında çalışmak üzere işlevler tanımlayabilirsiniz:

$('li').livequery(function(){
        // yeni öğe eklendiğinde çalışacak olan işlev:
        $(this)
        .hover(function(){
            $(this).addClass('hover');
        },function(){
            $(this).removeClass('hover');
        });
    },
    function() {
        // öğe kaldırıldığında çalışacak olan işlev:
        $(this)
        .unbind('mouseover')
        .unbind('mouseout');
    }
);

JSON doğrulama

Eğer json kullanıyorsanız ve bazen nerede hata yaptığınızı bulamıyorsanız bu site size göre:

www.jsonlint.com

Bu sitede kolayca json kodlarınızı doğrulatabilir ve hatalı olan kısımları öğrenebilirsiniz. Ayrıca json yapısını öğrenirken denemeler yapmak için faydalı olacağını düşünüyorum.

PHP sayfalama örneği

Sitenizde bir tabloya ait kayıtların listesini göstermek istediğinizde çoğunlukla sayfalama işlemi yapmanız gerekir. Aşağıda bunun için yazılmış basit bir örnek olarak "liste" tablosundaki kayıtları sayfalandırma işlemi yaparak listeleyen bir örnek bulabilirsiniz:

[php]
$p=intval($_GET['p']); //sayfa parametresi

$toplam_sayfa = 1;
$n = 5; // bir sayfada listelenecek kayıt sayısı
$toplam=0;
$basla = 0;

$db->query("SELECT COUNT(*) as x FROM `liste` ");
if($db->fetch_data()){
$toplam = $db->data['x'];
}

$toplam_sayfa = ceil( $toplam/$n );
$basla = ($p-1)*$n;

$db->query("SELECT * FROM `liste` LIMIT {$basla},{$n}");
while($db->fetch_data()){
// satır gösterilecek bölüm ...
}

//sayfa numaraları bölümü
for($i=1;$i<=$toplam_sayfa;$i++){
echo ($p==$i)?"{$i} ":"{$i} ";
}
[/php]

Örneğimizde ilk önce sayfa parametresini $p değişkenine kaydediyoruz. (Aslında sayfa numarasını bu şekilde belirlemek yerine parametre yoksa yada pozitif tamsayı bir değer değilse sayfa numarasını 1 kabul etmek gerekir.) Daha sonra listemizdeki toplam kayıt sayısını belirliyoruz (8-11). Burada kullanılan $db daha önceden tanımlanmış bir veritabanı sınıfı nesnesidir. 13.satırda toplam sayfa sayısını belirleyip sayfamızdaki ilk satırın tablodaki sırasını belirliyoruz (13-14). Bundan sonra satırlarımızı bir döngü içinde listeleyip (16-19) ardından tüm sayfalar için sayfa numarası bağlantılarını oluşturuyoruz. Mevcut sayfaya ait sayfa noyu sabit sayı olarak diğerlerini bağlantı olarak yazıyoruz.

Sayfalama işlemi temelde bu örnekteki mantığa dayanır. Önemli olan bir sayfada kaç kayıt gösterileceğini belirleyip istenilen sayfa için başlangıç indisini hesaplamaktır. Sorgudaki LIMIT a,b için a değeri ilk satırın indisini, b ise bu kayıttan itibaren kaç kayıt alınacağını belirlemek için kullanılır.

Php 'de çıktı tamponu (output buffer) kullanımı

Normalde herhangi bir php kodu çalıştırdığınızda oluşan çıktı işlem anında tarayıcıya gönderilir ve bu şekilde kodun çalışmasının bitmesi beklenmeden çıktı verilmeye başlanmış olur. Ama bazı durumlarda çıtının hemen gönderilmesini istemeyiz. Örneğin, içeriği oluşturduğumuz kodun sonunda yaptığımız bir kontrol ile o ana kadar üretilen çıktının ne biçimde kullanılacağı, yada gösterilip gösterilmeyeceği gibi durumlara karar vermek isteyebiliriz. Yada sayfanın bir yerinde oluşturduğumuz çıktıyı başka bir yerde kullanmak isteyebiliriz. Bu örneklere bütün sayfa içeriğinin en başta oluşturulup daha sonra istediğimiz bir biçimde (sayfa şablonu kullanımı vb durumlar için ) kullanıcıya aktarılmasını da ekleyebiliriz. Bu gibi durumlarda çıktı tamponlama kullanabiliriz. Php 'de bunu gerçekleştirmek için çıktı tamponlaması yapılır.

Çıktı tamponu oluşturmak için öncelikle çıktının başladığı noktayı belirtmemiz gerekir. Bunun için ob_start işlevi kullanılır. Çoğunlukla bu işlevin parametreleri kullanılmaz. Çıktıyı sonlandırmak için ise kullanılabilecek çeşitli işlevler vardır. Çıktıyla ne yapmak istediğimize göre bunlardan birini kullanırız. Örneğin çıktıyı herhangi bir işlemden geçirmeden olduğu gibi aktarmak için ob_flush yada ob_end_flush işlevlerini kullanabilirsiniz. ob_end_flush işlevi çıktıyı istemciye gönderip çıktı tamponunu sonlandırır. ob_flush ise aynı işlevi çıktı tamponunu sonlandırmadan gerçekleştirir. (Ayrıca php kodunun çalışması bittiğinde çıktı sonlanmış olur ve çıktı istemciye verilir yani herhangi bir hata durumunda veya işlem bittiğinde eğer çıktı tamponunda çıktı kalmışsa istemciye gönderilir.)

Çıktıyı istemciye vermek yerine içeriğini alıp istediğimiz gibi kullanabiliriz. Bunun için ob_get_contents yada ob_get_clean işlevlerini kullanabilirsiniz. ob_get_contents işlevi çıktı tamponunun içeriğini döner. ob_get_clean ise bununla birlikte çıktı tamponunu sonlandırır. ob_get_clean işlevini çağırmak, ob_get_contents kullanıp ardından ob_clean işlevini kullanmakla aynı işlevi görür.

Çıktı tamponlaması yaparken kullanabileceğiniz bazı yardımcı işlevler de bulunmaktadır. Örneğin ob_get_length işlevi çıktı tamponundaki verinin uzunluğunu döner. ob_get_level işlevi ise mevcut tamponun derinlik seviyesini döner (İçiçe çıktı tamponları başlatabilirsiniz). ob_get_status işlevi de çıktı tamponunun durumu hakkında bilgiler içeren bir dizi döner.

Çıktı tamponu sisteminin çok kullandığı bir durum da kodun herhangi bir yerinde url yönlendirmesi yapılan kodlardır. Yönlendirme yapmak için header işlevi kulanılır ve bu işlev ile çıktının başlık bilgileri düzenlenir. Ancak bu düzenlemeyi yapabilmek için önceden istemciye herhangi bir çıktının verilmemiş olması gerekir. Eğer yönlendirme yapılan çağrıya kadar herhangi bir çıktı verilmişse başlık bilgisinin zaten gönderilmiş olduğunu belirten bir hata mesajı alırsınız. Eğer kodunuzun başında çıktı tamponu başlatırsanız ve yönlendirme yapılan çağrıya kadar herhangi bir çıktı vermezseniz böyle bir hatayla karşılaşmazsınız ve yönlendirme gerçekleşir.

Çıktı tamponlamanın (output buffering) kullanıldığı birçok başka durumla karşılaşabilirsiniz. Çıktı tamponlamayla ilgili php işlevlerinin listesi için:

http://tr2.php.net/manual/en/ref.outcontrol.php

JSON veri biçimi (JavaScript Object Notation)

JSON (JavaScript Object Notation) hafif bir veri değişim biçimidir. Javascript dili üzerine oluşturulmuştur ancak bugün birçok programlama dilinde kullanılmaktadır.

Temel mantık olarak XML 'e benzer ancak XML 'de olduğu gibi imler kullanılmaz. Bu yüzden daha hafif bir yapıya sahiptir ve bu özelliğiyle tercih sebebi olmaktadır. Json biçiminin bir avantajı da yapı olarak programlama dilleriyle uyum içinde olmasıdır. En başta javascript olmak üzere C türevi dillerde kullanılmak üzere uygun bir yapıya sahiptir. Json hakkında ayrıntılı bilgiye http://www.json.org/json-tr.html adresinden ulaşabilirsiniz.

Aşağıda örnek bir json verisi verilmektedir:

{
    "menu": {
        "id": "file",
        "value": "File",
        "popup": {
            "menuitem": [
                {"value": "New", "onclick": "CreateNewDoc()"},
                {"value": "Open", "onclick": "OpenDoc()"},
                {"value": "Close", "onclick": "CloseDoc()"}
            ]
        }
    }
}

Günümüzde bu iki yapı (xml ve json) veri aktarımında sıkça kullanılmaktadır. Json biçiminde xml 'de olduğu gibi imler kullanılmadığı için veri daha az yer kaplar. Çok miktarda veri aktarımı yapılan uygulamalarda json ile xml arasındaki boyut farkı daha belirgin olmaktadır.

Json yapısını kullanırken (kodlama ve açma işlemleri için) dönüştürücü işlevlere ihtiyaç duyarsınız. Bunun için php dilinde json_encode ve json_decode işlevleri kullanılır. Javascript dilinde ise herhangi bir kütüphaneden bağımsız dönüştürme işlevleri bulabileceğiniz gibi Jquery gibi bir kütüphane için yazılmış eklentiler de kullanabilirsiniz. Ama veriyi javascript kodunuzda kendiniz oluşturuyorsanız doğrudan json yapısını kullanabilirsiniz. Bu durumda dönüştürme yapmanıza gerek yoktur.

Php ile json_encode kullanarak bir veriyi dönüştürdüğünüzde tek satırlık bir json veri yapısı elde edersiniz. Json verisini girintili olarak rahat okunabilir bir biçimde elde etmek için bu amaçla yazdığım aşağıdaki işlevi kullanabilirsiniz.

function format_json_line($json){
  $json = str_split($json);
  $formatted = '';
  $level = 0;

  foreach($json as $char){
      $after="";
      $before="";
      $tabs="";
      if($char=='{'){
          $level++;
          $after="n";
          for($i=0;$i<$level;$i++){
              $after.="t";
          }
      }
      if($char=='}'){
          $before="n";
          $level--;
          for($i=0;$i<$level;$i++){
              $before.="t";
          }
      }
      if($char==','){
          $after="n";
          for($i=0;$i<$level;$i++){
              $after.="t";
          }
      }
      $formatted.=$before.$char.$after;
  }
  return $formatted;
}

Php 'de Mysql kullanımı

Php gibi sunucu taraflı bir dil kullanılan sitelerin çoğu veri depolamak için bir veritabanı sistemi kullanır. Şu an kullanımda olan çeşitli veritabanı sunucuları arasında php ile birlikte en sık kullanılanı MySQL dir. Bu yazıda php kodları ile nasıl mysql sunucusuna bağlanıp sorgu işlemleri gerçekleştireceğinizi ilgili işlevleri açıklayarak örneklerle anlatmaya çalışacağım. Mysql ile ilgili ayrıntılı bilgiye MySQL in resmi sitesi olan www.mysql.com 'dan ulaşabilirsiniz. Ayrıca php.net de bu konuda açıklayıcı bilgi veren ve ilgili php işlevlerini liste halinde görebileceğiniz http://tr2.php.net/mysql adresini kaynak olarak kullanabilirsiniz.

Php ile mysql işlemleri gerçekleştirebilmemiz için ilk önce mysql sunucusuna bağlanmamız gerekir. Bunun için mysql_connect işlevini kullanırız:

$link = mysql_connect($server, $username, $password);

Bu ifadedeki parametrelerimiz sırasıyla sunucu adresi, veritabanı kullanıcı adı ve şifremizdir. mysql_connect işlevi elde edilen bağlantıya ait bir kaynak döner ancak çoğu zaman bunu kullanmaya ihtiyaç duymayız. Ancak aynı kod içinde birden fazla veritabanına eşzamanlı olarak bağlantı sağlamak istiyorsak varsayılan olarak en son yapılan bağlantı kullanıldığı için bunun haricindeki bağlantılarla ilgili sorgulamalarda ilgili kaynak değişkenini kullanırız. Çoğu zaman böyle bir durumla karşılaşmazsınız. Bağlantının başarısız olması durumunda dönüş değeri FALSE olur.

Bağlantı sağlandıktan sonra ilk yapmamız gereken veritabanı seçimi yapmaktır. Bunun için mysql_select_db işlevini kullanırız.

bool mysql_select_db ( string $database_name [, resource $link_identifier ] )

Zorunlu olan tek parametre veritabanı adıdır. İkinci parametre ise kullanmak istediğimiz bağlantıya ait kaynak bağlantı değişkenidir. Bu işlev de başarılı olma durumunda TRUE , hata durumunda FALSE değerini döner.

Veritabanı seçimi de başarıyla tamamlandığında artık sorgulama yapabiliriz. Bunun için ise mysql_query işlevi kullanılır.

resource mysql_query ( string $query [, resource $link_identifier ] )

Bu işlevi bir örnekle açıklayalım:

$sonuc = mysql_query("SELECT * FROM `uyeler` WHERE `id`=12 ");

Bu ifadeyle uyeler tablosunda id değeri 12 olan kaydı elde etmek üzere sorgulama yapıyoruz. Birden fazla bağlantı açtığımız özel bir durum olmadığı sürece ikinci parametreyi kullanmaya ihtiyacımız olmayacak. Bu işlev ile sorgudan elde edilen sonucu bir değişkene kaydediyoruz. Bu sonuç değişkeni sorguyla elde ettiğimiz kayıtları toplu halde içerir ve bu kayıtları sırayla elde etmek için kayıt getirme işlevlerinden birini kullanırız. Bunlar mysql_ fetch_ row, mysql_ fetch_ assoc, mysql_ fetch_ array ve mysql_ fetch_ object işlevleridir. Bu işlevlerin herbiri sonuç verimizin içinden bir kayıt satır çeker.

Elde etmek istediğimiz satırı
mysql_fetch_row işleviyle sayısal indisli bir dizi olarak,
mysql_fetch_assoc işleviyle tablodaki sütun adlarıyla ilişkili bir dizi olarak,
mysql_fetch_array işleviyle ister sayısal, ister ilişkisel, ister her iki türde indisli bir dizi olarak,
mysql_fetch_object işleviyle ise sütun adlarında değişkenlere sahip bir nesne olarak
elde ederiz.

mysql_fetch_assoc işlevi ile bir örnek gösterelim:

$satir = mysql_fetch_assoc($sonuc);
$kullanici_adi = $satir['kullanici_adi'];
...

Bu şekilde elde ettiğimiz satırın sütunlarına erişebiliriz. mysql_fetch_object işlevini kullanmış olsaydık kullanıcı adını

$kullanici_adi = $satir->kullanici_adi ;

şeklinde bir nesne öğesi olarak elde edecektik. Birden fazla kayıt elde etmek için ise aşağıdaki gibi bir döngü kullanabiliriz:

while($satir = mysql_fetch_assoc($sonuc) ){
    echo 'Kullanıcı adı: '.$satir['kullanici_adi'];
}

Sorgu sonucuna ait bütün satırlar bittiğinde mysql_fetch_assoc (yada diğer işlevlerden biri) FALSE döneceğinden döngü sona erecektir. Bu şekilde elde ettiğimiz verileri istediğimiz şekilde kullanabiliriz.

Sorgu sonucuna ait veriyi serbest bırakmak için mysql_ free_ result işlevini kullanabilirsiniz. Ama bunun yerine aynı sonuç değişkenini başka sorgularda da kullanabilirsiniz.

Bağlantıyı bitirmek istediğinizde mysql_ close işlevini kullanabilirsiniz. Bu genelde pek kullanılmaz çünkü kodun çalışması sona erdiğinde bağlantı zaten kesilecektir.