Faire un gestionnaire de contacts avec GoogleMaps et le mkFramework

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-A. Voici le schéma MCD▲

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

II-B. Voici la requête SQL▲

CREATE TABLE `contact` (
`cont_id` int(11) NOT NULL auto_increment,
`cont_lastname` varchar(50) NOT NULL,
`cont_firstname` varchar(50) NOT NULL,
`cont_adress` varchar(50) NOT NULL,
`cont_zip` varchar(50) NOT NULL,
`cont_city` varchar(50) NOT NULL,
`cont_picture` varchar(100) NOT NULL,
`memb_id` int(11) NOT NULL,
PRIMARY KEY  (`cont_id`)
);
CREATE TABLE `member` (
`memb_id` int(11) NOT NULL auto_increment,
`memb_username` varchar(50) NOT NULL,
`memb_password` varchar(50) NOT NULL,
PRIMARY KEY  (`memb_id`)
);

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

Voici l'arborescence créée :

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

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 :

;<?php die()?>
[db]
googleMap.dsn="mysql:dbname=googleMapDb;host=localhost"
googleMap.sgbd=pdo_mysql
googleMap.username=root
googleMap.password=root

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

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

Cliquez sur le profil « googleMapDb » :

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.

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

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 » :

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 :

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

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

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 » :

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.

Ce qui donnera pour notre classe model_member.php :

<?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);
    }
}

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

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 :

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 :

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] :

[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 » :

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

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() :

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() :

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() :

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

par

$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 :

<table class="tb_list">
    <tr>
        
        <th>Nom</th>
        <th>Prenom</th>
        <th>Adresse</th>
        <th>CP</th>
        <th>Ville</th>
        <th></th>
    </tr>
    <?php if($this->tContact):?>
        <?php foreach($this->tContact as $oContact):?>
        <tr <?php echo plugin_tpl::alternate(array('','class="alt"'))?>>    
            <td><?php echo $oContact->cont_lastname ?></td>
            <td><?php echo $oContact->cont_firstname ?></td>
            <td><?php echo $oContact->cont_adress ?></td>
            <td><?php echo $oContact->cont_zip ?></td>
            <td><?php echo $oContact->cont_city ?></td>
            <td>
                    <a href="<?php echo $this->getLink('contact::edit',array(
                        'id'=>$oContact->getId()
                    ) 
                    )?>">Edit</a>
                    | 
                    <a href="<?php echo $this->getLink('contact::delete',array(
                        'id'=>$oContact->getId()
                    ) 
                    )?>">Delete</a>
                    | 
                    <a href="<?php echo $this->getLink('contact::show',array(
                        'id'=>$oContact->getId()
                    ) 
                    )?>">Show</a>
            </td>
        </tr>    
        <?php endforeach;?>
    <?php else:?>
        <tr>
            <td colspan="7">Aucune ligne</td>
        </tr>
    <?php endif;?>
</table>

<p><a href="<?php echo $this->getLink('contact::new') ?>">New</a></p>

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 :

$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 :

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) :

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


foreach($tContact as $oContact){
            
    $sImage=null;
    if($oContact->cont_picture!=''){
        $sImage='<img style="float:right;width:50px" src="'.$oContact->cont_picture.'"/>';
    }
            
    //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>',
             $sImage,
            '<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());

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.

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

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