Symfony - Lihat Mesin

Tampilan Lapisan adalah lapisan presentasi aplikasi MVC. Ini memisahkan logika aplikasi dari logika presentasi.

Saat pengontrol perlu menghasilkan HTML, CSS, atau konten lainnya, pengontrol meneruskan tugas ke mesin template.

Template

Template pada dasarnya adalah file teks yang digunakan untuk menghasilkan dokumen berbasis teks seperti HTML, XML, dll. Template digunakan untuk menghemat waktu dan mengurangi kesalahan.

Secara default, templat dapat berada di dua lokasi berbeda -

app/Resources/views/- Direktori tampilan aplikasi dapat berisi tata letak dan templat aplikasi Anda dari bundel aplikasi. Ini juga menggantikan template bundel pihak ketiga.

vendor/path/to/Bundle/Resources/views/ - Setiap bundel pihak ketiga berisi templatnya di direktori "Resources / views /".

Mesin Ranting

Symfony menggunakan bahasa templating yang kuat yang disebut Twig. Twig memungkinkan Anda untuk menulis template yang ringkas dan mudah dibaca dengan cara yang sangat mudah. Template ranting sederhana dan tidak akan memproses tag PHP. Twig melakukan kontrol spasi, kotak pasir, dan pelolosan HTML otomatis.

Sintaksis

Twig berisi tiga jenis sintaks khusus -

  • {{ ... }} - Mencetak variabel atau hasil ekspresi ke template.

  • {% ... %} - Sebuah tag yang mengontrol logika template. Ini terutama digunakan untuk menjalankan suatu fungsi.

  • {# ... #}- Sintaks komentar. Ini digunakan untuk menambahkan komentar tunggal atau banyak baris.

Templat dasar ranting terletak di “app/Resources/views/base.html.twig”.

Contoh

Mari kita lihat contoh sederhana menggunakan mesin ranting.

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'); 
   } 
}

Di sini render() metode membuat template dan meletakkan konten itu ke dalam objek Respon.

Sekarang pindah ke direktori "views" dan buat folder "student" dan di dalam folder itu buat file "home.html.twig". Tambahkan perubahan berikut pada file.

home.html.twig

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

Anda bisa mendapatkan hasilnya dengan meminta url "http: // localhost: 8000 / student / home".

Secara default, Twig hadir dengan daftar panjang tag, filter, dan fungsi. Mari kita bahas satu per satu secara detail.

Tag

Twig mendukung tag penting berikut -

Melakukan

Itu dotag menjalankan fungsi yang mirip dengan ekspresi reguler dengan pengecualian tidak mencetak apa pun. Sintaksnya adalah sebagai berikut -

{% do 5 + 6 %}

Sertakan

Pernyataan include menyertakan template dan mengembalikan konten yang dirender dari file itu ke namespace saat ini. Sintaksnya adalah sebagai berikut -

{% include 'template.html' %}

Memperluas

Tag extends dapat digunakan untuk memperluas template dari yang lain. Sintaksnya adalah sebagai berikut -

{% extends "template.html" %}

Blok

Blok berfungsi sebagai placeholder dan menggantikan konten. Nama blok terdiri dari karakter alfanumerik dan garis bawah. Sebagai contoh,

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

Menanamkan

Itu embedtag melakukan kombinasi antara penyertaan dan perluasan. Ini memungkinkan Anda untuk memasukkan konten template lain. Ini juga memungkinkan Anda untuk mengganti blok apa pun yang ditentukan di dalam template yang disertakan, seperti saat memperluas template. Sintaksnya adalah sebagai berikut -

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

Saring

Bagian filter memungkinkan Anda untuk menerapkan filter Twig biasa pada satu blok data template. Sebagai contoh,

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

Di sini, teks akan diubah menjadi huruf besar.

Untuk

Forloop mengambil setiap item secara berurutan. Sebagai contoh,

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

Jika

Itu ifPernyataan di Twig mirip dengan PHP. Ekspresi terevaluasi menjadi benar atau salah. Sebagai contoh,

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

Filter

Ranting berisi filter. Ini digunakan untuk mengubah konten sebelum dirender. Berikut adalah beberapa filter penting.

Panjangnya

Filter panjang mengembalikan panjang string. Sintaksnya adalah sebagai berikut -

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

Menurunkan

Filter bawah mengonversi nilai menjadi huruf kecil. Sebagai contoh,

{{ 'SYMFONY'|lower }}

Itu akan menghasilkan hasil sebagai berikut -

symfony

Demikian pula, Anda dapat mencoba huruf besar.

Menggantikan

Filter ganti memformat string tertentu dengan mengganti placeholder. Sebagai contoh,

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

Ini akan menghasilkan hasil sebagai berikut -

tutorials point website

Judul

Filter judul mengembalikan versi kasus judul dari nilai tersebut. Sebagai contoh,

{{ 'symfony framework '|title }}

Ini akan menghasilkan hasil sebagai berikut -

Symfony Framework

Menyortir

Filter pengurutan mengurutkan array. Sintaksnya adalah sebagai berikut -

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

Memangkas

Filter trim memotong spasi (atau karakter lain) dari awal dan akhir string. Sebagai contoh,

{{ '  Symfony!  '|trim }}

Ini akan menghasilkan hasil sebagai berikut -

Symfony!

Fungsi

Ranting mendukung fungsi. Ini digunakan untuk mendapatkan hasil tertentu. Berikut adalah beberapa fungsi Twig yang penting.

Atribut

Itu attributefungsi dapat digunakan untuk mengakses atribut "dinamis" dari variabel. Sintaksnya adalah sebagai berikut -

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

Sebagai contoh,

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

Konstan

Fungsi konstanta mengembalikan nilai konstanta untuk string tertentu. Sebagai contoh,

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

Siklus

Siklus fungsi siklus pada larik nilai. Sebagai contoh,

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

Tanggal

Mengubah argumen menjadi tanggal untuk memungkinkan perbandingan tanggal. Sebagai contoh,

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

Ini akan menghasilkan hasil sebagai berikut -

Choose your location before May 15, 2017

Argumen harus dalam salah satu format tanggal dan waktu yang didukung PHP.

Anda dapat memberikan zona waktu sebagai argumen kedua.

Membuang

Fungsi dump membuang informasi tentang variabel template. Sebagai contoh,

{{ dump(user) }}

Max

Fungsi max mengembalikan nilai terbesar dari suatu urutan. Sebagai contoh,

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

Min

Fungsi min mengembalikan nilai terkecil dari suatu urutan. Sebagai contoh,

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

Sertakan

Fungsi include mengembalikan konten template yang dirender. Sebagai contoh,

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

Acak

Fungsi acak menghasilkan nilai acak. Sebagai contoh,

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

Jarak

Fungsi Range mengembalikan daftar yang berisi perkembangan aritmatika dari bilangan bulat. Sebagai contoh,

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

Ini akan menghasilkan hasil sebagai berikut -

1,2,3,4,5

Tata Letak

Layout merepresentasikan bagian umum dari beberapa tampilan, misalnya, header halaman, dan footer.

Warisan Template

Template dapat digunakan oleh yang lain. Kita dapat mencapai ini menggunakan konsep pewarisan template. Pewarisan template memungkinkan Anda membuat template "tata letak" dasar yang berisi semua elemen umum situs web yang ditetapkan sebagai blok.

Mari kita ambil contoh sederhana untuk memahami lebih lanjut tentang warisan template.

Contoh

Pertimbangkan template dasar yang terletak di "app / Resources / views / base.html.twig". Tambahkan perubahan berikut pada file.

base.html.twig

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

Sekarang pindah ke file template indeks yang terletak di "app / Resources / views / default / index.html.twig" . Tambahkan perubahan berikut di dalamnya.

index.html.twig

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

Di sini {% extends %}tag menginformasikan mesin template untuk mengevaluasi terlebih dahulu template dasar, yang menyiapkan tata letak dan menentukan blok. Template anak kemudian dirender. Templat anak dapat memperluas tata letak dasar dan mengganti blok judul. Sekarang, minta url "http: // localhost: 8000" dan Anda bisa mendapatkan hasilnya.

Aktiva

Aset mengelola pembuatan URL dan pembuatan versi aset web seperti CSS stylesheet, file JavaScript, dan file gambar.

JavaScript

Untuk menyertakan file JavaScript, gunakan javascripts tag di template apa pun.

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

Stylesheet

Untuk menyertakan file stylesheet, gunakan stylesheets tag di template apa pun

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

Gambar-gambar

Untuk memasukkan gambar, Anda dapat menggunakan tag gambar. Ini didefinisikan sebagai berikut.

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

Aset Majemuk

Anda dapat menggabungkan banyak file menjadi satu. Ini membantu mengurangi jumlah permintaan HTTP, dan menghasilkan kinerja front-end yang lebih baik.

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