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
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)