Créer une application Bootstrap avec le mkFramework

Introduction du cours Introduction

Dans le précédent cours, je vous ai présenté un framework php différent : le mkframework.

Nous allons ici utiliser ce même framework pour créer une application Bootstrap.
Pour ce cours nous allons developper une application qui permettra d'administrer des contacts.

Mais qu'est-ce Bootstrap ?

Bootstrap est un framework CSS, permettant de faire des sites « responsive ». Ce terme désigne le fait que votre design va s'adapter en fonction de la résolution du navigateur, permettant avec un seul site d'être visible de manière optimale aussi bien sur un écran d'ordinateur que sur celui d'un smartphone.

Installation

Rendez-vous à l'adresse du framework http://mkframework.com/ pour télécharger la dernière version de celui-ci. 

Vous avez sur cette page plusieurs moyens de récupérer le framework : subversion, github, composer ou via une archive zip.

Nous allons ici télécharger l'archive zip. Désarchivez celle-ci dans le répertoire web de votre ordinateur.

Et ouvrez un navigateur à l'adresse http://localhost/mkframework_v4_95_0_r226/. 

Le lien donné contient le numéro de la version du framework téléchargé. Adaptez ce lien en fonction du nom de l'archive téléchargée.

Vous venez d'installer le framework, ou plutôt le « Builder », c'est le générateur web du framework : il vous permettra de créer vos sites et de les administrer facilement.

Créer votre application

Entrez dans le champ texte "projetBootstrap", cochez "Application compatible bootsrap" et validez.

Le builder vous redirige sur la page d'administration des projets ; vous voyez ici tous les projets créés avec le framework. Ici on voit notre projet nouvellement généré.

Le projet est créé dans le répertoire "data/genere" du framework.

Cliquez sur le bouton Editer le projet.

La plupart des frameworks vous propose d'utiliser la ligne de commande pour créer les classes modèles, créer des modules, générer vos modules CRUD... ici tout se fait via l'interface web.

La base de donnéesCréons nos tables dans la base de données

Pour ce cours, nous allons créer deux tables : "contact" et "groupe" dans une base mysql "projetBootstrapDb".

CREATE TABLE `contact` ( `cont_id` int(11) NOT NULL auto_increment, `cont_lastname` varchar(50) NOT NULL, `cont_fistname` varchar(50) NOT NULL, `cont_picture` varchar(100) NOT NULL, `cont_phone` varchar(100) NOT NULL, `group_id` int(11) NOT NULL, PRIMARY KEY (`cont_id`) ); CREATE TABLE `groupe` ( `group_id` int(11) NOT NULL auto_increment, `group_name` varchar(50) NOT NULL, PRIMARY KEY (`group_id`) );Paramétrons notre connexion sur le projet

Les connexions aux bases de données se paramètrent dans le fichier conf/connexion.ini.php de votre projet.

Vous pouvez soit éditer le fichier avec votre éditeur de code, soit utiliser le builder.

Pour cela, cliquez sur Explorer le projet.

Le builder vous permet également d'explorer vos projets pour modifier les fichiers via l'interface web.

Cliquez sur le fichier de configuration conf/connexion.ini.php, puis sur le lien [EDITER EN ENTIER].

Renseignez la configuration suivante :

; [db] maBaseMysql.dsn="mysql:dbname=projetBootstrapDb;host=localhost" maBaseMysql.sgbd=pdo_mysql maBaseMysql.username=root maBaseMysql.password=rootLa couche modèle

Le mkFramework utilisant une architecture MVC*, il nécessite des classes modèle pour interagir avec la/les base de données.

Cliquez sur le bouton Créer la couche modèle.

*MVC : Modèle Vue Contrôleur

Le buider vous liste les profils qu'il lit dans votre fichier de connexion précédement rempli.

Cliquez sur notre profil maBaseMysql.

En sélectionnant votre profil, le builder se connecte et vous liste les tables disponibles. Vous pouvez ainsi facilement cocher les tables dont vous souhaitez créer une classe modèle.

Pour la table "groupe", cochez "Retourne un tableau avec" et sélectionnez en valeur "group_name". Ceci permet lors de la création de la classe "groupe" d'ajouter une méthode permettant de retourner un tableau indexé id/nom (très utile par la suite).

Validez avec le bouton Générer, le builder vous créera deux classes "model_contact.php" et "model_groupe.php" dans le répertoire "model/" de votre application.

Voici un exemple de la classe modèle "contact" :

<?php class model_contact extends abstract_model{ protected $sClassRow='row_contact'; protected $sTable='contact'; protected $sConfig='maBaseMysql'; protected $tId=array('cont_id'); public static function getInstance(){ return self::_getInstance(__CLASS__); } public function findById($uId){ return $this->findOne('SELECT * FROM '.$this->sTable.' WHERE cont_id=?',$uId ); } public function findAll(){ return $this->findMany('SELECT * FROM '.$this->sTable); } }

La classe modèle permet d'exécuter des requêtes et de recupérer leur retour soit sous forme de tableau (findMany) soit sous forme d'un objet unique (findOne).

Lorsqu'elle vous retourne un objet, c'est une instance de la classe "row_matable" indiqué dans $sClassRow qui ressemble à ceci :

<?php class row_contact extends abstract_row{ protected $sClassModel='model_contact'; /*exemple jointure public function findAuteur(){ return model_auteur::getInstance()->findById($this->auteur_id); } */ /*exemple test validation*/ private function getCheck(){ $oPluginValid=new plugin_valid($this->getTab()); /* renseigner vos check ici $oPluginValid->isEqual('champ','valeurB','Le champ n\est pas égal à '.$valeurB); $oPluginValid->isNotEqual('champ','valeurB','Le champ est égal à '.$valeurB); $oPluginValid->isUpperThan('champ','valeurB','Le champ n\est pas supé à '.$valeurB); $oPluginValid->isUpperOrEqualThan('champ','valeurB','Le champ n\est pas supé ou égal à '.$valeurB); $oPluginValid->isLowerThan('champ','valeurB','Le champ n\est pas inférieur à '.$valeurB); $oPluginValid->isLowerOrEqualThan('champ','valeurB','Le champ n\est pas inférieur ou égal à '.$valeurB); $oPluginValid->isEmpty('champ','Le champ n\'est pas vide'); $oPluginValid->isNotEmpty('champ','Le champ ne doit pas être vide'); $oPluginValid->isEmailValid('champ','L\email est invalide'); $oPluginValid->matchExpression('champ','/[0-9]/','Le champ n\'est pas au bon format'); $oPluginValid->notMatchExpression('champ','/[a-zA-Z]/','Le champ ne doit pas être a ce format'); */ return $oPluginValid; } public function isValid(){ return $this->getCheck()->isValid(); } public function getListError(){ return $this->getCheck()->getListError(); } public function save(){ if(!$this->isValid()){ return false; } parent::save(); return true; } }

Lorsque vous instanciez un objet avec cette classe, celle-ci représente un enregistrement de votre base de données, vous pouvez ainsi simplement modifier un champ et l'enregistrer ainsi :

<?php $oContact=model_contact::getInstance()->findById(1); //on peut simplement modifié les champs $oContact->cont_firstname='Victor'; $oContact->cont_lastname='Hugo'; //et enregistrer $oContact->save();Génération des modules CRUD contact et groupe

CRUD signifie Create Read Update Delete, ce sigle désigne les actions permettant d'administrer une table.

Le builder vous permet en quelques clics de générer ce CRUD facilement.

Cliquez sur Créer un module CRUD bootstrap.

Le builder vous liste les classes modèles disponibles dans votre projet.

Sélectionnez model_groupe.php pour commencer :

En choisissant une classe modèle, le builder vous liste les informations qu'il trouve sur la table concernée, ici la table "groupe".

Il vous donne également la possibilité d'indiquer un libellé pour chaque champ de la table. Modifiez le libellé du champ "group_name" pour "Nom" et validez.

Passons au modèle contact (fichier model_contact.php).

Ici pour le module CRUD contact, il faut pensez à deux choses dans la colonne "Type" :

1. Sélectionnez "upload" pour la photo.

2. Sélectionnez "Select en utilisant model_groupe::getSelect()" pour le groupe.

Validez.

Lorsque vous validez, le builder vous indique les répertoires et fichiers créés, de plus il vous affiche un lien pour voir le module CRUD généré. En cliquant dessus, vous pouvez voir le module :

Le menuGénérons un module menu

Le builder vous propose également, afin de vous faciliter le développement : de générer un module menu, pour cela, cliquez sur Créer un module menu bootstrap.

Le builder vous liste les modules qu'il peut voir dans votre répertoire module. Vous pouvez ici cochez les méthodes et indiquer un libéllé pour le lien à créer dans le menu.

Ici, cochez la méthode "_list()" du module "groupe" et indiquez un libellé pour ce lien, faites de même pour la méthode "_list()" du module "contact" et un dernier pour une page d'accueil.

Cliquez sur le bouton de génération.

Le builder vous indique les répertoires et fichiers créés, mais il vous affiche également le code pour inclure ce menu dans votre application.

Ce code demande au framework d'ajouter à l'emplacement "menu" l'appel de la méthode "_index()" du module "menu"

Copiez ce code.

Intégrons le menu dans votre application

Le code affiché précédement d'intégration de menu est le plus souvent intégré à la fin de la méthode before() dans vos modules.

Cliquez sur le lien "explorer le projet' (ou utilisez votre éditeur de code pour modifier les fichiers qui suivent)

Ici il nous faut modifier les fichiers "main.php" de chaque module pour inclure le code précédement copié.

Commençons par le module contact (fichier module/contact/main.php).

Il vous faut coller ce code à la fin de la méthode before de vos trois modules (groupe, contact et default).

Ainsi :

<?php class module_contact extends abstract_module{ public function before(){ $this->oLayout=new _layout('bootstrap'); //ici le chargement du menu a l'emplacement "menu" $this->oLayout->addModule('menu','menu::index'); }Application terminée

L'application est terminée, vous pouvez cliquez sur voir le site pour voir le site généré.

Vous voyez votre application avec le menu permettant de voir la page d'accueil, ainsi que les groupes et les contact, notez qu'en réduisant la largeur de votre site, le menu change ainsi :

Et en cliquant sur le bouton à droite, appelé "hamburger".

Le menu se déplie, c'est ce qui se passera en naviguant avec un smartphone sur votre site.

Cliquez maintenant sur le menu Groupes pour en enregistrer quelques-uns :

Vous voyez ici le module CRUD généré précédement, cliquez sur le bouton new.

Voila le formulaire de création d'un groupe, enregistrez-en plusieurs.

Si vous avez des soucis d'accents, éditez le fichier conf/site.ini.php et modifiez l'encodage utilisé pour "UTF-8".

[encodage] ;indique l'encodage des fichiers de code, utilise pour la protection des tableaux de contexte ($_GET,$_POST) charset=UTF-8 ;indique si le framework encode en html le code deja en html double_encode=0

Rendez-vous cette fois-ci sur le menu "Contact".

Cliquez sur le bouton pour enregistrer un nouveau contact :

Vous voyez ici le module CRUD contact précédement généré.

Vous noterez ici deux choses :

1. Vous avez pour la photo un bouton pour télécharger une image sur votre ordinateur.

2. Vous avez pour le groupe un menu déroulant pour sélectionner les groupes précédement ajoutés.

Il y a un petit souci : on affiche pour la colonne photo l'adresse du fichier uploadé, modifions notre module contact pour afficher une petite image à la place.

Modifier la vue list : fichier module/contact/view/list.php

Modifiez la ligne affichant le chemin de l'image :

<td><?php echo $oContact->cont_picture ?></td>

Et ajoutez une balise image, en forcant la hauter à 30px.

<td><img style="height:30px" src="<?php echo $oContact->cont_picture ?>"/></td>

On a ainsi un meilleur rendu :

Conclusion

Vous avez pu dans ce cours apprécier la facilité d'utilisation de ce framework ainsi que de son builder.

J'espère vous avoir convaincu de laisser une chance à ce framework qui se veut différent.

Certains débutants ne sont pas familier de la ligne de commande et apprécient son builder, d'autres apprécient sa modularité et sa non régression depuis 2009 (point très rare aujourd'hui).

• #