jQuery, Ajax ve PHP ile dizin içeriğini okumak ve göstermek

jQuery ile yapılabilecek diğer güzel bir uygulama da sunucudaki klasör içeriğinde gezinmek. Uygulamada sunucu tarafındaki dosyaları ve klasör içeriklerini kullanıcı tarafında rahat bir şekilde görebileceğiz. Tüm bunları yaparken Ajax, jQuery kütüphanesini ve PHP dilini kullanacağız.

Yapacağımız uygulamada temel olarak aşağıdaki fonksiyon ve yöntemleri kullanacağız:

• JSON ( JavaScript Object Notation) => içerik kategorileme dilidir. Dizin içerik bilgilerini sunucu tarafında JSON yapısında hazırlayacağız.
• $.getJSON fonksiyonu => jQuery kütüphanesinin sunucudan JSON veri tipinde cevap almaya yarayan ajax fonksiyonu.
• PHP dizin okuma fonksiyonları (dizin içeriği okuma ve dosya isimleriyle ilgili fonksiyonlar)

En son yapacağımız uygulamanın bitmiş haline buradan bakıp nasıl bir şey yapacağımızı görebilirsiniz. Görselliği bakımından önemli olan bir uygulama olacağından uygulamanın kullanıcı tarafındaki kodun ( javascript ) karmaşık işlemlerin basit olması amacıyla jQuery ile yazacağız. Bu yüzden jQuery ile basit uygulamalar yapmış olduğunuzu varsıyıyorum.
İlk olarak XAMPP gibi sunucu paket programlarını kullarak kurmuş olduğunuz sunucunuzun htdocs klasöründe boş bir PHP sayfası yaratalım. GET motodla PHP sayfasına istediğimiz dizin ismini yollayacağız ve yolladığımız dizin ismine göre PHP bize dizin içeriğini JSON datası olarak yollayacak. JSON ile tanışmayanlar için basit bir örnek yapalım:

PHP kodumuz:

<?php
// Datamızı ilk olarak dizi olarak hazırlıyoruz
$JSON_olacak_dizimiz["kitaplar"]=array();
// daha sonra diziye dataları giriyoruz.
array_push( $JSON_olacak_dizimiz["kitaplar"], "Da Vinci Sifresi","Mutluluk","Ferrari'sini Satan Bilge");
echo "JSON verisine çevrilecek  dizimiz<pre>";
print_r($JSON_olacak_dizimiz);
echo "</pre>";
// ve json_encode ile dizimizi <strong>JSON </strong> datasına çeviriyoruz.
echo "<br />JSON verisine çevrilmiş hali: <br /><br />";

echo json_encode($JSON_olacak_dizimiz);
?>

Ve çıktımız:

JSON ile biraz alıştırma yaptıktan sonra uygulamızın ilk kısmına geçelim.

Dizin içeriğini okuyup JSON tipinde çıktı verecek PHP kodumuz (Sunucu tarafı)

Uygulamanın özellikleri şöyle olacak:

• Dizine tıklandığında dizin açılmamış ise dizin içeriği bilgilerini jQuery ile Ajax JSON isteğinde bulunup dizin içeriğini bilgilerini dizinin hemen altında gösterecek.
• Dizine iki tefa tıklandığında dizini kapatacak.
• Dizin açılıp kapanmaları animasyonlu olacak.
• Dizindeki dosyalara tıklandığında dosyayı indirecek. (link olarak gösterecek)

JSON çıktısı üretecek directory.php kodumuz:

<?php
// Tüm dizin içeriğini içerecek dizi
$dircontent=array();
// dizin bilgilerini içerecek dizi
$dircontent["directories"]=array();
// dosya bilgilerini içerecek dizi
$dircontent["files"]=array();
// çalışılan ortamdaki içeriği ifade edecek nokta (.)
$dirname=".";
// dir değişkenin set edilip edilmediğini kontrol et : ( 'directory.php?dir=dizinismi' gibi bir ifade var mı?)
if (isset( $_GET['dir']) )
  // varsa istemediğimiz karakterleri filtreleyip değişkeni al
  $dirname=preg_replace('#[^-a-zA-Z0-9_/]#' ,'',$_GET['dir']);
// dizin içiriğini oku
$dh= opendir($dirname) or die("couldn't open directory");

while( !($file = readdir($dh))=== false )
{
    // dizin olup olmadığını kontrol et
    if (is_dir("$dirname/$file"))
        {
            // '.' , '..' ifadelerini güvenlik açısından kaldırıyoruz.
            // İstemediğimiz içeriklerin görüntelenmesini istemeyiz.
            if ($file!='.' && $file!='..')
            // dizin ise 'directories' dizisine dizin isimlerini gir
            array_push($dircontent["directories"],$file  );
        }
    else
        // dosya ise 'files' dizisine dosya isimlerini gir
         array_push($dircontent["files"], $file );
}
// açılan dizini kapat
closedir($dh);
//açılan dizinin adresini 'current_dir' ismiyle gir
$dircontent["current_dir"]=$dirname;
// Diziyi JSON verisine çevir ve tarayıcaya yolla
echo json_encode($dircontent);
?>

Yazdığımız kodu web browserda test edelim:

Şimdi de dir değişkeni koyarak ‘directories’ dizindeki ‘data’ ismindeki dizini parametre olarak yollayıp tekrat test edelim:

PHP kodumuzun çalıştığını gördükten sonra kullanıcı tarafında çalışmaya başlayabiliriz.

JSON çıktısını okuyup listeleyecek jQuery kodumuzu sayfaya ekleme kısmı (Kullanıcı tarafı)

Buraya kadar anlattıklarımı uygulamanın temelde nasıl çalıştığını anlatmak için yazdım. Yazdığım jQuery kodu uzun olduğu için buraya yazmak yerine direk olarak nasıl kullancağımızı anlatacağım. Fakat her satırına yorum yaptığım için jQuery kodunu açıp yorumlardan inceleyebilirsiniz.

Şimdi oluşturduğumuz html sayfasına ( dizinoku.htm) aşağıdaki satırları ekleyerek jQuery kütüphanesini, kodumuzu ve css dosyamızı sayfaya dahil edelim.

<html>
<head>

 <!-- jQuery kütüphanesini sayfaya dahil ediyoruz -->
 <script src="jquery-1.3.2.min.js"></script>
 <!-- dizin içeriğini alıp listeleyecek jQuery scriptimiz -->
 <script src="dizinListele.js"></script>
 <!-- dizinleri ve dosyaları daha iyi görmek için küçük iconlar ekliyoruz. -->
 <link type="text/css" rel="stylesheet" href="dizinIcons.css"/>
</head>
<body>

  <div id="dircontent">
  </div>

</body>
</html>

Uygulamanın kodlarını buradan indirebilirsiniz. Kendi sunucunuzda kullanmak için direk olarak dosyaları aynı dizine koymanız yeterli olacaktır. Uygulamaya ait dosyaları buradan indirebilirsiniz.