Web site yönetim paneli yazılımı

Web sitesi yönetimi özellikle de tamamen kontrolü elinde bulundurmak istediğiniz özel bir cms sahibi olmak istediğiniz zamanlarda karmaşık hale gelebilir. Bir web yazılımcı olarak kendi geliştirdiğim web site yönetim paneli yazılımını kullanıyorum ve bu şekilde şimdiye kadar birçok müşterim için ihtiyaçlar doğrultusunda web site yönetim ihtiyacını karşılayacak şekilde özel bir yönetim paneli geliştirme konusunda hizmet sağlıyorum. Bazı müşterilerim beğendikleri hazır bir tema kullanmayı tercih ederken bazı müşterilerim ise özel bir tasarım yaptırmayı tercih ediyorlar. Her iki durumda da arayüzün bana teslim edilmesiyle birlikte müşteri ihtiyaçlarını analiz ederek kullanımı kolay ve pratik bir şekilde web sitesine ait içeriklerin ve verilerin yönetilebileceği bir yönetim paneli hazırlayıp ön yüz yazılımını da yaparak müşterilerime teslim ediyorum.

Aşağıdaki videoda yönetim paneli yazılımının kullanıldığı örnek kullanımı izleyebilirsiniz. Bu sadece örnek bir proje olup yönetim paneli yazılımında müşterilerime daha farklı türlerdeki içerik ve veri yönetimini yapabilecekleri şekilde yönetim alanları mevcuttur ve her projeye göre özel olarak ayarlanmaktadır.

Eğer siz de web sitesi projeniz için yönetim paneli sahibi olmak ve statik web sitesinizi yönetim panelli dinamik bir web sitesi haline getirmek yada beğendiğiniz bir tema ile yeni bir web sitesi sahibi olmak yada sitenizi yenilemek isterseniz yandaki iletişim formu ile bana ulaşabilir ve teklif alabilirsiniz.


Website admin panel

Google Chrome sayfa üzerinde metin düzenleme (Caret navigation)

Uzun zaman önce başka bir tarayıcıda (firefox yada ie olabilir) kullandığım doğrudan açık olan web sayfası üzerinde imleç ile hareket etme özelliğine google chrome için de ihtiyacım oldu. F10 gibi bazı kısayollar denedim ancak bulamadım. Googleda bir arama yaparak bu özelliğe caret navigation denildiğini öğrendim. Üstelik bu özellik sadece imleç ile gezinme değil aynı zamanda sayfa düzenlemeye de yarıyor.

Google chrome için bunun kısayolunu bulamadım ancak javascript konsola girilen bir komut ile bu özellik açılabiliyormuş. F12 ye basarak ardından Console sekmesinde komut olarak şunu girip entera basın:

document.body.contentEditable=true

Bu komutun ardından açık olan web sayfasının üzerinde imleçle gezinebilir hatta yazı yazabilir hale gelmesi gerekiyor. Bu özelliğe tekrar ihtiyacınız olabilir ve her defasında bu komutu çalıştırmak zorunda kalmamak için aşağıdaki bağlantıyı yer işaretleri çubuğuna taşıyabilirsiniz.

Caret ON

Gerektiğinde yer işaretlerindeki bu düğmeyi tıklayarak kolayca caret navigation (imleç gezinme) özelliğini açabilirsiniz.

Jquery ile öğelerin yüksekliklerini eşitleme

Basit bir yöntemle herhangi bir seçiciye ait tüm öğelerin yüksekliklerini şu şekilde eşitleyebilirsiniz:

[js]
var max_h=0;
$('.my_class').each(function(){
var h = $(this).height();
if(h>max_h)
max_h=h;
}).height(max_h);
[/js]

Benzer şekilde height yerine width kullanarak genişlikleri de eşitleyebilirsiniz.

Listedeki bir öğeyi taşıma

Web uygulamalarında liste oluştururken bazen sıralama yapma gereği duyabilirsiniz. Aşağıda bunun için yaptığım basit bir örnek bulabilirsiniz. liste_tasi işlevinde ilk parametre taşıma işlemi için tıklanan öğenin kendisini (this ile nesne aktarımı), ikinci parametre ise taşımanın yönünü belirtir. Yön değeri olarak 1 aşağı taşımak, -1 yukarı taşımak için kullanılıyor. (Bu parametrenin liste öğesinin sıra değerine yapılacak eklemeyi belirttiğini düşünebilirsiniz. Sıralama yukarıdan aşağıya doğru artan yöndedir.)

[html]
<ul>
<li pid="2">Program 2 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
<li pid="1">Program 1 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
</ul>
[/html]

 

[js]
function liste_tasi(t,dir){
var $mevcut = $(t).parent();
var $mevcut_icerik = $mevcut.get();
$mevcut_icerik = $mevcut_icerik[0];

if(dir==-1){
var $diger=$(t).parent().prev("li");
if($diger.length==1){
$mevcut.remove();
$diger.before($mevcut_icerik);
}
}
else{
var $diger=$(t).parent().next("li");
if($diger.length==1){
$mevcut.remove();
$diger.after($mevcut_icerik);
}
}
}
[/js]

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]

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.

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.

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;
}