Créer sa première page avec Twig ( le moteur de templates )

Accueil » Créer sa première page avec Twig ( le moteur de templates )

Gérons les vues grâce à nos controlleurs. C’est à dire grâce aux controlleurs de Symfony. On va pouvoir écrire , récupérer du code et ensuite l’afficher sur no vues. Dans ce tutoriel nous utilisions Twig

Qu’est ce que c’est que Twig

Twig est un moteur de template moderne pour PHP

Rapide: Twig compile les modèles en code PHP optimisé. La surcharge par rapport au code PHP normal a été réduite au minimum.
Sécurisé: Twig dispose d’un mode sandbox pour évaluer le code de modèle non approuvé. Cela permet à Twig d’être utilisé comme langage de modèle pour les applications où les utilisateurs peuvent modifier la conception du modèle.
Flexible: Twig permet au développeur de définir ses propres balises et filtres personnalisés et de créer son propre DSL.

Dès que vous souhaitez rendre un modèle, vous devez faire en sorte que votre contrôleur étende AbstractController.

Evidemment, un contrôleur n’a pas besoin d’étendre cette classe de base. Symfony ne se soucie pas vraiment de cela. Mais, vous étendrez généralement AbstractController pour une raison simple: il nous donne des méthodes de raccourci de code.

MonController.php

<?php

namespace App\Controller;


use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;

class MonController extends AbstractController
{
    /**
     * @Route("/home", name="home")
     */
    public function hello2()
    {
        return $this->render('blog/index.html.twig', [
        ]);
    }
}

La première fonction utile est : render. Nous pouvons dire: return this-> render () et passez deux arguments.

Ecrivons notre fichier vue, puis on l’enregistre dans templates puis blog/ index.html.twig

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Twig</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

Ma première page avec Twig

</body>
</html>

Ou si vous souhaitez avoir un page 100% HTML avec BootStrap 3

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>Column 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
    </div>
</div>

</body>
</html>

J’accède donc à public/home soit pour moi : http://localhost/symfony5/public/home

Créer sa première page avec Twig ( le moteur de templates )

Qu’est ce que c’est que Twig

Nos top cours