Bu bölümde, PHP uygulamaları için hızlı, esnek ve güvenli bir şablon motoru olan Twig hakkında daha fazla bilgi edinmeye çalışacağız. Twig, şablonlarınızı daha okunaklı, sade ve web tasarımcıları için daha kolay hale getirir.
Resmi Twig dökümanları, bu şablon motoruyla ilgili her şeyi öğrenmek için en iyi kaynaktır. Burada, size sadece temel kavramları hızlı bir şekilde vermeye çalışacağız.
Bir Twig şablonu, her türde içerik (HTML, CSS, JavaScript, XML, CSV, LaTeX, vb.) oluşturabilen bir metin dosyasıdır. Twig öğeleri, aşağıdaki sınırlayıcılardan herhangi birini kullanarak şablon içeriğinin geri kalanından ayrılır:
{{ ... }} Bir değişkenin içeriğini veya bir ifadenin sonucunu ekrana yazar. {% ... %} Şablonun mantığını kontrol eder. Örneğin, döngüler ve if ifadelerini çalıştırmak için kullanılır. {# ... #} Şablonlara yorum eklenmesini sağlar. HTML yorumlarının aksine, oluşturulan şablona dahil edilmezler.
Aşağıda, şablona aktarılacak page_title ve navigation değişkenlerini kullanarak, birkaç temel öğeyi gösteren en az seviyede bir şablon verilmiştir:
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
</head>
<body>
<h1>{{ page_title }}</h1>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.url }}">{{ item.label }}</a></li>
{% endfor %}
</ul>
</body>
</html>
Symfony'de bir şablon oluşturmak için, bir denetleyici içinde yer alan render() metodunu kullanın. Şablonun içeriğini üretmek için değişkenlere ihtiyacı varsa, render() metodunun isteğe bağlı olarak kullanılan ikinci parametresini kullanarak, bu değişken değerlerini bir dizi olarak geçirin:
$this->render('default/index.html.twig', array(
'degisken_adi' => 'degisken_degeri',
));
Şablona karakter dizisi (string), dizi (array) veya nesneleri değişkenler olarak geçirebilirsiniz. Twig geçirilen değişkenler arasındaki farkı belirler ve bir değişkenin niteliklerine nokta (.) işaretiyle erişmenizi sağlar. Aşağıdaki kodlar, denetleyiciden geçirilen bir değişkenin türüne bağlı olarak içeriğinin nasıl görüntüleneceğini gösterir:
{# 1. Basit değişkenler #}
{# $this->render('template.html.twig', array(
'name' => 'Ahmet')
) #}
{{ name }}
{# 2. Diziler #}
{# $this->render('template.html.twig', array(
'user' => array('name' => 'Ahmet'))
) #}
{{ user.name }}
{# diziler için alternatif yazılım #}
{{ user['name'] }}
{# 3. Nesneler #}
{# $this->render('template.html.twig', array(
'user' => new User('Fabien'))
) #}
{{ user.name }}
{{ user.getName }}
{# nesneler için alternatif yazılım #}
{{ user.name() }}
{{ user.getName() }}
Çoğu zaman, bir projedeki şablonlar, bilinen başlık bilgisi ve alt bilgi gibi ortak öğeleri paylaşır. Twig, bu sorunu "şablon kalıtımı" denilen bir yöntemle çözer. Bu özellik, sitenizin tüm genel öğelerini içeren bir ana şablon oluşturmanıza ve alt şablonların geçersiz kılabileceği içerik "bloklarını" tanımlamanıza izin verir.
index.html.twig şablonu, base.html.twig şablonunun değerlerini aldığını belirtmek için extends etiketini kullanır:
{# app/Resources/views/default/index.html.twig #}
{% extends 'base.html.twig' %}
{% block body %}
<div id="wrapper">
<div id="container">
<div id="welcome">
<h1><span>Welcome to</span> Symfony {{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION') }}</h1>
</div>
.
.
.
</div>
</div>
{% endblock %}
{% block stylesheets %}
<style>
.
.
.
</style>
{% endblock %}
base.html.twig şablonuna karşılık gelen app/Resources/views/base.html.twig dosyasında aşağıdaki kodlar yer almaktadır:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
{% block%} etiketleri, şablon motoruna bir alt şablonun, şablonun bu bölümlerinin yerine kod ekleyebileceğini bildirir. Bu örnekte, index.html.twig şablonu body bloğunun yerini alır, ancak base.html.twig şablonunda tanımlanan varsayılan içeriği gösterecek başlık bloğuna herhangi bir işlem yapmaz.
Twig'in en iyi özelliklerinden biri, etiketler, filtreler ve fonksiyonlar yoluyla genişletilebilir olmasıdır. Bilgileri kullanıcıya göstermeden önce değiştirmek üzere kapsamlı filtreler kullanan aşağıdaki örnek şablona bir göz atın:
<h1>{{ article.title|capitalize }}</h1>
<p>{{ article.content|striptags|slice(0, 255) }} ...</p>
<p>Tags: {{ article.tags|sort|join(", ") }}</p>
<p>Activate your account before {{ 'next Monday'|date('M j, Y') }}</p>
Birkaç kod şablonu arasında bir kod parçasını paylaşmanın en iyi yolu, daha sonra diğer şablonlardan dahil edilebilen yeni bir şablon parçası oluşturmaktır.
Reklamlarınızın bazı sayfalarında reklam göstermek istediğimizi düşünün. Önce bir banner.html.twig şablonu oluşturun:
{# app/Resources/views/ads/banner.html.twig #}
<div id="ad-banner">
...
</div>
Bu reklamı herhangi bir sayfada görüntülemek için include() fonksiyonunu kullanarak banner.html.twig şablonunu index.html.twig şablonuna ekleyin:
{# app/Resources/views/default/index.html.twig #}
{% extends 'base.html.twig' %}
{% block body %}
<div id="wrapper">
<div id="container">
<div id="welcome">
<h1><span>Welcome to</span> Symfony {{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION') }}</h1>
{{ include('ads/banner.html.twig') }}
</div>
.
.
.
</div>
</div>
{% endblock %}
Başka bir denetleyicinin sonucunu bir şablonda kullanmak istediğinizde, Ajax ile çalışırken veya gömülü şablonun ana şablonda mevcut olmayan bazı değişkenlere ihtiyacı olduğunda çok yararlıdır.
Web sitenizin en popüler makalelerini görüntülemek için topArticlesAction() adlı denetleyici metodu oluşturduğunuzu varsayalım. Bu yöntemin sonucunu (genellikle bazı HTML içeriği) index şablonu içinde göstermek isterseniz, render() fonksiyonunu kullanın:
{# app/Resources/views/index.html.twig #}
{{ render(controller('AppBundle:Default:topArticles')) }}
Burada, render() ve controller() fonksiyonları, Default denetleyicisinin topArticlesAction() eylemine erişim için özel AppBundle:Default:topArticles kalıbını kullanır.
// src/AppBundle/Controller/DefaultController.php
class DefaultController extends Controller
{
public function topArticlesAction()
{
// veritabanındaki en popüler makaleleri alma
$articles = ...;
return $this->render('default/top_articles.html.twig', array(
'articles' => $articles,
));
}
// ...
}
Web uygulamaları için sayfalar arasında bağlantı oluşturmak bir zorunluluktur. Şablonlar içinde URL'leri kodlamak yerine path() fonksiyonu ile yönlendirme yapılandırmasına dayalı URL oluşturabilirsiniz. Bu şekilde, tüm URL'leriniz yapılandırmayı değiştirerek kolayca güncellenebilir:
Ana sayfaya dön
path() fonksiyonu, route adını ilk argüman olarak alır ve isteğe bağlı olarak ikinci parametre olarak bir dizi route parametresi geçirebilirsiniz.
Symfony'de resim, Javascript ve Stylesheet işlemlerini gerçekleştirmek için asset() fonksiyonunu kullanabilirsiniz:
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" type="text/css" />
<img src="{{ asset('images/logo.png') }}" />
asset() fonksiyonu, web/dizin içindeki web varlıklarını arar.
asset() fonksiyonunu kullandığınızda, uygulamanız daha taşınabilir olur. Bunun nedeni, şablonunuzun kodundaki hiçbir şeyi değiştirmeden uygulama kök dizinini, web kök dizininizin herhangi bir yerine taşıyabilmenizdir.