Discussion :

[ccciolll]

Bonjour,

j'ai un formulaire dans lequel les utilisateurs vont entrer leur coordonnées GPS à la main (pour le moment on en est là).

Voici le code en question

Code html :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
    <form method="post" action="ecrire_horloge.php">
 
      <h1>Mes données : </h1>
      <!-- liste déroulante des identités -->
      <label><h3>Choisir un nom : </h3><br />
        <select name="identite">
          <option value="1">Toto</option>
          <option value="2">Titi</option>
          <option value="3">Tutu</option>
         </select>
      </label>
 
      <br />
      <h3>Déterminer le lieu.</h3>
      <p>Je suis … 
      <!-- lieu libre de remplissage -->
      <input 
        type="text" 
        id="lieu" 
        name="lieu" 
        placeholder="à la maison"
        title="lieu où vous vous trouvez"
        required 
        minlength="2" 
        maxlength="128" 
        size="40"
      ></p>
      (Entrez un texte de lieu pour compléter la phrase « Je suis » sous une forme lisible de type « à la cantine », « chez Bidule », « dans le métro », « sur le chemin du travail », etc.)
      <br />
      <br />
 
      <h3>Coordonnées GPS</h3>
 
      <p>Latitude : 
      <input 
        type="text" 
        id="latitude" 
        name="latitude" 
        placeholder="50.17"
        title="latitude"
        required 
        minlength="1" 
        maxlength="32" 
        size="32"
      >
      , longitude : 
      <input 
        type="text" 
        id="longitude" 
        name="longitude" 
        placeholder="3.47"
        title="longitude"
        required 
        minlength="1" 
        maxlength="32" 
        size="32"
      ></p>(uniquement des chiffres, le séparateur doit être un point et non une virgule)
      <br />
      <i>-- > On peut obtenir ses latitude et longitude sur googleMaps (choisir le lieu puis clic droit, c'est le premier de la liste) ou OpenStreetMaps (choisir le lieu, clic droit afficher l'adresse, les coordonnées s'affichent à droite)</i>
      <br />
 
      <h3><input type="submit" value="envoyer mes données" /></h3>
    </form>

Ce qui me pose problème c'est qu'en cas de mauvais remplissage de ces coordonnées GPS, ça déconne plus loin dans ma page d'affichage sur carte OSM. En outre, la latitude doit être comprise en -90 et 90 et la longitude -180 et 180 (sinon, ça déconne aussi)

Donc je voudrais pouvoir filtrer en amont.
J'ai trouvé un tuto qui explique comment détecter si le contenu d'une variable est bien numérique et si elle est comprise entre telle et telle valeur.

Voici un exemple de ce code

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
$tests = array(
      "42",
      "1337",
      "ohlala",
      "1,5",
      "1.5",
      );
 
// TEST NUMÉRIQUE OU PAS
foreach ($tests as $element) 
    {
    if (is_numeric($element)) 
      {
      echo var_export($element, true) . " est numérique <br />";
      } 
      else 
      {
      echo var_export($element, true) . " N'est PAS numérique <br />";
      }
    }
 
// TEST BONNE VALEUR
 
foreach ($tests as $element)
  {
  if (is_numeric($element)) 
    {
    if ($element < 180 && $element > -180) 
      {
      echo var_export($element, true) . " est entre -180 et 180 <br />";
      }
      else
      {
      echo var_export($element, true) . " est en dehors des limites <br />";
      }
    }
  }
?>

Dont le résultat à l'affichage est
'42' est numérique
'1337' est numérique
'ohlala' N'est PAS numérique
'1,5' N'est PAS numérique
'1.5' est numérique
'42' est entre -180 et 180
'1337' est en dehors des limites
'1.5' est entre -180 et 180

Donc il filtre bien.

Avec ce type de filtre, je serai capable de l'implémenter dans dans la cible du formulaire (ecrire_horloge.php) et refuser de récupérer les données qui ne sont pas correctes et éventuellement afficher une alerte genre « vos données lat-lon sont mauvaises, on ne les a pas prises en compte » (voire même un message plus précis disant « la valeur n'est pas dans les limites untel » « ce n'est pas des chiffres » « vous avez laissé une virgule, un espace, » etc.

Toutefois, si cela me prémunira d'avoir des données corrompues dans mon xml, je ne suis pas tout à fait satisfait.

Je voudrais que cette alerte puisse s'afficher dans le formulaire html, AVANT que la personne ne clique sur le bouton submit, pour qu'elle puisse corriger son texte. Mais est-ce réalisable ? Et comment ?

[jreaux62]

Bonjour,

Je voudrais que cette alerte puisse s'afficher dans le formulaire html, AVANT que la personne ne clique sur le bouton submit...

Tout évènement coté client sera géré en JavaScript.

Ça peut se faire :

• à la modification du champ (onclick, onchange)
• et/ou au clic sur le bouton submit = à la sousmission du formulaire (onsubmit)

Il faut donc poser ta question dans le forum JavaScript.

N.B. Ce qui n'empêche pas de faire AUSSI la vérification en PHP, au moment du traitement des données.

[grunk]

Comme le dit jreaux62 cette vérification de confort , doit être réaliser en javascript.

Il existe plein de solution qui vont de la simple vérification de champs à l'utilisation de librairie de vérification de formulaire.

Garde bien à l'esprit que JAMAIS cette vérification côté client ne pourra remplacer la vérification serveur. Elle apporte juste un plus à l'expérience utilisateur.

Et pour la saisie de coordonnées , les navigateurs ont désormais une api qui permet d'avoir une coordoonées (plus ou moins juste selon les système) : window.navigator.geolocation

[ccciolll]

Et pour la saisie de coordonnées , les navigateurs ont désormais une api qui permet d'avoir une coordoonées (plus ou moins juste selon les système) : window.navigator.geolocation

Je viens d'essayer de copier coller le code donné sur cette page :
https://developer.mozilla.org/fr/doc...urrentPosition

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
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
 
function success(pos) {
  var crd = pos.coords;
 
  console.log('Votre position actuelle est :');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude : ${crd.longitude}`);
  console.log(`La précision est de ${crd.accuracy} mètres.`);
}
 
function error(err) {
  console.warn(`ERREUR (${err.code}): ${err.message}`);
}
 
navigator.geolocation.getCurrentPosition(success, error, options);

En l'incluant entre des balises <script>
puis afficher la console (F12), et même si je clique pour accepter la géolocalisation.



J'obtiens dans la console ce msg d'erreur :
ERREUR (1): User denied geolocation prompt

Il doit y avoir un truc que je ne maîtrise pas…

Donc la solution de laisser l'utilisateur entrer sa position à la main reste d'actualité.
Me reste donc à mettre ça au point.
Mais effectivement, vous avez raison, il vaut mieux sécuriser au niveau du PHP. L'alerte utilisateur étant juste un plus de confort.

[ccciolll]

À toutes fins utiles, voici mon code PHP (inséré dans la page visée/affichée par le submit du formulaire, celle qui intègre les données dans le XML) qui cumule vérification et sécurisation des données, et qui fait en même temps l'alerte utilisateur.
Un peu moins confort qu'une alerte qui préviendrait l'utilisateur AVANT qu'il envoie ses données, mais c'est déjà un bon début.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// code pour vérifier que les valeurs GPS sont dans les clous, sinon on les refuse
$latilong_ok = "true" ; // par défaut, on met la valeur $latlong_ok à vrai
 
// TEST latitude
if (is_numeric($lati_averifier)) 
  {
  if ($lati_averifier < 90 && $lati_averifier > -90) 
    {
    }
    else
    {
    echo "<strong>Attention, la latitude reçue est en dehors des limites.</strong><br />";
    echo "Elle doit être comprise entre -90 et 90 mais vous avez mis<br />";
    echo "latitude : ".$lati_averifier."<br />";
    $latilong_ok = "false" ; // la valeur $latlong_ok devient fausse
    }
  } 
  else 
  {
  echo "<strong>Attention, la latitude reçue n'est pas une valeur numérique.</strong><br />";
  echo "Voici la latitude que vous avez enregistrée<br />";
  echo "latitude : ".$lati_averifier."<br />";
  echo "Vérifiez si vous n'avez pas entré une lettre, un espace ou une virgule.<br />";
  echo "Rappelez vous que le séparateur doit être un point.<br />";
  $latilong_ok = "false" ; // la valeur $latlong_ok devient fausse
  }
 
// TEST longitude
if (is_numeric($long_averifier)) 
  {
  if ($long_averifier < 180 && $long_averifier > -180) 
    {
    }
    else
    {
    echo "<strong>Attention, la longitude reçue est en dehors des limites.</strong><br />";
    echo "Elle doit être comprise entre -180 et 180 mais vous avez mis<br />";
    echo "longitude : ".$long_averifier."<br />";
    $latilong_ok = "false" ; // la valeur $latlong_ok devient fausse
    }
  } 
  else 
  {
  echo "<strong>Attention, la longitude reçue n'est pas une valeur numérique.</strong><br />";
  echo "Voici la longitude que vous avez enregistrée<br />";
  echo "longitude : ".$long_averifier."<br />";
  echo "Vérifiez si vous n'avez pas entré une lettre, un espace ou une virgule.<br />";
  echo "Rappelez vous que le séparateur doit être un point.<br />";
  $latilong_ok = "false" ; // la valeur $latlong_ok devient fausse
  }
 
 
  if ($latilong_ok == "true")
    {
    // pas d'erreur détectée, on peut accepter les valeurs lat et long averifier
    $lati = $lati_averifier ;
    $long = $long_averifier ;
    }
    else
    {
    echo "<strong>Les valeurs latitude et longitude ne seront pas enregistrées, nous vous conseillons de recommencer.</strong><br />";
    // au moins une donnée est fausse, on met la valeur à 0 pour éviter les problèmes
    $long = 0.0 ;
    $lati = 0.0 ;
    }

Et je pense que vous allez me dire (et vous aurez raison), que j'aurai pu changer if ($long_averifier < 180 && $long_averifier > -180) {}else{ par if ($long_averifier > 180 or $long_averifier < -180) { pour éviter un else inutile.

[edit] je viens de faire la correction pour éviter le else inutile et ça marche bien, merci pour votre conseil tellement puissant qu'il est arrivé dans ma tête avant que vous ayez pu le formuler, vous voyez que tout cela n'est pas vain ;-) [/edit]

[ccciolll]

Bonjour, retour au codage après un gros tunnel de fêtes de famille.

Donc j'ai réussi à obtenir les coordonnées gps sur ordi, c'était un réglages des préférences macOS qui bloquait ça.
(prefs système > Sécurité et confidentialité > confidentialité > Service de localisation > et ici cocher le(s) navigateur(s) utilisé(s) pour tester le code)

Du coup, avec ce script un peu agrémenté, j'arrive à afficher les coordonnées gps à l'écran.

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
21
22
23
24
25
26
27
28
29
30
31
<script>
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
 
function success(pos) {
  var crd = pos.coords;
 
  console.log('Votre position actuelle est :');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude : ${crd.longitude}`);
  console.log(`La précision est de ${crd.accuracy} mètres.`);
  document.write('Votre position actuelle est :');
  document.write('<br />Latitude : ');
  document.write(`${crd.latitude}`);
  document.write('<br />Longitude : ');
  document.write(`${crd.longitude}`);
  document.write('<br />La précision est de  : ');
  document.write(`${crd.accuracy}`);
  document.write('mètres.');
}
 
function error(err) {
  console.log(`ERREUR (${err.code}): ${err.message}`);
  document.write(`ERREUR (${err.code}): ${err.message}`);
}
 
navigator.geolocation.getCurrentPosition(success, error, options);
</script>

Au passage, je constate qu'il est utilisé des variantes de quote différentes, les quotes droites ne permettent pas d'afficher les variables mais les changent en texte.
Peut-être est-il possible d'utiliser les quotes penchées dans tous les cas plutôt que de sauter de l'une à l'autre ?

Enfin, c'est un détail.
Maintenant, je me demande comment extraire les valeurs du javascript pour les injecter dans le PHP ou dans le formulaire HTML qui va POSTer au PHP.
Je vais probablement essayer de faire qqchose qui puisse afficher à l'utilisateur les coordonnées obtenues (ou un autre message si pas de coordonnées obtenues), et ensuite lui proposer s'il veut envoyer ces valeurs, ou en saisir lui-même à la main (ou ne rien mettre).

[jreaux62]

Bonjour,

1- https://developer.mozilla.org/fr/doc...ns_un_contexte

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  console.log( 'Latitude : ' + crd.latitude );
  console.log( 'Longitude : ' + crd.longitude );
  console.log( 'La précision est de ' + crd.accuracy + ' mètres.' );

2- OUBLIE document.write(), et écrit dans un <div> :

• element.textContent()
• element.innerHTML()

[ccciolll]

Je suppose que console.log( 'Latitude : ' + crd.latitude ); (proposé par jreaux62) est plus propre que console.log(`Latitude : ${crd.latitude}`); que j'ai juste copié collé du tuto sur l'utilisation de la console.
Est-ce que cela cache une piste sur la façon de récupérer la variable JS pour l'utiliser dans le POST qui ira vers PHP ?

[edit] ah, je vois que la réponse ci-dessus a été complétée pendant que je répondais. Je vais eller voir ça en détail [/edit]

[jreaux62]

Pour l'autre syntaxe :

• Littéraux de gabarits

Les gabarits sont délimités par des caractères accent grave (` `) au lieu des apostrophes doubles ou simples.
[...]

[ccciolll]

Bonjour,
2- OUBLIE document.write(), et écrit dans un <div> :

Ah oui, en effet, je viens de m'apercevoir que document.write efface tout le reste du html, pas glop !

[ccciolll]

Alors, côté formulaire, j'en suis à deux découvertes expérimentales (ce sont des découvertes à mon niveau, bien sûr, mais pour les connaisseurs ça sera des évidences).

- Je peux utiliser value="ce que je veux y mettre" pour pré-remplir un champ de texte

Je peux intégrer du PHP pour remplir cette value, comme ceci :

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
<p>Latitude : 
      <input 
        type="text" 
        id="latitude" 
        name="latitude" 
        <?php
        echo "value=\"66\"";
        ?>
        title="latitude"
        required 
        minlength="1" 
        maxlength="32" 
        size="32"
      >

Ici, par exemple, j'ai mis une valeur de 66 en dur, mais si je tapais echo "value=\"".$mavariable."\""; ça mettrait la valeur de $mavariable en pré-remplissage.

Une fois que c'est fait, il ne me reste qu'à trouver comment récupérer la valeur de variable JS pour en faire une variable PHP.

[ccciolll]

Mince, en lisant cette discussion
https://www.it-swarm-fr.com/fr/php/c...php/968600100/
je prends conscience que le PHP est géré par le serveur en premier lieu, puis envoyé comme html, et alors seulement le JS sera géré côté client, en second lieu.

Donc les données GPS sorties du JS n'existent pas encore quand le PHP est codé.

Il faut que je travaille ça en 2 pages, donc.

Une première page qui active le JS et en extrait les valeurs GPS sous forme de variable JS.
Puis demander à l'utilisateur de cliquer sur un lien pour appeler une seconde page et trouver comment transmettre ces variables JS sous une forme que PHP pourra récupérer dans la seconde page.

[jreaux62]

...le PHP est géré par le serveur en premier lieu, puis envoyé comme html, et alors seulement le JS sera géré côté client....

LOL ! Quelle découverte !

Sinon.. il y a Ajax, qui permet de transmettre des données JS à un fichier PHP (sans changer de page).

[ccciolll]

LOL ! Quelle découverte !

Oh ben oui, pour moi ce sont des découvertes importantes. Un peu contrariantes, mais importantes.

Sinon.. il y a Ajax, qui permet de transmettre des données JS à un fichier PHP (sans changer de page).

Oui, j'ai vu aussi des références à Ajax quand j'ai cherché sur internet, mais à chaque fois les gens semblaient vriament galérer avec ça.


J'ai aussi une autre piste qui pourrait aller.
Déjà, plutôt que de m'obstiner à passer par du PHP, essayer de gérer ça direct en JS.
Et il se pourrait que ça marche de la façon suivante :
(j'ai trouvé un tuto assez limpide sur le innerhtml et le div dont tu parlais plus haut : https://moonbooks.org/Articles/Comme...t-javascript-/)

Dans ma form, mettre le code suivant à la place du input text à faire varier :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="target_div"></div>

Et plus bas, je mets le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  var div = document.getElementById('target_div');
  div.innerHTML += '<input type="text" id="latitude" name="latitude" value="33" title="latitude" required minlength="1" maxlength="32" size="32">';
</script>

Et ça semble marcher, j'obtiens un champ de texte pré-rempli avec la valeur 33.
Maintenant, si j'arrive à insérer la variable qui contient la latitude, ça peut peut-être fonctionner.

Je continue les tests…

[ccciolll]

yesss, j'arrive à intégrer une variable comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
var latvalue = 44 ;
var div = document.getElementById('target_div2');
div.innerHTML += '<input type="text" id="latitude" name="latitude" value="' + latvalue + '" title="latitude" required minlength="1" maxlength="32" size="32">';
</script>

Je pense que je vais parvenir à refaire le même avec les variables de position.
ihihi !

[ccciolll]

Mince, je n'y arrive pas.

Les variables crd.latitude et crd.longitude semblent bloquées à l'intérieur de la fonction success(pos) et si je mets mes div.innerHTML à l'intérieur de cette fonction, ils ne s'affichent pas.

grrrr.

[mathieu]

le fonctionnement de base d'un navigateur est le suivant

• l'utilisateur saisi l'url
• le navigateur analyse l'url et envoie une requête http au serveur
• le serveur cherche la ressource demandée (et éventuellement exécute le code côté serveur comme le php par exemple)
• le navigateur affiche la réponse envoyée par le serveur

ce qu'on appelle ajax, c'est quand le code javascript est le client http fait la requête http et donc pendant cette requête, le contenu de la page ne change pas.
ça peut être utilisé pour le besoin que vous avez expliqué dans votre 1er message. le code javascript peut lire toutes les données saisies par l'utilisateur et les envoyer à un script php. ensuite ce script répond "oui" ou "non" pour indiquer que les donnée sont valides et si c'est "non" vous affichez un message d'erreur.
l'amélioration d'après ça serait de ne pas seulement envoyer "non" mais d'envoyer un tableau au format json qui listera quelles informations sont incorrectes et pourquoi.

[jreaux62]

Ton problème essentiel, c'est que tu ne maitrises pas du tout les BASES du JavaScript.
Ce serait bien pour toi de lire quelques TUTOS...

La bonne pratique (sans Ajax) :

1- Formulaire :

Code html :

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
      <p>Latitude : 
      <input 
        type="text" 
        id="latitude" 
        name="latitude" 
        placeholder="50.17"
        title="latitude"
        required 
        minlength="1" 
        maxlength="32" 
        size="32"
      >
      , longitude : 
      <input 
        type="text" 
        id="longitude" 
        name="longitude" 
        placeholder="3.47"
        title="longitude"
        required 
        minlength="1" 
        maxlength="32" 
        size="32"
      ></p>

Tu as donc les attributs id : id="latitude" et id="longitude".

2- Le JS :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// dans le code JS (dans success) :
   const input_latitude = document.querySelector('#latitude'); // ou : document.getElementById('latitude');
   const input_longitude = document.querySelector('#longitude'); // ou : document.getElementById('longitude');
 
   input_latitude.value = crd.latitude;
   input_longitude.value = crd.longitude;

Remarque, il existe néanmoins une différence :

• document.getElementById('id')
• document.querySelector('#id') (à noter : le # devant l'id, comme en CSS)
• document.querySelectorAll('.class') (à noter : le . devant la classe, comme en CSS)

[ccciolll]

Ton problème essentiel, c'est que tu ne maitrises pas du tout les BASES du JavaScript.

Exactement.

Ce cours (celui pour lequel j'essaie de réaliser ces exercices) n'est pas inintéressant, mais on est propulsé à réaliser des trucs déjà complexes alors qu'on n'a aucune base.
Le PHP, je comprends trèèès légèrement mieux mais ça reste fort superficiel. Mais le JS, je suis largué total.

[jreaux62]

• https://adrienjoly.developpez.com/tu...on-javascript/