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.

register form, bootstrap 4, modal

Symfony PHP

Vue hybride

Discussions similaires

Partager

Partager