16 Kasım 2008

Firebug ile hata ayıklama

Her yazılım alanında olduğu gibi web programlamada da hata ayıklama programcı için önemli bir süreçtir. Bu yazımda hata ayıklama sürecini geliştiriciler için kolaylaştırmak için kullanabileceğiniz Firebug eklentisinden bahsetmek istiyorum. Bu eklenti firefox tarayıcısı için geliştirilmiştir ve şu adresten kolayca indirip kurabilirsiniz: https://addons.mozilla.org/en-US/firefox/addon/1843 . Firebug 'ın IE, Opera, ve Safari için kullanabileceğiniz bir Lite sürümü de vardır ancak bunun firefox için geliştirilen orjinal eklenti kadar iyi olduğunu sanmıyorum.

Firebug ile tarayıcıyı ilgilendiren her kod üzerinde hata ayıklama ve izleme yapabilirsiniz. Yani izlediğiniz sayfada bulunan Html, Css ve Javascript kodlarını düzenleyip değişiklikleri eşzamanlı olarak görebilirsiniz. Ayrıca firebug ile sunucuya yapılan çağrıları da (post/get) izleyebilirsiniz. Aşağıda firebug eklentisinin örnek bir görüntüsü bulunuyor. Eklentiyi kurduktan sonra firebug 'ı açmak için tarayıcının sağ alt köşesindeki firebug böcek resmini tıklayabilir yada F12 tuşunu kullanabilirsiniz.

Firebug 'ı ister yeni bir pencerede ister tarayıcının alt kısmında çalıştırabilirsiniz.Css sekmesini kullanarak sayfanızdaki öğelerin biçimlendirmesini anlık olarak değiştirebilirsiniz. Net sekmesini kullanarak sayfanızın yaptığı çağrıların tümünü ms cinsinden yüklenme zamanlarıyla ve ayrıntılı başlık ve yanıt bilgileriyle izleyebilirsiniz. Ayrıca Javascript sekmesini kodlarınızı düzenleyebilir ve hata ayıklama işlemleri yapabilirsiniz. Bununla birlikte performans ölçümü yaparak kodlarınızın nerede tıkandığını görebilirsiniz. Sayfanızın işleyişi boyunca herhangi bir hata oluştuğunda tarayıcı pencerenizin sağ alt köşesinde oluşan hata sayısıyla birlikte bir uyarı görürsünüz. DOM sekmesini kullanarak sayfanızın nesne yapısını inceleyebilirsiniz. Firebug 'ın ilginç bir özelliği de doğrudan javascript kodu çalıştırabilmenizdir. Bunu yapmak için konsol sekmesini açıp en altta çıkan ve başında >>> bulunan satırı kullanabilirsiniz. Ayrıca bu satırın en sağındaki ok işaretini kullanarak kod yazabileceğiniz bölümü genişletebilirsiniz. Özet olarak Firebug bir geliştirici olarak karşılaşabileceğiniz hataları bulup düzeltmek için kullanışlı bir araçtır.

11 Kasım 2008

Doğrusal diziyi ağaç yapısına dönüştürme

Php gibi sunucu taraflı dillerin ilk ortaya çıkan kullanım alanları muhtemelen form verilerini işlemektir. Bunlara iletişim formları ve çeşitli kayıt formlarını örnek verebiliriz. Ancak formların kullanımı bunlarla sınırlı değildir. Karmaşık veri yapılarını oluşturmak üzere kullanıcıdan giriş kabul etmek amacıyla da form girişi istenebilir. Böyle durumlarda karşılaşabileceğiniz bir sorun doğrusal bir dizi olarak elde ettiğiniz veriyi ($_POST, $_GET, $_REQUEST dizileri) kullanmak için önce bu diziyi yapısal bir halde sınıflandırmaktır. Özellikle kullanıcının giriş yapacağı formda javascript ile yeni alanlar eklemesine izin verecekseniz bu dizi daha da uzun ve karmaşık bir hal alacaktır. Bu sorunla başa çıkmayı kolaylaştırmak üzere bir işlev yazmaya karar verdim:
[php]
function array2tree($arr,$seperator='->')
{
$arr2 = array();
foreach($arr as $key=>$value){
$root = &$arr2;
$levels = explode($seperator,$key);
$n = count($levels);
$i = 0; foreach($levels as $level){
$i++;
if( !isset($root[$level])){ //seviye daha önceden tanımlı değilse
if($i==$n)//hedef seviye ise değeri aktar
$root[$level]=$value;
else //hedef seviye değilse dizi olarak tanımla
$root[$level]=array();
}
$root = &$root[$level];
}}
return $arr2;
}
[/php]
Bu işlev, adından da tahmin edeceğiniz gibi doğrusal olarak verilen bir diziyi yapısal bir dizi halinde dönüyor. Ancak bu işlevi kullanmak için dizinizdeki elemanların sayısal değil ilişkisel indisli (associative array) olması gerekiyor. Eğer bu işlevi giriş paragrafında açıkladığım örnekteki gibi form verisi üzerinde kullanacaksanız zaten bu koşulu sağlamış olursunuz. Bu durumda dizimizin anahtar değerleri formdaki name değerleri olacaktır. Örnek olarak aşağıdaki şekilde bir $_POST verimiz olduğunu varsayalım.
[php]
$_POST = array(
"type"=>"list",
"children->child1->name"=>"eleman 1",
"children->child1->value"=>12,
"children->child2->name"=>"eleman 2",
"children->child2->value"=>56
);
[/php]
Anahtar değerlerine yani form elemanlarının isimlerine dikkat edin. İsimlendirme yapılırken bazı elemanlarda -> ayracının kullanıldığını görürsünüz. Şimdi bu dizi üzerinde array2tree işlevini çalıştıralım ve sonucu print_r işlevi ile gösterelim:
print_r( array2tree( $_POST ) );

Bu çağrıyı yaptığınızda aşağıdaki sonucu elde edersiniz. İsimleri -> ayracı ile ayrılan elemanların alt öğeler haline geldiğini görüyorsunuz. children->child2->value elemanı children dizisi içindeki child2 dizisinin value elemanına dönüşmüştür. İşlevde varsayılan ayraç olarak -> kullanıldı ancak ikinci parametreyi kullanarak istediğiniz ayracı kullanabilirsiniz.
Array(   [type] => list   [children] => Array   (       [child1] => Array           (               [name] => eleman 1               [value] => 12           )       [child2] => Array           (               [name] => eleman 2               [value] => 56           )   ))

2 Kasım 2008

Php ile Javascript arasında veri aktarımı

Daha önce bir yazımda json veri yapısından bahsetmiştim. Bu yazımda da php ile javascript arasında bilgi aktarımının nasıl yapılabileceğini bir örnekle açıklamaya çalışacağım. Önce javascriptdeki nesne yapısından bahsedeyim. Javascriptte bir nesne şu şekilde tanımlanabilir:


obj = new Object;

Şimdi de bu nesneye bazı öğeler ekleyelim:


obj.x = 1;
obj.y = 2;

Bu iki ifadeyle nesnemize x ve y adlarında iki değişken eklemiş olduk. Bu örnekte sınıf kullanmadan sadece veri içeren bir nesne oluşturmuş olduk. (Konumuz veri aktarımı olduğu için şimdilik bununla yetiniyorum. Ama tabiki işlevler içeren bir nesne de oluşturabilirsiniz.).

Oluşturduğumuz bu nesneyi Object kelimesini kullanmadan da oluşturabiliriz:


obj = {"x":1,"y":2};

Tanıdık geldi mi? Bu tanımlama aynı nesnenin daha önce bahsettiğim json yapısı ile tanımlanmış halidir. Zaten json kelimesinin açılımı javascript object notation yani javascript nesne gösterimi demektir. Aşağıdaki gibi bir kodla deneme yapabilirsiniz:


obj = {"x":1,"y":2};
alert( "obj.x="+obj.x );
alert( "obj.y="+obj.y );

Bu kod obj nesnesinin x ve y elemanlarını uyarı vererek bildirecektir. İlk gösterdiğim yöntemdeki gibi her eleman için teker teker atama yapmak yerine json tanımlamasını kullanarak nesne oluşturmanın daha kolay olduğunu görüyorsunuz.

Şimdi asıl meselemiz olan php ile javascript arasında veri aktarımına geçebiliriz. Bunun için php 5.2 sürümünden itibaren kurulum gerektirmeden kullanılabilen json_encode ve json_decode işlevlerini kullanabiliriz. Bu işlevler adlarından tahmin edeceğiniz gibi sırasıyla veriyi json biçiminde kodlayan ve kodlanmış halini php veri yapısına çeviren işlevlerdir. json_decode işlevinin kullanımına bir örnek verelim:

$json_data = '{"x":1,"y":2}';
$php_data = json_decode($json_data);
print_r($php_data);

Burada basitçe json verimizi bir değişkene atayıp json_decode işlevini uygulayarak elde ettiğimiz veriyi (nesneyi) print_r ile yazdırıyoruz. Bunun sonunda şu çıktıyı elde ederiz:

stdClass Object
(
[x] => 1
[y] => 2
)

Tahmin edeceğimiz gibi standart bir php nesnesi elde ettik. Sınıfın türü hariç aynı sonucu veren bir php kodu şu şekilde olur:

class Obj{
var $x=1;
var $y=2;
}
$obj = new Obj();
print_r($obj);

Bunun çıktısı da yukarıdaki gibi olur ancak nesnemiz kendi tanımladığımız Obj sınıfından oluşturulduğu için stdClass yerine Obj adını görürsünüz.

Hazır gelmişken bu kez de tersten gidelim ve oluşturduğumuz bu Obj nesnesini json_encode ile kodlayarak bir json çıktısı elde edelim:

class Obj{
var $x=1;
var $y=2;
}
$obj = new Obj();
$json_data = json_encode($obj);
echo $json_data;

Bu kodu çalıştırarak en baştaki javascript kodumuzda obj nesnesini oluştururken kullandığımız json nesnesini elde ederiz:

{"x":1,"y":2}

Artık json dönüşümlerinin nasıl yapıldığını biliyorsunuz. Ancak hala php ve javascript arasında nasıl veri aktarımı yapılacağından bahsetmedik. Aslında bunun nasıl yapılacağı sizin ihtiyaçlarınıza ve aktarımın hangi yönde (php 'den javascript 'e yada javascript 'den php 'ye ) olacağına bağlıdır. Önce php'den javascript'e yapılan bir aktarım örneği verelim:

<?
$php_data_1 = array( 'a',1,'php','json',2008 );
$php_data_2 = array( 'a'=>1, 'b'=>2, 'c'=>'php', 'd'=>'javascript' );

$json_data_1 = json_encode($php_data_1);
$json_data_2 = json_encode($php_data_2);
?>
<script type="text/javascript">
var nesne_1 = <?=$json_data_1?> ;
var nesne_2 = <?=$json_data_2?> ;
</script>

Bu kodun çıktısı şöyle olur:
var nesne_1 = ["a",1,"php","json",2008] ;
var nesne_2 = {"a":1,"b":2,"c":"php","d":"javascript"} ;

Bu örnekte php tarafında iki adet dizi tanımladık ve bunları json_encode ile kodlayarak javascript kodumuzdaki javascript değişkenlerine atama yapılacak şekilde kullandık. Burada fark edeceğiniz gibi birinci json verisi bir dizidir (öğeler köşeli parantezler içinde) ancak ikincisi nesnedir (öğeler küme parantezleri içinde). Bunun nedeni php'deki array verisinin isimli anahtar değerlerinden oluşması halinde (associative array) aslında bir çeşit nesne olmasıdır. Yani herhangi bir sınıftan türetmediğimiz halde ikinci dizimiz aslında bir nesnedir.

Yukarıdaki örnekte php ile tanımladığımız veriyi javascript koduna aktarmış olduk. Şimdi de bunun tersine, yani javascript ortamından php ortamına (sunucuya) verinin aktarılmasına geçelim. Bu aslında öncekinden daha zordur çünkü öncelikli olarak işlenen kod sunucuda çalıştırılan php kodlarıdır. Javascript kodları ise sunucunun tarayıcıya verdiği çıktının yorumlanması ile çalıştırılır. Önceki örneğimizdeki aktarım yönü bu sıraya uygundu ancak şimdi tarayıcıda oluşturulan yada işlenen verinin sunucuya aktarılması gerekiyor. Bunun için ya json kodunu bir karakter dizisi (string) olarak sunucuya gönderip sunucuda bu veriyi json_decode ile açarız yada veriyi ajax ile POST yada GET yöntemlerinden biriyle gönderip sunucuda $_POST, $_GET yada $_REQUEST ile erişebiliriz. Yada daha karmaşık veri aktarım durumlarında bu ikisinin bir karışımını kullanarak verinin bazı öğelerini parametrelere ayırıp post/get elemanları olarak göndeririz, bir kısmını da json olarak paketleyip yine bu parametrelerden biri olarak aktarabiliriz.

Javascript 'den php 'ye (genel olarak tarayıcıdan sunucuya) veri aktarımı yapılırken sayfanın yenilenmesini istemiyorsak AJAX (Asynchronous JavaScript and XML) kullanmamız gerekiyor. Bu konuyu ise başka bir yazıya bırakıyorum.

1 Kasım 2008

Google Chrome web tarayıcısı

Google 'ın Chrome adında yeni bir internet tarayıcısı yayınladığını belki duymuşsunuzdur. Bu tarayıcının bana (ve başka web yazılımcılarına) göre ilk dikkat çeken özelliği diğer tarayıcılara göre üstün bir javascript yorumlama hızına sahip olması. Bu konuda diğerlerinden farkı javascript kodlarını önce derleyip (V8 adını verdikleri javascript makinası ile) sonra çalıştırıyor olması. Bunun yanında adres çubuğuna (tarayıcı geçmişinden değil google 'dan alınan verilerle) adres önerileri sunması farklı bir özellik olarak öne çıkıyor. Ayrıca çökme kontrolü, gizli sekme özelliği gibi yeniliklerle henüz tam sürümü çıkmamış olmasına rağmen gayet iddialı bir çıkış yapmış gibi görünüyor.

Aşağıda google 'ın Chrome ile ilgili açıklamasını bulabilirsiniz:

Bizler Google'da zamanımızın büyük bir kısmını bir Internet tarayıcısı kullanarak geçiriyoruz. Aynı tarayıcıda arama yapıyor, chatleşiyor, e-posta gönderip alıyor ve birlikte çalışıyoruz. Herkes gibi biz de boş zamanlarımızda alışveriş yapıyor, banka hesabımızı kontrol ediyor, haberlere göz gezdiriyor ve arkadaşlarımızla konuşuyoruz. Bütün bu işlemler için de bir tarayıcı kullanıyoruz. İnsanlar her geçen gün zamanlarının daha büyük bir kısmını Internet'te geçiriyor ve 15 yıl öncesinde Internet'in ilk günlerinde akla hayale gelmeyecek şeyler yapıyor.

Internet'te bu kadar uzun zaman geçirdiğimizi gördükçe eğer sıfırdan bir tarayıcı yaratılsa nasıl olurdu diye düşünmeye başladık.

Fark ettik ki Internet, basit metin sayfalarından gelişerek zengin ve interaktif uygulamaların olduğu bir yer haline gelmişti ve bu nedenle geliştireceğimiz Internet tarayıcısını sil baştan düşünmemiz gerekiyordu.

Artık ihtiyacımız olan sadece bir tarayıcı değil, web sayfaları ve uygulamaları için modern bir platformdu ve biz de bu amaçla yola çıktık.

Çalışmalarımızın sonunda yeni bir açık kaynaklı Internet tarayıcısının beta versiyonunu yayınlıyoruz: Google Chrome.

Dışarıdan bakıldığında akıcı ve basit bir tarayıcı bir tasarladık. Bir çok insana göre Internet tarayıcısı önemli olmayan, sadece web sayfalarını ve uygulamalarını çalıştırmak için kullandığımız bir araçtır. Klasik Google ana sayfası gibi Google Chrome da hızlı ve sade. Yolunuzdan çekiliyor ve sizi gitmek istediğiniz yere götürüyor.

Yakından incelendiğinde, günümüzün karmaşık Internet tabanlı uygulamalarını çok daha iyi çalıştıran bir Internet tarayıcısının temellerini atmayı başardık. Her bir sekmeyi ayrı bir "sandbox"ta tutarak bir sekmenin diğer bir sekmeyle çakışmasını engelleyip sakıncalı web sitelerine karşı çok daha gelişmiş bir koruma sağladık. Hızı ve yanıt verebilirliği arttırdık ve ayrıca günümüz tarayıcılarında kullanımı mümkün olmayan yeni nesil internet uygulamalarını desteklemesi için daha güçlü bir JavaScript makinası olan V8'i kurduk.

Bu daha sadece başlangıç, Google Chrome varacağı noktadan çok uzak. Bu Windows için uyumlu beta versiyonunu daha geniş bir tartışma başlatmak ve en yakın zamanda sizin fikirlerinizi öğrenmek için yayınlıyoruz. Mac ve Linux uyumlu versiyonlarını da hayata geçirmek için çalışıyoruz ve Google Chrome'u çok daha hızlı ve güçlü hale getirmek için çalışmaya devam edeceğiz.

Açık kaynak projelere çok şey borçluyuz ve onların yolundan devam ediyoruz. Apple'ın WebKit ve Mozilla'nın Firefox bileşenlerinden faydalandığımız kaynaklardan sadece ikisi ve biz de bütün kodlamamızı açık kaynak yapıyoruz. Internet'in ilerlemesi için bütün açık kaynak (yazılım) topluluğu ile birlikte çalışmayı umuyoruz.

Internet artan seçenekler ve yenilikler ile sürekli gelişiyor. Google Chrome da yeni bir seçenek ve umuyoruz ki Internet'in daha da gelişmesine katkıda bulunacak.

Bu kadar anlatmak yeter. En iyisi bir de siz kendiniz Google Chrome'u test edin.

Kripto paralar hakkında

Kripto paralar, merkezi olmayan, şifrelenmiş ve dağıtılmış bir veritabanı olan blok zinciri teknolojisi kullanılarak oluşturulan dijital par...