register form, bootstrap 4, modal

**lifala** · 14/01/2019, 00h51

Salut a tous.

je découvre symfony 4 et j'essais de coder quelques lignes.

je viens d'utiliser la doc pour mettre en place un formulaire d'inscription : https://symfony.com/doc/current/doct...tion_form.html

du coup j'ai pu enregistrer des utilisateurs dans une base de donnée.

je voudrais utiliser une fenêtre modal pour le formulaire mais j'ai une erreur de variable

j'ai donc un "base.html.twig" dans lequel j'inclue "modal_form.html.twig" avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    {% include 'modal_form.html.twig' %}

le fichier modal contiendrais le formulaire

Code html :

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
<div class="modal fade" id="registerLifala" tabindex="-1" role="dialog" aria-labelledby="signLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signLabel"><em class="fa fa-user-plus"></em> <?php echo MOD_SIGN1A ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="<?php echo MOD_CLOSE ?>">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{ form_start(registrationForm) }}
        {{ form_row(registrationForm.username) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.termsAccepted) }}
 
        <button class="btn">S'inscrire</button>
    {{ form_end(registrationForm) }}
 
    </div>
  </div>
</div>

mais j'ai une erreur il ne trouve pas la variable "registrationform"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

La variable "registrationForm" n'existe pas.

Voila si vous désirer voir d'autre fichier demander moi.

merci encore a tous. bonne soirée.

**_Thomas** · 14/01/2019, 01h25

Salut,

Est-ce dans ton contrôleur, tu passes bien une variable $registrationForm à la méthode render ?
(quelque chose comme ce qui suit)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
return $this->render('modal_form.html.twig', [
    'registrationForm' => $form->createView(),
]);

Si c'est bien le cas, vérifie le type et le contenu de $form (vérifie que le formulaire a été créé tel qu'indiqué dans la doc : https://symfony.com/doc/current/form...lding-the-form)

**lifala** · 14/01/2019, 01h58

oui j'ai bien la variable dans la methode render. j'ai du modifier le nom du fichier pour "modal_form"

Pour construire le formulaire d'inscription j'ai utilisé cette doc de symfony

https://symfony.com/doc/current/doct...tion_form.html

il a donc tout construit pour moi, jusqu'au rendu dans une page ./register (register.html.twig)

Code html :

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
{% extends 'base.html.twig' %}
 
{% block title %}Register{% endblock %}
 
{% block body %}
    <h1>Inscrivez-vous</h1>
 
    {{ form_start(registrationForm) }}
        {{ form_row(registrationForm.username) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.termsAccepted) }}
 
        <button class="btn">S'inscrire</button>
    {{ form_end(registrationForm) }}
 
{% endblock %}

mais quand je déplace le formulaire dans la page modal il ne trouve plus la variable "registrationForm" et je ne comprend pas ce qui coince car avec l'installation de la doc ça fonctionne, c'est dès que je veux déplacer le formulaire dans un modal que ça ne fonctionne plus.

il faudrait lui indiquer ou trouver cette variable mais je ne vois pas comment arranger tout ça.

merci et bonne soirée.

**_Thomas** · 14/01/2019, 14h14

Est-ce que tu peux stp montrer le code de ton controller et des deux templates Twig (le base et le register) ?

**lifala** · 14/01/2019, 19h08

Envoyé par _Thomas

Est-ce que tu peux stp montrer le code de ton controller et des deux templates Twig (le base et le register) ?

Salut.

en suivant le doc j'ai donc un RegistrationController.php en plus de mon controller de base

Code php :

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
39
40
41
42
43
44
45
46
47
48
49
50
<?php
 
namespace App\Controller;
 
use App\Entity\User;
use App\Form\RegistrationFormType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;
 
class RegistrationController extends AbstractController
{
    /**
     * @Route("/register", name="app_register")
     */
    public function register(Request $request, UserPasswordEncoderInterface $passwordEncoder): Response
    {
        $user = new User();
        $form = $this->createForm(RegistrationFormType::class, $user);
        $form->handleRequest($request);
        dump($user);
 
        if ($form->isSubmitted() && $form->isValid()) {
            // encode the plain password
            $user->setPassword(
                $passwordEncoder->encodePassword(
                    $user,
                    $form->get('plainPassword')->getData()
                ),
                    $user->setcreatedAt(new \DateTime()),
                    $user->setactivated(0)
                );
 
 
            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($user);
            $entityManager->flush();
 
            // do anything else you need here, like send an email
 
            return $this->redirectToRoute('devosi');
        }
 
        return $this->render('modal_form.html.twig', [
            'registrationForm' => $form->createView(),
        ]);
    }
}

la doc nous fournis un template, template/registration/register.html.twig

Code html :

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
 
{% extends 'base.html.twig' %}
 
{% block title %}Register{% endblock %}
 
{% block body %}
    <h1>Inscrivez-vous</h1>
 
    {{ form_start(registrationForm) }}
        {{ form_row(registrationForm.username) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.termsAccepted) }}
 
        <button class="btn">S'inscrire</button>
    {{ form_end(registrationForm) }}
 
{% endblock %}

et j'aimerai mettre mon formulaire dans un modal.
j'ai donc un fichier base.html.twig dans lequel j'inclue modal_form.html.twig

Code html :

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
 
<div class="modal fade" tabindex="-1" id="registerLifala" role="dialog" aria-labelledby="signLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signLabel"><em class="fa fa-user-plus"></em> MOD_SIGN1A</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="CLOSE">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
 
        {{ form_start(registrationForm) }}
          {{ form_row(registrationForm.username) }}
          {{ form_row(registrationForm.email) }}
          {{ form_row(registrationForm.plainPassword) }}
          {{ form_row(registrationForm.termsAccepted) }}
 
          <button class="btn">S'inscrire</button>
        {{ form_end(registrationForm) }}
 
    </div>
  </div>
</div>

merci

EDIT:

En utilisant la méthode précédente je mets mon include à la fin du fichier base.html.twig et j'ai donc une erreur

Code html :

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
 
..../...../.....
        </div>
    </footer>
    </div>
 
 
    {% block javascripts %}{% endblock %}
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
            {% include 'modal_form.html.twig' %}
 
 
  </body>
</html>

La variable "registrationForm" n'existe pas.

j'ai essayé de modifier cela et de mettre mon include dans le block body

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
.../.../...
 
    <div class="container">
 
        {% block body %}
 
            {% include 'modal_form.html.twig' %}
 
        {% endblock %}
 
.../.../...

avec le include dans le block body j'ai la page qui charge bien mais je ne peux pas afficher ma fenêtre modal avec le formulaire, quand je clique sur le bouton inscription rien ne ce passe.

voici les deux bouton, dans le header de base.html.twig

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
                       &nbsp;<a class="btn btn-outline-primary" href="#" data-toggle="modal" data-target="#registerLifala">Inscription</a>&nbsp;
			&nbsp;<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#loginToufik">Connexion</a>&nbsp;

**_Thomas** · 14/01/2019, 20h08

Est-ce que dans le code de la page qui fonctionne (celle sans erreur), tu vois le code HTML de ta modale et du formulaire ?

Si oui, vérifie que les scripts JS/CSS nécessaires à la modale Bootstrap sont eux aussi bien inclus dans le code HTML de la page et regarde dans la console JavaScript de ton navigateur s'il n'y a pas d'erreur lors du clic.

**lifala** · 14/01/2019, 21h04

le code bootstrap fonctionne pour la modal pas de soucis.

c'est a partir du moment ou je remplace le form classic de la modal par le form symfony que ça ne fonctionne plus.

voici le fichier modal avant modif pour le code symfony

Code html :

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
<div class="modal fade" id="registerLifala" tabindex="-1" role="dialog" aria-labelledby="signLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signLabel"><em class="fa fa-user-plus"></em> <?php echo MOD_SIGN1A ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="<?php echo MOD_CLOSE ?>">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="register_form" method="post" style="margin:10px;">
              <div class="form-group">
                <label for="nom">Pseudo</label>
                <input type="text" placeholder="Entrez votre pseudo" id="pseudo" name="pseudo" maxlength="16" class="form-control" required/>
              </div>
              <div class="form-group">
                <label for="pass1">Mot de passe</label>
                <input type="password" placeholder="6 caractères minimum" id="pass1" name="pass1" class="form-control" required/>
              </div>
              <div class="form-group">
                <label for="pass2">Confirmez votre mot de passe</label>
                <input type="password" id="pass2" name="pass2" class="form-control" required/>
              </div>
              <div class="form-group">
                <label for="email">Votre adresse e-mail</label>
                <input type="email" placeholder="pseudo@devosi.org" id="email" name="email" class="form-control" required/>
              </div>
              <div id="status" class="alert alert-primary" role="alert">
                Merci de remplir tous les champs.
              </div>
      </div>
        <div class="modal-footer">
          <input type="submit" id="bRegister" class="btn btn-primary btn-sm" value="S'inscrire" />
        </div>
        </form>
    </div>
  </div>
</div>

si je laisse le code par defaut après avoir suivis la doc tout est ok.

la page register contient le formulaire symfony, mes fenetre modal s'affiche avec le code html ...

mais dès que je remplace le formulaire, boum fonctionne plus.

**_Thomas** · 14/01/2019, 22h07

Si la page de base (/register) fonctionne bien, jajouter du simple code HTML en plus dedans ne devrait pas impacter les fonctions Twig chargées du rendu...

Ton register.html.twig ressemble bien à quelque chose comme ça ?

Code :

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
{% extends 'base.html.twig' %}
 
{% block title %}Register{% endblock %}
 
{% block body %}
    <h1>Register</h1>
	<div class="modal fade" id="registerLifala" tabindex="-1" role="dialog" aria-labelledby="signLabel" aria-hidden="true">
	  <div class="modal-dialog modal-dialog" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="signLabel"><em class="fa fa-user-plus"></em>Modal title</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body">
			{{ form_start(registrationForm) }}
			  {{ form_row(registrationForm.username) }}
			  {{ form_row(registrationForm.email) }}
			  {{ form_row(registrationForm.plainPassword) }}
			  {{ form_row(registrationForm.termsAccepted) }}
 
			  <button class="btn">S inscrire</button>
			{{ form_end(registrationForm) }}
		  </div>
			<div class="modal-footer">
			  <input type="submit" id="bRegister" class="btn btn-primary btn-sm" value="S'inscrire" />
			</div>
			</form>
		</div>
	  </div>
	</div>
{% endblock %}

A priori de ce que je comprends de Symfony, ça devrait fonctionner (reste ensuite à afficher les boutons et à afficher la modal lors du clic, mais le HTML de la page devrait contenir le formulaire).

**lifala** · 14/01/2019, 22h41

merci de ton aide.

si je met tout le code dans le html de la page register effectivement ça fonctionne. mais dans la page register.

Ma page base.html.twig contient le header et le footer avec les boutons nécessaire. Du coup les boutons connexion et inscription sont dispo sur toutes les pages, et ça ouvre un modal avec le form peu importe la page.

si tu vois le résultat que je cherche

peu être en précisant un path dans le href="" ?

**_Thomas** · 14/01/2019, 23h21

En cherchant un peu (et si je comprends bien que ce que tu veux obtenir comme résultat), j'ai trouvé cette page dans la documentation : https://symfony.com/doc/current/temp...ntrollers.html

Apparemment il est possible d'appeler un contrôleur depuis un template Twig via la méthode render, donc dans ton base.html.twig il faudrait appeler le contrôleur actuellement exécuté quand tu accès à la route /register avec quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{ render(controller('App\\Controller\\RegistrationController::register')) }}

Par contre ça risque d'impacter le fonctionnement de ta page /register, mais si la modale est visible partout la route /register n'est plus vraiment utile je pense.

register form, bootstrap 4, modal

Symfony PHP

Discussions similaires

Partager

Partager