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▲
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 » :
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`));
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 :
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 :
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 :
;
<?php
die()?>
[
db
]
googleMap.dsn="mysql:dbname=googleMapDb;host=localhost"
googleMap.sgbd=pdo_mysql
googleMap.username=root
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 :
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.
VI. Créez le module contact▲
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 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 » :
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 :
<?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 :
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 :
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() :
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
>
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 :
$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
());
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.