Comment configurer un site eZ Publish

| Peter Keung | Alain Sahli |

Ce tutoriel est une traduction de l'excellent tutoriel rédigé par Peter Keung d'eZ Systems. Il explique pas à pas comment mettre en place un site communautaire à l'aide d'eZ Publish.

- Titre : Comment configurer un site eZ Publish

- Auteurs : Peter Keung, Alain Sahli

- Parution : 13 décembre 2007

- Mise à jour : 11 décembre 2019

- Licence :

Sommaire

- I. Comment configurer un site eZ Publish

- I-A. Prérequis

- I-B. Scénario

- II. Installation de base et skinning

- II-A. Appliquer une nouvelle interface

- II-B. Configuration du site durant le développement

- III. Modification des URL

- IV. Renommage des siteaccesses

- V. Modifications visuelles

- V-A. Ajouter un lien vers la page d'accueil dans la barre de menu horizontale

- V-B. Ajouter un logo

- V-C. Modifications du CSS

- V-D. Changement des URL pour les liens de langue

- VI. Modification du contenu

- VII. Conclusion

- VII-A. Remerciements

- VII-B. Références

I - Comment configurer un site eZ Publish

Cet article est le premier d'une série de tutoriels expliquant comment construire une application riche sous eZ Publish en partant de zéro. Il est destiné aux personnes qui ont peu d'expérience dans la configuration d'eZ Publish, mais qui ont tout de même certaines connaissances dans les technologies du web. Veuillez lire les articles eZ Publish basic concepts et the layout of the eZ Publish Administration Interface pour avoir une introduction à eZ Publish. Les lecteurs ayant déjà travaillé avec eZ Publish, mais qui ne l'ont jamais configuré ou qui n'ont jamais utilisé les fonctions avancées vont également trouver ces séries intéressantes. Ces séries expliquent de quelle manière eZ Publish peut-être utilisé pour créer un site communautaire dynamique et se focalisent sur des exemples pratiques qui peuvent être utilisés dans d'autres scénarios.

Ces séries proviennent d'une collaboration entre l'équipe de publication eZ et les partenaires eZ. Peter Keung de eZ Systems a écrit ce premier article de la série. Les partenaires eZ vont écrire des articles basés sur le site développé dans cet article, ajouter de nouvelles fonctionnalités et expliquer certains concepts et leurs caractéristiques.

I-A - Prérequis

Pour suivre ce tutoriel, vous aurez besoin de :

1. Une version fraîchement installée d'eZ Publish 3.9.2 avec la configuration suivante :
Langue principale English (American) ; langue secondaire French (France) ;

2. Template du site ezwebin (Interface du site) ;

3. Configuration de l'accès au site : URL ;

4. Avoir accès aux fichiers (eZ Publish) ;

5. Connaissances de base en HTML et CSS.

La documentation concernant l'installation peut-être trouvée ici : Documentation d'eZ Publish.

N'oubliez pas que les boutons ainsi que les interfaces (et les captures d'écran et procédures) peuvent varier si vous utilisez une version différente de la 3.9.2 avec l'interface web 1.2. Dans la plupart des cas ces variations seront mineures et nous vous encourageons à utiliser la version la plus récente.

I-B - Scénario

Supposons que vous deviez créer un site web pour un club de tennis appelé « eZ Tennis Club ». C'est un club de tennis communautaire qui souhaite utiliser ce site pour se distinguer des autres clubs concurrents. Ce site doit répondre aux besoins des membres locaux, mais également proposer des fonctionnalités qui attirent un public international. Il doit fournir des informations concernant le club, proposer des nouvelles sur le tennis mondial, avoir un magasin en ligne dans lequel des équipements et des vêtements de tennis seront vendus et implémenter des fonctionnalités qui favorisent l'interaction au sein de la communauté.

Les articles de cette série de tutoriels vont couvrir des sujets comme, configuration de base et design, installation et utilisation d'extensions, utilisation de RSS et des workflows, et ainsi de suite.

II - Installation de base et skinning

Après l'installation, votre site eZ Publish devrait ressembler à ceci :

Interface graphique ezwebin par défaut

La première étape consiste à modifier les éléments de l'interface graphique afin qu'elle soit propre à notre organisation.

II-A - Appliquer une nouvelle interface

Dans l'article How to Skin an eZ Publish Now Site, Bertrand Maugain a expliqué comment créer une interface graphique pour un site eZ Publish. Nous allons utiliser l'interface de ce tutoriel pour notre site eZ Tennis. Pour installer cette interface, suivez les étapes suivantes :

1. Téléchargez le paquetage contenant l'interface sur le site du tutoriel How to Skin an eZ Publish Now Site (situé en bas à droite) ;

2. Authentifiez-vous dans l'interface d'administration du siteaccess par défaut (dans notre cas http://tennisdemo.ezsystems.ca/index.php/ezwebin_site_admin/) en utilisant le nom d'utilisateur et mot de passe spécifié lors de l'installation (dans notre cas « admin » / « publish ») ;

3. Cliquez sur l'onglet setup, puis sur le lien packages et enfin sur le bouton Import new package. Importer le paquetage téléchargé à l'étape une via le formulaire ;

4. Activez l'interface via l'interface d'administration en cliquant sur l'onglet Design, puis cliquez sur le lien Look and feel et enfin cliquez sur le bouton edit. Descendez la page pour arriver à la section Sitestyle et sélectionnez « empower_enterprise », puis cliquez sur le bouton Send for publishing situé au bas de la page. (Alternativement, vous pouvez vous authentifier via l'interface web située en « front-end », puis cliquez sur les Site settings situé en haut à droite. Ensuite, suivez les mêmes instructions que pour l'interface d'administration).

Le site devrait maintenant ressembler à ceci :

Site avec une nouvelle interface graphique

II-B - Configuration du site durant le développement

Durant la phase de développement, c'est utile d'activer la fonction de débogage de sortie (output debug). Ceci se fait dans la section [DebugSettings] d'un fichier INI, comme expliqué ci-dessous. Le débogage de sortie est un mécanisme intégré à eZ Publish qui fournit des informations qui aident lors de la correction de bogues. Le débogage de sortie fournit des informations concernant le temps d'exécution, les requêtes SQL, la génération de templates et autres. (Lors du développement de design il est conseillé de désactiver cette fonctionnalité.)

Lors du développement, il est également conseillé de désactiver la fonctionnalité de mise en cache des templates et vues d'eZ Publish (qui améliore les performances en stockant et réutilisant le code des templates ainsi que le XHTML généré). Ceci se fait dans les sections [TemplateSettings] et [ContentSettings], comme expliqué ci-dessous. Durant le développement il est conseillé de forcer la régénération complète des pages afin que l'on voie instantanément les changements effectués sur le site. Sinon on doit vider manuellement le cache à chaque fois que l'on effectue un changement durant le processus de développement. Pour vider le cache manuellement, soit vous cliquez sur le bouton Vider le cache situé à droite dans l'interface d'administration ou alors vous allez vider les dossiers var/cache et /var/example/cache (où « example » correspond au nom de votre siteaccess).

Les paramètres du site sont stockés dans des fichiers INI situés dans le dossier settings/ d'eZ Publish. Lorsque vous changez un paramètre dans un fichier INI, vous devriez utiliser un fichier d'override et laisser le fichier original intact. Les fichiers d'override agissent sur deux niveaux : les overrides globaux (dans le dossier settings/override/) et les overrides au niveau des siteaccess (dans le dossier settings/siteaccess/[nom_du_siteaccess]). Les deux fichiers ont le même nom que le .INI original avec l'extension « .append.php » en plus.

eZ Publish lit les configurations de base dans les fichiers .INI originaux, lesquels sont surchargés par les directives présentes dans les fichiers de surcharge spécifiques au siteacess, lesquels sont surchargés par les fichiers de surcharge globaux. L'illustration ci-dessous montre l'ordre de surcharge du fichier INI de configuration principale du site :

Ordre de surcharge de la configuration du site

Dans notre cas, nous voulons définir des directives de configurations pour tous les siteaccess, c'est pourquoi nous allons éditer le fichier settings/override/site.ini.append.php.

Ouvrez settings/override/site.ini.append.php avec votre éditeur de texte et ajoutez le code ci-dessous tout au fond du fichier :

[DebugSettings]
DebugOutput=enabled

[TemplateSettings]
TemplateCache=disabled

[ContentSettings]
ViewCaching=disabled

Pensez à désactiver le débogage de sortie et à réactiver la mise en cache des templates et vues lorsque vous mettrez votre site en ligne.

III - Modification des URL

Par défaut les URL d'eZ Publish sont constituées du nom de domaine, puis « index.php », puis le nom du siteaccess, et enfin le chemin vers un nœud spécifique.

Afin d'avoir des URL plus agréables pour l'utilisateur, lors de l'utilisation des URL pour la séparation des siteaccess (méthode utilisée dans notre exemple comme indiqué dans l'introduction *), vous pouvez supprimer « index.php » de toutes vos adresses à condition que vous utilisiez les paramètres par défaut du fichier Apache .htaccess et que le module mod_rewrite soit activé dans le fichier httpd.conf d'Apache.

(* L'utilisation des URL pour la séparation des siteaccess est la méthode la plus rapide et la plus simple à mettre en place, c'est pourquoi nous l'utilisons dans cet article. Cependant, la séparation des siteacess à l'aide des virtual host est conseillée, car c'est la méthode la plus sûre, comme c'est expliqué dans la documentation. Lors de la séparation des siteaccess à l'aide des virtual host chaque siteaccess peut être atteint avec un nom de domaine individuel, par exemple admin.tennisdemo.ezsystems.ca pour le siteaccess admin, et « index.php » est automatiquement supprimé des URL générées.)

Dans le fichier settings/override/site.ini.append.php, ajouter les lignes suivantes en dessous du bloc [SiteAccessSettings] :

ForceVirtualHost=true

Par défaut, les URL d'eZ Publish incluent un indicateur de langue. Afin de supprimer cette partie de l'URL pour le siteaccess par défaut, ajoutez le code suivant en dessous du même bloc [SiteAccessSettings] :

RemoveSiteAccessIfDefaultAccess=enabled

Maintenant, au lieu d'avoir http://tennisdemo.ezsystems.ca/index.php/eng/solutions comme adresse pour une page de premier niveau, nous aurons http://tennisdemo.ezsystems.ca/solutions, ce qui est beaucoup plus facile à mémoriser pour les visiteurs.

IV - Renommage des siteaccesses

Le siteaccess français est appelé « fre » par défaut. Dans notre cas, nous allons le renommer en « fr », car c'est plus court et donc plus simple à mémoriser pour les visiteurs. Pour arriver à cela, nous devons faire quatre modifications :

1. Renommer le dossier settings/siteaccess/fre en settings/siteaccess/fr ;

2. Modifier les références au siteaccess français dans le fichier settings/override/site.ini.append.php à deux endroits :

[SiteAccessSettings]
AvailableSiteAccessList[]=fr

[SiteSettings]
SiteList[]=fr

Vous devez donc modifier la liste des siteaccess dans le fichier site.ini.append.php de chaque siteaccess, par exemple settings/siteaccess/eng/site.ini.append.php. Cette liste de siteaccess est utilisée lors du mécanisme de mise en cache des vues afin de vider le cache de tous les siteaccess liés et ainsi partager la même base de données, quand un objet est créé ou mis à jour.

[SiteSettings]
RelatedSiteAccessList[] = fr

(Si tous vos siteaccess utilisent la même base de données, comme c'est le cas dans cet exemple, vous pouvez insérer la liste de tous les siteaccess dans RelatedSiteAccesstList[] situé dans le fichier settings/override/site.ini.append.php, ce qui nous permet de ne pas devoir éditer individuellement le fichier INI de chaque siteaccess.) ;

3. Modifiez les droits d'accès de l'utilisateur anonyme dans l'interface d'administration. Cliquez sur l'onglet User accounts, puis cliquez sur le lien Roles and policies situé à gauche dans le menu. Éditez le rôle concernant l'utilisateur anonyme, puis éditez la police user/login qui est vide, afin d'ajouter le nouveau nom du siteaccess « fr ». Cliquer sur le bouton OK pour sauvegarder vos modifications.

4. Éditez les langues situées en haut à gauche. Nous allons décrire cela plus tard dans cet article, car ces liens sont actuellement cachés dans notre design de site importé.

Nous allons également renommer le siteaccess de l'interface d'administration afin de rendre l'URL plus facile à mémoriser pour les administrateurs et les éditeurs. Pour faire cela, nous devons effectuer les deux premières étapes que nous avons réalisées pour le siteaccess français, mais en changeant « ezwebin_site_admin » en « tennis_admin ».

Il y a une configuration supplémentaire que nous devons changer dans le fichier site.ini.append.php pour les deux siteaccess, anglais et français (dans settings/siteaccess/eng/ et settings/siteaccess/fr/). En dessous du bloc [SiteSettings] il y a une directive pour le formulaire de redirection si quelqu'un s'authentifie sur la partie front-end du site et coche la case à cocher Log in to the eZ Publish Administration Interface.

Cette directive doit être modifiée dans le fichier site.ini.append.php pour les siteaccess de langue :

AdditionalLoginFormActionURL=http://tennisdemo.ezsystems.ca/index.php/ezwebin_site_admin/user/login

Supprimez la partie « index.php » de l'URL et renommez le siteaccess de l'interface d'administration comme il se doit :

AdditionalLoginFormActionURL=http://tennisdemo.ezsystems.ca/tennis_admin/user/login

V - Modifications visuelles

Nous allons maintenant effectuer quelques réglages sur l'apparence du site. Ces modifications sont une simple introduction au système de templates et à l'organisation du CSS dans eZ Publish.

V-A - Ajouter un lien vers la page d'accueil dans la barre de menu horizontale

Par défaut, lorsqu'on clique sur le logo de l'entreprise à partir de n'importe quelle page on est redirigé sur la page d'accueil. Cependant, pour des raisons de confort, nous allons ajouter un lien vers la page d'accueil dans la barre de menu horizontale.

Afin de faire cela, nous devons tout d'abord ajouter un objet de type Link à la racine de notre arbre de contenu soit via l'interface web ou l'interface d'administration. Saisissez « Accueil » comme nom et « / » comme URL. Après avoir publié le lien, nous devons ajouter la classe « link » à la liste des classes autorisées dans la barre de menu horizontale. Ce paramètre se situe dans le fichier settings/override/menu.ini.append.php :

[MenuContentSettings]
TopIdentifierList[]
TopIdentifierList[]=folder
TopIdentifierList[]=feedback_form
TopIdentifierList[]=gallery
TopIdentifierList[]=forum
TopIdentifierList[]=article
TopIdentifierList[]=frontpage
TopIdentifierList[]=link

Le lien apparaît maintenant dans la barre de menu horizontale, mais se situe au milieu des éléments :

Lien Accueil au milieu des éléments du menu

Afin de déplacer le lien Accueil tout à gauche, il faut indiquer un niveau de priorité dans l'interface d'administration plus bas que tous les autres objets situés au premier niveau.

Mise à jour des niveaux de priorité

Le lien apparaît maintenant en première position à gauche, mais nous devons encore faire une dernière modification. Vous remarquerez qu'en cliquant sur le lien une nouvelle page ou onglet s'ouvre. Mais ce que l'on veut c'est que la page s'ouvre dans la fenêtre ou onglet actuel.

Nous devons localiser la template appropriée qui génère le XHTML de la barre de menu horizontale. Nous allons commencer notre recherche en analysant la template pagelayout. La pagelayout et la template de base qui indique la structure principale du site. Pour l'interface web, la pagelayout se trouve ici /extension/ezwebin/design/ezwebin/templates/pagelayout.tpl.

Dans le fichier pagelayout.tpl vous remarquerez le code suivant, lequel indique où se trouve la barre de menu horizontale :

<div id="topmenu" class="float-break">
{include uri='design:menu/flat_top.tpl'}
</div>

Dans le fichier flat_top.tpl, on trouve le code suivant, qui affiche les éléments du menu comme si c'étaient des objets de la class Link :

<li id="node_id_{$item.node_id}"{if $item_class}
class="{$item_class|implode(" ")}"{/if}><div><a href={if eq(
$ui_context, 'browse' )}{concat("content/browse/",
$item.node_id)|ezurl}{else}{$item.data_map.location.content|ezurl}{/if}
target="_blank"{if eq( $ui_context, 'edit' )} onclick="return
false;"{/if}><span>{$item.name|wash()}</span></a></div></li>

Nous supprimons target=« _blank », car c'est la cause de l'ouverture de la page d'accueil dans une nouvelle fenêtre.

V-B - Ajouter un logo

Nous allons remplacer l'image « COMPANYLOGO » qui apparaît sur toutes les pages par notre logo eZ Tennis :

Logo du club eZ Tennis

On peut uploader le nouveau logo en cliquant sur la page Paramètres du site de l'interface web. Cependant, le système va automatiquement redimensionner l'image vers une taille plus petite que ce que vous voudriez. C'est pourquoi nous devons changer les paramètres de configuration qui contrôlent le redimensionnement qu'eZ Publish va effectuer sur l'image.

Dans les fichiers settings/eng/image.ini.append.php et settings/fr/image.ini.append.php, changez le bloc [logo] comme ci-dessous :

[logo]
Reference=
Filters[]
Filters[]=geometry/scaledownonly=199;74

Maintenant nous pouvons uploader le logo comme décrit plus haut et il sera redimensionné selon nos indications.

V-C - Modifications du CSS

Après avoir changé la taille par défaut du logo, notre menu horizontal a légèrement besoin d'être descendu. On peut accomplir cela en éditant un des fichiers CSS du paquetage d'interface graphique situé dans /var/storage/packages/local/empower_enterprise/files/default/file.

En regardant le code XHTML source de la page (en sélectionnant « Affichage… Code source » dans Firefox, ou une fonction similaire dans d'autres navigateurs), on voit que le menu horizontal est contenu dans une div nommée « topmenu ». Par conséquent, nous devons trouver le fichier CSS qui définit le style de cette div.

Comme expliqué dans cet article How to Skin an eZ Publish Site, site-colors.css surcharge les styles globaux de la pagelayout (pas de lien avec le contenu), et classes-colors.css surcharge les styles spécifiques aux classes de contenu.

Par conséquent nous allons éditer le fichier site-colors.css et supprimer le style « margin-top » de la div topmenu :

div#topmenu
{
margin-top: -20px;
padding-left: 0.5em;
background-color: #FFFFFF;
}

En outre, comme mentionné plus haut, les liens de langue sont cachés dans cette interface. Nous allons les afficher, en supprimant du fichier site-colors.css le style qui se réfère à la div contenant les langues (lequel peut également être identifié en analysant les sources XHTML de la page) :

div#languages
{
background-image: none;
display: none;
}

V-D - Changement des URL pour les liens de langue

Maintenant que les liens de langues sont affichés en haut à gauche de la page, nous devons les mettre à jour afin qu'ils prennent en compte les siteaccess que nous avons simplifiés auparavant. On peut faire cela sur la page Look and feel dans l'onglet Design de l'interface d'administration ou sur la page Site settings de l'interface web.

Les URL du site devraient être « tennisdemo.ezsystems.ca » et « tennisdemo.ezsystems.ca/fr »; les siteaccess devraient être « eng » et « fr »; et les noms des langues peuvent rester les mêmes, car ils représentent le texte de chaque lien. Vous pouvez optionnellement changer la langue française en « Fr » pour être consistant avec le renommage des siteaccess.

Édition des liens de langues

Veuillez noter que vous devez faire ces modifications pour les deux siteaccess, français et anglais. Cela veut dire que vous devez éditer la page Look and feel de l'interface d'administration dans les deux langues, français et anglais, ou alors vous devez accéder à la page Site settings à partir des deux siteaccess, français et anglais.

VI - Modification du contenu

La dernière étape requise par notre installation est l'ajout de contenu sur la page d'accueil de notre site de tennis ! Les principales modifications du contenu que nous avons faites sont :

1. Changement de la bannière ;

2. Ajout de quelques news pertinentes sur la partie droite de la section ;

3. Ajout de quelques photos dans la galerie ;

4. Édition du texte d'introduction juste en dessous de la bannière ;

5. Suppression du contenu en dessous des photos.

Toutes les modifications de contenu ont été faites en ajoutant ou éditant des objets de contenu via l'interface web ou l'interface d'administration.

Vous pouvez voir le résultat sur la capture d'écran ci-dessous :

Le site après les modifications de contenu

VII - Conclusion

Dans cet article, nous avons commencé à mettre en place le site fictif eZ Tennis en utilisant eZ Publish. Vous devriez maintenant avoir acquis un peu d'expérience avec les éléments suivants d'eZ Publish :

- Interface web ;

- Interface d'administration ;

- Fichiers de configuration INI ;

- Fichiers de templates ;

- Fichiers CSS ;

- Paquetages de site (importation d'une nouvelle interface).

Les articles suivants de ce tutoriel vont expliquer comment utiliser les flux RSS pour récupérer des données provenant d'autres sites, comment ajouter une extension et bien d'autres choses encore !

VII-A - Remerciements

Je remercie Dolphy35 d'avoir corrigé l'article et Peter Keung pour sa collaboration tout au long de la traduction de ce tutoriel.

VII-B - Références

Comment modifier l'interface d'un site eZ Publish Now
Optimisation des performances d'eZ Publish partie 3 de 3: Cache et Template en pratique
Documentation sur la gestion d'un site
site.ini documentation (pour la modification des URL)
Forum de discussion sur la modification du nom des siteaccess