Phalcon Template Engine Volt

featureimage

Template Engine ช่วยให้นักออกแบบเว็บสร้าง Views ได้ด้วย syntax ที่ไม่ซับซ้อนเกินไปนัก ถ้าจะนึกถึง PHP Template Engine ที่เป็นที่รู้จักกันดี ก็เช่น Smarty, Twig ซึ่งใน Phalcon ก็มี Template Engine ของตัวเองที่ชื่อว่า Volt ที่เค้าเคลมตัวเองว่า เร็วมากเพราะทำงานอยู่ใน Memory

ทำไมถึงต้องใช้

คำถามนี้ เหมือนกับคำถามที่ว่า

ทำไมเราต้องใช้ Framework ทั้งๆ ที่ PHP เพียวๆ ทำงานได้เร็วกว่าเยอะ

หรือ

ทำไมเราต้องเขียนโปรแกรมแบบ OOP ทั้งๆ ที่การเขียนโปรแกรมแบบดั้งเดิม ทำงานได้เร็วกว่าเยอะ

(ทำงานได้เร็วกว่าเยอะ ในที่นี้ไม่ได้หมายว่า เขียนโปรแกรมเสร็จเร็วกว่านะ แต่หมายถึง โปรแกรมมันรันได้เร็วกว่า มี Performance ดีกว่า)

เหตุผลก็คือ Template Engine มันมีข้อดีหลายส่วน เช่น

  • การแยก application กับ template ออกจากกันด้วย template engine จะช่วยให้มีความเสียงน้อยมากที่จะเกิด code error (อันนี้สำคัญมาก)
  • การใช้ Template Engine ช่วยให้ Refactoring Code ได้ง่ายและยืดหยุ่นมาก
  • การใช้ Template Engine จะเป็นการบังคับให้ Developer แยก Business Logic ออกจาก Presentation Layer
  • ทำ Mock up Datasets ง่าย
  • ช่วยทำให้ Code สวยขึ้น ไม่ต้องมานั่งปวดหัวกับ tag HTML ที่ผสมปนเปไปกับ tag PHP ทำให้อ่านง่าย เข้าใจง่าย และดูแลรักษาง่าย

Template Engine ทำงานยังไง

Template Engine ส่วนใหญ่จะใช้ tag ที่เข้าใจง่ายเช่น

{% extends "layout.html" %}
{% block body %}
  <ul>
  {% for user in users %}
    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
  </ul>
{% endblock %}

คุณสมบัติหลักๆ ของ Template Engine คือ

  • สามารถ ใช้งาน Control Structures พื้นฐานเช่น if, for, while ได้
  • สามารถทำงานกับตัวแปรได้ ทั้งการ assign และแสดงผล
  • สามารถทำ Expressions ได้
  • มี tag helper ที่ช่วย generate html tag
  • สืบทอด (Inheritance) หรือ include template ได้

เริ่มใช้ Volt

Activate Volt

เราต้องบอก Phalcon ก่อน ว่าจะใช้ View Component เป็น Volt ที่ /app/config/service.php

<?php

$di->set('view', function () use ($config) {

    $view = new View();

    $view->setViewsDir($config->application->viewsDir);
    $view->setLayoutsDir('../views/common/layouts');
    $view->setTemplateAfter('flat');
    $view->setLayout('main');

    $view->registerEngines(array(
        '.phtml' => 'Phalcon\Mvc\View\Engine\Php'
    ));

    return $view;
}, true);

อธิบายด้านบน

$di->set('view', function () use ($config) {

เริ่มตั้งค่า component view ด้วย object Dependency Injection และเรียกใช้ Variable $config ที่ได้กำหนดไว้ที่ไฟล์ app/config/config.ini

$view = new View();

$view->setViewsDir($config->application->viewsDir);
$view->setLayoutsDir('../views/common/layouts');

จากนั้นสร้าง instance $view และกำหนด directory ที่อยู่ของ Views และ Layouts ตามลำดับ

$view->setTemplateAfter('flat');
$view->setLayout('main');

กำหนดให้ Views ไปอ่าน Layout ที่ชื่อ flat แล้วตามด้วยโหลด Layout ชื่อ main

เราสามารถกำหนด Template Engine ได้จากขั้นตอนนี้ ด้วย $view->registerEngines
ตามตัวอย่างด้านล่าง จะเป็นการระบุว่าจะใช้ Template Engine เป็น PHP ธรรมดา

$view->registerEngines(array(
    '.phtml' => 'Phalcon\Mvc\View\Engine\Php'
));

กรณีที่เราจะใช้ Volt จะต้องส่ง Param ไปตามนี้

$view->registerEngines(array(
    '.volt' => function ($view, $di) use ($config) {

        $volt = new VoltEngine($view, $di);

        $volt->setOptions(array(
            'compiledPath' => $config->application->cacheDir,
            'compiledSeparator' => '_'
        ));

        return $volt;
    },
));

สังเกตุว่า เราต้องระบุ compiledPath เพื่อเอาไว้เก็บไฟล์ที่ Template Engine Render แล้วด้วย

เครื่องมือ