SlideShare une entreprise Scribd logo
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	
   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	
  
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-­‐Bou5que	
   Logiciel	
  
Mé5er	
  
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo	
  
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
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	
  
ü 	
  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	
  »	
  
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
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	
  
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  les	
  écrans	
  »	
  
Les	
  écrans	
  
Ecran:	
  Accueil	
  Joomla!	
   Ecran:	
  Login	
  
Ecran:	
  Accueil	
  App.	
  Ext.	
  
Ecran:	
  Liste	
  des	
  membres	
  Ecran:	
  Stats	
  des	
  membres	
  
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().'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))	
  
Web21.pro	
  	
  /	
  	
  contact@web21.pro	
  
Démo:	
  
«	
  les	
  langues	
  »	
  
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	
  
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->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	
  
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').","."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)	
  

Contenu connexe

Tendances

Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3
Com'3elles - www.com3elles.com
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
Com'3elles - www.com3elles.com
 
Joomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3ellesJoomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3elles
Com'3elles - www.com3elles.com
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Claude BUENO
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
Abdoulaye Dieng
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4
Jamel Eddine Zarga
 
Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!
Marc DECHEVRE
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
Cynapsys It Hotspot
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
François Huynh
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
Voyelle Voyelle
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5
aelfkih
 
Formation wordpress
Formation wordpressFormation wordpress
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
Erwan Tanguy
 
Comment ajouter un module social commentaire Facebook ?
Comment ajouter un module social commentaire Facebook ?Comment ajouter un module social commentaire Facebook ?
Comment ajouter un module social commentaire Facebook ?
AXIZ eBusiness
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
Peggy Le Déaut ☂️
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
michel.titeux
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
Cyberco
 
Tutoriaux
TutoriauxTutoriaux
Tutoriaux
modokimokona
 

Tendances (20)

Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
 
Joomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3ellesJoomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3elles
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4
 
Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Comment ajouter un module social commentaire Facebook ?
Comment ajouter un module social commentaire Facebook ?Comment ajouter un module social commentaire Facebook ?
Comment ajouter un module social commentaire Facebook ?
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
 
Tutoriaux
TutoriauxTutoriaux
Tutoriaux
 

En vedette

Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5
Thierry Broussegoutte
 
Développer son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - WebinarDévelopper son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - Webinar
Jean-Charles GAUTARD
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
cornnery
 
Joomla3 : XAMPP Portable
Joomla3 : XAMPP PortableJoomla3 : XAMPP Portable
Joomla3 : XAMPP Portable
Boonlert Aroonpiboon
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
Présentation projet tourisme responsable circuit Cambodge by Vision Ethique
Présentation projet tourisme responsable circuit Cambodge by Vision EthiquePrésentation projet tourisme responsable circuit Cambodge by Vision Ethique
Présentation projet tourisme responsable circuit Cambodge by Vision Ethique
Caroline Debonnaire
 
El programa eTwinning en Navarra
El programa eTwinning en NavarraEl programa eTwinning en Navarra
El programa eTwinning en Navarra
INTEF
 
Ateliers numériques Pays de Bergerac_automne2014
Ateliers numériques Pays de Bergerac_automne2014Ateliers numériques Pays de Bergerac_automne2014
Ateliers numériques Pays de Bergerac_automne2014
Pays de Bergerac
 
Info fsg
Info fsgInfo fsg
Info fsg
zidiC
 
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
NALED Serbia
 
Resolucion 269 del 13 de mayo de 2014
Resolucion 269 del 13 de mayo de 2014Resolucion 269 del 13 de mayo de 2014
Resolucion 269 del 13 de mayo de 2014
Pvd Rionegro Digiital
 
Semiconductores
SemiconductoresSemiconductores
Semiconductores
Zosimo Ramos Tapia
 
GO! ANIMATE.
GO! ANIMATE.GO! ANIMATE.
GO! ANIMATE.
Yesica Espinosa
 
Rad20142010105881
Rad20142010105881Rad20142010105881
Rad20142010105881
ServicioalCiudadanoUrna_DPS
 
Bienestar institucional más cerca de ti
Bienestar institucional más cerca de tiBienestar institucional más cerca de ti
Bienestar institucional más cerca de ti
Andres Gutierrez T
 
L'avenir des agences de développement
L'avenir des agences de développementL'avenir des agences de développement
L'avenir des agences de développement
chdulong
 
Atelier 2_Photos et videos_OT Bergerac
Atelier 2_Photos et videos_OT BergeracAtelier 2_Photos et videos_OT Bergerac
Atelier 2_Photos et videos_OT Bergerac
Pays de Bergerac
 
Prometeo y el mito del creador// Referentes clásicos en el cine
Prometeo y el mito del creador// Referentes clásicos en el cinePrometeo y el mito del creador// Referentes clásicos en el cine
Prometeo y el mito del creador// Referentes clásicos en el cine
Antoñete Denis Matín
 
Sistemas operativos
Sistemas operativosSistemas operativos
Sistemas operativos
Narciza Andrade
 
2eme journée-etourisme-manoir-du-grand-vignoble
2eme journée-etourisme-manoir-du-grand-vignoble2eme journée-etourisme-manoir-du-grand-vignoble
2eme journée-etourisme-manoir-du-grand-vignoble
Pays de Bergerac
 

En vedette (20)

Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5
 
Développer son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - WebinarDévelopper son entreprise grâce à joomla - Webinar
Développer son entreprise grâce à joomla - Webinar
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
 
Joomla3 : XAMPP Portable
Joomla3 : XAMPP PortableJoomla3 : XAMPP Portable
Joomla3 : XAMPP Portable
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Présentation projet tourisme responsable circuit Cambodge by Vision Ethique
Présentation projet tourisme responsable circuit Cambodge by Vision EthiquePrésentation projet tourisme responsable circuit Cambodge by Vision Ethique
Présentation projet tourisme responsable circuit Cambodge by Vision Ethique
 
El programa eTwinning en Navarra
El programa eTwinning en NavarraEl programa eTwinning en Navarra
El programa eTwinning en Navarra
 
Ateliers numériques Pays de Bergerac_automne2014
Ateliers numériques Pays de Bergerac_automne2014Ateliers numériques Pays de Bergerac_automne2014
Ateliers numériques Pays de Bergerac_automne2014
 
Info fsg
Info fsgInfo fsg
Info fsg
 
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
JPP Samit (NALED, Ekonomsko odeljenje Francuske Ambasade u Srbiji i Privredna...
 
Resolucion 269 del 13 de mayo de 2014
Resolucion 269 del 13 de mayo de 2014Resolucion 269 del 13 de mayo de 2014
Resolucion 269 del 13 de mayo de 2014
 
Semiconductores
SemiconductoresSemiconductores
Semiconductores
 
GO! ANIMATE.
GO! ANIMATE.GO! ANIMATE.
GO! ANIMATE.
 
Rad20142010105881
Rad20142010105881Rad20142010105881
Rad20142010105881
 
Bienestar institucional más cerca de ti
Bienestar institucional más cerca de tiBienestar institucional más cerca de ti
Bienestar institucional más cerca de ti
 
L'avenir des agences de développement
L'avenir des agences de développementL'avenir des agences de développement
L'avenir des agences de développement
 
Atelier 2_Photos et videos_OT Bergerac
Atelier 2_Photos et videos_OT BergeracAtelier 2_Photos et videos_OT Bergerac
Atelier 2_Photos et videos_OT Bergerac
 
Prometeo y el mito del creador// Referentes clásicos en el cine
Prometeo y el mito del creador// Referentes clásicos en el cinePrometeo y el mito del creador// Referentes clásicos en el cine
Prometeo y el mito del creador// Referentes clásicos en el cine
 
Sistemas operativos
Sistemas operativosSistemas operativos
Sistemas operativos
 
2eme journée-etourisme-manoir-du-grand-vignoble
2eme journée-etourisme-manoir-du-grand-vignoble2eme journée-etourisme-manoir-du-grand-vignoble
2eme journée-etourisme-manoir-du-grand-vignoble
 

Similaire à Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
J platform
J platformJ platform
J platform
Bilel McSam
 
Joomla! Platform - Pourquoi l’API Joomla!
Joomla! Platform - Pourquoi l’API Joomla!Joomla! Platform - Pourquoi l’API Joomla!
Joomla! Platform - Pourquoi l’API Joomla!
Bilel McSam
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
goldoraf
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
Nathaniel Richand
 
Présentation SEBLOD JoomlaDay 2011
Présentation SEBLOD JoomlaDay 2011Présentation SEBLOD JoomlaDay 2011
Présentation SEBLOD JoomlaDay 2011
Agence agerix
 
SEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in FranceSEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in France
Lapoux Sébastien
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
Hugo Hamon
 
Developpement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdfDeveloppement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdf
SofianeHassine2
 
Developpement dun site_web_developpement
Developpement dun site_web_developpementDeveloppement dun site_web_developpement
Developpement dun site_web_developpement
mosalah38
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
Frédéric Queudret
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 

Similaire à Utiliser Joomla 3 et Bootstrap 3 depuis une application externe (20)

Atelier template
Atelier templateAtelier template
Atelier template
 
J platform
J platformJ platform
J platform
 
Joomla! Platform - Pourquoi l’API Joomla!
Joomla! Platform - Pourquoi l’API Joomla!Joomla! Platform - Pourquoi l’API Joomla!
Joomla! Platform - Pourquoi l’API Joomla!
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
HTML5
HTML5HTML5
HTML5
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Présentation SEBLOD JoomlaDay 2011
Présentation SEBLOD JoomlaDay 2011Présentation SEBLOD JoomlaDay 2011
Présentation SEBLOD JoomlaDay 2011
 
SEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in FranceSEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in France
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
Developpement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdfDeveloppement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdf
 
Developpement dun site_web_developpement
Developpement dun site_web_developpementDeveloppement dun site_web_developpement
Developpement dun site_web_developpement
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 

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  
  • 9.                  Interven5on  Humaine   Exemple2  :  interfaces  entrantes/sortantes   Site/E-­‐Bou5que   Logiciel   Mé5er  
  • 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)