IUT de Marseille Licence M@ntic Année 2012/2013 CMS Lionel Paris [email protected]

JOOMLA ! 1 Installation de Joomla

1.1

Pré-requis

Commencez par récupérer la version de Joomla! disponible à l’adresse : http://192.168.2.248/Joomla.zip

Une fois récupéré localement, il faut ensuite décompresser le fichier, sur votre bureau par exemple. Téléchargez ensuite le logiciel FileZilla, qui permet le transfert de fichiers. Vous le trouverez à l’adresse : http://192.168.2.248/FileZilla.zip

Décompressez le logiciel sur votre bureau également et lancez-le (il n’y a pas besoin de l’installer). Pour vous connecter au serveur web (qui héberge aussi la base de données), cliquez sur

Fichier Gestionnaire de sites

puis

Nouveau site

(en bas à gauche), donnez-lui le nom que vous voulez et dans la partie de droite, renseignez les champs suivants : Enfin, cliquez sur

Connexion.

Copiez ensuite le répertoire

Joomla

entier

dans votre compte sur le serveur web dans le répertoire

public_html

de votre compte.

1.2

Installation

Lorsque les fichiers ont été copiés sur le serveur (cela peut prendre quelques minutes), il faut réaliser les opérations suivantes,

dans l’ordre donné

: 1.

Changez les droits d’accès sur le répertoire

Joomla

que vous venez de créer, y mettre les droits en écriture et lecture pour tout le monde. Pourquoi donner un accès à tout le monde ? La raison est simple. Les fichiers/dossiers sont stockés dans vos comptes et sont la propriété de vos utilisateurs. Or, ces dossiers et fichiers doivent être

accessibles au serveur apache (dont le nom d’utilisateur est

www-data

). Et comme cet utilisateur ne fait pas parti de votre groupe, il faut que tout le monde puisse accéder à ces fichiers pour que le site puisse fonctionner correctement (i.e. ajouter des modules, créer des fichiers etc…) Le logiciel FileZilla permet de gérer les droits utilisateurs. Pour cela, il suffit de faire un clic-droit sur le dossier

Joomla

distant (fenêtre de droite) et de sélectionner

Droits d’accès aux fichiers…

dans le menu contextuel. La fenêtre suivante apparaît, cochez les cases comme sur l’illustration (avec tous les droits pour tous). N’oubliez pas de cocher l’option

Récursion dans les sous-dossiers

, afin que les droits soient reportés sur les sous dossiers et contenus du répertoire. 2.

3.

Créez un fichier vide portant le nom

configuration.php

dans le répertoire Joomla distant, et donnez-lui tous les droits de lecture et d’écriture pour tous. Pour ce faire, faire un clic-droit

Créer un nouveau fichier

. Tapez

configuration.php

. Appliquez ensuite les droits de lecture et d’écriture (R et W) pour tous (Owner, Group et Other). Le déploiement est terminé, il reste maintenant à configurer le site ! Ouvrez un navigateur web (IE, Firefox ou Chrome), puis allez à l’adresse

http://192.168.2.248/~login/Joomla

où

login

correspond à votre login personnel, attention, ne vous trompez pas ! Il ne reste plus qu’à suivre les étapes de configurations de Joomla dans le navigateur. Le premier écran sur lequel vous devez arriver est le suivant :

1.

2.

3.

4.

Choix de la langue :

Choisissez votre langue. C’est la langue qui sera utilisée pour l’installation, pas pour le site lui-même qui sera forcément en Français. Cliquez sur suivant (en haut à droite).

Pré-installation :

Le second écran est un écran de vérification du système, normalement, tous les résultats doivent être verts, excepté 2 appelés

output buffering et JSON

. Tout est normal, vous pouvez passer à l’étape suivante en cliquant sur suivant (en haut à gauche).

Licence :

l’écran qui suit permet de prendre connaissance de la licence d’utilisation (GNU = Open source). Une fois que vous avez bien lu et compris les termes de cette licence, vous pouvez cliquer sur le bouton suivant.

Configuration de la base de données :

Sur cet écran, vous devez saisir vos identifiants de base de données

MySQL

. Ce sont les mêmes que ceux utilisés avec l’éditeur de requêtes. Les paramètres à saisir sont les suivants : a.

Type de la base de données :

MySQL

(et non MySQLi comme suggéré !) b.

Nom du serveur :

192.168.2.248

c.

d.

Nom d’utilisateur :

login

(le même que pour le TP MySQL) Mot de passe :

login

(idem) e.

f.

g.

Nom de la base :

login

(idem) Préfix de tables :

Joomla_

Installation précédente :

supprimer

5.

Configuration FTP

: à cette étape, vous allez configurer les paramètres de connexion FTP. Le protocole FTP (File Transfert Protocole) permet d’envoyer des fichiers sur le serveur. Ainsi, lorsque vous voudrez installer des extensions, le serveur pourra automatiquement charger les archive depuis votre ordinateur local sur le serveur au moyen du protocole FTP afin de pouvoir les utiliser ensuite. Les valeurs à saisir sont : a.

Activer la couche FTP :

OUI

b.

c.

d.

Identifiant FTP :

login

Mot de passe FTP : (le même que pour le TP MySQL)

login

(idem) Chemin de la racine FTP :

/home/login/public_html/Joomla

cette valeur doit être e.

trouvée toute seule par le serveur en cliquant sur le bouton Rechercher automatiquement la racine FTP une fois les identifiant et mot de passe renseignés. Serveur ftp :

192.168.2.248

6.

Configuration principale :

cette avant dernière étape vous permet de saisir les informations relatives à votre site web : Son nom, sa description, ainsi que les coordonnées de l’administrateur (vous !). Il vous propose également d’installer des données d’exemple, contenant quelques extensions préconfigurées ainsi que des exemples de contenus. Je ne recommande pas d’installer ces données d’exemple pour ne pas polluer votre futur site web et avoir la pleine maîtrise des composants installés. 7.

Terminer :

l’installation est terminée, il ne reste plus qu’à supprimer le répertoire d’installation comme recommandé. Cliquez simplement sur le bouton

Supprimer le répertoire d’installation

, c’est terminé !

• • En cliquant sur le bouton Site, vous atteindrez la partie front-office de votre site web (i.e. l’adresse http://192.168.2.248/login/Joomla ). Si vous cliquez sur le bouton Administration, vous atteindrez la partie back-office de votre site web (i.e. l’adresse http://192.168.2.248/login/Joomla/administrator )

2 Prise en main

Il est recommandé à partir de maintenant d’avoir systématiquement 2 onglets ouverts, l’un avec l’interface d’administration et l’autre avec le site web.

2.1

Message d’accueil

La première manipulation que vous allez faire consiste à mettre un message d’accueil sur la première page de votre site web. Il se trouve que dans la configuration de base, la page de garde du site affiche tous les articles qui sont «

en vedette

». Il suffit donc d’ajouter un article « en vedette » pour qu’il apparaisse d’office sur la première page. Depuis l’interface d’administration, ajoutez un article intitulé bienvenu qui figurera sur la page d’accueil de votre site. Visualisé le résultat en rafraichissant l’onglet avec votre site web. Une fois votre message affiché, commencez à fouiller les paramètres de l’article pour masquer les informations additionnelles de l’article (catégorie, nombre d’affichage, icône d’impression/mail…)

2.2

Changement de votre profil

Mettez votre profil à jour en renseignant votre nom et prénom à la place de super administrateur ! Vérifiez que le changement est pris en compte en s’assurant que l’auteur de l’article de bienvenu a bien changé sur la page d’accueil.

2.3

Gestion d’utilisateurs

Créez plusieurs utilisateurs (via l’interface d’administration & via le site web lui-même). En déduire les workflows lors de la création des utilisateurs. Parmi tous les utilisateurs que vous créerez, assignez des rôles différents, afin de voir quels groupes peut écrire des articles, les corriger etc…

2.4

Gestion des articles

Créez quelques catégories d’articles (au moins 3 avec des imbrications). Pour chacune d’elle, créez quelques articles. Jouez sur la visibilité des articles/catégories pour empêcher les utilisateurs non authentifiés d’accéder à certains d’entre eux.

2.5

Menus et affichages

2.5.1

Affichage d’articles

Rajoutez des entrées (menu item) dans le menu principal pointant sur des articles existants, ou des listes d’articles. Donnez une description (succincte) des pages contenant : Un article (simple) Liste des articles d’une catégorie Blog d’une catégorie

2.5.2

Proposer un article

Donnez la possibilité à un utilisateur authentifié de déposer un nouvel article. En déduire les workflows mis en œuvre pour la publication en fonction des droits des utilisateurs qui soumettent des articles.

2.5.3

Droits & profils

Quelles accréditations sont nécessaires pour : Soumettre un article Soumettre un article qui ne nécessite pas de validation Valider l’article d’un autre Modifier l’article d’un autre Ajoutez une nouvelle entrée dans le menu principal pour les utilisateurs enregistrés permettant d’éditer leur profil.

3 Extensions : Modules, plugins, composants & templates

On distingue 4 types d’extensions : les modules, les plugins, les composants et les templates. Les modules sont des éléments qui peuvent être affichés sur les pages du site, ou qui permettent l’affichage de certains objets. Exemple : Menus améliorés, diaporama, jeux… Les plugins sont des outils qui servent essentiellement pour l’utilisation du site (administration ou écriture d’article). Ce ne sont pas des outils qui servent à afficher des choses sur le sites, mais des outils qui aident les utilisateurs. Exemple : plugin de choix de position, plugin d’aide à l’insertion d’image dans l’éditeur d’article etc… Les composants sont des modules complexes qui nécessitent plusieurs pages pour leur utilisation ou leur configuration. Ils sont donc installés dans le cœur du système et sont ensuite considérés comme des fonctionnalités natives du système. Enfin, les templates sont des outils qui permettent de prédéfinir des styles pour chaque page du site. Ils reposent sur les CSS essentiellement.

3.1

Paramètres nécessaires pour l’installation de nouvelles extensions

Avant de pouvoir installer de nouveaux modules, il faut enregistrer les paramètres de transfert ftp (les mêmes que lors de la phase d’installation), à savoir depuis l’interface d’administration : Menu Site Configuration Onglet Serveur Encadré

Paramètres FTP

IdentifiantFTP : pnom (où est la première lettre de votre prénom et nom est votre nom) Mot de passe FTP : pnom (idem) Racine FTP : /home/ pnom /public_html/Joomla (idem) Assurez-vous que la configuration est bien enregistrée lorsque vous cliquez sur enregistrer :

3.2

Plugin

Dans le répertoire

Plugins additionnels

du répertoire partagé, copiez/collez le fichier plg_jts_positions_mod.zip dans vos documents. Allez dans le gestionnaire d’extension et dans la partie

Archive à transférer

sélectionnez le fichier que vous venez de copier. Cliquez sur

Envoyer et installer.

Vous pourrez maintenant utiliser le plugin pour choisir vos positions pour chaque module que vous utiliserez.

3.3

Modules complémentaires

3.3.1

Ajout de menu

Depuis l’interface d’administration, créez un nouveau menu. Pour cela il vous faut d’abord déclarer un nouveau menu dans le gestionnaire des menus. Puis, pour le faire apparaitre, déclarez un nouveau module de type menu dans le gestionnaire de menu et appliquez-le au menu nouvellement créé. Choisissez le titre « Menu des extensions » et la position de votre choix (testez plusieurs positions). Vérifiez que le menu s’affiche correctement et qu’il fonctionne en rajoutant un lien (appelé lien 1) pointant vers un article quelconque.

3.3.2

Module Sudoku

Dans le répertoire

Modules additionnels

du répertoire partagé, copiez/collez le fichier mod_sudoku_1.7.zip dans vos documents. Allez dans le gestionnaire d’extension et dans la partie

Archive à transférer

sélectionnez le fichier sudoku. Cliquez sur

Envoyer et installer.

L’installation se déroule bien si la mention suivante apparaît : Un nouveau module apparaît dans la liste des modules déclarés sur le site (dans l’interface d’administration), correctement :

Gestion des modules

. Pour pouvoir utiliser ce module, il faut le paramétrer Choisir son emplacement Le publier Choisir les pages où l’on veut que le module apparaisse.

Eventuellement régler la difficulté

Exercice

: Ajoutez un lien appelé Sudoku dans le menu des extensions et y faire apparaitre un sudoku.

3.3.3

Mur d’images

Le mur d’images est un module proposé par Bonko (il en existe d’autres !). Il nécessite : 1.

L’installation du module (mod_BonckoWall.J16.3.0.1.zip) 2.

Un répertoire contenant des images. Pour ce faire, en utilisant FileZilla, créez un répertoire

MurImages

dans le répertoire Joomla/Images et transférez-y quelques images de votre choix. 3.

Une fois installé, il faut, comme pour le Sudoku, paramétrer le module : a.

L’activer b.

c.

d.

Choisir les pages sur lesquelles ce « mur » apparaît Choisir sa position Indiquer où sont les images pour pouvoir les afficher (indiquer simplement le répertoire, il affichera toutes les images du répertoire). Pour des images sur le serveur (c’est votre cas), il faut choisir

File System

comme source. Il est également possible de faire défiler des images venant de Picasa ou Flikr dans la version payante du module…

Exercice

: Ajoutez un lien appelé

Mur d’images

dans le menu des extensions et y faire apparaître un mur d’image.

3.3.4

Menus élaborés

Les menus natifs de Joomla sont relativement simples. Ils ne permettent pas l’affichage de sous-menu par exemple. Pour pouvoir utiliser des menus plus sophistiqués, il faut avoir recours à des modules complémentaires. Nous allons créer des menus avec sous-menu en utilisant le module

Maximenu

. Il en existe bien d’autres. Pour cela, installez le module

mod_maximenuck_6.1.7_j25.zip

. Avant de mettre en œuvre ces menus, il faut préparer une architecture de documents et liens avec des sous menus. Pour cela, créez : Une catégorie appelée

Catégorie principale

Une catégorie appelée 2 sous-catégories

Catégorie secondaire Sous-catégorie

1 et

Sous-catégorie 2

Catégorie secondaire

) (toutes deux sous-catégories de Création du menu : comme pour les menus classiques, il faut créer l’arborescence que l’on veut voir apparaitre à l’écran, pour cela : Créez un menu appelé 1.

Menu sophistiqué

Dans ce menu, créez ensuite : Un

menu item

de type lien vers un blog de catégorie (catégorie Principale) portant le 2.

3.

4.

nom de

Catégorie principale

Un

menu item

de type

séparateur

portant le nom

Catégorie secondaire

Un

menu item

de type lien vers un blog de catégorie (sous-catégorie 1) portant le nom

Sous-catégorie 1. secondaire.

Un

menu item

de type lien vers un blog de catégorie (sous-catégorie 2) portant le nom

Sous-catégorie 2.

L’élément parent de ce menu doit être l’objet L’élément parent de ce menu doit être l’objet

Catégorie Catégorie secondaire.

Appliquez-lui le module

Maxi Menu CK

à la position de votre choix, avec les options de votre choix (ouverture horizontale/verticale etc…) Visualisez le résultat, faites varier la position pour voir les effets sur le rendu final.

3.4

Composants

Nous allons maintenant installer un composant qui sert à faire des sondages. Pour cela, installez l’archive contenue dans

Composants additionnels

nommé

com_jvotesystem_2.05__joomess.de.zip.

Une fois installé, le composant

JVoteSystem

est accessible depuis le menu

Composants

de l’interface d’administration. Pour pouvoir créer un sondage, il faut : Créer un nouveau scrutin. Ceci consiste à choisir la question qui sera posée, définir qui aura le droit de voter/rajouter des réponses, fixer les dates de début et de fin du vote, fixer le nombre de voix permises par utilisateurs… Prédéfinir les réponses possibles Afficher le scrutin (ou du moins un lien dans un menu vers le scrutin). Pour ce dernier point, il est possible, soit de créer un article et d’insérer le scrutin dans le corps de l’article, soit de créer un

menu item

de type

jVoteSystem » Poll.

Exercice

: dans le menu des extensions, rajoutez un lien vers un sondage dont la question sera : « Que pensez-vous de l’effet cathartique du Ménon (de Platon) ? ». Ce sondage ne doit être accessible qu’aux utilisateurs enregistrés sur le site, qui n’auront le droit de ne voter qu’une seule fois pour l’une des réponses proposées, et n’auront le droit que de laisser des commentaires, pas de proposer d’autre réponse. Les réponses possibles sont : « Je pense que c’est un point de vu intéressant, mais il faudrait que je relise ce livre pour pouvoir avoir un avis bien tranché ! » « Je ne suis pas du tout convaincu par ce propos, bien au contraire, je pense que l’effet produit est bien plus soporifique que cathartique ! » « Vas-y t’es qui tôa pour m’parler comme ça, cathartiste tôa même ! »

3.5

Template

Les templates, essentiellement basés sur les CSS, permettent de prédéfinir des styles afin que le site entier soit homogène. Par défaut, 3 styles sont installés pour la partie Site, et 2 pour la partie Administration. En regardant dans les paramètres de chaque style proposé, vous vous apercevrez qu’ils ne permettent pas de personnaliser grand-chose. En effet, si vous désirez supprimer la possibilité de changer la taille de la police de tout le site, ou changer la bannière bleue avec marqué «

We are volunteer !

», vous n’avez pas d’autre choix que d’aller fouiller dans les fichiers de styles et les différents codes sources pour y arriver. Nous allons voir comment supprimer la première ligne de chaque page, à savoir la ligne suivante : Avant de commencer, voici quelques informations sur les Templates, la structure d’un template est toujours la même :

Avec -

index.php

: Fichier principal qui contient le code HTML de la structure du site, les appels CSS et Javascript, les balises meta, etc...

CSS

: répertoire contenant les fichiers CSS du template, appelé dans index.php

Images

: le répertoire contenant les images template

templateDetails.xml

: Fichier d'installation du template, c'est aussi lui qui permet de lister le template dans l'administration de Joomla!, lister les positions disponibles dans les listes déroulantes, et c'est ici que sont définis les paramètres d'administration du template.

Avec ces informations, comment arriver à supprimer la ligne qui nous intéresse ? Facile (!), puisque le fichier index.php contient la structure du template, donc la structure de chaque page, les modifications que nous devons faire se feront dans ce fichier ! En effet, en éditant le fichier index.php contenu dans Joomla/templates/beez_20, on trouve les lignes suivantes, qu’il faut supprimer : Et également remplacer : Par

Exercice 1

: Installez le

autodealer-et

disponible dans le répertorie Définissez-le comme template pour le site. Que remarquez-vous ?

Templates additionnels

.

Exercice 2

: Modifiez cette bannière et remplacez là par votre propre bannière. Il y a 2 moyens pour modifier un fichier CSS : 1.

2.

Trouver directement le bon fichier de style via FileZilla et l’éditer (avec notepad++ par exemple) En passant par l’interface d’administration de Joomla, dans Extension templates onglet

Templates

Gestion des

Indication

: le style en question est dans le template Beez20, et s’appelle

Personal.

La bannière de remplacement doit avoir les dimensions 1060x288px.

Exercice 3

: Toujours dans le template Beez20, en bas de chaque page, il est écrit Animé par Joomla!® . Trouvez le moyen de le changer pour qu’il y soit inscrit : Animé par

Mon Prénom

!

Indication

: les modifications à apporter le sont au fichier index.php…

Exercice 4

: supprimez l’espace blanc en haut de chaque page (dans lequel il y avait le changement de taille de la police). Il existe de très nombreux sites proposant des Templates Joomla gratuits ou payants. Il existe même un logiciel,

Artisteer

, disponible sur http://www.artisteer.com/ , qui propose de définir vos templates et de les exporter au format Joomla. Une version d’évaluation de ce logiciel peut y être téléchargée… Essayez de trouver le template qui vous convient le mieux !

4 Pour aller plus loin

Joomla regorge encore de bien d’autres fonctionnalités, et encore plus d’autres modules, qu’il faut prendre la peine de découvrir par soit même. Voici un échantillon des possibilités qui s’offrent à vous :

Exercice 1 : Bannières publicitaires

Joomla possède un composant dédié à la gestion des bannières publicitaires (avec gestion des clients etc…). Rajoutez à votre site 3 bannières publicitaires, avec des restrictions sur le nombre d’affichage autorisé, et observez les possibilités qui vous sont offertes en termes de suivi des cliques etc…

Exercice 2 : Livre d’or

Trouvez un composant qui vous permette d’intégrer un livre d’or à votre site. Vous pouvez commencer par www.joomla.fr

.

Exercice 3 : Extension surprise

Installez l’extension

mod_goboslide.zip

et trouvez à quoi elle sert.

Exercice 4 : Analyse de trafic

Trouvez une extension qui fait des rapports d’analyse sur les visites de votre site (à la Google analytics).

Exercice 5 : Backup

Trouvez sur le net le module

Akeeba Backup

, qui, comme son nom l’indique, permet de faire des sauvegardes d’un site web. Installez-le et faites une sauvegarde de votre site web.

Annexes

Positions du template Beez2. Vous pouvez les retrouver en allant dans

Gestion des Templates

->

paramètres

, puis :

Prévisualisez la position des modules Désactivé Activé

et en rajoutant

&tp=1

à la fin de l’adresse dans le navigateur.