P
'
t
i
t
e
C
h
a
t
t
e
 
spacer~ WAR DOES NOT DETERMINE WHO IS RIGHT, WAR DETERMINE WHO IS LEFT Articles | Connexion
 
~Emails et albums photos

Précédent  
  Zope  
  Suivant
 Présentation

Le langage interne à Zope, le fameux DTML, incorpore plusieurs fonctions extrêmement puissantes. Parmi celles-ci, la possibilité d'envoyer des e-mails et de gérer des collections.
 Sommaire


 Introduction

L'application "helloworld" que nous avons vu le mois dernier contenait une liste d'utilisateurs. Nous nous proposons ce mois-ci de modifier la page d'accueil de l'un des utilisateurs. Notre modification permettra aux visiteurs du site d'envoyer des messages de retour d'expérience au propriétaire de la page. Pour cela nous allons faire appel à la balise .

La première étape consiste à créer un formulaire laissant loisir au visiteur d'entrer diverses informations telles que son nom ou encore le sujet de son courrier électronique. Placez-vous donc, sous Zope, dans un des répertoires des utilisateurs (nous prenons ici l'exemple de l'utilisateur "gfx") puis éditez son fichier index_html. Supprimez son contenu et remplacez-le listing 1.

Envoyez vos impressions à l'auteur :<br />
<form name="feedback" method="post" action="mail_author">
  Nom : <input type="text" name="username" /><br />
  Email : <input type="text" name="email" /><br />
  Sujet : <input type="text" name="subject"></textarea><br />
  Texte : <textarea name="comments"></textarea><br /><br />
  <input type="submit" name="ok" value="Envoyer" />
</form>
       
      
JextCopier dans Jext | Jext | Plugin Codegeek
Il ne s'agit que d'un simple formulaire HTML. L'action du formulaire, dans la balise <form>, se voit représentée par le document DTML nommé "mail_author". Créons donc ce nouveau document.


 Envoyer un email

Notre nouveau document contiendra un petit message attestant de l'envoi du courrier ainsi que le code DTML nécessaire à cet envoi. La balise utilisée est la balise <dtml-sendmail>. Celle-ci doit contenir le corps du message. Ses attributs sont multiples :
  • smtphost : adresse du serveur SMTP
  • mailhost : objet MailHost Zope
  • mailto : destinataire
  • mailfrom : expéditeur
  • subject : sujet
  • port : le port SMTP, 25 par défaut

Les attributs smtphost et mailhost sont mutuellement exclusifs. Les trois attributs suivants peuvent se voir remplacés par des directives dans le corps du courrier électronique. Pour notre part nous utiliserons le contenu du listing 2.

<dtml-sendmail mailhost="wanadoo">
To: Romain Guy <romain.guy@jext.org>
From: <dtml-var username> <<dtml-var email>>
Subject: <dtml-var subject>

<dtml-var username> a écrit :
<dtml-var comments>
</dtml-sendmail>
       
      
JextCopier dans Jext | Jext | Plugin Codegeek
La première constatation a trait à l'expéditeur et au destinataire. Comme vous le voyez, ils sont précisés dans le corps du message. Les différentes balises se rapportent aux noms des champs du formulaire de la page index_html. Ainsi, est évaluée comme le titre du message précisé dans le formulaire. Afin de tester correctement la fonction sendmail, il est conseillé de modifier le destinataire par défaut.

Nous employons ici l'attribut mailhost plutôt que smtphost. Nous aurions fort bien pu écrire smtphost="smtp.wanadoo.fr". L'intérêt de l'utilisation des objets MailHost réside dans leur souplesse de maintenance. Cela est d'autant plus vrai si vous expédiez des e-mails depuis plusieurs pages de votre site. Revenez donc dans le répertoire de l'utilisateur "gfx" et ajouter un nouvel objet MailHost. L'identificateur que nous avons choisi est wanadoo, libre à vous d'en utiliser un autre. Les champs SMTP Host et SMTP Port servent respectivement à préciser l'adresse du serveur de courrier et son numéro de port de communication. Pour nos tests il vous faudra impérativement utiliser un serveur SMTP auqel votre connexion vous donne accès.

Vous pouvez maintenant faire pointer votre butineur sur l'adresse http://localhost:8080/helloworld/utilisateurs/gfx. Après avoir rempli les divers champs, cliquez simplement sur le bouton "Envoyer". Quelques instants plus tard vous devriez recevoir le message généré.

La fonction DTML sendmail découvre toute sa puissance lorsque l'on décide d'employer les caractéristiques objets de Zope. Chaque utilisateur du site pourrait ainsi se voir assigné un attribut "email" lors de sa création. L'écriture d'une DTML Method de retour d'expérience générique deviendrait alors très simple.


 Album photos

Zope offre de grande facilitées pour gérer des collections telles que des albums photos. Dans l'application "helloworld", ajoutez un répertoire vide nommé "photos". Dans celui-ci créez un nouveau sous-répertoire "images". Vous pouvez dors et déjà créer quelques objets Image dans ce dernier répertoire afin de simplifier les tests.

La première étape de la gestion de notre album concerne l'affichage. Les répertoires sont considérés par Zope comme des objets. Nous pouvons donc les parcourir grâce au listing 3.

<table>
<dtml-in expr="images.objectValues()">
<tr>
<td>
  <a href="<dtml-var absolute_url>">
  <img border="0" src="<dtml-var absolute_url>" />
  </a>
  <div align="center"><u><dtml-var title></u></div>
  <br /><br />
</td>
</tr>
</dtml-in>
</table>
       
      
JextCopier dans Jext | Jext | Plugin Codegeek
Cet extrait de code se place dans le document DTML "archive" du répertoire "photos". La balise <dtml-in> nous permet d'énumérer chacun des objets contenus dans le répertoire "images". Le corps de l'énumération ne présente aucune difficulté particulière : chaque image est affichée par la balise HTML <img>. L'intérêt d'un tel album étant de pouvoir ajouter facilement des images, nous allons devoir apprendre à créer de nouveaux objets Image dans le répertoire adéquat.


 Ajout d'une photo

Créons un document DTML supplémentaire nommé "ajoutPhoto". Ce document présente un formulaire de téléchargement d'une image sur le site. Une image a pour représentation un fichier et un titre. A l'instar de l'envoi de courrier électronique, le simple formulaire HTML du listing 4 fera l'affaire.

<form action="ajoutPhotoAction" method="post" enctype="multipart/form-data">
Titre : <input type="text" name="photoTitle"><br />
Fichier : <input type="file" name="file"><br />
<br />
<input type="submit" value="Envoyer"/>
</form>
       
      
JextCopier dans Jext | Jext | Plugin Codegeek
Pour gérer le formulaire nous utilisons le document "ajoutPhotoAction". Ce document DTML joue le même rôle ici que le document "mail_author" précédemment. Mais pour ajouter un nouvel objet au répertoire images nous utiliserons la balise DTML call. Cette balise s'écrit de la sorte : <dtml-call expr="expression python">. Prenons un exemple :

<dtml-call expr="images.manage_addDocument(
   id='monDocument',title='Document de Test')">
       
      
JextCopier dans Jext
L'expression Python exécutée ici est claire. Nous provoquons un appel à la méthode manage_addDocument() de l'objet images. Les paramètres représentent ce que l'on nomme en Python des paramètres nommés (voir l'article relatif à Python dans ce même magazine). Cette méthode crée un nouveau document DTML au sein du répertoire images. Ce nouveau document possède un attribut ID de valeur "monDocument" et un titre correspondant à "Document de Test".

Pour nos images, voici comment procéder :

<dtml-call expr="images.manage_addImage(id='',
    file=file, title=photoTitle)">
       
      
JextCopier dans Jext
Une image, contrairement à un document, ne requière pas d'identificateur. Par contre, nous devons préciser le fichier image. Ce fichier nous est fourni par le champ "file" du formulaire HTML. Chaque fois que vous ajouterez une photo par le biais de notre formulaire, un nouvel objet fera son apparition dans le répertoire images.

Le CD-Rom accompagnant le magazine contient l'archive de l'application helloworld au format .zexp.



par Romain Guy
romain.guy@jext.org
http://www.jext.org
Dernière mise à jour : 14/10/2006


Précédent  
  Zope  
  Suivant

 
#ProgX©2005 Mathieu GINOD - Romain GUY - Erik LOUISE