Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
2 j'aime1,871 vues
Le document explique comment intégrer Joomla 3 avec Bootstrap 3 à travers une application externe en détaillant les étapes de préparation, les avantages et les inconvénients pour répondre aux besoins spécifiques du client. Il présente également des exemples pratiques d'applications externes, les configurations nécessaires et les méthodes de sécurité abordant l'authentification et la gestion des langues. Enfin, il décrit les fichiers et bibliothèques utilisés dans la démo, tels que jQuery, DataTables et Google Charts.
![/**
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](https://image.slidesharecdn.com/web21-joomladay-140616044928-phpapp01/85/Utiliser-Joomla-3-et-Bootstrap-3-depuis-une-application-externe-28-320.jpg)
![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)](https://image.slidesharecdn.com/web21-joomladay-140616044928-phpapp01/85/Utiliser-Joomla-3-et-Bootstrap-3-depuis-une-application-externe-38-320.jpg)
![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)](https://image.slidesharecdn.com/web21-joomladay-140616044928-phpapp01/85/Utiliser-Joomla-3-et-Bootstrap-3-depuis-une-application-externe-39-320.jpg)
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
- 1. Comment utiliser Joomla 3 et Bootstrap 3 depuis une application externe ?
- 2. Web21.pro / contact@web21.pro Présenta5on
- 3. 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
- 4. Présenta5on et démo téléchargeables depuis www.JoomDay.com
- 5. 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
- 6. 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
- 7. Web21.pro / contact@web21.pro Exemples d’ « Applica5ons Externes »
- 8. Exemple1 : Dashboard/Repor5ngs Site(s)/E-‐Bou5que(s) Analy5cs Réseaux Sociaux
- 10. Web21.pro / contact@web21.pro Démo
- 11. 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
- 12. 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
- 13. Web21.pro / contact@web21.pro Préparer le terrain
- 14. 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 »
- 15. 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 »
- 16. 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
- 17. 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 »
- 18. Web21.pro / contact@web21.pro Démo: les 5 ou5ls u5lisés
- 19. 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/
- 20. 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 »
- 21. 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
- 22. 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
- 23. 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
- 24. Web21.pro / contact@web21.pro Démo: « les écrans »
- 25. Les écrans Ecran: Accueil Joomla! Ecran: Login Ecran: Accueil App. Ext. Ecran: Liste des membres Ecran: Stats des membres
- 26. Web21.pro / contact@web21.pro Démo: « la sécurité »
- 27. /** 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
- 28. /** 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
- 29. 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))
- 30. Web21.pro / contact@web21.pro Démo: « les langues »
- 31. 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
- 32. 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)
- 33. /** 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
- 34. Web21.pro / contact@web21.pro Démo: « Liste des membres »
- 35. /** 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
- 36. 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
- 37. Web21.pro / contact@web21.pro Démo: « API Google Graph »
- 38. 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)
- 39. 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)