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

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2014
    Messages
    461
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2014
    Messages : 461
    Points : 100
    Points
    100
    Par défaut Incrémenter une valeur en appuyant sur un bouton sans recharger le formulaire
    Bonjour,

    J'aimerais savoir s'il est possible d'incrémenter une valeur dans la $_SESSION['ex'] par exemple en appuyant sur un bouton sans recharger le formulaire (avec form) ?

    Merci si vous avez une idée

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 023
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 023
    Points : 32 821
    Points
    32 821
    Par défaut
    Bonjour,

    Oui : avec un appel JS/Ajax.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2014
    Messages
    461
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2014
    Messages : 461
    Points : 100
    Points
    100
    Par défaut
    jreaux62 Merci pour ta réponse.

    Ca a l'air très intéressant mais dans mon cas je cherche quelque chose de plus simple.

    Utiliser un bouton qui va incrémenter une donnée dans $_SESSION[] par exemple sans passer par le serveur et sans recharger la page.

    Est-ce que c'est possible ?

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 021
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 021
    Points : 6 547
    Points
    6 547
    Par défaut
    Bonjour mazertys17,
    Citation Envoyé par mazertys17 Voir le message
    incrémenter une donnée dans $_SESSION[] […] sans passer par le serveur
    Les données de session se trouvent sur le serveur, tu ne peux pas les manipuler sans impliquer le serveur à un moment ou un autre. Mais peut-être que tu pourrais manipuler à la place des données côté client uniquement ? Explique-nous ton problème un peu plus en détails
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2014
    Messages
    461
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2014
    Messages : 461
    Points : 100
    Points
    100
    Par défaut
    Watilin Merci pour ta réponse...

    Je suis débutant en dév web donc dsl pour le manque de clareté.

    Je développe un petit jeu par navigateur qui stock des données sur un data center. Le but est de développer une cité au fil des jours/heures.

    EX : j'ai une population et je peux décider de faire venir plus de gens. J'ai alors deux bouton sur lesquels je peut changer le flux entrant de personnes :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    	<form method="post" action = '.$page.' enctype="multipart/from-data" >
    			<input type = "submit" value = "+ 100personnes/jour" name="populationFluxA"/> 
    			<input type = "submit" value = "- 100personnes/jour" name="populationFluxB"/> 
    		</form>
    Dans mon cas j'utilise form a défaut d'autre chose pour changer le flux entrant (par exemple cliquer 3 fois pour obtenir +300p/jour), je stock le flux sur mon serveur externe et a la prochaine connexion du joueur je calculerai combien de personnes seront entrés en fonction de son flux et du temps écoulé.

    Ce que j'aimerai faire c'est gérer tout un tas de paramètres comme celui ci localement et n'envoyer tous ces changements au serveur distant (data center) qu'à l'actualisation globale...afin de ne pas gaspiller et perdre du temps pour rien.
    Et permettre au joueur de cliquer confortablement et rapidement sur tout un tas de bouton sans chargements pénibles.

    Ca je l'ai fais avec $_SESSION...et si j'ai bien compris, quand tu dis $_SESSION[] est sur le serveur, c'est bien le serveur local non ? (géré par le navigateur de l'utilisateur).

    Et ce que j'aimerai faire idéalement c'est tout simplement un bouton autre que form qui permette a l'utilisateur d'appuyer dessus sans que ça fasse de formulaire mais stock dirrectement la valeur incrémenté localement et se base sur la valeur locale qui aura été chargé à la connexion.

    Je sais pas d'ailleurs si c'est possible ou sinon comment faire pour éviter que tout soit systématiquement rechargé ?
    (c'est peut être bête comme chou mais j'ai pas connaissance de methode pour faire celà).

  6. #6
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 021
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 021
    Points : 6 547
    Points
    6 547
    Par défaut
    Citation Envoyé par mazertys17 Voir le message
    je stock le flux sur mon serveur externe et a la prochaine connexion du joueur je calculerai combien de personnes seront entrés en fonction de son flux et du temps écoulé.
    Ça me semble une bonne façon de faire, j’ai vu de nombreux autres jeux fonctionner comme ça.

    Citation Envoyé par mazertys17 Voir le message
    Ce que j'aimerai faire c'est gérer tout un tas de paramètres comme celui ci localement et n'envoyer tous ces changements au serveur distant (data center) qu'à l'actualisation globale...afin de ne pas gaspiller et perdre du temps pour rien.
    Et permettre au joueur de cliquer confortablement et rapidement sur tout un tas de bouton sans chargements pénibles.
    Pour stocker des données localement il y a l’API localStorage qui est très facile à utiliser :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    let machin = localStorage.getItem("machin");
    if (null === machin) {
      machin = "valeur par défaut";
    }
     
    // --- ailleurs dans le code ---
     
    localStorage.setItem("machin", machin);
    Citation Envoyé par mazertys17 Voir le message
    Ca je l'ai fais avec $_SESSION...et si j'ai bien compris, quand tu dis $_SESSION[] est sur le serveur, c'est bien le serveur local non ? (géré par le navigateur de l'utilisateur).
    Tu as un serveur local seulement si tu en as installé un (WAMPServer, MAMP, LAMP, EasyPHP, etc.). Ce n’est pas le navigateur qui gère ça. Même quand le navigateur et le serveur sont sur la même machine, il s’agit de deux logiciels différents qui ne communiquent entre eux qu’en échangeant des requêtes / réponses HTTP.
    Dans ton navigateur, tu peux voir les requêtes dans l’onglet « réseau » du panneau d’outils F12.

    Citation Envoyé par mazertys17 Voir le message
    Et ce que j'aimerai faire idéalement c'est tout simplement un bouton autre que form qui permette a l'utilisateur d'appuyer dessus sans que ça fasse de formulaire mais stock dirrectement la valeur incrémenté localement et se base sur la valeur locale qui aura été chargé à la connexion.
    Alors on a un bouton :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button id="le-bouton">Test +100</button>
    (Je te laisse rajouter du CSS pour modifier l’apparence du bouton.)


    Et on a la valeur du serveur, qui provient de $_SESSION. Il est facile de l’injecter dans le code HTML de manière invisible, par exemple dans un <input type="hidden"> ou dans une balise de script isolée.
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script>
     
    const fluxInitial = <?= $_SESSION['flux'] ?>;
    localStorage.setItem("flux", fluxInitial);
     
    </script>
    Utilise Ctrl+U dans ton navigateur pour voir le code JavaScript généré.

    En général on préfère éviter de faire générer du code JS par PHP, car c’est le meilleur moyen de s’embrouiller, entre autres avec les guillemets. Et puis ça crée de la confusion entre la logique client et la logique serveur.

    Dans le cas présent, on a juste besoin que PHP génère une donnée statique (pas du code JS qui produit une action) donc on s’autorise une balise <script> prévue uniquement pour ça, et isolée du reste pour bien marquer notre intention.

    Dans une autre balise <script>, on va commencer par s’assurer qu’on travaille au moment où le DOM est prêt. Pour ça on utilise l’évènement "DOMContentLoaded". Ensuite, on récupère une référence sur le bouton et on surveille ses évènements "click" :

    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
    document.addEventListener("DOMContentLoaded", function () {
      "use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode
     
      const leBouton = document.getElementById("le-bouton");
     
      leBouton.addEventListener("click", function (event) {
        let flux = localStorage.getItem("flux");
     
        // on convertit en nombre car localStorage stocke tout sous forme de string
        flux = Number.parseInt(flux, 10);
     
        flux += 100;
     
        // touche F12, onglet « console » pour voir les logs
        console.log("+100 -> ", flux);
     
        // à la fin, on remet dans le stockage
        localStorage.setItem("flux", flux);
      });
    });
    Citation Envoyé par mazertys17 Voir le message
    Je sais pas d'ailleurs si c'est possible ou sinon comment faire pour éviter que tout soit systématiquement rechargé ?
    (c'est peut être bête comme chou mais j'ai pas connaissance de methode pour faire celà).
    Avec tout ce que je t’ai montré, tu as une application capable de stocker une information mais pas de la communiquer au serveur. Si tu recharges la page, toutes les modifications sont perdues. Il faudrait mettre en œuvre une ou plusieurs des solutions suivantes :
    • sauvegarder automatiquement toutes les x secondes / minutes ;
    • proposer un bouton pour sauvegarder manuellement ;
    • faire une sauvegarde du dernier moment lorsque la page est fermée, voir ce sujet récent.


    Dans tous les cas, on utilise la mécanique ajax. On trouve de nombreux tutos sur ajax sur le Web, donc je vais juste te montrer un exemple de code. Je prends le cas du bouton car c’est ce qui me semble le plus simple :
    (Edit 26/07/2019 : retiré setRequestHeader, il n’était pas utile, le Content-Type est géré automatiquement avec FormData)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button id="bouton-sauvegarde">Sauvegarder</button>
    Code JS : 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
      // dans la fonction "DOMContentLoaded"
      const boutonSauv = document.getElementById("bouton-sauvegarde");
     
      boutonSauv.addEventListener("click", function (event) {
        const fData = new FormData();
        fData.append("flux", localStorage.getItem("flux"));
        // plus tard, s’il y a d’autres données à envoyer, tu pourras les ajouter à fData
     
        const req = new XMLHttpRequest();
        req.open("POST", "sauvegarde.php");
     
        req.onerror = function () {
          alert("Le serveur n’a pas pu être atteint, veuillez vérifier votre connexion et réessayer");
        };
     
        req.onload = function () {
          // on fera en sorte que le script serveur renvoie un objet JSON :
          // { "ok": "ok" } si tout va bien
          // { "erreur": <un message d’erreur> } en cas de problème
          const jsonResponse = JSON.parse(req.responseText);
          if (jsonResponse.ok) {
            alert("Les données ont été sauvegardées !");
          }
          else {
            alert("Il y a eu un problème :\n" + jsonResponse.erreur);
          }
        };
     
        req.send(fData);
      });

    Et le script serveur, sauvegarde.php :
    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
    <?php
     
    // il faut commencer par contrôler la session
    if (!session_id()) {
        $response = [ 'erreur' => 'Le joueur ou la joueuse doit être authentifiée' ];
    }
    else {
        session_start();
     
        // par précaution, on filtre les données POST
        $filters = [
            'flux' => true
        ];
        $filteredPOST = array_intersect_key($_POST, $filters);
     
        // pour bien faire il faudrait également filtrer les valeurs
        // par exemple on sait que $_POST['flux'] est censé être un nombre, donc
        // on pourrait utiliser intval()
     
        foreach ($filteredPOST as $key => $value) {
          $_SESSION[$key] = $value;
        }
     
        // petite optimisation : on ferme la session dès qu’on a fini de s’en servir
        session_commit();
     
        $response = [ 'ok' => 'ok' ];
    }
     
    header('Content-Type: application/json');
    echo json_encode($response);
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

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

Discussions similaires

  1. [XL-2010] Incrémenter une variable en cliquant sur un bouton
    Par tony76 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 08/11/2016, 02h54
  2. [XL-2010] Selectionner plusieurs valeurs dans une listbox en appuyant sur un bouton
    Par Marc31 dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 26/11/2015, 12h52
  3. [XL-2010] Imprimer les valeurs d'une listbox en appuyant sur un bouton
    Par Marc31 dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 21/10/2015, 10h51
  4. [PHP 5.1] Affecter une valeur en cliquant sur un bouton
    Par pasbonte dans le forum Langage
    Réponses: 7
    Dernier message: 28/12/2008, 11h30
  5. Comment Appuyer sur le bouton d'une page web...?
    Par Mayti4 dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 23/01/2005, 15h07

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