Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Template twig sous Symfony


Sujet :

Symfony PHP

  1. #1
    Membre régulier
    Template twig sous Symfony
    Bonjour,

    j'ai récupéré les sources d'un espace membre sur : https://geekco.fr/blog/mini-serie-cr...-symfony-4-1-5

    et ai changé le thème. Je n'arrive pas à obtenir un visuel identique sur l'ensemble des templates. Voici vers quoi je veux tendre:



    mais voilà ce que j'obtiens sur un deuxième template



    le code de mon template base.html.twig:

    Code twig :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>
                {% block title %}
                    DDFIP03
                {% endblock %}
            </title>
            {% block stylesheets %}
                <link rel="stylesheet" href="/css/bootstrap.min.css" />
            {% endblock %}
        </head>
        <body>
     
            {% block menu %}
    			{{include('menu.html.twig')}}
            {% endblock %}
     
     
            {% block flash %}
                {{include('flash.html.twig')}} 
            {% endblock %}
     
            {% block body %}
            {% endblock %}
            <script src="/js/jquery.min.js"></script>
            <script src="/js/popper.min.js"></script>
            <script src="/js/bootstrap.min.js"></script>
            {% block javascripts %}
            {% endblock %}
        </body>
    </html>


    le code de mon template login.html.twig:

    Code twig :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    {% extends('base.html.twig') %}
     
    {% block body %}
        <p></p>
        <div class="container">
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                    <div class="col-md-6">
                        <div class="bg-light py-3 px-3">
                            <h2 class="text-center">Veuillez vous connecter !</h2>
                            <form action="{{ path('connexion') }}" method="post">
                                <div class="form-group">
                                    {% if error %}
                                        <div class="callout warning">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                    {% endif %}
                                    <label for="username">Identifiant</label>
                                    <input type="text" id="username" name="_username" class="form-control" value="{{ last_username }}" required/>
                                </div>
                                <div class="form-group">
                                    <label for="password">Mot de passe:</label>
                                        <input type="password" id="password" name="_password" class="form-control" required/>
                                    <p></p>
                                    <p>
                                        <a href="{{path('request_resetting')}}">Mot de passe oublié ?</a>
                                    </p> 
                                </div>
                                <div class="form-group">
                                    <input type="hidden" name="_target_path" value="{{ path('account') }}"/>
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >
                                    <button type="submit" class="btn btn-success">Connexion</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}


    le code de mon template request.html.twig qui me pose des problèmes:

    Code twig :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    {% extends('base.html.twig') %}
     
    {% block body %}
     <p></p>
        <div class="container">
                <div class="row">
                    <div class="col-md-3">&nbsp;</div>
                        <div class="col-md-6">
                            <div class="bg-light py-3 px-3">
                                <h2>Mot de passe oublié ?</h2>
                                <p>Réinitialisez votre mot de passe en renseignant votre BALF.</p>
                                {#<div class="form-group">#}
                                    {{form_start(form)}}
                                    {{form_row(form.email)}} 
                                    <p></p>                           
                                    <button class="btn btn-success" type="submit">Envoyer</button>
                                    {{form_end(form)}}
                                {#</div>#}
                            </div>
                        </div>
                </div>
            </div>
        </div>
    {% endblock %}


    J'ai été sur le site de Symfony https://symfony.com/doc/4.1/referenc...reference.html sans succès.

    Pouvez vous SVP m'aiguiller dans ma démarche?

    Merci

    Eric

  2. #2
    Membre confirmé
    Salut,

    La différence semble venir du fait que le formulaire de login est écrit en HTML directement dans le template Twig, alors que le formulaire de mot de passe oublié utilise le composant Form de Symfony pour générer le HTML. A priori vu le résultat, ce dernier ne sait pas qu'il "doit" utiliser un "Form Theme" Boostrap pour générer les champs.

    Pour remédier à cette situation : https://symfony.com/doc/current/form...ootstrap4.html
    Soit de manière globale en modifiant le fichier config/packages.twig.yaml (ainsi tous les formulaires générés par Symfony utiliseront ce thème), soit de manière restreinte à ce formulaire précis en ajoutant {% form_theme form 'bootstrap_4_layout.html.twig' %} dans le ou les template(s) Twig souhaités.

  3. #3
    Membre régulier


    Cela fonctionne parfaitement

    Eric