Cours CMS : Installation et configuration de Joomla

Chapitre 1 : Introduction et Installation

1.1. Choisir le bon Joomla!

Joomla 1.5 est la dernière version de Joomla! Mais elle est récente, et donc a peu de sécurité et de stabilité. Nous allons donc travailler avec Joomla 1.0.15, plus ancien mais parfaitement stable et très sécurisé.

1.2. Comment ça marche?

Joomla utilise le PHP et le MYSQL principalement. Al'installation, Joomla crée une base de données. Le PHP assure une interaction entre les fichiers FTP et la base de données.

Coté web, il y a deux principales interfaces : Le Front Office, ce que l'utilisateur voit et à accès. De l'autre, le Back Office, ou panneau d'administration de votre site.

1.3. Installer Joomla sur un hébergement ou un serveur local

Votre hébergeur, qu’il soit gratuit ou pas, doit répondre aux pré requis systèmes suivants :

       PHP 4.2.x ou supérieur

       MySQL 3.23.x ou supérieur        Apache 1.13.19 ou supérieur

Tout d'abord, il faut se rendre sur le site francais de Joomla : et télécharger Joomla version 1.0.15. Le fichier est une archive .zip, il faut donc extraire les dossiers et fichiers (en gardant l'arborescence).

Dans le volet Site Distant, placez vous dans le répertoire racine de votre site (www, public_html, htdocs ou /), puis dans le volet d'exploration Site Local placez vous dans le dossier où vous avez décompressé l'archive contenant les sources d'installation de Joomla (D:\Joomla\core\Joomla_1.0.12­Stable­fr par exemple), sélectionner tout le contenu du dossier (les fichiers et dossiers sources d'installation de Joomla) puis effectuez un clic droit / charger sur le serveur. NB : Assurez qu'il n'y a pas d'erreurs dans la fenêtre « file d'attente ».

Avant ou après avoir uploadé les fichiers/sources de Joomla! vous devez impérativement créer un répertoire sessions à la racine du serveur FTP (pas dans un sous­répertoire!) faute de quoi vous ne pourrez pas accéder au backend de votre site. Assurez vous que vous êtes à la racine du serveur FTP, symbolisée par un / dans le champ Site distant puis effectuer un clic droit / Créer un répertoire sur le tout premier dossier de la liste. Appelez le sessions et validez.

Ouvrez la page d'accueil de votre site afin de lancer l’assistant d'installation de

Joomla : tapez simplement dans votre navigateur.

La page de pré installation est divisée en quatre blocs:

­Vérification des paramètres nécessaires: si vous voyez du rouge vous devez effectuer les actions correctives.

­Vérification de la sécurité: vous verrez forcément du rouge mais pas d'affolement, cela ne vous empêchera de poursuivre l'installation et de faire fonctionner votre site. Le traitement de ces avertissements de sécurité sera abordé dans le chapitre Sécurité plus loin dans le document.

­Configuration recommandée: vous verrez certainement un peu de rouge mais rien de bloquant là non plus, le traitement de ces avertissements de sécurité sera également abordé dans le chapitre Permission des répertoires: si vous voyez des noms de répertoires en rouge vous devrez les CHMODer en 777 à l'aide de votre client FTP (clic droit sur le dossier / Attributs du fichier).

 

Etape 1

A cette étape l'assistant d'installation va automatiquement créer la base de donnée s Joomla!. Renseignez les champs surlignés en jaune puis cliquez sur le bouton Suivant. Une boîte de dialogue vous invite à confirmer que les paramètres que vous avez saisis sont corrects, cliquez sur OK.

Etape 2

Renseignez le champ surligné en jaune à votre convenance:

Etape 3

NE MODIFIEZ PAS les champs URL et Chemin. Profitez en pour modifier à votre convenance le champ Mot de passe Admin généré automatiquement par l'assistant d'installation Joomla! Attention! Il s'agit du mot de passe associé au compte Admin, sans lui vous ne pourrez pas accéder à l'interface d'administration de votre site.

Etape 4

Vous êtes arrivé à la dernière étape de l'assistant d'installation. Avant de cliquer sur les boutons Site ou Admin un message vous invite à supprimer le répertoire d'installation Joomla!.. Renommez­le (par exemple en « ­installation ») Ceci étant fait vous pourrez retourner dans votre navigateur web et cliquer sur le bouton Site pour visiter votre tout nouveau site Web.

Votre site est consultable à cette URL: , l'interface d'administration est elle accessible via cette URL: administrator/ . Placez ces deux URL dans vos marque­pages!

1.4 La terminologie Joomla

Avant d'aller plus loin dans la lecture de ce document, voici une liste des termes les plus fréquemment utilisés dans la planète Joomla!, qui vous aidera à mieux appréhender son fonctionnement:

●   Article statique: un article statique est une unité de contenu non catégorisée. Pour créer un article statique, vous n'aurez pas besoin de créer une section et une catégorie au préalable.

●   Backend / Frontend : le backend est l’arrière­boutique de votre site (l'interface d’administration), le frontend c’est la boutique, ce que voient les visiteurs.

●   Composant: c’est une mini application intégrée à votre site Joomla, qui dispose de sa propre interface de configuration dans la console d’administration Joomla. Certains composants sont pré installés, c’est le cas par exemple du composant vote, du composant bandeaux publicitaires

ou encore du composant liens Web. D’autres peuvent être facilement installés par la suite (forums, livre d’or, galerie d’images, gestionnaire de

newsletter, gestionnaire de formulaires et bien d’autres encore).

●   Editeur WYSIWYG : comme son nom l’indique, il s’agit d’un éditeur qui va permettre de rédiger et de mettre en forme du texte comme vous le feriez avec un traitement de texte (What You See Is What You Get), sans vous soucier du code html sous­jacent.

●   Frontpage : c’est la page d’accueil publique de votre site.

●   Mambot : ce sont des morceaux de scripts qui permettent d’automatiser certaines tâches sur votre site Joomla. Par exemple, le mambot de recherche est un script qui permet d’effectuer une recherche sur tout votre site. Autre exemple, le mambot TinyMCE WYSIWYG Editor permettra lui de convertir le texte que vous saisissez dans l’éditeur WYSIWYG en code HTML interprétable par votre navigateur. Dernier exemple, le mambot {mospagebreak} qui permet d'insérer automatiquement un saut

de page à l’endroit où vous le positionnez.

●   Module : pour faire simple, un module est un bloc que l’on trouvera généralement autour du corps de la page web, par exemple dans la colonne de gauche ou la colonne de droite de notre site. Certains modules sont pré installés (module de menu principal, module d’identification ), d’autres, le plus souvent associés à des composants (par exemple module affichant une photo aléatoire tiré d’un composant galerie d’images) peuvent être installés ultérieurement.

●   Publier / dépublier : encore un notion importante à intégrer. Il s’agit de rendre visible ou pas sur le frontend un lien dans un menu, un module entier, une section, une catégorie, un article. Il est par ailleurs possible de définir un calendrier de publication, date à partir de laquelle ou jusqu’à laquelle un article sera publié.

●   Sauver / Annuler : vous effectuez une modification sur votre site (modification de la configuration générale, de la configuration d’un composant, création d’une catégorie, d’un article ), vous êtes sûr de votre affaire alors vous cliquez sur le bouton Sauvegarder, vous n’êtes pas sûr de ce que vous avez fait ou alors vous êtes perdu, vous cliquer sur le bouton Annuler, mais pas sur le bouton Page Précédente de votre

                navigateur !                                                                                                      Exercices :

●   Section / Catégorie / Article : Hiérarchie, arborescence, nous verrons ca

                plus tard.                                                                                                                 1. Installer Joomla dans le répertoire joomlatest, en appelant le site ririri

●   Template : un template gère toute la partie design de votre site. Il en 2.         Configurer Joomla de sorte que le nom du site soit rororo existe des centaines, disponibles gratuitement sur des sites qui se sont spécialisés dans cette activité. Nous verrons plus loin comment installer et personnaliser un template. Le terme template est l'équivalent de skin, thème ou encore gabarit dans d'autres CMS.

1.5 Configurer Joomla selon vos besoins

Dans le panneau d'administration, cliquez sur le dernier logo, Configuration du site. Dans cette page vous pourrez changer la configuration générale de votre site. Attention, certaines opérations peuvent être dangereuses, soyez prudent.

Une fois vos changements faits, cliquez sur Sauver.

NB : Vous pouvez également changer la configuration en éditant via votre client FTP le fichier sur la racine de votre site.

Chapitre 2 : La Gestion du contenu

2.1 Bien créer, modifier, et supprimer des articles, catégories et sections

a)  Principes de base

Ce contenu s'organise en sections et catégories:

•  Les sections sont des conteneurs qui contiennent une ou plusieurs catégories

•  Les catégories sont des conteneurs qui contiennent un ou plusieurs articles.

•  Les articles constituent le contenu de votre site.

créer un système de menu et y faire des liens vers vos articles. Votre système de menu n'est pas obligé de refléter la structure exacte de vos sections et catégories, même si c'est souvent la façon la plus simple de procéder. La structure section/catégorie/article est là pour vous permettre de vous y retrouver en tant qu'administrateur. Les visiteurs de votre site verront vos contenus au moyen des menus à leur disposition. Cela vous montre aussi que l'absence d'une hiérarchie plus importante (sous­catégories, sous­ sous­catégorie, . etc.) est un faux problème puisqu'on va pouvoir la faire dans les menus.

b)  Créer une section

le même texte pour le nom et le titre.

Vous pouvez aussi spécifier une image à associer à la section. Les images peuvent être transférées en utilisant le gestionnaire de média. La "position de l'image" vous permet de déterminer la position de l'image dans la description si toutefois vous souhaitez y insérer une image. Dans un premier temps nous n'allons pas nous en préoccuper ni d'ailleurs des autres options de cet écran et nous rendre vers la zone "description".

Important: Le niveau d'accès est un paramètre extrêmement important de Joomla!

Il détermine qui aura le droit de visualiser le contenu.

•  Public signifie que tous les visiteurs du site y auront accès

•  Membre restreint l'accès du contenu à "tous les utilisateurs enregistrés"

(statut "Registred" et au dessus)

•  Special signifie que l'accès est réservé à tous les utilisateurs ayant un statut supérieur à "Registred" (Author, Editor, Publisher, Manager, Administrator, Super Administrator).

Ce niveau d'accès peut s'appliquer à tous les éléments qui vont suivre : Section, Catégories, Articles, Menus et à bien d'autres choses encore.

La zone "description" vous permet de décrire le contenu de la section. Souvenezvous qu'une section est composée d'une ou plusieurs catégories, et que lorsqu'un visiteur du site voit cette description, elle est en général accompagnée de la liste des catégories qui composent la section. La zone "description" utilise un composant tiers (plus exactement un mambot ou plugin) que l'on appelle un éditeur HTML. Joomla vous permet d'utiliser tout une série d'éditeurs HTML compatibles, mais l'éditeur recommandé et illustré ici se nomme TinyMCE. Celuici produit un code HTML respectueux des standards du W3C. N'ayez aucune inquiétude si vous ne comprenez pas ce que cela signifie, mais sachez juste que vous pouvez avoir un éditeur sensiblement différent de celui présenté ici. Si aucun éditeur HTML n'apparaît dans votre système, vous devrez en installer ou en activer un. Dans l'installation par défaut de Joomla l'éditeur TinyMCE est fourni

et activé. De nombreux utilisateurs préfèrent JCE qui est une version améliorée de TinyMCE.

Vous pouvez utilisez la barre d'outils située en haut de la barre de description pour modifier la mise en forme de la description – pour ajouter gras, italique, souligné, liste à puce, etc La liste déroulante "Styles" regroupe les styles qui ont été utilisés dans le template que vous utilisez. L'application d'un style sur un texte sélectionné peut produire toutes sortes de résultats: changer la couleur, la taille, ajouter une image de fond et bien d'autres choses encore. Il suffit de sélectionner le texte dont vous voulez changer la présentation à l'aide de la souris et de sélectionner le style à lui appliquer à l'aide de liste déroulante. Vous verrez immédiatement les modifications à l'écran.

A coté des "Styles" vous avez une autre liste déroulante baptisée "Format" qui permet de spécifier le type d'information que vous êtes en train d'écrire – par exemple vous pouvez indiquer que le texte sélectionné est un paragraphe, un titre principal, un titre secondaire, etc. La façon dont le texte sera alors formaté dépend des paramètres de votre template – plus exactement de la feuille de style. Les autres options de la barre d'outils sont en tous points similaires à celles que vous pouvez trouver dans la plupart des traitements de texte. Ces options vous sont donc familières et vous pouvez cliquer à tout moment sur l'icône "Aide" (le point d'interrogation) pour plus d'informations (en Anglais).

Lorsque vous aurez fini de créer ou d'éditer votre section, cliquez sur le bouton "Sauver" en haut à gauche de l'écran pour sauvegarder votre travail.

c)   Créer une catégorie

La création d'une catégorie est à peu près identique à la création d'une section.

Depuis la page d'accueil, cliquez sur l'icône "Catégories" ou sélectionnez l'option "Gestion des Catégories" du menu "Contenu". Le gestionnaire de catégorie est tout à fait similaire au gestionnaire de section, mis à part quelques options supplémentaires: vous pouvez filtrer les catégories d'une section particulière et vous pouvez déplacer une catégorie et son contenu vers une autre section .

Lorsque vous cliquez sur le bouton "Nouveau" ou sur le lien (le nom) d'une catégorie existante vous entrez dans l'éditeur de catégories. Comme vous l'avez déjà deviné il est presque identique à l'éditeur de section. En fait l'unique différence est que vous devez spécifier à quelle section la catégorie appartient.

d)  Créer un article

Nous allons maintenant créer un article – c'est­à­dire un élément de contenu qui s'insère dans l'une de vos catégories. Il y a plusieurs façons de procéder:      1­ Vous pouvez aller le créer directement dans une section en passant par le menu "Contenu" option "Articles par section" (qui vous amènera vers une liste de tous les articles de cette section – vous pouvez ensuite les filtrer de nouveau par catégorie).

     2­ Vous pouvez aussi cliquer sur l'icône "Tous les articles" de la page d'accueil ou l'option "Tous les articles" du menu "Contenu" (ce qui vous amènera vers une liste de tous les articles de toutes les sections – vous pouvez ensuite les filtrer par section et/ou catégorie).

     3­ La dernière méthode est de cliquer sur l'icône "Créer un article" sur la page d'accueil – ce qui vous amènera directement vers l'éditeur d'article.

Lorsque vous créez ou éditez des articles, vous avez nettement plus d'options disponibles que pour les sections ou les catégories. L'éditeur d'article comporte deux zones de saisies. Ceci pour vous permettre de diviser votre article en deux parties: une introduction (ou résumé) et le texte principal. Diviser votre article de la sorte vous permet de présenter tous les articles d'une catégorie ou d'une section dans un style "blog" ou journal. Au lieu d'une simple liste de liens vers les différents articles, vous pouvez présenter un titre suivi d'un paragraphe introductif et d'un lien vers l'article complet. Cela permet au visiteur de scanner facilement les articles et de sélectionner ceux qu'ils souhaitent lire. Le paragraphe d'introduction peut être le premier paragraphe de l'article ou un petit résumé du contenu de l'article – une sorte de "teaser" qui incite le lecteur à cliquer sur le lien pour en savoir plus.

Si vous ne souhaitez pas utiliser la méthode du blog, vous devez, tout simplement, entrer l'intégralité du contenu de votre article dans le premier éditeur HTML et laisser le deuxième vide.

Lorsque vous souhaitez utilisez une de ces images dans votre article, utilisez le bouton "Insert Image" situé en bas à gauche de l'éditeur HTML. Cela aura pour effet d'insérer le texte {mosimage} dans votre contenu ­ {mosimage} est une balise qui commande à Joomla! d'insérer à cet emplacement l'image suivante dans la liste des images de l'article. L'image ne sera pas visible dans l'éditeur HTML. Par contre vous la verrez si vous faites une "prévisualisation" de votre site.

Vous pouvez utiliser {mosimage} aussi souvent que vous le souhaitez: à chaque fois que Joomla! rencontrera cette balise il la remplacera par l'image suivante ­ assurez vous bien que les images de la liste sont dans le bon ordre (par rapport à l'ordre d'apparition dans l'article) et corrigez éventuellement en utilisant les boutons "haut" et "bas".

Note: Vous pouvez vous servir gestionnaire de média pour transférer et organiser vos images dans des dossiers.

La liste déroulant "sous­répertoire" en dessous de la liste des images (onglet images liste de gauche) vous permet

de lister les images du répertoire que vous souhaitez utiliser.

De nombreux paramètres peuvent être définis à un niveau global (c'est­à­dire pour tout le site en sélectionnant l'icône "Configuration Globale" sur la page d'accueil), mais les paramètres de cet onglet vous permettent de remplacer les paramètres globaux du site pour un article en particulier. En passant la souris sur les légendes (soulignées en pointillés) vous verrez une courte explication des paramètres. Néanmoins dans Internet Explorer les explications passent souvent en­dessous des listes déroulantes et vous aurez à jouer un peu avec la souris pour lire le texte en entier! (ou téléchargez un bon navigateur comme Mozilla Firefox) pouvez avoir plusieurs menus, mais nous allons ici nous consacrer au "mainmenu" (le menu principal) qui est en général l'endroit où vous allez créer la majorité des liens.  La façon la plus simple (mais quelque peu limitée) d'ajouter un lien vers un article, est d'utiliser le dernier onglet de l'éditeur d'articles.

Une solution alternative (et plus souple) pour créer des options de menu consiste à utiliser le gestionnaire de menus en sélectionnant l'option "mainmenu" du menu "menu"

Cela vous amène au gestionnaire de menu du "mainmenu" (menu principal). Celui­ci présente de nombreuses similitudes avec les gestionnaires de sections et de catégories en termes de présentation et de fonctionnalités.

2.2 Administrer les menus  Lorsque vous choisissez d'ajouter un élément, vous arrivez sur l'éditeur de menus.

Cela peut sembler un peu déroutant en raison du grand nombre d'options Maintenant que nous avons réalisé un contenu structuré, nous devons fournir au           disponibles. Les plus importantes sont entourées en rouge .

visiteur un moyen d'atteindre l'information souhaitée. Afin qu'il puisse accéder à votre contenu, vous Lorsque vous cliquez sur "suivant" ou sur l'un des liens, vous êtes conduit sur un devez lui fournir un nouvel écran qui vous invite à

                                                                                                                                     menu composé          spécifier des informations complémentaires comme:

d'une liste d'options.      • le nom que vous souhaitez donner à l'option de menu Un menu peut être                • avec quel élément de contenu vous souhaitez faire le lien envisagé comme un      • si le lien doit s'ouvrir dans une nouvelle fenêtre ou non.

ensemble de   La liste exacte des options proposées dépend du type de menu sélectionné boutons             précédemment, mais voyons si nous cliquons sur Lien Article.

(organisés!!!) qui dirigent vos visiteurs vers les éléments de votre contenu

(articles/catégories/ sections).

Dans Joomla! vous

 

La boite de sélection "Lien Parent" donne une liste de tous les éléments de menu existants et vous permet d'en choisir un comme "parent" de l'élément que vous êtes en train de créer. N'utilisez cette option que si votre template accepte les systèmes de menu hiérarchiques – beaucoup de templates gratuits ne le permettent pas. Le résultat sera un sous­menu qui apparaît lorsque vous cliquez sur le lien parent.

Conseil: Une fois que vous aurez sauvegardé votre élément de menu, de nouvelles options seront disponibles. Lorsque vous reviendrez sur cet élément, la section paramètres sur le coté droit de l'écran vous proposera de nouvelles options qui dépendront du type lien que vous aurez créé. Ces options vous permettront de paramétrer l'affichage de cet élément de menu en particulier ainsi que celle de ses sous­éléments s'il s'agit d'un conteneur (section/catégorie). Si vous voulez changer l'affichage d'une page de votre site et que vous ne savez pas où le faire, il y a de grandes chances que vous trouviez les paramètres ici, au niveau de l'élément de menu.

Maintenant, lorsque vous prévisualisez votre site, vous allez voir apparaître la nouvelle option de menu, qui vous enverra vers l'article spécifié.

2.3 La page d'accueil

Comme vous le savez certainement déjà, la page d'accueil a une importance fondamentale pour la visibilité de votre site. C'est en général la première page que les visiteurs vont voir lorsqu'ils s'y connectent, mais c'est aussi cette page qui sera indexée en priorité par les moteurs de recherche. Fut une époque, mettre une belle image sans aucun texte et un lien "entrer" était à la mode, mais aujourd'hui, tous les professionnels s'accordent à dire qu'il faut y intégrer du contenu. Dans Joomla! le contenu de la page d'accueil est géré par le Gestionnaire de page d'accueil. Pour y accéder, cliquez soit sur l'icône "Page d'accueil", soit sur l'option "Gestion de la page d'Accueil" du menu "Contenu".

Vous y voila. Cet écran vous est déjà familier car il est très similaire au gestionnaire d'articles mis à part quelques options. Vous allez utilisez principalement ce gestionnaire pour définir l'ordre d'apparition des articles sur la page d'accueil. Pour ordonner les éléments, vous pouvez, à l'aide des petites flèches, faire monter ou descendre les articles ou taper un numéro d'ordre et le sauvegarder en cliquant sur la petite disquette.

Pour ajouter des articles à cette liste, allez sur le gestionnaire d'article, puis cliquez sur la petite croix rouge à droite du nom de l'article, elle se transformera en V .

Afin de choisir comment les articles vont être présentés, (le nombre d'articles sur la page, le nombre de colonnes, le nombre de lien, etc.) vous allez devoir changer les paramètres du composant "page d'accueil" dans le mainmenu. Une fois dans le mainmenu, cliquez sur le lien accueil.

Note: ce lien (accueil) est primordial pour le bon fonctionnement de Joomla! car c'est à partir de lui que sont déterminés tous les chemins, vous ne devez en aucun cas le supprimer ou le dépublier. (Il porte l'itemid 1)

Vous voici sur un écran qui s'intitule "Editer :: Lien vers un composant [ Page d’accueil ]". Nous allons nous concentrer sur le haut de la colonne de droite "Paramètres".

Pour ce qui est de la disposition des articles sur la page, ce sont les quatre valeurs encadrées qui vont la déterminer:

• Principal : 1 signifie que le texte d'introduction du premier article de la liste sera présenté

         sur toute la largeur de la page

• Intro: 2 / Colonnes : 2 signifie que les textes d'introduction des deux articles suivant seront présentés sur deux colonnes.

• Lien 1 : signifie que le titre du quatrième article de la liste sera affiché sous forme de lien

Maintenant un peu de mathématiques : si la somme des articles

(principal+intro+lien) est inférieure au nombre d'articles de la liste du gestionnaire de page d'accueil ­ ce qui est le cas ici puisqu'il y a 6 articles et que cette somme est de 4 ­ vous pouvez faire apparaître une barre de navigation en bas de la

page pour visualiser les articles suivants ainsi que le résultat de la pagination.

2.4 Les articles Multi­pages                                                                                          Remarque: Le titre de la première page viendra s'ajouter au titre de l'article sur toutes les pages.

Lorsque vous écrivez un article très long il est possible de le scinder en plusieurs

pages – sans pour autant avoir à écrire plusieurs articles. Cela donne au lecteur un   2.5 Le Gestionnaire de Médias confort visuel et lui facilite ainsi grandement la lecture.

Le visiteur aura alors à sa disposition deux outils de navigation:        Le gestionnaire de media est l'outil qui va vous permettre d'ajouter, transférer et

• Un petit index positionné en haut à droite de l'article       organiser les images de votre site afin de pouvoir les insérer dans les sections,

• Une barre de navigation (précédant­suivant) en bas de chaque page de   catégories et articles.

l'article.                                                                                                                       Pour accéder au Gestionnaire de média cliquez sur l'icône "Médias" de la page d'accueil ou sur l'option "Gestion des Médias du menu "Site"

Voyons maintenant comment le réaliser.

Vous voilà sur l'écran du gestionnaire de Média. Vous avez sous les yeux 4

Dans l'éditeur d'article vous avez en bas à gauche de l'éditeur HTML deux boutons. dossiers et une série d'images.

Le premier "insert image" que vous connaissez déjà sert à insérer des images dans Pour pouvoir utiliser les images dans vos articles elles doivent être stockées

le texte, le second "insert page break" permet d'insérer ces fameux sauts de page.

C'est très simple: positionnez votre curseur à l'endroit où vous souhaitez faire le saut de page et cliquez sur le bouton. Le résultat sera d'insérer le texte {mospagebreak} pour indiquez au logiciel de changer de page. Pour ceux qui ont suivi, cette fonction est un mambot.

Il ne vous reste donc plus qu'à donner des noms à vos pages.

Pour ce faire vous pouvez insérer les deux attributs suivant dans votre balise

{mospagebreak}:

Heading=le titre de la première page

Title=le titre de la page qui suit la balise.

Cela donne pour le premier saut de page:

{mospagebreak heading=ma première page & title=ma deuxième page}

Pour le deuxième saut et les suivant on n'utilisera plus que l'attribut "title" ce qui donne:

{mospagebreak title=ma troisième page}

impérativement dans le dossier "stories". Ce n'est que si vous les enregistrez à cet endroit que vous y aurez accès dans les éditeurs d'article, de catégories et de sections.

Pour atteindre ce dossier vous pouvez, soit cliquez sur son icône, soit le sélectionner dans la liste déroulante des répertoires. (Remarque: l'icône située à droite de cette liste déroulante permet de remonter d'un niveau dans l'arborescence)

Voici la liste des opérations que vous pouvez effectuer avec le gestionnaire de médias: Transférer une image:

Une fois dans le répertoire stories vous pouvez commencer à transférer des photos. Les formats d'image pris en charge sont JPG, GIF et PNG. Pensez à redimensionner vos images à l'avance, car vous ne pourrez pas le faire sur Joomla. Pour transférer une image cliquez sur le bouton parcourir, sélectionner l'image à insérer sur votre disque dur à l'aide de la boite de dialogue, validez, puis cliquez

sur l'icône "Upload" de la barre d'outil. Créer un dossier:

Afin de mieux organiser vos images vous pouvez créer de nouveaux dossiers au sein du dossier stories. Pour ce faire, entrez le nom de votre répertoire dans le champ créer un répertoire en haut à droite de l'écran, puis cliquez sur l'icône "Créer". Attention, ne placez pas les images que vous souhaitez utiliser pour la description des sections et des catégories dans des dossiers, sinon vous n'y aurez

pas accès dans leurs éditeurs respectifs !!! Supprimer une image:

Cliquez sur la petite corbeille située en bas à gauche du cadre de l'image. Afficher l'adresse de l'image

Cliquez sur le petit crayon situé en bas à gauche du cadre de l'image. Si vous avez quelques notions de HTML, vous connaissez déjà l'intérêt de cette fonctionnalité,

sinon elle ne vous sera d'aucune utilité. Agrandir l'image

Cliquez simplement sur la vignette de l'image. Elle s'ouvrira dans une nouvelle fenêtre en taille réelle.

Afficher les propriétés de l'image

Survoler l'image avec votre souris pour faire apparaître un tableau contenant ses propriétés.

Vous avez sans doute noté que nous n'avons pas parlé de déplacer les images d'un dossier à un autre. C'est tout simplement que ce n'est pas possible avec cet outil. Si vous souhaitez déplacer une image il va falloir la transférer à nouveau dans le répertoire choisi puis la supprimer de son répertoire d'origine.

Remarque: Il existe, bien entendu, des applications tierces beaucoup sophistiquées pour la gestion des images sur Joomla!, mais celle­ci à le mérite d'exister d'origine. L'idéal est d'avoir un éditeur HTML doté d'un gestionnaire d'image intégré comme JCE. Cela permet de s'affranchir de cet outil qui manque de souplesse ainsi que du mambot {mosimage} qui n'est pas non plus extrêmement convivial.

Exercices

1.   Créer une section Films, un section Documentaires

2.   Créer une catégorie dans la section Films, appelée Action et une autre Aventure

3.   Créer deux catégories dans Documentaires : Arte et Planete

4.   Créer un Article MultiPages dans Films avec un texte Lorem Ipsum

5.   Créer un Article en ajoutant une image avec mosimage

6.   Créer un article dans films d'action, et le relier par Mainmenu

7.   Créer un article et le mettre en page d'accueil

Bloc Notes :

Chapitre 3 : Les composants, modules et mambots

3.1 Les modules Joomla!

Bon et bien voilà ! Les articles sont créés et rangés par catégories, elles­mêmes contenues dans des sections. Le moment est venu de rendre visible tout cela sur votre site en plaçant des liens dans un ou plusieurs modules de menu. Nous allons donc conserver le module Menu Principal où ne seront conservés et ajoutés que des liens disons généraux et nous allons créer un nouveau module de menus par sections de contenu Nous faisons ce choix par souci de cohérence et de

simplicité, mais rien ne vous empêche de procéder autrement.

Notez qu'il existe d'autres types de modules:

●   Modules installés nativement par Joomla!: Derniers Articles, Articles les plus lus, Sondage

●   Modules installés par vous: modules liés à un composant par exemple. ● Modules créés par vous: vous pourrez y saisir du texte par exemple. a) Position

A droite, à gauche, en haut ou ailleurs, tout est possible à condition que le template Le choix des positions de modules est à la discrétion des développeurs de que vous utiliserez prennent en charge ces positions. Notez par exemple que le templates, mais généralement la

template par défaut de votre nouveau site a une colonne à gauche, une large       position left correspond à la colonne de gauche, la position right à la colonne de colonne centrale et une colonne à droite, ce n'est pas le cas de tous les templates. droite. Les positions

●   Pour identifier les positions de modules prises en charge par un template            user1 et user2 se situent le plus souvent au­dessus du corps de la page, appelé cliquez sur le menu Site / Aperçu / Dans cette fenêtre avec Positions:   également mainbody.

●   Ce qui donne ceci :

b)   Ordre

Si par exemple plusieurs modules sont publiés en position left, ils seront affichés l'un au dessous de l'autre. Vous souhaiterez peut­être modifier l'ordre dans lequel ils seront affichés. Pour ce faire vous avez le choix entre cliquer sur les petites flèches bleues (vers le bas ou vers le haut) ou saisir un numéro d'ordre en regard de chaque module dans la colonne Trier, puis valider en cliquant sur l'icône représentant une disquette.

c)   Publier/Dépublier        Pages / Eléments, cliquez sur le lien Accueil.

Par défaut, le statut dépublié d'un module est représenté par une croix rouge dans, REMARQUE: dans le volet Pages / Eléments, vous pouvez effectuer une sélection

la colonne Publié.                                    multiple des pages sur lesquelles sera visible le module en utilisant la

Pour basculer du statut dépublié en statut publié il suffit de cliquer sur la croix      combinaison Ctrl + Clic gauche. rouge en regard du module.

Il est possible de publier ou dépublier plusieurs modules en une seule fois en        3.2 Installation de composants, modules et mambots cochant la case précédent le Nom du module puis en cliquant sur le bouton Publier

(ou Dépublier) dans la barre d'outils.               Une extension se présente sous forme de fichier archive (zip ou ) prêt à

Si vous voulez éclaircir votre espace de travail, vous pouvez désactiver, ou plus     l'emploi. Si toutefois vous voulez savoir ce qui se cache à l'intérieur de ce fichier précisément dépublier les modules que vous ne souhaitez pas utiliser.             archive, vous constaterez la présence d'un fichier XML (). C'est ce fichier qui va fournir les informations nécessaires à Joomla! Pour réaliser l'installation de l'extension: type d'extension, informations sur la version et

d) Afficher un module en fonction de la page visitée   l'auteur, liste des répertoires et fichiers de l'extension

Cette fonctionnalité s'applique à n'importe quel type de module: modules de menu, ATTENTION: certains gros composants sont livrés sous formes d'archive « modules utilisateurs, modules liés à un composant.             combo » comprenant d'autres archives (composant, modules, mambots par

exemple). Avant de procéder à l'installation prenez l'habitude de vérifier que

Dans la liste des modules du site vous noterez que chaque module a une valeur All, l'archive contient le fameux fichier XML d'installation à la racine, et pas d'autres

varies ou None dans la colonne Page. All signifie que le module sera visible sur toutes les pages du site, varies signifie que le module ne sera affiché que sur certaines pages, none signifie que le module ne sera jamais affiché, même s'il est publié!

Nous allons illustrer cette fonctionnalité en créant un module utilisateur dans lequel nous allons saisir un

texte de présentation du site qui ne sera visible qu'en page d'accueil.                  ●

●   Ouvrez le menu Modules / Modules du site.

●   Dépubliez les modules Bannières, Derniers articles et Articles les plus lus afin d'aérer la page d'accueil et laisser la place au module que nous allons créer.

●   Cliquez sur le bouton Nouveau.

●   Donnez un nom au module, sélectionnez la position user1, saisissez un texte de présentation dans la zone de saisie Contenu, enfin, dans le volet archives!

   L'usage veut que le nom de l'extension soit précédé d'un préfixe, mais il n'existe aucune « règle » imposant cette convention de nommage (pourtant si pratique) aux développeurs:

        com_ pour les composants (par exemple )

        mod_ pour les modules (par exemple )

       bot_ pour les mambots (par exemple )

   Résumons: vous furetez sur le Web à la recherche d'une extension (composant, template ), vous la trouvez, la télécharger sur votre PC . et ensuite? Ensuite, c'est Joomla! qui prend le relais. En quelques  clics votre extension sera installée.

Depuis le backend, cliquez sur le menu Installation:

Vous avez le choix entre plusieurs menus:

●   Templates ­ Site: si vous souhaitez installer un nouveau template pour votre site c'est par là que ça se passe. Notez que vous pouvez également installer un template en passant par le menu Site / Gestion des templates / Templates du site et en cliquant sur le bouton Nouveau;

●   Templates ­ Admin: si le design par défaut de l'interface d'administration ne vous convient pas, sachez que vous avez la possibilité de changer le template de l'interface d'administration. Notez toutefois qu'il existe très peu de templates Admins;

●   Langues: permet d'installer une nouvelle langue pour le frontend.

●   Composants: permet d'installer un composant;

●   Modules: permet d'installer un modules;

●   Mambots: permet d'installer un modules;

Vous l'aurez donc deviné, selon le type d'extension que vous allez installer vous devrez cliquer sur l'un ou l'autre menu.

a)  Démonstration avec l'installation d'un composant.

●   Cliquez sur le menu Installation / Composant

●   Localisez le fichier archive du composant sur votre PC en cliquant sur le bouton Parcourir puis cliquez sur le bouton Installer

●   IMPORTANT: vous devez toujours cliquer sur le lien Continuer pour finaliser l'installation d'une extension.

●   Joomla! a automatiquement ajouté dans le backend les entrées de menu qui vont vous permettre d'administrer le composant nouvellement installé

NOTE CONCERNANT LES MODULES: si vous avez installé un module il sera ajouté automatiquement à la liste des modules du site (menu Modules / Modules du site) en statut dépublié (non visible).

NOTE CONCERNANT LES MAMBOTS: si vous avez installé un mambot il sera ajouté automatiquement à la liste des mambots du site (menu Mambots / Mambots du site) en statut dépublié (non actif).

b)  Lier un composant au menu

●   Ouvrez le menu de votre choix

●   Cliquez sur le bouton Nouveau puis sélectionnez le type de lien Composant

●   Donnez un nom au lien, sélectionnez le composant que vous venez d'installer dans la liste déroulante puis cliquez sur le bouton Sauver

c)   Désinstallation

La désinstallation d'une extension est tout aussi simple que son installation. Si vous souhaitez désinstaller un composant vous devez passer par le menu Installation / Composants, si vous souhaitez désinstaller n module vous devez passer par le menu Installation / Modules, etc

Si vous souhaitez par exemple désinstaller un composant, vous devez le sélectionner dans la liste des composants installés puis cliquer sur le bouton Désinstaller dans la barre d'outils Joomla!, c'est tout.

CONSEIL: si les mambots et modules installés par défaut dans Joomla! ne vous conviennent pas, préférez une dépublication à une désinstallation.

Chapitre 4 : Les Templates             répertoire dans le cas où le fichier ne serait pas interprété par le serveur

Web. Des connaissances en HTML et en CSS, quelques notions en retouches d’images,

c’est à peu près tout ce qu’il vous faudra pour personnaliser un template Ah oui, 4.2 Installation il vous faudra aussi de l’inspiration, de la créativité, de la persévérance et du

temps, beaucoup !! Mais attention le webdesign est un métier à part entière, et à            Comme les fichiers de langue, les composants et les modules, les templates sont moins que vous ne maîtrisiez déjà toutes ces technologies, n’imaginez pas que      disponibles sous forme d’archive ZIP, qui porte généralement le nom du template. vous allez créez un template Joomla! en un claquement de doigts. Si vous avez des Vous les installerez donc de la même manière en passant par le menu Installation / besoins spécifiques, si vous n’avez pas de temps à perdre avec le design, ou encore Templates ­ Site.

si vous êtes un indécrottable fainéant, faites appel à un spécialiste, ils sont           ● Localisez l’archive ZIP ou TGZ du template que vous venez de télécharger et nombreux à proposer leurs services. Sinon, et bien vous ferez comme beaucoup          cliquez sur le bouton Installer

d’utilisateurs ; vous chercherez un template gratuit qui se rapproche le plus de ce ● Comme d’hab’, vous cliquez sur le lien Continuer

que vous souhaitez et vous le bricolerez sans vergogne, quitte à le dénaturer        ● Voilà vous pouvez maintenant voir le template Flexi_Orange dans la liste des complètement, mais en conservant en l’état les informations de licence GNU/GPL,     templates installés par respect pour l’auteur !

Vous avez remarqué que le template par défaut de votre site est rhuk_solarflare_ii.

4.1 De quoi est fait un template?                                                                                 Maintenant que vous avez installé un nouveau template, vous pouvez le définir à son tour comme template par défaut pour tout votre site.

D’un dossier portant le nom du template et dans lequel on trouve basiquement 4

éléments :                                     ● Sélectionnez le nouveau template à utiliser par défaut pour votre site dans

●   Un répertoire css comprenant au moins une fichier , qui va la liste et cliquez sur le bouton Défaut gérer les styles  d’affichage.

●   Un répertoire images qui comprend toutes les images utilisées par le template: NOTE: Joomla! offre la possibilité de définir un template à une partie précise de logo de votre site, images d’arrière plan     votre site, et un template différent à une autre partie du site. Par exemple vous

●   Un fichier qui va permettre d'afficher les éléments constitutifs de   pourrez définir rhuk_solarflare_ii comme template par défaut, et assigner le votre site: corps de la page et modules à afficher dans la colonne de gauche,   template Flexi_Orange sur la page qui affiche votre livre d’or. ceux à afficher dans la colonne de droite

●   Un fichier qui est un aperçu miniature du template 4.3 Que peut­on modifier dans un template?

●   Un fichier qui est utilisé lors de l'installation du template depuis le backend et qui regroupe les informations de licences, version, auteur a) et la liste des fichiers utilisés par le template.

Ce fichier inclut à la fois du code HTML et du code PHP, il va permettre de « NOTE: le fichier n'est pas systématiquement présent dans présenter » le contenu de votre site. Vous pouvez le modifier avec un éditeur de l'arborescence, il est uniquement utilisé pour empêcher de parcourir le contenu du texte.

b) Le PHP dans Joomla

Permet de générer les balises meta saisis dans le backend pour le site et chacun des articles.

Permet d'afficher le titre que vous avez donné à votre site; cette valeur est récupérée dans le fichier à la racine de votre site Joomla!

Permet d'afficher l'URL de votre site; cette valeur est aussi récupérée dans le fichier .

Permet d'afficher la barre de navigation du site:

Permet d'afficher tous les modules du site publiés en position Banner; par exemple les bannières que vous aurez publiées via le composant Bannières.

Permet d'afficher tous les modules du site publiés en position Top.

Permet d'afficher tous les modules du site publiés en position Left.

Permet d'afficher tous les modules du site publiés en position Right.

Permet d'afficher le corps de la page (articles et composants)

  Permet d'afficher un pied de page dynamique à partir des fichiers et

­ La syntaxe de mosLoadModules (chargeurs de modules) est: mosLoadModules ( [ string $position [, int $style ]] )

●   string $position pourra prendre pour valeur une chaîne de caractères correspondant aux positions de modules prises en charge par votre site (Left, Right, Top, Banner, User1, User2 ). La liste de ces positions est consultable dans le backend en passant par le menu Site / Gestion des Templates / Positions des modules.

●   int $style pourra prendre pour valeur 5 entiers, chacun correspondant à un style d'affichage du module:

●   1 = horizontal (affichage sous forme de ligne)

●   0 = normal (affichage par défaut, en colonne)

●   ­1 = raw (affichage brut, sans titre)

●   ­2 = XHTML (affichage entre des tags div et headers)                          ● ­3 = extra divs (affichage avec d'autres tags div autour du module, utilisé pour les coins arrondis par exemple)

     Exemple:

     

      mosLoadModules ( 'left',­3);

      mosLoadModules ( 'user1',­2);

     Vous trouverez également des instructions de type mosCountModules, qui vous permettront d'escamoter une colonne ou une ligne qui ne contient aucun module

publié dans la position de menu spécifiée en paramètre. 

Exemple tiré du template madeyourweb :

      if ((mosCountModules( "right" )) || (mosCountModules( "top" ))) {

            ?>

           

                   

                   

           

24/32 25/32 Exercices :

1.   Mettre en place une boutique francaise et en euro avec cette arborescence :

Films

          Action

          Aventure

Documentaires

          Arte

          Planete

Produits : Seven (films d'action)

                Die Hard (action)

                La terre vue du ciel (offre speciale) (planete)

2.   Mettre en place le module Derniers Produits en position Right sur le site

3.   Ajouter 5 images au film Die Hard

Chapitre 6 SH404SEF Bloc Notes :

Exercices :

1.   Mettre en place l'URL Rewriting du site

2.   Faire que l'extension soit .php

Chapitre 7 : Transferts et désinstallation de Joomla

 7.1 Transferts

Cette opération se déroule en 4 étapes :

1.  Export de la base de données Joomla de votre origine

2.  Transfert des fichiers origine vers le serveur de votre hébergeur

3.  Réinstallation pour mettre à jour du fichier le

4.  Import du fichier export de la base de de données généré à l'étape 1 Détail :

1.

Ouvrez PhpMyAdmin puis sélectionnez votre base de données Joomla dans le menu déroulant Base de données

Cliquez ensuite sur le lien Exporter

Cliquez sur le lien Tout sélectionner, sélectionnez MYSQL40 dans le menu déroulant mode de compatibilité SQL, cochez la case Ajouter DROP TABLE / DROP VIEW, cochez la case Transmettre:, puis cliquez sur le bouton Exécuter:

Cliquez sur le bouton OK pour sauvegarder l'export de la base de données à l'emplacement de votre choix:

2.

Attention, à cette étape vous n’allez pas transférer les fichiers sources d'installation de Joomla, mais les fichiers et dossiers de l’installation que vous avez déjà réalisée à l'origine.

Il ne reste plus qu’à vous connecter sur le serveur de votre hébergeur et à effectuer le transfert

Dans la liste des répertoires à uploader doit figurer le répertoire /installation que vous avez renommé à la fin de l'installation locale en début de document. Si vous l'avez supprimé, récupérez ce répertoire dans le package d'installation et uploadez le au même niveau que les répertoires de premier niveau:

/administrator, /cache, /components,

Une fois l'opération de transfert terminée vous devez supprimer le fichier et renommer le dossier /­installation­ en /installation.

3.

Reinstallez Joomlà comme au début de ce cours 4.

Pour désinstaller Joomla, Il vous faudra supprimer de votre base de données toutes les tables Joomla (ayant le préfixe jos_ de base) et ensuite tous les fichiers Joomla de votre FTP.

7.3 Sauvegarder Joomla

Vous voici arrivé à la dernière étape du transfert de votre site. Vous savez

maintenant à quoi ressemble PhpMyAdmin , et bien votre hébergeur doit             Pour sauvegarder votre site, faites la même manipulation que pour le transfert : également vous fournir l’accès à cette interface d’administration MySQL. Les

modalités d’accès varient d’un hébergeur à l’autre. Chez certains ce sera carrément Export de la base de données Joomla de votre origine puis Transfert de votre à vous d’installer et de paramétrer PhpMyAdmin, mais le plus souvent votre      hébergement  votre PC des fichiers FTP. Ainsi, en cas de crash, vous pourrez hébergeur vous fournira une URL d'accès, ou alors vous devrez passez par la        restaurer votre site. console de gestion de votre plan d’hébergement pour lancer PhpMyadmin.

●   Assurez vous que votre base de données est sélectionnée dans le menu    Note : Cette manipulation n'est utile que si elle est faite régulièrement!

déroulant de gauche. Si vous êtes chez Free, vous n'avez qu'une seule base de données, cliquez dessus!

●   Cliquez sur le lien SQL dans la barre de menus

●   Localisez ensuite le fichier au format .sql que vous sauvegardé lors de l'export de la base de données locale et cliquez sur le bouton Exécuter:

L'opération peut prendre plusieurs dizaines secondes en fonction de votre bande passante et de la taille du dump; soyez patient! Vous verrez en fin d'opération une fenêtre vous indiquant que votre requête SQL a été exécutée avec succès. Vous noterez également que toutes les tables de votre base de données apparaissent désormais dans le volet de gauche.

Voilà, le site que vous avez développé localement et désormais sur la toile!

Exercices :

   NOTE: cette procédure de transfert est réversible. Vous pouvez migrer un site en ligne vers votre PC. Toujours de la même manière vous pouvez migrer votre site d'un hébergeur à un autre par exemple. Dans tous les cas de figures vous devrez simplement vous procurez les informations de connexion à la base de données sur le nouveau serveur.

7.2 Desinstaller Joomla

31/32 32/32