DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Recherche multicritère et impression
  • 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 de la leçon

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.
  • Ré-ouvrez si nécessaire le projet que vous avez manipulé dans la leçon précédente.
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Exercice".
    3. WEBDEV vous propose d'ouvrir le projet que vous avez manipulé dans la leçon précédente. Vous pouvez ouvrir le projet présent sur votre poste ou ouvrir le projet original. Choisissez "Ouvrir la copie locale".

Corrigé

Un projet corrigé est disponible. Ce projet contient les différents éléments créés dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "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 d'accueil 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. Dans le bandeau de la page en cours d'édition, cliquez sur "Pages Popup".
    4. Dans le menu affiché, cliquez sur "Nouvelle popup".
    5. La page popup apparaît en création sous l'éditeur.
    6. Agrandissez la page Popup en largeur et en hauteur à l'aide des poignées.
    7. Enregistrez la page (Enregistrer un élément 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 Créer un champ de saisie.
    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 "Saisie 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 (option "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 champ Bouton permettant d'envoyer les emails.

Envoi de l'email

  • Pour créer le champ Bouton permettant l'envoi des emails :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
    2. Cliquez à l'emplacement où le champ Bouton doit être créé (par exemple en bas de la page).
    3. Sélectionnez le champ et modifiez son libellé (par exemple en utilisant la touche Entrée). Le nouveau libellé est "Envoyer".
    4. Editez le code de ce champ (touche F2).
    5. Saisissez les différents codes suivants dans l'événement serveur "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 MaSession.OuvreSession() = 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 <Session>.OuvreSession 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_HTML
        Suggestion.Message = HTMLVersTexte(SAI_HTML)
        Suggestion.Destinataire[1] = "developpeur@monsite"
        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 MaSession.EnvoieMessage(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 <Session>.EnvoieMessage utilisée sur la variable contenant les caractéristiques de la session SMTP avec en paramètre 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
        MaSession.FermeSession()
        Ce code ferme la session grâce à la fonction <Session>.FermeSession. Fermez l'éditeur de code.
  • Enregistrez la page et son code (Enregistrer un élément 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 champ Bouton pour fermer cette page popup.
  • Lancer la page popup depuis la page "PAGE_Liste_des_produits".

Fermeture de la page popup

  • Pour ajouter un champ 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 champ Bouton doit être créé (par exemple, en bas, à droite du champ Bouton "ENVOYER").
      Création du champ pour fermer la page
    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 événements associés au champ (touche F2).
    5. Dans le code de clic navigateur, saisissez le code suivant :
      PopupFerme()
      La fonction PopupFerme permet de fermer la popup.
  • Cette fonction PopupFerme 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 champ Bouton "Annuler" (double-cliquez sur le champ par exemple).
    2. Dans l'onglet "Général", dans la zone "Action du bouton" :
      • pour l'option "type", sélectionnez "Exécuter le code de clic navigateur uniquement".
      • pour l'option "Lors de l'action", sélectionnez "Ne rien envoyer au serveur".
    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" : sous l'éditeur, dans la barre des onglets, cliquez sur "PAGE_Liste_des_produits".
    Affichage des pages popup
  • Nous allons maintenant créer un champ 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 (sous le champ "Notifications") : 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 "Action du lien" :
      • Le type doit correspondre à "Exécuter le code de clic navigateur uniquement".
      • L'option "Lors de l'action" doit correspondre à "Ne rien envoyer au serveur".
        Description d'un champ Lien
    6. Validez la fenêtre de description du champ.
    7. Affichez les événements associés au champ Lien (touche F2).
    8. Dans le code de clic navigateur, saisissez le code suivant :
      POPUP_SansNom1.Affiche()
      La fonction <Popup>.Affiche 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 (Enregistrer un élément ou Ctrl + S).
  • Lancez le test de la page (Tester une page parmi les boutons d'accès rapide) et ouvrez la popup d'envoi d'une suggestion.
    Test de la page popup
  • Fermez le navigateur.

Note

Pourquoi le lien n'apparaît pas dans le navigateur à l'emplacement spécifié ?
Sous l'éditeur de pages, le champ Lien est positionné au-dessus du champ de recherche, mais en exécution il apparaît au dessus de l'option "AJOUTER UN PRODUIT". Cette différence est liée à l'ancrage du champ Lien.
En effet, sous l'éditeur de pages, différentes flèches rouges sont affichées dans l'en-tête de la page. Ces flèches indiquent que les champs sont ancrés. Nous verrons en détail l'ancrage dans la leçon Concepts avancés. Le champ Lien que nous avons créé n'est pas ancré et il suit le mouvement des champs qui l'entourent.
  • Pour ancrer le champ Lien à droite (et éviter son déplacement) :
    1. Sélectionnez le champ Lien.
    2. Dans le menu contextuel (clic droit), sélectionnez l'option "Ancrage".
    3. Dans la fenêtre qui s'affiche, sélectionnez l'option et validez.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 22/05/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale