Twig est un moteur de template , il nous permet de gérer notre html en différent blocs. Dans les fichier .twig le php est interdit.
Twig est disponible en tant que librairie php via Composer avec la commande : composer install twig/twig
Ressource : Packagist
Twig est une fonctionnalité de Symfony sous le modèle MVC.
Pour rappel sous le modèle MVC : model View Controller notre site fonctionnera de la manière suivante :
La vu qui sera retourner au client sera donc une page .twig
Le squelette de symfony nous offre une arborescence avec :
- un layout qui sera étendu dans toutes les autres pages (menu / footer)
- nos autres pages où l'on incrustera le contenu
Exemple d'un layout :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
<!-- Block qui contient le titre depuis le controller -->
{% block title %}Welcome!{% endblock %}
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-hVpXlpdRmJ+uXGwD5W6HZMnR9ENcKVRn855pPbuI/mwPIEKAuKgTKgGksVGmlAvt" crossorigin="anonymous">
{% block stylesheets %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<img class="m-2" src="https://img.icons8.com/officel/52/000000/beer.png">
<a class="navbar-brand" href="/index">Bread Beer Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/index">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/boutique">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/inscription">S'inscrire</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/connexion">Se Connecter</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
<footer class="bg-dark p-3 text-center">Ceci est le pied de page :D</footer>
</body>
</html>{% extends 'base.html.twig' %} : Extention d'affichage du layout
{% block %} : ouverture d'un block de contenu
{% endblock %} : fermeture du block