Faire un gestionnaire de contacts avec GoogleMaps et le mkFramework

Utilisez le module GoogleMaps

Dans ce tutoriel, je vous propose d'intégrer facilement un module Google Maps dans votre application web.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Ce tutoriel se base sur le framework PHP mkframework, vous pouvez lire une présentation de ce dernier ici.

Nous créons une simple application de contact avec un accès restreint afin que chaque utilisateur puisse se créer un compte, puis administrer ses contacts en les géolocalisant via l'API de Google.

II. Le modèle de données

II-A. Voici le schéma MCD

Image non disponible

Ci-dessous, le schéma de la base de données que nous allons utiliser :

II-B. Voici la requête SQL

Créez une base de données « googleMapDb » :

Modèle de données
Sélectionnez
  1. CREATE TABLE `contact` ( 
  2. `cont_id` int(11) NOT NULL auto_increment, 
  3. `cont_lastname` varchar(50) NOT NULL, 
  4. `cont_firstname` varchar(50) NOT NULL, 
  5. `cont_adress` varchar(50) NOT NULL, 
  6. `cont_zip` varchar(50) NOT NULL, 
  7. `cont_city` varchar(50) NOT NULL, 
  8. `cont_picture` varchar(100) NOT NULL, 
  9. `memb_id` int(11) NOT NULL, 
  10. PRIMARY KEY  (`cont_id`) 
  11. ); 
  12. CREATE TABLE `member` ( 
  13. `memb_id` int(11) NOT NULL auto_increment, 
  14. `memb_username` varchar(50) NOT NULL, 
  15. `memb_password` varchar(50) NOT NULL, 
  16. PRIMARY KEY  (`memb_id`) 
  17. ); 

Le champ « mot de passe » doit faire au minimum 40 caractères, car il stockera le mot de passe hashé avec la fonction sha1() de PHP. Plus d'informations sur la fonction sha1 ici.

Si vous utilisez une autre fonction de hashage, pensez à modifier la longueur de ce champ en conséquence.

III. Création de l'application

Rendez-vous à l'adresse du framework, saisissez « contactGoogleMap » et validez :

Image non disponible

Voici l'arborescence créée :

Image non disponible

Une fois l'application générée par le builder, vous êtes redirigé sur la page d'administration du projet :

Image non disponible

IV. Éditez le fichier de configuration des connexions

Pour gérer les connexions de votre application, vous avez à votre disposition un fichier de configuration dans le répertoire conf/.

Éditez le fichier conf/connexion.ini.php pour paramétrer votre serveur MySQL ainsi :

 
Sélectionnez
  1. ;<?php die()?> 
  2. [db] 
  3. googleMap.dsn="mysql:dbname=googleMapDb;host=localhost" 
  4. googleMap.sgbd=pdo_mysql 
  5. googleMap.username=root 
  6. googleMap.password=root 

V. Créez la couche modèle

Cliquez sur « créer la couche modèle ».

Vous voyez la liste des profils de connexion précédemment renseignés dans le fichier :

Image non disponible

Cliquez sur le profil « googleMapDb » :

Image non disponible

Vous voyez la liste des tables visibles par le profil de connexion sélectionné.

En validant, le builder vous crée un fichier de classe par table.

VI. Créez le module contact

Cliquez sur « créer un module CRUD Create Read Update» :

Image non disponible

Vous voyez la liste des classes modèle de l'application précédemment créée. Une classe pour les membres et une autre pour les contacts. Sélectionnez la classe « model_contact.php » :

Image non disponible

Lorsque vous sélectionnez votre classe modèle contact, vous voyez apparaître un tableau listant les champs présents dans la table « contact ».

Le builder vous permet de personnaliser le CRUD qui sera généré : vous pouvez choisir de créer ou non les pages d'ajout, de modification et de suppression.

Vous pouvez également préciser les libellés des champs tels qu'ils seront affichés en entête de tableau et nom de champ de formulaire.

Pensez à modifier le champ « image », sélectionnez dans le menu déroulant « upload » afin de permettre d'uploader une photo de votre contact.

Validez le formulaire, le builder vous générera un module contact dans le répertoire module de votre application :

Image non disponible

Le builder vous détaille les répertoires créés ainsi que les fichiers créés.

De plus, il vous propose un lien pour consulter le rendu de votre module.

VII. Ajoutez l'authentification

Notre application doit permettre de s'inscrire pour ensuite administrer ses contacts à partir de leur position sur GoogleMap. Nous allons ici simplement ajouter la partie « authentification » plus « inscription ».

Cliquez sur « Créer un module d'authentification avec inscription » :

Image non disponible

Le builder vous indique que l'application nécessite des modifications pour pouvoir créer ce module d'authentification.

Il vous invite à créer deux méthodes dans la classe modèle gérant les comptes de connexion ; dans notre cas, la classe member.

Copiez ces deux méthodes et collez-les dans le fichier model/model_member.php dans la classe model_member.

Pour la première méthode, il faut bien remplacer les champs « login » et « pass » par le nom des champs équivalent dans notre table member, ici « memb_username » et « memb_password ».

Ce qui donnera pour notre classe model_member.php :

 
Sélectionnez
<?php
class model_member extends abstract_model{
    
    protected $sClassRow='row_member';
    
    protected $sTable='member';
    protected $sConfig='googleMap';
    
    protected $tId=array('id');

    public static function getInstance(){
        return self::_getInstance(__CLASS__);
    }

    public function findById($uId){
        return $this->findOne('SELECT * FROM '.$this->sTable.' WHERE id=?',$uId );
    }
    public function findAll(){
        return $this->findMany('SELECT * FROM '.$this->sTable);
    }
    
    public function getListAccount(){
  
        $tAccount=$this->findAll();
      
        $tLoginPassAccount=array();
      
        if($tAccount){
            foreach($tAccount as $oAccount){
                //on crée ici un tableau index par nom d'utilisateur et mot de pase
                $tLoginPassAccount[$oAccount->memb_username][$oAccount->memb_password]=$oAccount;
            }
        }

        return $tLoginPassAccount;

    }
   
    public function hashPassword($sPassword){
        //utiliser ici la méthode de votre choix pour hasher votre mot de passe
        return sha1('monSel1234'.$sPassword);
    }
}

Pour la méthode hashPassword(), je vous invite à ajouter un « sel » afin d'améliorer la sécurité.

Une fois la classe model_member modifiée, réactualisez la page de création de module d'authentification :

Image non disponible

Cette fois-ci, le builder vous invite à renseigner plusieurs choses :

  • la classe modèle à utiliser (notre classe model_member) ;
  • le nom du module d'authentification à créer ;
  • le module vers lequel rediriger, une fois connecté ;
  • le champ de login et celui de mot de passe.

Renseignez pour le module à rediriger : « contact::index » et pour les champs de login et mot de passe « login » et « password », puis validez.

Le builder vous créera un nouveau module dans le répertoire du même nom :

Image non disponible

Comme vous pouvez le lire, il vous demande d'activer l'authentification en modifiant une variable dans un fichier de configuration.

Il propose également un lien pour vous rendre sur ce fichier de configuration, cliquez dessus :

Image non disponible

Le builder vous permet de naviguer et modifier vos fichiers dans votre navigateur. Vous n'avez plus qu'à modifier la ligne demandée dans la section [auth] :

 
Sélectionnez
[auth]
enabled=1

À partir de ce moment, vous ne pouvez plus accéder au site, il faut vous inscrire.

Cliquez sur « voir le site » pour vous rendre sur votre application, vous êtes automatiquement redirigé sur la page de « login » :

Image non disponible

Cliquez sur le lien « s'inscrire » et créez un compte. Identifiez-vous et vous serez redirigé sur le module contact :

Image non disponible

VIII. Modifions le module contact pour lier les contacts au membre connecté

Avant d'enregistrer un contact, nous allons modifier le module contact pour qu'il lie automatiquement les contacts créés au membre connecté, et filtrer l'affichage afin que chaque membre puisse visualiser et éditer uniquement ses contacts.

Modifiez le fichier module/contact/main.php.

Avec la méthode processSave() :

 
Sélectionnez
private function processSave(){
    if(!_root::getRequest()->isPost() ){ //si ce n'est pas une requete POST on ne soumet pas
        return null;
    }
        
    $oPluginXsrf=new plugin_xsrf();
    if(!$oPluginXsrf->checkToken( _root::getParam('token') ) ){ //on verifie que le token est valide
        return array('token'=>$oPluginXsrf->getMessage() );
    }
    
    $iId=_root::getParam('id',null);
    if($iId==null){
        $oContact=new row_contact;    
        //on force ici l'id du membre par celui du membre connecté
        $oContact->member_id=_root::getAuth()->getAccount()->id;
    }else{
        $oContact=model_contact::getInstance()->findById( _root::getParam('id',null) );
    }
        
    $tColumn=array('cont_lastname','cont_firstname','cont_adress','cont_zip','cont_city');
    foreach($tColumn as $sColumn){
        $oContact->$sColumn=_root::getParam($sColumn,null) ;
    }

    $tColumnUpload=array('cont_picture');
    if($tColumnUpload){
        foreach($tColumnUpload as $sColumnUpload){
            $oPluginUpload=new plugin_upload($sColumnUpload);
            if($oPluginUpload->isValid()){
                $sNewFileName=_root::getConfigVar('path.upload').$sColumnUpload.'_'.date('Ymdhis');

                $oPluginUpload->saveAs($sNewFileName);
                $oContact->$sColumnUpload=$oPluginUpload->getPath();
            }
        }
    }
        
    if($oContact->save()){
        //une fois enregistré, on est redirigé (vers la page liste)
        _root::redirect('contact::list');
    }else{
        return $oContact->getListError();
    }
        
}

Nous avons ajouté ici, lors de la création d'un contact, l'assignation du champ « member_id » avec celui de notre utilisateur connecté.

Il faut de plus, filtrer les contacts affichés dans le tableau. Pour cela, modifiez le modèle contact.

Éditez le fichier model/model_contact.php pour ajouter une méthode findByMember() :

 
Sélectionnez
public function findByMember($member_id){
    return $this->findMany('SELECT * FROM '.$this->sTable.' WHERE memb_id=?',$member_id);
}

Et modifiez en conséquence l'appel dans le fichier module/contact/main.php.

Remplacez dans la méthode _list() :

 
Sélectionnez
$tContact=model_contact::getInstance()->findAll();

par

 
Sélectionnez
$tContact=model_contact::getInstance()->findByMember(_root::getAuth()->getAccount()->id);

Saisissez un ou deux contacts avec leurs adresses.

Supprimez également l'affichage de l'adresse de la photo uploadée :

Éditez la vue module/contact/view/list.php pour supprimer la ligne de l'image.

Ce qui donnera :

 
Sélectionnez
  1. <table class="tb_list"> 
  2.     <tr> 
  3.          
  4.         <th>Nom</th> 
  5.         <th>Prenom</th> 
  6.         <th>Adresse</th> 
  7.         <th>CP</th> 
  8.         <th>Ville</th> 
  9.         <th></th> 
  10.     </tr> 
  11.     <?php if($this->tContact):?> 
  12.         <?php foreach($this->tContact as $oContact):?> 
  13.         <tr <?php echo plugin_tpl::alternate(array('','class="alt"'))?>>     
  14.             <td><?php echo $oContact->cont_lastname ?></td> 
  15.             <td><?php echo $oContact->cont_firstname ?></td> 
  16.             <td><?php echo $oContact->cont_adress ?></td> 
  17.             <td><?php echo $oContact->cont_zip ?></td> 
  18.             <td><?php echo $oContact->cont_city ?></td> 
  19.             <td> 
  20.                     <a href="<?php echo $this->getLink('contact::edit',array( 
  21.                         'id'=>$oContact->getId() 
  22.                     )  
  23.                     )?>">Edit</a> 
  24.                     |  
  25.                     <a href="<?php echo $this->getLink('contact::delete',array( 
  26.                         'id'=>$oContact->getId() 
  27.                     )  
  28.                     )?>">Delete</a> 
  29.                     |  
  30.                     <a href="<?php echo $this->getLink('contact::show',array( 
  31.                         'id'=>$oContact->getId() 
  32.                     )  
  33.                     )?>">Show</a> 
  34.             </td> 
  35.         </tr>     
  36.         <?php endforeach;?> 
  37.     <?php else:?> 
  38.         <tr> 
  39.             <td colspan="7">Aucune ligne</td> 
  40.         </tr> 
  41.     <?php endif;?> 
  42. </table> 
  43.  
  44. <p><a href="<?php echo $this->getLink('contact::new') ?>">New</a></p> 

IX. Intégration du module GoogleMap dans l'application

Pour le module GoogleMap, il faut vous rendre sur le site du mkframework pour le télécharger.

Rendez-vous à l'adresse http://mkframework.com, rubrique « Télécharger les modules » et téléchargez l'archive.

Sur la page de téléchargement, une description vous indique comment utiliser ce module dans votre site.

Désarchivez-le dans le répertoire module/ de votre application.

Nous allons ajouter, sous la liste des contacts, une carte de Google indiquant la position de nos contacts avec la possibilité de cliquer dessus pour avoir le détail ainsi qu'un lien pour les éditer.

Éditer le fichier module/contact/main.php, méthode _list() et en fin de méthode, ajoutez :

 
Sélectionnez
$oModuleGoogleMap=new module_googleMap();
$oModuleGoogleMap->setWidth(500);
$oModuleGoogleMap->setHeight(400);
$oModuleGoogleMap->setZoom(13);


if($tContact ){
foreach($tContact as $oContact){
    //un pointer avec un peu de contenu html lorsque l'on clique dessus
    $oModuleGoogleMap->addPositionWithContent($oContact->cont_adress.', '.$oContact->cont_zip.' '.$oContact->cont_city, $oContact->cont_lastname.' '.$oContact->cont_firstname,array(
             '<h1>'.$oContact->cont_lastname.' '.$oContact->cont_firstname.'</h1>',
            '<p>'.$oContact->cont_adress.',',
             ''.$oContact->cont_zip.' '.$oContact->cont_city.'</p>',
             '<p><a href="'._root::getLink('contact::edit',array('id'=>$oContact->id)).'">Editer</a></p>'
     ));
}
}

$this->oLayout->add('main',$oModuleGoogleMap->getMap());

Ce qui vous donnera :

Image non disponible

Vous pouvez également utiliser la fonctionnalité d'upload d'une photo afin d'afficher une photo du contact.

Pour cela, modifiez le code précédent ainsi (pour y ajouter l'affichage de l'image uploadée) :

 
Sélectionnez
  1. $oModuleGoogleMap=new module_googleMap(); 
  2. $oModuleGoogleMap->setWidth(500); 
  3. $oModuleGoogleMap->setHeight(400); 
  4. $oModuleGoogleMap->setZoom(13); 
  5.  
  6.  
  7. foreach($tContact as $oContact){ 
  8.              
  9.     $sImage=null; 
  10.     if($oContact->cont_picture!=''){ 
  11.         $sImage='<img style="float:right;width:50px" src="'.$oContact->cont_picture.'"/>'; 
  12.     } 
  13.              
  14.     //un pointer avec un peu de contenu html lorsque l'on clique dessus 
  15.     $oModuleGoogleMap->addPositionWithContent($oContact->cont_adress.', '.$oContact->cont_zip.' '.$oContact->cont_city, $oContact->cont_lastname.' '.$oContact->cont_firstname,array( 
  16.              '<h1>'.$oContact->cont_lastname.' '.$oContact->cont_firstname.'</h1>', 
  17.              $sImage, 
  18.             '<p>'.$oContact->cont_adress.',', 
  19.              ''.$oContact->cont_zip.' '.$oContact->cont_city.'</p>', 
  20.              '<p><a href="'._root::getLink('contact::edit',array('id'=>$oContact->id)).'">Editer</a></p>' 
  21.      )); 
  22. } 
  23.  
  24. $this->oLayout->add('main',$oModuleGoogleMap->getMap()); 
Image non disponible

X. Conclusion

Vous avez pu apprécier le gain de productivité et la simplicité d'utilisation de ce framework ainsi que de son builder.

J'espère vous avoir donné envie d'approfondir votre intérêt envers ce challenger qu'est le mkframework.

XI. Remerciements

Je souhaiterais remercier LittleWhite pour sa validation technique, milkoseck pour ses corrections orthographiques.

Je remercie également rawsrc et chrtophe pour le débat technique qui a eu lieu durant la validation technique.

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 imikado. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.