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

Bonjour,

Oui : avec un appel JS/Ajax.

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 ?

Bonjour mazertys17,

Citation:

Envoyé par mazertys17

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 :)

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:

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à).

Citation:

Envoyé par mazertys17

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

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:

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

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

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:

<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:

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:

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

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:

<button id="bouton-sauvegarde">Sauvegarder</button>
Code:

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:

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);