Présentation générale

Joomla! est un Gestionnaire de Contenu (CMS pour Content Management System) puissant, opensource et libre. Il dispose aujourd'hui d'une grande notoriété car largement utilisé et doté d'un nombre impressionnant d'extensions.

Le site principal du projet est http://www.joomla.org et à partir de là on a accès à deux ressources primordiales : le forum qui permet d'obtenir du support rapidement et le « JED », Joomla Extensions Directory, qui regroupe l'essentiel des extensions disponibles. Sous bestofjoomla.com notamment, on trouvera de nombreux design librement utilisables, il suffit de les télécharger puis de les installer.

Le site de la communauté française est http://www.joomla.fr, on y trouvera notamment les versions francisées de joomla, ce qui évite de le faire soit même.

Joomla! dispose d'une vue « Front End », qui est ce que voit l'internaute lorsqu'il visite un site avec Joomla!, et d'une vue « Back End », qui est la vue administrateur dont l'accès est restreint aux membres du site ayant un statut spécial.

La dernière version à ce jour est la 1.5.9 et il faut impérativement installer une version >1.5, les extensions pour les versions 1.0.x ne seront en effet plus compatibles à partir de la version 1.6

Pour la suite, nous allons prendre l'exemple concret du site d'une entreprise qui fabrique et vend des meubles en bois et nous allons créer un site vitrine pour qu'elle présente son activité et ses principales créations. Toutes les images présentées ici sont cliquables pour visualiser en taille réelle.

Installation

Pré-requis

Il faut disposer d'un serveur web, de PHP > 4.2 et de MySQL>4

Installation

Il suffit de :

1. créer une base de données et un utilisateur y ayant accès, via par exemple phpmyadmin si vous l'avez installé;
2. décompresser dans une répertoire accessible du serveur web (/var/www/html par exemple sous linux/ux en configuration standard) le fichier archive récupéré depuis le site joomla.org;
3. renommer le répertoire « joomla... » ainsi créer en le nom de votre choix, par exemple « monsite »;
4. accéder à ce dossier via son navigateur en tapant http://localhost/monsite;
5. suivre les instructions d'installation ensuite;

une fois finie l'installation, il faut supprimer le répertoire monsite/installation pour pouvoir accéder au site.

En images ces étapes sont reprises ici pour les points importants :

Configuration

Voilà, vous avez installé Joomla! Et si vous vous rendez sur http://localhost/monsite, vous devriez voir cela :

Pas mirobolant tout ça, on est loin d'un vrai site. Pas si loin en fait, rendez-vous maintenant sur http://localhost/monsite/administrator, vous devriez voir ceci :

Entrez « admin » comme utilisateur (c'est le superadministrateur par défaut) et le mot de passe que vous avez saisi lors de l'installation. Vous devriez arriver sur la page d'accueil de l'administration :

La page d'accueil présente une synthèse de ce qui est configurable, le menu horizontal en haut est plus fourni et vous aurez souvent à l'utiliser. D'abord, allons voir la configuration du site, cliquez sur « Configuration générale » :

Là vous allez pouvoir renseigner les métadonnées du site et pourquoi pas changer son nom. Cette section est importante pour le référencement. Les autres sections système est serveur sont plus techniques et vous ne devriez les manipuler qu'avec précaution, mais il peut être utile d'y modifier par exemple les extensions de fichiers autorisées ou des durées de session.

A ce niveau, le site est correctement configuré. Mais il est encore bien vide. La prochaine partie entrera plus dans le détail du contenu.

Gérer le contenu

Structuration

Ce qu'on veut

Avant même de se lancer dans les opérations techniques de création du contenu, il faut se poser la question « qu'est ce que je veux montrer sur mon site? » et avoir une idée bien précise de la structure qu'on veut donner au contenu. Un papier et un crayon suffisent pour ce faire.

Ici, nous allons vouloir présenter l'entreprise, son implantation, son historique. Pourquoi pas aussi présenter la filière bois, l'aspect durable et écologique de ces meubles. Une partie sera consacrée à présenter les principales pièces. Enfin il faut prévoir des éléments « standards » comme un plan de site et un formulaire de contact. Le problème de la page d'accueil sera vu dans une autre partie.

Comment cela fonctionne avec Joomla! ?

Sous Joomla! le contenu « dynamique » est organisé selon des articles, qui appartiennent à des catégories qui elles mêmes appartiennent à des sections (ce découpage est historique et serait franchement à revoir, sans doute les versions futures organiseront-elles le contenu uniquement en articles et un arbre de catégories, plus souple). Par contenu dynamique, il faut comprendre le contenu éditorial qui est amené à être remplacé assez régulièrement, en fait c'est la présentation de ce contenu qui va être dynamique comme on le verra. L'important à ce stade est de faire correspondre l'organisation voulue avec l'organisation technique imposée par Joomla! (une autre forme de contenu peut être mise en place grâce aux modules, nous verrons cela aussi dans la partie design).

Cela donne dans notre cas l'arborescence :

Section « Informations »

Catégorie « L'entreprise » : contiendra les articles concernant l'entreprise

Catégorie « La filière bois » : contiendra les articles présentant la fabrication des meubles et leurs avantages

Catégorie « Infos légales » : peut présenter les mentions légales, les crédits, etc

Section « Production »

Catégorie « Table » : quelques produits de type table

Catégorie « Armoires » : quelques produits de type armoire

etc

Création de l'arborescence

Nous allons donc créer ces différents éléments, de manière très basique pour le moment. En image les différentes étapes pour créer une section puis une catégorie dans cette section.

La liste des sections est vide mais il est intéressant de noter la disposition que nous retrouverons très souvent avec Joomla! : une liste centrale, paginée (pas visible ici, il faut au minimum 20 lignes pour que ce utile), triable en cliquant sur les titres de colonnes, filtrable selon un motif (en haut à gauche de la liste). En haut à droite, on voit une barre d'outil dont les boutons se retrouveront souvent aussi, notamment :

• "Publier" : permet de rendre public un élément, il sera donc visible en Front End;
• "Dépublier" : à l'inverse, rend privé un élément, utile par exemple en cours de rédaction d'un élément;
• "Editer" : permet de modifier un élément existant;
• "Supprimer" : permet de supprimer un élément existant, un certain nombre de contrôles empêchent de supprimer, par exemple, une catégorie qui contiendrait des articles;
• "Nouveau" : permet d'ajouter un nouvel élément
• "Aide" : affiche l'aide

Ici, dans le mode "Edition", on a une autre disposition standard de l'administration Joomla, avec à gauche des champs de saisies concernant le rendu de l'élément (titre, description, position dans les menus ou dans les conteneurs sections/catégories) et on a d'autres boutons en haut à droite :

• "Sauver" : permet de sauvegarder l'édition en cours et renvoie à la liste contenant l'élément;
• "Appliquer" : c'est la même chose que sauver, mais on reste ensuite sur la page d'édition, c'est utile pour visualiser des tests : on applique et on va voir en Front End le résultat, si ça ne convient pas on est ainsi toujours sur la page d'édition;
• "Fermer" : permet de fermer la vue en cours et de revenir à la liste à laquelle appartient l'élément en cours.

joomlababa-admin7

joomlababa-admin8

Pour les catégories, il faut choisir dans quel section la mettre (en haut à gauche).

joomlababa-admin10

Voilà notre liste des catégories prête! Vous pouvez observer qu'il y a des filtres en haut à droite de la liste, sous les boutons. Ces filtres ne sont pas utiles lorsqu'on a si peu d'éléments, mais vous verrez que pour les articles les mêmes filtres existent et sont bien pratiques sitôt que vous avez quelques dizaines d'articles.

Et les articles dans tout ça?

Les écrire

Voilà, à ce point, nous avons notre structure de contenu. Pour la suite, nous allons écrire un petit article pour présenter l'entreprise pas exemple. Comme nous n'avons pas vraiment d'entreprise, on va utiliser un classique remplissage en latin, via http://lorem.game-on-net.com par exemple.

On part de la gestion des articles, puis on clique sur le plus vert "Nouveau". L'interface d'édition se présente comme cela (si vous avez installé un autre éditeur, il peut y avoir des différences dans l'apparence des boutons et fenêtres mais en gros les opérations restent les mêmes).

joomlababa-article2

Notez encore un nouveau bouton :

• "Prévisualiser" : il permet dans une fenêtre d'avoir une idée plus précise du rendu de l'article. Je déconseille toutefois de l'utiliser car vous n'aurez que l'article, hors de tout contexte et pas forcément avec les bons styles. Préférez ouvrir dans un nouvel onglet la vue Front End de l'article que vous éditer, appliquer côté Back End et rafraichissez côté Front End pour voir le résultat.

Bon, voilà, on sauve et nous avons notre article créé!

Les montrer

Bon, nous avons un article, "mais comment je le vois?" me direz vous... Aïe aïe aïe, il falloir parler d'une autre partie de l'administration et du fonctionnement de Joomla!, à savoir le fonctionnement du Front End, les menus, les modules, les composants, etc, tout un programme mais rassurez vous ça va aller vite. Nous reviendrons plus bas sur notre article.

Le front end

Aperçu

Admettons donc que ça y est, vous avez écrit tous vos articles et vous trépignez d'impatience de voir le résultat sur votre site. Si vous allez voir votre site à l'adresse http://localhost/monsite, vous n'allez pas voir grand changement... en fait, rien n'aura changé. Intéressons nous quelques instants à cette vue minimaliste.

Que voit-on sur cet écran? Un titre en haut à gauche, un pied de page en bas à droite, un bloc qui ressemble à un menu à gauche et au milieu juste un titre "Mon site". Alors, le titre, le logo, la disposition même du site sont liés au template qui est un élément permettant de changer d'un coup toute l'apparence du site, le pied de page est un module qui est affiché dans la zone "footer" du template, le menu à gauche est lui aussi un autre module affiché dans la zone "left" du template. Le titre "Mon site" est l'affichage du composant page d'accueil. Que sont donc ces termes?

• Un composant est une extension permettant de fournir ou d'étendre les fonctionnalités de Joomla!, dans notre cas il s'agit d'un composant natif (intégré à Joomla) qui permet d'afficher des articles sur la page d'accueil, au format blog. D'autres composants natifs existent comme l'affichage d'une section ou d'une catégorie au format blog, la gestion des liens web ou des contacts. D'autres composants peuvent être installés, comme des forums, des galeries photos, des gestionnaires de téléchargements, etc
• Un module est une extension souvent de moindre importance que les composants et sont rôle principale est la plupart du temps d'afficher quelque chose : un menu, un article, un flux RSS, des images, etc Là encore des modules natifs sont présents, d'autres peuvent être installés.
• Un plugin est une extension qui permet d'enrichir le rendu du contenu et qui étend là encore les fonctionnalités de Joomla! mais au sein de l'existant. Par exemple, nativement Joomla! ne peut pas afficher de vidéos YouTube dans ses articles, mais il existe des plugins qui permettent de le faire très simplement.

Fonctionnement

Ok, nous avons des modules, des composants, des plugins, du contenu. Mais comment je l'affiche? La question est d'abord de comprendre comment cela fonctionne. L'accueil du site pointe sur une page que vous aurez désignée, ensuite, en cliquant sur les différents liens proposés, dans les menus, mais aussi dans les articles eux mêmes ou dans les modules, vous naviguerez dans le site. Quoi qu'il arrive, l'élément principal que vous verrez sera toujours un composant... même s'il arrivera que ce composant soit vide! Si vous voyez un article, c'est le composant de gestion des articles que vous verrez et qui aura pour rôle d'afficher un article en particulier; si vous voyez une catégorie au format blog, c'est le composant de gestion des articles que vous verrez et qui aura pour rôle d'afficher cette catégorie en particulier au format blog; si vous voyez un formulaire de contact permettant de laisser un message à Machin, c'est le composant de gestion des contacts que vous verrez et qui aura pour rôle d'afficher ce formulaire.

Donc, tout est composant. Il est important de bien le comprendre pour créer ses menus ensuite.

Les modules sont là pour faire beau! et aussi pour aider dans la navigation puisqu'ils permettent d'afficher des menus par exemple.

Trêve de théorie, mettons en pratique :

Création des menus

La pratique

Revenons à notre page d'administration http://localhost/monsite/administrator et cliquons sur le bouton "Gestion des menus" (on peut aussi utiliser le menu en haut que vous utiliserez pratiquement exclusivement une fois que vous aurez l'habitude), là s'ouvre le monde des menus...

Cette première vue permet d'avoir la liste des menus existants. Si vous cliquez sur le nom du menu "Main menu", vous verrez :

Pas très intéressant mais sachez que cela permet d'éditer les informations d'un menu. C'est en gros aussi cette vue que vous aurez si vous souhaitez créer un menu et il faut éviter les accents, les espaces et autres caractères de ce type, hormis pour le nom du module où vous pouvez faire ce que vous voulez. A la création du menu, un module sera aussi créé comme nous le pratiquerons plus bas.

Bon, si maintenant, on clique sur le menu "Menus>Main Menu" en haut, on va pouvoir accéder aux éléments de ce menu et en ajouter un :

Pour en ajouter un, on va cliquer sur "Nouveau" et on va avoir une nouvelle fenêtre nous permettant de choisir le composant que nous voulons afficher, ainsi que ce que nous voulons que ce composant affiche :

Ici nous demandons au composant Articles d'afficher un article en particulier.

Là on va pouvoir renseigner le titre de l'élément de menu, qui peut être différent du titre de l'article qu'on affiche, on va pouvoir choisir la position dans le menu. S'il s'agit de monter ou descendre un élément de menu par rapport aux autres, il vaut mieux le faire sur la liste des éléments d'un menu. Enfin pour les paramètres basiques, on va pouvoir choisir l'article qu'on souhaite afficher en cliquant sur le bouton en haut à droite "Sélection d'un article" :

On sélectionne l'article en cliquand sur son titre.

Voilà, vous sauvegardez et ensuite rendez vous en Front End pour voir le résultat :

Allez voir dans les paramètres avancés de votre élément de menu, sous le bouton qui permet de choisir l'article, et modifiez certaines lignes puis regardez ce que ça donne en Front End, cela vous permettra de voir ce que vous pouvez paramètrer. Notez que vous retrouvez ces paramètres aussi dans les paramètres généraux des articles (directement dans la barre d'outil de la liste des articles, les modifications effecutées là bas seront appliquées à tous les articles) ou dans un article en particulier (auquel cas les modifications ne s'appliqueront qu'à cet article).

Structuration

Bon, voilà, nous avons créé notre premier élément de menu, il permet d'afficher l'article qu'on a écrit et s'affiche dans le menu "Main menu". Maintenant que vous savez faire cela, tout comme vous avez dû réfléchir à la structuration du contenu, vous devez aussi réfléchir à la navigation dans votre site. Là plusieurs choix s'offrent à vous pour afficher le contenu et il faut faire un bref point sur les différents mode d'affichage des articles :

• liste des articles archivés : cela affiche la liste des articles qui ne sont plus accessibles directement car trop anciens;
• un article : cela affiche un article en particulier, comme nous l'avons fait;
• proposition d'article : cela affiche le formulaire de saisie d'un article et permet aux visiteurs d'écrire eux mêmes un article qui sera soumis à l'acceptation des administrateurs;
• articles d'une catégorie/section donnés au format blog : cela permet d'afficher les articles d'une catégorie/section à la suite les uns des autres, comme sur un blog. On peut choisir le nombre d'articles à afficher en entier et pleine largeur, le nombre d'articles dont on n'affiche que les intros et le nombre de colonnes pour les afficher, le nombre d'articles dont on n'affiche que les titres. D'autres options sont disponibles, le mieux est d'aller les tester directement.
• liste des articles/catégories d'une catégorie/section : utile si une catégorie/section est vraiment très fournie.

Maintenant qu'on sait ce qu'on a à disposition pour afficher notre contenu, nous allons pouvoir créer les menus et les structurer comme nous voulons. Ca pourrait donner à peu près cela :

Menu Principal

Accueil

L'entreprise

Historique

Implantation

La filière

Avantages du bois

Ecologie

Procédés de fabrication

La gamme

Tables

Chaises

Armoires

Nous contacter

Menu en pied de page

Accueil

Conditions générales de vente

Mentions légales

Plan du site

Evidemment, cela n'est qu'une illustration et suivant le design du site, vous aurez la possibilité de mettre un menu en haut si nécessaire. En tous les cas, nous voyons que nous avons besoin de deux menus, il va falloir en créer un nouveau. Cela on a vu comment le faire, créons le donc avec le nom "FooterMenu" par exemple :

Une fois sauver, notre menu apparait dans la liste des menus existants, on va pouvoir y ajouter des éléments comme nous l'avons vu plus haut. Une fois notre menu prêt, si on va voir notre site en Front End, nous ne verrons rien de nouveau, pourquoi? Parce qu'un menu n'est qu'un menu, comme on l'a dit, pour afficher quelque chose, il faut utiliser les modules. Allons donc dans Extensions>Gestions des modules :

On constate qu'un module a été créé au nom de Footer Menu (par défaut la création d'un menu crée le module qui est associé), cliquons sur son titre :

Voilà notre module, à gauche on va choisir le position "footer" pour l'afficher, on va également activer le module et indiquer qu'on ne veut pas que le titre soit affiché. Dans la partie droite, on va lier notre module à footermenu si ce n'est pas déjà fait et on va demander l'affichage en liste horizontale (si vous connaissez les CSS, il vaut mieux demander une affichage en liste simple et laisser la CSS mettre en forme). Rendez-vous en Front End pour voir le résultat :

Bon c'est assez moche en fait, mais on voit bien le menu apparaitre en bas, ici je n'ai mis qu'un lien dedans. Un truc intéressant à faire est d'ajoute "&tp=1" à la fin de l'URL de votre site et de voir ce qui se passe, cela va vous afficher les différentes zones du template. Zones dans lesquelles vous allez pouvoir mettre vos modules :

Conclusion

Ce petit tutorial est à la fois riche et pauvre. Il présente les notions essentielles de la gestion du contenu dans Joomla! et de la mise en oeuvre de la navigation et du rendu. Il convient ensuite de faire des essais pour voir ce qu'on peut afficher, quels composants font quoi, quels modules sont disponibles. Plus tard, il faudra aussi s'intéresser aux templates (disponible dans Extensions) qui permettent de donner l'aspect final du site et découvrir les extensions sur le JED. D'autres tutoriaux viendront pour compléter, sur joomla.org, il y a une partie documentation qui en comporte beaucoup déjà.