Twig Tema Motoru nedir nasıl kullanılır

Twig tema motoru nedir nasıl kullanılır başlıklı yazımızdan herkese merhaba arkadaşlar. Her zaman ki gibi twig nedir diye açıklamaya başlayarak konuya giriş yapalım.

Twig: PHP için geliştirilmiş bir tema motorudur. Symfony framework yaratıcılarından Fabien Potencier tarafında geliştirilmiştir. Twig’i diğer tema motorlarından ayıran nokta ise daha popüler olmasının yanı sıra çok kolay okunabilir ve çok daha güçlü özelliklere sahip olmasıdır. Smarty gibi hantal değildir ve diğer tema motorlarına göre daha hızlıdır. Esnek bir yapıya sahiptir ve çok daha güvenlidir.

Neden bir tema motoru kullanmalıyım ?

Profesyonel her masaüstü ve web yazılımında tasarım ve yazılım birbirinden ayrı tutularak geliştirilir. Bu bize çok büyük avantajlar sağlar. Artık düz PHP kodlamalar ölüyor (çok şükür) ve yerini MVC mimarilerine sırtını dayamış frameworkler alıyor. PHP uygulamalarının API’lara kaydığı da bir gerçek. Framework kavramına sıcak bakmayan arkadaşlar ise kendi framework’lerini yazmaya çalışıyor ve çok başarılı olanlarda mevcut (kısmen).

Framework kullanın yada kullanmayın, kendi sisteminizi yazın veya yazmayın uygulamalarınızı oluştururken bir arayüz kullanmak zorundayız. MVC mimari oluşturmuş olsanız bile eğer bir tema motoru kullanmıyorsanız view dosyalarında eski usül html ve php kodlarını iç içe kullanmak zorunda kalıyoruz. MVC işlerimizi kolaylaştırırken bu kullanımda içinizden “bir şeyler eksik sanki” gibi cümleler geçebilir. Çünkü MVCyi MVC gibi kullanmadığınızı hissedersiniz. En basit örnek bir yönetim paneliniz var ve view katmanında html ve php kodlarını iç içe kullanıyorsunuz. – Burada php kodlarından kastım veritabanı sorguları vs değil. Sadece view katmanına ait kodlar –

Hiç sitenin tasarımından sıkılıp değiştirmeyi düşündünüz mü ?

Hepimiz en az bir milyon kere düşünmüşüzdür. Peki kaç defa yaptık ? Yukarı da ki örnekteki gibi bir yapıya sahipken çok istesek bile her şey karma karışık olduğu için ve daha kötü yapabiliriz korkusuyla çoğumuz bu riski almıyoruz. View katmanını uzun bir aranın ardından açtığınızda neyi niçin yaptığınızı hatırlamayabilirsiniz. Sigarayı bırakma reklamında ki teyzemiz gibi “Bırakmak istiyorum da…” gibi cümleler kurabilirsiniz. Çünkü kötü kod yazmışızdır MVCyi MVC gibi kullanmamışızdır ve olması gereken bu değildir. Bir sürü sebep sayabilirim size.

Bir ürün için birden çok temaya sahip olmak size her zaman artı değer kazandırır. Eğer ürünü 10000 TL ye satıyorsanız tema sistemi fiyatınızı otomatik olarak 1000-2000 tl artırır. Her özellik para demek bunu unutmayın 🙂

Peki ne yapmalıyız ? Bir tema motoru kullanmalıyız ve buna karar verdiyseniz yukarıda ki sorunlardan sıkıldıysanız öğrenmeye başlayalım !

Twig Kurulumu

Dilerseniz Github üzerinden twigi indirip sunucunuza çıkartarak yada composer yardımıyla kurabilirsiniz. Composer kurulum için aşağıda ki kodu komut satırına girmeniz yeterlidir.

composer require twig/twig:~2.0

Kurulumdan sonra vendor klasörü oluşacaktır. Klasörü açıp dosyaya bir göz gezdirmenizde fayda var. Dosyalara bir göz attıkdan sonra bir index.php dosyası oluşturup içine autoload dosyasını dahil etmeliyiz.

<?php
require 'vendor/autoload.php';
?>

Artık her şey hazır ve twigi kullanmaya başlayabiliriz. O halde kullanalım 🙂

Öncelikle temalarınızı saklayacağınız themes adında bir klasör oluşturun ve içine istediğiniz bir ismi vererek bir klasör daha oluşturun. Ben varsayılan olarak default ismini vereceğim. Şimdi aşağıda ki kodu index.php dosyanıza dahil edin.

$loader = new Twig_Loader_Filesystem('themes/default');

Twig_Loader_Filesystem metodu iki adet parametre alıyor. Birinci parametreye dizi gönderebiliyoruz. İkinci parametre ise sadece string veri kabul ediyor. Birinci parametre tema dosyaları için ikinci parametre ise temalarınızın ana dizini için. Kafanız karışmasın hemen şöyle açıklayayım. Themes klasörünüz altında blue diye bir klasör daha oluşturun. Yeni eklediğimiz kodu aşağıda ki ile değiştirin.

$loader = new Twig_Loader_Filesystem(['default','blue'],'themes');

Burada ne yaptığımıza bakalım. Birinci parametremizde [‘default’,’blue’] diyerek iki adet tema yolu belirttik. İkinci parametremizde ise ‘themes’ diyerek temalarımızın bulunduğu kök dizini belirttik. Birinci parametremize default ve blue diye iki ayrı tema belirtmemizin sebebi Twig’e eğer default tema bulunamazsa blue temasını kullanmasını söylemiş oluyoruz. Buraya kadar herhangi bir sorun yoksa aşağıda ki kodu da index.php dosyamıza ekleyelim.

$twig = new Twig_Environment($loader);

Burada ise az önce oluşturduğumuz loader değişkenini twige gönderdik. Bu metodumuzda iki adet parametre alıyor.

Birincisi tema yollarımızı belirtebildiğimiz bir nesne değeri, ikincisi ise karakter setini, cache klasörünü vs ayarlamamızı sağlayan dizi bir değer alıyor.

Kafanızı çok fazla karıştırmamak için bu değerleri tek tek anlatmıcam ancak yine de basit bir örnek vereceğim. İleride detaylı olarak inceleyeceğiz.

$config = ["cache" => "cache_folder", "charset => "UTF-8"];
 
$twig = new Twig_Environment($loader, $config);

İkinci parametremizin aldığı tüm değerler için Buraya Tıklayın

index.php dosyamızın son hali aşağıda ki gibi olmalıdır.

<?php
 
include 'vendor/autoload.php';
 
$loader = new Twig_Loader_Filesystem(['default','blue'], 'themes');
 
$twig = new Twig_Environment($loader);

Eğer herhangi bir hata yoksa artık bir template dosyası oluşturalım ve ilk “Hello World” metnimizi ekrana basalım. Twig için varsayılan dosya uzantısı .html olmalıdır. Çoğu temada .twig.html veya sadece .twig uzantısını da görebilirsiniz. Bu tamamen yapılandırmayla alakalıdır ve aralarında hiç bir fark yoktur. Bu basit şeye daha sonra değineceğiz.

Şimdi default temanız altında hello.html adında bir dosya oluşturup içine aşağıda ki kodları yazın.

<h1>{{ title }}</h1>

Template dosyamızı işlemek için twig render metodunu kullanıyoruz. Render metodu iki adet parametre alıyor. İlk parametremiz dosya adını, ikinci parametremiz ise dosyaya gönderilecek veri dizisini alıyor. Buna göre index.php dosyamızı açıp aşağıda ki kodları ekleyin.

$data = [ "title" => "Hello World!" ];
 
echo $twig->render('hello.html', $data);

Kodu çalıştırdığınızda ekrana “Hello World” çıktısını basacaktır.

Tekrar ne yaptığımıza bir bakarak yazımızı burada sonlandıralım. Dizimizi oluşturduk ve render metoduna işlenecek dosya adını belirttik ve dizimizi bu dosyaya gönderdik. hello.html dosyamızda {{ title }} değişkeni diziden gönderdiğimiz title değerini ekrana bastı. Buradan da anladığımız üzere twig tema motorunda değişkenleri {{ }} arasına yazıyoruz.

Şimdi bir kaç örnek yapın ve tamamen mantığını anlamaya çalışın şimdilik benden bu kadar. Anlamadığınız ve takıldığınız yerlerde ne yapmanız gerektiğini biliyorsunuz. Bir sonraki yazımızda görüşmek üzere kendinize çok iyi bakın 🙂