TEKRAR HOŞGELDİN!
Yaklaşık 5 dakikadır blogumdasın sanırım yazılarım ilgini çekti. Yeni yazılarımdan ilk sen haberdar olmak istiyorsan aşağıda ki sosyal hesaplarımı takip edebilir veya haftalık e-posta bültenime kay olabilirsin!
Web ve mobil için tasarım ve yazılım çözümleri sunabilirim.
Tags Kütüphanesi

Tags Kütüphanesi

Herkese merhaba arkadaşlar, bugün sizlere etiket ve dosya yönetimini dinamik ve daha kolay bir hale getiren bir kütüphaneyi tanıtacağım.

Yazı başlamadan önce gözatmak isteyen arkadaşlar kütüphaneye şu linkten erişebilirler. Tag and File Management

Tags Kütüphanesi Nedir?

Etiket ve dosya yönetimini dinamik ve daha kolay bir hale getiren, basit ve etkili bir kütüphanedir.

Tags Kütüphanesini Neden Kullanmalıyız?

Bir projeye başladığımızda genelde şu 2 sorun ile karşılaşırız. :
  • #1 Yeni veya Boş Sayfa : Arama sonuçlarında, sosyal paylaşımlarımızda ve sohbet programlarında websitemizin düzgün görüntülenmesini isteriz ve websitemizi bu şartlarda geliştiririz. Fakat boş bir sayfa oluşturduğunuzda bir çok tag eklenmemiş olur ve herhangi bir başlık, açıklama veya resim meta tag‘i girilmediği için bir çok platformda websitemiz düzgün görüntülenmez.
  • #2 Request (İstek) : Çalıştığımız sayfalarda gerekli gereksiz bir sürü css ve javascript dosyaları çağırıyoruz ve bu request’lerin artmasına neden oluyor. Bir sayfada requestler ne kadar fazla ise yüklenme süresi de buna oranla o kadar yavaş olacaktır.

Tags Kütüphanesi Nasıl Kullanılır?

Projenizin loader (yükleyici) sayfasını aşağıda ki gibi yapılandırmalısınız. Öncelikle kütüphaneyi başlatıyoruz.
 $tags     = new Tags();
Daha sonra varsayılan etiketlerimizi ve proje de kullanmak istediğimiz css ve javascript dosyalarını tanımlıyoruz. İsterseniz tek tek, istersenizde zincirleme yapısında tanımlamalarınızı yapabilirsiniz.
 $tags->set('title', 'Varsayılan website başlığı');

 $tags->set('meta', [
      ['charset' => 'UTF-8'],
      ['name' => 'viewport', 'content' => 'width=device-width, initial-scale=1'],
      ['http-equiv' => 'X-UA-Compatible', 'content' => 'ie=edge'],
      ['name' => 'description', 'content' => 'Varsayılan website açıklaması...']
 ]);

 $tags->set('link',[
      ['rel' => 'stylesheet', 'href' => '/styles/app1.css'],
      ['rel' => 'stylesheet', 'href' => '/styles/app2.css'],
      ['rel' => 'stylesheet', 'href' => '/styles/app3.css']
 ]);

 $tags->set('script',[
      ['type' => 'text/javascript', 'src' => '/javascripts/app1.js'],
      ['type' => 'text/javascript', 'src' => '/javascripts/app2.js'],
      ['type' => 'text/javascript', 'src' => '/javascripts/app3.js']
 ]);

 $dinamik_degisken   = 'Hello';
 $tags->set('script', ['type' => 'text/javascript', '{}' => 'alert("'.$dinamik_degisken.' World!")']);
Tanımlamalarınızın bittiğini varsayıp öyle devam ediyorum. 1.sorunu hatırlayacak olursak boş sayfalardaki eksik etiketlerden bahsetmiştim. Bu yapıyı kurduktan sonra şablon sayfalarınızı da şu şekilde yapılandırırsanız artık böyle bir sorununuz kalmayacaktır ve bir çok platformda düzgün görüntülenecektir.
 <!DOCTYPE html>
 <html lang="en">
 <head>
      <?=$tags->export(['title', 'meta', 'link', 'style']);?>
 </head>
 <body>

      <?=$tags->export('script');?>
 </body>
 </html>
Projenizde bir MVC altyapısı kullanıyorsanız bu kullanımı oldukça seveceksiniz. MVC yapısına sahip değilsenizde sayfanızın başlangıcında kullanabilirsiniz. Boş sayfanızın başlığını veya herhangi bir değerini güncellemek istiyorsanız controller sayfanızın başına aşağıda bulunan örnek kodda ki gibi güncellemek istediğiniz alanı veya eklemek istediğiniz dosyayı belirtmeniz yeterli olacaktır.
 <?php
      $tags->set('title', 'Yeni başlık')
           ->set('link', ['rel' => 'stylesheet', 'href' => '/plugins/bootstrap.min.css'])
           ->set('script', ['type' => 'text/javascript', 'src' => '/plugins/bootstrap.min.js'])
           ->set('style', ['type' => 'text/css', '<>' => 'body{background:#333;}']);
 ?>
 <!DOCTYPE html>
 ...
Gelelim 2. soruna sayfa içi istekleri azaltabilmek için öncelikle sitenin varsayılan olarak ihtiyaç duyulan dosyalarının yanında az önce eklediğimiz ekstra eklenti vs.. dosyalarının bir dizi halinde çıktısını almamız gerekiyor bunun için kütüphanenin export fonksiyonunu kullanmalıyız. Export fonksiyonu 3 parametre alır, bunlar :
  1. $order : String veya dizi halinde bir değer girmelisiniz. Girdiğiniz sıraya göre çıktı alırsınız.
  2. $array : Dosya listesinin dizi halinde döndürür. Varsayılan olarak kapalıdır.
  3. $append_code : Sonradan eklenen javascript veya css kodlarını diziye ekler. Varsayılan olarak kapalıdır.
Bu kısımda sizlere Minify kütüphanesini kullanmanızı tavsiye edeceğim. Matthias Mullie isimli arkadaşın yazdığı bu kütüphane css ve javascript dosyalarını sıkıştırmamıza yarıyor. Şimdi sıkıştırmak istediğimiz dosyaları belirledik ve bunları bir for döngüsüne alıp Minify kütüphanesine belirttiğimizde aşağıda bulunan örnekte ki gibi sıkıştıracaktır.
 $scripts  = $tags->export('script', true);
 print_r($scripts);

 /*
      Array
      (
          [0] => /javascripts/app1.js
          [1] => /javascripts/app2.js
          [2] => /javascripts/app3.js
          [2] => alert("Hello World!")
      )
 */

 use MatthiasMullie\Minify;
 $minifier = new Minify\JS();

 for($i=0; $i < count($i); $i++){
      $minifier->add($scripts[$i]);
 }

 // Kaydedilecek dosya dizini ve adı
 $minifier->minify('/target/path.js');
Dilerseniz dosya adını $_SERVER[‘REQUEST_URI’] parametresinden alabilirsiniz. 2.sorunu da her ne kadar çözmüş gibi görünsekte öncelikle şablon sayfalarınızı aşağıda ki gibi güncellemeniz gerekiyor, sunucunuzu da daha verimli kullanabilmek için projenize bir cache sistemi yazmanızda fayda var bu işlemi de başarıyla halletiyseniz websiteniz artık roketlemeye hazır demektir!
 <!DOCTYPE html>
 <html lang="en">
 <head>
      <?=$tags->export(['title', 'meta']);?>
      <link rel="stylesheet" href="/styles/index.css">
 </head>
 <body>

      <script type="javascript" src="/javascripts/index.js"></script>
 </body>
 </html>

ETİKETLER

info_outline Bu yazı 05.11.2017 23:11 tarihinde, 1 ay önce HTML ve PHP ve kategorilerinde yayınlandı.