Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
39
Comment utiliser Joomla 3 et Bootstrap 3 depuis une application externe ?
-
Upload
web21-france -
Category
Internet
-
view
770 -
download
1
description
Présentation Web21 lors du JoomlaDay de Paris mai 2014
Transcript of Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Comment utiliser�Joomla 3 et Bootstrap 3�
depuis une application externe ?
Joomla! CMS / Joomla! Framework
Joomla! CMS 3.3 Joomla! Framework 1.1
Aujourd’hui Demain
Joomla!PlaHorm va être remplacé par Joomla!Framework
Applica5on Externe
Présenta5on et démo téléchargeables depuis www.JoomDay.com
�Comment répondre aux
besoins spécifiques du Client ?
JOOMLA 3 (CMS)
Extensions JOOMLA ( template(s), composant(s) ,
module(s)…)
SPECIFIQUES
Extension(s) Joomla ?
Applica5on externe ?
Cahier des Charges
Applica5on externe Avantages / Inconvénients
Les : v Développement non MVC (Model, View, Controller) v Charte graphique du site sous Joomla v Pas d'URL rewri5ng
Les : v Coûts et Délai de réalisa5on v Répond exactement aux besoins du client v U5lisa5on de Bootstrap v3
Exemple1 : Dashboard/Repor5ngs
Site(s)/E-‐Bou5que(s) Analy5cs
Réseaux Sociaux
Interven5on Humaine
Exemple2 : interfaces entrantes/sortantes
Site/E-‐Bou5que Logiciel Mé5er
Contenu de la démo ü Fonc5onnalités:
• Affichage de la liste des membres du gouvernement contenus dans une table spécifique. (source: www.gouvernement.fr)
• Affichage des sta5s5ques liées aux membres
ü Sécurité • L’applica5on externe sera restreinte aux users iden5fiés • Ecran d’ authen5fica5on depuis l’applica5on externe
ü Applica5on Mul5 Langues: • Français et Anglais
JOOMLA 3 (CMS)
Ecran: « Accueil » Applica5on Externe
User iden5fié ?
Ecran: « Login »
Ecran: « Liste » des membres du
gouvernement Français
Ecran: « Sta5s5ques » des membres du
gouvernement Français
Synop&que de la démo
Préparer le terrain (Site sous Joomla 3) ü Télécharger Joomla3! depuis www.joomla.fr ü Installer Joomla3! en local
nom du répertoire « joomla3 » nom de la base de données: « joomla3 » préfixe des tables: « fvzhk_ » User/password administrateur: « admin » / « admin » Vérifier que le site est géré en Fr et en EN Extensions=>Ges5on des langues=> fr-‐FR et en-‐GB
ü Créer un user de type Registered: « demo » / « demo »
Préparer le terrain (Lien de menu) Dans le Main Menu, créer le nouveau lien de menu « App.Externe »
ü Type de lien: Lien Divers
ü Titre: App.Externe
ü Type de lien: URL Externe
ü URL du lien: hmp://localhost/joomla3/appexterne/
ü Accès: « Public »
Préparer le terrain (Table des membres) Créer la table: « fvzhk_appext_gouv » contenant les 31 membres du gouvernement Français CREATE TABLE `fvzhk_appext_gouv` ( `id` int(2) NOT NULL COMMENT 'Id membre du gouvernement’, `nom` varchar(25) NOT NULL COMMENT 'Nom du membre’, `prenom` varchar(50) NOT NULL COMMENT 'Prenom du membre’, `rang` tinyint(1) NOT NULL COMMENT 'Position Hierarchique du membre’, `sexe` char(1) NOT NULL COMMENT 'Genre du membre’, `titre` text NOT NULL COMMENT 'Titre du membre’, `photo` longtext NOT NULL COMMENT 'Photo du membre’, `dtenai` date NOT NULL COMMENT 'Date de naissance du membre’, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `fvzhk_appext_gouv` VALUES (1, 'VALLS', 'Manuel', 1, 'H', 'PREMIER MINISTRE', '/9j/4AAQSkZJRgABAQEAZABkAAD/4ge4SUNDX1BST0ZJTEUAAQEAA', '1962-08-13'), INSERT INTO `fvzhk_appext_gouv` VALUES (2, 'CAZENEUVE', 'Bernard', 2, 'H', 'MINISTRE DE L''INTERIEUR', '/9j/4AAQSkZJRgABAQEAZABkAAD/4ge4SUNDX1BST0ZJTEUAAQEAA', '1962-08-13'), .../...
Les photos des 31 membres sont stockées dans la Base de données (format: base64) La table est téléchargeable depuis: www.JoomDay.com
Préparer le terrain (Répertoires)
Les répertoires et fichiers sont inclus dans la démo: www.JoomDay.com
joomla3/ appexterne/
index.php liste.php sta5s5ques.php login.php logout.php assets/
js/ css/ img/ language/ fr-‐FR/ en-‐GB/ bootstap/ datatables/
Feuille de style et JavaScript de Bootstrap 3
Traduc5ons en FR et EN
Vues, feuille de style, JavaScript et images de l’Applica5on Externe
Plug-‐in « DataTables »
1-‐ Framework de Joomla <?php /** Chargement du Framework Joomla */ //Définition des constantes d'exécution define( '_JEXEC', 1 );
//Définition du chemin vers Joomla define('JPATH_BASE', '../');
//Définition des variables globales de chemin d'accès require_once ( JPATH_BASE .'includes/defines.php' );
//Importation du Framework require_once ( JPATH_BASE .'includes/framework.php' );
//Instancie l’Application $app =& JFactory::getApplication('site');
define('JPATH_BASE', '../’) dépend du niveau du répertoire de votre applica5on externe Exemple: define('JPATH_BASE', '../../’) si votre applica5on se trouve dans: joomla3/repertoire/appexterne/
2-‐ JQuery et la font « IcoMoon » Nous u5liserons JQuery (User Interface) et la font « IcoMoon » qui sont déjà présents dans Joomla (CMS)
Voir répertoire: joomla3/media/jui/
Ø Chargement de JQuery …/… <script src="<?php echo JPATH_BASE.'media/jui/js/jquery.min.js';?>"></script> </body>
Ø Chargement de la font « IcoMoon » <head> <link href="<?php echo JPATH_BASE.'media/jui/css/icomoon.css';?>" rel="stylesheet"> </head>
La font « IcoMoon » est en 4 formats: woff, t, svg et eot et possède l’icône « Joomla » Elle est personnalisable via «IcoMoon App » Site officiel: hmp://icomoon.io
Bootstrap u5lise en standard une autre font « Glyphicons » Dans le version gratuite, les icônes sont uniquement en format « png »
3-‐ Bootstap v3 Joomla 3.3 (CMS) possède en standard bootstrap mais il est en version 2 qui n’est plus maintenue.
La mise à niveau de Bootstrap devrait avoir lieu dans les prochaines versions de Joomla Dans la démo nous n’u5liserons que 2 fichiers standards et non compressés: bootstrap.css et bootstrap.js Site officiel ( Téléchargement ): hmp://getbootstrap.com
Un ou5l en ligne permet de personnaliser le style (css ou less) et le Javascript Site officiel ( Personnalisa5on ): hmp://getbootstrap.com/customize
Ø Chargement de Bootstrap 3 <head> <link href="bootstrap/bootstrap.css" rel="stylesheet"> </head>
Et …/… <script src="bootstrap/bootstrap.js"></script> </body>
Les 2 fichiers sont inclus dans la démo: www.JoomDay.com
4-‐ Plug-‐in DataTables Cet ou5l n’est pas indispensable au fonc5onnement d’une Applica5on externe sous Joomla 3 et Bootstrap 3 Le Plug-‐in « DataTables » gère en standards les éléments liés aux tables de Bootstrap 3
Il est u5lisé dans la démo afin de pouvoir gérer dans la liste des membres du gouvernement: -‐ Le nombre de records à afficher
-‐ La pagina5on, le tri par colonne
-‐ La recherche de valeurs
Site officiel ( Téléchargement ): hmps://datatables.net
Ø 2 fichiers Javascript: jquery.dataTables.min.js / dataTables.bootstrap.js et 1 fichier css: dataTables.bootstrap.css
Ø Chargement du Plug-‐in « DataTables » <head> <link rel="stylesheet" type="text/css" href="assets/css/dataTables.bootstrap.css"> </head> Et …/… <script type="text/javascript" language="javascript" src="assets/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="assets/js/dataTables.bootstrap.js"></script> </body>
Le Plug-‐in ne sera u5lisé que dans l’affichage de la liste des membres Les fichiers sont inclus dans la démo: www.JoomDay.com
5-‐ API « Google Chart » Cet ou5l n’est pas indispensable au fonc5onnement d’une Applica5on externe sous Joomla 3 et Bootstrap 3 L’API « Google Chart » est u5lisée dans la démo afin de pouvoir gérer les graphiques liés aux sta5s5ques Site officiel ( Documenta5on ): hmps://developers.google.com/chart
Ø Chargement de l’API « Google Chart » …/… <script type="text/javascript" src="https://www.google.com/jsapi"></script> </body>
Ø Afin de pouvoir u5liser l’API « Google Chart », les résultats des requêtes seront formatés en « JSON »
L’API « Google Chart » ne sera u5lisée que dans l’affichage des sta5s5ques des membres Les fichiers sont inclus dans la démo: www.JoomDay.com
Les écrans
Ecran: Accueil Joomla! Ecran: Login
Ecran: Accueil App. Ext.
Ecran: Liste des membres Ecran: Stats des membres
/** Sécurité */ $user =& JFactory::getUser(); if ($user->guest) { //User non identifie $app->redirect(JRoute::_(JURI::root().'login.php')); }
• Pour la démo nous u5liserons une règle basique: le user est-‐il non idenEfié ? • Si le user ne correspond pas aux règles de sécurité, il sera redirigé vers la page « login.php » (écran
d’iden5fica5on)
Règles de sécurité et redirec5on
/** Sécurité */ $user =& JFactory::getUser(); if ($user-‐>guest) { //User non iden5fié $input = JFactory::getApplica5on()-‐>input; if ($input-‐>getCmd('votreusername') && $input-‐>getCmd('votrepassword') ) { $votreusername=$input-‐>getCmd('votreusername'); $votrepassword=$input-‐>getCmd('votrepassword'); $creden5als = array(); $creden5als['username'] = $votreusername; $creden5als['password'] = $votrepassword; $op5ons = array(); $result = $app-‐>login($credenEals, $opEons); $app-‐>redirect(JRoute::_(JURI::root().'index.php')); } • Si le user et password saisis sont OK
1-‐ Auto iden5fica5on sous Joomla 2-‐ Redirec5on vers la page « index.php » (Accueil de l’applica5on externe)
Iden5fica5on
Autres règles de sécurité $user = JFactory::getUser(); Cas 1: tester si le user est iden5fié
if ($user-‐>guest) Cas 2: tester si le user est de type « manager » ou « administrateur » if($user -‐>authorise('core.manage')) Cas 3: tester si le user est de type « administrateur » if($user -‐>authorise('core.admin')) Cas 4: tester si le user est de type « manager » if(!$user -‐>authorise('core. admin') && $user -‐>authorise('core. core.manage')) Cas 5: tester si le user appar5ent à un groupe u5lisateurs $usergroups=JAccess::getGroupsByUser($user-‐>id); if(in_array(8, $usergroups)) Cas 6: tester si le user appar5ent à plusieurs groupes u5lisateurs $usergroups=JAccess::getGroupsByUser($user-‐>id); if(in_array(7,$usergroup) || in_array(8,$usergroup))
Fichier: fr-‐FR.appexterne.ini APPEXT_TITRE="Applica5on externe sous Joomla3 et Bootstrap3"
Fichiers: en-‐GB.appexterne.ini et fr-‐FR.appexterne.ini
• La structure des répertoires et des fichiers nous permemra d’accéder aux traduc5ons en u5lisant les classes et méthodes fournies par le framework de Joomla
• Les traduc5ons sont contenues dans les fichiers fr-‐FR.appexterne.ini et en-‐GB.appexterne.ini • Elles sont appelées via : <?php echo JText::_('APPEXT_TITRE');?>
Fichier: en-‐GB.appexterne.ini APPEXT_TITRE="External applica5on under Joomla3 and Bootstrap3"
Les traduc5ons globales contenues dans Joomla CMS seront chargées Fichiers: joomla3/language/fr-‐FR/fr-‐FR.ini et …/en-‐GB/en-‐GB.ini
Sélection de la langue depuis le menu: http://localhost/joomla3/appexterne/?lg=fr ou http://localhost/joomla3/appexterne/?lg=en Script à placer dans les écrans devant gérer les langues: /** Langue-Chargement des traductions */ //Récupération de la langue qui a été sélectionnée par l’utilisateur $jinput = JFactory::getApplication()->input; $lg=$jinput->get('lg'); //Affectation de la valeur du tag ‘en-GB’ ou ‘fr-FR’ $lang = JFactory::getLanguage(); if ($lg=='en') { $lang->setLanguage('en-GB'); } else { $lang->setLanguage('fr-FR'); }
Choix de la langue (FR ou EN)
/** Chargement du dictionnaire en fonction de la langue choisie */ $extension = 'appexterne'; $base_dir = JPATH_SITE.'appexterne'; $language_tag = $lang->getTag(); $reload = true; // Traductions présentes dans Joomla!3 (en-GB.ini ou fr-FR.ini) $lang->load('', JPATH_SITE, $language_tag, $reload); // Traductions spécifiques à l’Application Externe $lang->load($extension, $base_dir, $language_tag, $reload); …/… /** Affichage en FR ou EN echo JText::_('JGLOBAL_PASSWORD’); // Mot de passe" echo JText::_('APPEXT_NAVBAR_BRAND'); // JoomDay: Application Externe …/…
Chargement des traduc5ons
/** Chargement des membres du gouvernement */ $db = JFactory::getDbo(); $query = $db->getQuery(true); $query->select($db->quoteName(array('id', 'nom', 'prenom', 'rang', 'sexe', 'titre', 'photo'))) ->from($db->quoteName('#__appext_gouv')) ; $db->setQuery($query); $membres = $db->loadObjectList(); /** Affichage de la table contenant les membres du gouvernement */ foreach ($membres as $membre) : echo '<tr>' . '<td>'.$membre->id.'</td>' . '<td><img class="img-thumbnail" src="data:image/jpeg;base64,'.$membre->photo.'"/></td>' . '<td>'.$membre->nom.'</td>' . '<td>'.$membre->prenom.'</td>' . '<td>'.$membre->rang.'</td>' . '<td>'.$membre->sexe.'</td>' . '<td>'.$membre->titre.'</td>' . '</tr>'; endforeach;
Chargement des membres
Plug-‐in « DataTables »: éléments Bootstrap3
Le Plugin-‐in est à u5liser lorsque la volumétrie est de 50/100 lignes (ex: Dashboard) Au delà la pagina5on via PHP est conseillée
PHP /** Extraction des resultats en format JSON*/ $query = $db->getQuery(true); $query->select($db->quoteName('sexe').","."count(*) as nbr") ->from($db->quoteName('#__appext_gouv')) ->where($db->quoteName('rang') . ' = '. $db->quote(2)) ->group($db->quoteName('sexe')) ; $db->setQuery($query); $results = $db->loadObjectList(); $array = array(); $array['cols'][] = array('label' => 'Genre','type' => 'string'); $array['cols'][] = array('label' => 'Nbre','type' => 'number'); foreach($results As $result ) { if ($result->sexe=='H') { $array['rows'][]['c'] = array( array('v' => "Hom."), array('v' => (float)number_format((float)$result->nbr)) ); } else if ($result->sexe=='F') { $array['rows'][]['c'] = array( array('v' => "Fem."), array('v' => (float)number_format((float)$result->nbr)) ); } else { } $jsonDataMinist=json_encode($array); } // end foreach
API Google Graph (extrac5on des résultats)
HTML <div id="chart_div_minist»></div>
JavaScript <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var options = {pieHole: 0.2,}; var dataMinist = new google.visualization.DataTable(<?php echo $jsonDataMinist;?>); var chart = new google.visualization.PieChart(document.getElementById('chart_div_minist')); chart.draw(dataMinist,options); } </script>
API Google Graph (affichage du graphique)
