16.3 Réalisation technique I

Pendant que ses enfants rassemblent les documents, M. Bertrand aimerait commencer à préparer la structure de son site Web.

16.3.1 Installation locale

Il décide d’installer une version locale de Joomla! dans un environnement XAMPP lite, comme décrit au Chapitre 2. Son site ne sera pas implanté dans la racine relative précédente [Chemin- Joomla]/joomla150, mais dans une nouvelle branche qui sera [CheminJoomla]/bertrand.

Voici les données qu’il saisit lors de l’étape d’installation 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 données : bertrand.

Il n’a pas besoin des données d’exemples pour son site puisqu’il va injecter ses propres contenus. Dans l’étape correspondante de l’installation, M. Bertrand évite donc de cliquer sur le bouton des données d’exemples. Bien sûr, l’affichage peut être perturbant puisque le bouton d’option à côté du bouton d’action propose d’installer les données d’exemples. Tant que l’on ne clique pas sur le bouton action, les données ne seront pas installées, ce qui est le but ici (voir Figure 16.3).

Figure 16.3 Installation de Joomla!

Il clique donc sur le bouton SUIVANT. L’installateur créé un site Joomla! vide. Dans le haut de la page d’administration apparaît déjà le nom Les Vins de Bertrand (voir Figure 16.4).

Figure 16.4 La partie publique du site sans données d’exemples.

Le site n’est pas totalement vide. Après avoir accédé à la partie d’administration, M. Bertrand choisit la commande EXTENSIONS > GESTION DES MODULES. Il constate qu’il y a un module activé, Main Menu (voir Figure 16.5).

Figure 16.5 Un seul module est activé pour le menu général.

M. Bertrand se demande où sont passés tous les autres modules système, comme le module de connexion 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 Accès aux modules du système.

Langues de l’interface

M. Bertrand vérifie que la langue de la partie publique et de la partie administrative est bien le français. Cela devrait être le cas puisqu’il a installé un Joomla! en français.

Trois premiers articles...

M. Bertrand veut maintenant dégrossir la structure en insérant trois premiers articles au format blog et visibles sur la page d’accueil du site. Ces trois articles n’entreront dans aucune catégorie. Il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton NOUVEAU et crée tour à tour trois articles d’actualité (Article 1, 2 et 3). Il en profi te immédiatement pour créer un chapeau en positionnant le curseur à l’endroit de la rupture puis en cliquant sous la fenêtre d’édition sur le bouton LIRE LA SUITE. Il voit apparaître la ligne rouge. Il choisit NON catégorisé pour la section et pour la catégorie, et vérifie que l’option PAGE D’ACCUEIL est bien activée par OUI (voir Figure 16.7).

Figure 16.7 Rédaction d’un premier article.

Les trois articles apparaissent immédiatement sur la page d’accueil ainsi que dans la liste CONTENU > GESTION DE LA PAGE D’ACCUEIL. M. Bertrand en profite pour activer le template Beez par la commande EXTENSIONS > GESTION DES TEMPLATES (voir Figure 16.8).

M. Bertrand voudrait immédiatement faire une retouche pour masquer la date de création, celle de modification et le nom de l’auteur. Pour masquer ces trois éléments, il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton PARAMÈTRES puis choisit l’option MASQUER dans les trois champs de l’auteur et des deux dates (voir Figure 16.9).

Figure 16.8 La page d’accueil avec les trois articles dans le template Beez.

Figure 16.9 Retouche de la configuration des trois articles.

Sa page d’accueil est maintenant à peu près achevée (il reste éventuellement à mettre du vrai texte à la place du texte d’attente). Il constate avec joie que Joomla! a automatiquement créé un d’actualité RSS qui devient visible dans Internet Explorer à partir de la version 7 et dans Firefox dans la barre d’adresse (c’est un symbole orange). En cliquant dans ce symbole, il voit apparaître une page de demande d’abonnement (voir Figure 16.10).

Figure 16.10 La page de demande d’abonnement à un d’actualité dans Firefox.

Une fois qu’il se sera abonné, le visiteur obtiendra un message concernant l’apparition de nouveaux articles sur la page d’accueil. Ce mécanisme s’applique également à d’autres programmes de lecture d’actualité. Le concept est d’ailleurs devenu accessible aux appareils mobiles tels que les téléphones portables et les assistants personnels. M. Bertrand espère que de nombreux clients s’abonneront à ses actualités et s’intéresseront ensuite à ses promotions (voir Figure 16.11).

Figure 16.11 Les articles dans un menu de d’actualité du navigateur.

Mentions légales

Dans de nombreux pays d’Europe, il est indispensable de prévoir une page pour y rassembler les mentions légales 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 légales peut s’écrire ainsi :

Directeur de la publication:
GAEC Bertrand
2 impasse de Beauchamps
66200 Menfort
France
Messagerie : atruc@tortifer.com
Téléphone : 05 12 90 00 01
N° TVA Intracommm. : 232 009 112 012

Puisque le site présente une partie commerciale, il est obligatoire d’ajouter le numéro de TVA intracommunautaire.

Pour obtenir cette page, il crée par la commande CONTENU > GESTION DES ARTICLES, bouton NOUVEAU un article non catégorisé appelé Mention légale. Cette fois-ci, il ne fait pas afficher l’article dans la page d’accueil. Le lien qui permettra d’afficher les mentions légales devra se trouver en tant qu’élément du menu général (Main Menu). M. Bertrand sélectionne la commande MENUS > MAIN MENU,
puis le bouton NOUVEAU. Dans l’assistant de création d’élément, il choisit la catégorie ARTICLES, puis ARTICLES puis encore ARTICLE LAYOUT (voir Figure 16.12).

Figure 16.12 Création d’un élément de menu pour un article.

Arrivé dans la page d’édition de l’élément de menu, M. Bertrand saisit le nom (Mentions légales). Dans le volet des paramètres à droite il doit choisir quel article associer à cet élément de menu (voir Figure 16.13). (Vous avez remarqué que nous avons écrit le titre de l’article au singulier et le titre de l’élément au pluriel pour les distinguer plus aisément.)

Figure 16.13 Création d’un lien (élément de menu) pour les Mentions légales.

En cliquant sur le bouton SÉLECTION, il voit apparaître la liste de tous les articles disponibles (voir Figure 16.14).

Figure 16.14 Sélection d’un article pour l’élément de menu.

M. Bertrand choisit l’article Mention légale. Son élément est terminé. Il clique sur le bouton SAUVER pour l’insérer dans le menu. Il reste à vérifier que l’élément est bien publié (coche verte et non croix rouge). Notez qu’il s’agit de la publication de l’élément de menu et non de celle de l’article. Pour finir, il suffit de faire remonter le nouvel élément de menu d’une position au moyen des petites flèches vertes (voir Figure 16.15).
Le site Web donne le résultat suivant (voir Figure 16.16).

Figure 16.15 L’élément Mentions légales dans la liste du menu général.

Figure 16.16 Le cartouche des Mentions légales sur le site Web.

M. Bertrand constate que les trois icônes pour imprimer, afficher le PDF et envoyer un message sont inutiles. Il accède à son article Mention légale (CONTENU > GESTION DES ARTICLES, clic sur MENTION LÉGALE) pour aller modifier dans le volet PARAMÈTRES AVANCÉS la valeur des trois options PDF, Imprimer
et Email. Il choisit MASQUER (voir Figure 16.17).

Figure 16.17 Masquage de trois boutons pour l’article Mention légale.

Notre premier élément de menu est terminé. M. Bertrand doit maintenant s’intéresser à la structure des sous-menus.

16.3.2 Création des sous-menus pour les vins et les terroirs

Pour l’instant, il n’y a qu’un seul menu Main Menu hébergeant deux liens, un pour revenir à la page d’accueil et un pour afficher les mentions légales. M. Bertrand aimerait tout de suite disposer d’un module d’identification du visiteur (Login).

Il commence par renommer le menu en Menu général et l’élément 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 sélectionne d’abord EXTENSIONS > GESTION DES MODULES, bouton NOUVEAU (voir Figure 16.18). Il choisit immédiatement le bon titre pour le module en indiquant Accès membres.

Figure 16.18 Mise en place du module d’identification (Login).

Enfin, pour changer le titre du premier élément 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 fenêtre est toujours en anglais, Welcome to the Frontpage. Il décide donc de masquer ce message en accédant aux paramètres système (SITE > CONFIGURATION GLOBALE).

16.3.3 La structure des menus

M. Bertrand aimerait proposer trois menus : le menu général, un menu sous forme de barre horizontale en haut et un menu utilisateur réunissant les commandes qui ne doivent être accessibles qu’aux visiteurs identifiés.

Structure du menu général

Voici la structure prévue pour le menu général de la colonne gauche :

- Accueil du site - Actualités
- Nos vins - Texte de présentation
-- Nos blancs - Description de produit et commande
-- Nos rouges - Description de produit et commande
-- Nos rosés - Description de produit et commande
- Notre terroir - Texte de présentation
-- Les costières – 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 – Opérations spéciales
- Contact
- Mentions légales

Structure du menu horizontal

Le menu horizontal va permettre d’accéder rapidement à plusieurs pages essentielles. Lorsque l’on clique dans ce menu, le lien équivalent dans le menu général doit s’ouvrir le cas échéant.

- Nos vins - Texte de présentation
- Notre terroir - Texte de présentation
- Reportages – Composant Galerie sur les vendanges
- Contact

Structure du menu utilisateur

Lorsque le visiteur s’est identifi é par le module Login, il doit pouvoir accéder à une partie privée du site proposant des promotions. Le but est de renforcer les liens entre producteur et consommateurs. Il est prévu de leur proposer une page fréquemment mise à jour contenant des promotions, avec une possibilité de commander et de payer en ligne. De plus, M. Bertrand veut proposer un lien de téléchargements qui permet aux utilisateurs enregistrés de puiser dans le lot de documents qu’il met à leur disposition.

- Promotions
 - Téléchargements
 - Déconnexion

Insertion des textes et des liens dans le menu général Pour l’instant, tous les textes, hormis le formulaire de contact et la galerie de reportages qui vient plus loin, sont de type Non catégorisé. M. Bertrand les crée par la commande CONTENU > GESTION des articles. Il vérifie bien qu’aucun de ces nouveaux contenus ne va apparaître 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 création.

Une fois les articles générés, il faut passer à la création des éléments de menu. Pour que les trois liens NOS BLANCS, NOS ROUGES et NOS ROSÉS constituent un sous-menu, il faut sélectionner chaque fois l’élément parent Nos vins (voir Figure 16.19) qui doit donc être créé d’abord.

Figure 16.19 Création de liens dans un sous-menu.

Il faut procéder de même avec les trois éléments 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 apparaît sur le site indique dorénavant Menu général.

Figure 16.20 Structure arborescente des menus et sous-menus.

Création d’un lien de contact

M. Bertrand désire profi ter du composant standard de Joomla! nommé Contact. Il doit d’abord créer une catégorie de contacts en lui donnant le nom GAEC Bertrand. Pour y parvenir, il choisit la commande COMPOSANTS > CONTACT, page CATÉGORIES (voir Figure 16.21).

Figure 16.21 Création d’une catégorie de contact.

Il clique ensuite en haut à gauche sur le lien CONTACT (nous avons présenté cela au Chapitre 9 en section 9.2). Il ne définit au départ qu’un seul contact pour lui-même. D’autres pourront être ajoutés plus tard. Un seul formulaire suffit pour l’instant (voir Figure 16.22).

Figure 16.22 Création d’un nouveau contact dans la seule catégorie existante.

Il reste à insérer un élément dans le menu général pour accéder à ce contact. Par la commande MENUS > MAIN MENU > NOUVEAU, M. Bertrand aboutit à la fenêtre de choix du type et sélectionne CONTACT puis MISE EN PAGE STANDARD DES CONTACTS. Il arrive ensuite dans la page d’édition de l’élément. Les contacts existants sont sélectionnables dans le volet droit des PARAMÈTRES – BASIQUE. Pour l’instant il n’y en a qu’un. Il sélectionne sur son nom puis clique sur le bouton SAUVER (voir Figure 16.23).

Figure 16.23 Création de l’élément de menu pour le contact.

Il ne reste plus qu’à vérifier par MENUS > MAIN MENU que l’élément pour le contact est bien publié (colonne Publié ou Activated). Il repositionne éventuellement l’élément pour qu’il ne soit pas en dernier dans le menu.

En allant voir le résultat sur le site Web, il suffit de cliquer sur le lien CONTACT pour voir apparaître les coordonnées de Pascal Bertrand suivies d’un formulaire dans lequel le visiteur peut lui écrire.

Menu horizontal en haut (menu-barre)

Notre menu général est presque achevé. Il ne restera qu’à ajouter un lien pour accéder à la galerie des reportages. M. Bertrand veut maintenant créer 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 Création d’un nouveau menu.

Le menu doit être immédiatement positionné à l’endroit désiré. Au moyen de la commande EXTENSIONS> GESTIONS DES MODULES, M. Bertrand opte pour la position user3. Il vérifie que le menu est activé. Le titre choisi n’a pas d’importance, car les menus barre ne présentent généralement 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 qu’il est vide, pourquoi ne pas profi ter des éléments qui existent déjà dans le menu général ? Il choisit la commande MENUS > MAIN MENU, sélectionne par la coche les trois éléments NOS VINS, NOTRE TERROIR et CONTACT puis clique sur le bouton COPIER (voir Figure 16.26).

Figure 16.26 Copie de trois éléments de menu.

Dans la page qui apparaît, il faut sélectionner le menu destinataire, Top menu puis cliquer sur le bouton COPIER. En allant vérifier sur le site, le nouveau menu-barre apparaît en haut. Il contient bien les trois éléments. Lorsque l’on clique sur l’un des éléments, l’article s’affiche. En revanche, le choix d’un des deux menus ne fait pas ouvrir les détails de l’élément correspondant du menu général. En étudiant le contenu de la barre d’adresse, M. Bertrand constate que la fin de l’adresse est différente selon que l’on clique par exemple sur NOS VINS par le menu général ou par le nouveau menu-barre. La solution est de modifier le type des éléments du menu-barre pour qu’ils fassent référence au menu ouvert par un lien externe. (Pour réussir cette modification, le plus confortable est de disposer de deux onglets dans votre navigateur, un avec le site et l’autre avec la partie administration.)

M. Bertrand a donc modifi é le type des deux liens NOS VINS et NOTRE TERROIR en récupérant l’adresse exacte qui permet d’en afficher les détails par le menu général.
En choisissant la commande MENUS > MENU BARRE puis l’élément NOS VINS, il bascule dans la page d’édition 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 d’un élément de menu.

Au retour dans la page d’édition, le champ nommé LIEN devient accessible. Il ne reste plus qu’à insérer les bonnes coordonnées dans la fin du nom. Les valeurs exactes varient d’une installation à l’autre, car elles dépendent de l’ordre dans lequel vous avez créé les différents éléments. Il peut par exemple s’agir 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 à sélectionner dans la barre d’adresse 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 qu’il ne faut pas ajouter de barre oblique au début avant index.php.

Cette barre oblique ferait chercher dans le dossier des documents du serveur Web Apache. Le résultat sera d’afficher la page de bienvenue de XAMPP lite que nous avons vue lors de l’installation. Les liens doivent être relatifs à la position courante. C’est ce qui permet de transplanter un site Web d’un endroit à l’autre. Les liens relatifs restent valables au sein de la sous-structure. Avec des liens absolus, il faut tout mettre à jour dès que l’on implante la sous-structure dans une racine située ailleurs.