Symfony - ดู Engine

View Layer คือเลเยอร์การนำเสนอของแอปพลิเคชัน MVC มันแยกตรรกะของแอปพลิเคชันออกจากตรรกะการนำเสนอ

เมื่อคอนโทรลเลอร์ต้องการสร้าง HTML, CSS หรือเนื้อหาอื่น ๆ ระบบจะส่งต่องานไปยังเครื่องมือสร้างเทมเพลต

เทมเพลต

เทมเพลตเป็นไฟล์ข้อความที่ใช้ในการสร้างเอกสารที่เป็นข้อความเช่น HTML, XML เป็นต้นใช้เพื่อประหยัดเวลาและลดข้อผิดพลาด

โดยค่าเริ่มต้นแม่แบบสามารถอยู่ในตำแหน่งที่แตกต่างกันสองแห่ง -

app/Resources/views/- ไดเร็กทอรีมุมมองของแอปพลิเคชันสามารถมีเค้าโครงและเทมเพลตของแอปพลิเคชันของคุณ นอกจากนี้ยังลบล้างเทมเพลตบันเดิลของบุคคลที่สาม

vendor/path/to/Bundle/Resources/views/ - บันเดิลของบุคคลที่สามแต่ละชุดมีเทมเพลตในไดเร็กทอรี "Resources / views /"

Twig Engine

Symfony ใช้ภาษาเทมเพลตที่มีประสิทธิภาพที่เรียกว่า Twig. Twig ช่วยให้คุณเขียนเทมเพลตที่กระชับและอ่านได้ในลักษณะที่ง่ายมาก เทมเพลต Twig นั้นเรียบง่ายและจะไม่ประมวลผลแท็ก PHP Twig ดำเนินการควบคุมช่องว่างแซนด์บ็อกซ์และการหลบหนี HTML อัตโนมัติ

ไวยากรณ์

Twig มีไวยากรณ์พิเศษสามประเภท -

• {{ ... }} - พิมพ์ตัวแปรหรือผลลัพธ์ของนิพจน์ไปยังเทมเพลต

• {% ... %} - แท็กที่ควบคุมตรรกะของเทมเพลต ส่วนใหญ่จะใช้เพื่อเรียกใช้ฟังก์ชัน

• {# ... #}- ไวยากรณ์ความคิดเห็น ใช้เพื่อเพิ่มความคิดเห็นเดียวหรือหลายบรรทัด

เทมเพลตฐานกิ่งไม้อยู่ที่ “app/Resources/views/base.html.twig”.

ตัวอย่าง

มาดูตัวอย่างง่ายๆโดยใช้ twig engine

StudentController.php

<?php  
namespace AppBundle\Controller;  

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;  

class StudentController extends Controller { 
   /** 
      * @Route("/student/home") 
   */ 
   public function homeAction() { 
      return $this->render('student/home.html.twig'); 
   } 
}

ที่นี่ render() เมธอดแสดงเทมเพลตและทำให้เนื้อหานั้นเป็นอ็อบเจ็กต์การตอบสนอง

ตอนนี้ย้ายไปที่ไดเร็กทอรี "views" และสร้างโฟลเดอร์ "student" และภายในโฟลเดอร์นั้นให้สร้างไฟล์ "home.html.twig" เพิ่มการเปลี่ยนแปลงต่อไปนี้ในไฟล์

home.html.twig

//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3>

คุณสามารถรับผลลัพธ์ได้โดยขอ url“ http: // localhost: 8000 / student / home”

โดยค่าเริ่มต้น Twig จะมาพร้อมกับรายการแท็กฟิลเตอร์และฟังก์ชันต่างๆมากมาย มาดูรายละเอียดทีละเรื่อง

แท็ก

Twig รองรับแท็กที่สำคัญดังต่อไปนี้ -

ทำ

doแท็กทำหน้าที่คล้ายกับนิพจน์ทั่วไปโดยมีข้อยกเว้นว่าจะไม่พิมพ์อะไรเลย ไวยากรณ์มีดังนี้ -

{% do 5 + 6 %}

รวม

คำสั่ง include ประกอบด้วยเทมเพลตและส่งคืนเนื้อหาที่แสดงผลของไฟล์นั้นไปยังเนมสเปซปัจจุบัน ไวยากรณ์มีดังนี้ -

{% include 'template.html' %}

ขยาย

คุณสามารถใช้แท็กขยายเพื่อขยายเทมเพลตจากเทมเพลตอื่นได้ ไวยากรณ์มีดังนี้ -

{% extends "template.html" %}

บล็อก

บล็อกทำหน้าที่เป็นตัวยึดตำแหน่งและแทนที่เนื้อหา ชื่อบล็อกประกอบด้วยอักขระที่เป็นตัวอักษรและตัวเลขคละกันและขีดล่าง ตัวอย่างเช่น,

<title>{% block title %}{% endblock %}</title>

ฝัง

embedแท็กทำการรวมทั้งรวมและขยาย ช่วยให้คุณสามารถรวมเนื้อหาของเทมเพลตอื่นได้ นอกจากนี้ยังช่วยให้คุณสามารถแทนที่บล็อกใด ๆ ที่กำหนดไว้ภายในเทมเพลตที่รวมอยู่ด้วยเช่นเมื่อขยายเทมเพลต ไวยากรณ์มีดังนี้ -

{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %}

กรอง

ส่วนตัวกรองช่วยให้คุณสามารถใช้ตัวกรอง Twig ปกติกับบล็อกข้อมูลเทมเพลตได้ ตัวอย่างเช่น,

{% filter upper %} 
   symfony framework 
{% endfilter %}

ในที่นี้ข้อความจะเปลี่ยนเป็นตัวพิมพ์ใหญ่

สำหรับ

Forloop ดึงข้อมูลแต่ละรายการตามลำดับ ตัวอย่างเช่น,

{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}

ถ้า

ifคำสั่งใน Twig นั้นคล้ายกับ PHP นิพจน์ประเมินว่าเป็นจริงหรือเท็จ ตัวอย่างเช่น,

{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}

ฟิลเตอร์

Twig มีตัวกรอง ใช้เพื่อแก้ไขเนื้อหาก่อนที่จะแสดงผล ต่อไปนี้เป็นตัวกรองที่น่าสนใจบางส่วน

ความยาว

ตัวกรองความยาวจะส่งกลับความยาวของสตริง ไวยากรณ์มีดังนี้ -

{% if name|length > 5 %} 
   ... 
{% endif %}

ต่ำกว่า

ตัวกรองล่างจะแปลงค่าเป็นตัวพิมพ์เล็ก ตัวอย่างเช่น,

{{ 'SYMFONY'|lower }}

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

symfony

ในทำนองเดียวกันคุณสามารถลองใช้ตัวพิมพ์ใหญ่

แทนที่

ตัวกรองการแทนที่จะจัดรูปแบบสตริงที่กำหนดโดยการแทนที่ตัวยึดตำแหน่ง ตัวอย่างเช่น,

{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }}

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

tutorials point website

หัวข้อ

ตัวกรองหัวเรื่องจะส่งคืนค่าเวอร์ชันของชื่อเรื่อง ตัวอย่างเช่น,

{{ 'symfony framework '|title }}

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Symfony Framework

จัดเรียง

ตัวกรองการเรียงลำดับจะจัดเรียงอาร์เรย์ ไวยากรณ์มีดังนี้ -

{% for user in names|sort %} 
   ... 
{% endfor %}

ตัดแต่ง

ตัวกรองการตัดแต่งจะตัดช่องว่าง (หรืออักขระอื่น ๆ ) จากจุดเริ่มต้นและจุดสิ้นสุดของสตริง ตัวอย่างเช่น,

{{ '  Symfony!  '|trim }}

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Symfony!

ฟังก์ชั่น

Twig รองรับฟังก์ชั่น ใช้เพื่อให้ได้ผลลัพธ์ที่เฉพาะเจาะจง ต่อไปนี้เป็นฟังก์ชัน Twig ที่สำคัญ

แอตทริบิวต์

attributeสามารถใช้ฟังก์ชันเพื่อเข้าถึงแอตทริบิวต์ "ไดนามิก" ของตัวแปร ไวยากรณ์มีดังนี้ -

{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }}

ตัวอย่างเช่น,

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

คงที่

ฟังก์ชัน Constant จะส่งคืนค่าคงที่สำหรับสตริงที่ระบุ ตัวอย่างเช่น,

{{ constant('Namespace\\Classname::CONSTANT_NAME') }}

วงจร

ฟังก์ชันวัฏจักรจะวนรอบบนอาร์เรย์ของค่า ตัวอย่างเช่น,

{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}

วันที่

แปลงอาร์กิวเมนต์เป็นวันที่เพื่อให้สามารถเปรียบเทียบวันที่ได้ ตัวอย่างเช่น,

<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Choose your location before May 15, 2017

อาร์กิวเมนต์ต้องอยู่ในรูปแบบวันที่และเวลาที่รองรับของ PHP

คุณสามารถส่งเขตเวลาเป็นอาร์กิวเมนต์ที่สองได้

การถ่ายโอนข้อมูล

ฟังก์ชันการถ่ายโอนข้อมูลจะทิ้งข้อมูลเกี่ยวกับตัวแปรเทมเพลต ตัวอย่างเช่น,

{{ dump(user) }}

สูงสุด

ฟังก์ชัน max จะส่งคืนค่าที่มากที่สุดของลำดับ ตัวอย่างเช่น,

{{ max(1, 5, 9, 11, 15) }}

นาที

ฟังก์ชัน min ส่งคืนค่าที่น้อยที่สุดของลำดับ ตัวอย่างเช่น,

{{ min(1, 3, 2) }}

รวม

ฟังก์ชัน include ส่งคืนเนื้อหาที่แสดงผลของเทมเพลต ตัวอย่างเช่น,

{{ include('template.html') }}

สุ่ม

ฟังก์ชันสุ่มสร้างค่าสุ่ม ตัวอย่างเช่น,

{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #}

พิสัย

ฟังก์ชัน Range ส่งคืนรายการที่มีความก้าวหน้าทางคณิตศาสตร์ของจำนวนเต็ม ตัวอย่างเช่น,

{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %}

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

1,2,3,4,5

เลย์เอาต์

เค้าโครงแสดงถึงส่วนทั่วไปของหลายมุมมองเช่นส่วนหัวของหน้าและส่วนท้าย

การสืบทอดแม่แบบ

เทมเพลตสามารถใช้กับเทมเพลตอื่นได้ เราสามารถบรรลุสิ่งนี้ได้โดยใช้แนวคิดการสืบทอดแม่แบบ การสืบทอดเทมเพลตช่วยให้คุณสามารถสร้างเทมเพลต "เค้าโครง" พื้นฐานที่มีองค์ประกอบทั่วไปทั้งหมดของเว็บไซต์ที่กำหนดเป็นบล็อก

ลองมาเป็นตัวอย่างง่ายๆเพื่อทำความเข้าใจเพิ่มเติมเกี่ยวกับการสืบทอดเทมเพลต

ตัวอย่าง

พิจารณาเทมเพลตพื้นฐานที่“ app / Resources / views / base.html.twig” เพิ่มการเปลี่ยนแปลงต่อไปนี้ในไฟล์

base.html.twig

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>

ตอนนี้ย้ายไปยังแฟ้มดัชนีแม่แบบตั้งอยู่ที่“app / ทรัพยากรธรรมชาติ / views / default / index.html.twig” เพิ่มการเปลี่ยนแปลงต่อไปนี้

index.html.twig

{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}

ที่นี่ {% extends %}แท็กแจ้งให้เครื่องมือสร้างเทมเพลตเพื่อประเมินเทมเพลตพื้นฐานก่อนซึ่งจะตั้งค่าโครงร่างและกำหนดบล็อก จากนั้นเทมเพลตลูกจะแสดงผล เทมเพลตลูกสามารถขยายโครงร่างพื้นฐานและแทนที่บล็อกหัวเรื่องได้ ตอนนี้ขอ url“ http: // localhost: 8000” และคุณจะได้รับผลลัพธ์

สินทรัพย์

เนื้อหาจะจัดการการสร้าง URL และการกำหนดเวอร์ชันของเนื้อหาเว็บเช่นสไตล์ชีต CSS ไฟล์ JavaScript และไฟล์รูปภาพ

JavaScript

หากต้องการรวมไฟล์ JavaScript ให้ใช้ไฟล์ javascripts แท็กในเทมเพลตใดก็ได้

{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %}

สไตล์ชีต

หากต้องการรวมไฟล์สไตล์ชีตให้ใช้ไฟล์ stylesheets แท็กในเทมเพลตใดก็ได้

{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}

รูปภาพ

ในการรวมรูปภาพคุณสามารถใช้แท็กรูปภาพ มีกำหนดดังนี้

{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %}

สินทรัพย์ผสม

คุณสามารถรวมไฟล์หลาย ๆ ไฟล์เป็นไฟล์เดียว ซึ่งจะช่วยลดจำนวนคำขอ HTTP และสร้างประสิทธิภาพของส่วนหน้ามากขึ้น

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}