Intégration forum phpBB et Google maps

Version imprimable

14/05/2014, 19h32
kunpen

Intégration forum phpBB et Google maps

Bonjour à tous !

Vu mes faibles compétences en développement web, je suis actuellement dans l'impasse pour mon site de rencontres avec ces fonctionnalités
et j'espère que quelqu'un pourra m'aider ou me donner des pistes, des bouts de codes, une solution complète ce serais vraiment génial !

CMS :
J'utilise un vieux CMS en PHP/MySQL qui permet d’inscrire des user pour devenir membres avec plusieurs champs dont les principaux sont :
- Pseudo (numéro ID) il fait office de login,
- Mot de passe (non crypté, enfin visible depuis phpmyadmin),
- E-mail,
- Pays,
- Région,
- Adresse,
- Code postal,
- Etc...
D'après ce que j'ai compris il place ces champs dans 2 tables différentes dont une 3ème table avec un champ pour les user "online".

phpBB :
L'idée est d'utiliser le login et mot de passe du CMS pour pouvoir se loguer dans le forum phpBB
et accessoirement dans le profile user du forum donne un lien vers son profile CMS à savoir nomdusite.com/view.php?l=fr&id=0000000002

- Le soucis est que phpBB utilise un mot de passe crypté en md5 je crois alors il faudrais peut être un fichier xml ou php ou autre pour faire l'interface entre le CMS et phpBB.

Google maps :
L'idée est d'utiliser le pays + région + adresse + code postal de base de donnée du CMS et d'afficher la position de user sur un carte google map
et accessoirement dans la bulle du marqueur un lien vers le profile user du CMS à savoir nomdusite.com/view.php?l=fr&id=0000000002

- Le soucis est que dans la base de donnée du CMS il n'y a pas de latitude et longitude, alors faut t'il la créer dans le formulaire d'enregistrement, si oui comment ou ce n'est pas nécessaire et qu'il existe une méthode qui utilise seulement les adresses, pays, etc...

Voici les codes et pistes que j'ai pu trouver sur http://codepen.io/anon/pen/KbeCs

Sinon voici les objectifs pour mon site de rencontres (Par ordre de priorités) avec quelques pistes :

Forum :
1 User login depuis le CMS qui est aussi validé sur le forum phpBB.
2 Sur le profil de user affiché dans le forum, son nom correspond avec le lien vers son profile CMS.
Sources envisageable :
https://www.phpbb.com/community/viewtopic.php?t=1598865
http://nzeyimana.nefa.se/2009/04/aut...-table-source/

Google Maps :
1 Afficher tous les membres inscrits sur la Google Maps.
2 Afficher le nom user avec lien vers le profile sur la Google Maps.
3 Afficher une icône correspondant à homme ou femme sur la Google Maps.
4 Afficher une icône correspondant à su user est en ligne ou pas.
5 Afficher la distance entre user.
Sources envisageable :
Tuto :
http://www.weboblog.fr/inserer-les-c...adresse-en-bdd
https://www.youtube.com/watch?v=JHz-FTg0FiY
http://code.tutsplus.com/tutorials/a...stem--net-3461

Script :
http://www.script-tutorials.com/goog...mplementation/
http://jf-blog.fr/telechargement
http://sunnyis.me/blog/secure-passwords/

Google Maps Géolocalisations (moins important) :
1 Afficher tous les membres en temps réel sur la Google Maps.
2 mêmes options citées plus haut
3 Afficher si membre est en ligne via téléphone ou PC.

Merci d'avoir pris le temps de lire, j'apprécie.
19/05/2014, 01h16
bretus

Bonsoir,

Citation:

Envoyé par kunpen

- Le soucis est que dans la base de donnée du CMS il n'y a pas de latitude et longitude, alors faut t'il la créer dans le formulaire d'enregistrement, si oui comment ou ce n'est pas nécessaire et qu'il existe une méthode qui utilise seulement les adresses, pays, etc...

Je pense que si tu demandes à l'utilisateur de renseigner un lon/lat, ça ne va pas le faire.

Tu as plusieurs autres options pour calculer ce lon/lat :
- Le géocodage (adresse => lon/lat)
- La géolocalisation fournie par le navigateur en HTML5 (navigator.geolocation)
- La géolocalisation par IP
- Te baser uniquement sur la ville et fournir une position approchée
- Demander à l'utilisateur de définir sa position (par un clic sur la carte)

PS : Fais attention au fait qu'un géocodage précis peut être dangereux pour tes membres.

CMS + Google Maps API V3

Merci pour ces précisions Bretus J’apprécie.

Citation:

Je pense que si tu demandes à l'utilisateur de renseigner un lon/lat, ça ne va pas le faire.

Clairement ^^

Citation:

Le géocodage (adresse => lon/lat)

Je me suis renseigné sur le net avec le méandre d'informations proposées et je me suis rapidement perdu -.-
Sauf erreur de ma part, Ce n'est super précis et ça va demander des requêtes en tant que service chez Google donc je pense qu'ils ne vont pas apprécier sans compter que ça va ralentir les résultats.

Citation:

La géolocalisation fournie par le navigateur en HTML5 (navigator.geolocation)

Ça me plait bien sauf que le navigateur affiche une demande de confirmation (en général en haut de fenêtre) qui n'est pas forcement bien visible pour l'utilisateur de plus ce message fait un peu peur.
A voir pour plus tard si je parviens à implémenter un mode "géolocalisation en direct", pour le moment je me focalise sur le formulaire remplis par user puis visible par tous les user.

Sinon, dans le genre j'ai trouvé ce script et je l'ai testé, il est pas mal du fait qu'il propose plusieurs types de géolocalisations dont HTML5 et
d'autres qui sont assez précis (dont wikimedia quezako?) à un yota près https://github.com/onury/geolocator

Citation:

La géolocalisation par IP

Malheureusement c'est assez imprécis, ça va pointer sur un répartiteur du fournisseur d'accès web de user.
Il y a par exemple IP2Country Qui est payant sauf erreur.
Le script cité plus haut recherche aussi par IP me semble t'il.

Citation:

Te baser uniquement sur la ville et fournir une position approchée

Ils l'ont fait par pays mais je trouve ça un peu léger mais l'idée reste bonne pour pas se compliquer la vie http://www.loveawake.com/

Citation:

Demander à l'utilisateur de définir sa position (par un clic sur la carte)

Ce script permet un autocomplete (simple is beautyfull) http://ubilabs.github.io/geocomplete/examples/map.html
Par contre, je me demande quel est son fonctionnement, c'est à dire que j'ai l'impression qu'il détecte le fait que je suis en France et ma ville et
que par conséquent il réduit autosuggestion pour faciliter le résultat.

Ou celui ci http://xilinus.com/jquery-addresspic...mos/index.html
et celui ci http://rjshade.com/projects/gmaps-autocomplete/ ou il faut quasiment taper l'adresse complète car il cherche partout dans le monde pour enfin remplir automatiquement les champs et cerise sur le gâteau, il permet de bouger le marqueur (plot rouge) comme tu la suggéré.

Citation:

PS : Fais attention au fait qu'un géocodage précis peut être dangereux pour tes membres.

En effet, j'y ai pensé et je vais suggérer à user de mettre l'adresse du voisins ou dans le quartier afin d'éviter les drames en tous genres...

Bref, c'est toujours bien de faire un récapitulatif des possibilités offertes et pour le moment je pense que je vais tenter d'utiliser un mix des 2 cité plus haut, c'est à dire :
Autocompletion + affichage carte + user peu bouger le marqueur + Longitude, Latitude
et tenter d'intégrer tout ça dans le formulaire du CMS tout en sachant que lon et lat n’existent pas dans la base de donnée donc créer des champs caché pour ne pas embrouiller user.

Pour le moment j'ai testé le code de site français http://ethercode.blogspot.fr/2013/01...ec-google.html
démo + code source http://embed.plnkr.co/tVVu3FEOYObimNhJy4Gn/preview
Malheureusement il ne gère pas les Latitudes et Longitudes, de plus il crée un champs à part ou renseigner l'adresse autocomplete et renseigne les champs à part, numéro rue, adresse etc, enfin bref pas comme il convient sur le formulaire CMS...

D'ailleurs voici un condensé du formulaire du CMS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <form action="<?=filename()?>" method="post" enctype="multipart/form-data" name=form OnSubmit="return formCheck(this)"> <input type="hidden" name="l" value="<?=LANGUAGE?>"> <input type="hidden" name="a" value="a"> Nom et login user <input class=input type=text name=username maxlength="16" value="<?=USERNAME_VALUE?>"> Mot de passe user <input class=input type=password name=pass maxlength="<?=C_PASSB?>" value="<?=PASSWORD_VALUE?>"> E-Mail user <input class=input type=text name=email value="<?=EMAIL_VALUE?>"> Adresse (ici autocomplete pour remplir le reste et afficher une partie de ladresse dans ce même champs, exemple: 10 rue de Rivoli) <input class=input type=text name=address value="<?=ADDRESS_VALUE?>"> Code postal <input class=input type=text name=zip value="<?=ZIP_VALUE?>"> Ville <input class=input type=text name=city value="<?=CITY_VALUE?>"> Région <input class=input type=text name=state value="<?=STATE_VALUE?>"> Pays <select name="country" class="input"><?=COUNTRY_VALUE?></select> Valider le formulaire <input class=input1 type=submit value="<?=REGISTER?>" name="submit"> (bizarrement il ne termine pas par </form> d'ailleurs il omet les " " dans pas mal de champs)
Morceau de la base de donnée visible sur http://codepen.io/anon/pen/KbeCs
Du coup je pense qu'il va plutôt mettre les données du formulaire dans la table v5_membersu

Voila, j'espère qu'une âme charitable pourra m'aider sur cette problématique qui apparemment fait légion sur le net et je serais ravis de partager l'information sur un nouveau post pour aider ceux qui galère comme moi avec peu de connaissance en codes.

Exemple du résultat plus ou moins escompté http://www.singlesaroundme.com/Default.aspx Bon je ne vais pas faire une applis mobile, j'imagine que c'est une autre histoire...

Quand à l'intégration phpBB ou autres forum, c'est visiblement possible comme sur http://www.datingnmore.com/index.php

Quoi qu'il en soit, je partagerais mes trouvailles au fur et à mesure de mes recherches.

Phase 1: Enregistrement user CMS + Google Maps

Après avoir galérer comme un fou, j'ai enfin un début de solution ! \0/

L'idée actuelle est que user s'enregistre dans le CMS via un formulaire avec leur nom, genre, age, etc...
Mais surtout ce qui nous intéresse, c'est l'adresse, code postal, région, pays
qui vont être remplis par l'autocompletion (renseignement automatique des champs) de Google Maps api V3 pour exploiter les info plus tard !

Mon soucis, c'est que j'ai des champs un peu particuliers avec leur name="mot d’enregistrement pour le CMS" alors Google Map à les siens -.-
Liste des name utilisé par Google Maps https://developers.google.com/maps/d...ails_responses

Plus concrètement ça donne ça :
Légendes :
class= Style CSS (pour rendre plus jolis nos champs)
type= Type d'informations a enregistrer (texte, chiffres, etc...)
name= Noms des références utilisés par le CMS pour je suppose enregistrer les informations
value= Valeurs tapé par user ou Google Maps via autocomplete qui seront utilisés par le CMS pour je suppose enregistrer les informations en PHP/SQL

Condensé des Champs du CMS en HTML (PHP pour être plus précis) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form action="<?=filename()?>" method="post" enctype="multipart/form-data" name="form" OnSubmit="return formCheck(this)"> <input type="hidden" name="l" value="<?=LANGUAGE?>"> <input type="hidden" name="a" value="a"> Nom et login user <input class="input" type="text" name="username" maxlength="16" value="<?=USERNAME_VALUE?>"> Mot de passe user <input class="inpu"t type="password" name="pass" maxlength="<?=C_PASSB?>" value="<?=PASSWORD_VALUE?>"> E-Mail user <input class="input" type="text" name="email" value="<?=EMAIL_VALUE?>"> Adresse <input class="input" type="text" name="address" value="<?=ADDRESS_VALUE?>"> Code postal <input class="input" type="text" name="zip" value="<?=ZIP_VALUE?>"> Ville <input class="input" type="text" name="city" value="<?=CITY_VALUE?>"> Région <input class="input" type="text" name="stat"e value="<?=STATE_VALUE?>"> Pays <select name="country" class="input"><?=COUNTRY_VALUE?></select> Valider le formulaire <input class="input1" type="submit" value="<?=REGISTER?>" name="submit"> </form>
Par exemple Google Maps va utiliser name="name" pour remplir le champ avec une adresse simple comme "22 Rue du Cirque"
Vous pouvez tester sur http://cre84.me/formmapper/details.html en bas de la page dans Examples of Additional Results vous verrez Name

Finalement, j'ai trouvé ce merveilleux script https://github.com/ubilabs/geocomplete/ dont http://cre84.me/formmapper/index.html a due l'utiliser et le rendre payant en plus -.-

Et du coup j'ai utiliser la balise data-geo="les name pour Google Maps" afin de ne pas embrouiller les name="de mon CMS" c'est expliqué dans https://github.com/ubilabs/geocomplete/

Bref, chez moi ça donne à peu près cela :

L'entête ou header :
Légendes :
<script src="js/jquery.js"></script> = ton jquery construit sur http://projects.jga.me/jquery-builder/ ou la version lourde sur le site officiel http://jquery.com/download/ Après tu peu minify hein ?
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> = va demander le script Google Maps chez Google, certain paramètres sont modifiable dans cette adresse.
<script src="js/jquery.geocomplete.js"></script> = Script pour l'autocomplete Google Maps regarde ici tu pourra changer les options https://github.com/ubilabs/geocomple...geocomplete.js
Code:

1 2 3 <script src="js/jquery.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script src="js/jquery.geocomplete.js"></script>
En dessous ou autres, le code javascript (ou jquery, je ne sais pas) pour appeler les options :
Code:

1 2 3 4 5 6 7 8 9 10 $(function(){ $("#geocomplete").geocomplete({ map: ".map_canvas", details: "form", detailsAttribute: "data-geo", markerOptions: { draggable: true } });
Le formulaire modifié avec la balise data-geo (Désolé les admin du forum mais je n'arrive pas à mettre en couleur le code -.- )
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 <form action="<?=filename()?>" method="post" enctype="multipart/form-data" name="form" OnSubmit="return formCheck(this)"> <input type="hidden" name="l" value="<?=LANGUAGE?>"> <input type="hidden" name="a" value="a"> Nom et login user <input class="input" type="text" name="username" maxlength="16" value="<?=USERNAME_VALUE?>"> Mot de passe user <input class="inpu"t type="password" name="pass" maxlength="<?=C_PASSB?>" value="<?=PASSWORD_VALUE?>"> E-Mail user <input class="input" type="text" name="email" value="<?=EMAIL_VALUE?>">  User tape ton adresse ici <input data-content="remplis tout seul" data-original-title="Va chercher!" id="geocomplete" type="text" placeholder="Tape ici..." autocomplete="off"> puis valide sur le bouton ou la touche entrée <button id="find" class="btn btn-success" type="button">Trouve!</button> La carte Google Maps est affiché dans ce div <div class="map_canvas"></div> Adresse <input class="input" type="text" name="address" value="<?=ADDRESS_VALUE?>" data-geo="name" > Code postal <input class="input" type="text" name="zip" value="<?=ZIP_VALUE?>" data-geo="postal_code"> Ville <input class="input" type="text" name="city" value="<?=CITY_VALUE?>" data-geo="locality"> Région <input class="input" type="text" name="stat"e value="<?=STATE_VALUE?>" data-geo="administrative_area_level_1"> Pays <select name="country" class="input" data-geo="postal_code"><?=COUNTRY_VALUE?></select> Latitude <input class="input" type=text name="lat" value="<?=LAT_VALUE?>" data-geo="lat"> Longitude <input class="input" type=text name="lng" value="<?=LNG_VALUE?>" data-geo="lng"> Valider le formulaire <input class="input1" type="submit" value="<?=REGISTER?>" name="submit"> </form>
Et voila ! Le tour est joué plus de soucis entre les balises name=" " grâce a la balise data-geo=" "
de plus j'ai rajouté les champs Latitude et Longitude pour les exploiter plus tard.

Puis dans SQL J'ai créer les champs
dans les stables de mon CMS `v5_subscribe` et `v5_membersu_main`
`lat` FLOAT( 10,6 ) NOT NULL ,
`lng` FLOAT( 10,6 ) NOT NULL ,

Par contre en remplissant le formulaire j'ai eu un soucis avec la base de donnée `v5_membersu_main` avec le message "Column count doesn't match value count at row 1"
Solution trouvé sur http://htmlfixit.com/cgi-tutes/tutor...alue_Count.php

Du coup dans mon fichier register.php
Code:

1 2 mysql_query("INSERT INTO ".C_MYSQL_MEMBERS_MAIN." VALUES (Null, '".$usr."','','','0','0','0','0','','0','','','0','0','','','0',NOW(''),NOW(''),'".$rate."','0','0','4','0','1','0','0','0','0')") or die(mysql_error());
J'ai ajouté à la fin dans VALUES '0','0', Pour ajouter mes 2 nouveaux champ latitude et longitude.

Ainsi que d'autres paramètres propre au CMS...

Bref ! Maintenant ça fonctionne ! User est enregistré avec adresse, région, code postal, latitude et longitude.
Enfin sauf pour pour le champs Select pays qui se génère comme ci :
Code:

1 2 3 4 <select name="country" class="input" data-geo="country"> <option value="0" selected=""> Non spécifié</option><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">Andorra</option><option value="5">Angola</option><option value="6">Antigua and arbuda</option> etc...
Avez vous une solution, s'il vous plaît ???

01/06/2014, 23h06
kunpen

Si des détails techniques sont nécessaires pour m'aiderà intégrer le select autocomplete à la google maps n'hésitez pas ^^
Sinon l'intégration forum phpBB ou autre dans mon CMS est toujours d'actualité.
pour info j'ai atteint les objectifs avec la Google Maps me manque plus que le select, voir les options de distances entre membres, je filerais un code plus tutorial si j'arrive à finir le tout.