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 :

Données Json -> controller Symfony


Sujet :

Symfony PHP

  1. #1
    Futur Membre du Club
    Données Json -> controller Symfony
    Bonsoir,

    Actuellement je cherche à manipuler des données issues d'une requête Ajax, visant une API(TMDB). Coté front je récupère donc sans problème mes data en format Json celà depuis une recherche sans intégrer un formulaire symfony, et donc simplement un champ input dans la vue twig. J'ai donc bien une route dédié à cette fonction recherche mais je ne sais comment récupérer ces données Json de la recherche pour les manipuler dans le controller.. l'idée au finale étant de récupérer les propriétés d'un film pour ensuite les stocké en bdd.

    Si des personnes pouvant m'éclairer..
    Merci d'avance.



    Bonne soirée.
    Bon WE.

  2. #2
    Membre habitué
    Salut,

    Si je comprend bien, tu as une fonction javascript qui récupère des données depuis un input. Tu souhaites envoyer ces données grâce à une requête Ajax vers ton contrôleur Symfony et tu cherches comment les récupérer depuis ce contrôleur pour les manipuler ?

    Si tu passes ces données via la méthode "POST", il te faut utiliser l'objet Reques: Symfony request object

    En espérant avoir correctement compris pour t'avoir orienté comme il faut!

    Cordialement,
    Skunka.
    Traverse les rues ...

    Git: https://github.com/BlueSkunka

    Débutant à vie

  3. #3
    Futur Membre du Club
    Salut,
    Merci de ta réponse.

    Alors oui, cependant est-ce que je dois faire une autre requete dans mon script JS indiquant la route adéquate.
    Dans ma vue Twig pour le moment je n'ai qu'un input relier a mon script js. Aucun formulaire Symfony basé sur entité n'a été créer pour la vue Twig.


    Cordialement.

  4. #4
    Membre habitué
    Salut,

    Pas besoin d'une requête supplémentaire mais juste une petite astuce que j'utilise sur mes projets. Comme tu n'as pas mis ton code, je vais essayer d'être clair mais dans le cas où tu n'as pas tout compris, n'hésite pas à mettre ton code dans la discussion

    J'imagine que tu as un bouton sur lequel tu as ajouté un eventListener pour déclencher ton script js. Tu peux rajouter à ce bouton un attribut que je nomme "path" et lui mettre comme valeur ta route grâce à Twig:
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    <button path="{{ path('nom_route') }}">Valider</button>


    Ainsi, tu n'as plus qu'à récupérer cet attribut dans ton script js afin de définir le chemin de ta requête AJAX.

    Cordialement,
    Skunka.
    Traverse les rues ...

    Git: https://github.com/BlueSkunka

    Débutant à vie

  5. #5
    Futur Membre du Club
    Ca sera évidemment plus clair en partageant mon code

    Script JS
    Code JavaScript :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
     
     
    /**
     * Appel API Recherche Films [GET Search]
     * @function getMovies
     */
    function getMovies() {
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                //* Si la requete est terminée et que la réponse est prête||Status OK
                var data = JSON.parse(this.response); // * Données JSON traitées
                console.log(data);
                for (i = 0; i < data.results.length; i++) {
                    Aff_cardMovies(data);
                    // valid_msg(success);
                }
            } else if (this.readyState === 4 && this.status === 404) {
                alert("Erreur 404 :/");
            }
        };
        xhr.open(
            "GET",
         baseURL +
            "search/movie?api_key=" +
            key +
            "&language=" +
            lang +
            "&query=" +
            saisie_movie.value,
            true
        ); //* Initialisation de l'objet avant de l'envoyé | Asynchrone
        xhr.send(); //Envoi de la requête vers serveur
    }


    Controller.php
    Code php :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
      /**
         * @Route("/movie/search", name="movie_search")
         */
        public function search()
        {
     
     
            return $this->render('movie/search.html.twig', [
     
            ]);
        }


    Vue 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
     
    {% extends 'base.html.twig' %}
    {% block title %}Search{% endblock %}
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
        {{ encore_entry_link_tags('search') }}
    {% endblock %}
     
    {% block body %}
        <h1 class="title">Rechercher un film</h1>
        <div class="search-bar">
            <label for="search_input"></label>
            <input type="search" id="search_input" class="input"
                   placeholder="Saisir un film..">
            <button class="search-btn" id="search_btn" type="submit">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="row row-cols-1 row-cols-md-6" id="cardgroup">
            {# Affichage de la liste des cards #}
        </div>
     
        {% block javascripts %}
            {{ encore_entry_script_tags('tmdb') }}
        {% endblock %}
    {% endblock %}

  6. #6
    Membre habitué
    De ce que je vois dans ton script js, tu renseigne déjà la route que tu souhaites requêter, dans ce cas pas besoin de mon astuce ^^

    Comment se déroule ton processus actuellement ? Arrives-tu à requêter ton contrôleur ou non ? Arrives-tu à traiter les informations envoyées à ton contrôleur ou non ? Arrives-tu à retourner une réponse à ton script js ou non ? Je me suis un peu perdu dans tout ça et je ne vois plus clairement où se situe ton problème actuel ^^
    Traverse les rues ...

    Git: https://github.com/BlueSkunka

    Débutant à vie

  7. #7
    Futur Membre du Club
    Citation Envoyé par Skunka Voir le message
    De ce que je vois dans ton script js, tu renseigne déjà la route que tu souhaites requêter, dans ce cas pas besoin de mon astuce ^^

    Comment se déroule ton processus actuellement ? Arrives-tu à requêter ton contrôleur ou non ? Arrives-tu à traiter les informations envoyées à ton contrôleur ou non ? Arrives-tu à retourner une réponse à ton script js ou non ? Je me suis un peu perdu dans tout ça et je ne vois plus clairement où se situe ton problème actuel ^^
    Eh bien là je récupère sans problème les datas après communication avec l'API, dans le but de faire apparaitre une liste de film sous la forme de cards(créer en JS). Ces datas cependant je souhaite les manipuler coté BACK puisque j'aimerais par exemple une fois la liste de cards affichés, ajouté un film en question vers la bdd (d'où mon titre du sujet).

    Si c'est plus claire..

  8. #8
    Membre habitué
    Donc le script js que tu m'as fournis correspond à ta requête vers l'api pour récupérer des données de film et non soumettre un film à ton contrôleur ?

    Si c'est le cas, il te faut effectivement créer une fonction javascript qui enverra les données d'un film à ton serveur.

    En me basant sur ton code, quand tu crées une card pour un film, tu as sûrement un bouton du genre "Sauvegarder en base" sur lequel tu peux placer l'évènement onclick avec les données du film comme paramètre pour faire appel à ta nouvelle fonction javascript.
    Cella va gérer la requête AJAX, en méthode GET.
    L'url sera celle de la fonction de ton contrôleur que tu as définis via annotations.
    Dans ton contrôleur, tu utilisera l'objet Request de Symfony afin de récupérer les données de ton film (je t'avais mis un lien dans un précédent message si besoin).
    Une fois les données récupérer, tu n'as plus qu'a créer un nouvel objet "Film" (ou suivant comment tu as nommées ces objets dans ton projet) pour le persist vers ta base.
    Pour finir, ton contrôleur va retourner une réponse JSON à ton script pour afficher un message d'erreur ou de succès à l'utilisateur.

    J'ai bien cerné ce que tu souhaites faire (récupérer des films via API puis choisir parmi les films ceux que tu souhaites save en bdd?) et j'espère t'avoir décris correctement le processus. Je pense que tu devrais pouvoir y arriver mais si après plusieurs essaies tu restes bloqués, n'hésites pas à revenir en me montrant ton code mis à jour (nouvelle fonction js, fonction add_card(), contrôleur et ta classe Film ou équivalent).
    Traverse les rues ...

    Git: https://github.com/BlueSkunka

    Débutant à vie

  9. #9
    Futur Membre du Club
    Voilà, pour le moment aucune soumission vers le controlleur.

    Alors j'ai effectivement un bouton d'ajouter de créer en js, sur lequel je peux ajouter un EventListener
    ScriptJS
    Code JavaScript :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
    function aff_cards(data){
    ....
    ...
    // * ADD BTN
        let add_btn = document.createElement("button");
        add_btn.innerText = "Ajouter"
        add_btn.className = "btn_add";
        add_btn.addEventListener('click', function(){
           send(data);
        })
    }
     
    function send(dataMovies) {
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
               // Mes datas
            } else if (this.readyState === 4 && this.status === 404) {
                alert("Erreur 404 :/");
            }
            xhr.open('GET', '/movie/search', true);
            xhr.send();
        }
    }


    Pour cette fonction, comment je récupère du coup les data à l'issue de la requête pour ensuite les passer dans ma fonction send() ? malgré la portée des variables et paramètres, ce n'est aps pris en compte

    Code JavaScript :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
    function getMovies() {
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                //* Si la requete est terminée et que la réponse est prête||Status OK
                let data = JSON.parse(this.response); // * Données JSON traitées
                console.log(data);
                for (i = 0; i < data.results.length; i++) {
                    Aff_cardMovies(data);
                    // valid_msg(success);
                }
            } else if (this.readyState === 4 && this.status === 404) {
                //* Affichage d'un message d'erreur si status invalide
                alert("Erreur 404 :/");
            }
        };
        xhr.open(
            "GET",
            baseURL +
            "search/movie?api_key=" +
            key +
            "&language=" +
            lang +
            "&query=" +
            saisie_movie.value,
            true
        ); //* Initialisation de l'objet avant de l'envoyé | Asynchrone
        xhr.send(); //Envoi de la requête vers serveur
    }

###raw>template_hook.ano_emploi###