Discussion :

[filiplarlibe]

Bonjour à tous,
Je développe actuellement un site web sous joomla. Et je voudrais modifier un module existant pour insérer la géolocalisation html5 via le navigateur en javascript. J'ai trouvé plusieurs tuto sur le net mais par contre je rencontre certaines difficultés :
Dans le module joomla, j'ai une page php : page1.php et le template du module dans le dossier template du module, une autre page page1.php dans lequel il y a le code HTML pour le visuel de la page.
Jusque là rien de spécial tout est normal
J'ai trouvé du code pour faire la géolocalisation HTML5 notamment :

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
<script type="text/javascript">
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {enableHighAccuracy:false});
else
alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
var lati;
var longi;
function successCallback(position){
lati = position.coords.latitude;
longi = position.coords.longitude;
alert("Latitude : " + lati + ", longitude : " + longi);
};
function errorCallback(error){
                            var info = "Erreur lors de la géolocalisation : ";
    switch(error.code) {
    case error.TIMEOUT:
   info += "Timeout !";
    break;
    case error.PERMISSION_DENIED:
info += "Vous n’avez pas donné la permission";
    break;
    case error.POSITION_UNAVAILABLE:
   info += "La position n’a pu être déterminée";
    break;
    case error.UNKNOWN_ERROR:
   info += "Erreur inconnue";
    break;
}
};

Dans la page1.php, en dessous du code javascript, j'ai actuellement 2 variables php nommés $latitude et $longitude qui servent dans le module pour faire des calculs (notamment des calculs de prières). Aujourd'hui ces 2 variables sont alimentés par l'administration du module. (on définit la latitude et la longitude directement dans le paramètrage du module).
Je voudrais donc trouver un moyen pour que alimenter ces variables $latitude et $longitude avec le résultat du javascript exécuté pour trouver la géolocalisation. J'ai bien compris le problème qui est que le javascript est exécuté côté client alors que le PHP est exécuté côté serveur. Mais j'ai vu qu'apparemment il serait possible d'utiliser de l'ajax pour renvoyer les variables au serveur. Par contre je ne sais pas du tout comment ça fonctionne, j'ai beau lire quelques tuto sur le net, je ne comprends pas tout et en plus ça n'a pas l'air de fonctionner. Et autre point, comme c'est un module joomla, il n'y a qu'une seule page page1.php.

Est-ce qu'il serait possible de renseigner ces variables php soit dans la même page (mais je ne pense pas que ce soit possible) ou soit par l'intermédiaire d'une autre page ? Si par une autre page, comment faire pour modifier le module joomla en ajoutant une autre page ?

Je vous remercie par avance pour votre. Soyez indulgent svp, je suis débutant en développement web, je ne connais pas trop le PHP, Javascript et l'AJAX.

[mathieu]

Soyez indulgent svp, je suis débutant en développement web, je ne connais pas trop le PHP, Javascript et l'AJAX.

on va commencer par le commencement alors même si vous avez déjà l'air d'avoir compris les 1res étapes.

la 1re partie concerne le navigateur. quand on tape une adresse dans la barre du navigateur, il agit comme un client HTTP qui va envoyer la requête au serveur. là le serveur exécute le code PHP suivant les cas et le client (le navigateur) récupère le résultat et l'affiche.
l'étape d'après c'est l'ajout du code JavaScript. dans le résultat généré en PHP se trouve du code JavaScript. quand le navigateur récupère cela, il exécute le code JavaScript côté client.

et la dernière étape qui va vous intéresser pour votre question est appelée AJAX. avec cette technique c'est le code JavaScript qui est le client HTTP.
techniquement, c'est toujours le navigateur qui lance la requête mais il y a plusieurs améliorations :
- le code JavaScript peut lancer plusieurs requêtes à n'importe quel endroit du code (par exemple au clic sur un élément de la page) et cela sans recharger la page actuelle
- le client HTTP est le code JavaScript donc le résultat envoyé par le serveur est directement envoyé au code JavaScript où il peut être analysé.

dans votre cas vous allez envoyer une requête dans le genre "https://serveur/traitement?latitude=1&longitude=2". le traitement en PHP calculera votre recherche en fonction des coordonnées et vous recevrez dans le code JavaScript le résultat envoyé par le code PHP.
pour plus d'explications vous pouvez lire là :
https://javascript.developpez.com/fa...#ajax.acronyme
et pour un exemple d'appel AJAX qui utilise la bibliothèque jQuery :
https://javascript.developpez.com/fa...ax#AjaxRequest

[filiplarlibe]

Bonjour,

Merci pour votre réponse et vos explications.
C'est très clair.

- le code JavaScript peut lancer plusieurs requêtes à n'importe quel endroit du code (par exemple au clic sur un élément de la page) et cela sans recharger la page actuelle

Dans mon cas, j'ai besoin de lancer le code javascript au chargement de la page et pas sur un événement comme un clic sur un élément de la page. Ca fonctionnera quand même ?

dans votre cas vous allez envoyer une requête dans le genre "https://serveur/traitement?latitude=1&longitude=2". le traitement en PHP calculera votre recherche en fonction des coordonnées et vous recevrez dans le code JavaScript le résultat envoyé par le code PHP.

Si j'ai bien compris, le code javascript je le mets dans la "page1.php" et le code javascript va appeler la page traitement.php avec les paramètres latitude et longitude, c'est bien ça ?
Cela veut dire que la page "traitement" va se charger de trouver par exemple la ville par rapport aux coordonnées et ensuite renverra une réponse en modifiant un div pour changer l'affichage (ex: changer le nom de la ville sur la page).
Est-ce que c'est bien cela ?

En tout cas, je vous remercie pour votre aide très précieuse.

[filiplarlibe]

Bonjour,

Alors j'avance un peu pour ce sujet mais maintenant j'obtiens une erreur après avoir créer une page php pour traiter les variables que je passe depuis le javascript et renvoyer du json.
Voici l'erreur que je vois dans la console :

"Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at XMLHttpRequest.req.onreadystatechange"

Voici le code du javascript :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">
						if (navigator.geolocation) 
							navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {enableHighAccuracy:false});
 
						else 
							alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
						alert("ici");
						var lati;
						var longi;
						function successCallback(position){
							lati = position.coords.latitude;
							longi = position.coords.longitude;
							alert("Latitude : " + lati + ", longitude : " + longi);
							// $("#lat").val(position.coords.latitude); 
							// $("#lng").val(position.coords.longitude);
						};
 
function errorCallback(error){
                            var info = "Erreur lors de la géolocalisation : ";
    switch(error.code) {
    case error.TIMEOUT:
    	info += "Timeout !";
    break;
    case error.PERMISSION_DENIED:
	info += "Vous n’avez pas donné la permission";
    break;
    case error.POSITION_UNAVAILABLE:
    	info += "La position n’a pu être déterminée";
    break;
    case error.UNKNOWN_ERROR:
    	info += "Erreur inconnue";
    break;							
	}
							alert(info);
						};
 
 
 
						const req = new XMLHttpRequest();
						req.overrideMimeType("application/json");
 
						 req.onreadystatechange = function(event) {
						if (this.readyState === XMLHttpRequest.DONE) {
						if (this.status === 200) {
							var tmp = req.responseText;
							var json = JSON.parse(req.responseText);
 
 
						alert(json.lat[0]);
 
						} else {
							alert("Status de la réponse: %d (%s)", this.status, this.statusText);
						}
						}
						}; 
 
						req.open('GET', URL, true);
						req.send("lat=" + lati + "&long=" + longi);

Et voici le code PHP de la page appelée dans URL :

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
<?php
 
header('Content-Type: text/plain'); 
 
$latitude = (isset($_GET["lat"])) ? $_GET["lat"] : NULL;
$longitude = (isset($_GET["long"])) ? $_GET["long"] : NULL;
 
if ($latitude && $longitude) {
 
	$tableau = array();
	$tableau['lat'] = $latitude;
	$tableau['long'] = $longitude;
	echo json_encode($tableau);
} 
else {
 
 
}
 
?>

Pouvez-vous m'aider pour résoudre cette erreur s'il vous plait ?

je vous remercie par avance.

[NoSmoking]

Bonjour,
essaie de faire ta requête en req.overrideMimeType("text/plain") et regarde ce qui t'est retourné via un console.log(req.responseText).

[filiplarlibe]

Bonjour,

essaie de faire ta requête en req.overrideMimeType("text/plain") et regarde ce qui t'est retourné via un console.log(req.responseText).

J'ai essayé et j'obtiens une ligne vide.

[NoSmoking]

Dans ce cas ton message d'erreur est normal !

Lorsque l'on regarde ton code, merci de penser à l'indenter correctement tu y verrais bien mieux, on constate que tu fais ta requête dans la « continuité », si tu préfères sans attendre le retour de la geolocation qui dans sa fonction successCallback initialise les variables lati et longi. En gros au moment de l'appel les variables valent undefined.

Pour remédier à cela il te faut faire appel à ta requête dans ta fonction successCallback.

Code :

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

1
2
3
4
5
6
7
function successCallback(position) {
  lati = position.coords.latitude;
  longi = position.coords.longitude;
  console.log('Latitude : ', lati, ', longitude : ', longi);
  // tu places ici ta requête
  requeteAjax( lati, longi);
};

[filiplarlibe]

Désolé pour l'indentation, effectivement je n'avais pas fait attention. Désolé.

J'ai essayé comme vous m'aviez dit et ça ne fonctionne pas non plus.

J'obtiens toujours la même erreur et si je fais

Code :

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

console.log(req.responseText)

j'obtiens encore une ligne vide.

Voici le code modifié : (j'espère que c'est bien de cette manière qu'il fallait faire le 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
 
function successCallback(position){
        lati = position.coords.latitude;
        longi = position.coords.longitude;
	alert("Latitude : " + lati + ", longitude : " + longi);
 
	const req = new XMLHttpRequest();
	//req.overrideMimeType("application/json");
	req.overrideMimeType("text/plain");
	req.onreadystatechange = function(event) {
		//XMLHttpRequest.DONE === 4
		if (this.readyState === XMLHttpRequest.DONE) {
		if (this.status === 200) {
		        var tmp = req.responseText;
			console.log(req.responseText);
			var json = JSON.parse(req.responseText);
 
			alert(json.lat[0]);
		} else {
			alert("Status de la réponse: %d (%s)", this.status, this.statusText);
		}
		}
	}; 
 
	req.open('GET', URL, true);
	req.send("lat=" + lati + "&long=" + longi);					
};

En tout cas, merci pour votre remarque, car c'est vrai que c'était logique de faire ce traitement dans cette fonction.
Mais par contre, je ne comprends pas pourquoi ça ne fonctionne pas.

Merci pour votre aide

[NoSmoking]

je n'avais pas déplié ton code en entier

Code :

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

1
2
req.open('GET', URL, true);
req.send("lat=" + lati + "&long=" + longi);

ne correspond pas à la façon d'envoyer les paramètres en mode GET, il faut mettre les paramètres dans l'URL et send la valeur null.

Code :

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

1
2
req.open("GET", URL + "?lat=" + lati + "&long=" + longi, true);
req.send(null);

ou alors passe en POST.

[filiplarlibe]

Merci beaucoup pour votre réponse.
Ca fonctionne maintenant de cette manière.

Merci beaucoup.

[filiplarlibe]

Bonjour,

Finalement j'ai une nouvelle question sur mon "projet" en lien avec la géolocalisation.

En effet, maintenant j'arrive donc à récupérer la latitude et la longitude. je me sers de ces coordonnées pour trouver la ville et le pays. De ce fait, j'utilise une API google pour récupérer ces infos.

Par contre, c'est là où j'ai un souci, des fois ça fonctionne mais le plus souvent au lieu de récupérer la ville et le pays je récupère des valeurs NULL.

J'ai vérifié également dans le tableau de bord google des API (là où j'ai enregistré le numéro de clé), et je vois que pas mal d'appels passe en erreur: il y a une erreur 403.

Si je prend uniquement l'URL directement dans un navigateur, là je récupère bien les bonnes valeurs.
Je ne comprends pas pourquoi parfois ça fonctionne et d'autres fois (mais plus souvent) je récupère NULL.

voici le code PHP que j'utilises :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$latitude = (isset($_GET["lat"])) ? $_GET["lat"] : NULL;
$longitude = (isset($_GET["long"])) ? $_GET["long"] : NULL;
 
if ($latitude && $longitude) {
	 $url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=".$latitude.",".$longitude."&key=NUMCLE";
	$data = @file_get_contents($url);
	$jsondata = json_decode($data,true);
	if(is_array($jsondata) && $jsondata['status'] == "OK")
	{
		$city = $jsondata['results']['0']['address_components']['2']['long_name'];
		$country = $jsondata['results']['0']['address_components']['5']['long_name'];
		$street = $jsondata['results']['0']['address_components']['1']['long_name'];
	?>

Si vous voyez quelque chose, je suis preneur.
Merci d'avance pour votre aide.

[NoSmoking]

Finalement j'ai une nouvelle question sur mon "projet" en lien avec la géolocalisation.

	Il serait judicieux que tu ouvres une nouvelle discussion sur le forum PHP sachant que l'erreur 403 indique un accès refusé qui peut être liée à ton quota de requêtes.

[filiplarlibe]

Merci.

J'ai recréé un post dans le forum PHP. Et je repasse celui ci en Résolu.

Merci encore.