Symfony-ビューエンジン

ビューレイヤーは、MVCアプリケーションのプレゼンテーションレイヤーです。アプリケーションロジックをプレゼンテーションロジックから分離します。

コントローラがHTML、CSS、またはその他のコンテンツを生成する必要がある場合、コントローラはタスクをテンプレートエンジンに転送します。

テンプレート

テンプレートは基本的に、HTML、XMLなどのテキストベースのドキュメントを生成するために使用されるテキストファイルです。時間を節約し、エラーを減らすために使用されます。

デフォルトでは、テンプレートは2つの異なる場所に配置できます-

app/Resources/views/−アプリケーションのviewsディレクトリには、アプリケーションのレイアウトとアプリケーションバンドルのテンプレートを含めることができます。また、サードパーティのバンドルテンプレートを上書きします。

vendor/path/to/Bundle/Resources/views/ −各サードパーティバンドルの「Resources / views /」ディレクトリにテンプレートが含まれています。

小枝エンジン

symfonyはと呼ばれる強力なテンプレート言語を使用しています Twig。Twigを使用すると、非常に簡単な方法で簡潔で読みやすいテンプレートを作成できます。Twigテンプレートはシンプルで、PHPタグを処理しません。Twigは、空白の制御、サンドボックス化、および自動HTMLエスケープを実行します。

構文

Twigには、3種類の特別な構文が含まれています-

  • {{ ... }} −変数または式の結果をテンプレートに出力します。

  • {% ... %} −テンプレートのロジックを制御するタグ。主に関数を実行するために使用されます。

  • {# ... #}−コメント構文。1行または複数行のコメントを追加するために使用されます。

小枝ベーステンプレートはにあります “app/Resources/views/base.html.twig”。

例

小枝エンジンを使用した簡単な例を見てみましょう。

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() メソッドはテンプレートをレンダリングし、そのコンテンツをResponseオブジェクトに配置します。

次に、「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タグを使用して、テンプレートを別のテンプレートから拡張できます。その構文は次のとおりです-

{% extends "template.html" %}

ブロック

ブロックはプレースホルダーとして機能し、コンテンツを置き換えます。ブロック名は、英数字とアンダースコアで構成されます。例えば、

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

埋め込む

ザ・ embedtagは、includeとextendsの両方の組み合わせを実行します。別のテンプレートのコンテンツを含めることができます。また、テンプレートを拡張する場合など、含まれているテンプレート内で定義されているブロックをオーバーライドすることもできます。その構文は次のとおりです-

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

フィルタ

フィルタセクションを使用すると、テンプレートデータのブロックに通常のTwigフィルタを適用できます。例えば、

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

ここでは、テキストが大文字に変更されます。

にとって

Forループは、各アイテムを順番にフェッチします。例えば、

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

場合

ザ・ ifTwigのステートメントはPHPに似ています。式はtrueまたはfalseに評価されます。例えば、

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

フィルター

小枝にはフィルターが含まれています。レンダリングされる前にコンテンツを変更するために使用されます。以下は、注目すべきフィルターの一部です。

長さ

長さフィルターは、文字列の長さを返します。その構文は次のとおりです-

{% 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('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でサポートされている日付と時刻の形式のいずれかである必要があります。

2番目の引数としてタイムゾーンを渡すことができます。

投げ捨てる

ダンプ関数は、テンプレート変数に関する情報をダンプします。例えば、

{{ 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

レイアウト

レイアウトは、複数のビューの共通部分、つまりページヘッダーやフッターを表します。

テンプレートの継承

テンプレートは別のテンプレートで使用できます。これは、テンプレート継承の概念を使用して実現できます。テンプレートの継承により、ブロックとして定義されたWebサイトのすべての一般的な要素を含む基本的な「レイアウト」テンプレートを構築できます。

テンプレートの継承についてさらに理解するために、簡単な例を見てみましょう。

例

「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 / Resources / views / default /index.html.twig」にあるインデックステンプレートファイルに移動します。以下の変更を追加します。

index.html.twig

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

ここでは、 {% extends %}タグは、最初に基本テンプレートを評価するようにテンプレートエンジンに通知します。基本テンプレートは、レイアウトを設定し、ブロックを定義します。次に、子テンプレートがレンダリングされます。子テンプレートは、基本レイアウトを拡張し、タイトルブロックをオーバーライドできます。ここで、URL「http：// localhost：8000」をリクエストすると、その結果を取得できます。

資産

アセットは、CSSスタイルシート、JavaScriptファイル、画像ファイルなどのWebアセットのURL生成とバージョン管理を管理します。

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タグを使用できます。それは次のように定義されます。

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

複合資産

多くのファイルを1つに組み合わせることができます。これにより、HTTPリクエストの数が減り、フロントエンドのパフォーマンスが向上します。

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved