Comment utiliser
Joomla 3 et Bootstrap 3
depuis une application externe ?
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Présenta5on	
  
Joomla!	
  CMS	
  /	
  Joomla!	
  Framework	
  
Joomla!	
  CMS	
  3.3	
   Joomla!	
  Framework	
  1.1	
  
Aujourd’hui	
   ...
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...
Applica5on	
  externe	
  
Avantages	
  /	
  Inconvénients	
  
Les	
  	
  	
  	
  	
  	
  	
  	
  	
  :	
  	
  
v 	
  Déve...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Exemples	
  d’	
  
	
  «	
  Applica5ons	
  Externes	
  »	
  
Exemple1	
  :	
  Dashboard/Repor5ngs	
  
Site(s)/E-­‐Bou5que(s)	
   Analy5cs	
  
Réseaux	
  
Sociaux	
  
 	
  	
  	
  	
  	
  	
  	
  	
  Interven5on	
  Humaine	
  
Exemple2	
  :	
  interfaces	
  entrantes/sortantes	
  
Site/E-...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo	
  
Contenu	
  de	
  la	
  démo	
  
ü Fonc5onnalités:	
  
•  Affichage	
  de	
  la	
  liste	
  des	
  membres	
  du	
  gouverne...
JOOMLA	
  3	
  (CMS)	
  
Ecran:	
  «	
  Accueil	
  »	
  
	
  Applica5on	
  Externe	
  
User	
  
iden5fié	
  ?	
  
Ecran:	
 ...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Préparer	
  le	
  
terrain	
  
Préparer	
  le	
  terrain	
  (Site	
  sous	
  Joomla	
  3)	
  
ü 	
  Télécharger	
  Joomla3!	
  depuis	
  www.joomla.fr	
...
Préparer	
  le	
  terrain	
  (Lien	
  de	
  menu)	
  
	
  	
  
Dans	
  le	
  Main	
  Menu,	
  créer	
  le	
  nouveau	
  li...
Préparer	
  le	
  terrain	
  (Table	
  des	
  membres)	
  
Créer	
  la	
  table:	
  «	
  fvzhk_appext_gouv	
  »	
  contena...
Préparer  le  terrain  (Répertoires)	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  Les	
  répertoires	
  et	
  fichiers	
  sont	
...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
les	
  5	
  ou5ls	
  
u5lisés	
  
1-­‐	
  Framework	
  de	
  Joomla	
  
<?php
/** Chargement du Framework Joomla */
//Définition des constantes d'exécution
...
2-­‐	
  JQuery	
  et	
  la	
  font	
  «	
  IcoMoon	
  »	
  
Nous	
  u5liserons	
  JQuery	
  (User	
  Interface)	
  et	
  l...
3-­‐	
  Bootstap	
  v3	
  
Joomla	
  3.3	
  (CMS)	
  possède	
  en	
  standard	
  bootstrap	
  mais	
  il	
  est	
  en	
  ...
4-­‐	
  Plug-­‐in	
  DataTables	
  
Cet	
  ou5l	
  n’est	
  pas	
  indispensable	
  au	
  fonc5onnement	
  d’une	
  Applic...
5-­‐	
  API	
  «	
  Google	
  Chart	
  »	
  
Cet	
  ou5l	
  n’est	
  pas	
  indispensable	
  au	
  fonc5onnement	
  d’une	...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  les	
  écrans	
  »	
  
Les	
  écrans	
  
Ecran:	
  Accueil	
  Joomla!	
   Ecran:	
  Login	
  
Ecran:	
  Accueil	
  App.	
  Ext.	
  
Ecran:	
  Lis...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  la	
  sécurité	
  »	
  
/** Sécurité */
$user =& JFactory::getUser();
if ($user->guest) { //User non identifie
$app->redirect(JRoute::_(JURI::root...
/**	
  Sécurité	
  */	
  
$user	
  =&	
  JFactory::getUser();	
  
if	
  ($user-­‐>guest)	
  {	
  //User	
  non	
  iden5fié	...
Autres	
  règles	
  de	
  sécurité	
  
$user	
  	
  =	
  JFactory::getUser();	
  
Cas	
  1:	
  tester	
  si	
  le	
  user	...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  les	
  langues	
  »	
  
Fichier:	
  fr-­‐FR.appexterne.ini	
  
	
  
APPEXT_TITRE="Applica5on	
  externe	
  sous	
  Joomla3	
  et	
  Bootstrap3"	
 ...
Sélection de la langue depuis le menu:
http://localhost/joomla3/appexterne/?lg=fr ou http://localhost/joomla3/appexterne/?...
/** Chargement du dictionnaire en fonction de la langue choisie */
$extension = 'appexterne';
$base_dir = JPATH_SITE.'appe...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  Liste	
  des	
  membres	
  »	
  
/** Chargement des membres du gouvernement */
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select($db->...
Plug-­‐in	
  «	
  DataTables	
  »:	
  éléments	
  Bootstrap3	
  
Le	
  Plugin-­‐in	
  est	
  à	
  u5liser	
  lorsque	
  la...
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  API	
  Google	
  Graph	
  »	
  
PHP
/** Extraction des resultats en format JSON*/
$query = $db->getQuery(true);
$query->select($db->quoteName('sexe').","....
HTML	
  
<div id="chart_div_minist»></div>
JavaScript
<script type="text/javascript" src="https://www.google.com/jsapi"></...
Prochain SlideShare
Chargement dans…5
×

Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

1 518 vues

Publié le

Présentation Web21 lors du JoomlaDay de Paris mai 2014

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 518
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
40
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

  1. 1. Comment utiliser Joomla 3 et Bootstrap 3 depuis une application externe ?
  2. 2. Web21.pro    /    contact@web21.pro   Présenta5on  
  3. 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. 4. Présenta5on  et  démo  téléchargeables   depuis  www.JoomDay.com  
  5. 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. 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. 7. Web21.pro    /    contact@web21.pro   Exemples  d’    «  Applica5ons  Externes  »  
  8. 8. Exemple1  :  Dashboard/Repor5ngs   Site(s)/E-­‐Bou5que(s)   Analy5cs   Réseaux   Sociaux  
  9. 9.                  Interven5on  Humaine   Exemple2  :  interfaces  entrantes/sortantes   Site/E-­‐Bou5que   Logiciel   Mé5er  
  10. 10. Web21.pro    /    contact@web21.pro   Démo  
  11. 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. 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. 13. Web21.pro    /    contact@web21.pro   Préparer  le   terrain  
  14. 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. 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. 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. 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. 18. Web21.pro    /    contact@web21.pro   Démo:   les  5  ou5ls   u5lisés  
  19. 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. 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. 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. 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. 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. 24. Web21.pro    /    contact@web21.pro   Démo:   «  les  écrans  »  
  25. 25. Les  écrans   Ecran:  Accueil  Joomla!   Ecran:  Login   Ecran:  Accueil  App.  Ext.   Ecran:  Liste  des  membres  Ecran:  Stats  des  membres  
  26. 26. Web21.pro    /    contact@web21.pro   Démo:   «  la  sécurité  »  
  27. 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. 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. 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. 30. Web21.pro    /    contact@web21.pro   Démo:   «  les  langues  »  
  31. 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. 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. 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. 34. Web21.pro    /    contact@web21.pro   Démo:   «  Liste  des  membres  »  
  35. 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. 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. 37. Web21.pro    /    contact@web21.pro   Démo:   «  API  Google  Graph  »  
  38. 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. 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)  

×