Système de Gestion de contenu Open Source

1
J o o m l a
Système de Gestion de contenu
Open Source
1. Définition de Joomla................................................................................................................. 3
1.1 Installation .......................................................................................................................... 3
1.2 Fonctionnalités ................................................................................................................... 5
1.3 Terminologie....................................................................................................................... 6
1.4 Base de données................................................................................................................ 6
2. Frontend................................................................................................................................... 9
2.1 Ajout de contenu............................................................................................................... 10
2.2 Ajout d’une image............................................................................................................. 11
2.3 publier un article ............................................................................................................... 12
3. Administration ........................................................................................................................ 12
3.1 Les menus........................................................................................................................ 12
3.2 Le gestionnaire de média ................................................................................................. 15
3.3 L’arborescence ................................................................................................................. 15
3.3.1 Création d’une arborescence ..................................................................................... 16
3.4 Les articles ....................................................................................................................... 17
3.4.1 Paramètres des articles ............................................................................................. 18
3.4.2 Gestion des articles ................................................................................................... 20
3.5 Les menus/modules ......................................................................................................... 20
3.5.1 Création d’un élément d’un menu .............................................................................. 21
3.5.2 Création d’un sous-menu ........................................................................................... 24
3.6 Gestion des utilisateurs .................................................................................................... 24
3.7 Droits d’accès ................................................................................................................... 25
4. Les templates......................................................................................................................... 26
4.1 Installation ........................................................................................................................ 26
4.3 Position des modules dans un template ........................................................................... 27
4.4 Adapter un template ......................................................................................................... 28
4.5 Modifier l’apparence d’un site : mode opératoire .............................................................. 29
5. Les modules........................................................................................................................... 29
5.1 Installer un module ........................................................................................................... 29
5.2 Les banners...................................................................................................................... 30
5.3 Identification ..................................................................................................................... 30
5.4 Image aléatoire................................................................................................................. 31
5.5 Syndication....................................................................................................................... 32
5.6 Afficher un flux RSS ......................................................................................................... 32
5.7 Modules administrateurs .................................................................................................. 33
6. Les composants ..................................................................................................................... 34
6.1 Installation ........................................................................................................................ 34
6.2 Bannières ......................................................................................................................... 34
6.3 Sondage ........................................................................................................................... 35
6.4 Gestion des langues......................................................................................................... 35
2
7. Les mambots ......................................................................................................................... 36
8. Gestion d’un site .................................................................................................................... 36
8.1. Backup ............................................................................................................................ 36
8.2 Restauration du backup.................................................................................................... 38
8.3 Sécurité ............................................................................................................................ 39
9. Créer son propre template ..................................................................................................... 39
9.1 Méthodologie .................................................................................................................... 39
9.2 Structure d’un template .................................................................................................... 40
9.2.1 index.php ................................................................................................................... 40
9.2.2 template_css.css ....................................................................................................... 40
9.2.3 templateDetails.xml.................................................................................................... 41
9.3 Insertion de modules ........................................................................................................ 42
3
1. Définition de Joomla
1.1 Installation
Rendez-vous sur le site http://www.joomlafacile.com/ et télécharger la dernière version de
Joomla :
Une fois le fichier zip ci-contre téléchargé sur votre ordinateur, vous devrez le décompresser,
puis installer l’ensemble, par FTP, sur votre site.
Ensuite appelez ce fichier depuis votre navigateur Web, et attendez que le chargement se
termine :
Cliquez sur « suivant » :
Cliquez sur « suivant » :
4
Cliquez sur « suivant » :
5
Cliquez sur « suivant » :
Cliquez sur « suivant » :
1.2 Fonctionnalités
Publication facile pour les non-informaticiens
Gestion du workflow
Possibilité de mettre une date de publication et de dépublication
Extensible (composants et modules)
Design du site géré avec une feuille de style CSS
Editeur WYSIWYG
Gestion de bannières, publicités, sondage, etc.
Moteur de recherche intégré
…
6
1.3 Terminologie
Frontend : c’est le site généré dynamiquement par Joomla.
Backend : c’est la partie administration.
Frontpage : c’est la page principale de votre site.
Template : c’est la définition graphique du site (HTML/CSS).
Editeur WYSIWYG (What You See Is What You Get) : éditeur qui permet de travailler sans
connaître l’html comme avec un traitement de texte.
Section/catégorie/article : c’est la définition de l’arborescence du contenu de votre site.
Module : bloc généré par Joomla qui peut être intégré dans les pages de votre site (exemple :
affichage d’un menu, affichage d’une image aléatoire, affichage d’un sondage, etc.)
Composant : c’est une application intégrée à Joomla (exemple : gestion d’une newsletter,
gestion d’un sondage, gestion d’un flux RSS, agenda, galerie photos, etc.)
Mambots : scripts qui peuvent être utilisés n’importe où dans votre site.
1.4 Base de données
A titre informatif, voici la liste des tables que Joomla utilise :
7
8
9
2. Frontend
En fonction de la partie du site qui est visitée, le menu sera généré dynamiquement.
Différents modules sont présents dans les rubriques du site :
Chacun de ces « modules » est positionné en fonction du
« template » et de sa position définie dans la partie
« administrateur ».
Suivant que vous soyez connectés
et suivant les droits utilisateurs,
vous avez accès à de nombreuses
options telles que modifier les
pages, ajouter du contenu, ajouter
une news, accès au menu user.
10
2.1 Ajout de contenu
Dès que l’administrateur (ou, nous verrons plus tard, le rédacteur « frontend ») est connecté, un
nouveau menu apparaît pour lui donner la possibilité d’ajouter/modifier du contenu (news, liens,
etc…)
Une icône apparaît à
côté de chaque article
pour modifier celui-ci.
Vous retrouvez en dessous des zones de saisies, une série d’onglets permettant de paramétrer
vos articles :
11
2.2 Ajout d’une image
Il existe deux façons d’insérer une image dans un article :
Soit en donnant directement son URL :
http://www.siteautre.be/image.gif
Soit en utilisant les images que l’administrateur a mises sur le serveur (dans
« /images/stories »).
Pour cela, il faut sélectionner une image dans la galerie d’images et insérer la balise
{mosimage} dans l’article à l’endroit où l’on souhaite voir apparaître l’image grâce à
l’icône :
Joomla prendra les images dans l’ordre de la sélection et remplacera les balises
{mosimage}.
12
2.3 publier un article
Vous pouvez publier un article en cliquant sur l’onglet « publication », changer les niveaux
d’accès, la date de début/fin de publication et afficher l’article en page d’accueil ou non.
Exercice 1 :
Connectez-vous en « admin » sur le « frontend », modifiez un article, ajoutez-y un tableau.
Ajoutez une news et observez les résultats.
3. Administration
Pour entrer dans la partie « administration », ajoutez dans l’adresse du site : « /administrator »
Introduisez le login et mot de passe de l’administrateur :
3.1 Les menus
Accueil vous donnera une vue globale de votre site :
13
Site : configuration générale pour le site, les templates, les
utilisateurs, les médias…
Menu : configuration des différents menus.
14
Contenu : permet de définir l’arborescence et le contenu
du site.
Composants : configuration des composants : Bannières, sondage, flux…
Modules : configuration des différents modules du site.
Mambots : configuration des différents mambots : recherche,
{mosimage}…
Installation : installation de nouvelles fonctionnalités
Messages : mail interne pour les messages internes.
15
Système: vérification de la configuration, information sur le
serveur.
Aide : c’est l’aide en ligne ! ☺ (Plusieurs parties sont encore en
anglais…)
3.2 Le gestionnaire de média
Nous avons vu que les « rédacteurs frontend» pouvaient ajouter des images dans les articles
quand elles étaient dans le répertoire « /images/stories ».
C’est ici que l’administrateur les charge sur le serveur :
C’est évidemment un peu lourd de les charger une à une si vous en avez 100 à charger. La
solution plus rapide consiste simplement à les envoyer par FTP.
3.3 L’arborescence
Joomla permet de structurer jusqu’à 3 niveaux :
Par exemple :
Section Véhicule
Catégorie moto
Article sur Yahama
Article sur Honda
Article sur Suzuki
Catégorie vélo
Article sur BMX
Catégorie auto
Article sur Peugeot
Article sur Fiat
Article sur Ford
Article sur VW
16
3.3.1 Création d’une arborescence
Pour créer une arborescence, cliquez dans « contenu » puis « gestion des sections ».
Cliquez ensuite sur « nouveau » :
Introduisez les paramètres propres à la section (chaque partie de l’arborescence peut être
paramétrée. Nous détaillerons plus tard les paramètres des articles).
Sauvez votre nouvelle section à l’aide du bouton adéquat :
Pour ajouter une catégorie, cliquez dans « contenu » puis « gestion des catégories ».
Cliquez ensuite sur « nouveau » :
17
Introduisez les paramètres propres à la catégorie.
3.4 Les articles
Dans le menu « contenu » / « tous les articles » « nouveau »
18
3.4.1 Paramètres des articles
Sous l’onglet « Publication », vous
pouvez modifier la date de début et
de fin de publication et changer les
paramètres d’affichage (niveau,
page d’accueil, etc.)
L’onglet « image » vous permet
d’ajouter des images dans vos
articles comme nous l’avons vu au
point 2.2
19
L’onglet « paramètres » pour
permet de modifier la présentation
de vos articles : affichage d’un titre,
conversion en pdf, affichage d’un
texte d’introduction, affichage des
liens directs vers les
sections/catégories…
L’onglet « Meta Info », permet de
mettre les mots-clés utiles au
référencement (=METATAGS).
Pensez à définir des mots
différents pour chaque page.
Remarque : Google ne travaille
pas avec les metatags.
L’onglet « Créer un lien » vous
permet de créer un lien directement
dans un menu :
20
Remarques :
Evitez les copier/coller à partir de Word, afin d’éviter une mise en page incohérente
(pensez à passer par le bloc notes par exemple.)
Utilisez bien le bouton « sauver » ou « fermer » pour terminer/annuler l’encodage d’un
article. (si vous utilisez le bouton « retour » de votre navigateur, l’article se bloque (
vous devez donc aller dans « système »/ « validation globale » :
),
3.4.2 Gestion des articles
Vous retrouvez, comme pour les sections & catégories, une barre d’outils vous permettant
d’effectuer des actions comme créer, modifier, publier, effacer, etc. un des éléments
sélectionné.
Vous pouvez directement agir sur l’élément en cliquant sur l’icône adéquate :
Par exemple pour « dépublier » un article :
Vous pouvez aussi appliquer un filtre et trier les éléments (articles) afin de retrouver plus
facilement un de ceux-ci :
3.5 Les menus/modules
Les menus sont composés d’éléments, qui eux-mêmes, sont composés de « points d’entrée ».
21
Ces points d’entrée permettent :
Soit de lier un « contenu particulier », comme une arborescence, un composant, un
lien…
Soit de se lier à un autre élément du menu permettant ainsi de faire des sous-menus.
Chaque menu est intimement lié à un module !
C’est dans le module qu’on définit certains paramètres liés au menu : style du menu
(horizontal ou vertical), etc.
C’est en modifiant l’accès au module qu’on modifie l’accès au menu (exemple : le menu
utilisateur).
3.5.1 Création d’un élément d’un menu
Lors de la création d’un élément dans un menu, Joomla demande de définir le type du
composant :
Type de contenu
Façon dont se présente
le contenu
Chaque type élément menu (blog, catégorie de contenu, tableau, etc.) a une série de
paramètres qui permettent de modifier la présentation de vos données. Par exemple : le
nombre de colonnes à afficher, le titre de la page, le nom de l’auteur, le nom de la
section/catégorie, l’ordre d’affichage…
22
Blog – catégorie de contenu :
Présente les articles d’une catégorie les uns à la suite des autres.
Blog – section de contenu
Présente le contenu d’une section sous forme d’une liste de catégories :
23
Tableau – catégorie de contenu
Présente les articles d’une catégorie sous forme d’un tableau :
Composant
Lien vers un composant à paramétrer (galerie photos, gestionnaire d’évènements…)
Lien
Lien direct vers un composant, un article, un site externe, du contenu statique…
Séparateur
Séparateur pour le menu.
Wrapper
Permet d’encapsuler un site web externe
24
3.5.2 Création d’un sous-menu
Créez d’abord un élément d’un menu
Ensuite, créez le sous-menu et liez son « parent » au menu précédent :
Exercice 2 :
créez l’arborescence suivante :
Section « Cinéma » :
Article « Histoire du cinéma »
Catégorie « Etapes d'un film »
Article « Repérages »
Article « Scénario »
Article « Réalisation »
Article « Mixage »
Catégorie « Genres cinématographiques »
Article « Drame »
Article « Comédie »
Article « Western »
Article « Policier »
Article « Fantastique »
Article « Science-fiction »
Liez l’arborescence au menu avec différents types de composants (blog, tableau…)
« Encapsulez » le site www.cinebel.be
Modifiez les articles et paramètres des catégories/sections de manière à obtenir un site
présentable.
3.6 Gestion des utilisateurs
Joomla permet de gérer différents types d’utilisateurs par un système de droits d’accès.
Dans le menu « site » / « section des utilisateurs » :
1
25
Voici un tableau reprenant la liste des « utilisateurs » et leurs droits :
Plus concrètement :
Registred : il s’agit de l’utilisateur enregistré par défaut. Il a seulement le droit d’ajouter
des liens via le menu user.
Author : il peut ajouter du contenu (liens et news) via le menu user et peut uniquement
modifier son propre contenu.
Editor : il peut ajouter et éditer du contenu.
Publisher : il peut ajouter, éditer et publier du contenu.
Manager : il peut uniquement créer du contenu. Il a accès au gestionnaire des médias,
aux menus et à la partie contenu.
Administrator : il a accès à toutes les fonctions d’administration sauf la configuration du
site, des langues et du système et il ne peut évidement pas créer un « super
administrateur ».
Super administrator : il peut tout faire !
3.7 Droits d’accès
Avec Joomla vous pouvez définir des droits d’accès pour les menus, modules et contenus.
1
©Le tableau ci-dessous provient du site Joomla !Fr ( http://www.joomlafacile.com/ )
26
En fonction de l’enregistrement sur le site (identification), les utilisateurs verront ou non les
parties « réservées ».
On distingue 3 catégories de droits :
Public : le visiteur « classique »
Membre : le visiteur « identifié », il est connu du CMS.
Special : réservé aux personnes ayant un statut supérieur à « Registered »
Pour aller plus loin dans les droits, il existe des extensions…
http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,387/Itemid,35/
Exercice 3 :
Créez les utilisateurs suivants :
Pierre : il peut ajouter et éditer du contenu.
Paul : il peut ajouter/éditer/publier et accéder à la partie administration pour tout ce qui
concerne le contenu.
Jacques : il peut ajouter/éditer/publier du contenu.
Jojo : utilisateur enregistré.
Testez le différents utilisateurs en ajoutant/modifiant des articles.
Configurez les droits d’accès pour que les utilisateurs enregistrés (Jojo) n’aient accès dans le
menu user qu’à la partie « votre profil » et « déconnexion ».
4. Les templates
Joomla permet de gérer plusieurs templates et même d’intégrer un template pour une partie
d’un site.
Il existe des templates gratuits ou payants sur le net, notamment :
http://www.joomlafrance.org
http://www.joomlahut.com
4.1 Installation
1) Téléchargez le fichier .zip du template qui vous intéresse.
2) Via le menu « Installation » / « Templates site »
Sélectionnez le fichier « .zip » en cliquant sur « parcourir » et cliquez sur « installer ».
3) Cliquez sur « Continuer »
4) Sélectionnez le template que vous venez de télécharger et positionnez-le par défaut
27
Remarque :
Vous pouvez aussi l’assigner pour une seule partie/page du site :
Vous pouvez éditer le fichier html et css du template.
4.3 Position des modules dans un template
« Site » / « aperçu » / « dans cette fenêtre avec positions » :
Ou encore, ajoutez dans l’URL le paramètre « tp=1 »
Maintenant, pour positionner vos modules dans
« Module »/ « modules du site » vous pouvez
changer la position des différents modules :
C’est le paramètre de position
qui détermine le placement du
module dans le template :
28
Si plusieurs modules ont la même position, les modules sont affichés dans l’ordre du paramètre
« ordre des modules » :
Exercice 4 :
Téléchargez plusieurs template et choisissez-en un. Visualisez les positions des différents
modules et adaptez les modules existants à votre nouveau template.
4.4 Adapter un template
Un template est composé principalement de deux fichiers qui se trouvent dans
« templates/nomdutemplates » :
index.php
il charge des différents modules. En utilisant les fonctions suivantes :
mosCountModules : vérifie s’il existe des modules liés à cette position.
mosLoadModules : charge les modules liés à cette position.
exemple :
<? if (mosCountModules(‘user3’))
{ ?>
<div id =’’topmenu’’
<? mosLoadModules(‘user3’,-1) ;?>
</div>
<? { ?>
mosMainBody() : la partie principale de votre template : c’est la position où va
apparaître le contenu de la page ou les composants.
mosPathWay() : le chemin d’accès lors du parcours de votre site.
D’autres variables sont aussi utilisées :
$mosConfig_sitename : le nom du site
etc.
template_css.css
C’est le fichier principal pour le design. Il contient toutes les définitions css pour
l’ensemble de votre site. Celles-ci sont regroupées en catégories :
les menus : a.mainlevel, a.sublevel
les contenus : .contentpane, .contentpaneopen, .contentheading, .contentpagetitle,
.contentdescription,…
les sections : .sectiontableheader,.sectiontableentry1
les modules : table.moduletable
les composants : .poll, a.weblinks, .newsfeedheading
divers : .button, .inputbox
...
29
4.5 Modifier l’apparence d’un site : mode opératoire
1)
2)
3)
Allez voir à quelle position est associé le module que vous voulez modifier (exemple :
top)
Recherchez à quel id est associé « top » dans le fichier « index.php » Topzone
<div id=’’topzone’’>< ?if (mosCountModules(‘top’)){ mosLoadModules(‘top’) ;} ?></div>
Dans le fichier « template_css.css », cherchez l’élément pour id « topzone » et
modifiez-le.
Remarque : Chaque template est différent et dépend de son concepteur. Partez toujours du
fichier « index.php » puis consultez « template_css.css ».
Exercice 5 :
Modifiez la feuille de style et le fichier index.php de votre site afin d’adapter votre site à vos
goûts personnels (graphisme, couleurs, polices…)
Conseil : pensez à sauvegarder vos fichiers d’origine.
5. Les modules
Les modules sont des blocs générés par Joomla qui peuvent être intégré dans une page de
votre site.
Par exemple : bloc d’inscription à une newsletter, module de recherche, affichage d’une
information particulière, …
5.1 Installer un module
Dans l’administration : « installation » / « modules » :
Il suffit de sélectionner le package, de le
télécharger puis de l’envoyer. Ensuite
vous paramétrez le module comme
nous avons vu précédemment :
(« modules » / « modules du site »)
30
5.2 Les banners
Ce module permet d’afficher une ou plusieurs bannières à une position précise suivant ce qui a
été défini dans le composant Banners.
Dans les paramètres du modules « bannières », vous pouvez choisir d’afficher les bannières
d’un ou de plusieurs clients prédéfinis (dans « composants » / « bannières » / « gérer les
clients » - voir point 6.2)
On introduit les ID des
clients séparés par une
virgule.
Par défaut si aucun ID
n’est fourni, il affiche
toutes les bannières
aléatoirement.
5.3 Identification
Ce module permet la connexion/déconnexion d’un utilisateur. Il permet également à un
utilisateur de s’inscrire.
31
Pré-texte et Post-texte permettent d’afficher du texte avant/après les champs nom
d’utilisateur/mot de passe.
Connexion URL et Déconnexion URL permettent de rediriger vers une url prédéfinie lors de la
connexion/déconnexion. Par défaut, c’est la page d’accueil qui est définie.
5.4 Image aléatoire
Ce module permet d’afficher une image aléatoirement dans un répertoire prédéfini.
Type d’image : définit le format de l’image : jpg, gif, etc…
Répertoire : le répertoire où se trouvent vos images.
Lien : URL en cas de click sur la photo
Largeur/hauteur : Joomla redimensionnera vos images.
32
5.5 Syndication
Ce module permet la syndication du contenu de votre page principale par un flux RSS. Ce qui
permettra à d’autres sites de reprendre les informations en provenance de votre site.
Les paramètres de ce module permettent de choisir entre autres le standard proposé pour les
flux RSS (1.0, 2.0, etc.)
Celui qui veut reprendre les informations en provenance de votre site, n’aura plus qu’à cliquer
sur le site, dans le menu « syndication », sur l’icône de la norme du flux qui l’intéresse…
5.6 Afficher un flux RSS
Pour afficher un flux RSS en provenance d’un autre site, il faut créer un nouveau module :
Et de donner l’url du flux RSS dans les paramètres :
33
Dans l’exemple ci-dessus, le flux RSS de « CNN.com » s’affichera dans la partie droite du site :
5.7 Modules administrateurs
Il existe également des modules administrateurs pour le « backend ». Ils fonctionnent
exactement sur le même principe que les modules « frontend ». Ceux-ci sont généralement
fournis avec certains composants.
Exercice 6 :
Dans votre template, ajoutez et configurez le module « image aléatoire ».
Affichez un flux RSS venant du site www.cinebel.be
Installez un nouveau module DHTML nommé tigra
(http://mamboforge.net/projects/displaymenu). Remplacez un de vos menus par celui-ci.
Adaptez le design de ce module au design de votre site. (Pensez à ajouter des styles css
avec un préfixe pour ce menu).
Ajoutez un module « calendrier » sur votre site. (par exemple Events_1.2)
Ajoutez un module de votre choix…
34
6. Les composants
Nous avons vu que les composants étaient des applications intégrées à Joomla. Ceux-ci
permettent d’étendre les fonctionnalités du CMS Joomla.
Il existe des composants gratuits ou payants. (Il existe des possibilités de commander du
développement de composants sur mesure).
Sur extensions.joomla.org vous pouvez trouver plus de 800 extensions.
6.1 Installation
Dans l’administration : « installation » / « composant » :
Contrairement aux modules, chaque composant a ses propres menus proposant
paramètres, options, données, statistiques, …
6.2 Bannières
Ce composant permet de gérer les bannières qui seront affichées par le module « bannières ».
Il permet de gérer un nombre illimité de bannières publicitaires et ce pour un nombre illimité de
clients.
On peut définir le nombre maximum d’apparitions de cette bannière, ainsi qu’insérer du code
HTML personnalisé (flash). Les bannières sont placées dans « /images/banners ».
35
6.3 Sondage
Ce composant permet de faire des sondages en ligne. Il est associé au module Polls.
Et tout aussi facile à gérer
que les autres
composants…
Vous pouvez afficher des
sondages différents sur
chaque page !
6.4 Gestion des langues
Si le composant est bien écrit, alors il est très facile de le traduire dans une autre langue. En
effet, il utilise le paramètre langues que vous avez défini.
Il suffit de copier et de renommer le fichier « english.php » en « french.php » dans le répertoire
« /components/com_nomcomposant/language »
Il ne reste plus qu’à traduire le terme dans la fonction DEFINE :
DEFINE(‘’_CAL_LANG_JANUARY’’,’’January’’);
DEFINE(‘’_CAL_LANG_FEBRUARY’’,’’February’’);
DEFINE(‘’_CAL_LANG_MARCH’’’,’’March’’);
DEFINE(‘’_CAL_LANG_JANUARY’’,’’Janvier’’);
DEFINE(‘’_CAL_LANG_FEBRUARY’’,’’Février’’);
DEFINE(‘’_CAL_LANG_MARCH’’’,’’Mars’’);
Exercice 7 :
Insérez une bannière avec du flash dedans.
Effectuez un sondage en ligne sur « le genre cinématographique » ; ce sondage ne doit
apparaître que sur les pages parlant du « genre cinématographique. »
36
7. Les mambots
Les mambots sont des petits « scripts » qui peuvent être insérés dans vos articles comme
{mosimage} ou utilisés pour augmenter la fonctionnalité de certains modules ou composants
(Editeurs, search, …)
Dans Joomla, par défaut, vous pouvez effectuer une recherche complète dans le contenu du
site. Si vous voulez accroître les capacités de recherche du moteur de recherche, vous pouvez
ajouter des mambots de recherche. Comme par exemple, rechercher dans une galerie
d’images, dans le forum, etc.
Exercice 8 :
Ajoutez au moteur de recherche interne de votre site la possibilité de recherche sur le
composant « Events » construit à l’exercice 6.
Ajoutez l’éditeur WYSIWYG « JCE ».
Ajoutez la possibilité de joindre un document pdf à vos articles (MOS document).
8. Gestion d’un site
8.1. Backup
Pour effectuer un backup complet de votre site :
Copiez les fichiers Joomla de votre site
Sauvegardez la base de données MySQL
1) Lancez PhpMyAdmin :
2)
Sélectionnez la base de données Joomla :
3)
Sélectionnez toutes les tables :
37
4)
Utilisez la fonction « Exporter » :
5)
Sélectionnez les options :
« Inclure la valeur courante de l’AUTO_INCREMENT »
Protéger les noms des tables
Insertions complètes
Transmettre
6)
Et appuyez sur « Exécuter »
38
7)
Donnez la destination où le fichier sera copié.
Remarque :
Pensez à faire régulièrement le test en local, et vérifiez si votre backup est bien complet.
Il existe un composant permettant de faire des backups : « db_admin ».
8.2 Restauration du backup
1) Créez une nouvelle BD :
39
2) Cliquez sur « SQL »
3) Sélectionnez le fichier backup à l’aide de l’option « Parcourir ».
8.3 Sécurité
Surveillez les patchs de sécurité et appliquez-les !
Consultez : http://forum.joomlafacile.com
Changez souvent les mots de passe administrateur & ceux de la base MySql (8
caractères, minuscule/majuscule & chiffres)
Exercice 9 :
Faites un test de backup de votre base de données.
9. Créer son propre template
9.1 Méthodologie
1) Créer un design statique HTML / CSS
2) Transformer celui-ci en template Joomla (inclusion des appels PHP obligatoires)
3) Insérer les différents appels PHP (modules, etc.)
40
4) Modifier le fichier CSS en y incluant et adaptant les classes CSS Joomla obligatoires.
9.2 Structure d’un template
Un template Joomla est composé de :
index.php : fichier qui va générer le code HTML.
template_css.css : contient toutes les classes CSS utilisées dans index.php et celles de
Joomla.
templateDetails.xml : fichier d’installation.
Template_thumbnail.png : miniature de votre design (généralement 200*150 pixels)
9.2.1 index.php
Ce fichier contient un mélange de code html (partie statique de votre site) et de code PHP
(partie dynamique). Certains appels de fonction sont obligatoires, comme la première ligne de
votre template :
<? define( '_VALID_MOS', 1 ) or dir (‘Restricted access’) ;?>
Ceci permet d’éviter une utilisation extérieure de cette page. (protection contre le piratage)
<? mosShowHead() ; ?>
Affiche l’en-tête de la page par exemple les Metadata (keyword, description…)
<? If ( $my ->id ) {initEditor() ;} ?>
Si l’utilisateur est connecté, l’éditeur de texte est initialisé (dans le <head>).
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/montemplate/css/template_css.css"
rel="stylesheet" type="text/css" />
Définition du type de contenu et de la feuille de style.
<?php mosMainBody(); ?>
Chargement du contenu (dans le <body>).
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
Optionnel, charge le footer standard de Joomla.
Les variables importantes :
$mosConfig_live_site
C’est l’adresse du site tel que défini dans Joomla.
$mosConfig_absolute_path
C’est l’adresse absolue de l’emplacement de Joomla sur votre serveur, par exemple :
var/www/html/votresite).
9.2.2 template_css.css
Ce fichier doit contenir toutes les définitions utilisées par Joomla comme .contentpagetitle,
.contentheading, .componentheading…
9.2.2.1 Les classes CSS de Joomla
9.2.2.1.1 Les en-têtes
41
.contentheading : titre du contenu
.componentheading : titre du composant
9.2.2.1.2 Les modules
table.moduletable : définition du container
table.moduletable th : titre du module
table.moduletable td : contenu
9.2.2.1.3 Les menus
a.mainlevel:link
a.mainlevel:visited définition des liens du premier niveau des menus
a.mainlevel:hover
a.sublevel:link
a.sublevel:visited
a.sublevel:hover
définition des liens du premier niveau des menus
9.2.2.1.4 Contenu
Pour les composants, le développeur décide des classes qu’il utilise.
Pour les présentations, blog et tableau, il existe des classes spécifiques.
Remarques :
Pensez à utiliser la barre d’outils de firefox « webdevelooper » pour identifier les classes
et l’id dont vous avez besoin.
Lors de la création d’un template, pensez à copier l’ensemble des classes obligatoires
d’un templaote existant.
9.2.3 templateDetails.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
Définition du format du fichier XML
<name>Monbeautemplate</name>
Nom du template
<version>0.3</version>
Version du template
<creationDate>15/11/06</creationDate>
Date de création
<author>Bruno Martin</author>
Auteur
<authorEmail>[email protected]</authorEmail>
Email de l’auteur
<authorUrl>http://www.brunomartin.be </authorUrl>
Site web de l’auteur
<copyright> </copyright>
Copyright de l’auteur
42
<description> ceci est un beau template !</description>
Description du template
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>images/index.html</filename>
</files>
<images>
<filename>images/image1.png</filename>
<filename>images/image2.png</filename>
…
</images>
<css>
<filename>css/template_css.css</filename>
</css>
Chargement des fichiers nécessaires au template
</mosinstall>
Il faut ensuite créer un fichier ZIP avec tous ces fichiers :
montemplate/css/template_css.css
montemplate/images/toutes vos images
montemplate/index.php
montemplate/template_thumbnail.png
montemplate/templateDetails.xml
9.3 Insertion de modules
mosLoadComponents($nom)
Cette fonction va charger le composant $nom
Exemple :
<? mosLoadComponents(‘’banner’’) ?>
mosCountModules($nom_position)
Cette fonction va compter le nombre de modules publiés de la position left
Exemple :
if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top', -2 );
}
mosLoadModules($nom_position[,$style])
Cette fonction va charger les modules publiés assignés à la position « nom_position ». Le
style est optionnel, par défaut, il est égal à 0.
style = 0
les différents modules sont affichés dans une colonne (tableau).
style = 1
Les modules sont affichés horizontalement. Chaque module est encapsulé dans
une cellule du tableau.
style = -1
Les différents modules sont affichés les uns à la suite des autres sans titre.
43
style = -2
les modules sont affichés sous le format X-mambo dans des <div
class=’’moduletable’’>
style = -3
les modules sont affichés dans des <div class=’’module’’>
mosShowHead()
Cette fonction va afficher les balises qui doivent être présentes dans le <head>
(metatags, keywords, titre de la page, certains mambots…)
mosMainBody()
Cette fonction va générer le contenu à intégrer dans la page en se basant sur les
paramètres passés dans l’URL.
Plus d’informations sur la création de templates :
http://www.joomlart.com/tutorials/templates_tutorial/
Exercice 10 :
Créez un template Joomla basé sur un modèle 3 colonnes (1024*768) de largeur fixe, centré.
Conseil : rendez-vous sur le site www.alsacreations.com et dans le menu de droite,
sélectionnez Gabarits de mise en page CSS :
Transformez le fichier html en PHP.
Inclure dans celui-ci les fichiers obligatoires.
Testez les différents styles de la fonction mosLoadModules.
Complétez le fichier « template_css.css ».
Créez un fichier « xml » d’installation.
Créez le fichier « .zip ».
Vérifiez le résultat dans Internet et Firefox.