FORMATION JOOMLA! 1.

5 ________ CCI Landes Novembre 2008 -

Prambule
Vous avez comme projet de publier du contenu sur Internet dans le but de faire connatre ou reconnatre votre activit, vos services, vos produits. Vous avez besoin de stimuler dans le cyber-espace des partenaires, des clients, toute une communaut. Vous souhaitez faire profiter de votre savoir-faire, de vos conseils et de vos analyses en dveloppant votre notorit auprs d'un auditoire identifi. Pour toutes ces raisons et d'autres encore, comme celle d'accroitre vos bnfices, Internet semble devenir l'une des cls. Exister sur la toile, bien souvent c'est exister tout court.

Des professionnels vous guident pour la mise en place de votre prsence sur Internet, mais il est souvent difficile de leur confier toutes les reines. Si l'on considre votre site internet comme le prolongement naturel de la branche communication de votre activit, alors il vaut mieux en connatre les rudiments et l'intgrer compltement aux processus en cours. Vous avez donc choisi, juste titre, d'apprendre par vous-mmes et certainement avez-vous dj commenc vous documenter ; vous avez ainsi surement appris que les technologies du Web sont complexes et en perptuels volutions. Aussi, inutile de vouloir tout connatre des emoteurs, certains outils comme JOOMLA! 1.5 sont fait pour vous faciliter les choses. En vous concentrant sur la bonne route suivre, des objectifs concrets atteindre et la valeur des messages transporter, vous allez pouvoir aborder cette nouvelle aventure avec mthode et clairvoyance... de grandes chances de succs. Bonne e-route...

La Cl USB
La CCI des Landes, l'occasion de cette formation JOOMLA!, vous a remis une cl USB un peu particulire : La Framakey.

La FramaKey

Logo des Logiciels Libres (Open Source)

La Framakey est une compilation de Logiciels Libres pour Windows, prts lemploi sur clef USB qui facilite la vie des utilisateurs nomades. Son objectif est de vous proposer les meilleurs des Logiciels Libres sous systme Windows, prinstalls et prts tre utiliss directement depuis votre clef USB. Par consquent, vous navez rien installer, et lutilisation des logiciels se fait de faon scurise et sans laisser dinformations personnelles sur les machines sur lesquelles vous utilisez votre Framakey.

La slection des meilleurs logiciels portables par FramaKey :

De gauche droite : Mozilla Firefox, navigateur Internet Mozilla Thunderbird, messagerie Open Office, suite bureautique Sumatra PDF, lecteur de documents au format PDF VLC, lecteur multimedia The GIMP, retouche et cration d'images Wengo, tlphonie et visioconference

Un serveur Web pour vous

La CCI des Landes a souhait vous ddier un serveur Web en libre accs. Pour vous entrainer et parfaire votre connaissance pendant et aprs le temps de la formation, sans vous soucier de la technique, voici votre bac sable : http://prenom-nom.cci-landes.com (adresse valider avec formateur) A noter que l'accs vous est rserv. Libre vous de communiquer vos identifiants et mots de passe vos collaborateurs et associs. Tout abus constat entrainera la suppression du compte en question.

Pour vous accompagner dans cette formation, nous avons imprim deux supports de cours, que vous pourrez retrouver sur Internet. Le premier est une fiche de synthse sur le logiciel Joomla! Elle permet d'aborder son historique et de nombreux dtails techniques, ses fonctionnalits, ses pr-requis... Elle a t ralis par un groupe d'informaticiens soucieux de livrer une analyse complte et jour (21 octobre 2008). Vous pourrez le retrouver cette adresse : http://www.projet-plume.org/fiche/joomla Le second s'apparente beaucoup plus un guide de l'utilisateur, extrait lui aussi d'internet. De l'installation de joomla! sur un serveur local la cration d'un site complet et ouvert tous, ce guide offre de prcieux points de repres pour dbuter. Certains chapitres n'ont pas t reproduit ici, c'est pourquoi nous vous invitons consulter le site de l'auteur pour aller plus loin. http://joomla.cocoate.com/fr/joomla-15-fr En fin de document, vous trouverez une bibliographie. Tous les livres rfrencs l sont disponibles sur le site Amazon de vente en ligne. http://www.amazon.fr/Joomla-1-5-Hagen-Graf/dp/2744022519/

Joomla! : gestion de contenu Web (CMS)

Site web : http://www.joomla.fr/ (site franais : portail, aide, extensions, forum), http://www.joomla.org/ (site officiel US) Systme : UNIX-like, Windows, MacOS X Tlchargement : http://aide.joomla.fr/telechargements/index.php Version value : 1.5.x (1.5.7) et 1.0.x (1.0.15) Langue(s) de l'interface : franais, anglais, autres Licence : GPL OpenSource - GNU General Public License

Fiche PLUME

Cration ou MAJ importante : 21/10/2008 Correction mineure : 21/10/2008 Patrick Kocelniak - ENSIMAG (Grenoble INP) Patrick Kocelniak qui accepte de faire un support lger l'installation Christian Helft (LAL) Systme : UNIX-like, Windows, MacOS X Mtier-activit : documentation-IST, travail coopratif Domaine informatique : internet Usage : service informatique Fonctionnalits principales : base de donnes, communication, diffusion information, diteur de code, gestion de contenu, partage de fichiers, service web, travail coopratif Mots-cls divers : CMS, HTML, publication Origine : dveloppement externe Type de licence : libre Cot : gratuit

Auteur :

Contact pour cette fiche :

Responsable thmatique :

Mots cls

Description Fonctionnalits gnrales :

Joomla! est un systme de gestion de contenu (en anglais, CMS, pour Content Management System). Ce logiciel web permet de crer un site internet dynamique. Les informations sont rdiges dans des articles. Les articles sont classs dans des sections elles mmes subdivises en catgories. Joomla! fonctionne avec une interface administration (backoffice) et une interface utilisateur (frontoffice). Le backoffice permet de crer la structure du site web (sections, catgories, articles, items de menus, gestion des utilisateurs). La modification des articles existants peut se faire en mode Wysiwyg dans le frontoffice, ce qui permet une dlgation facile des rdacteurs. Lditeur des articles propose un mode Wysiwyg pour tout utilisateur mais aussi un mode texte HTML pour des utilisateurs avancs. Joomla! dispose dun systme de modles (templates) qui permet de modifier trs facilement laspect graphique du site cr. Joomla dispose dun systme dextensions qui permet denrichir les fonctionnalits selon les besoins. Ces extensions font de Joomla! un CMS trs modulaire. Le site officiel joomla recense 3850 extensions (octobre 2008). Fonctionnalits principales :

Articles ditables et grables sans limitations via un diteur WYSIWYG. Insertion de liens automatiques sur des fichiers tlchargs. Gestion fine de la publication des informations (dates de dbut et fin de publication). Facilits pour copier et dplacer le contenu entre diffrentes catgories. Soumission darticles par les contributeurs depuis linterface publique (frontoffice). Gestion des menus et paramtrage individualiss des liens de menus. Templates et design compltement personnalisables incluant laffichage des blocs (au centre, droite, gauche, en haut, en bas). Librairie dimages et de fichiers multimdia (PNG, PDF, DOC, XLS, GIF, JPEG, FLASH, AVI, etc). Gestionnaire dactualits, sondages, bannires, votes. Multilingue (franais compris).

Il y a 2 versions de Joomla! :

Une version 1.5.x (1.5.7 au 21/10/2008) : il sagit de la version actuelle de Joomla!, stable depuis janvier 2008. Une version 1.0.x (1.0.15 au 21/10/2008) : il sagit de la version prcdente de Joomla!, stable depuis 2005. Cette version est maintenue jusquau 22 juillet 2009 en raison du grand nombre dinstallations existantes. Attention : Cela signifie quil ny aura plus de mises jour de scurit pour cette version 1.0.x aprs le 22/07/2009.

Amliorations principales de Joomla! 1.5.x par rapport Joomla! 1.0.x :

Interface dadministration (backoffice) compltement revue et simplifie Gestionnaire dextensions compltement revu et simplifi Edition de templates multi-CSS Support complet Atom 1.0 and RSS 2.0 Amlioration des options daccessibilit Internationalisation amliore, support complet UTF-8, support RTL, traduction utilisant des fichiers .INI Support LDAP natif Support XML-RPC Possibilit dimplmenter des applications Ajax

Quelle version de Joomla! choisir : 1.0.x ou 1.5.x ? Pour faire court : 1.5.x. Pour tre plus prcis :

Joomla! 1.0.x et ses 2700 extensions existent depuis 2005 mais le 13/10/2008, lquipe de Joomla! a annonc la date de la fin du support de Joomla! 1.0.x : le 22/07/2009. Cette annonce laisse entendre que les mises jour de scurit pour Joomla! 1.0.x sarrteront le 22/07/2009. Joomla! 1.5.x est en version stable depuis janvier 2008. Il dispose dune interface administrateur simplifie (en particulier pour grer les extensions) et de nouvelles fonctionnalits stables (mode LDAP, internationalisation, etc). Joomla! 1.5.x et les extensions spcifiques cette version ont eu un temps de dveloppement trs long. Lannonce de la fin du support de Joomla! 1.0.x devrait favoriser et acclrer les dveloppements ou migrations dextensions pour Joomla! 1.5.x. Quid du mode legacy de Joomla! 1.5.x (activable via la partie Administrator : Menu Extensions -> Gestionnaire des plugins -> publier le plugin nomm SystemLegacy) ? Il permet en thorie de faire fonctionner sur la version 1.5.x les extensions dveloppes pour la version 1.0.x. En pratique, mme avec ce mode legacy, beaucoup dextensions dveloppes pour la version 1.0.x ne fonctionnent toujours pas correctement avec la version 1.5.x. De plus, ce mode legacy ne fonctionnera plus pour les extensions Joomla! 1.0.x au sein de la future version Joomla! 1.6. Il ne faut donc pas compter sur lui pour utiliser de faon durable des anciennes extensions Joomla! 1.0.x.

Joomla! 1.5.x et 1.0.x au cas par cas :

Vous crez votre premier site Joomla! : 1. Choisissez Joomla! 1.5.x 2. Choisissez des extensions dveloppes nativement pour Joomla! 1.5.x. Evitez les extensions Joomla! 1.0.x. 3. Choisissez un template graphique compatible Joomla! 1.5.x Vous avez dj un site Joomla! existant en 1.0.x et vous souhaitez mettre en oeuvre tout de suite la migration en Joomla! 1.5.x : 1. Aprs avoir fait toutes vos sauvegardes, effectuez la migration de 1.0.x 1.0.15. 2. Puis effectuez la migration de 1.0.15 1.5.x. (par cration dun nouveau site et utilisation de la solution Migrator dcrite ci-dessous) 3. Vous vrifiez que toutes vos extensions et votre template fonctionnent. 4. Si certaines extensions ne fonctionnent pas : essayez de trouver une version native de ces extensions pour Joomla! 1.5.x ou sinon remplacez-les par des extensionremplacez-le par un template compatible Joomla! 1.5.x. Vous avez dj un site Joomla! existant en 1.0.x et vous navez pas le temps dtudier tout de suite une migration en Joomla! 1.5.x : 1. Aprs avoir fait toutes vos sauvegardes, effectuez la migration de 1.0.x 1.0.15. Cest une migration gnralement sans risques qui prendra en compte les dernires mises jour de scurit. 2. Jusquau 22/07/2009 : appliquez les mises jour de scurit proposes concernant Joomla! 1.0.x. 3. Faites un voeu pour que la fin du support de Joomla! 1.0.x soit repousse une date postrieure au 22/07/2009. Si ce nest pas le cas : tudiez et planifiez la migration vers Joomla! 1.5.x avant le 22/07/2009.

Migration de Joomla! 1.0.x 1.5.x :

Il y a une procdure appele Migrator dcrite dans les logiciels connexes. Cette procdure est en version stable depuis avril 2008. Elle est surtout sans risques car elle ne dtruit pas le site 1.0.x existant. Elle permet une migration des donnes (toute la structure du site avec ses sections, catgories, articles et menus). Mais elle ne gre pas le problme des extensions qui nauraient pas volu vers Joomla! 1.5.x. Elle se prsente sous la forme dun composant (migrator v 1.1 au 07/08/2008) installer sur la version 1.0.x de votre site Joomla! et de lactivation du mode migration dans linstallation de votre nouveau site Joomla! 1.5.x.

Autres fonctionnalits:

Installation par script PHP avec interface graphique : trs facile. Interface LDAP : intgre dans la version 1.5.x, disponible et oprationnelle sous forme dextension/hack dans la version 1.0.x. Moteur de recherche intgr. Changement de lordre daffichage des articles et autres objets. Affichage de flashs infos alatoires. Gestionnaire de flux RSS, syndication paramtrable sur toutes les pages. Envoi darticle par mail. Article en format imprimable. Cration de pdf la vole. Installation simple et rapide des templates et des extensions. Gestion des archives, stockage des anciens articles. URLs SEF (Search Engine Friendly) permettant une meilleure indexation par les moteurs de recherche. dition des balises META (titres et mots clefs) pour chaque article. Normes daccessibilit. Cache paramtrable et compression des pages pour augmenter les performances. Possibilit de mettre le site hors ligne pour une maintenance tout en restant accessible par ladministrateur. Extensions multisites et multilingues possibles. Statistiques : par moteur de recherche, systme dexploitation client, recherches effectues. Les statistiques des recherches effectues sont trs utiles par exemple pour : Identifier des informations cherches mais non trouves sur le site. Identifier les types de systmes dexploitations et de navigateurs web utiliss pour accder au site. Les articles sont stocks dans une base de donnes mysql sous forme HTML. Utilisations : en versions 1.5.7 et 1.0.15, serveur Apache 2.x, PHP5, MySQL 5 Intranet pdagogique et administratif Grenoble INP - ENSIMAG. 1000 utilisateurs. 80 utilisateurs/rdacteurs potentiels. 10 rdacteurs effectifs actuellement. 2 webmasters. 160 000 visites. Les articles initiaux ont t imports de lancien intranet HTML statique par des copier/coller du code HTML dans lditeur wysiwyg JCE. Version utilise : 1.5.7 (initialement : 1.0.15) Extranet Tice Grenoble INP - ENSEEG/PHELMA (http://atelweb.enseeg.inpg.free.fr ) : portail dun atelier de 100 sites web (dont 30 de type Joomla!). 70 000 visites. Versions utilises : 1.5.7 et 1.0.15. Comme tout CMS, la difficult est principalement de comprendre la structuration des informations et de sapproprier son vocabulaire (sections, catgories, articles, menus). Les extensions sont choisir avec soin. Ne pas en abuser. Privilgier celles qui sont compltement indpendantes du noyau Joomla!. Eviter celles qui modifient des parties du noyau Joomla!. Si elles sont vraiment ncessaires : utiliser en connaissance de cause car des mises jour du CMS ncessiteront presque toujours une rinstallation ou un redveloppement de ces extensions.

Interoprabilit:

Contexte d'utilisation:

Limitations, difficults, fonctionnalits importantes non couvertes:

Gestion des droits utilisateurs : Joomla ne dispose par dfaut que de 2 groupes utilisateurs (public et membre). Cette limitation peut tre leve par des extensions GMAccess (solution gratuite pour Joomla! 1.0.x) ou juga (solution commerciale pour Joomla! 1.5.x, tarif : 50$). Comme toute solution PHP/MySQL, il est ncessaire dtre attentif la scurit et de suivre les mises jour de scurit de Joomla!. Le succs de joomla en fait une cible intressante pour les hackers bien que Websecure Group garantisse la scurit du CMS par un certificat dcern lors du festival russe : Chaos Construction (Aot 2006). Pas dimport et dexport faciles possibles depuis ou vers dautres CMS. Une migration ventuelle depuis ou vers un autre systme CMS que Joomla! passera souvent par des copier/coller des articles HTML qui sont fastidieux mais facilits par un diteur darticles Wysiwyg/HTML.

Environnement du logiciel Distributions dans lesquelles ce logiciel est intgr:

Distribution sur cl USB pour environnement Windows (Movamp + Joomla pr-install en versions 1.0.x et 1.5.x) : http://joomlacode.org/gf/project/draft_server/ Attention : les diffrentes solutions ayant Joomla! pr-install ne mettent souvent pas disposition les toutes dernires versions de Joomla!. Pensez appliquer les dernires mises jour de scurit. Prrequis : un serveur Web (Linux, Windows, autres) avec PHP et MySQL. Joomla! fonctionne avec PHP4, PHP5, MySQL 4 et MySQL 5. Joomla! fonctionne trs bien sur un serveur Web install sur le poste local. Quelques solutions de ce type : Xampp : http://www.apachefriends.org/fr/xampp.html (Windows, Linux, Mac OS, Solaris) Voir la fiche PLUME http://www.projet-plume.org/ressource/xamppserveu... EasyPHP : http://www.easyphp.org/ (Windows) Solution Windows movamp : http://www.movamp.net/ (serveur web install sur une cl USB) LAMP : http://lamphowto.com/ (Linux) Lditeur darticles est un aspect trs important dans Joomla!, peut tre le plus important. Cest en effet son niveau de convivialit qui facilite le travail quotidien des rdacteurs. Joomla! fournit un diteur darticles intgr en mode WYSIWYG. Il est possible dinstaller sous forme dextension un diteur encore plus convivial pour lutilisateur. Les deux meilleures solutions sont :

Plates-formes :

Logiciels connexes:

Joomla JCE : gratuit avec une contribution de 20 $/an pour des plugins supplmentaires (gestion dimages, flash, vidos, autres fichiers tlchargs par fentre popup). Ce petit investissement apporte un vrai confort supplmentaire pour ldition. Une petite prfrence pour cet diteur qui permet une personnalisation pousse (des types de fichiers autoriss tlcharger entre autres). Site officiel : http://www.joomlacontenteditor.net/. Site franais : http://jce.sarki.ch/. Joomla FCK : gratuit (mais un mode de donation de lordre de 20$/an semble tre en cours de mise en place galement) avec aussi une gestion dimages, flash, vidos, autres fichiers tlchargs par fentre popup. Site officiel : http://www.joomlafckeditor.com/.

Authentification CAS

Vous trouverez les dtails sur : http://joomlacode.org/gf/project/auth_manager/

A noter que ces dveloppements sont produits par le dpartement informatique de luniversit de La Rochelle : http://informatique.univ-lr.fr/

Migration dun site Joomla! 1.0.x vers 1.5.x par le composant migrator, version stable 1.1 :

La migration nest pas garantie 100% mais le principe de la migration est sans risques car il ne dtruit rien dans le site initial mais effectue la migration relle dans une nouvelle installation de Joomla! 1.5.x. Principe : 1. Installation du composant migrator en tant quextension du site Joomla! 1.0.x existant. 2. Ce composant permet principalement un export de la base de donnes dans un fichier. 3. Nouvelle installation Joomla! 1.5.x effectuer sparment dans un rpertoire diffrent de linstallation 1.0.x. 4. Lors de cette nouvelle installation, choisir une option Script de migration avec le tlchargement. 5. La base de donnes est alors correctement migre. 6. Il reste recopier les fichiers spcifiques du site initial 1.0.x vers le nouveau site 1.5.x : images, fichiers de donnes (flash, ppt, doc, vdos, autres), template. Principalement, cela concerne les rpertoires : images et templates 7. Ce que ne couvre pas cette solution migrator : la migration des extensions du site Joomla! 1.0.x. 8. Si le template de lancien site nest pas compatible Joomla! 1.5.x, il faut galement ladapter ou le remplacer. Maturit du composant Migrator : bonne. Site de tlchargement : http://joomlacode.org/gf/project/pasamioprojects/f... Tutoriel pas pas de migration : http://www.siteground.com/tutorials/joomla15/jooml... (version US)

Extensions :

Toutes les extensions joomla! classes par thmes (anglais) : http://extensions.joomla.org/ Site dextensions (franais) : http://www.joomlafrance.org/ Extension site multilingues, joomfish : http://www.joomfish.net/ Extensions multisites : http://extensions.joomla.org/index.php?option=com_... (solutions gratuites et commerciales) Extensions gestion de groupes utilisateurs : http://www.joomlafrance.org/telecharger/ fileinfo/G... (solution gratuite pour Joomla! 1.0.x), http://www.dioscouri.com/juga/ (solution commerciale pour Joomla! 1.5.x) Extension gestionnaire de tlchargements (remository) : http://remository.com/downloads/joomla-software/ Extension calendrier jevents : http://www.jevents.net/ Extension LDAP pour Joomla 1.0.x, LDAP Hack : http://www.joomlafrance.org/telecharger/fileinfo/l... Un pack joomla spcial ducation : http://www.joomlation.net/index.php? option=com_con... (version joomla personnalise pour la gestion dun tablissement scolaire). Ce pack nest malheureusement plus maintenu. Mais il reste une excellente initiative et slection de composants additionnels (eux mmes personnaliss). Cest une trs bonne rfrence au niveau des ides pour tout administrateur qui souhaite ajouter des extensions Joomla!. Ce pack est bas sur Joomla! 1.0.12.

Modles graphiques (templates) gratuits :

http://www.joomlaos.de/ http://www.joomla24.com/ Pour rechercher dautres sites, utilisez les mots cls : free joomla template dans un moteur de recherche internet

Prestations commerciales autour de la solution Joomla! :

Si vous avez besoin de dveloppements (ou extensions) spcifiques autour dune solution Joomla!, il existe de nombreux prestataires privs, SARL, EURL ou freelances quon peut trouver par exemple par une recherche sur internet.

Autres logiciels aux fonctionnalits quivalentes:

Drupal : http://drupalfr.org/ voir la fiche PLUME http://www.projet-plume.org/fiche/drupal E107 : http://e107.org/ CMS Made Simple : http://www.cmsmadesimple.fr/ SPIP : http://www.spip.net/ voir la fiche PLUME http://www.projet-plume.org/fiche/spip eGroupware : http://www.egroupware.org/Home?lang=fr

Environnement de dveloppement Type de structure associe au dveloppement:

Le dveloppement de Joomla! est en mode open source GPL depuis 2005. Lquipe de Joomla! est issue de celle qui avait dvelopp le CMS Mambo (gratuit mais dveloppement mixte sous couvert dune socit prive MIRO). Exprience consquente de lquipe de dveloppement de ce type de CMS (> 5 ans). Historiquement, Joomla! a t dvelopp sur les ides initiales mises en oeuvre dans le logiciel CMS Mambo (2003). Le passage de Mambo Joomla! sest fait en douceur malgr la scission Mambo/Joomla (compatibilit ascendante pour assurer la transition). La transition entre les versions majeures 1.0.x et 1.5.x de Joomla! se fait galement en douceur. Etant donn le grand succs historique de ce CMS, la version 1.0.x est toujours maintenue depuis janvier 2008 malgr la sortie de la version 1.5.x et elle restera maintenue jusquau 22/07/2009. La version 1.5.x a eu un temps de dveloppement long mais est trs russie (simplicit dutilisation accrue pour lutilisateur et ladministrateur, mode dextensions simplifi, LDAP intgr, internationalisation meilleure, normes daccessibilit PDA/ tlphone/ordinateur) Argument le plus important : lquipe de dveloppement ragit trs vite chaque faille de scurit dcouverte. Les patchs (mises jour de scurit) sont mis disposition trs rapidement. Une forte communaut dutilisateurs la fois internationale et franaise. Harvard University - The Graduate School of Arts and Sciences : http://www.gsas.harvard.edu Facult de droit et des sciences sociales de luniversit de Poitiers : http://droit.univpoitiers.fr ENSAE ParisTech - Ecole Nationale de la Statistique et de lAdministration Economique : http://www.ensae.fr Ecole dingnieurs de Limoges 3IL : http://www.3il.fr/ Site du ple TICE de luniversit de Versailles Saint-Quentin-en-Yvelines : http://www.tice.uvsq.fr Le Journal Officiel : http://www.journal-officiel.gouv.fr/ Centre de recherches de larme de lair : http://www.crea.air.defense.gouv.fr/ Observatoire europen des politiques universitaires : http://oepu.paris-sorbonne.fr/ Centre rgional dinformation des Nations Unies pour lEurope occidentale : http://www.unric.org/ Universit Franaise dEgypte : http://portal.ufe.edu.eg/joomla/index.php Institut Pasteur : http://www.aidez-pasteur.com/ Le Petit Robert : http://www.lerobert.com/ Stade de France : http://www.stadefrance.com Portail interministeriel dinformation pour lducation artistique et culturelle : http://www.education.arts.culture.fr/ Un des sites de la Nasa : http://www.techbriefs.com/ ONG - Site du secrtariat de lassociation humanitaire CARE : http://www.careinternational.org/ Enseignes commerciales connues : http://www.danone.com/, http://www.sennheiser.fr/, http://www.mr-bricolage.fr/, http://www.cetelem-ebusiness.fr/, http://www.orexad.com/, http://portail.mindscape.com/

Elments de prennit:

Rfrences d'utilisateurs institutionnels:

Environnement utilisateur Liste de diffusion ou de discussion, support et forums:

Forum franais : http://forum.joomla.fr/ Forum US : http://forum.joomla.org/ Un site trs didactique pour comprendre Joomla! : http://joomla15.sarki.ch/ Administration de Joomla! 1.5.x : http://aide.joomla.fr/telechargements/Documentatio... Joomla! 1.0.x pour les nuls : http://aide.joomla.fr/telechargements/Documentatio... Scurit : Voii les 3 mesures importantes prendre pour prserver votre site et ses donnes. Les 2 premires sont trs simples mettre en oeuvre. Sauvegarde dun site web Joomla! : 1. Sauvegarde des fichiers du site : ces fichiers contiennent les images et autres fichiers lis (doc, flash, vidos), les fichiers programmes et les extensions installes 2. Sauvegarde de la base de donnes mysql : la base de donnes contient la structure du site (sections, catgories, articles, menus) 3. Il est trs important de mettre en oeuvre une procdure de sauvegarde quotidienne des fichiers et de la base de donnes de votre site. Joomla! est en effet une solution populaire en php/mysql et donc sduisante pour des attaques de hackers. La sauvegarde est donc une prcaution ncessaire. Mises jours : 1. Il est indispensable deffectuer les mises jour de scurit au plus vite. En effet, lexploitation dune faille de scurit peut se traduire de plusieurs faons sur votre site : simple dtournement de la page daccueil, suppression du contenu de la base de donnes, suppression des fichiers du site. 2. Ces mises jour sont trs simples appliquer, il sagit en gnral dun ensemble de fichiers installer dans le rpertoire du site web existant. Scurisation du serveur php/mysql : 1. Cette mesure consiste protger non plus directement lapplication Joomla! mais protger le serveur web/php/mysql qui lhberge. 2. Il ny a pas de fiche de recette toute faite (mme si certains points sont connus comme par exemple la mise OFF de la variable php register_globals). 3. Ce type dopration ncessite lintervention dun administrateur systme expriment.

Documentation utilisateur:

Divers (astuces, actualits, scurit):

Joomla : prix CMS Awards 2006 et 2007 (http://www.packtpub.com/award )

Conseils :

Le vocabulaire sections et catgories est peu comprhensible au dbut. Pour simplifier, considrer les sections comme des dossiers/rpertoires principaux et les catgories comme des sous-dossiers/sous-rpertoires. Chaque article doit en gnral appartenir une section et une catgorie. La version 1.5.x permet cependant davoir si ncessaire des articles indpendants des sections ou catgories. Les tapes de cration principales dun site Joomla! sont : 1. Cration des sections et catgories pour ranger les articles 2. Cration des articles 3. Cration des menus lis des sections ou catgories ou articles.

Contributions:

Joomla! Developer Network : http://developer.joomla.org/ Projets Open Source autour de Joomla! : http://joomlacode.org/

Vous trouverez ce document cette adresse: http://www.projet-plume.org/fiche/joomla

Licence Creative Commons by-nc-nd (Paternit, pas d'utilisation commerciale, pas de modification)

Joomla ! est un systme de gestion de contenu (CMS pour

Content Management System) cr par une quipe internationale de dveloppeurs rcompense maintes reprises. Il vous permet de crer un site internet dynamique en toute simplicit et de mettre disposition de vos visiteurs des services (forum boutique en ligne galerie photos ...) le tout sans connaissance technique particulire...

Le support de cours qui suit est largement inspir par le trs bon livre Joomla! 1,5 de Hagen Graf aux ditions Pearson dans la collection Le Campus . Vous pourrez retrouver ces informations et plus encore sur le site de l'auteur :

http://joomla.cocoate.com/fr

Sommaire

1 Concepts fondamentaux 2 Installation 3 Visite guide du site dexemple 4 Adapter Joomla! Langue et modle 5 Structure de ladministration Joomla! ... chapitres retrouver sur Internet...

16 Un site Web complet avec Joomla! Annexe

1.1 Les systmes de gestion de contenus (CMS)

Lexpression Systme de Gestion de Contenus est la traduction de CMS, acronyme dans lequel on trouve Content (contenu) et Management (administration ou gestion). Elle dsigne de faon vague un systme (logiciel) pour grer des contenus dinformation. Une ardoise et une craie forment un CMS ; lencyclopdie libre Wikipedia ou le site de vente aux enchres eBay sont aussi des CMS. Dans ces trois exemples, ce sont des contenus quil faut grer. Dans les deux derniers cas, le nombre de membres participants est phnomnal. Ces membres ont un rle majeur dans un CMS soit en tant quadministrateurs, soit en tant quutilisateurs (users) ou rdacteurs. Nous nen avons pas fi ni avec les acronymes. ct des CMS, il existe des systmes de gestion de donnes dentreprise ERP (Enterprise Resource Planning Systems), des systmes de gestion de la relation client CRM (Customer Relationship Management Systems), des systmes de gestion documentaire DMS (Document Management Systems), des systmes de gestion des ressources humaines HRM (Human Resource Management Systems), etc. Mme les systmes dexploitation tels que Windows ou Linux grent des contenus. Cette inflation demploi de la notion de contenu rend ardue la dfi nition du concept de CMS. Je trouve la dfinition suivante tire de Wikipdia comme trs explicite : Les systmes de gestion de contenu ou SGC (de langlais Content Management System ou CMS), sont une famille de logiciels de conception et de mise jour dynamique de site Web ou dapplication multimdia. Ces derniers temps, cest lacronyme ECMS (Enterprise Content Management System) qui a le vent en poupe en tant que concept gnral englobant tous les autres cits ci-dessus. Joomla! entre dans la catgorie des systmes de gestion de contenus Web WCMS (Web Content Management System), puisquil nest destin qu grer des contenus qui seront consults via un navigateur Web. Dans le langage courant, le terme gestion de contenus sans autre prcision est le plus souvent associ des pages Web pouvant tre gres via un navigateur. Ce qui ne simplifie pas ncessairement les choses.

1.3 Structure fonctionnelle dun CMS

Je vais me baser sur Joomla! pour illustrer la structure dun systme de gestion de contenu Web.

1.3.1 Frontend (Frontal) et Backend

Un systme CMS se base sur le couple Frontend et Backend. Le Frontend (partie vitrine) consiste en la page daccueil et toutes les autres pages du site telles que les voient les visiteurs et les utilisateurs identifis. Le Backend (partie arrire-boutique) contient linterface de gestion des pages par ladministrateur. Les activits de Backend comprennent la configuration, la maintenance, la cration des statistiques et des nouveaux contenus. Le Backend est situ une adresse Web diffrente de la page daccueil du site (donc du Frontend).

1.3.2 Droits daccs

Ds que lon parle dadministration, il faut introduire des rgles pour garantir lutilisation organise des ressources disponibles : ce sont les droits daccs. Dans un CMS, toutes les personnes concernes se voient attribuer un identifiant (nom dutilisateur) et un profi l daccs y est associ. Cohabitent ainsi des utilisateurs simplement reconnus, des crateurs et correcteurs de contenus qui ont plus de droits et un ou plusieurs administrateurs, qui ont accs tout. Selon le profil de droits daccs, la page daccueil du site se prsente diffremment ou bien lutilisateur bnficie dune interface dadministration distincte de la page daccueil.

1.3.3 Contenus
Les contenus peuvent prendre des formes trs diverses : fichiers textes, images, liens, fi chiers audio, donnes extraites dune application comme Google Maps ou une combinaison de ces lments. Pour que la gestion de tous ces contenus soit simplifie, ils sont systmatiquement intgrs des structures daccueil. Les textes sont ainsi rpartis dans des catgories. Ces catgories consistent elles aussi en des contenus qui doivent tre administrables. Les flux dinformations RSS (RSS feeds) sont devenus trs populaires, dautant que la version 7 dInternet Explorer permet enfin de les exploiter. Au dbut 2008, plus de 75 % des internautes se servent encore de ce navigateur. Les flux RSS permettent dintgrer des donnes provenant de sources diverses. Lintgration, le classement, la valorisation, lhybridation et la mise jour de ce genre de contenus externes vont jouer un rle de plus en plus important et finiront par constituer un liant pour fondre ensemble des sites Web distincts au dpart.

1.3.4 Extensions
Les composants, modules, templates et plugins sont runis sous le terme collectif extensions . Ils apportent des enrichissements fonctionnels par rapport ce que propose le noyau de Joomla!.

1.3.5 Templates (modles ou gabarits)

Un template est une sorte de gabarit visuel prt recevoir des contenus. Il dtermine les couleurs, les polices, les tailles de caractre, limage darrire-plan, les espacements et la distribution des souslments dune page. Il constitue donc une mise en page. Un template runit au moins un fi chier HTML dcrivant la structure de la page et un fi chier CSS dcrivant les styles d'affichage. Un

template peut tre beaucoup plus complexe et rendre (afficher) des donnes de Joomla! accessibles de multiples manires ou en autoriser le recyclage.

1.3.6 Plugins
Un plugin est un bloc de code qui vient se brancher en un point prcis de linfrastructure de Joomla! pour en modifier le fonctionnement. Vous pouvez par exemple utiliser un plugin dans un contenu pour charger le contenu dun module dans un texte. Pour pouvoir tendre la fonction de recherche dun site Web un composant supplmentaire, il faut lui associer un plugin. Les plugins peuvent parfois tre vus comme une langage de macros pour Joomla!.

1.3.7 Modules
Un module est une extension du domaine des contenus de la partie utilisateur. Il permet de disposer de nouvelles donnes provenant dun composant. Les modules peuvent tre mis en place des positions prdfinies dans le template. Un module li un composant permet de visualiser le contenu sous un format prcis ailleurs que dans le domaine des contenus du template. Par exemple, le module des dernires infos permet dextraire les titres des cinq derniers articles produits par les composants de contenu et de les transmettre au template. Il existe un autre module pour dterminer le nombre dutilisateurs actuellement connects et afficher le rsultat.

1.3.8 Composants
Joomla! doit tre extensible pour sadapter lvolution des besoins. Le terme composant dsigne dans Joomla! des extensions qui ajoutent de nouvelles fonctions et sont en gnral gres par un domaine ddi de la partie administrative de Joomla!. Les principaux composants apparus ces derniers temps sont une boutique en ligne, une galerie de photos, une gestion de news et un forum de discussion. Les attentes actuelles en ce domaine sont notamment loptimisation des moteurs de recherche, la gestion des droits daccs, les formulaires multipages et les structures de contenus variables. Les composants incarnent la logique de traitement de votre site. Ils affichent les donnes du domaine de contenu de votre site Web (Main Body).

1.3.9 Chanes de production (workflows)

Une chane de production (workflow, souvent non traduit ou bien traduit en flux de travaux) est une manire dorganiser formellement les interactions entre les processus et les personnes dans un objectif commun. Le service Expdition dune entreprise incarne une chane de production ; une recette de gteau en constitue une autre. Du fait quen gnral plusieurs personnes participent la gestion des contenus dun systme CMS, il est capital de dfinir de bonnes chanes de production. Un concept frquemment utilis dans ce contexte est celui de rservoir de tches dun utilisateur. Par exemple, un rviseur voit safficher en permanence la liste des nouveaux articles quil doit relire. Aprs lecture, il valide (ou non) chaque article, qui apparat alors dans la liste dentre du chef de rubrique qui dcide (ou non) de le placer en premire page.

1.3.10 Configuration gnrale et charte graphique

Ce paramtrage concerne toutes les pages du site : texte du titre dans la fentre du navigateur, mots cls pour les moteurs de recherche, options pour autoriser ou non lenregistrement du visiteur sur la page, pour rendre une page temporairement inaccessible, etc.

1.3.11 API
API est un acronyme (Application Programming Interface) anglais qui dsigne une interface de programmation. Il sagit dune convention stricte permettant deux programmes dentrer en interaction et de dialoguer. Il est devenu indispensable de pouvoir faire interagir Joomla! avec dautres programmes voire mme de le tlcommander. Cela ouvre de tous nouveaux horizons. Linterface API constitue la passerelle entre les crations des dveloppeurs tiers et le noyau Joomla!.

1.4 Joomla! en tant que btiment ?

Joomla! est une sorte de bote de construction, qui vous permet, aprs mise en place sur un serveur, de crer puis de faire voluer votre site personnel. Joomla! ressemble une maison que vous dcidez de construire sur le terrain de votre choix et que vous agrandissez ensuite votre rythme. La mtaphore immobilire est donc pertinente. Stop ! Jai encens la mobilit et voil que je parle de choses immobiles ? Ne prenez pas peur. Limmeuble que vous allez btir va rsider physiquement quelque part (sur votre serveur), mais le monde entier pourra venir vous rendre visite quasiment la vitesse de la lumire. Pour rendre un immeuble habitable, il faut ajouter les quipements indispensables que sont le chauffage, llectricit et leau courante. Voil dailleurs une raison pour faire hberger votre site Joomla! sur un serveur qui ne souffrira jamais de pannes secteur puisquil sengage une disponibilit 24h/24 7j/7 . Comme dans une maison, Joomla! distribue lespace en pices : une pice pour accueillir les visiteurs, une pour prparer les repas, une autre pour discuter, un bureau et une pice intime que vous ne montrez quaux vrais amis. Certains prfrent les espaces ouverts, de style loft, qui combinent toutes les fonctions. Quelle que soit votre prfrence en matire de distribution des espaces, il faut ensuite amnager le tout (revtements de sol et de murs, meubles et dcoration) puis faire priodiquement le mnage. Tous vos visiteurs laissent des traces pas toujours dsirables. Pour que vos visiteurs puissent trouver votre maison, il vous faut une adresse que vous ferez connatre au plus grand nombre. Mais il ny a pas de rpertoire gnral sur Internet ; vous devrez donc vous soucier de comment mieux faire rfrencer votre site. Vous jouissez peut-tre dun jardin avec plusieurs portes daccs : un portail principal, une entre par une autre rue voire une porte drobe dans un coin du jardin, rserve aux bons amis. Ou bien vous ntes pas du style construire en dur, et prfrez les camping-cars, les tentes, les htels ou encore les rsidences communautaires. Ou alors vous choisissez de louer et de ne pas vous soucier de tous ces problmes. Si vous reliez les phrases prcdentes votre site Web, vous devinez quil est essentiel de dterminer ce que vous voulez faire, qui vous tes et comment vous dsirez paratre aux yeux du monde. On ne peut pas ne pas communiquer ! En revanche, on peut trop aisment mal communiquer et tre mal compris. Vous planifierez donc votre site Internet avec grand soin. Rflchissez aux textes, mais aussi aux couleurs, aux lments interactifs (calendrier, forum) et prvoyez toujours une zone rserve aux membresiez pas de guider vos visiteurs, sans pour autant les contraindre. Visitez de nombreux autres sites et voyez ce quil en ressort. Prenez le temps de rencontrer des personnes reprsentatives de vos futurs visiteurs. Vous vous fliciterez plus tard davoir enqut pralablement et davoir recueilli leurs avis. Vous serez tonn du nombre de choses auxquelles vous naviez pas pens. Cest une tactique rentable et efficace pour trouver de nouvelles ides et viter les plus grossires erreurs. Consacrez beaucoup defforts sur ces points, car ils sont dterminants pour le succs de votre prsence sur le Web.

1.5 Versions de Joomla!

1.5.1 En constante volution
Comme pour tout logiciel, Joomla! volue par tapes. Lquipe Joomla! a rendu publique le 1er septembre 2005 une feuille de route (roadmap). La premire version publie est la 1.0. Cette nouvelle numrotation visait viter toute confusion avec le logiciel Mambo dont Joomla! est issu. La version 1.0 est une version retouche de la version 4.5.2.3 de Mambo. Les retouches concernaient le changement de nom, quelques erreurs en attente et des correctifs de scurit. lheure o nous mettons sous presse, Mambo est arriv la Version 4.6.2. Dans les deux annes qui viennent de scouler, il y a eu treize versions de Joomla! 1.0.x. Elles ont permis damliorer une foule de petits dtails dans le code. Si vous en avez suivi lvolution, vous aurez remarqu avec joie que Joomla! est devenu de plus en plus fi able.

1.5.2 Convention de versionnage de Joomla!

Les versions de Joomla! obissent la convention X.Y.Z :

X = Numro majeur. Ce chiffre progresse lors de modifications radicales du code source. Une nouvelle version majeure nest en gnral pas compatible avec les versions prcdentes. Y = Numro mineur. Ce chiffre progresse, en cas de modifications importantes au niveau fonctionnel. En gnral, la compatibilit est maintenue (moyennant quelques amnagements). Z = Numro de maintenance. Ce chiffre augmente de 1 ds quune nouvelle version est diffuse suite des corrections et suppressions de failles de scurit. La quantit de modifications est limite et les nouveauts fonctionnelles sont trs rares. La compatibilit est assure avec les versions prcdentes de mmes numros majeur et mineur (mmes valeurs X et Y).

Toute volution au niveau majeur (X) ou mineur (Y) correspond une full release. Dans ce cas prennent place des priodes probatoires en tat Alpha puis Bta. La dure de ces priodes de test nest pas fige et dpend de lquipe de dveloppement. Les versions Bta sont normalement mises disposition pendant trois semaines, ce qui permet aux concepteurs de composants de les adapter la nouvelle version. En revanche, une release de maintenance est immdiatement oprationnelle. La version 1.5.0 correspond la premire version majeure au bout de deux ans. Elle a dabord donn lieu des versions Alpha, puis Bta puis des versions candidates diffusion RC. Les crateurs de composants tiers ont eu le temps dadapter leurs produits la nouvelle version. La communaut a effectu des tests intensifs et les incompatibilits par rapport lancienne version ont t rpertories. Vous pouvez lire les dclarations et les rsolutions de problmes sur le site Web de Joomla! (dans le Bug-Tracker). Nhsitez pas apporter votre contribution si vous dcouvrez une erreur non encore dclare. Vous y trouverez galement la liste des amliorations les plus attendues. Le dveloppement de Joomla! 1.5 a commenc lautomne 2005, sans faire trop de bruit au dpart. Les ides taient dj trs claires cette poque, et la premire version Alpha est sortie en fvrier 2006.

1.5.3 Feuille de route (prvisions dvolution)

Cette feuille de route (roadmap) est bien sr sujette modification ventuelle, mais elle donne une ide de la tendance gnrale. Version Date prvue Remarques Mambo 17 fvrier 2005 Dernire version stable de Mambo 4.5.2 Joomla! Septembre 1.0.x 2005 Joomla! Oct 2006 1.5 Bta 1 Reprise de la version Mambo 4.5.2.3, correction d'erreurs et de failles de scurit, dernire version stable de Joomla! Internationalisation (support complet de UTF8) Localisation de l'interface d'administration dans toutes les langues Plugins utilisateurs Base de donnes : support de MySQL et de MySQLi Systme de transfert FTP permettant de contourner le problme du mode scuris Safe Mode de PHP chez les fournisseurs d'accs Rvision profonde de la structure en vue de permettre de crer des sites Web accessibles avec Joomla! (au niveau infrastructure) Sparation de la logique de programmation de celle de prsentation Optimisation de l'exploitation par les moteurs de recherche (SEF) Mcanisme de mise en cache amlior Joomla! Mai 2007 1.5 Bta 2 Documentation des programmeurs (API, Howto) Optimisation de l'interface API Amlioration du cache Meilleur support des URL pour les moteurs de recherche Introduction de l'infrastructure JavaScript Mootools Intgration du Template accessible Beez dans le noyau Joomla! Juillet1.5 Dcembre RC1-4 2007 Documentation utilisateur Texte d'aide

Suppression d'erreurs Optimisation de scurit et de performances Tests multi-plates-formes et multinavigateurs Joomla! Janvier 2008 1.5 stable Version Pas de date suivante La vraie version stable

Nouveau systme de contrle des accs utilisateurs Versionnage des contenus Installation multisites (plusieurs pages Joomla! avec la mme installation) Mcanisme de mise jour Systme de fichiers virtuel Support de plusieurs bases de donnes

Tableau 1.1 : Feuille de route de Joomla! (dcembre 2007) 1.4.4 Quelques dtails des volutions Comme le Tableau 1.1 le laisse deviner, la version 1.5 est la premire version vraiment complte de Joomla!. Dans un premier temps, lquipe de Joomla! a dabord pris en compte lhritage provenant de Mambo avant de trouver sa propre voie. Les enrichissements incorpors dans Joomla! 1.5 montrent clairement dans quelle direction soriente le logiciel. Internationalisation

Tous les textes statiques peuvent dornavant tre traduits dans des fichiers en plusieurs langues. Cela concerne notamment la partie administrative qui ntait au dpart disponible quen anglais ; Support de l'criture de droite gauche (RTL, par exemple pour larabe, lhbreu, le farsi et lurdu) ; Conversion intgrale vers le jeu de caractres UTF-8 pour coder et afficher tous les caractres au format Unicode 16.

Plugins utilisateurs Ce qui sappelait auparavant Mambot sappelle dornavant un plugin. Aux premiers plugins de contenu (content), ddition et de recherche sont venus se joindre des plugins utilisateur (User), dauthentification, xmlrpc et systme. Ces nouveaux plugins permettent de mettre en place des mcanismes didentification daccs partir de programmes externes. Support de XML-RPC Le mcanisme XML Remote Procedure Call constitue une spcification permettant des logiciels

situs sur des plates-formes diffrentes et des environnements diffrents de communiquer. Cette spcification supporte tous les langages courants de programmation. Vous trouverez des librairies pour convertir le code vers XML-RPC. Joomla! est dot dune telle interface de programmation. Elle permet par exemple un utilisateur de transmettre une image depuis Flickr ou bien de rdiger un article avec OpenOffice pour le diffuser ensuite dans Joomla!. Les dveloppeurs ne sont pas en reste ; ils peuvent dornavant dialoguer avec Joomla! via cette interface depuis un programme Java. Support de plusieurs bases de donnes Joomla! 1.5 est dot dune couche logicielle de sparation grce laquelle il est possible dexploiter plusieurs versions de bases de donnes. Pour chaque installation Joomla!, il nest possible dutiliser quune seule base la fois. lheure actuelle, les deux versions MySQL 4.x et 5.x sont supportes mais dautres SGBD le seront ultrieurement. Systme FTP pour grer le problme du mode scuris de PHP Pour viter les problmes frquents de droit daccs aux donnes, il a t ajout une couche FTP. Elle permet dinstaller de nouveaux composants et deffectuer des transferts par tlchargement PHP et par FTP. Les paramtrages contraignants (mais justifis) imposs par les FAI au niveau du langage PHP rendaient souvent difficile linstallation dextensions et le tlchargement des fi chiers. Mise jour de linfrastructure Joomla! Dans les premires versions, il ny avait pas dinfrastructure au sens strict, cest--dire une bote outils aux limites bien dfi nies pouvant servir dinterface de programmation API. Peu aprs la rupture avec Mambo, il est devenu vident quil fallait modifier quasiment partout lancien code source. Il fallait reformuler et reprogrammer proprement les fonctions de Joomla!. Une infrastructure digne de ce nom (framework) doit tre souple, volutive, totalement spare de la partie affichage et surtout, aise prendre en main. Il faut que les dveloppeurs tiers puissent crer en peu de temps des composants de bonne qualit. Une interface API est donc devenue incontournable. Joomla!1.5 en possde une. Accessibilit Laccessibilit pour les personnes handicapes est un sujet important, puisque depuis dbut 2006 tous les sites gouvernementaux dAllemagne doivent tre conformes aux standards dicts par lorganisation W3C. Joomla!1.5 est livre avec un template offrant une accessibilit complte (il sappelle Beez). La conformit aux standards est ainsi assure. Pour garantir cette accessibilit, il faut se conformer des standards du Web (du code HTML/ XHTML validable) Il faut aussi sparer rigoureusement les contenus (les textes et les images) de la manire de les prsenter, en utilisant des feuilles de styles en cascade CSS. Actuellement, seule la partie visible par les visiteurs est conforme. La partie administrative le sera dans une version ultrieure. Elle est dj pilotable par un non-voyant. Adaptation aux moteurs de recherche Le support des adresses URL exploitables par les moteurs de recherche a t extirp du noyau de Joomla! pour constituer dornavant un plugin. Il devient ainsi den utiliser les possibilits partir de composants dautres programmeurs, ce qui tait trs difficile auparavant. Les projets Google Summer of Code Depuis lanne 2005, la socit Google parraine les programmeurs talentueux dans leurs projets Open Source. Elle attribue chacun 4 500 $ US dans le cadre dun projet appel Summer of Code

(programmation dt). Cela vite des tudiants de chercher un job dt et leur permet de se consacrer totalement leur passion, au profit de la communaut mondiale, et bien sr celui de Google. Chaque anne, Summer of Code donne Google loccasion de se faire connatre, de recueillir de bonnes ides et de reprer de bons programmeurs. Les projets Open Source y trouvent leur compte aussi grce ce brassage dides, aux contacts nous et aux rsultats concrets. Chaque tudiant est suivi par un membre issu de la communaut de chaque projet qui est dsign comme mentor. Les rsultats des projets ont t et sont toujours intgrs peu aprs dans Joomla!. Au cours de lanne 2007, plusieurs nouveaux projets concernant Joomla! ont t ainsi financs par Google. Voici les projets concerns :

Extension du modle des ensembles imbriqus grce des ensembles imbriqus liaisons figes. Enno Klasing (mentor Louis Benton Landry). Un projet permettant dimbriquer des catgories sans limite de niveaux. Interface de messagerie pour diffusion. Aini Rakhmawati (mentor Mateusz Krzeszowiec). Permet de crer des contenus Joomla! en envoyant des courriels. Intgration smantique du Web. Charl van Niekerk (mentor Robert Schley). Production du code gnr par Joomla! dans un format XHTML valide afin de servir de base pour constituer des sites Web accessibles et avancer dans la voie du Web smantique. Go-composant pour Joomla!. Mickael Maison (mentor Andrew Eddie). Intgration des standards gographiques tels que KML et GeoRSS pour exploiter ces donnes dans Joomla!, par exemple pour afficher le domicile de lutilisateur sur une carte. Plugin Eclipse pour modules et composants Joomla!. Muhammad Fuad Dwi Rizki (mentor Laurens Vandeput). Consiste produire un plugin Joomla! appropri lenvironnement de dveloppement Eclipse, ce qui permet de construire des composants Joomla! de faon trs confortable. Composant de recommandation gnrale pour les contenus Joomla!. Faolan CheslackPostava (mentor Samuel Alexander Moffatt). Permet de proposer automatiquement des contenus par analyse du contexte et du moment.

1.5.5 Caractristiques actuelles de Joomla!

Voici la liste rsume des caractristiques actuelles de Joomla! :

code source disponible ; grande base installe dutilisateurs et de dveloppeurs ; systme de gestion de workflow simple ; systme de diffusion des contenus ; gestionnaire de tlchargement et la gestion des fichiers distants ; exploitation des contenus dans le format RSS ; corbeille pour les contenus effacs ; adresses URL compatibles avec les moteurs de recherche ; gestion de bannires publicitaires ; frontal et administration disponibles en de nombreuses langues ; interface d'administration spare de laccs Web normal ; langage de macros pour traiter les contenus (Mambots) ; mcanisme de cache pour assurer une gnration rapide des pages choisies ; installation facile des modles et composants complmentaires ; systme de modles simple mais complet (HTML, CSS, PHP) ; groupes d'utilisateurs hirarchiss ; statistiques de frquentation simples ; diteur de contenus visuel (WYSIWYG) ; gestion de sondages ;

mcanisme dvaluation des contenus.

Vous trouverez de nombreuses extensions sur le site http://extensions.joomla.org. Citons notamment :

gestion de forums ; gestion de galeries de photos ; systme de gestion documentaire ; calendriers.

Et presque 2 000 autres.

1.6 Exemples de sites grs par Joomla!

Pour vous faire une ide de ce que lon peut obtenir en utilisant Joomla!, nous vous proposons une courte liste de sites rels. joomla.fr, France Cest le site de rfrence officiel en langue franaise (voyez aussi joomla.fr).

Figure 1.1 http://www.joomla.fr Travel Shop, Irlande Un site touristique exploitant un systme de menu original provenant de joomlart.com.

Figure 1.2 http://www.travelshopireland.com Mrio Moraes, Brsil Le site Web officiel dun coureur automobile. Le template accueille de nombreux objets anims au format Flash.

Figure 1.3 http://www.mmoraes.com Frank Ldtke, Allemagne Un bel exemple de combinaison de Joomla! avec la galerie de photos Coppermine.

Figure 1.4 http://www.livinggallery.de/ Feuille blanche, France Le site de deux crateurs graphiques.

Figure 1.5 http://www.feuilleblanche.com Urth.tv, USA Un site citoyen sadressant au monde entier !

Figure 1.6 http://www.urth.tv unric.org, Europe Les Nations Unies ont adopt Joomla!. Dans ce cas prcis, il fallait grer treize langues, et certaines devaient safficher en mme temps sur la mme page.

Figure 1.7 http://www.unric.org porsche.com.br, Brsil Pour finir en beaut, voici le site de limportateur brsilien des voitures Porsche. Il a accompagn

toute lhistoire de Joomla! depuis lpoque de Mambo et vient de basculer vers la version Joomla! 1.5.

Figure 1.8 http://www.porsche.com.br Vous trouverez dautres sites propulss par Joomla! en vous rendant dans la section Forum du site www.joomla.org. Cherchez le terme Showcase .

2 Installation
Installer Joomla! ne prend que cinq minutes la premire fois et mme moins ensuite. Mais pour russir cette installation, il faut dabord mettre en place localement une sorte dInternet priv runissant un serveur Web, avec support du langage PHP, et un systme de gestion de base de donnes (SGBD) exploitable par Joomla!. Les fichiers de Joomla! seront ensuite installs dans cette structure de dossiers puis configurs via un installateur interface Web. Il sagit dun exemple typique denvironnement client-serveur.

2.1 Les systmes client-serveur 2.2 Prrequis techniques pour Joomla! 2.3 lments requis pour installer un systme Joomla! 2.4 Dabord localement 2.5 Prparation locale de linfrastructure dexploitation 2.6 Sur un serveur virtuel en rseau 2.7 Installation de Joomla!

2.1 Les systmes client-serveur

Pour vous faire une ide gnrale de ce qui se passe en coulisses, parcourons les tapes successives de laccs dun ordinateur client un site Web propuls par Joomla! : 1. 2. 3. 4. 5. 6. 7. 8. 9. tablissement dune connexion Internet via un fournisseur daccs. Saisie de ladresse Web (URL) dans le navigateur client. Entre en contact du navigateur avec le serveur Web. Le serveur Web retransmet une requte son interprteur de langage PHP qui excute les commandes PHP appropries Joomla!. Linterprteur PHP transmet les donnes dentre la base de donnes. Linterprteur PHP gnre du code dhabillage HTML ou XHTML (selon le modle/template utilis) et retransmet les donnes de la base avec lhabillage au serveur Web. Le serveur Web envoie la page complte au navigateur du client. Le navigateur interprte les balises de style HTML et CSS et intgre les donnes externes (images, lments Flash, etc.) en allant les chercher un un auprs du serveur Web. Pendant le chargement des diffrentes ressources, le navigateur ralise le plus fidlement possible le rendu de la page, cest--dire son affichage.

Vous comprenez que l'affichage dune page dun site Web Joomla! suit de nombreuses tapes. Plusieurs dentre elles ne concernent dailleurs pas Joomla! lui-mme.

2.2 Prrequis techniques pour Joomla!

Joomla! ncessite la configuration suivante :

Un serveur Web oprationnel, par exemple Apache partir de la version 1.13.19 ou

Microsoft IIS. Le langage de script PHP partir de la version PHP 4.3. Le support de MySQL et de Zlib intgr PHP. Zlib est une librairie de fonctions qui permet PHP de lire des paquets de donnes compresses au format ZIP. Le systme de gestion de bases de donnes MySQL partir de la version 3.23.x. Dans le cadre de lutilisation du jeu de caractres Unicode, il faut utiliser MySQL partir de la version 4.1.x.

2.3 lments requis pour installer un systme Joomla!

Il vous faut dabord runir tous les lments indiqus ci-dessus pour mettre en place un systme Joomla!. Vous disposez normalement dau moins un PC avec un navigateur Web et une connexion Internet. Au niveau du serveur Web, du langage PHP et de la base de donnes, de nombreux choix sont possibles. Vous pouvez en effet :

installer la totalit du systme localement sur votre PC ; implanter le systme sur un intranet dentreprise ou un serveur de lentreprise ; louer un serveur virtuel (partag) un fournisseur daccs ; louer ou acheter un serveur ddi un fournisseur daccs (avec accs la racine). installer le serveur Web et le gestionnaire de bases de donnes sur des machines distinctes. diffrentes marques de serveurs Web ; diffrentes versions de linterprteur PHP ; diffrentes versions du gestionnaire de bases de donnes MySQL.

Mieux encore, vous pouvez :

Vous pouvez enfin exploiter :

De plus, tous ces composants sont utilisables sur plusieurs systmes dexploitation. Cette grande libert dans le choix des ressources techniques peut effrayer au premier contact. Passons donc en revue quelques situations typiques.

2.3.1 Environnement de test local

Vous tes chez vous ou votre bureau et vous voulez construire un site Joomla!. Systme dexploitation Windows
Variante 1

Dans Windows XP Professionnel et Vista Ultimate, vous disposez en standard dun serveur Web appel Internet Information Server (IIS). Il ne reste plus qu y ajouter le langage PHP et un gestionnaire de bases de donnes.

Variante 2

Vous installez un paquetage prconfigur de type XAMPP et vous pouvez immdiatement travailler. Systme dexploitation Linux Dans ce cas, tout dpend de la distribution. Toutes permettent dinstaller facilement via la souris les paquets logiciels de Apache, PHP et MySQL. Dans certaines distributions, ces diffrents composants sont installs ds le dpart.
Variante 1

Vous vous servez des programmes qui ont t installs avec la distribution.
Variante 2

Vous installez un paquetage prconfigur de type XAMPP (LAMPP dans ce cas) et vous pouvez immdiatement travailler. Systme dexploitation Mac OS X Vous disposez en standard dun serveur Web (Apache), mais il faut encore lactiver. En revanche, le langage PHP nest pas install. Il nexiste aucune version de PHP officielle pour Mac OS X. Vous pouvez en revanche mettre en place un module Apache-PHP. Il existe galement des versions de MySQL pour Mac OS X, que vous devrez tlcharger.
Variante 1

Vous utilisez le serveur Web Apache dj install et vous ajoutez les composants manquants.
Variante 2

Comme dans les deux autres systmes, vous vous procurez le paquetage prconfigur XAMPP dans sa version Mac OS X. Vous linstallez et cest prt. Dans lenvironnement Mac OS X, vous pouvez prfrer la version ddie qui sappelle MAMPP.

2.3.2 Environnement de production

Vous avez ici aussi plusieurs possibilits. Serveur virtuel en location Vous signez un contrat de location de serveur Web auprs dun fournisseur daccs avec une fonction de gestion de bases de donnes, le support du langage PHP et souvent aussi votre propre nom de domaine. Vous disposez alors dun environnement permettant dinstaller Joomla!. Vous devez vrifier avec votre fournisseur quelles versions de PHP et de MySQL il peut mettre en place. Il arrive que le fournisseur propose Joomla! prinstall avec plusieurs templates. Il ne vous reste plus alors qu activer Joomla! la souris pour en profiter. Serveur ddi Vous louez auprs dun fournisseur un serveur ddi et vous y installez un systme dexploitation votre convenance. Vous tes ladministrateur du systme et vous pouvez vous en servir comme si la machine tait pose chez vous ou dans votre bureau.

2.4 Dabord localement

Avant de plonger dans le monde sauvage dInternet, nous vous conseillons de vous entraner la maison sur votre PC. Cela vous offre lavantage de ne pas subir les ventuels ralentissements de votre connexion Internet. Mais vous avez dj peut-tre chez vous un petit rseau reliant plusieurs PC. Vous pouvez alors installer Joomla! sur un PC (qui devient le serveur) et y accder depuis un autre PC (le client). Pour vous pargner de nombreux tlchargements, nous fournissons tous les programmes dont vous avez besoin sur le CD-ROM. Les diffrents paquetages logiciels sont indiqus dans lAnnexe. Ces programmes conviennent une installation locale et vous permettent de raliser tous les exercices prsents dans le livre. Rappelons nanmoins que ces logiciels sont en volution continuelle. Vous pourrez sans doute rcuprer des versions plus rcentes sur les sites Web officiels des diffrents composants. Attention: Lorsque vous dploierez Joomla! sur un serveur Web rel (public), vrifiez que vous installez la version stable la plus rcente et compatible avec vos donnes afi n de profi ter des derniers correctifs de scurit. Ninstallez pas dans ce cas de version prliminaire.

2.5 Prparation locale de linfrastructure dexploitation

Pour installer Joomla! localement sur un PC, vous devez avant tout mettre en place linfrastructure logicielle dont le logiciel a besoin : Apache-MySQL-PHP.

2.5.1 Sous Windows

Windows (XP et Vista) est rput pour sa convivialit et son norme diffusion, dans la mesure o plus de 90 % des PC au monde en sont dots. Les trois applications Apache, MySQL et PHP ne sont pas fournies par Microsoft, puisquelles manent du monde du logiciel libre.

Figure 2.1 Gestion des utilisateurs sous Windows. Vous pouvez installer chacun des trois logiciels lun aprs lautre, mais il existe des paquets prconfigurs qui vous simplifient la vie. Sous XP comme sous Vista, vous devez avoir ouvert la session de travail en tant quadministrateur. En cas de doute, ouvrez le module de gestion des utilisateurs par DMARRER > PARAMTRES > PANNEAU DE CONFIGURATION > COMPTES DUTILISATEURS et modifiez vos droits (voir Figure 2.1). Sous Vista, choisissez DMARRER > PANNEAU DE CONFIGURATION > COMPTES DUTILISATEURS ET PROTECTION DES UTILISATEURS. XAMPP pour Windows XAMPP est un projet de Kai Seidler et Kay Vogelgesang. Ces deux collgues produisent depuis plusieurs annes dj un environnement de dveloppement complet partir des ingrdients Apache, MySQL, PHP, Perl et plusieurs autres extensions appropries puis mettent le fruit de cette synthse disposition sur leur site Web au format ZIP pour plusieurs systmes dexploitation. Cela constitue un norme avantage pour vous comme pour moi, puisque cest Joomla! qui nous intresse ici, et quil nous importe de ne pas perdre de temps avec linfrastructure quil lui faut. Le programme peut mme tre dsinstall par simple clic sur votre PC sous Windows. Passons maintenant aux choses concrtes : linstallation. Commencez par rcuprer le fi chier nomm xampplite-win32-1.6.5 depuis le CD-ROM ou depuis le site Web (http://www.apachefriends.org). Vous dcompressez larchive par double-clic sur le nom de fi chier (voir Figure 2.2). Vous pouvez dsigner directement une autre unit de disque. Le rsultat est une arborescence de dossiers dont la racine se nomme xampplite (voir Figure 2.3).

Figure 2.2 Extraction vers le disque C:

Figure 2.3 Lexplorateur Windows dans Vista. Double-cliquez sur le programme appel xampp-control.exe situ dans le dossier xampplite. Utilisez ensuite les boutons START pour dmarrer Apache, puis MySQL. PHP sera dmarr en mme temps que le serveur en tant que module Apache (voir Figure 2.4). Sachez que XAMPP ne cre aucune entre dans la base de registre de Windows et nutilise aucune variable systme. Il peut arriver que le pare-feu Windows vienne bloquer votre enthousiasme. Il peut par exemple vous avertir que vous essayez de lancer deux serveurs et vous demande de confirmer. Confirmez que vous ne voulez plus que votre programme soit bloqu par le pare-feu (voir Figure 2.5). Sous Vista, vous devez confirmer dans une seconde bote.

Figure 2.4 Le panneau de commande de xampp-control.exe.

Figure 2.5 Bote davertissement du pare-feu de Windows Vista. Il faut maintenant tester laccessibilit du serveur. Dans votre navigateur Web, saisissez ladresse locale dans lun des deux formats suivants :
http://127.0.0.1/ http://localhost/

Vous devez voir safficher la page daccueil de XAMPP. Cliquez sur le lien intitul FRANAIS pour accder la page suivante :

Figure 2.6 Page daccueil de XAMPP sous Windows. Le rpertoire racine des documents de votre page daccueil est :
[disque]\xampplite\htdocs

Ce rpertoire contiendra toutes les pages qui devront tre accessibles depuis dautres machines sur Internet. Parcourez le fi chier readme_fr.txt pour connatre les dtails au sujet des mots de passe requis et dcouvrir dventuelles remarques relatives la scurit. La dsinstallation est fort simple. Aprs avoir arrt les deux serveurs, vous effacez le contenu du rpertoire de xampplite. Attention: Si le serveur Web Apache ne russit pas dmarrer depuis XAMPP lite, il est possible quun autre service utilise dj le port 80. Cest par exemple le cas de loutil de tlphonie Skype. Dans les anciennes versions, il occupait le port 80 et empchait ainsi un autre service dy accder. Affichez les options de Skype pour modifi er le numro de port utilis. Vous pouvez aussi dmarrer XAMPP lite avant Skype.2007

2.5.2 Linux
Sous Linux, les choses sont souvent trs simples. Plusieurs distributions sont dj dotes de configurations standardises. Le trio Apache-MySQL-PHP est en gnral dj install et nattend que dtre dmarr. Vous pouvez aussi installer la version Linux de XAMPP. Daprs moi, il est plus logique dinstaller les programmes dorigine un un. Ces installations sont trs simples puisquelles se droulent dans le gestionnaire de paquets. SuSE (10.x), OpenSuSE Sous SuSE et OpenSuSE, le programme YaST permet de sassurer que Apache, MySQL et PHP sont dj en place. Si ce nest pas le cas, il suffi t de slectionner les paquets correspondants pour

installation et de laisser faire YaST. Les paquets logiciels concerns sont les suivants :
apache2, apache2-devel, apache2-mod_php5 mysql, php5-mysql

Reprez ces paquets dans linterface de YaST (voir Figure 2.7) sur les supports de la distribution ou sur des pages Web ddis.

Figure 2.7 Le Gestionnaire de paquets YaST. Dmarrez le serveur Web Apache ainsi :
/etc/init.d/apache2 start

Dmarrez ensuite le SGBD MySQL ainsi :

/etc/init.d/mysql start

Vous arrtez les deux programmes en remplaant dans la commande la mention start par stop. La mention help rappelle les paramtres autoriss. Debian/Ubuntu Dans le cas de Debian (et de ses drivs, tels que Ubuntu), loutil de gestion dinstallation est apt.
apt-get install [nompaquet]

Les paquets installer sont les suivants :

apache-common. Fichiers de support pour tous les serveurs Apache. php5. Langage de script du ct serveur imbriqu dans le HTML. mysql-common. Fichiers principaux de MySQL (par exemple /etc/mysql/my.cnf). mysql-server. Excutables du serveur de base de donnes.

Vous trouverez ces paquets via apt sur Internet ou sur les CD/DVD de la distribution. Dmarrez ensuite Apache puis MySQL par les deux commandes indiques plus haut pour SuSE.

Mise en place dun serveur chez un fournisseur daccs Lorsque vous avez dcid de louer linfrastructure dun site Web chez un fournisseur, vous avez normalement le choix entre plusieurs distributions Linux et un accs en mode Commande au systme. Le systme est normalement prconfigur avec tous les paquets logiciels et fichiers de configuration ncessaires. Le paramtrage se base en gnral sur un outil ddi interface Web comme Confixx ou Plesk qui permet notamment de dmarrer, darrter et de configurer les services Apache et MySQL

2.6 Sur un serveur virtuel en rseau

Ce thme est rendu plus complexe, en raison de la grande disparit des configurations proposes par les nombreux hbergeurs de sites Web, mme si la plupart utilisent le trio gagnant Apache-PHPMySQL. Tous nutilisent pas la mme version et les outils dadministration de lespace Web sont trs divers (Confins, Visas, etc.). Voici les principaux points surveiller :

l'tat actif ventuel dun mode PHP scuris (Saxe Mode) dans le fi chier phonique (PHPSaxe) ; l'ventualit dune non-conversion des adresses URL par Apache cause de la dsactivation de sa fonction Rewrite Engine ; les droits d'accs aux sous-dossiers (permissions) qui sont dfinis autrement sous Linux et sous Windows.

Lapproche qui est en gnral la plus susceptible de vous mener au succs est la suivante : 1. Rcuprez le fi chier Joomla_1.5.x-Stable-fr.zip (la plus rcente version stable) sur votre PC local et dsarchivez le contenu dans un dossier temporaire. 2. Transfrez les fichiers de larchive par FTP sur le serveur Web dans un dossier accs non restreint. Le nom du dossier est souvent htdocs, public_html ou encore html. Vous pouvez crez un sous-dossier pour Joomla!. La plupart des hbergeurs autorisent le renvoi vers un sous-dossier partir du nom de domaine. Ce nom est capital, car cest celui que devront indiquer les visiteurs de votre site. 3. Vous devez dcouvrir le nom de votre base de donnes. La plupart des hbergeurs mettent une ou plusieurs bases de donnes disposition dans le cadre du forfait. Parfois les identifiants dadministrateur et de base et les mots de passe sont fi gs, parfois ils doivent tre crs, et parfois ils existent dj, mais sont personnalisables. Vous intervenez ce niveau via un outil interface Web. La figure suivante donne un exemple dun tel outil. Notez ces informations qui vous seront ncessaires pour installer Joomla!.

Figure 2.8 Exemple doutil de configuration Web. Une fois que vous avez transfr les donnes sur le serveur et disposez des informations daccs ( la base notamment), vous pouvez vous engager dans linstallation de Joomla!.

2.7 Installation de Joomla!

Pour installer Joomla!, procurez-vous la plus rcente version stable, par exemple Joomla_1.5.xStable.tar.gz. Stockez le fichier dans un dossier spcifique de votre systme.

2.7.1 Choix du dossier dinstallation

Vous devez choisir entre implanter le programme Joomla! directement dans le dossier racine des documents du serveur (/xampplite/htdocs) ou dans un sous-dossier. Le choix influe sur ladresse publique que devront saisir les visiteurs pour accder votre page daccueil. Exemple Si vous installez Joomla! directement dans le sous-dossier /htdocs, vous accdez votre page d accueil en indiquant le nom de votre domaine du style http://www.monsite.fr (ou http://localhost/ pour les essais locaux). Si vous crez un sous-dossier dans /htdocs/ du type /htdocs/Joomla150/, puis y implantez les fichiers de larchive, il faut ensuite indiquer http://localhost/Joomla150/ pour accder au site. Pour les essais locaux, cela ne pose pas de problme, mais ladresse est moins facile mmoriser pour les visiteurs. Votre environnement dexploitation local xampplite sous Windows installe quelques fichiers HTML et quelques sous-dossiers dans /htdocs, par exemple pour la page daccueil de xampplite (voir Figure 2.6). Il en va de mme sous Linux, avec dinfimes variations selon la distribution et les rglages du serveur. Rpertoire racine Nous vous proposons dopter pour lapproche du sous-dossier. Crez dans /xampplite/htdocs, un sous-dossier nomm joomla150. Sous Windows, utilisez lExplorateur et, sous Linux, la ligne de commandes ou votre navigateur de fichiers prfr (Konqueror, Nautilus, Midnight Commander) :
[Installation de XAMPP]/htdocs/joomla150/

Aprs cette opration, la structure arborescente devrait se prsenter ainsi (exemple sous Windows en Figure 2.9).

Figure 2.9 Le dossier devant recevoir Joomla!. Si vous tentez maintenant daccder ladresse locale http://localhost/joomla150/, vous voyez avec Xampplite une page vide (voir Figure 2.10).

Figure 2.10 Affichage du sous-dossier vide par Apache. Sous Linux ou si la configuration est diffrente, vous recevrez peut-tre un message vous indiquant que vous navez pas accs en criture ce dossier. Cette situation dpend de la configuration du serveur Web qui empche, pour des raisons de scurit, l'affichage du contenu des dossiers. En effet, un attaquant potentiel pourrait se servir de ces informations pour prparer un mauvais coup. Souvent, vous ne pouvez mme pas au dpart aller modifier le paramtre dans le serveur Web Apache car le fichier est protg. Si vous avez supprim cette interdiction, laissez malgr tout la protection prcdente en vigueur (masquage des contenus des dossiers). Dsarchivage Vous pouvez maintenant extraire les fichiers de larchive (paquet) Joomla! et les placer dans le sous-dossier que vous venez de crer (y compris tous les sous-dossiers, tels quels). Le fichier darchive est au format Tarball compress. Sous Windows XP ou Vista, vous avez doffice accs au contenu dans lexplorateur. Dans les anciennes versions de Windows, vous devez disposer dun utilitaire du style TUGZip (www.tugzip.de). Cette structure est la mme quelle que soit la plate-forme, seul l'affichage pouvant varier. La figure suivante montre la fentre dun logiciel client FTP. Le volet gauche est le disque local et le volet est le serveur Web. Installateur Web de Joomla! partir de maintenant, tout va aller trs vite, car Joomla! est dot dun installateur fonctionnant dans votre navigateur. Allez ladresse http://localhost/Joomla150/.

Figure 2.11 Les fichiers de Joomla! installs.

Figure 2.12 Transfert de Joomla! via FTP sur un serveur. tape 1 Choix de la langue Linstallateur vous demande en franais de choisir votre langue. Vous tes face la premire des sept tapes de linstallation. Une fois votre choix fait, cliquez sur le bouton SUIVANT en haut droite (voir Figure 2.13).

Figure 2.13 Installateur Choix de la langue. tape 2 Vrification de prinstallation Vous passez alors ltape de vrification (voir Figure 2.14). Cette prcaution permet de vrifier que lenvironnement logiciel convient linstallation de Joomla!.

Figure 2.14 Installateur Vrification de prinstallation. Si vous voyez une grande majorit de tmoins verts, cest bon signe. Les dtails varieront selon votre configuration. Linstallateur de Joomla! tient comptes des options de configuration du serveur Web Apache, de PHP et du systme dexploitation. Vous devez notamment vous souciez des droits daccs en criture si vous utilisez un systme de type Unix (Linux, Mac OS X). Intressez-vous particulirement au fichier nomm configuration.php qui est gnr en fin dinstallation avec des valeurs spcifiques. Si linstallateur na pas le droit dcrire dans le dossier concern, Joomla! ne peut pas gnrer ce fichier et linstallation choue. Prenez donc le temps de configurer correctement les droits daccs. Vous pouvez alors cliquer sur le bouton VRIFIER NOUVEAU. Attention: Tous les systmes dexploitation actuels (Windows, Linux, Mac OS X) sont multi-utilisateurs et tous disposent dun mcanisme de contrle des accs aux fichiers et aux dossiers utilisant plusieurs niveaux : lecture, criture, lecture/excution, modifi cation et accs complet. Les dtails des droits

daccs varient dun systme lautre. Dans la ligne des systmes Windows, une ligne de dmarcation peut tre trace entre les systmes antrieurs Windows NT (dont Windows 98 et Me) et les systmes postrieurs NT (XP et Vista). partir de NT, les dossiers, les fichiers et les processus sont grs par des listes de contrle daccs ACL. Si ces listes ACL ne sont pas dfinies, tous les utilisateurs ont un accs complet tous les objets. Voil pourquoi vous naurez au dpart aucun problme pour exploiter XAMPP et Joomla! sur un tel systme. En revanche, dans Vista, la scurit a t renforce pour lexcution des processus. Cest pourquoi vous devez en gnral autoriser explicitement lexcution dun serveur Web et dun gestionnaire de bases de donnes. Dans les systmes de style Unix (Linux, Mac OS X) les droits daccs sont grs pour trois groupes dutilisateurs (le propritaire, son groupe et les autres) avec les niveaux lecture, criture et excution. Vous modifiez les attributs de droits daccs des utilisateurs au moyen de la commande chown et les droits daccs aux fi chiers au moyen de la commande chmod. Votre outil de transfert FTP dispose de ces deux commandes (il suffit en gnral de faire un clic droit sur le nom du fi chier dont vous voulez modifier les droits). Pour une explication complte, voyez par exemple la page suivante : http://fr.wikipedia.org/wiki/Permissions_Unix Dans le cas dun serveur partag chez un fournisseur daccs, il peut arriver que le serveur Web soit configur avec des droits et des permissions diffrents de ceux dont dispose lutilisateur de FTP. Lorsque vous transfrez un fi chier, il hrite des droits daccs du serveur Web (par exemple avec lutilisateur wwwrun). Il peut arriver que vous ne puissiez plus ensuite supprimer le fichier partir de votre compte dutilisateur FTP (par exemple, Bertrand). La raison en est que lutilisateur FTP nest pas dans le mme groupe dutilisateurs que le serveur Web. Si vous optez pour la solution rapide XAMPP lite sous Windows, vous devriez obtenir le mme rsultat que dans les figures de ce livre. Cliquez sur le bouton SUIVANT pour passer ltape de la licence. tape 3 Licence Tout logiciel est diffus avec une licence. Dans le cas de Joomla!, il sagit de la licence de logiciel libre GNU/GPL dans sa version 2.0 (voir Figure 2.15). Attention: Vous trouverez une traduction franaise non officielle de la licence ladresse suivante : http://www.linux-france.org/article/ these/gpl.html Prenez le temps de parcourir ce texte. Il sagit dun des textes les plus connus dans le monde du logiciel.

Figure 2.15 Installateur Licence. tape 4 Base de donnes Ltape suivante propose un formulaire concernant les paramtres daccs la base de donnes (voir Figure 2.14). Dans lenvironnement xampplite, vous pouvez exploiter autant de bases que ncessaire. Un utilisateur existe avec le nom root sans mot de passe. Dans le SGBD MySQL, lutilisateur nomm root est ladministrateur. Il a plein accs ce systme. Linstallation sans dfinir de mot de passe est une brche de scurit qui nest acceptable que lors dune installation locale, en vue de prendre en main le systme rapidement. Une fois votre site prt tre publi, vous devez absolument le protger au moyen dun mot de passe (http://localhost/security/). Uniquement dans le cadre dune installation locale, vous pouvez spcifier les valeurs suivantes :

nom du serveur : localhost ; nom d'utilisateur : root ; mot de passe : [laisser vide mais attention la scurit !].

Il vous reste encore choisir le nom de la base de donnes. Dans une installation locale XAMPP, vous pouvez dfinir plusieurs bases auxquelles lutilisateur root aura accs. Dans un environnement de production sur un serveur distant, une limite au nombre de bases de donnes vous sera sans doute impose. De plus, les paramtres daccs vos bases sont prdfinies par le fournisseur daccs. Nous pouvons dans notre situation indiquer le nom dune base qui nexiste pas encore (joomla150). Cliquez ensuite dans le triangle vert des paramtres avancs.

Figure 2.16 Installateur Configuration de la base de donnes. Vous pouvez alors choisir de supprimer ou de sauvegarder les tables de donnes dune installation Joomla! antrieure en remplaant le prfixe actuel par le prfixe bak_. Le prfixe de table MySQL est un paramtre trs pratique. Il est ajout en dbut de nom de toutes les tables gnres par linstallateur ; il est ainsi possible de distinguer les tables des diffrentes bases. Par dfaut, linstallateur propose jos_. Ce prfixe sert notamment lorsque lhbergeur ne fournit quune seule base de donnes. Dans ce cas, le prfixe est le seul moyen de distinguer les tables lorsque vous crez deux sites Web avec Joomla!. Vous pouvez ainsi jongler avec les tables, comme dans jos_dubois_ ou jos_dupont_. Conservez le prfixe propos, jos_. Ce prfixe permet ensuite de distinguer les donnes sauvegardes (bak_). tape 5 Configuration FTP partir de la version 1.5, Joomla! permet dviter les problmes de droits daccs provoqus par un ventuel mode scuris PHP (Safe Mode). Vous pouvez dornavant exploiter les fonctions FTP de PHP pour transfrer et grer les donnes distantes. Cela ne vous concerne pas dans le cas dune installation locale de XAMPP lite. En revanche, si vous comptez installer Joomla! sur un serveur Web partag, spcifiez les paramtres FTP ici, tels que vous les a transmis votre fournisseur. Sil autorise cette fonction, vous avez galement pour des raisons de scurit tout intrt crer des comptes FTP diffrents pour vous en tant quutilisateur et pour Joomla!. Nautorisez le compte FTP Joomla! que pour le dossier Joomla! correspondant (voir Figure 2.17).

Figure 2.17 Installateur Configuration FTP. tape 6 Configuration du site Cette importante tape de configuration de Joomla! compte trois parties. Dans la premire partie, vous devez fournir le nom de votre site Web. Il apparatra par exemple dans la barre de titre du navigateur de vos visiteurs. Il est galement utilis en diffrents autres endroits, par exemple dans les courriels de confirmation dinscription. Dans notre exemple, nous choisissons le nom Joomla! 1.5.0 (voir Figure 2.18).

Figure 2.18 Installateur Configuration du site (mot de passe). Dans la deuxime phase, vous devez dfinir les chemins daccs au site Web, ladresse de messagerie de ladministrateur et son mot de passe. Notez bien ce mot de passe et placez votre note dans un endroit sr (ne la collez pas sur lcran ni sous le clavier). Dans la dernire phase, vous pouvez dcider quelles donnes doivent tre disponibles ds le dpart dans Joomla! (voir Figure 2.19).

Figure 2.19 Installateur Configuration du site (donnes dexemples). Installation des donnes dexemples Linstallateur de Joomla! vous invite fortement installer les donnes dexemples pour peupler votre site Web initial. Cela vous permettra dexplorer le programme sans crainte. Charger le script SQL local Lorsque vous avez construit un site Web Joomla! local, vous aurez besoin de transfrer les donnes vers votre site sur Internet. Cette option permet dindiquer les fichiers .sql de la version locale qui contiennent vos donnes Joomla!. Le contenu des fichiers doit concider parfaitement avec le schma de base de donnes de Joomla! 1.5 et utiliser le codage de caractres UTF8. Nous donnons dautres dtails ce sujet dans lAnnexe. Charger le script de migration Cette option permet de convertir une ancienne installation Joomla! 1.0.x vers la version 1.5. Nous dcrivons la migration dans lAnnexe. Vous constatez que linstallateur propose par dfaut dinstaller les donnes dexemples. Acceptez cette option car nous dcouvrirons Joomla! en nous servant de ces exemples. Cliquez donc sur le bouton INSTALLER LES DONNES DEXEMPLES. Linstallateur sexcute puis modifie laffichage (voir Figure 2.20). Observez bien car il nest pas trs vident de sassurer que lopration a russi. Le bouton disparat au profit dune petite fentre contenant du texte.

Figure 2.20 Installateur Confirmation dinstallation des donnes dexemples. Il ne reste plus qu cliquer sur le bouton SUIVANT pour que vos donnes soient prises en compte. tape 7 Terminer Cette dernire tape vous flicite pour avoir russi linstallation (voir Figure 2.21). Lisez bien le message crit en rouge et en gras. Vous devez absolument aller supprimer le sous-dossier nomm installation (dans xampplite\htdocs\joomla150). Si vous ne le faites pas, votre site Web ne pourra pas fonctionner.

Astuces: Les lecteurs qui dsireraient voir comment construire un site Web partir de zro trouveront une rponse au Chapitre 16. Info: Un fi chier nomm configuration.php a t gnr dans votre dossier joomla150. Si vous devez relancer linstallation, il faut supprimer ce fichier avant de tenter de supprimer le dossier principal dinstallation. Cela permet linstallateur de redmarrer partir de zro lorsque vous demanderez accder depuis votre navigateur ladresse laquelle se situent les donnes Joomla!. Votre identifiant dadministrateur est toujours admin. Vous avez bien not le mot de passe ? Info: Si vous avez oubli ou perdu le mot de passe, lAnnexe donne une solution.

Figure 2.21 Installateur Terminer. Linstallation est termine. Vous pouvez maintenant personnaliser votre site et y insrer des contenus. Vous avez le choix entre accder la page daccueil (bouton SITE en haut droite) ou la partie administrative (bouton ADMIN). Allez donc dabord voir quoi ressemble la partie publique de votre site en cliquant sur SITE. Si vous navez pas encore supprim le sous-dossier installation, un message vous redemande de le faire. Vous pouvez ensuite actualiser la page. Le rsultat est tout fait encourageant (voir Figure 2.22). Prenez possession de votre proprit, cliquez, trouvez vos repres. Ce site dexemple prsente de nombreuses fonctions de Joomla!. Nous allons les dcouvrir une une dans le chapitre suivant.

Figure 2.22 La page daccueil du site juste aprs installation de Joomla!.

3 Visite guide du site dexemple

Votre site est install et paramtr. Nous pouvons maintenant aller voir ce quil permet denvisager. Au premier coup doeil, la page peut sembler assez charge. Il sagit de la page publique (Frontend). Il existe aussi une page daccueil pour ladministration (Backend). Seule la partie publique est accessible aux visiteurs, comme une boutique. La partie arrire, latelier, nest connue que des administrateurs, auteurs et rdacteurs de contenus.

3.1 Partie publique Frontend 3.2 Administration (Backend)

3.1 Partie publique Frontend

Si vous analysez la page, vous dcouvrez des rgions distinctes qui correspondent autant de fonctions. Le choix dimplanter des donnes dexemples lors de linstallation permet de visualiser leffet de ces diffrentes fonctions. Pour simplifier la dcouverte, nous avons ajout des lgendes aux diffrentes sections, dans la figure suivante.

Figure 3.1 Structure de la page daccueil du site dexemple. Lart de la conception Web a comme objectif de permettre au visiteur de reprer le plus vite possible les lments essentiels, en ignorant dans un premier temps ce qui lest moins, en somme dorganiser le placement des informations de faon logique, agrable et facile apprhender. Le rsultat est toujours un compromis entre richesse fonctionnelle et esthtique.

Larchitecture dune page Web peut faire penser un journal ou un portail comme celui de Yahoo! ou de Wanadoo. Des colonnes gauche et droite proposent des encadrs (modules) aux contenus prdtermins. La partie centrale (Main Body) reoit les informations. La mise en page est dfinie par un template (modle). Vous pouvez changer de modle sans changer de contenu ou bien modifier le template courant, souplesse que la presse quotidienne envie au Web. Dcouvrons la maquette dexemple. Elle contient cinq catgories de sections :

des menus ; des contenus ; des publicits ; des fonctions complmentaires ; des lments dcoratifs.

3.1.1 Les menus

Les menus doivent permettre au visiteur de naviguer sur le site le plus aisment possible. Il existe des menus diffrents selon les besoins. Joomla! propose dans lexemple six menus prdfinis, et vous pouvez en ajouter dautres ou en masquer certains. vrai dire, un des menus nest pas visible dans lexemple. Il sagit du type usermenu, qui nest visible que par les utilisateurs enregistrs une fois quils ont ouvert une session. Le menu suprieur (topmenu)

Figure 3.2 Le menu suprieur. Joomla! propose tout en haut de page un menu horizontal dont le nom technique est topmenu (voir Figure 3.2). Il doit permettre au visiteur daccder depuis nimporte quelle page aux contenus essentiels : retour la page daccueil, actualits, contact et liens. Le menu principal (mainmenu) Le menu principal (nom technique mainmenu) est le moyen de navigation principal de toute page (voir Figure 3.3). Ce menu doit toujours proposer un lien pour revenir la page daccueil (Home) et se trouver au mme endroit sur toutes les pages. Il participe au confort de la visite en vitant lutilisateur de se perdre dans le ddale de pages. Vous disposez aussi de la technique des miettes de pain. (breadcrumbs) Elle consiste en liens dposs sur les pages pour revenir en arrire dans la navigation ou se diriger vers des sections apparentes la page actuelle.

Figure 3.3 Le menu principal.

Les menus complmentaires (othermenu) Vous pouvez ajouter un menu complmentaire (nom technique othermenu) en diffrents points prdfinis (des positions de modules). Lajout de tels menus dpend des particularits des pages. Un site de e-commerce aura par exemple souvent besoin de menus complmentaires.

Figure 3.4 Un menu complmentaire. 3.1.2 Les contenus Les voici enfin, ces contenus ! Ce sont les informations diffuser et administrer. Quest-ce quun contenu ? Un contenu peut prendre la forme statique dun communiqu, dun article rdactionnel ou dune page dexplications. Il peut aussi sagir de donnes gnres la demande, donc dynamiques, comme les rsultats dune recherche dans Google, une liste darticles dans un cybermagasin ou un site de vente aux enchres. Les contenus peuvent aussi tre modifiables par tout visiteur. Cest le cas de lencyclopdie libre Wikipedia (http://www.wikipedia.fr/) dont lapproche communautaire se nomme dailleurs Wiki. Cette libert de modifier nimporte quel contenu semble jusqu prsent fonctionner. Personne ne tente de rdiger ni de modifier du contenu sans avoir les comptences requises (hormis quelques dbats passionns relatifs la structure ou aux contenus) Lexact contraire de lapproche Wiki est le contenu statique. Une fois rdig, il reste valable tel quel pendant une priode de temps assez longue, comme un livre imprim. Si le sujet abord est en volution perptuelle (comme cest le cas de ce livre), certains aspects du contenu statique deviennent rapidement obsoltes. Il offre nanmoins lavantage de constituer un point de rfrence et une prsentation complte et didactique du thme. Lauteur de contenus doit les mettre jour, ce qui constitue une forme de gestion de contenus, les outils tant dans ce cas par exemple Joomla! et OpenOffice.org. Les prospectus, dpliants, communiqus dentreprise et modes demploi sont par nature statiques. Ils sont destins documenter un objet concret ou un vnement et deviennent obsoltes lorsque lobjet nest plus en usage ou que lvnement est pass. Les anciens sites Web ne proposaient que des contenus statiques, mais Internet acclre le temps. Ce qui est tolr, voire souhaitable, pour un livre, une notice et tout autre document imprim (ce qui y est dcrit devient un lot de connaissances partags entre tous les lecteurs, une source en termes de formation et de recrutement) sera considr comme inacceptable sur un site Web. Il est trs

dommageable pour limage dune entreprise de proposer un site Web statique dont les contenus nont pas volu depuis des annes, avec un joli bouton Powered by... menant un logiciel de cration qui na plus cours depuis des lustres. Les possibilits de mise en forme des contenus sont trs varies et dpendent dabord des contraintes de bande passante (vitesse daccs), des capacits du terminal (ordinateur, assistant personnel, tlphone), donc des possibilits du visiteur. Vous devez par consquence vous soucier dabord de votre cible daudience. Comment la dterminer ? Une rgle trs simple simpose : Lessentiel, cest le contenu ! Cest le contenu qui fait laudience. Les agences de publicit Web sourient de ce postulat puis retournent leur conception de sites Web la chane. Aprs tout, les milliards dpenss en publicit pour des pinards surgels et des automobiles sont la meilleure preuve quil est possible de communiquer efficacement sans attirer lattention par la qualit du contenu. Le principe consistant considrer le contenu comme dterminant reste valable, lexprience le prouve. Si vous navez rien dire ni proposer, personne naura envie de vous lire ni de vous couter si vous ne comptez pas consacrer des millions attirer lattention par la publicit. Cest peine perdue que de peaufiner laspect visuel de vos pages pour le plus grand nombre de priphriques possible si ces pages sont quasi vides. Personne ne viendra vous voir. Attention Rflchissez srieusement la teneur de vos contenus ! Une fois publis, ils vont devenir accessibles au monde entier et chacun peut se retourner contre leur auteur. Vous pourriez devenir la cible de procs, des critiques de vos collgues et autres pripties dsagrables. Mais cette communication plantaire est aussi un formidable atout : tout le monde peut y accder, ragir et prendre contact avec vous. Une opportunit incomparable ! Tenez compte de ces deux points lorsque vous rdigez tous vos contenus. Premire page ou page daccueil (Frontpage) Cest sur cette page que sont prsents les articles mis en vedette.

Figure 3.5 La page daccueil dun site. Tout contenu a comme attributs le nom de lauteur, la date de rdaction, le titre, le chapeau (introduction) et parfois des illustrations. Le chapeau doit tre rdig pour donner envie au visiteur de lire la suite en cliquant sur le lien automatique Lire la suite.... chaque article peuvent tre associes plusieurs autres commandes : imprimer, accder au fichier PDF, envoyer comme courriel un ami, etc. Derniers articles/Articles les plus consults Les articles peuvent se prsenter sous diffrentes formes mais, dans tous les cas, les visiteurs sintressent dabord aux plus rcentes informations et celles qui sont les plus lues (voir Figure 3.6).

Figure 3.6 Derniers articles/Articles les plus consults. Le modle dexemple prvoit une section dans laquelle sont affichs les titres des cinq articles les plus rcents (LATEST NEWS) et une autre qui Affiche les titres des cinq articles les plus consults (POPULAR). Joomla! gre en effet des compteurs de lecture pour tous les articles qui sont incrments lors de chaque accs lenregistrement dun contenu dans la base de donnes.

3.1.3 La publicit
Si votre site gnre assez daffluence par lintrt de ses contenus, vous pouvez envisager de louer un espace publicitaire. La principale forme de publicit Web est la bannire, une image rectangulaire litalienne (plus large que haute) au format .GIF, .JPG, .PNG ou .SWF. Lattrait visuel de la bannire doit inviter le visiteur cliquer sur limage pour se rendre sur le site de lannonceur, et donc quitter le vtre. Si vous acceptez cela, il suffit dutiliser la section rserve cet effet dans le modle de page en laissant clairement comprendre quil sagit dune publicit. Section de bannire La section de bannire accepte des liens texte (voir Figure 3.7) ou des graphiques (voir Figure 3.8). Le format de bannire graphique devenu standard est un bandeau de 468 pixels de large sur 60 pixels de haut.

3.1.4 Les fonctions

Les fonctions dun site Web sont les lments interactifs. Dans Joomla!, elles correspondent des modules. Un module est un lment qui occupe un certain espace sur les pages et qui remplit une certaine fonction dynamique.

Figure 3.7 La section de bannire avec des liens texte.

Figure 3.8 La section de bannire avec une bannire graphique. Section de connexion (Login Form) Ce module permet de trier les visiteurs du site en deux catgories : ceux qui restent anonymes, et ceux qui dsirent devenir utilisateurs rguliers et qui ont alors accs la partie privative du site. Ces utilisateurs doivent pouvoir se faire connatre en crant un compte (en senregistrant) puis pouvoir ouvrir une session lors de leurs prochaines visites. Il faut aussi prvoir le cas des utilisateurs qui oublient leur mot de passe. Le module Login prend en charge toutes ces situations.

Figure 3.9 Le module douverture de session Login Form. Module de sondage (Polls) Puisque vos contenus sont a priori cibls, il est intressant de demander rgulirement vos visiteurs de donner leur avis sur un sujet qui les concerne. Cest la solution la plus simple pour savoir notamment ce quils pensent de votre site.

Figure 3.10 Le module de sondage (Polls). Joomla! intgre un module de sondage qui Affiche un pav sur la page daccueil. Le module de tmoin de prsence (Whos online ?) Cet autre module est clairement orient communaut. Le visiteur apprcie de savoir combien de personnes sont actuellement en train de visiter le mme site. Les visiteurs anonymes sont distingus des utilisateurs enregistrs.

Figure 3.11 Le module de tmoin de prsence (Whos online ?). Rflchissez avant dactiver laffichage de ce genre de module sur votre site. Si vous prtendez dans le contenu que vous tes site franais dchanges de sonneries pour portables le plus important, et que les visiteurs voient quils sont seuls sur le site, vous perdez toute crdibilit et donc toute chance de raliser votre rve. En revanche, si vous avez presque en permanence 10 20 visiteurs en ligne, le fait de le signaler

augmente lintrt du site et son dynamisme. Fils dactualit (NewsFeeds) Les fils dactualit sont de plus en plus courants. Il sagit de slections de vos contenus pouvant tre envoys ceux qui sy abonnent. Cest en quelque sorte du contenu sans son habillage. Le module dabonnement Syndicate sait exploiter plusieurs standards de Feeds. Nous en reparlons au Chapitre 10.

Figure 3.12 Le module dabonnement Syndicate. Le champ de recherche Un autre lment systmatique que tout visiteur sattend trouver sur votre site est la fonction de recherche locale. Cette fonction est souvent disponible sur les sites Web, mais il nest pas rare quelle soit incomplte, cest--dire quelle ne scrute pas tous les contenus. Dans Joomla!, absolument toutes les pages sont prises en compte. Il suffit de cliquer dans le champ de saisie, dindiquer le critre et de valider avec la touche ENTRE. Vous obtenez en rponse une liste de liens dans lesquels le critre est mis en exergue.

Figure 3.13 Le module de recherche. 3.1.5 Les lments dcoratifs Aprs avoir dcouvert les contenus, les modules et les fonctions, voyons la partie visuelle, celle qui donne son identit, sa personnalit au site, quil sagisse dune entreprise ou dun particulier. Laspect visuel est dtermin par le modle (template) qui joue le rle dune structure invisible dans laquelle sont verss les contenus et les modules des positions prdfinies. afin que les prfrences de chacun soient satisfaites, le modle en vigueur sur un site peut tre chang avec les mmes contenus. Vous pouvez par exemple adopter un modle en hiver et un autre en t ou un modle particulier pendant la coupe du monde de football. Nous abordons la cration des modles au Chapitre 13. Lessentiel dun modle est de dfinir des zones pour les contenus, une combinaison de couleurs, un ou plusieurs logos, un choix de polices pour les textes, le tout en sorte doffrir un rsultat cohrent et attrayant. Le modle dexemple comporte deux logos et un pied de page.

Figure 3.14 Exemple de logo.

3.1.6 Le point de vue global

Aprs ce tour dhorizon concret, vous devinez sans doute que la maintenance et la mise jour dun tel site peuvent reprsenter un travail non ngligeable. Joomla! simplifie ces tches autant que faire se peut. Lessentiel est de conserver un point de vue global sur le site.

3.2 Administration (Backend)

Ladministration du site se droule dans la partie arrire (Backend) qui est une sorte de site bis appel Joomla! Administration. Vous accdez la page daccueil de ladministration par ladresse suivante :
[NomDomaine]/administrator/

Dans le cas de linstallation locale de notre exemple, ladresse relle devient :

http://localhost/joomla150/administrator/

Figure 3.15 Ouverture de session pour ladministration de Joomla!. Comme nom, indiquez admin. Comme mot de passe, saisissez celui gnr par linstallateur ou choisi par vous pendant linstallation (dernire tape de linstallation). La page daccueil propos une barre de menus, une barre doutils avec des boutons et des onglets de pages doptions, cest--dire une interface conforme aux canons actuels de lergonomie. Vous remarquerez que linterface nest que partiellement en franais.

Figure 3.16 Page daccueil de linterface dadministration de Joomla!. Nous verrons dans au prochain chapitre comment intervenir sur les langues de linterface. Les donnes dexemples de la partie publique resteront en anglais, car elles ne sont pas encore traduites et seront trs vite remplaces par vos propres contenus. Attention: Dans un environnement de production, vous devriez protger le dossier suivant par un fichier cach .htaccess :
[InstallJoomla!]/administrator/

Le grand succs de Joomla! laisse craindre que les tentatives dintrusion dans la partie administrative vont se multiplier. Cherchez sur le Web comment tablir ce fichier de protection. Voyez par exemple la page suivante : http://www.joomlafacile.com/Questions-diverses/Securisez-votre-administration.html

4 Adapter Joomla! Langue et modle

Nous avons vu au chapitre prcdent que la partie administrative permettait dadapter la structure de votre site Web et de lui injecter des contenus. Tout utilisateur non anglophone doit raliser en premier ces deux oprations : vrifier et modifier la langue de linterface puis personnaliser les structures des menus et les couleurs du template. Voyons donc tour tour ces deux tapes primordiales.

4.2 Changement de modle (template) 4.1 Vrifier et changer la langue du site public

4.2 Changement de modle (template)

Aprs cette premire incursion dans les coulisses de Joomla!, voyons comment modifier en un seul geste laspect gnral du site. Dans sa version actuelle, Joomla! 1.5.0 est livr avec deux templates : le template par dfaut rhuk_ milkyway (Kepri) et un nouveau template, qui garantit laccessibilit des sites aux personnes handicapes. Il porte le nom de beez. Il a fallu remanier une grosse partie du code source de Joomla! 1.0 pour satisfaire aux normes daccessibilit. Les deux concepteurs allemands Angie Radtke et Robert Deutz ont propos ce template. Ils ont engag avec la communaut Joomla! une longue discussion quant lintrt de laccessibilit des sites Web. Ce template a en consquence t incorpor la livraison standard de Joomla!. Cela ne pourra que favoriser la diffusion de Joomla! sur le territoire europen (nous dcrivons Beez en dtail au Chapitre 14). Actuellement se droule un concours sur le site de joomla.org afin de choisir un autre template incorporer en standard avec Joomla!. Il est trs facile de passer dun template lautre. Voyons dabord comment ajouter un troisime template aux deux qui sont fournis en standard. Info: Le dossier CHAP17 du CD-ROM contient des modles complmentaires. Le Chapitre 16 exploite un modle spcifique au site de vente direct dun viticulteur (Bertrand). Pour charger le fichier du nouveau template, servez-vous de la commande EXTENSIONS > INSTALLER/ DSINSTALLER, comme pour le fichier de langues en dbut de chapitre. Cherchez sur le CD-ROM, dans le dossier CHAP17 le fichier ngo1.5.zzip. Linstallateur indique que le transfert a russi (voir Figure 4.6).

Figure 4.6 Installation dun nouveau modle. Accdez ensuite la section de gestion des templates par EXTENSIONS > GESTION DES TEMPLATES. Le template actif une toile jaune. Lorsque vous amenez le pointeur sur le nom dun template, vous voyez apparatre un aperu (voir Figure 4.7).

Figure 4.7 Le Gestionnaire des Templates (modles). Pour activer un template, cliquez dans le bouton radio gauche du nom puis cliquez sur le boutonaction DFAUT en haut droite. Ltoile est place dans la ligne correspondante. Rafrachissez laffichage de votre site Web pour juger de la diffrence. La Figure 4.8 montre le template Beez. Nous expliquons comment crer de nouveaux templates au Chapitre 13 et verrons un template spcifique au Chapitre 16.

Figure 4.8 Le modle Beez daccessibilit. 4.2.1 Personnalisation des couleurs du modle Mme le template standard rhuk_milkyway offre quelques paramtres de personnalisation au niveau des couleurs du premier plan et du fond. Rinstituez ce template comme expliqu plus haut puis basculez en mode DITION en cliquant dans le bouton radio gauche du nom du template puis sur le bouton DITER. Certains paramtres ne sont pas modifiables pour le template par dfaut. Vous pouvez en revanche changer deux paramtres de couleurs et la largeur du template (voir Figure 4.9).

Figure 4.9 Personnalisation du modle par dfaut rhuk_milkyway Vous pouvez essayer de modifier les couleurs et juger du rsultat dans votre site Web. Info: Il est utile de tirer profit des onglets de navigateurs avec Joomla!. Internet Explorer dispose de tels onglets depuis sa version 7, FireFox depuis plus longtemps. Vous pouvez ainsi tablir un onglet sur la partie dadministration et un autre sur la partie publique. Il suffit de frapper la combinaison CTRL+TAB pour passer dun onglet lautre. Notez que les navigateurs Firefox, Opera, Safari et Konqueror possdent des onglets depuis plusieurs annes. Ils sont cependant pour linstant moins rpandus que IE.

4.1 Vrifier et changer la langue du site public

Si vous prvoyez de vous adresser des visiteurs francophones, soit environ 100 millions de personnes, vous devez bien sr commencer par basculer votre site Web entirement en franais. En revanche, si vous prvoyez une frquentation internationale, vous opterez plutt pour la langue anglaise. Pour le franais, vous pourriez mme, si le site est destin aux enfants, envisager une formulation des expressions fondes sur le tutoiement. Mais cette variante nest actuellement pas disponible dans Joomla! Quel que soit votre choix, vous pourrez avoir besoin dun fichier de langues. Pour le franais, les traductions ont dj t intgres. Pour dautres langues, il faudra rcuprer les fichiers de langues sur le site Web officiel appropri.

4.1.1 Installation dun fichier de langues

Si ncessaire, rcuprez les fichiers de langues depuis le site officiel de Joomla!. Normalement, vous devez disposer dun fichier de langues pour la partie publique et dun second pour la partie administrative. Pour installer les fichiers, ouvrez une session dadministration comme indiqu au Chapitre 2. Ouvrez ensuite le menu EXTENSIONS et choisissez INSTALLER/DSINSTALLER (voir Figure 4.1).

Figure 4.1 Installation dun fichier de langues. Vous pouvez installer les fichiers de langues de trois manires :

en effectuant un transfert local des fichiers dj situs sur le PC ; en accdant un dossier du domaine des documents de votre serveur Web ; en fournissant une adresse URL qui mne au fichier dsir.

Supposons la premire approche. Dans ce cas, vous cliquez sur le bouton PARCOURIR de la premire section puis vous dsignez le fichier compress *.zip. Vous cliquez ensuite sur lautre bouton, TRANSFERT DE FICHIERS ET INSTALLATION. Si tout se passe bien, vous obtenez ensuite un message dans ce style :

Install Language Success

Faites de mme avec le second fichier de langues. Rendez-vous ensuite au niveau du Gestionnaire de langues par la commande EXTENSIONS > GESTION DES LANGUES. Notez bien quil y a deux onglets dans la partie infrieure, Site et Administrateur. Au dpart, vous voyez que les deux langues anglais et franais sont installes (french FR). Vrifiez que la coche verte est bien situe dans la ligne du franais. Si ce nest pas le cas, cliquez dans le bouton radio gauche dans la ligne dsire puis cliquez sur licne DFAUT en haut droite (voir Figure 4.2). Cest toujours dans ce coin suprieur droit que sont runis les boutonsicnes des actions applicables. Noubliez pas galement de vrifier la langue de la partie administrative. Votre Joomla! doit maintenant se prsenter en franais dans les deux parties. Cest une chose que les utilisateurs francophones attendaient depuis longtemps. Dans Joomla! 1.5, ce dsir est enfin satisfait.

Figure 4.2 Slection de la langue (Gestionnaire de langues).

4.1.2 Traduction dun lment de menu

Si vous accdez votre site Web local, vous constatez quil est en franais, mais pas totalement. Rappelons que vous accdez votre site via ladresse http://localhost/joomla150/. Saisissez par exemple le terme contenu dans le champ de recherche en haut. Vous constatez quil ny a aucun rsultat. En effet, linterface est en franais, mais pas les donnes dexemples. Si vous effectuez une recherche du terme anglais content, vous obtiendrez plusieurs rponses. Pourquoi cela ? Les contenus constituent un autre ensemble de donnes. Lquipe franaise de Joomla! a dabord concentr ses efforts sur la localisation (traduction) de linterface visible par le public, puis de celle dadministration. Dautre part, les contenus dexemple vont rapidement tre remplacs par vos contenus vritables, et cest vous qui choisirez la langue dans laquelle ils sont rdigs. Si vous observez bien la page daccueil, vous constaterez que certains lments pourraient nanmoins tre dj franciss. Voyez par exemple la premire entre du menu principal qui indique Home. Voyons comment traduire cette entre, puis comment traduire le titre du menu Main Menu. Dans le cas de lentre de menu, choisissez MENUS > MAIN MENU. Vous arrivez dans la partie de gestion des lments de menu. Cliquez sur la ligne du lien HOME (voir Figure 4.3) pour

basculer en mode DITION DANS UN FORMULAIRE (voir Figure 4.4). Pour linstant, ne cherchez pas dcouvrir les nombreuses possibilits de configuration qui soffrent vous. Slectionnez le contenu du champ TITRE et saisissez la traduction Accueil. Frappez la touche TAB pour entrer dans le champ ALIAS et saisissez nouveau accueil. Cliquez enfin en haut droite sur le bouton SAUVER. Allez vrifier la page daccueil en la ractualisant.

Figure 4.3 Le Gestionnaire des lments de menu.

Figure 4.4 dition dun lment de menu. Joomla! distingue les trois actions, Appliquer, Sauver et Fermer :

Appliquer valide vos modifications et reste en mode dition ; Sauver valide les modifications mais quitte le mode dition et revient au niveau prcdent ; Fermer ou Annuler abandonne les modifications en quittant le mode dition.

4.1.3 Modification dune entre (lment) de menu

Pour franciser le titre du menu Main Menu, accdez au Gestionnaire des modules via la commande EXTENSIONS > GESTION DES MODULES (voir Figure 4.5). Cliquez sur le lien MAIN MENU pour basculer en mode dition.

Figure 4.5 La gestion des modules Indiquez comme titre Menu principal puis cliquez sur APPLIQUER ou sur SAUVER. Allez recharger votre page daccueil pour voir votre menu principal.

5 Structure de ladministration Joomla!

Joomla! offre peu prs le mme confort quune application locale interface graphique, telle que le proposent Windows, Linux (KDE, Gnome) ou Mac OS (Aqua). Ce nest pourtant pas une chose simple que de produire un progiciel de gestion de site Web ergonomique. Larme secrte est ici une utilisation intensive du langage de script JavaScript et une intgration pousse de composants Ajax. Ce langage est excut localement sur votre machine. Il peut avoir t dsactiv dans votre navigateur. Dans ce cas, vous ne pouvez pas utiliser linterface dadministration de Joomla!. Voil plusieurs annes que les navigateurs savent intgrer JavaScript correctement et quil ny a plus de problmes majeurs de scurit. Cest pourquoi vous pouvez activer le support de JavaScript. Je profite de locca sion pour suggrer aux utilisateurs de Windows dadopter lun des navigateurs Open Source Mozilla ou Firefox. Tous deux sont nettement plus srs et plus confortables que le navigateur Internet Explorer. la diffrence de ce dernier, ces navigateurs se maintiennent en conformit avec les standards Internet dict par lorganisme W3C.

5.1 Organisation de laffichage 5.2 Aide 5.3 Le menu Aide

5.1 Organisation de laffichage

5.1.1 La barre de menus
Comme la partie publique du site Web, la partie administrative de Joomla! est constitue de plusieurs lments. La barre de menus en haut (voir Figure 5.1) prsente les diffrents menus. Du ct droit se trouve quatre lments :

un lien direct vers le site Web (Prvisualiser) ; un tmoin daffichage du nombre de nouveaux courriels reus ; un tmoin daffichage du nombre dutilisateur actuellement connect ; le bouton Dconnexion.

Figure 5.1 La barre de menus

5.1.2 La barre doutils

Juste sous la barre de menus se trouve la barre doutils (voir Figure 5.2). Voici par exemple celle des lments du menu principal Main Menu.

Figure 5.2 Exemple de barre doutils. gauche est rappel le nom de la sous-section courante avec son icne. Plus droite se trouve un nombre variable de boutons-action. Lorsque vous amenez le pointeur sur un tel bouton, il est mis en valeur. Il suffit de cliquer avec le bouton gauche pour lancer la commande correspondante. Le tableau suivant prsente les boutons-action que vous rencontrerez le plus souvent. Bouton-action Description Affecter Aide Annuler Aperu Appliquer Archiver Copier (ASSIGN) L'lment slectionn est associ un autre lment (HELP) Accs l'Aide en ligne de Joomla! (CANCEL) Les modifications sont abandonnes (PREVIEW) L'lment slectionn sAffiche dans une fentre indpendante en aperu (APPLY) Les modifications sont enregistres mais la bote reste ouverte (ARCHIVE) L'lment slectionn sera envoy dans l'archive (COPY) L'lment slectionn est rcupr d'une autre section, d'une autre catgorie

Corbeille Crer Dfaut Dplacer Dpublier diter Nouveau Publier Restaurer Sauver Supprimer Transfrer

(TRASH) L'lment slectionn sera envoy dans la Corbeille (CREATE) Un sous-rpertoire est cr sur le serveur (DEFAULT) L'lment slectionn devient l'lment standard (MOVE) L'lment slectionn est envoy dans une autre section ou une autre catgorie (UNPUBLISH) L'lment slectionn sera retir de la partie publique (EDIT) L'lment slectionn est charg en mode dition (NEW/NEW ITEM) Cre un nouvel lment (lien, contact, actualit) (PUBLISH) L'lment slectionn sera publi (RESTORE/UNTRASH) L'lment slectionn est rcupr de la Corbeille (SAVE) L'lment slectionn est enregistr et la bote ferme (DELETE ou REMOVE) L'lment slectionn sera effac (UPLOAD) Le fichier slectionn est transfr sur le serveur

Tableau 5.1 : Principaux boutons-action de la barre doutils 5.1.3 Les sous-menus Souvent, la barre doutils surplombe des sous-menus. La Figure 5.3 montre les trois sous-menus de la gestion des bannires, avec les trois onglets BANNIRES, CLIENTS et CATGORIES. Il arrive quun message du systme soit affich cet endroit (voir Figure 5.4).

Figure 5.3 Les sous-menus de la gestion des bannires.

Figure 5.4 Les sous-menus de la configuration gnrale.

5.1.4 Composants de filtrage

De temps autre, vous avez accs des composants de filtrage sous les sous-menus. Ils permettent de filtrer les donnes affiches dans la partie infrieure selon diffrents critres (voir Figure 5.5). Vous pouvez lancer une recherche ou par exemple n'afficher que les modules situs une position spcifique. Lorsque vous slectionnez par exemple un template (modle) dans la liste de filtrage, seuls les modules qui font partie de ce template sont prsents.

Figure 5.5 Composants de filtrage.

5.1.5 Zone daffichage du contenu

Sous les ventuels composants de filtrage se situe la vaste surface daffichage des contenus. Elle existe en trois variantes principales. 5.1.6 Listes Ce format sert prsenter des lments sous forme de liste. Une case cocher ou un clic dans une ligne permet de choisir llment sur lequel intervenir. La case cocher du haut de la colonne sert slectionner tous les lments en un seul geste. Ce genre de liste contient souvent une fonction de tri. Frquemment, vous pouvez activer ou dsactiver un lment en cliquant directement sur son nom. Sous la liste apparaissent parfois des boutons de navigation. En bas de fentre, un champ permet de dfinir le nombre dlments lists pour chaque page cran. Lexemple correspond au contenu du menu Key Concepts (voir Figure 5.6).

Figure 5.6 Exemple de contenu au format liste.

5.1.7 Format bote de dialogue

Ce format permet dAfficher les dtails dun seul lment (voir Figure 5.7). Il peut sagir dun contenu, dun module, dun menu, dun lment de menu, dun template ou autre. En gnral, la partie gauche contient les paramtres gnraux, et la partie droite les paramtres dtaills pour llment de gauche. Mais il nest pas simple de toujours sparer clairement les proprits gnrales des proprits dtailles. Vous trouverez donc parfois du ct gauche des valeurs directement paramtrables.

Figure 5.7 Exemple de format bote de dialogue.

5.1.8 Format divers

Nous englobons sous ce terme les affichages spcifiques comme celui du PANNEAU DADMINISTRATION (voir Figure 5.8) qui sAffiche au dpart lorsque vous vous connectez la partie administrative. La partie gauche runit des boutons pour les principales commandes. La partie droite donne des informations concernant le site Web. Certains contenus de Joomla! ne pouvant pas tre affichs en utilisant le format liste, ou le format bote, vous rencontrerez de temps autre des sections avec un format particulier. La systmatique des affichages est difficile maintenir dans le cas des composants additionnels complexes.

Figure 5.8 Exemple daffichage spcifique.

5.2 Aide
Un accs facile laide est indispensable de nos jours. Joomla! tente doffrir un tel accs ds que possible.

5.2.1 Le bouton-action Aide

Dans la plupart des listes et des botes de dialogue, vous trouverez un bouton du ct droit de la barre doutils pour accder laide. Lorsque vous cliquez sur ce bouton, et si vous disposez dune connexion Internet, vous voyez apparatre une page daide extraite du serveur daide du site jongla. org dans une fentre flottante. Pour le moment, les travaux sont en cours. Le but est de mettre disposition un serveur daide par langue, avec une possibilit de mise jour centralise.

Figure 5.9 Accs au systme daide. 5.2.2 Bulles daide Une forme daide locale trs pratique sont les Bulles daide (voir Figure 5.10). Pour les faire apparatre, il suffit de maintenir le pointeur sans bouger sur lobjet dsir. Le texte de cette aide locale fait partie des fichier de langues, ce qui permet dy avoir accs mme sans connexion Internet et den voir une version traduite.

Figure 5.10 Une Bulle daide.

5.3 Le menu Aide

Le menu AIDE est le dernier dans la barre de menus. Il contient deux commandes : Aide Joomla! et Infos systme. Cliquez dabord sur AIDE JOOMLA!.

5.3.1 Aide Joomla!

La zone daffichage est divise en trois parties. En haut, vous disposez dun champ de recherche et dune barre de liens (voir Figure 5.11).

Figure 5.11 Fentre de laide en ligne. Le volet gauche contient une table des articles daide et le volet droit Affiche les dtails de larticle slectionn. Les articles sont lus sur le serveur daide ladresse http://help.joomla.org/. Vous pouvez reconfigurer ladresse du serveur daide (voyez le Chapitre 6). La fonction de recherche accde au mme serveur. Il faut donc dans tous les cas disposer dune connexion Internet. Mais ce genre de logiciel suppose de toutes les manires de pouvoir accder au Web. Les autres liens concernent laffichage du texte de la licence GPL, le journal des modifications qui permet dapprendre par exemple quun certain Johan Janssens a ajout des traductions en octobre 2007.

5.3.2 Infos systme

La commande AIDE > INFOS SYSTME centralise toutes les informations concernant votre machine, en cinq catgories :

Infos systme ; Paramtres PHP ; fichier de configuration ; Permissions des dossiers ; Informations PHP.

La page Infos systme. Rcapitule les paramtres du systme dexploitation et du serveur qui sont

indispensables au fonctionnement de Joomla!. La Figure 5.12 montre quil sagit dun environnement Windows avec XAMPP lite (nous lavons install au Chapitre 2). Dans un tel environnement de test local, vous disposez de versions plus rcentes des logiciels (Apache 2.2.6 et PHP 5.2.5) que sur un serveur lou.

Figure 5.12 Les informations systme. La page Paramtres PHP. Donne des informations issues du fichier php.ini. Cest dans ce fichier que vous dcidez de ltat du mode scuris Safe Mode de PHP. Dans le cas dun serveur lou chez un fournisseur daccs, vous ne pouvez gnralement pas modifier php.ini. La page Fichier de configuration. Valeurs des variables trouves dans le fichier configuration.php gnr pendant linstallation. Les paramtres de base de donnes sont masques pour des raisons de scurit. La page Permissions des dossiers. Affiche tous les droits daccs des sous-dossiers. Pour que Joomla! fonctionne correctement, tous ces dossiers doivent tre accessibles en criture. Rappelons que vous modifiez les permissions des dossiers dans votre programme FTP au moyen de la commande chmod. La page Informations PHP. Affiche les donnes qui sont renvoyes par la fonction phpinfo(). Elle dcrit toute la configuration de linterprteur PHP. Chez certains fournisseurs daccs, vous pourrez intervenir sur la configuration via ce fichier, par exemple pour augmenter la quantit despace mmoire.

16 Un site Web complet avec Joomla!

Si vous venez des pages prcdentes du livre, vous avez pu voir des dizaines de captures dcran de la partie administration. Vous en savez plus sur les imbrications des technologies et les approches de conception Web et vous avez lesprit truff dacronymes : HTTP, HTML, CSS, SQL, PHP, SEO, SEF, DIV, MVC, et tutti quanti. Mais en ralit, vous vouliez seulement crer un site Web ! Mais peut-tre vous tes vous rendu directement ce chapitre pour savoir comment faire ? Dans tous les cas, bienvenue dans ce projet concret. Nous allons voir comment concevoir puis raliser un site Web avec Joomla!, de lide initiale la publication.

16.1 Lide de dpart 16.2 Prparatifs 16.3 Ralisation technique I 16.3 Ralisation technique II 16.4 Implantation sur le serveur Web 16.5 Moteurs de recherche 16.6 Ajout des templates spcifiques 16.7 Tout est bien qui finit bien

16.1 Lide de dpart

Le site Web que nous allons raliser est celui dune famille de viticulteurs du Languedoc, les Bertrand. Le chef de lentreprise se nomme Pascal Bertrand. Il en incarne la troisime gnration. Il propose la vente diffrents cpages et millsimes. Jusqu ce jour, il livrait son vin une cooprative viticole, avec un peu de vente directe pendant la saison estivale. Mais M. Bertrand voudrait aussi proposer son vin sur Internet, et se servir de Joomla! pour y parvenir. Voici les objectifs de son site :

prsentation de lentreprise Bertrand ; informations gnrales sur la viticulture ; possibilit de commande et de rglement en ligne ; possibilit pour M. Bertrand de diffuser des actualits sur son site ; ajout de reportages photo et vido prsentant les vendanges et les installations ; cration dune zone rserve aux utilisateurs identifis, pour leur proposer des promotions et une lettre dinformation ; formulaire de contact pour les visiteurs ; injection de fils d'actualit en provenance de la branche viticole.

On dispose dun dlai de deux jours pour raliser le site.

16.2 Prparatifs
Pour atteindre cet objectif, il faut un peu se prparer.

16.2.1 Le logo et la charte visuelle

La famille Bertrand rencontre une illustratrice appele Ruth Prantz pour rflchir sur laspect visuel du site, exception faite des contenus diffuser. Ruth demande tout dabord sil existe dj un logo et une charte graphique qui seraient utiliss dans les documents imprims (prospectus, papier de correspondance, factures, enseigne). Lentreprise possde en effet un logo qui avait t dessin voil bien longtemps par le grand-pre Bertrand (voir Figure 16.1).

Figure 16.1 Le logo dessin par le grand-pre Bertrand. Effectivement, le logo apparat sur diffrents documents historiques de lentreprise. Il ny a cependant pas de charte graphique constante. Les couleurs varient dun imprim lautre, les polices aussi tout comme les illustrations et les styles graphiques. Ruth cherche ensuite connatre les attentes de la famille Bertrand pour son site Web et des groupes de clients viss. Les vignes Bertrand sont conduites en culture biologique en portant une attention particulire la qualit, ce qui est bien dans lair du temps. Lobjectif est de vendre environ 5 % de leur production via le Web. Les clients attendus sont dabord des amateurs de vin et leurs cercles damis, avec un pro dge de 35 ans et plus. Pour que le site se distingue de la concurrence, Ruth conseille M. Bertrand de travailler sur le logo, les couleurs et les caractres sans attendre. En moins dune heure, un premier projet apparat lcran (voir Figure 16.2).

Figure 16.2 Le premier projet du logo Bertrand retravaill par Ruth. Ruth a utilis le logiciel de retouche graphique Photoshop Elements de Adobe que de nombreux fournisseurs daccs Internet proposent gratuitement lors de la signature du contrat d'hbergement. Vous pouvez bien sr vous servir de nimporte quel autre programme et notamment le logiciel libre Gimp. La famille Bertrand apprcie le premier projet. Ruth prend cong en promettant de concevoir un template partir du logo et du choix des couleurs. Pendant ce temps, la famille Bertrand va runir des documents pour les publier sur le site Web et rflchir la structure du site dans Joomla!.

16.2.2 Illustrations
Il est indispensable de diffuser des photographies et des illustrations pour donner au visiteur une ide de la production du vin, de lenvironnement, des cpages, du processus de fabrication et de la famille. Le fils Didier et la le Marlne sont chargs de fouiller dans la grande masse darchives photos et vidos dont ils disposent pour slectionner des lments. Par ailleurs, ils partent faire un reportage vido sur la fte viticole qui a justement lieu le mme jour.

16.2.3 Textes
En ce qui concerne les textes diffuser sur le site, M. Bertrand tient sen occuper personnellement. Il a dj rdig de nombreux prospectus et recueilli des articles dans la presse locale et spcialise. Il possde galement une srie dattestations danalyse des sols et des vins. Il aimerait bien numriser tous ces documents et les proposer en tlchargement au format PDF, mais uniquement aux membres.

16.3 Ralisation technique I

Pendant que ses enfants rassemblent les documents, M. Bertrand aimerait commencer prparer la structure de son site Web.

16.3.1 Installation locale

Il dcide dinstaller une version locale de Joomla! dans un environnement XAMPP lite, comme dcrit au Chapitre 2. Son site ne sera pas implant dans la racine relative prcdente [CheminJoomla]/joomla150, mais dans une nouvelle branche qui sera [CheminJoomla]/bertrand. Voici les donnes quil saisit lors de ltape dinstallation relative au serveur MySQL :

Nom du serveur : localhost ; Nom d'utilisateur : root ; Mot de passe : aucun (laisser le champ vide) ; Nom de la base de donnes : bertrand.

Il na pas besoin des donnes dexemples pour son site puisquil va injecter ses propres contenus. Dans ltape correspondante de linstallation, M. Bertrand vite donc de cliquer sur le bouton des donnes dexemples. Bien sr, laffichage peut tre perturbant puisque le bouton doption ct du bouton daction propose dinstaller les donnes dexemples. Tant que lon ne clique pas sur le bouton action, les donnes ne seront pas installes, ce qui est le but ici (voir Figure 16.3).

Figure 16.3 Installation de Joomla! Il clique donc sur le bouton SUIVANT. Linstallateur cr un site Joomla! vide. Dans le haut de la page dadministration apparat dj le nom Les Vins de Bertrand (voir Figure 16.4). Figure 16.4 La partie publique du site sans donnes dexemples. Le site nest pas totalement vide. Aprs avoir accd la partie dadministration, M. Bertrand choisit la commande EXTENSIONS > GESTION DES MODULES. Il constate quil y a un module activ, Main Menu (voir Figure 16.5).

Figure 16.5 Un seul module est activ pour le menu gnral. M. Bertrand se demande o sont passs tous les autres modules systme, comme le module de c

onnexion Login. En utilisant le bouton NOUVEAU, il est rassur. Tous les modules sont bien l, il suffit de les activer (voir Figure 16.6).

Figure 16.6 Accs aux modules du systme. Langues de linterface M. Bertrand vrifie que la langue de la partie publique et de la partie administrative est bien le franais. Cela devrait tre le cas puisquil a install un Joomla! en franais. Trois premiers articles... M. Bertrand veut maintenant dgrossir la structure en insrant trois premiers articles au format blog et visibles sur la page daccueil du site. Ces trois articles nentreront dans aucune catgorie. Il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton NOUVEAU et cre tour tour trois articles dactualit (Article 1, 2 et 3). Il en profite immdiatement pour crer un chapeau en positionnant le curseur lendroit de la rupture puis en cliquant sous la fentre ddition sur le bouton LIRE LA SUITE. Il voit apparatre la ligne rouge. Il choisit NON catgoris pour la section et pour la catgorie, et vrifie que loption PAGE DACCUEIL est bien active par OUI (voir

Figure 16.7).

Figure 16.7 Rdaction dun premier article. Les trois articles apparaissent immdiatement sur la page daccueil ainsi que dans la liste CONTENU > GESTION DE LA PAGE DACCUEIL. M. Bertrand en profite pour activer le template Beez par la commande EXTENSIONS > GESTION DES TEMPLATES (voir Figure 16.8). M. Bertrand voudrait immdiatement faire une retouche pour masquer la date de cration, celle de modification et le nom de lauteur. Pour masquer ces trois lments, il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton PARAMTRES puis choisit loption MASQUER dans les trois champs de lauteur et des deux dates (voir Figure 16.9).

Figure 16.8 La page daccueil avec les trois articles dans le template Beez.

Figure 16.9 Retouche de la configuration des trois articles. Sa page daccueil est maintenant peu prs acheve (il reste ventuellement mettre du vrai texte la place du texte dattente). Il constate avec joie que Joomla! a automatiquement cr un dactualit RSS qui devient visible dans Internet Explorer partir de la version 7 et dans Firefox dans la barre dadresse (cest un symbole orange). En cliquant dans ce symbole, il voit apparatre une page de demande dabonnement (voir Figure 16.10).

Figure 16.10 La page de demande dabonnement un dactualit dans Firefox. Une fois quil se sera abonn, le visiteur obtiendra un message concernant lapparition de nouveaux articles sur la page daccueil. Ce mcanisme sapplique galement dautres programmes de lecture dactualit. Le concept est dailleurs devenu accessible aux appareils mobiles tels que les tlphones portables et les assistants personnels. M. Bertrand espre que de nombreux clients sabonneront ses actualits et sintresseront ensuite ses promotions (voir Figure 16.11).

Figure 16.11 Les articles dans un menu de dactualit du navigateur. Mentions lgales Dans de nombreux pays dEurope, il est indispensable de prvoir une page pour y rassembler les mentions lgales et le nom du responsable du site. Le visiteur doit toujours pouvoir contacter le directeur de publication du site. Dans le cas de M. Bertrand, le cartouche de mentions lgales peut scrire ainsi :
Directeur de la publication: GAEC Bertrand 2 impasse de Beauchamps 66200 Menfort France Messagerie : atruc@tortifer.com Tlphone : 05 12 90 00 01 N TVA Intracommm. : 232 009 112 012

Puisque le site prsente une partie commerciale, il est obligatoire dajouter le numro de TVA intracommunautaire. Pour obtenir cette page, il cre par la commande CONTENU > GESTION DES ARTICLES, bouton NOUVEAU un article non catgoris appel Mention lgale. Cette fois-ci, il ne fait pas afficher larticle dans la page daccueil. Le lien qui permettra dafficher les mentions lgales devra se trouver en tant qulment du menu gnral (Main Menu). M. Bertrand slectionne la commande MENUS > MAIN MENU, puis le bouton NOUVEAU. Dans lassistant de cration dlment, il choisit la catgorie ARTICLES, puis ARTICLES puis encore ARTICLE LAYOUT (voir Figure 16.12).

Figure 16.12 Cration dun lment de menu pour un article. Arriv dans la page ddition de llment de menu, M. Bertrand saisit le nom (Mentions lgales). Dans le volet des paramtres droite il doit choisir quel article associer cet lment de menu (voir

Figure 16.13). (Vous avez remarqu que nous avons crit le titre de larticle au singulier et le titre de llment au pluriel pour les distinguer plus aisment.)

Figure 16.13 Cration dun lien (lment de menu) pour les Mentions lgales. En cliquant sur le bouton SLECTION, il voit apparatre la liste de tous les articles disponibles (voir Figure 16.14).

Figure 16.14 Slection dun article pour llment de menu. M. Bertrand choisit larticle Mention lgale. Son lment est termin. Il clique sur le bouton SAUVER pour linsrer dans le menu. Il reste vrifier que llment est bien publi (coche verte et non croix rouge). Notez quil sagit de la publication de llment de menu et non de celle de larticle. Pour finir, il suffit de faire remonter le nouvel lment de menu dune position au moyen des petites flches vertes (voir Figure 16.15). Le site Web donne le rsultat suivant (voir Figure 16.16).

Figure 16.15 Llment Mentions lgales dans la liste du menu gnral.

Figure 16.16 Le cartouche des Mentions lgales sur le site Web. M. Bertrand constate que les trois icnes pour imprimer, afficher le PDF et envoyer un message sont inutiles. Il accde son article Mention lgale (CONTENU > GESTION DES ARTICLES, clic sur MENTION LGALE) pour aller modifier dans le volet PARAMTRES AVANCS la valeur des trois options PDF, Imprimer et Email. Il choisit MASQUER (voir Figure 16.17).

Figure 16.17 Masquage de trois boutons pour larticle Mention lgale. Notre premier lment de menu est termin. M. Bertrand doit maintenant sintresser la structure des sous-menus.

16.3.2 Cration des sous-menus pour les vins et les terroirs

Pour linstant, il ny a quun seul menu Main Menu hbergeant deux liens, un pour revenir la page daccueil et un pour afficher les mentions lgales. M. Bertrand aimerait tout de suite disposer dun module didentification du visiteur (Login). Il commence par renommer le menu en Menu gnral et llment Home en Accueil du site. Pour modifier le titre de menu, il utilise la commande MENUS > EXTENSIONS > GESTION DES MODULES puis il choisit MAIN MENU et modifie le contenu du champ TITRE. Pour le module identification Login, il slectionne dabord EXTENSIONS > GESTION DES MODULES, bouton NOUVEAU (voir Figure 16.18). Il choisit immdiatement le bon titre pour le module en indiquant Accs membres.

Figure 16.18 Mise en place du module didentification (Login). Enfin, pour changer le titre du premier lment du menu, il choisit la commande MENUS > MAIN MENU > HOME et indique comme titre Accueil du site. Il constate que le message dans la barre de titre de la fentre est toujours en anglais, Welcome to the Frontpage. Il dcide donc de masquer ce message en accdant aux paramtres systme (SITE > CONFIGURATION GLOBALE).

16.3.3 La structure des menus

M. Bertrand aimerait proposer trois menus : le menu gnral, un menu sous forme de barre horizontale en haut et un menu utilisateur runissant les commandes qui ne doivent tre accessibles quaux visiteurs identifis. Structure du menu gnral Voici la structure prvue pour le menu gnral de la colonne gauche :
- Accueil du site - Actualits - Nos vins - Texte de prsentation -- Nos blancs - Description de produit et commande -- Nos rouges - Description de produit et commande -- Nos ross - Description de produit et commande - Notre terroir - Texte de prsentation -- Les costires Description avec lien vers le vin -- Le littoral Description avec lien vers le vin -- La plaine Description avec lien vers le vin - Photographies Composant Galerie sur les vendanges - Promotions Oprations spciales - Contact - Mentions lgales

Structure du menu horizontal Le menu horizontal va permettre daccder rapidement plusieurs pages essentielles. Lorsque lon clique dans ce menu, le lien quivalent dans le menu gnral doit souvrir le cas chant.
- Nos vins - Texte de prsentation - Notre terroir - Texte de prsentation - Reportages Composant Galerie sur les vendanges - Contact

Structure du menu utilisateur Lorsque le visiteur sest identifi par le module Login, il doit pouvoir accder une partie prive du

site proposant des promotions. Le but est de renforcer les liens entre producteur et consommateurs. Il est prvu de leur proposer une page frquemment mise jour contenant des promotions, avec une possibilit de commander et de payer en ligne. De plus, M. Bertrand veut proposer un lien de tlchargements qui permet aux utilisateurs enregistrs de puiser dans le lot de documents quil met leur disposition.
- Promotions - Tlchargements - Dconnexion

Insertion des textes et des liens dans le menu gnral Pour linstant, tous les textes, hormis le formulaire de contact et la galerie de reportages qui vient plus loin, sont de type Non catgoris. M. Bertrand les cre par la commande CONTENU > GESTION des articles. Il vrifie bien quaucun de ces nouveaux contenus ne va apparatre sur la page Accueil du site (Frontpage). Tous les articles doivent tre munis des trois boutons PDF, Email et Imprimer, mais il faut masquer la date de cration. Une fois les articles gnrs, il faut passer la cration des lments de menu. Pour que les trois liens NOS BLANCS, NOS ROUGES et NOS ROSS constituent un sous-menu, il faut slectionner chaque fois llment parent Nos vins (voir Figure 16.19) qui doit donc tre cr dabord.

Figure 16.19 Cration de liens dans un sous-menu. Il faut procder de mme avec les trois lments du sous-menu Notre terroir. Au final, la liste de MENUS > MAIN MENU doit montrer une structure arborescente comme en Figure 16.20. Le nom Main Menu est conserv, seul le titre qui apparat sur le site indique dornavant Menu gnral.

Figure 16.20 Structure arborescente des menus et sous-menus. Cration dun lien de contact M. Bertrand dsire profiter du composant standard de Joomla! nomm Contact. Il doit dabord crer une catgorie de contacts en lui donnant le nom GAEC Bertrand. Pour y parvenir, il choisit la commande COMPOSANTS > CONTACT, page CATGORIES (voir Figure 16.21).

Figure 16.21 Cration dune catgorie de contact. Il clique ensuite en haut gauche sur le lien CONTACT (nous avons prsent cela au Chapitre 9 en section 9.2). Il ne dfinit au dpart quun seul contact pour lui-mme. Dautres pourront tre ajouts plus tard. Un seul formulaire suffit pour linstant (voir Figure 16.22).

Figure 16.22 Cration dun nouveau contact dans la seule catgorie existante. Il reste insrer un lment dans le menu gnral pour accder ce contact. Par la commande MENUS > MAIN MENU > NOUVEAU, M. Bertrand aboutit la fentre de choix du type et slectionne CONTACT puis MISE EN PAGE STANDARD DES CONTACTS. Il arrive ensuite dans la page ddition de llment. Les contacts existants sont slectionnables dans le volet droit des PARAMTRES BASIQUE. Pour linstant il ny en a quun. Il slectionne sur son nom puis clique sur le bouton SAUVER (voir Figure 16.23).

Figure 16.23 Cration de llment de menu pour le contact. Il ne reste plus qu vrifier par MENUS > MAIN MENU que llment pour le contact est bien publi (colonne Publi ou Activateur). Il repositionne ventuellement llment pour quil ne soit pas en dernier dans le menu. En allant voir le rsultat sur le site Web, il suffit de cliquer sur le lien CONTACT pour voir apparatre les coordonnes de Pascal Bertrand suivies dun formulaire dans lequel le visiteur peut lui crire. Menu horizontal en haut (menu-barre) Notre menu gnral est presque achev. Il ne restera qu ajouter un lien pour accder la galerie des reportages. M. Bertrand veut maintenant crer un menu-barre horizontal en haut. Il choisit la commande MENUS > GESTION DES MENUS puis clique sur le bouton NOUVEAU. Il donne

son nouveau menu le nom MenuBarre (voir Figure 16.24).

Figure 16.24 Cration dun nouveau menu. Le menu doit tre immdiatement positionn lendroit dsir. Au moyen de la commande EXTENSIONS> GESTIONS DES MODULES, M. Bertrand opte pour la position user3. Il vrifie que le menu est activ. Le titre choisi na pas dimportance, car les menus barre ne prsentent gnralement pas de titre, et celui-ci restera donc masqu (voir Figure 16.25).

Figure 16.25 Choix de la position des nouveaux menus. Pour peupler le nouveau menu qui reste invisible tant quil est vide, pourquoi ne pas profiter des lments qui existent dj dans le menu gnral ? Il choisit la commande MENUS > MAIN MENU, slectionne par la coche les trois lments NOS VINS, NOTRE TERROIR et CONTACT puis clique sur le bouton COPIER (voir Figure 16.26).

Figure 16.26 Copie de trois lments de menu. Dans la page qui apparat, il faut slectionner le menu destinataire, Top menu puis cliquer sur le bouton COPIER. En allant vrifier sur le site, le nouveau menu-barre apparat en haut. Il contient bien les trois lments. Lorsque lon clique sur lun des lments, larticle saffiche. En revanche, le choix dun des deux menus ne fait pas ouvrir les dtails de llment correspondant du menu gnral. En tudiant le contenu de la barre dadresse, M. Bertrand constate que la fin de ladresse est diffrente selon que lon clique par exemple sur NOS VINS par le menu gnral ou par le nouveau menu-barre. La solution est de modifier le type des lments du menu-barre pour quils fassent rfrence au menu ouvert par un lien externe. (Pour russir cette modification, le plus confortable est de disposer de deux onglets dans votre navigateur, un avec le site et lautre avec la partie administration.) M. Bertrand a donc modifi le type des deux liens NOS VINS et NOTRE TERROIR en rcuprant ladresse exacte qui permet den afficher les dtails par le menu gnral. En choisissant la commande MENUS > MENU BARRE puis llment NOS VINS, il bascule dans la page ddition dans laquelle il peut cliquer sur le bouton CHANGER LE TYPE puis choisir le type LIEN EXTERNE (voir Figure 16.27).

Figure 16.27 Changement du type dun lment de menu. Au retour dans la page ddition, le champ nomm LIEN devient accessible. Il ne reste plus qu insrer les bonnes coordonnes dans la fin du nom. Les valeurs exactes varient dune installation lautre, car elles dpendent de lordre dans lequel vous avez cr les diffrents lments. Il peut par exemple sagir des valeurs suivantes :

pour Nos vins : index.php?option=com_content&view=article&id=5&Itemid=4 pour Nos terroirs : index.php?option=com_content&view=article&id=9&Itemid=8

Une solution simple consiste slectionner dans la barre dadresse la fin du lien partir du a de article puis de basculer dans la partie administration pour coller cette mention la place de la fin du lien dans le champ LIEN. Notez quil ne faut pas ajouter de barre oblique au dbut avant index.php. Cette barre oblique ferait chercher dans le dossier des documents du serveur Web Apache. Le rsultat sera dafficher la page de bienvenue de XAMPP lite que nous avons vue lors de linstallation. Les liens doivent tre relatifs la position courante. Cest ce qui permet de transplanter un site Web dun endroit lautre. Les liens relatifs restent valables au sein de la sousstructure. Avec des liens absolus, il faut tout mettre jour ds que lon implante la sous-structure dans une racine situe ailleurs.

16.3 Ralisation technique II

16.3.4 La boutique (shop)
Pour que les clients puissent commander et rgler en ligne, il faut ajouter au site un systme de prise de commande et de paiement. lheure o nous mettons sous presse, il nexiste aucun composant de e-commerce qui fonctionne de faon suffisamment stable avec la nouvelle version Joomla!1.5 (mais lexcellent VirtueMart en version 1.1 sera sans doute disponible quand vous lirez ceci). De plus, M. Bertrand aimerait ne pas installer trop de composants additionnels, pour limiter les efforts de maintenance et de mise jour. Son fils Didier a alors lide de mettre en place un panier de commande PayPal, le systme de paiement Web le plus rpandu au monde qui appartient la socit eBay. PayPal propose un grand nombre doutils pour les vendeurs, et notamment un systme de panier de commande. M. Bertrand dcide donc de crer un compte PayPal associ une carte bleue. Il existe des systmes concurrents PayPal, comme WorldPay, qui offrent peu prs les mmes fonctions. Pour linstant, trois produits sont proposs la vente :

un blanc 10 euros la bouteille ; un ros 10 euros la bouteille ; un rouge 12 euros la bouteille.

PayPal permet de crer des boutons qui peuvent tre associs aux articles dcrivant ces produits. En cliquant sur le bouton, larticle est dpos dans le panier PayPal. Prcisons que les frais dexpdition et les taxes sont grs (voir Figure 16.28). M. Bertrand dcide dajouter des boutons pour PayPal dans laffichage du texte des articles Blancs, Rouges et Ross (pas dans les lments de menu !). Il va crer un module cet effet. Pour simplifier linjection du code HTML, il choisit No Editor dans le paramtre diteur WYSIWYG par dfaut accessible par la commande SITE > CONFIGURATION GLOBALE, page SITE. Par la commande EXTENSIONS> GESTION des modules, bouton NOUVEAU, il slectionne le type de module Custom HTML. Il ne reste plus qu insrer le code HTML rcupr depuis la page adquate du site PayPal dans la zone de texte de lditeur (sil avait conserv un diteur Wysiwig, il aurait fallu utiliser le bouton HTML pour insrer le bloc HTML). Le nouveau module sera plac dans la colonne gauche sous le menu gnral. Il reste choisir les pages dans lesquelles le bouton doit apparatre au moyen de la liste en bas gauche (voir Figure 16.29).

Figure 16.28 Dfinition des boutons du panier de commande.

Figure 16.29 Le nouveau module pour accder la boutique. Dans cet exemple utilisant PayPal, ladresse de messagerie de M. Bertrand est obligatoire dans le code source, mais le plugin Email Cloaking activ en standard masque ladresse pour des raisons de scurit. PayPal ne peut pas dans ce cas accder correctement au panier de commande. Il faut donc dsactiver le plugin par la commande EXTENSIONS > PLUGINS. Le site Web montre ensuite laspect de la Figure 16.30.

Figure 16.30 Un bouton de commande PayPal sur le site Web. Lorsque le visiteur clique sur un tel bouton, il bascule dans laffichage dun panier de commande PayPal. Nous nexpliquons pas les dtails de cette prparation ici, mais sachez que cela permet de choisir le nombre darticles puis de passer au rglement (voir Figure 16.31).

Figure 16.31 Exemple de panier de commande sur PayPal. Si le client possde un compte PayPal, il peut payer immdiatement. Les internautes qui achtent sur le Web disposent souvent dun tel compte PayPal, et leur nombre ne fera quaugmenter.

16.3.5 Les reportages

Pour offrir aux visiteurs de son site un aperu de la rgion dans laquelle il est implant, M. Bertrand dcide de donner accs des images et des vidos. Il installe dabord le composant de galerie de photos Expose (revoyez la section 12.3 du Chapitre 12). Il cre une collection Vendanges contenant un album 2007, une collection Fiesta vinicole avec un Album 2007 et une collection Production (voir Figure 16.27). Son fils Didier ajoutera dautres documents ultrieurement.

Figure 16.32 Le gestionnaire dalbum Expos. Il cre ensuite un lment de menu vers le nouveau composant par la commande MENUS > MAIN MENU, bouton NOUVEAU. Il donne au lien le titre Reportages. Une fois quil la sauv, il peut dfinir exactement la position de llment au sein du menu. Les images sont ensuite disponibles partir du nouveau lien REPORTAGES (voir Figure 16.33).

Figure 16.33 La section Reportages du site Web.

16.3.6 Lespace rserv aux membres

Lespace rserv aux visiteurs qui possdent un compte dutilisateur doit leur proposer des promotions, un plateau de tlchargement de documents au format PDF (certificats, analyses du sol, etc.) ainsi quun moyen de modifier les coordonnes du compte. Le menu utilisateur M. Bertrand cre un nouvel article non catgoris portant le titre Promotions. Il vrifie que larticle est publi, quil napparat pas sur la page daccueil et quil nest accessible quaux utilisateurs enregistrs (voir Figure 16.34).

Figure 16.34 Le nouvel article Promotions Par la commande MENUS > GESTION DES MENUS, bouton NOUVEAU, il cre un nouveau menu quil appelle Menu utilisateur (voir Figure 16.35).

Figure 16.35 Cration du troisime menu, Menu utilisateur. Il place par la commande EXTENSIONS > GESTION des modules le nouveau menu dans la colonne gauche, il lactive et en limite laccs aux utilisateurs enregistrs (voir Figure 16.36).

Figure 16.36 Le menu utilisateur dans la gestion des modules. Il connecte ensuite larticle son nouveau menu en rglant le niveau daccs sur ENREGISTR (voir Figure 16.37).

Figure 16.37 Llment du menu utilisateur. Il va alors vrifier le rsultat sur son site Web. Il ouvre une session avec son compte dadministrateur pour constater lapparition de son nouveau Menu utilisateur conditionnel. De plus, ayant ouvert la session en mode Administrateur, il dispose dune icne de crayon permettant de modifier tous les contenus depuis la partie publique (voir Figure 16.38).

Figure 16.38 Le nouveau Menu utilisateur sur le site Web. Il en profite pour cliquer sur licne ddition pour modifier le contenu dun article. Il peut mme accder aux paramtres et aux mtadonnes. Il se souvient tout coup que le bouton DCONNEXION nest peut tre accessible que sur la page ACCUEIL DU SITE. Dans ladministration, il choisit la commande EXTENSIONS > GESTION DES MODULES et accde aux paramtres du module LOGIN (Accs membres) pour choisir loption Tous dans la section Affectation de menu gauche. Le plateau de tlchargement Il faut ensuite dfinir une section du site proposant des documents tlcharger. M. Bertrand voudrait permettre aux visiteurs dobtenir les certificats, mais seulement aprs quils se soient identifis. Il va utiliser cet effet le composant standard Lien Web de Joomla. Par la commande COMPOSANTS > LIENS WEB, page CATGORIES, il commence par crer trois catgories :

Communiqus ; Certificats ; Analyses du sol.

Il prvoit pour chaque catgorie une petite description et pourra ajouter plus tard une image. Les catgories ne doivent tre accessibles quaux utilisateurs enregistrs (voir Figure 16.39).

Figure 16.39 Cration dune catgorie de liens Web. Les fichiers PDF tlcharger doivent tre stocks dans un sous-dossier spcial du dossier des mdias (SITE > GESTION DES MDIAS). Il cre ce sous-dossier en saisissant dans le champ ct du chemin daccs le nom pdf puis en cliquant sur CRER UN DOSSIER (voir Figure 16.40).

Figure 16.40 Cration du sous-dossier pdf. Il ne reste plus qu transfrer tous les documents PDF. Pour les tests en local, il suffit de copier les fichiers dans le sous-dossier de XAMPP lite [CheminJoomla]/bertrand/images/pdf. Ils pourront tre transfrs sur serveur via FTP plus tard (voir Figure 16.41). (Quelques fichiers sont fournis sur le CD-ROM.)

Figure 16.41 Les fichiers PDF accessibles depuis Joomla! Il reste crer les moyens daccder au moyen dune adresse URL ces documents PDF via la commande COMPOSANTS > LIENS WEB, bouton NOUVEAU. Le lien indiquer doit effectivement permettre daccder aux documents (voir Figure 16.42). Il faut galement choisir la catgorie de rattachement. Nous dcidons de faire ouvrir le document dans une nouvelle fentre sans navigation. Rappelons quen local, ladresse URL scrit http://localhost/bertrand/images/pdf. Lors du transfert vers le site Web public, il faudra mettre jour ces adresses ou bien saisir directement le nom de domaine appropri.

Figure 16.42 Cration dun lien Web. Aprs quelques oprations rptitives, M. Bertrand dispose de plusieurs liens menant des documents PDF (voir Figure 16.43).

Figure 16.43 La srie de liens de tlchargement. Il reste donner accs cette srie de liens par le Menu utilisateur. M. Bertrand utilise la commande MENUS > MENU UTILISATEUR, bouton NOUVEAU. Dans la fentre de choix du type, il slectionne Liens Web puis le sous-type LISTE DES CHAMPS DES CATGORIES DE LIENS WEB (voir Figure 16.44).

Figure 16.44 Choix du type et du sous-type pour un lien Web. Dans la fentre de dfinition de llment de menu, il choisit le titre Tlchargements. Seul les utilisateurs enregistrs doivent y accder. Ds quil clique sur Sauver, il peut dans la liste positionner le nouveau lien sous le lien des promotions. Sur le site Web, le lien apparat effectivement. Il donne accs aux trois catgories. En cliquant sur une catgorie, cela fait apparatre une liste de fichiers PDF avec un lien pour les afficher ou les transfrer (voir Figure 16.45). M. Bertrand est trs satisfait. Il ne sagit pas dun vritable systme de gestion documentaire mais il suffit amplement ses besoins, dautant plus quil peut tout de mme suivre le nombre de clics pour chaque document. Les descriptions et le mode daffichage du tableau peuvent tre paramtrs par MENUS > MENU UTILISATEUR > TLCHARGEMENTS, bouton PARAMTRES.

16.3.7 Coordonnes de lutilisateur

M. Bertrand se souvient que les donnes dexemples de Joomla! possdaient un lien dans le Menu utilisateur. Il permettait au visiteur identifi de modifier ses coordonnes (adresse de messagerie, mot de passe, etc.). Il veut quun tel lien soit disponible dans son propre menu utilisateur. Il cre

donc un nouvel lment de menu et choisit comme type Utilisateur, puis encore Utilisateur, puis User form layout (Mise en page formulaire utilisateur). Son menu dispose ensuite dun lien appel Mes coordonnes accessible ds quune session nominative est ouverte (voir Figure 16.46).

Figure 16.45 Le plateau de tlchargement sur le site Web.

Figure 16.46 Accs aux coordonnes dun utilisateur enregistr.

16.3.8 Conclusion dtape

M. Bertrand est tonn de la vitesse laquelle tout cela a progress. Il contacte Ruth pour lui faire part de lavancement des travaux. Mais Ruth est un peu dcontenance parce que les templates quelle avait conus t destins la version Joomla!1.0.x. Or, elle vient de constater que bien des choses ont chang dans la version 1.5. Elle pense cependant mettre jour ses templates pour le lendemain. Elle transmet par messagerie deux captures dcran des travaux en cours (voir Figure 16.47 et Figure 16.48). Lorsquelle a essay dinstaller lun de ses templates dans Joomla! 1.5, Ruth a trs vite remarqu que de nombreuses classes CSS avaient chang de nom. Pour mieux tudier les noms de ces classes et les autres paramtres, Ruth dcide dinstaller et de faire afficher la barre doutils appele Web Developer pour Firefox (voir Figure 16.49). Cette extension de Firefox est fournie sur le CD-ROM en franais.

Figure 16.47 Le projet de templates du site Web public.

Figure 16.48 Le projet de templates de la partie boutique.

Figure 16.49 Affichage des noms des classes CSS grce lextension Web Developer de Firefox. Ruth et M. Bertrand dcident que M. Bertrand implantera son site Web sur le serveur public avec un template standard. Les templates spcifiques seront mis en place plus tard.

16.3.9 M. Bertrand dcouvre le langage CSS

M. Bertrand nest plus un dbutant en langage HTML. Il aimerait bien savoir plus prcisment comment fonctionne son template. Sen suit une longue discussion avec Ruth... Ruth lui explique que laspect visuel du template est dfini par deux fichiers CSS qui indiquent au navigateur du visiteur comment celui-ci doit prsenter les donnes. Ce sont ces fichiers qui dterminent par exemple la couleur rouge ou brune de larrire-plan, lajout dun graphique, et bien dautres choses. Le langage CSS se fonde sur un concept de feuilles de styles en cascade (une arborescence) et les deux fichiers CSS se nomment template.css et joomlastuff.css. Ruth a optimis ces deux fichiers pour les navigateurs les plus rpandus, cest--dire Internet Explorer 6.0 et Firefox 1.5 sous Windows dune part, et Firefox 1.06 et Safari 2.03 sous Mac OS X 10. Mais M. Bertrand aimerait apprendre le CSS pour crer lui-mme des templates ou modifier ceux qui lui sont fournis. Ruth lui explique alors le principe des feuilles de style en cascade (Cascading Stylesheets CSS) : le terme cascade signifie que les formats sont lus de haut en bas, et que certains formats sont des sousformats de formats prcdents. En cas de redfinition dun style, la nouvelle dfinition remplace lancienne. Voici quel endroit les dfinitions CSS peuvent tre implantes :

dans un fichier CSS externe indpendant ; dans la partie d'en-tte dun fichier HTML ; directement imbriqus dans une balise HTML.

Les instructions CSS rencontres dans les balises HTML ont priorit sur celles de mme nom trouves dans un fichier CSS externe. Cette remarque a son importance car Joomla! prdfinit

certains formats CSS et les injecte directement dans les balises HTML, remplaant vos propres dfinitions. Vous devez en tre averti. Pour que la feuille de styles du template de M. Bertrand reste simple, Ruth dcide de bien utiliser la structure hirarchique offerte par CSS. Elle choisit de faire contrler laspect des textes par les balises HTML classiques : body, table, div, p et form. Tous les contenus de ces lments doivent apparatre avec la police Verdana dans un certain corps et une couleur grise. Lorsquil est ncessaire de diverger de ce style de base un certain endroit du site Web, il suffit de lier les balises HTML une classe de style. Si nous partons par exemple de la classe nomme .tableaugris possdant la proprit suivante :
{ background-color: #333; }

Elle devient utilisable dans une balise HTML de la faon suivante :

<table class=tableaugris>

Il est donc possible de personnaliser des lments individuels grce aux classes CSS. Joomla! propose un grand nombre de classes prdfinies, ce qui permet de concevoir assez facilement ses propres templates. En guise dexemple, tudions le code servant la colonne gauche de navigation (voir Figure 16.50). Cette colonne hberge trois modules Joomla! :

Main Menu/Menu gnral ; User Menu/Menu utilisateur ; User Login/Accs membres.

Laspect visuel de cette zone de navigation est contrl par les classes suivantes (voir Listing 16.1).

Figure 16.50 La colonne gauche de navigation sur le site.

... <div class=moduletable_menu>

<h3>Menu gnral</h3> <ul class=menu> <li id=current class=active item1> <a href=http://localhost/bertrand/>Accueil du site</a> </li> <li class=parent item4> <a href=index.php?option=com_content...>Nos vins</a> </li> <li class=parent item8> <a href=index.php?option=com_content...>Notre terroir</a> </li> ... </ul> </div> <div class=moduletable> <h3>Connexion</h3> <form action=index.php method=post name=login id=form-login> <fieldset class=input> <p id=form-login-username> <label for=modlgn_username>Identifiant</label><br> <input id=modlgn_username name=username class=inputbox alt=username size=18 type=text> </p> ... </fieldset> <ul> <li> <a href=index.php?option=com_user...>Mot de passe oubli ?</a> </li> ... </ul> <input name=option value=com_user type=hidden> ... </form> </div> <div class=clear></div> ...

Listing 16.1 : Le code HTML de la colonne de navigation Le formatage CSS pas pas
Schma

Ltude du code HTML laisse deviner une certaine systmatique. Pour atteindre son objectif de prsentation, Ruth a dcid de demander dans le fichier index.php de gnrer les donnes du module sous leffet de linstruction style=xhtml. Sous leffet de cette demande, tous les modules utiliss dans le projet voient leurs donnes gnres lintrieur de couples de balises <div> sous forme dlments list. Les containers <div> reoivent des titres dsigns par la balise HTML <h3> suivie de listes. Les listes contiennent les liens. Cette approche offre beaucoup de souplesse car toutes les balises HTML peuvent tre contrles soit directement, soit via les classes prdfinies dans Joomla!. Les modules prsentent une image de fond estompe dfinie dans une balise HTML globale pour sappliquer tous les modules. Les classes conues pour lensemble HTML sont runies dans le fichier nomm template.css, de mme pour la couleur de fond de la colonne de navigation (voir Listing 16.2).
.naviside {

/*Image de fond */ background: url(../images/naviseite_oben.jpg) top left; /* Largeur */ width: 210px; /* Placement des contenus sur le bord suprieur */ vertical-align: top; /* Bordure */ border: 0px; /* Marge interne*/ padding: 0px; /* Marge externe*/ margin: 0px; /* Couleur de fond*/ background-color: #fff; /*Placement align gauche*/ text-align: left; /* Position globale dans le bloc HTML */ float: left; }

Listing 16.2: Code CSS de .naviside Ruth dcrit ensuite les diffrentes balises <div> qui sont exploites par les classes moduletable_menu et moduletable (Login Form). Elles dclarent les proprits applicables tous les menus. Il sagit de la largeur, des marges et de la couleur. Il suffit pour cela de connatre les deux classes
.moduletable et .moduletable_menu.

Ces deux classes sont prdfinies dans Joomla!. Ruth a distribu logiquement ses propres classes et celles prdfinies par Joomla! dans les deux fichiers CSS joomla_stuff.css et template.css.
.naviside .moduletable, .moduletable_menu { width: 210px; /* Largeur */ background: none; /* Fond */ margin-top: 18px; /* Ecart du module en haut */ text-align: left; /* Align gauche */ padding: 0px; /* Pas de marge interne entre module et contenu */ }

Listing 16.3: Code CSS Titres des modules Pour obtenir un titre conservant le mme aspect dans tous les modules (voir Figure 16.51) il suffit de faire rfrence au style de titre depuis le module via la balise <h3>. Dans le fichier CSS, il faut dabord rappeler la classe qui est ici .navioben. Tous les modules sont englobs dans cette division <div> via la classe .navioben. Cette manire de faire assure que seules les donnes des titres dans la rgion .navioben subissent un formatage avec ces styles CSS. Il ne reste plus qu stipuler lindispensable balise <h3>. Ruth a prvu une image de fond pour les titres afin denrichir laspect des menus (Listing 16.4).

Figure 16.51 Exemple de titre de module.

/* Dfinition des titres du module li */ .navioben h3 { font: 18px/18px Times New Roman, serif; /* Corps/Police*/ font-weight: normal; /* Variante de police */ color: #A49A66; /* Couleur */ background: url(../images/blatt.gif) top left; /* Image de fond */ background-repeat: no-repeat; /* Rptition du fond */ padding-left: 25px; /* Marge interne du bord gauche */ height: 25px; /* Hauteur div */ width: 185px; /* Largeur */ }

Listing 16.4: Style de titre de module lments des menus Aprs le titre, il faut sintresser la mise en forme des liens dans les listes HTML (voir Figure 16.52).

Figure 16.52 Exemples dlments de menu (sous-menu). Ruth ne veut pas voir de puce gauche des liens, ni de retrait vers la droite. Elle fait rfrence une liste en exploitant les classes prdfinies de Joomla! appeles .menu et .moduletable (Listing 16.5).
ul.menu, .naviside .moduletable ul { list-style: none; /* Liste sans puces */ display: block; /* Element de bloc, */ /* formatable comme bote */ width: 210px; /* Largeur */

margin: 0px; /* Marge externe */ border: 0px; /* Bordure */ padding: 0px; /* Marge interne */ }

Listing 16.5: Formatage dune liste de module Filets sparateurs Pour sparer visuellement les diffrents lments de menu, Ruth utilise des balises <li> dans la liste :
ul.menu li { border-bottom: 1px dotted #ccc; /* Bordure infrieure */ }

Il est possible de faire rfrence aux sous-rubriques des liens, par exemple pour forcer un retrait sur la bordure gauche (Listing 16.6).
/* Format des listes des sous-rubriques */ ul.menu ul { /* Marge externe simulant un retrait du texte */ margin-left: 10px; background-color: #EEE; /* Autre couleur de fond */ width: 200px; /* Largeur rduite */ }

Listing 16.6: Exemple de sous-rubrique La bordure infrieure des sous-rubriques est personnalise en harmonie avec la couleur de fond :
ul.menu ul li { border-bottom: 1px solid #fff; /* Bordure infrieure */? }

Il serait mme possible de personnaliser laspect de chaque lment de la liste puisque chaque balise <li> possde sa propre classe : level1 item1, .level1 item2 parent, .level1 item3 parent, .level1 item4 Liens vers les contenus Nous en arrivons enfin aux liens. Le formatage concerne la balise <a> situe dans la liste <ul> et se base sur la classe .menu. Voici comment tous les liens doivent se prsenter :
ul.menu a {? text-decoration: none; /* Lien sans soulignement */ color: #6B5E588; /* Couleur de texte */ font-size: 11px; /* Corps de texte */ padding-left: 10px; /* Marge gauche de bordure */ }

Leffet visuel appel hover (survol) permet de faire varier la couleur de fond ou de texte dun lien lorsque le pointeur est amen au-dessus sans cliquer. Ruth a dcid de grer ce cas de la manire suivante :
ul.menu a:hover { color: #CAC303; text-decoration: none; }

Finalement, la classe suivante est utilise pour mettre en valeur llment de menu de la page actuellement affiche :
.menu li#current a { color: #B22819; /* Couleur de texte */? }

... et ce sera tout ! Aprs toutes ces explications, M. Bertrand se rjouit de constater que le formatage CSS nest pas aussi complexe quil lavait craint. Il a encore la tte qui bourdonne, mais Ruth lui conseille quelques sites pour parfaire ses connaissances. Les styles CSS ont fait lobjet de nombreux tutoriaux sur le Web.

16.3.10 Prise en compte de nouveauts de la version 1.5

Si vous avez dj conu ou pris une certaine habitude dutiliser des templates Joomla! 1.0.x, vous apprendrez avec joie que Joomla! 1.5 permet de continuer les exploiter si vous les basculez dans le mode compatibilit Legacy (voyez aussi le Chapitre 12)! Il y a quelques prcautions prendre lorsque lon est concepteur de templates. Les anciennes instructions mosload() du code PHP ainsi que les anciennes classes CSS situes dans le fichier index.php du template ne fonctionnent parfois plus dans certains contextes car le formatage a volu. volutions au niveau du menu Les possibilits de mise en forme des modules et des composants ont normment augment par rapport Joomla!1.0. Il tait possible auparavant de les personnaliser en faisant rfrence des extensions de classes CSS dfinies par le programmeur. Dornavant, vos donnes HTML gnres peuvent tre contrles au niveau du format au moyen des instructions suivantes places dans le fichier index.php du template. Voici les options disponibles : table (par dfaut). Les donnes du module sont prsentes dans une colonne de tableau. horz. Le module est prsent horizontalement dans la cellule du tableau environnant. xhtml. Le module est prsent dans un lment div simple. rounded. La sortie utilise un format permettant d'afficher des coins arrondis. Le nom de l'lment <div> passe de moduletable module. none. Les donnes du modules saffichent sans aucune mise en forme. Cette volution est fantastique ! Il devient possible de produire tout un site Joomla! sans utiliser aucune balise de tableau. Cela permet de garantir un contenu prsent de faon logique et qui peut atteindre ses objectifs daccessibilit. Par ailleurs, en adoptant le principe des balises <div>, on dispose dune bien plus grande libert quavec les tableaux HTML, qui navaient lorigine pas t conus pour une si lourde tche.

16.4 Implantation sur le serveur Web

Soumis par Hagen Graf le 20. mai 2008 - 23:15.

Bertrand Chapitre 16

Pour linstant, le site Web de M. Bertrand est purement local, mais il possde maintenant laspect dsir pour le lancer dans le vaste cybermonde. M. Bertrand a fait une tude de march pour slectionner un fournisseur daccs Internet et a fini par opter pour une petite entreprise gographiquement proche. Elle lui a propos une interface dadministration scurise SLL avec Plesk pour le paramtrage du serveur Web, de la base de donnes et de la configuration de messagerie (voir Figure 16.53). Linterprteur PHP fonctionne en mode scuris, Safe Mode. La base de donnes est administre par le trs connu outil phpMyAdmin. M. Bertrand tenait administrer son serveur avec un outil Web, pour ne pas avoir diter manuellement diffrents fichiers de configuration (cest dailleurs dangereux pour celui qui ne sy connat pas bien). Il existe bien dautres interfaces dadministration en dehors de Plesk, comme par exemple Confixx, Visas ou encore Webmin.La plupart des fournisseurs daccs Internet proposent soit lun des outils standard, soit une version personnalise.

Figure 16.53 Exemple dinterface dadministration Web.

16.4.1 Procdure dinstallation

Dans son installation locale, M. Bertrand sest dabord servi de linstallateur Web intgr Joomla! pour configurer le programme. Il a ensuite procd la cration de son site en le peuplant de donnes. Il aimerait fortement pouvoir transfrer les donnes et les dfinitions de son site. Au moins deux possibilits soffrent lui : Il transfre tous les fichiers de Joomla! par FTP sur le serveur du fournisseur daccs puis modifie manuellement les fichiers de configuration et importe enfin la base de donnes via phpMyAdmin. Il charge un fichier Joomla! par FTP sur le serveur puis procde linstallation distance avec

linstallateur de Joomla! pour importer enfin les donnes via phpMyAdmin. M. Bertrand opte pour la premire approche. Il lui faut dabord rassembler ses donnes de connexion FTP, son nom et son mot de passe MySQL, et bien sr son nom de domaine. Voici les donnes daccs dont il a besoin (ces donnes sont videmment diffrentes pour vous) : FTP Machine hte : bertrand.cocoate.com ; Identifiant (user) : fusfusfus ; Mot de passe : pwpwpw. Machine hte : localhost ; Identifiant (user) : dbusdbus ; Mot de passe : pwpwpwpw ; Base de donnes : dbdbdb.

16.4.2 Installation de Joomla! sur le site public

M. Bertrand dmarre son programme de transfert FTP et se connecte son espace. Il utilise loutil FTP propos par son fournisseur (FileZilla est fourni sur le CD-ROM).

Figure 16.54 Transfert FTP. 1. Il transfre toute la sous-structure de dossiers c:\xampplite\ htdocs\bertrand dans le dossier httpdocs (ou autre) du serveur chez son fournisseur daccs. 2. Il cre une sauvegarde de son fichier local configuration.php sur son propre PC puis ouvre loriginal dans un diteur de texte. Il doit en effet modifier quelques paramtres pour que la version locale puisse fonctionner sur le serveur distant. /* Paramtres de base de donnes */ ... var $host = localhost; // Normalement = localhost var $user = ; // Identifiant MySQL var $password = ; // Mot de passe MySQL

var $db = ; // Nom de la base MySQL 3. Il transfre ensuite le fichier de configuration modifi via FTP dans le dossier httpdocs (ou autre) du serveur 4. Puis il rgle les droits daccs (permission) de ce fichier avec la commande chmod 0777. Quasiment tous les programmes FTP savent excuter des commandes systme pour modifier les droits daccs un dossier ou un fichier. Au niveau des dossiers, Joomla! a besoin au minimum du niveau daccs correspondant chmod 755. Pour les fichiers, le niveau chmod 644 suffit.

16.4.3 Importation des donnes SQL

Pour que la base de donnes MySQL chez votre fournisseur daccs puisse disposer de vos donnes, il faut dabord les extraire de linstallation locale XAMPP lite. M. Bertrand accde via son navigateur son interface dadministration par ladresse http://localhost/adminicule. 1. Il slectionne la base de donnes bertrand dans la liste de gauche puis clique sur le bouton EXPORTER en haut. 2. Il clique si ncessaire sur loption TOUT SLECTIONNER car toutes les tables doivent tre exportes. 3. Dans la zone STRUCTURE, il active loption gnrale STRUCTURE ainsi que loption supplmentaire AJOUTER DROP TABLE. Ce choix permet dajouter une instruction SQL pour supprimer dventuelles tables homonymes avant de crer les nouvelles et dinsrer leurs donnes. Cette option est obligatoire puisque linstallateur Web a cr des tables vides qui entreraient en conflit sans cette option. 4. Dans le groupe doptions DONNES, il active loption globale DONNES ainsi que loption INSERTIONS TENDUES. 5. Tout en bas, au niveau de COMPRESSION, il choisit loption ZIPP, pour rduire la taille du fichier transfrer. 6. Il active bien sr en bas loption TRANSMETTRE, pour que les donnes exportes soient proposes via tlchargement. 7. Il ne reste plus qu cliquer sur le bouton EXCUTER (voir Figure 16.55). Un fichier portant le nom bertrand.sql.zip est propos au tlchargement (voir Figure 16.56).

Figure 16.55 Prparation de lexportation des donnes.

Figure 16.56 Rcupration du fichier dexportation bertrand.sql.zip. Cette archive contient toutes les bases de donnes avec les donnes contenues. Le fichier doit tre stock dans un dossier extrieur la structure de dossiers de Joomla!. Il faut ensuite dcompacter larchive afin dobtenir le fichier nomm bertrand.sql. Il contient une longue srie dinstructions SQL (vous pouvez le visualiser avec un diteur) qui permettent de recrer la structure de la base puis dy injecter toutes les donnes prsentes au moment de lexportation. M. Bertrand accde donc linterface phpMyAdmin de son fournisseur daccs. Il slectionne sa base de donnes actuelle (il faut lavoir cre) puis clique sur le bouton IMPORTER. Il se sert du bouton PARCOURIR pour slectionner son fichier local bertrand.sql puis clique sur EXCUTER pour recrer la base de donnes distance. Si tout sest bien pass, il doit pouvoir immdiatement accder son site Web chez le fournisseur daccs (voir Figure 16.57).

Figure 16.57 Opration dimportation des instructions SQL. Le site Web doit avoir le mme aspect que son site local. Dans son exemple, ladresse correspondante tait http://bertrand.cocoate.com (voir Figure 16.58).

16.4.4 Droits daccs aux dossiers et fichiers

Au moindre souci dans cette phase, il faut dabord vrifier les droits daccs ou permissions des dossiers dans lesquels vous avez stocker des fichiers. En ce qui concerne Joomla!, choisissez la commande AIDE > INFOS SYSTME pour obtenir une liste de toutes les permissions en cours (voir Figure 16.59).

Figure 16.58 Aspect du site Web public http://bertrand.cocoate.com.

Figure 16.59 Liste des permissions daccs aux dossiers. Le fournisseur daccs slectionn par M. Bertrand utilise le systme Linux sur ses serveurs. Sous Linux, les accs sont grs par utilisateurs et par groupes. Un utilisateur est dfini pour M. Bertrand et un autre pour le programme serveur Web Apache. Dans certaines configurations, ces deux utilisateurs ne font pas partie du mme groupe. Dans ce cas, il faut forcer les permissions pour que lun puisse accder aux donnes appartenant lautre, grce la commande en mode ligne chmod 0755.M. Bertrand en profite pour aller personnaliser le mot de passe du composant de galerie de photos Expos qui est au dpart manager.

16.5 Moteurs de recherche

M. Bertrand effectue deux oprations pour que son site soit aisment trouv par les moteurs de recherche Internet.

16.5.1 Adresses URL optimises

Chez la plupart des fournisseurs daccs, il possible dutiliser une option pour que les adresses URL prennent un aspect adapt aux moteurs de recherche. Le fournisseur choisi par M. Bertrand autorise ces adresses optimises. M. Bertrand active donc la fonction par la commande SITE > CONFIGURATION GLOBALE > PARAMTRES SEO (dans la page Site). Il modifie ensuite le nom htaccess.txt en .htaccess. Cela permet ensuite daccder la galerie Expos en crivant ladresse ainsi : http://bertrand.cocoate.com/Reportages (Voir aussi la section 6.4.1 du Chapitre 6.) Notez que cette reformulation des adresses ne fonctionne quavec le serveur Web Apache.

16.5.2 Balises Mta

M. Bertrand avait pris soin dajouter une petite description et quelques mots cls dans tous ses articles (revoyez la section 6.4.1 du Chapitre 6 au sujet des mots cls).

16.6 Ajout des templates spcifiques

Le lendemain matin, la fte du vin est termine. Didier et Marlne ramnent de nombreux documents photographiques. M. Bertrand met en place les fichiers PDF sur son site. La connexion pour le paiement par PayPal a t teste. Tout le monde se retrouve pour le djeuner, car Ruth a entretemps termin la conception de ses deux templates. Elle rapporte les fichiers sur une cl USB et raconte les dtails du processus de ralisation.

16.6.1 Installation des templates

M. Bertrand dcompresse les deux fichiers zip des templates pour obtenir deux dossiers avec des sous-dossiers pour chacun deux. Il transfre ensuite chacun des deux sous-dossiers via FTP dans le dossier bertrand/templates de son site Web (il faut dabord supprimer un ventuel sous-dossier portant le mme nom). Il choisit ensuite la commande EXTENSIONS > GESTION DES TEMPLATES pour instaurer son nouveau template tmpl_bertrand comme template par dfaut (voir Figure 16.60).

Figure 16.60 Activation du nouveau template dans le gestionnaire des templates. Le template secondaire tmpl_bertrand_shop doit tre utilis uniquement dans les pages concernant le vin, pour permettre une commande directe. Il suffit pour cela daller dans les paramtres dtaills de ce template (voir Figure 16.61).

16.6.2 volution des templates

Ruth a conu les deux templates avec plusieurs objectifs en tte. volution M. Bertrand veut faire voluer son site, y compris au niveau de son aspect. La conceptrice en a tenu compte. Elle a cre un gabarit bien structur qui permettra M. Bertrand de remplacer les images dans la partie suprieure lorsquil en aura le dsir. Mise en page Ruth explique la manire dont elle a travaill pour concevoir les templates : Laspect visuel dun site Web offre de nombreuses possibilits. M. Bertrand veut vendre du vin.

Figure 16.61 Slection des pages pour lesquelles le template de boutique doit tre utilis. Son template doit donc vhiculer une ide de recherche de la qualit dans la tradition, pour que lon devine que lon pourra acheter ici du vin de qualit. Il aurait t inefficient de concevoir un template de style technologique avec des effets mtalliques, mme si cela aurait donn un aspect moderne. Nous avons choisi des visuels de grappes de raisins et des couleurs de terroir. Les tons ont t appareills au niveau des couleurs de fond et des lments graphiques. Plusieurs lments participent laspect visuel : le logo, le choix des couleurs, le style des photographies et des graphiques (les graphiques regroupent tous les lments qui ne sont pas des photographies, et donc aussi les boutons et symboles) et enfin les polices de caractres. Tous ces lments doivent tre correctement positionns pour occuper lespace de la page. Les lments doivent bien sadapter et cohabiter pour donner un effet visuel harmonieux. Mieux vaut nutiliser quune seule police de caractres, en la faisant varier par le gras et litalique. Dans les templates Bertrand, jai opt pour une police de caractres trs classique pour les titres, afin de donner un aspect traditionnel. Il sagit de la police Times, trs utilise dans les quotidiens. Il nest pas ncessaire de vouloir toujours tre original. La sobrit a du bon. Un portrait retrouv Pendant toutes ces discussions, Ruth a griffonn un petit portrait de M. Bertrand quelle lui transmet par messagerie. Il lajoute immdiatement sa galerie de photos.

Figure 16.62 Portrait de M. Bertrand.

16.7 Tout est bien qui finit bien

Le site est en ligne et les travaux nont effectivement dur que deux jours. Au cours des deux semaines suivantes, M. Bertrand insre les nombreuses photographies des vendanges et peaufine ses textes. Il demande des amis et connaissances de venir visiter le site et de senregistrer pour le tester. Il obtient mme dj une premire commande. Aprs avoir discut longuement avec son fournisseur daccs au sujet des procdures de mise jour de Joomla!, M. Bertrand signe un contrat de maintenance dans lequel le fournisseur sengage procder automatiquement aux mises jour de Joomla! ds quelles sont disponibles. Le site reste assez simple maintenir dans son tat actuel. Il utilise en effet les composants standard de Joomla!. La galerie Expos fonctionne dans un cadre iframe HTML sur le mme principe que le composant Wrapper. M. Bertrand est rassur de savoir que les mises jour sont dj organises. Vous pouvez visiter le site de la conceptrice Ruth ladresse http://www.ateliersite.de si vous tes germanophone.

16.7.1 Retour dexprience

La majorit des petits sites Web naissent comme celui de M. Bertrand. Jai personnellement vcu trs souvent cette approche. Mme si les grandes entreprises ne lavouent pas aisment, leurs propres sites Web aussi commencent modestement. Les principes restent en effet les mmes. Une agence de conception graphique prend en charge la cration visuelle et une quipe technique se charge de la programmation et des traitements. Souvent des quipes spcifiques sont dfinies pour rdiger les textes, pour se charger de la charte graphique et pour se soucier de la scurit. Lquipe technique soccupe galement de limplantation sur les machines htes des serveurs. Gnralement, tout se droule sans souci sous Joomla!.

ANNEXES
A.1 Ressources Web
Joomla! est un projet libre Open Source qui reprsente le fruit des ides et de lexprience des milliers dindividus qui lexploitent, le font voluer et le mettent disposition sur le Web. Les sites Web de rfrence pour Joomla sont ceux-ci : http://www.joomla.fr http://www.joomlafrance.org http://www.joomlafacile.fr http://www.joomlabs.net/ Voici le site de rfrence en langue anglaise et en langue allemande : http://www.joomla.org/ http://forge.joomla.org/ http://www.joomla.de/ Vous y trouverez rponse presque toutes vos questions. Fouillez surtout dans les forums. Ainsi arm, vous tes assur de pouvoir exploiter Joomla! avec satisfaction. Voyez aussi le site xing qui hberge un forum Joomla! particulirement actif : http://www.xing.com/net/mambo Enfin au niveau scurit, voyez ce site : http://docs.joomla.org/Category:Security_Checklist

A.3 Instructions jdoc et templates

Llment nomm <jdoc> vous permet de dfinir des sections contenu dynamique dans votre templates sans devoir utiliser la moindre instruction PHP (voir Tableau A.2). Code dans le template <jdoc:comment> Votre commentaire </jdoc:comment> <?php echo <?xml version= 1.0 encoding= utf-8 ?.>; ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd > <html xmlns= http://www.w3.org/1999/xhtml xml:lang= <?php echo $this->language; ?> lang= <?php echo $this-> language; ?> dir= <?php echo $thisEffet Commentaires Dclaration du type de document (en-tte XHTML)

>direction; ?> > HEAD <meta http-equiv= Content-Type content= text/ html; Dsignation du type de contenu valide <?php echo _ISO; ?> /> <link rel= stylesheet href= <?php echo $this>baseurl ?>/ templates/system/css/system.css type= text/css /> <link rel= stylesheet href= <?php echo $this>baseurl ?>/ templates/system/css/general.css type= text/css Rfrences au fichier CSS /> <link rel= stylesheet href= <?php echo $this>baseurl ?>/ templates/<DOSSIER_DU_TEMPLATE_/css/temp late.css type= text/ css /> <?php if($this->direction == rtl) : ?> <link href= <?php echo $this->baseurl ? >/templates/ rhuk_milkyway/css/template_rtl.css rel=stylesheet type=text/css /> <?php endif; ?> BODY <jdoc:include type= message /> <jdoc:include type= modules name= [position] style= [Style] /> <?php if($this->countModules(left)) : ?> <?php endif; ?> <jdoc:include type=component /> Affichage des messages systme de Joomla! Chargement du module la position [position]. Pour [Style] (voir le Chapitre 13) Instruction conditionnelle : sil y a des modules en colonne gauche, les charger dans le template. Affichage du composant dont le nom est tir de ladresse URL.

Rglage du support de lcriture de droite gauche par CSS

Tableau A.2 : Instructions <jdoc:...> dans le fichier index.php dun template

A.4 change dune image dans le template

Pour changer limage constituant le logo, vous devez accder au code source du modle. Vous pouvez faire rfrence des images dans la structure HTML ou dans la structure CSS. Normalement, les graphiques positionner sont dj prpars pour possder la taille requise dans la zone rceptrice. Pour se limiter remplacer une image, deux approches sont possibles. Variante 1 1. Crez le graphique en tenant compte de la rsolution, des dimensions et du poids de fichier respecter. 2. Chargez le fichier dimage dans le Gestionnaire de mdias de Joomla!. 3. Cliquez dans limage pour tablir le lien vers elle. 4. Dans le code source du modle, ajoutez une balise <img src= > approprie pour rfrencer la nouvelle image. Variante 2 1. Crez le graphique en tenant compte de la rsolution, des dimensions et du poids de fichier respecter et sauvegardez-le sous exactement le mme nom que celui quil doit remplacer dans le modle. 2. crasez lancien fichier dans son dossier.

A.5 Linterface fonctionnelle API de Joomla!

Linterface API (Application Program Interface) est une srie de noms conventionnels qui dsignent les fonctions et mthodes du code source dont lexcution est autorise partir dun programme extrieur. Cette interface contient sa propre documentation. Il est possible de lextraire automatiquement du code source pour la consulter via un programme de documentation. La plupart des descriptions sont accompagnes dau moins un exemple dutilisation. Lquipe de dveloppement Joomla! propose lorigine ces aides au codage en langue anglaise depuis le site daide situ ladresse http://api.joomla.org (voir Figure A.1).

Figure A.1 Exemple de documentation de lAPI de Joomla!

A.6 Mot de passe de ladministrateur oubli ?

Si vous avez perdu ou oubli votre mot de passe pour accder ladministration de Joomla!, vous voici bien dpourvu. Heureusement, vous pouvez en dfinir un en accdant une table spciale de votre base de donnes. Vous utilisez cet effet un outil tel que phpMyAdmin. Dans lenvironnement XAMPPLITE, vous le lancez en vous rendant cette adresse locale : http://localhost/phpmyadmin/ 1. Dans la liste des bases gauche, slectionnez celle que vous utilisez pour votre site (pour ce livre, cest joomla150). 2. Faites dfiler la liste des tables gauche pour slectionner la table systme nomme jos_users. 3. Affichez les donnes de cette table (bouton AFFICHER) et cherchez lenregistrement de lutilisateur nomm admin. 4. Le mot de passe est crypt par le mcanisme MD5 (voir ce mot sur http://fr.wikipedia.org). Pour le modifier sans le connatre, cliquez sur licne MODIFIER (un crayon) de la ligne concerne pour basculer en mode fiche. 5. Ouvrez la liste droulante des fonctions du champ PASSWORD pour choisir MD5. 6. Replacer le contenu du champ de droite par votre nouveau mot de passe. 7. Cliquez enfin sur EXCUTER en bas aprs avoir bien mmoris le nouveau mot de passe ! (voir Figure A.2). La plupart des hbergeurs proposent loutil phpMyAdmin pour administrer vos bases de sites Web.

A.7 Migration de Joomla! 1.0.x vers Joomla! 1.5

Certains parmi vous grent des sites Web bass sur la version prcdente 1.0 de Joomla! ou sur Mambo 4.5.x. Vous voulez migrer vers Joomla!. Voici les quelques rgles respecter : 1. 2. 3. 4. 5. 6. Avant tout, la totalit des donnes du site Web doit tre sauvegarde. Actualisation des fichiers de code source communs. Actualisation des composants, modules et mambots complmentaires. Actualisation ou propagation ventuelle des modifications de programmes faites par vous. Test de compatibilit des donnes avec le nouvel environnement. Conversion des contenus au format de codage des caractres UTF8.

Vous en dduisez que moins votre configuration est personnalise par des composants spcifiques, plus la migration sera rapide et simple. Il nexiste pas de rgle unique de mise jour. Vous devez donc recueillir le maximum dinformations pour tablir sur papier un plan de migration individualis de votre site Web.

Figure A.2 Modification du mot de passe. Sauvegarde des donnes du site Avant tout essai de migration, vous devez crer une sauvegarde de vos donnes. Servez-vous de loutil de sauvegarde propos par votre hbergeur pour crer un vidage (dump) MySQL. Dans la plupart des cas, vous utiliserez phpMyAdmin (loutil choisi dans XAMPPLITE). Cliquez sur le bouton de la page EXPORTER, slectionnez toutes les tables de votre base (cliquez sur le lien TOUT SLECTIONNER) et activez toutes les cases du groupe doptions STRUCTURE. Dans le groupe DONNES, cochez INSERTIONS COMPLTES. Dans le groupe du bas, TRANSMETTRE, choisissez le format de sortie. Si lhbergeur lautorise, optez pour le format compress ( zipp ) qui permet dconomiser peu prs 95 % despace ! Validez vos choix en cliquant sur le bouton EXCUTER (voir Figure A.3).

Les tables de donnes sont copies de la base dans le fichier archive qui est alors propos en tlchargement (mme localement). Cette archive contient toutes les requtes SQL permettant de reconstruire les tables dans une nouvelle base avec tous les contenus. Cest la meilleure solution de sauvegarde des donnes du site.

Figure A.3 Sauvegarde dune base MySQL dans phpMyAdmin. Si vous avez besoin de restaurer la base en cas davarie ou de la dupliquer, dans phpMyAdmin, cliquez sur le bouton IMPORTER (voir Figure A.4), dsignez le fichier darchive via le bouton PARCOURIR et cliquez sur EXCUTER. Toutes les requtes SQL sont excutes dans lordre adquat, puis les donnes sont injectes dans les tables (voir Figure A.5).

A.7.1 Sauvegarde des fichiers sources

En plus des donnes dexploitation, vous devez aussi sauvegarder les fichiers de code source. Avec votre outil client FTP habituel, faites une copie de la totalit du dossier dinstallation de Joomla!.

A.7.2 Le script de migration

Vous devez dabord installer un composant de migration dans lancienne version 1.0.x de Joomla!. Grce lui, vous pouvez gnrer trois fichiers compresss .zip en cliquant sur le lien DUMP IT :

une sauvegarde complte du site Web ; une sauvegarde des composants du noyau ; une sauvegarde des composants additionnels.

Figure A.4 La page dimportation MySQL.

Figure A.5 Slection de larchive de sauvegarde. Rangez ces fichiers en lieu sr. Ils contiennent les donnes initiales non modifies de votre site Web Joomla! en version 1.0.x, notamment au niveau du codage des caractres !

A.7.3 Nouvelle installation de Joomla! 1.5.0

Crez un dossier puis copiez-y tous les fichiers de Joomla! 1.5.0. Configurez linstallation de Joomla! 1.5.0 comme expliqu au Chapitre 2 pour arriver jusqu ltape 6 (voir Figure A.6).

Figure A.6 Commande de migration de site. Activez loption CHARGER LE SCRIPT DE MIGRATION. Saisissez lancien prfixe de base de donnes (souvent mos_ ou jos_) puis slectionnez lancien codage des caractres (dans ENCODAGE ANCIEN SITE). Si vous ntes pas sr de votre rponse, ouvrez un fichier de langues et cherchez la valeur de la variable _ISO. Toujours dans la mme page, dsignez le fichier de sauvegarde des composants du noyau puis cliquez sur le bouton TRANSFRER ET EXCUTER. La suite dpend de la nature de votre site. Vous devriez voir apparatre un message de bonne fin dexcution de la conversion des donnes. Si une erreur survient en rapport avec la base de donnes, ce nest souvent pas grave. Essayez de bien comprendre lorigine probable du problme et corrigez la situation via linterface phpMyAdmin. (Les sites utilisant beaucoup de composants additionnels rencontrent plus souvent des problmes de migration.) Dans tous les cas, terminez correctement le processus de configuration en indiquant le nom du site et le mot de passe de ladministrateur. Que sest-il pass ? Tous les composants du noyau (com_content, com_weblinks, com_banner, com_contact, com_newsfeed, com_poll et com_users) ont t mis jour. Les liens de menus de ces composants ont t adapts. Les modules ont cependant t au dpart marqus comme dpublis. La position daffichage et les paramtres doivent encore tre vrifis et adapts. Aucun composant additionnel na t pris en compte, ni aucun fichier externe (bannires, images, fichiers PDF, etc.).

A.7.4 Variante de migration manuelle

Passons aux mauvaises nouvelles. Vous ne pouvez pas russir la modification des tables par phpMyAdmin, parce que les lettres accentues ne sont pas correctement converties lors du basculement de lencodage ! Toutes les donnes sont rcupres, mais les lettres accentues et signes spcifiques de lASCII (, , , , , etc.) sont mal affichs. Il faut faire transiter les donnes par une exportation vers le format UTF8 et retoucher quelque peu la structure des tables. Lexportation se fait aisment dans phpMyAdmin. Pensez activer la case de loption INSERTIONS COMPLTES. Les donnes exportes doivent tre stockes dans le format UTF8 avec un diteur qui en est

capable. (Si le volume de donnes reste rduit, le Bloc-notes de Windows fera laffaire.) Attention: Vrifiez bien de nexporter que les donnes des table et pas leur structure. Adaptation du schma de la base de Joomla! 1.5 Il ny a rellement que deux champs de donnes renommer : dans la table jos_core_acl_aro, le champ aro_id se nomme dornavant id ; dans la table jos_core_acl_aro_groups, le champ group_id se nomme dornavant id. Importation des tables Voici la liste des tables pouvant tre importes :

jos_banner ; jos_bannerclient ; jos_bannerfinish ; jos_categories ; jos_contact_details ; jos_content ; jos_content_frontpage ; jos_content_rating ; jos_core_acl_aro ; jos_core_acl_groups_aro_map ; jos_core_log_items ; jos_core_log_searches ; jos_messages ; jos_messages_cfg ; jos_newsfeeds ; jos_poll_data ; jos_poll_date ; jos_poll_menu ; jos_polls ; jos_sections ; jos_users ; jos_weblinks.

La table jos_usertypes nest plus utilise dans Joomla! 1.5. Les menus et les modules peuvent tre reconfigurs via phpMyAdmin ou via linterface dadministration. Et vous en avez fini avec la migration. Info: Si vous avez un peu dexprience avec phpMyAdmin, MySQL et le langage SQL, vous russirez sans problme la migration des composants du noyau. La migration des composants tiers est moins aise, mais il est certain que des scripts de migration vont apparatre sous peu. Si lon excepte le changement dencodage, il ny a pas eu de changement notable au niveau des tables. Lessentiel du travail de lquipe de dveloppement a concern le code source des composants notamment pour les adapter la nouvelle version. Vous trouverez un guide de migration complet sur joomla.org.

*BIBLIOGRAPHIE Accessible directement sur le site d'Amazon.fr Articles prcdents

CSS de Raphal Goetter

EUR 4,75

Css, un Jeu d'Enfants de Peter Muller EUR 5,70

Russir son rfrencement Web de Olivier Andrieu

EUR 23,75

Joomla et VirtueMart Russir sa boutique en ligne de Valrie Isaksen EUR 24,70

XHTML de Raphal Goetter

EUR 4,75

PHP et SQL de Cyril Pierre de Geyer

EUR 4,75

Ergonomie Web : Pour des sites web efficaces de Boucher Amlie

EUR 30,40

Autres lectures recommandes :

Joomla! 1.5 - Crez et administrez vos sites Web de Jean-Nol Anderruthy

Mastering Joomla! 1.5 Extension and Framework D... de James Kennard

Russir son site e-commerce avec osCommerce de Sandrine Burriel

Gnrer du trafic et du profit sur son site ave... de Andrew Goodman