۱۳۹۹/۰۴/۱۹

آموزش Twig در PHP

Twig چیست؟ ۱۳۹۸/۰۶/۲۶

Twig یک موتور قالب برای PHP است .ولی همانطور که می دانید خود php  اصالتا یک موتور قالب است . php به خودی خود موتور قالب است ولی به درستی تکامل نیافته.به همین  علت در بعضی موارد از تمپلیت انجین ها استفاده میکنیم.مثال زیر را در نظر بگیرید.

<?php echo "<p> Hello " . $name . "</p>"; ?>

و نسخه TWIG همان کد:

<p> Hello {{ name }} </p>

php یک  زبان پر کد است .و  هنگامیکه در بین کدهای html استفاده میشود.این پرکدی بیش از حد پیچیده میشود.تمپلیت انجین ها بعضی از این کدهای اضافه را از بین می برند.و توسعه برنامه هایی که از این نوع تمپلیت انجین ها استفاده میکنند راحت تر است .

Twig  یک تمپلیت انجین است که توسط شرکت Sensio labs ساخته شده .این شرکت فریم ورک سیموفنی را نیز پیشتبانی میکند.

نصب twig

برای نصب twig بوسیله composer از دستورات زیر استفاده میکنیم.

composer require twig/twig

twig بعنوان یک موتور قالب هم در قسمت front و هم در قسمت back کاربرد دارد .twig هم میتواند توسط طراحان قالب مورد استفاده قرار بگیرد و هم بوسیله توسعه دهندگان.

چگونه از Tiwg در پروژه خود استفاده کنم؟

برای آموزش استفاده از twig یک پروژه ساده به نام bootstrap.php را با php ایجاد میکنیم.

<?php

// Load our autoloader
require_once __DIR__.'/vendor/autoload.php';

// Specify our Twig templates location
$loader = new Twig_Loader_Filesystem(__DIR__.'/templates');

 // Instantiate our Twig
$twig = new Twig_Environment($loader);

Twig از یکی شی اصلی به نام Environment استفاده میکنید.از این کلاس برای مرتب سازی ,پیکربندی,extensions و بارگزاری قالب ها از فایل های سیستم استفاده میشود.

در ادامه یک فایل index.php ایجاد میکنیم که فایل bootsratp.php را در آن پیوست می کنیم تا بتوانیم از کلاس های این فایل برای رندر کرد قالب استفاده کنیم.

<?php

require_once __DIR__.'/bootstrap.php';

// Create a product list
$products = [
    [
        'name'          => 'Notebook',
        'description'   => 'Core i7',
        'value'         =>  800.00,
        'date_register' => '2017-06-22',
    ],
    [
        'name'          => 'Mouse',
        'description'   => 'Razer',
        'value'         =>  125.00,
        'date_register' => '2017-10-25',
    ],
    [
        'name'          => 'Keyboard',
        'description'   => 'Mechanical Keyboard',
        'value'         =>  250.00,
        'date_register' => '2017-06-23',
    ],
];

// Render our view
echo $twig->render('index.html', ['products' => $products] );

همانطور که در کد بالا می بینید ما محصولاتی را در یک آرایه  تعریف کردیم .سپس با استفاده از متد render آریه ساخته شده را به صفحه index.html تزریق کردیم.توجه داشته باشید که در این مثل فایل index.html در پوشه template/ که در فایل bootstrap.php تعریف کرده ایم وجود دارد .پس برای ادامه کار لطفا پوشه tempale را ایجاد کرده و در داخل پوشه template فایل index.html را ایجاد کنید و در ادامه کد های html زیردر آن فایل index.html پست کنید.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Twig Example</title>
    </head>
    <body>
    <table border="1" style="width: 80%;">
        <thead>
            <tr>
                <td>Product</td>
                <td>Description</td>
                <td>Value</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </body>
</html>

صفحه index.php را در سروی محلی یا همان localhost اجرا کنید.خروجی صفحه ایجاد شده به شکل زیر خواهد بود.

twig در php آموزش استفاده از

در twig دو نوع جدا کننده یا حائل delimiter داریم {{ ... }} که برای چاپ مقادیر از آن استفاده میشود و {% ... %} که برای اجرای دستوراتی مثل حلقه ها یا مقدار دهی به متغییر و...  از آن استفاده میشود.

layout در twig

به منظور جلوگیری از تکرار عناصر در صفحه ((ماندد فوتر و هدر))در قالب ها ,موتور قالب twig این امکان را با ما میدهد که تمپلیت ها را در تمپلیت های مختلف لود کنیم .در twig اصطلاحا به انها بلاک (block) میگویند.

بعنوان مثال در پروژه ای که ایجاد کرده ایم یک فایل  layout.html بسازید.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Tutorial Example</title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

در کد بالا یک بلاک ایجاد شد به نام content .بعد از این هر تمپلیت با قالبی که از بلاک content ارث بری یا extends شده باشد.بلاک content را در موقعیتی که مشخص شده نمایش میدهد.بنابراین میتوان از این بلاک در قسمت های مختلف نرم افزار استفاده کنیم بدون آنکه محبور باشیم کد تکراری تایپ کنیم.

در ادامه فایل index.html به شکل زیر ویرایش میکنیم.

{% extends "layout.html" %}

{% block content %}
    <table border="1" style="width: 80%;">
        <thead>
            <tr>
                <td>Product</td>
                <td>Description</td>
                <td>Value</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

Twig همچنین به شما این امکان را میدهد که تنها یک بلاک را رندر کنید.برای اینکار ابتدا باید بلاک را بارگیری کنیم سپس بلاک را رندر کنیم .

$template = $twig->load('index.html');
echo $template->renderBlock('content', array('products' => $products));

دقت کنید که در نحوه چیدمان صفحه تغییری ایجاد نشده .فقط با استفاده از بلاک بندی پیچیدگی برنامه را کاهش دادیم.

Cache در Twig

از شی Environment میتوان استفاده های بیشتر علاوه بر لود صفحات کرد.

اگر پیکربندی کش را به دایرکتوری های مرتبط ارسال کنیم.Twig  تمپلیت های کامپایل شده را ذخیره می کند ، بنابراین از کامپایل تمپلیت در درخواست های بعدی جلوگیری می کند.

تمپلیت های کامپایل شده در دایرکتوری که از قبل تعریف کردیم ذخیره میشوند.

دقت کنید که سیستم cache در twig برای تمپلیت های کامپایل شده انجام می شود.نه تمپلیت های ارزیبابی شده.به این معنی است که مثلا اگر متغییر شما در برنامه مقداری جدید در خود ذخیره کرد مقدار جدید نمایش داده خواهد شد. 

برای کش اطلاعات به طریق زیر عمل میکنیم.

$twig = new Twig_Environment($loader, ['cache' => '/templates/cache']);

حلقه ها یا LOOPS در twig

در مثال قبل دیدیم که چگونه از حلقه ها برای چاپ آرایه استفاده کردیم.دیدم که برای چاپ مقادیر یک آرایه در twig از دستور for به همراه نامی که به آرایه اشاره میکند استفاده کردیم.و از endfor برای بستن حلقه استفاده شد.

اگر بخواهیم یک حلقه برای تعدای مشخص دور تکرار داشته باشد از دستور for به شکل زیر استفاده میکنیم.

{% for number in 0..100 %}
     {{ number }}
{% endfor %}

یا برای چاپ اعداد

{% for letter in 'a'..'z' %}
     {{ letter }}
{% endfor %}

در twig میتوانی شرط حلقه برای چاپ مقدایر آرایه یا ابجکت را تعیین کرد.از طریق آن می توان شرطی را برای چاپ مقادیر مشخص کنیم.فرض کنید در پروژه خود نیاز داریم تمام مقادیری که مقدار value آنها کمتر از 250 باشد چاپ کنیم .

<tbody>
    {% for product in products if product.value < 250 %}
        <tr>
            <td>{{ product.name }}</td>
            <td>{{ product.description }}</td>
            <td>{{ product.value }}</td>
            <td>{{ product.date_register|date("m/d/Y") }}</td>
    </tr>
    {% endfor %}
</tbody>

دستورات شرطی در twig

twig دستورات شرطی را در قالب برچسب های مثل if ,if elseو if not  در اختیار ما قرار میدهد.مانند زبان برنامه نویسی دیگر میتوان از این دستورات شرطی در قالب خود استفاده کنیم.بطور مثال در پروژه خود اگر بخواهیم فقط محصولاتی که مقدار  value آنها بیشتر از 500 باشد به شکل زیر عمل می کنیم 

<tbody>
    {% for product in products %}
    {% if product.value > 500 %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.value }}</td>
                    <td>{{ product.date_register|date("m/d/Y") }}</td>
        </tr>
    {% endif %}
    {% endfor %}
</tbody>

نمایش تاریخ در twig

فیلتر ها به ما کمک میکنند با قالب نمایش چاپ مقدایر را تعیین کنیم .که فیلتر های کاربردی زیادی در twig وجود دارد یکی از این فیلتر های کاربردی date است .که بوسیله آن می توان الگو نمایش تاریخ در قالب را مشخص کنیم.

<td>{{ product.date_register|date("m/d/Y") }}</td>

در کد بالا تاریخ را در قالب سال/روز/ماه نمایش دادیم.میتوان ترتیب نمایش را تغییر داد یا فقط سال را در خروجی نمایش داد.یا اگر بخواهیم یک روز به تاریخ خود اضافه کنیم از فیلتر 

date_modify به شکل زیر استفاده میکنیم.

<td>{{ product.date_register|date_modify("+1 day")|date("m/d/Y") }}</td>

یا اگر بخواهیم  در تمپلیت انجین twig تاریخ را بصورت  شمسی نمایش دهیم  در ابتدا باندل JalaliDateTime   طبق صفحه آموزش استفاده از تاریخ شمسی در سیموفنی نصب میکنم و بعد  از فیلتر jalali_date به شکل زیر استفاده میکنیم.(البته استفاده از twing extention ها در سیموفنی امکان پذیر است اگر از تملیت انجین twig در فریم ورک های دیگری استفاه میکنید این آموزش کمکی به شما نمیکند.)

<td>{{ product.date_register | jalali_date("Y/m/d") }}</td>

twig template engine فیلتر ها در

فیلترStriptags در twig

با استفاده از این فیلتر تگ های html یا xml موجود در متن را میتونید حذف کنیم .بطور مثال با استفاده از دستور زیر تگ </p>از رشته حذف میوشد.

{{ <p>Hello World</p>|striptags }}

در بعضی موارد نیاز داریم در خروجی خود بعضی از تگ های html را  داشته باشیم.مثلا اگر متن ما شامل جدول باشد اگر کلیه تگ های html از متن حذف شود خروجی بهم ریخته ای خواهیم داشت .برای  حل این مشکل میتوان تگ های که نیاز دارید در خروجی نمایش داده شود و حذف نشود را مشخص کنیم.برای این کار بصورت زیر عمل میکنیم.

{{ product.description|striptags('<table></table><thead></thead><th></th><tbody></tbody><td></td><tr></tr>') }}


رای :

Twig

موتورقالب

تمپلیت انجین

php

Cache در Twig

نمایش تاریخ در twig

ارسال نظر
Copyright © All right reserved.