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

Discussion :

Template twig sous Symfony [4.x]


Sujet :

Symfony PHP

  1. #1
    Membre régulier
    Profil pro
    Service comptabilité
    Inscrit en
    avril 2007
    Messages
    84
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Service comptabilité
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : avril 2007
    Messages : 84
    Points : 74
    Points
    74
    Par défaut 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:

    Nom : connexion.JPG
Affichages : 30
Taille : 24,7 Ko

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

    Nom : oubli.JPG
Affichages : 29
Taille : 20,9 Ko

    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 averti
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    255
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 255
    Points : 428
    Points
    428
    Par défaut
    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/bootstrap4.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
    Profil pro
    Service comptabilité
    Inscrit en
    avril 2007
    Messages
    84
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Service comptabilité
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : avril 2007
    Messages : 84
    Points : 74
    Points
    74
    Par défaut


    Cela fonctionne parfaitement

    Eric

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 09/01/2017, 16h26
  2. Templates Word 2010 twig pour Symfony 2
    Par Krikou1 dans le forum Symfony
    Réponses: 4
    Dernier message: 27/06/2016, 17h00
  3. Apprendre le moteur de templates Twig dans Symfony
    Par dukoid dans le forum Symfony
    Réponses: 0
    Dernier message: 02/04/2016, 23h02
  4. Templates twig sous Visual Studio
    Par madara22 dans le forum Visual Studio
    Réponses: 0
    Dernier message: 11/04/2015, 17h13
  5. [2.x] Twig template pour sous domain
    Par Flopp dans le forum Symfony
    Réponses: 1
    Dernier message: 13/11/2014, 08h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo