Javascript tabanlı kod renklendirme (Syntax Highlighter)

Daha önceki sitemde verdiğim kodları renklendirmek için fck düzenleyicisine eklenen bir geshi eklentisi kullanmıştım. Ancak geshi renklendirme (syntax highlighting) işlemini sunucu tarafında yaptığı için istemci tarafında çalışacak javascript tabanlı bir araç aramaya başladım. Sonunda şunu buldum:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Eski kodların bazılarını bu sisteme dönüştürdüm. Kalanları da zamanım oldukça sırayla değiştirmeyi düşünüyorum. Blogger sunucuya dosya yüklemeye izin vermediği için gereken dosyaları eklentinin kendi sitesinden kullanıyorum. Eğer siz de bu sistemi kullanmak istiyorsanız blog şablonunuz içine head imleri arasına aşağıdaki gibi bir ekleme yaparak bu aracı uygulayabilirsiniz. Eğer dosyaları kendi sunucunuzda barındıracaksanız adres değerlerini sitenize göre değiştirmelisiniz.
[html]
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'/>
[/html]
[html]<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
[/html]
Bu araç çok sayıda programlama dilinde yazılmış kaynak kod için renklendirme yapabiliyor. Ben sadece kullanma ihtimalim olan bazı diller için gerekli dosyaları dahil ettim. Blogger için kullanılacaksa benim yaptığım gibi bloggerMode ayarının etkinleştirilmesi gerekiyor. Bu aracın kullanımı için kaynak kodu pre imleri içine yazıyoruz ve örneğin javascript renklendirmesi için pre imine class="brush: js" şeklinde sınıf veriyoruz:
[html]
<pre class="brush: js">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</pre>
[/html]
Bu kod sonuçta aşağıdaki gibi görünür:
[js]
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
[/js]

Ücretsiz alanadı hizmeti

Ücretsiz olarak bir alan adı almak isteyenler için bir hizmet tavsiye etmek istiyorum. Bu hizmet ile ücretsiz olarak co.cc uzantılı bir alan adına sahip olabilirsiniz. Ayrıca alan adınız üzerinde tam dns kontrolüne sahip olacaksınız. Yani istediğiniz sunucudaki siteniz için yeni adresinizi kullanabilirsiniz. Url yönlendirme yapabilirsiniz. Hatta alan adınızla ilgili Cname, A, Mx gibi gelişmiş ayarları da kontrol edebilirsiniz. Hizmeti denemek için bir alanadı aldım ve hiçbir sorun göremedim. Eğer istediğiniz alanadının boşta olup olmadığını kontrol etmek isterseniz aşağıdaki formu kullanabilirsiniz.

Jquery ile sekmeler oluşturmak

Birçok web sayfasında sayfa yenilenmeden geçiş yapılan sekmeler görmüşsünüzdür. Bunlar basitçe javascript ile yapılabilir. Bu yazımda size jquery ile basit bir şekilde nasıl sekmeler oluşturabileceğinizi bir örnekle göstereceğim. Aslında sekmeler aynı sayfada bulunan ancak biri görünür olduğunda diğerleri gizli hale getirilen sayfa öğelerinden ibarettir. Yani örnek olarak bir sayfada ardarda oluşturduğunuz div öğelerinden birini gösterip diğerlerini gizleyerek ve bu işlemi sekme başlıklarının tıklanmasıyla tetikleyerek basit bir sekme sistemi oluşturmuş olursunuz.

İlk önce sekmeler için kullanacağımız css sınıflarını, sekme başlıklarını ve sekme içeriklerini oluşturalım:
[xml]
<style type="text/css">
.sekme_baslik{border:2px solid gray;cursor:pointer;}
.aktif_sekme_baslik{border:2px solid red;}
.sekme_icerik{border:1px dashed gray;}
</style>
<div>
<span id="sekme_1">Sekme 1</span>
<span id="sekme_2">Sekme 2</span>
<span id="sekme_3">Sekme 3</span>
</div>

<div id="sekme_1_icerik">
Sekme 1 içeriği
</div>
<div id="sekme_2_icerik" style="display:none;">
Sekme 2 içeriği
</div>
<div id="sekme_3_icerik" style="display:none;">
Sekme 3 içeriği
</div>
[/xml]



İlk sekme içeriği haricindeki sekme içeriklerinin gizlendiğine dikkat edin. Şimdi de sekmeleri aktif hale getirecek javascript kodumuzu yazalım:
[js]
$(function(){
$(".sekme_baslik").click(function(){
// önce seçilen sekme dışındaki tüm sekme başlıklarından aktif_sekme_baslik sınıfını kaldırıyoruz
$(".sekme_baslik").not($(this)).removeClass("aktif_sekme_baslik");
// seçilen sekme başlığına aktif_sekme_baslik sınıfını ekleyelim
$(this).addClass("aktif_sekme_baslik");
// seçilen sekme başlığının id değerini alıp bu değere "_icerik" ilave ederek içerik div öğesinin idsini bulalım
var icerik_id = $(this).attr("id") + "_icerik";
// içerik sekmemizi nesne olarak kaydedelim
var $sekme = $("#"+icerik_id);
// şimdi de göstermek istediğimiz sekme dışındaki sekmeleri gizleyelim
$(".sekme_icerik").not($sekme).hide();
// ve son olarak göstermek istediğimiz seçilen sekmeyi gösterelim:
$sekme.show();
});
});
[/js]



Bu basit bir sekme örneğiydi. Elbette Sekme başlıkları ve içerik için istediğiniz gibi css biçimlendirmesi uygulayarak sekmelerin daha gerçekçi görünmesini sağlayabilirsiniz.

Xml verisini diziye dönüştürmek

Geçenlerde yazdığım bir XML dönüştürme sınıfını sizlerle paylaşmak istiyorum. Bu sınıf ile xml verisini parametre olarak kullanarak ağaç yapısında bir dizi elde edebilirsiniz.

XML Parser (XML to array) : http://www.phpclasses.org/browse/package/4954.html

Bu sınıfı kullanırken xml verisini iki şekilde aktarabilirsiniz:

1. XML verisini yapılandırıcı parametresi olarak kullanıp ardından parse() işlevini çağırarak:
   [php]
   $parser = new XmlParser($xml_input);
   $result = $parser->parse();
   [/php]


2. Sınıfı parametresiz oluşturup parse() işlevine parametre olarak xml verisini aktararak:
   [php]
   $parser = new XmlParser();
   $result = $parser->parse($xml_input);
   [/php]

Elbette bu sınıfın hataları, eksikleri olabilir. Hata/eksiklik vs. bulduğunuzda bana bildirebilirsiniz.

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.

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           )   ))

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.