Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

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éciﬁques
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

iden5ﬁé
?

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éﬁxe
des
tables:
«
fvzhk_
»

User/password
administrateur:
«
admin
»
/
«
admin
»

Vériﬁer
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
ﬁchiers
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');

deﬁne('JPATH_BASE',
'../’)
dépend
du
niveau
du
répertoire
de
votre
applica5on
externe

Exemple:
deﬁne('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:
woﬀ,
t,
svg
et
eot
et
possède
l’icône
«
Joomla
»

Elle
est
personnalisable
via
«IcoMoon
App
»

Site
oﬃciel:
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
idenEﬁé
?

•  Si
le
user
ne
correspond
pas
aux
règles
de
sécurité,
il
sera
redirigé
vers
la
page
«
login.php
»
(écran

d’iden5ﬁca5on)

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
iden5ﬁé

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

•  La
structure
des
répertoires
et
des
ﬁchiers
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
ﬁchiers
et

•  Elles
sont
appelées
via
:
<?php
echo
JText::_('APPEXT_TITRE');?>

Fichier:

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
(aﬃchage
du
graphique)

Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Utiliser Joomla 3 et Bootstrap 3 depuis une application externe

Similar to Utiliser Joomla 3 et Bootstrap 3 depuis une application externe (20)

Utiliser Joomla 3 et Bootstrap 3 depuis une application externe