PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Une page popup pour envoyer des emails
  • Création de la page popup
  • Création des champs permettant de saisir les caractéristiques de l'email
  • Envoi de l'email
  • Améliorations de la page
  • Fermeture de la page popup
  • Ouverture de la page popup
Leçon 5.3. Envoyer un Email
Ce que vous allez apprendre dans cette leçon
  • Comment envoyer un email depuis un site WEBDEV

Durée estimée : 20 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Le WLangage possède toutes les fonctions nécessaires pour gérer l'envoi et la réception d'emails. Vous pouvez également accéder à toutes les caractéristiques d'un email :
  • expéditeur, destinataires,
  • date d'envoi, sujet, message,
  • pièces jointes ...
WEBDEV permet de gérer les emails grâce à plusieurs méthodes :
  • Gestion via Lotus Notes, Outlook ou MS Exchange :
    • Le logiciel de messagerie Lotus Notes ou Outlook : grâce à ces logiciels, il est possible d'envoyer et de recevoir des emails.
    • L'API "Simple Mail API" (appelé aussi SMAPI ou Simple MAPI) : ce mode de gestion des emails est utilisé par la plupart des applications Microsoft et principalement Microsoft Exchange.
  • Gestion via les protocoles POP3, IMAP et SMTP :
    • Le protocole POP3 : ce protocole de réception des emails est reconnu par tous les fournisseurs de service. Il permet de dialoguer directement avec le serveur, disponible chez votre fournisseur d'accès. Ce protocole permet de lister les messages reçus et de les lire.
    • Le protocole IMAP : ce protocole de réception d'emails permet de laisser les emails sur le serveur dans le but de pouvoir les consulter de différents clients de messagerie ou webmail.
    • Le protocole SMTP : ce protocole d'envoi de mails est reconnu par tous les fournisseurs de service.
Dans cette leçon, nous allons créer une page Popup permettant à l'utilisateur d'envoyer une suggestion par mail au développeur du site. Cette popup est la suivante :
Pour cela, nous allons utiliser le protocole SMTP. En effet, c'est le mode qui est actuellement le plus utilisé dans le monde.
Pour plus de détails sur les différentes méthodes, consultez Communiquer par emails.

Corrigé

Si vous n'avez pas créé les pages des leçons précédentes, vous pouvez suivre cette leçon en ouvrant un projet corrigé : sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Site WEBDEV Complet (Avec pages)".
Un projet corrigé complet de l'application est également disponible : sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Site WEBDEV Complet (Corrigé)".

Exemples

Pour plus de détails sur la gestion des emails, consultez l'exemple "Envoi d'e-mail" (exemple unitaire), livré en standard avec WEBDEV. Cet exemple est accessible depuis la fenêtre de bienvenue de WEBDEV.
Une page popup pour envoyer des emails
La page popup que nous allons créer va contenir tous les champs permettant à l'utilisateur de saisir les différents éléments de l'email. Un bouton "Envoyer" regroupera tous les traitements permettant d'envoyer l'email.

Création de la page popup

  • Pour créer la page popup :
    1. Ouvrez si nécessaire le projet "Site_WEBDEV_Complet".
    2. Affichez la page "PAGE_Liste_des_produits".
    3. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Popup".
    4. La page Popup apparaît sous l'éditeur.
    5. Agrandissez la page Popup en largeur et en hauteur à l'aide des poignées.
    6. Enregistrez la page ( ou Ctrl + S).

Création des champs permettant de saisir les caractéristiques de l'email

Pour écrire un email, l'utilisateur doit avoir à sa disposition :
  • Un champ permettant de saisir l'adresse de l'expéditeur.
  • Un champ permettant de saisir le sujet de l'email.
  • Un champ permettant de saisir le texte de l'email.
Nous allons ajouter tous ces champs en quelques clics dans notre page.
Remarque : le destinataire étant le développeur du site, l'adresse correspondante sera présente dans le code d'envoi de l'email. De la même façon, les paramètres du serveur SMTP seront saisis directement dans le code.
  • Pour créer le champ de saisie correspondant à l'adresse de l'expéditeur :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
    2. Sélectionnez le champ de saisie prédéfini "E-Mail".
    3. Cliquez dans la page : le champ de saisie est automatiquement créé.
    4. Modifiez le libellé du champ : "Expéditeur".
  • Pour créer le champ de saisie correspondant au sujet de l'email :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Cliquez sous le champ "Expéditeur" : le champ de saisie est automatiquement créé.
    3. Modifiez le libellé du champ : "Sujet".
  • Pour le corps du message, nous allons utiliser un champ de saisie HTML : l'utilisateur pourra ainsi mettre en forme facilement le texte de l'email grâce à une barre d'outils spécifique.
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
    2. Sélectionnez un champ de saisie prédéfini "Texte HTML".
    3. La forme du champ apparaît sous le curseur de la souris.
    4. Cliquez sous le champ "Sujet" : le champ de saisie est automatiquement créé.
    5. Agrandissez le champ afin que plusieurs lignes soient visibles.
    6. Affichez la fenêtre de description du champ (double-cliquez sur le champ).
      • Sous l'onglet "Général", modifiez le mode d'affichage de la barre d'outils HTML. Cette barre d'outils doit être toujours visible.
      • Validez la fenêtre de description du champ.
    7. Si nécessaire, repositionnez le champ.
  • Alignez les différents champs présents dans la page.
Nous allons maintenant créer le bouton permettant d'envoyer les emails.

Envoi de l'email

  • Pour créer le bouton d'envoi :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Cliquez à l'emplacement de création du bouton (par exemple en bas de la page).
    3. Sélectionnez le bouton et modifiez son libellé (par exemple en utilisant la touche Entrée). Le nouveau libellé est "Envoyer".
    4. Editez le code de ce bouton (touche F2).
    5. Saisissez les différents codes suivants dans le traitement serveur de "Clic" :
      • le code de connexion et d'ouverture de la session SMTP :
        MaSession est une emailSessionSMTP
        MaSession.AdresseServeur = "serveursmtp"
        // Saisissez ici l'adresse du serveur SMTP
        MaSession.Nom = "nom_utilisateur"
        // Saisissez ici le nom d'utilisateur (si nécessaire)
        MaSession.MotDePasse = ""
        // Saisissez ici le mot de passe (si nécessaire)

        // Ouvre la session SMTP
        SI EmailOuvreSession(MaSession) = Faux ALORS
        ToastAffiche("Connexion au serveur SMTP impossible.", ...
        ErreurInfo())
        RETOUR
        FIN
        Ce code utilise une variable avancée de type EmailSessionSMTP. Les différentes propriétés de cette variable permettent de définir les caractéristiques de la session SMTP. La fonction EmailOuvreSession utilisée avec cette variable permet ensuite d'ouvrir la session.
      • le code de préparation de l'email :
        Suggestion est un Email
        Suggestion.Expediteur = SAI_Expéditeur
        Suggestion.Sujet = SAI_Sujet
        Suggestion.HTML = SAI_Texte_HTML
        Suggestion.Message = HTMLVersTexte(SAI_Texte_HTML)
        Suggestion.Destinataire[1] = "developpeur@monsite"
        // Saisissez ici l'adresse du destinataire des suggestions
        Ce code utilise une variable de type Email. Les différentes propriétés de cette variable permettent de définir les caractéristiques de l'email à envoyer. Ce code associe donc le contenu des différents champs de la page aux propriétés de la variable de type Email.
      • le code d'envoi de l'email :
        // Envoi de l'email
        SI EmailEnvoieMessage(MaSession,Suggestion) = Faux ALORS
        ToastAffiche("Erreur d'envoi",ErreurInfo())
        SINON
        ToastAffiche("Merci pour votre suggestion.")
        FIN
        L'envoi de l'email est simplement réalisé avec la fonction EmailEnvoieMessage. Il suffit de lui passer en paramètre la variable contenant les caractéristiques de la session SMTP et la variable contenant les caractéristiques de l'email à envoyer.
        Si l'email est envoyé, un message de type Toast indiquant que l'email a été envoyé est affiché. Un message Toast correspond à un message furtif.
      • le code de fermeture de la session SMTP :
        // Fermeture de la session SMTP
        EmailFermeSession(MaSession)
        Ce code ferme la session grâce à la fonction EmailFermeSession. Fermez l'éditeur de code.
  • Enregistrez la page et son code ( ou Ctrl + S).

Note

Le traitement proposé pour l'envoi des emails est purement pédagogique. Dans un site réel, il conviendrait de vérifier les paramètres saisis, traiter les erreurs, enregistrer un fichier de log, ...
Améliorations de la page
Nous allons apporter quelques améliorations à notre page popup :
  • Ajouter un bouton de fermeture.
  • Lancer la page popup depuis la page "PAGE_Liste_des_produits".

Fermeture de la page popup

  • Pour ajouter un bouton permettant de fermer la page popup :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
    2. Cliquez dans la page à la position où le bouton doit être créé (par exemple, en bas, à droite du bouton "Envoyer").
    3. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Annuler" et validez.
    4. Affichez les traitements associés au bouton (touche F2).
    5. Dans le code de clic navigateur, saisissez le code suivant :
      PopupFerme()
      La fonction PopupFerme permet de fermer la popup.
  • Cette fonction est une fonction Navigateur, exécutée uniquement sur le navigateur : aucun retour au serveur n'est nécessaire. Nous allons donc modifier le type du bouton "Annuler" en conséquence :
    1. Affichez la fenêtre de description du bouton "Annuler" (double-cliquez sur le champ par exemple).
    2. Dans l'onglet "Général", dans la zone "Opération sur les champs", sélectionnez "Aucune".
    3. Validez la fenêtre de description du champ.
Nous allons maintenant voir comment ouvrir la page popup.

Ouverture de la page popup

La page popup d'envoi d'un email va être ouverte directement depuis le menu de la page "PAGE_Liste_des_produits".
  • Affichez la page "PAGE_Liste_des_produits" :
    1. Sous l'éditeur, dans le bandeau de la page, déroulez"Pages Popup".
    2. Dans la liste qui s'affiche, cliquez sur "PAGE_Liste_des_produits".
  • Nous allons maintenant créer un lien permettant d'envoyer une suggestion :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Lien".
    2. Cliquez ensuite dans la partie haute de la page (au-dessus du champ de recherche) : le champ Lien est créé.
    3. Modifiez son libellé : "Envoyer une suggestion" et validez.
    4. Affichez la fenêtre de description du champ (double-cliquez sur le champ).
    5. Dans la zone "Opération sur les champs", sélectionnez "Aucune".
    6. Dans la zone "Action", sélectionnez "Aucune".
    7. Validez la fenêtre de description du champ.
    8. Affichez les traitements associés au bouton (touche F2).
    9. Dans le code de clic navigateur, saisissez le code suivant :
      PopupAffiche(POPUP_SansNom1)
      La fonction PopupAffiche permet d'afficher la popup.

Note

Pourquoi ne pas avoir ouvert la popup depuis le menu présent dans le modèle de pages ?
La page popup que nous avons créée est liée à la page "PAGE_Liste_des_Produits". Elle ne peut être utilisée que depuis cette page.
Pour utiliser une popup depuis un modèle de pages, la popup doit être créée à partir du modèle de pages.
  • Enregistrez la page et son code ( ou Ctrl + S).
  • Lancez le test de la page ( parmi les boutons d'accès rapide) et ouvrez la popup d'envoi d'une suggestion.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire