Date de publication: le mercredi 29 avril 2009 à 15h49
Dernière modification: par Pascal BOYER le samedi 30 mai 2009 à 14h34
« Article précédent: Playlist automatique : créer les playlists - V
» Article suivant: eZ Publish : système de gestion des mails - page « Contact » II

Ce premier article d'une série de trois présente par le détail la mise en oeuvre d'une page de contact.

Prérequis

Voici l'environnement logiciel dans lequel est développé l'exemple détaillé par l'article:

• Plate-forme Linux/Debian,
• Serveur Apache 2.2.11-2 ( DocumentRoot : /usr/local/web/ -- répertoire racine d'installation de eZ Publish )
• PHP 5.2.9
• MySQL 5.0.77
• Serveur de mail Postfix 2.5.4-1
• eZ Publish 4.1.0

L'ensemble des commandes en lignes proposées sont lancées à partir du répertoire racine de eZ Publish.

Points abordés

• Création d'une classe d'objet
• Les champs collecteurs d'information
• Création d'une surcharge
• Création d'un template
• Code template
• Système d'informations collectées

Créer la classe d'objet Page de contact

La première chose par laquelle nous allons commencer est la création de la classe d'objet qui servira à instancier la page de contact présentée aux visiteurs du site.

Avant de poursuivre, rappelons les spécificités d'une page de contact:

• Contient des champs de saisie
• Envoie le contenu par mail au destinataire (qui est souvent le webmaster)
• Le contenu saisi n'est pas destiné à être publié sur le site

Hormis ces singularités, il faut considérer qu'une page de contact n'est rien d'autre qu'un article dont le contenu est rédigé par le visiteur. La logique de création d'une page de contact s'apparente donc de près à celle d'un article personnalisé.

Pour créer la classe Page de contact, cliquez sur l'onglet Administration de l'interface d'administration puis sur le lien Classes du menu gauche puis sur le lien Content dans le cadre Groupes de classe [4] et enfin sur le bouton Nouvelle classe du cadre Classes dans <Content> [X].

En sélectionnant les datatypes de votre choix dans le menu déroulant (voir Figure 1) placé au bas du cadre d'édition Modifier <Nouvelle classe> [Classe], créez les attributs de votre formulaire en fonction de vos besoins. Voici l'exemple qui servira tout au long de l'article:

:
L'ordre dans lequel nous plaçons les attributs est sans importance puisqu'il pourra être redéfini comme bon nous semble à partir du template d'affichage pagecontact.tpl de la page de contact.

Fig. 1: L'interface d'édition de la classe d'objet Page de contact

:
Chaque attribut destiné à présenter un champ de saisie aux visiteurs doit être affecté de l'option Collecteur d'information.

Par ailleurs, l'option Obligatoire rendra la saisie d'un contenu dans le champ afférent obligatoire pour que soit validé l'envoi du formulaire par le système. Un champ obligatoire laissé vide produira un message d'erreur lors de l'envoi.

Enfin, il est tout à fait possible de mêler des attributs Collecteurs d'informations à d'autres qui ne le sont pas. Ceci permet par exemple d'afficher un message explicatif au-dessus d'un champ de saisie.

Prise en charge de la classe Page de contact

Chaque fois qu'une nouvelle classe d'objet est créée, il est nécessaire d'ajouter son identifiant ( page_contact) à la liste du tableau ShowClasses[] de la section [TreeMenu] du fichier de surcharge contentstruture.ini.append.php du siteaccess d'administration. Sans cela, la nouvelle classe ne sera pas visible dans le menu contextuel de l'onglet Contenus et ses instances ne seront pas affichées dans l'arborescence de contenus.

[TreeMenu]
Dynamic=enabled
ShowClasses[]
ShowClasses[]=article
ShowClasses[]=dossier_video
ShowClasses[]=folder
ShowClasses[]=gallery_photos
ShowClasses[]=image_music
ShowClasses[]=link
ShowClasses[]=page_contact     <== CETTE LIGNE
ShowClasses[]=user_group

Configuration du fichier de surcharge contentstruture.ini.append.php

Pensez à vider les caches chaque fois que vous modifiez un fichier de surcharge.

Si vous souhaitez affecter une icône particulière à votre nouvelle classe, reportez-vous cet article: eZ Publish : icônes de l'interface d'administration

Créer l'objet Contact

Avant d'être en mesure de publier la page de contact sur le site public, encore faut-il qu'elle existe. Nous devons donc instancier un objet Contact (par exemple) à partir de notre nouvelle classe exactement comme nous le faisons pour un article.

Voici la page d'édition de l'objet Contact réalisé à partir de la classe Page de contact présentée par la figure 1:

Fig. 2: Interface d'édition de l'objet Contact

Dans notre exemple, les trois seuls champs à remplir sont ceux liés aux attributs:

• Nom de cette page de contact lui-même basé sur un datatype Ligne de texte (le contenu de ce champ sert à nommer l'objet que l'on crée)

• Texte explicatif à placer avant le formulaire lui-même basé sur un datatype Block XML

• Adresse du destinataire lui-même basé sur un datatype Courriel.

Après validation par le biais du bouton Envoyer pour publication, l'objet (plus exactement le noeud qui l'encapsule) apparaît dans le menu Contenus:

Fig. 3: Le noeud qui encapsule l'objet Contact affiché par le menu Contenus

Si l'objet Contact doit être un lien dans l'un des menus de notre site, il devient alors nécessaire de renseigner l'un des deux tableaux TopIdentifierList[] ou LeftIdentifierList[] de la section [MenuContentSettings] du fichier de surcharge menu.ini.append.php du siteaccess public que notre site.

[MenuContentSettings]
TopIdentifierList[]
TopIdentifierList[]=folder
TopIdentifierList[]=link
TopIdentifierList[]=page_contact  <== CETTE LIGNE (SI DANS MENU SUPERIEUR HORIZONTAL = flat_top )
LeftIdentifierList[]
LeftIdentifierList[]=folder
LeftIdentifierList[]=page_contact  <== OU BIEN CELLE-CI (SI DANS MENU GAUCHE VERTICAL = flat_left )

Affichage de la page de contact sur le site public

Par défaut, voici l'affichage produit par eZ Publish d'une instance de la classe Page de contact:

Fig. 4: Affichage par défaut de l'objet Contact

Le template utilisé pour produire cet affichage est design/standard/templates/node/view/ full.tpl.

Si l'identifiant de la classe d'objet Page de contact était feedback_form au lieu de page_contact, le fichier override.ini.append.php de notre siteaccess public nous apprend que c'est le template design/base/override/templates/full/ feedback_form.tpl qui aurait été utilisé. En effet, on trouve dans le fichier override.ini.append.php la règle de surcharge suivante:

498 [feedback_form_full]
499 Source=node/view/full.tpl
500 MatchFile=full/feedback_form.tpl
501 Subdir=templates
502 Match[class_identifier]=feedback_form

Et auquel cas l'affichage eut été:

Fig. 5: Affichage de la page contact par le template feedback_form.tpl

L'absence des champs de saisie ci-dessus prouve que le template feedback_form.tpl recherche, pour chacun des attribut de l'objet Contact, des identifiants ne correspondant pas à ceux utilisés dans notre exemple. C'est pourquoi nous allons, en nous basant sur le code de ce template, créer celui du nouveau template qui affichera notre page de contact.

Créer le template pagecontact.tpl

Commençons par faire une copie du template feedback_form.tpl dans un sous-répertoire du design plain_site du siteaccess public:

cp -p design/base/override/templates/full/feedback_form.tpl design/plain_site/override/templates/full/pagecontact.tpl

Il sera peut-être nécessaire de créer préalablement le sous-répertoire full/ qui n'existe pas par défaut dans design/plain_site/override/templates/.

Le nouveau template pagecontact.tpl contient donc ce code:

1 {* Feedback form - Full view *}
2
3 <div class="content-view-full">
4     <div class="class-feedback-form">
5
6         <h1>{$node.name|wash()}</h1>
7
8         {include name=Validation uri='design:content/collectedinfo_validation.tpl'
9                  class='message-warning'
10                  validation=$validation collection_attributes=$collection_attributes}
11
12         <div class="attribute-short">
13                 {attribute_view_gui attribute=$node.data_map.description}
14         </div>
15         <form method="post" action={"content/action"|ezurl}>
16
17         <h2>{"Your email address"|i18n("design/base")}</h2>
18         <div class="attribute-email">
19                 {attribute_view_gui attribute=$node.data_map.email}
20         </div>
21
22         <h2>{"Subject"|i18n("design/base")}</h2>
23         <div class="attribute-subject">
24                 {attribute_view_gui attribute=$node.data_map.subject}
25         </div>
26
27         <h2>{"Message"|i18n("design/base")}</h2>
28         <div class="attribute-message">
29                 {attribute_view_gui attribute=$node.data_map.message}
30         </div>
31
32         <div class="content-action">
33             <input type="submit" class="defaultbutton" name="ActionCollectInformation" value="{"Send form"|i18n("design/base")}" />
34             <input type="hidden" name="ContentNodeID" value="{$node.node_id}" />
35             <input type="hidden" name="ContentObjectID" value="{$node.object.id}" />
36             <input type="hidden" name="ViewMode" value="full" />
37         </div>
38         </form>
39
40     </div>
41 </div>

• Les lignes 8 à 10 servent à mettre en oeuvre, à travers l'appel du template design/standard/templates/content/ collectedinfo_validation.tpl, le système de contrôle de validité des saisies de l'utilisateur. En cas d'erreurs, des messages informent ce dernier des modifications à apporter pour que le système puisse envoyer le formulaire.
• Le code d'affichage du texte descriptif du formulaire est compris entre les lignes 12 et 14.
• Le code d'affichage des champs de saisie est compris entre les lignes 15 et 38.

Pour chacun des champs de saisie correspondent les 4 lignes suivantes:

<h2>{"Subject"|i18n("design/base")}</h2>
<div class="attribute-email">
     {attribute_view_gui attribute=$node.data_map.xxxxxx}
 </div>

...où xxxxxx correspond au nom de l'identifiant de l'attribut de la classe d'objet Page de contact lié au champ de saisie à afficher. Si l'on souhaite par exemple afficher le champ Message, lié à l'attribut dont l'identifiant est message_expediteur, alors le code devient:

<h2>{"Subject"|i18n("design/base")}</h2>
 <div class="attribute-email">
      {attribute_view_gui attribute=$node.data_map.message_expediteur}
  </div>

Sur la base de ce dernier exemple, nous allons créer le code du nouveau template pagecontact.tpl.

Code d'affichage du texte descriptif

1 <div class="content-view-full">
2     <div class="class-feedback-form">
3
4         {include name=Validation uri='design:content/collectedinfo_validation.tpl'
5                  class='message-warning'
6                  validation=$validation collection_attributes=$collection_attributes}
7
8         <div class="attribute-short">
9                 {attribute_view_gui attribute=$node.data_map.descriptif_formulaire}
10         </div>

Code d'affichage des champs de saisie

11         <form method="post" action={"content/action"|ezurl}>
12
13         <h2>{$node.data_map.nom_expediteur.contentclass_attribute.name}</h2>  <== AFFICHE LE NOM DE L'ATTRIBUT
14         <div class="attribute-email">
15                 {attribute_view_gui attribute=$node.data_map.nom_expediteur}
16         </div>
17         <h2>{$node.data_map.prenom_expediteur.contentclass_attribute.name}</h2>
18         <div class="attribute-email">
19                 {attribute_view_gui attribute=$node.data_map.prenom_expediteur}
20         </div>
21         <h2>{$node.data_map.mail_expediteur.contentclass_attribute.name}</h2>
22         <div class="attribute-email">
23                 {attribute_view_gui attribute=$node.data_map.mail_expediteur}
24         </div>
25         <h2>{$node.data_map.coordonnees_expediteur.contentclass_attribute.name}</h2>
26         <div class="attribute-email">
27                 {attribute_view_gui attribute=$node.data_map.coordonnees_expediteur}
28         </div>
29         <h2>{$node.data_map.message_expediteur.contentclass_attribute.name}</h2>
30         <div class="attribute-email">
31                 {attribute_view_gui attribute=$node.data_map.message_expediteur}
32         </div>
33
34         <div class="content-action">
35             <input type="submit" class="defaultbutton" name="ActionCollectInformation" value="{"Send form"|i18n("design/base")}" />
36             <input type="hidden" name="ContentNodeID" value="{$node.node_id}" />
37             <input type="hidden" name="ContentObjectID" value="{$node.object.id}" />
38             <input type="hidden" name="ViewMode" value="full" />
39         </div>
40         </form>
41
42     </div>
43 </div>

Créer la surcharge

Avant que le système soit en mesure d'utiliser notre nouveau template, il faut créer la surcharge suivante dans le fichier override.ini.append.php (de préférence au début du fichier) du siteaccess public:

[page_contact]
Source=node/view/full.tpl
MatchFile=full/pagecontact.tpl
Subdir=templates
Match[class_identifier]=page_contact

Après avoir vidé les caches et rechargé, sur le site public, la page de contact, l'affichage doit ressembler à ceci:

Fig. 6: Affichage de la page contact par le nouveau template pagecontact.tpl

Si nous remplissons le formulaire puis l'expédions, une page récapitulative s'affiche:

Fig. 7: Affichage de la page récapitulative

C'est le template design/standard/templates/content/collectedinfo/ form.tpl qui affiche le contenu présenté par la figure 7 ci-dessus. Une simple surcharge de ce template vous permettra de modifier à votre guise le contenu affiché.

:
Comme l'illustre la figure 7, le texte collecté n'est pas mis en forme. Que je sache, il n'y a pas moyen de collecter le texte saisi en intégrant les sauts ou retours à la ligne.

Informations collectées

Alors que le système de gestion des mails et la configuration de l'adresse e-mail du destinataire du formulaire de la page contact sont détaillés dans l'article suivant (eZ Publish : système de gestion des mails - page « Contact » II), il est néanmoins possible, sans serveur de mails, de visualiser les différents formulaires envoyés par les visiteurs de notre site.

Pour cela, cliquez sur l'onglet Administration de l'interface d'administration puis sur le lien Informations collectées dans le menu de gauche. S'affiche alors le cadre suivant:

Fig. 8: Liste des ojects collecteurs d'information et nombre de collectes

Pour afficher la liste des collectes liées à l'objet collecteur d'information Contact, cliquez sur le lien situé à droite (en rose sur la figure 8). Le nouveau cadre ci-après s'affiche alors:

Fig. 9: Liste des informations collectées par l'objet collecteur d'information Contact

...où il ne reste plus qu'à cliquer sur un des liens en rose pour enfin afficher le récapitulatif du contenu d'un formulaire:

Fig. 10: Liste des informations collectées par le 4ème formulaire envoyé à la date du 30/04/2009 à 09:39

Pour aller plus loin

Le prochain article traite en détail la configuration du système d'envoi par mail des informations collectées.

Commentaires