Compteur de Personnes manuel en direct. [Résolu]

Signaler
-
 Mentinecle -
Bonjour,

J'essaye de trouver une solution plutôt simple et efficace.
Avec la réouverture des magasins, je voudrais, pour un évènement, avoir informatiquement, un compteur de personnes ENTREE/SORTIE=nombre_intérieur_magasin

J'ai une personne à l'entrée (A), chaque client qui passe on appuie sur le +
J'ai une personne à la sortie (B), chaque personne qui sort, on appuie sur le -

La personne A sait en temps réel, le nombre de clients dans le magasin, pour stopper un temps les entrées.

Pour être plus claire. Voici un exemple qui me plait bien, mais que je ne peux utiliser "en direct"
https://codepen.io/mburridge/pen/MWKoxMy


Connaissez-vous une solution?


Merci.

Configuration: Windows / Chrome 86.0.4240.198

2 réponses

Messages postés
31088
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
3 193
Bonjour,

le code que tu nous montres c'est du html/javascript.

Je pense que tu voudrais que ce compteur soit accessible depuis plusieurs appareils .... et dans ce cas, il va te falloir un serveur (ou au moins un ordi qui se trouverai sur le même réseau afin d'en émuler un) et un langage serveur ( comme du php ) et une base de données ( mysql par exemple )

Bonjour Jordane,

En effet, la solution du php/mysql m'avait traversé l'esprit.
J'avais en tête quelque chose qui me paraissait plus simple :

J'essaye de modifier l'exemple de mon poste, pour enregistrer chaque + et chaque - dans un fichier texte, généré en php.
En gros. lorsque je vais cliquer sur le + mon "compteur.txt" enregistrera le "1" puis le 2,3,4,5.... idem pour le -
Sur mon écran d'affichage, je viens appeler sur une page compteur.php quelque chose comme ça:

<?php
$fichier = 'compteur.txt';

if ( (file_exists($fichier)) && (is_readable($fichier)) ){
$text = file_get_contents($fichier);
echo $text;
}
else
{
echo 'Le fichier '.$fichier.' n\'existe pas ou n\'est pas disponible en ouverture';
}
?>


Mais je dois bien avouer que le PHP n'est pas ma spécialité.
Voici ce qui me parait le plus simple :


index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<input id="increaseNumber" type="button" value="+" style="font-size:24pt; width: 50px; height: 50px;"><br>
<input id="textBox" type="text" value="0" style="font-size:24pt; width: 40px; height: 40px;">
<label style="font-size:24pt;"></label><br>
<input id="decreaseNumber" type="button" value="-" style="font-size:24pt; width: 50px; height: 50px;"><br>

<script>

$("#decreaseNumber").on("click", function(){
$("#textBox").val(parseInt($("#textBox").val()) -1);
writeToFile($("#textBox").val());
})
$("#increaseNumber").on("click", function(){
$("#textBox").val(parseInt($("#textBox").val()) +1);
writeToFile($("#textBox").val());
})

function writeToFile(value){

$.ajax({
url: 'write.php?v=' + value,
type: 'GET',
dataType: 'json',
success: function(ret){
alert('Success!');
},
error: function(ret){
alert('Error!');
}
});

}


</script>

</body>
</html>



Ensuite le write.php

<?php
$myfile = fopen("compteur.txt", "w") or die("Unable to open file!");

$txt = "value = " . $_GET['v'];
fwrite($myfile, $txt);
fclose($myfile);
?>


et puis je viens afficher dans mon compteur.php le resultat :


<?php
$fichier = 'compteur.txt';

if ( (file_exists($fichier)) && (is_readable($fichier)) ){
$text = file_get_contents($fichier);
echo $text;
}
else
{
echo 'Le fichier '.$fichier.' n\'existe pas ou n\'est pas disponible en ouverture';
}
?>



Bon j'ai il n'y a aucune écriture, j'ai le message "error" et non "Success"
Messages postés
31088
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
3 193
Déjà, pense à indiquer le LANGAGE dans les balises de code afin d'avoir la coloration syntaxique
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, au lieu de simple "alert" place des console.log et regarde dans la console de ton navigateur.
success: function(ret){
            console.log('Success Ajax',ret);
            alert('Success!');
        },
        error: function(ret){
             console.log('Erreur Ajax',ret);
            alert('Error!');
        }

A noter, que pour debuguer de l'ajax, il est plus simple d'utiliser firefox ( et bien penser à activer le debug xhr )
Tu peux aussi regarder les lignes correspondantes à tes appels ajax (dans la console, en dépliant la ligne et en regardant dans les onglet requete et réponse )



Pense également que ton ajax attend une réponse au format JSON
donc au lieu de
echo $text; 

faire
echo json_encode($text); 
*

idem pour le message d'erreur
 echo  json_encode('Le fichier '.$fichier.' n\'existe pas ou n\'est pas disponible en ouverture');


il serait bien également d'activer l'affichage des erreurs PHP
https://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code
*
Pour finir, au niveau de ton ajax, au lieu de faire du GET (surtout pour écrire..) je ferai du POST
$.ajax({
        url: 'write.php';
          type:'POST',
        data: {v: value},

et donc, dans le php
$v = !empty($_POST['v']) ? $_POST['v'] : 0;
$txt = $v ; // conserve la donnée en "nombre" ... ça sera plus simple pour la traiter ensuite ( addition, soustraction... )
>
Messages postés
31088
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021

Merci pour toutes ces informations.
Le systeme fonctionne bien et fera bien le travail le jour J.

MErci encore.