Bonjour à tous, 

Alors je vous exprime mon besoin, qui est assez complexe et je ne sais comment gérer tout cela.

J'ai un premier formulaire "Trouver un point de retrait". Une fois que les champs sont remplis et que l'on fait la recherche, il y a une carte qui apparait en dessous de la ville avec un marker sur les points de retrait et la liste sur la gauche. Les informations ne doivent pas être envoyés en base de données mais il faut que j'arrive à les recupérer pour faire ma requête d'affichage.

Le bouton search appel une fonction qui est dans mon controller.

J'ai ensuite un deuxième formulaire, indépendant du premier car sinon il faut qu'il soit rempli pour faire la recherche ce qui n'est pas top.

Par contre je souhaite que les 2 formulaires soient envoyés en base de données lorsque l'on cliquera sur le bouton submit (qui n'existe pas encore, lol !) du deuxième formulaire.

Le code twig de mes formulaires :

 {{ form_start(formLoc) }}
    <div class="row">
        <div class="col-md-4"> {{ form_row(formLoc.dateDebutLoc) }} </div>
        <div class="col"> {{ form_row(formLoc.heureDebutLoc) }} </div>
    </div>

    <div class="row">
        <div class="col-md-4"> {{ form_row(formLoc.dateFinLoc) }} </div>
        <div class="col-md-6"> {{ form_row(formLoc.heureFinLoc) }} </div>
    </div> 

    </br> </br>


    <div class="row">
        <label>Ville de retrait : </label>
        <div class="col-md-6"><input type="text" id="city" class="form-control" placeholder="Choisissez votre ville"
                name="search" value="toulon"></div>
        <div class="col-md-1"><img src="img/loupe.png" class="form-control" width="25px"> </div>
        <div class="col-md-2"><input type="text" id="nbDialLoue" class="form-control" name="nbDialLoue" value="3"></div>
        <button id="searchVille"> SEARCH </button>
    </div>
</br> </br>
   
     <table>
        <tr>  
            <td border="1px, solid, black">
                <form method="POST">
                    <table >
                        <tbody id="liste">
                        
                        </tbody> 
                    </table>
                </form>
            </td>
            <td>
                <div id="map">
                        <!-- Ici s'affichera la carte -->
                </div>
            </td>
        </tr>
    </table>
    {{ form_end(formLoc)}}

    {{ form_start(formUtil) }}
    <div class="col-md-12">
        <h2>Renseignements clients</h2> </br>
    </div>

    <div class="row">
        <div class="col-md-6">
            {{ form_row(formUtil.prenom, {'attr' : {'placeholder' : "Entrez votre Prénom"}}) }} </div>
        <div class="col-md-6"> {{ form_row(formUtil.nom, {'attr' : {'placeholder' : "Entrez votre Nom"}}) }}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12"> {{ form_row(formUtil.dateNaissance) }} </div>
    </div>

    <div class="row">
        <div class="col-md-12"> {{ form_row(formUtil.infos) }} </div>
    </div>

    {{ form_end(formUtil)}}
    

Le code de mon controlleur :

 /**
     * @Route("/loc_dial", name="loc_dial")
     */
    public function form(Location $loc = null, LoueurRepository $repo, Request $request, ObjectManager $manager) {
        
        dump($request);
       
        $loc = new Location();
        $util = new Utilisateur();

        $form = $this->createForm(LocationType::class, $loc);
        $form->handleRequest($request);

        $formUtil = $this->createForm(UtilisateurType::class, $util);
        $formUtil->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $manager->persist($loc);
            $manager->flush();

            return $this->redirectToRoute('home');
        }

        return $this->render('loc_dial/index.html.twig', [
            'controller_name' => 'LocDialController',
            'formLoc' => $form->createView(),
            'formUtil' => $formUtil->createView(),
           // 'listeLoueurs' => $this->allLoueursXml($repo)
        ]);
    }

Comment puis-je faire pour récupérer les dates de réservation et passer les informations à ma requête ?

Comment lier les 2 formulaires pour persister les données en base de données ?

Salut,

EDIT - en fait mal lu et mal compris la demande.

Il me semble que sur Symfony tu peux faire un seul formulaire avec deux entités différentes, à revérifier dans la doc, mais ça t'éviterait d'avoir deux formulaires. 

Pour ta recherche (affichage de carte) tu dois avoir rempli tout le premier formulaire? 

-
Edité par Ryukotsei 16 septembre 2019 à 11:43:50

Bonjour Ryukotsei,

EDIT - suite à ton EDIT. lol !

Je te remercie de ta réponse. En effet avec Twig je peux faire un seul formulaire et c'est ce que j'avais fait au depart sauf que je devais remplir l'ensemble pour avoir l'affichage au clic du search.

Et pour répondre à ta question oui, le premier formulaire doit être entièrement rempli avant de cliquer sur le search. Je gère dejà la ville et le nombre de dial en Ajax.

Maintenant il me reste à récupérer les dates pour effectuer cette requête que j'ai mise en repository. Pour le moment je ne prends que la date de début de loc mais à terme je devrais prendre aussi la date de fin.

public function findAllLoueursWithDialDispo ($dateDebutLoc) {
        $entityManager = $this->getEntityManager();
    
        $query = $entityManager->createQuery(
            'SELECT *
             FROM location_balise_dial lbd
             RIGHT JOIN location loc ON loc.id = lbd.location_id
             RIGHT JOIN balise_dial bal ON bal.id = lbd.balise_dial_id
             WHERE bal.fonctionnel = true
             AND loc.date_debut_loc NOT IN ("2019-09-22")
             OR loc.date_debut_loc IS NULL'
        )->setParameter('dateDebutLoc', $dateDebutLoc);

         // returns an array of Product objects
         return $query->execute();
    }

-
Edité par ElodieMartin13 16 septembre 2019 à 11:55:07

Cette fonction est celle appelée par ton bouton search? Effectivement j'ai vu que ton bouton search n'était pas un submit. Sur le coup, j'avais mal compris la situation. 

Si tu veux récupérer les dates et les envoyer par ajax (si je comprends bien), tu peux récupérer la valeur de ces champs en javascript. Tu mes un id sur ta balise et récupères sa valeur ensuite, que tu envoie par ajax. 

$('#ma_date_debut').val();

A tester pour voir si cela te renvoie bien ce que tu veux par la suite. Après j'espère que j'ai bien compris ce que tu veux faire 

-
Edité par Ryukotsei 16 septembre 2019 à 12:03:40

Alors mon bouton search appel une fonction ajax qui appel la fonction allLoueursXml de mon controller (code dans mon premier message) qui elle appel la function findAllLoueursWithDialDispo (code dans mon 2eme message)  qui fait la requête.

Alors non, les dates je veux les récupérer en php et je pense que je dois le faire dans ma fonction allLoueursXML vu que c'est elle qui passe la requête.

Normalement en php je ferais un $_POST['name de mon input'] mais avec twig je ne sais pas comment gérer la chose...

Seulement mon formulaire est créé dans la fonction form de mon controller (code dans mon premier message)

EDIT : Même si mon bouton search n'est pas un submit, le formulaire le prend ainsi et me fait un INSERT INTO

-
Edité par ElodieMartin13 16 septembre 2019 à 12:34:58

Salut,

sous Symfony, tu as les Form Events qui te permettent de soumettre dynamiquement ton formulaire pour afficher des champs en plus, en fonction des champs déjà remplis:

https://symfony.com/doc/current/form/events.html

Bonjour Ralchimist,

Merci pour ton retour, je vais étudier tout ca.

Et pour la récupération des données qui sont en twig ? 

pour accéder à tes variables POST depuis ton controller: $request->request->get("name");

concernant ton problème de bouton, il faut préciser le type="button" sinon il est effectivement considéré comme un submit.

Bon alors je n'ai pas de message d'erreur et plus rien ne se passe.

La function qui est appelé dans mon controller :

 /**
     * @Route("/loc_dial/allLoueursXml/{dateDebutLoc}", name="all_loueurs_xml")
     * @param Date $dateDebutLoc;
     */
    public function allLoueursXml(LocationRepository $repo, Request $request, $dateDebutLoc) {
        dump($dateDebutLoc);
        $data = $request->request->get("formLoc.dateDebutLoc");
        var_dump($data);
        $loueurs = $repo->findAllLoueursWithDialDispo ($data);
        var_dump($loueurs);

Voici le twig dont je dois récuperer la valeur pour la transmettre à ma requête :

     <div class="col-md-4"> {{ form_row(formLoc.dateDebutLoc) }} </div>

Et j'ai modifié mon bouton : <buttontype="button"id="searchVille"> SEARCH </button>

Par contre je ne comprends pas comment le form events fonctionne. Apparement faudrait que je rajoute un builder avec un addEventListener la ou je crée mon formulaire pour faire afficher la liste. Sauf que je fais afficher cette liste grâce à ma requête ajax

en fait l’intérêt du FormEvents c'est de remplacer ta requête Ajax, enfin plus exactement de la faire différemment afin d'avoir un formulaire valide.

Peux-tu nous montrer ta fonction javascript?

Si tu veux continuer avec ta requête AJAX, il faut que dans ton script tu envoies la valeur de ton champ dateDebutLoc via Ajax:

var dateDebutLoc = $("#id_de_ton_champ").val();
$.ajax({              
      url : 'taroute',
      type : 'POST',
      evalScripts : true,
      data : "dateDebutLoc="+dateDebutLoc ,
      dataType : 'html',
      success : function(code_html){ 
                    //affichage
      }
});

Voici ma requête Ajax, mais la première chose à faire n'est-elle pas de réussir à récupérer mes valeurs pour pouvoir faire ma requête ?

import initMap from './map.js';

// Initialisation de la liste des loueurs à proximité
var listeObjects = [];
// Initialisation de la liste des loueurs
var listeLoueurs = [];
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp = new XMLHttpRequest();

} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// Récupération du fichier Xml
xmlhttp.open("GET", "/loc_dial/allLoueursXml", false);
xmlhttp.overrideMimeType("text/xml");
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;

var x = xmlDoc.getElementsByTagName("marker");

// Parcours du fichier xml et intégration de chaque item au tableau
for (var i = 0; i < x.length; i++) {
    var loueur = x[i].outerHTML;
    loueur = loueur.slice(6, -2);
    loueur = loueur.split('" ');
    listeLoueurs.push(loueur);
}


// Appel à Ajax  pour récupérer les coordonnées d' une ville choisie par l'utilisateur 
$("#searchVille").click(function () {
    // Récupération de la ville rentrée par l'utilisateur 
    var wantedCity = $("#city").val();
    var nbDialLoue = $('#nbDialLoue').val();
    // Récuperation des données en Json 
    const url = "https://geo.api.gouv.fr/communes?nom=" + wantedCity + "&format=geojson";

    $.ajax({
        "async": true,
        "url": url,
        "type": "GET",
        "success": function (data, status) {
            var parsedResponse = data.features;

            // Calcul de la distance entre 2 coordonnées GPS
            function distance(lat1, lon1, lat2, lon2, unit) {
                if ((lat1 == lat2) && (lon1 == lon2)) {
                    return 0;
                } else {
                    var radlat1 = Math.PI * lat1 / 180;
                    var radlat2 = Math.PI * lat2 / 180;
                    var theta = lon1 - lon2;
                    var radtheta = Math.PI * theta / 180;
                    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
                    if (dist > 1) {
                        dist = 1;
                    }
                    dist = Math.acos(dist);
                    dist = dist * 180 / Math.PI;
                    dist = dist * 60 * 1.1515;
                    if (unit == "K") {
                        dist = dist * 1.609344
                    }
                    if (unit == "N") {
                        dist = dist * 0.8684
                    }
                    return dist;
                }
            }

            // Récupération des attributs des villes
            for (var i = 0; i < parsedResponse.length; i++) {
                var current_city = parsedResponse[i].properties.nom;
                var current_coord = parsedResponse[i].geometry.coordinates;

                // Vérification que la ville choisie par l'utilisateur existe et récupération des infos
                if (current_city.toLowerCase() == wantedCity.toLowerCase()) {
                    /* $("#villeClient").html("Ville : " + current_city +
                         " - coordonnées GPS : latitude : " + current_coord[1] +
                         " , longitude " + current_coord[0]);*/

                    var latVilleUtil = current_coord[1];
                    var lngVilleUtil = current_coord[0];

                    // Affichage des loueurs à proximité de la ville choisie
                    for (var j = 0; j < listeLoueurs.length; j++) {
                            var idLoueur = listeLoueurs[j][0].slice(6);
                            var latLoueur = parseFloat(listeLoueurs[j][5].slice(5));
                            var lngLoueur = parseFloat(listeLoueurs[j][6].slice(5));
                            var villeLoueur = listeLoueurs[j][4].slice(7, 50);
                            var nomLoueur = listeLoueurs[j][1].slice(5);
                            var nbDial = listeLoueurs[j][7].slice(8, -1);
                            //console.log(nbDial);
                            var dist = distance(latVilleUtil, lngVilleUtil, latLoueur, lngLoueur, "K");
                            var loueurObject = {
                                "id": idLoueur,
                                "nom": nomLoueur,
                                "ville": villeLoueur,
                                "latitude": latLoueur,
                                "longitude": lngLoueur,
                                "distance": dist,
                                "nbDial": nbDial,
                                " ": '<br>'
                            };
                            if (nbDial >= nbDialLoue ) {
                                listeObjects.push(loueurObject);
                            }
                        //$.each(loueurObject, function (key, value) {
                        //   $("#nom").append(key + " : " + value );  
                        //})  
                    };
                    listeObjects.sort(function (a, b) {
                        return parseFloat(a.distance) - parseFloat(b.distance);
                    })
                    listeObjects = listeObjects.filter(function (element) {
                        return element.distance <= 30
                    })

                    console.log('liste', listeObjects);
                }
            }

            initMap(listeObjects);

            function choiceList() {

                var table = document.getElementById("liste");

                for (var k = 0; k < listeObjects.length; k++) {
                    var id = listeObjects[k].id;
                    var nom = listeObjects[k].nom;
                    var ville = listeObjects[k].ville;
                    var distance = listeObjects[k].distance;

                    var row = table.insertRow(k);
                    var cell1 = row.insertCell(0);
                    var cell2 = row.insertCell(1);

                    cell1.innerHTML = '<input type=radio name=choiceLoueur[] id=choiceLoueur value=' + id + '>';
                    cell2.innerHTML = '<label for=' + id + '>' + nom + '<br>' + ville + '<br>' + distance + '<br></label>';
                }
            }
            choiceList();
        },


        // Gestion des erreurs
        error: function (error) {
            console.log(" Error:" + error);
        }

    });
});

Je pense qu'il y a un problème de logique.

Tu appelles ta page via

xmlhttp.open("GET", "/loc_dial/allLoueursXml", false);

et ce, au chargement de ton script, et non lors du clic sur le bouton. C'est donc normale que tu ne puisses pas récupérer la date choisie.

Il faut soit que tu mettes la partie "// Récupération du fichier XLM" à l'intérieur de ra fonction AJAX. Tu pourras ainsi passer en paramètre de l'url la valeur de ta dateDebutLoc.

Hello,

Re EDIT EDIT : Oui bien vu ! 

Alors je recupère ma date en JS

$("#searchVille").click(function () {
   //Récupération de la date de début de location
   
   var jourDebutLoc = $("select[name='location[dateDebutLoc][day]'] > option:selected").text();
   var moisDebutLoc = $("select[name='location[dateDebutLoc][month]'] > option:selected").val();
   var anneeDebutLoc = $("select[name='location[dateDebutLoc][year]'] > option:selected").text();
   var dateDebutLoc = moisDebutLoc + "-" + jourDebutLoc + "-" + anneeDebutLoc ;
   console.log('date : ', dateDebutLoc);
   
    // Récupération du fichier Xml
    xmlhttp.open("GET", "/loc_dial/allLoueursXml?dateDeb=".dateDebutLoc, false);
    xmlhttp.overrideMimeType("text/xml");
    xmlhttp.send();
    var xmlDoc = xmlhttp.responseXML;

.....

Par contre Je ne suis pas certaine de la syntaxe pour passer au php la date en paramètre dans l'URL

Et dans mon controler, dois-je gérer ainsi le paramètre ?

/**
     * @Route("/loc_dial/allLoueursXml{$dateDebutLoc}", name="all_loueurs_xml")
     * @param Date $dateDebutLoc
     */
    public function allLoueursXml(LocationRepository $repo, $dateDebutLoc) {
        //dump($dateDebutLoc);
        
        $loueurs = $repo->findAllLoueursWithDialDispo ($dateDebutLoc);
        //$loueurs = $repo->findAll();
        //var_dump($loueurs);

        $listeLoueurs = ['marker' => []];
        foreach ($loueurs as $loueur) {
            $listeLoueurs['marker'][] = [
                '@id' => $loueur->getId(), 
                '@nom' => $loueur->getNom(),
                '@adresse' => $loueur->getAdresse(),

-
Edité par ElodieMartin13 17 septembre 2019 à 14:22:00

Bonsoir!

pour la syntaxe, il suffit de réfléchir comme si tu devais écrire ton url normalement (souvent comme c'est du JS on se complique la vie^^):

Si ta route c'est:

@Route("/loc_dial/allLoueursXml/{dateDebutLoc}", name="all_loueurs_xml")

 Alors ton url sera:

xmlhttp.open("GET", "/loc_dial/allLoueursXml/"+dateDebutLoc, false);

 Au passage, j'en profite pour te conseiller d'utiliser le FOSJSRoutingBundle pour la gestion des url dans ton javascript:

https://symfonycasts.com/screencast/webpack-encore-legacy/fos-js-routing-bundle

(et même de suivre tout ce tuto sur l'utilisation de Webpack)

Bonjour Ralchimist,

Merci pour ta réponse.

Par contre, je me suis rendue compte que mon URL servait à récupérer les infos de mon fichier PHP.

Là, je dois faire un POST à mon fichier PHP du paramètre.

J'ai testé :

xmlhttp.open("POST", "/loc_dial/allLoueursXml/"+dateDebutLoc, false);

Mais apparement ce n'est pas la bonne syntaxe. Je pense que PHP ne reçoit pas mon paramètre car il ne retourne rien.

Voici mon erreur :

 GET http://127.0.0.1:8000/loc_dial/allLoueursXml 404 (Not Found)

Je vais potasser ton lien sur FOSJSRoutingBundle. Merci

console.log('date : ', dateDebutLoc);

 te retourne bien la date? Car l'erreur semble indiqué qu'il cherche la route pour "

http://127.0.0.1:8000/loc_dial/allLoueursXml

 et non pour

http://127.0.0.1:8000/loc_dial/allLoueursXml/yyyy-mm-dd

 Attention aussi au format de ta date dans ton JS: ça doit être yyyy-mm-dd (actuellement tu as mis mm-dd-yyyy)

Tu n'as pas besoin de faire un POST puisque ton paramètre (la date) est passée dans l'URL.

Oui mon console.log me renvoie bien la date, et le format est bon, j'ai modifié depuis et oublié de mettre à jour ici.

date :  2020-06-06

Voici mes routes :

 // Envoi du paramètre au Controller
   xmlhttp.open("GET", "/loc_dial/allLoueursXml"+dateDebutLoc, false);
   
    // Récupération du fichier Xml
    xmlhttp.open("GET", "/loc_dial/allLoueursXml", false);

Il parait que j'aurais oublié un préfixe, mais je ne comprends pas ce que je dois mettre.

Comment puis-je savoir si mon controler reçoit bien la date et s'il l'a passe bien à ma requête ?

Je ne comprends pas comment FOSJSRoutingBundle pourrait m'aider pour ma route...

-
Edité par ElodieMartin13 18 septembre 2019 à 12:07:28

pourquoi tu fais 2 fois le xmlhttp.open?

Car sur ta 1e instruction ta route est bonne, mais sur la deuxième il manque une date pour correspondre à ta route qui est:

@Route("/loc_dial/allLoueursXml/{dateDebutLoc}", name="all_loueurs_xml")

Je crois que je n'ai pas tout compris.

Ce que je veux faire : 

1- Créer une route pour faire passer le paramètre date à mon controller

2 - Créer une route pour récupérer le résultat de la requête retravailler par le controller.

Comment dois-je m'y prendre ?

ok le problème vient de ta compréhension des routes ! (je t'invite à relire les cours Symfony sur le sujet!)

Sous Symfony, "créer une route" signifie attribuer une URL (et un nom), avec ou sans paramètre, à une méthode d'un controller.
En pratique: dans un controller, tu mets l'annotation:

/**
@Route("/loc_dial/allLoueursXml/{dateDebutLoc}", name="all_loueurs_xml")
*/

 juste avant ta méthode:

public function allLoueursXml(LocationRepository $repo, Request $request, $dateDebutLoc) { /*ton code*/ }

 Et voila ta route est créée! Et pour "passer" ton paramètre, tu as juste à ajouter "/2019-09-18" à l'URL "/loc_dial/allLoueursXml"

Donc si tu veux accéder à ta méthode (via ta route donc), il suffit d'appeler l'URL ou le nom.
Par exemple dans Twig, on utilise le nom de la route. Tu écrirais:

{{ path('all_loueurs_xml', {'dateDebutLoc':'2019-09-18'}) }}

Dans ton javascript tu n'as besoin d'écrire que: (ça récupère le résultat de ta requête en fonction de ton paramètre)

xmlhttp.open("GET", "/loc_dial/allLoueursXml/"+dateDebutLoc, false);

 Si dateDebutLoc = "2019-09-08", xlmttp va essayer d'ouvrir la page se trouvant à l'adresse "/loc_dial/allLoueursXml/2019-09-18"

et si tu utilises FOSJSRouting, ça te permettrait d'utiliser le nom à la place de l'URL et tu écrirais:

xmlhttp.open("GET", Routing.generate("all_loueurs_xml", {dateDebutLoc:dateDebutLoc})

Bonjour,

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/requete-php-sous-symfony4

Je ferme ce sujet. En cas de désaccord, me contacter par MP.