Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Servers
Code

Traitement des formulaires avec phpPress, goPress, rubyPress et nodePress

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by honeymmmm (you can also view the original English article)

Maintenant que vous avez un site Web utilisant un système de fichiers à plat, vous souhaitez obtenir un retour d’information de vos utilisateurs. Ajouter Disqus est facile car tout le code JavaScript est ajouté à la page, mais ce n’est pas ce que vous voulez. Vous voulez qu'ils puissent vous envoyer un courriel directement pour pouvoir y répondre simplement.

Vous pouvez créer un système entièrement en JavaScript pour envoyer des e-mails directement à partir de l'ordinateur de l'utilisateur, mais cela laisse les emails ouverts aux spammeurs qui peuvent les récupérer à partir de votre code et les vendre à d'autres spammeurs. Par conséquent, vous devez masquer votre adresse électronique sur le serveur.

Ce tutoriel concerne l’ajout d’un système de messagerie électronique à votre nouveau PressCMS (phpPress, rubyPress, nodePress et goPress). Je commence par le serveur principal, puis par le serveur principal pour chaque système. Je suppose que vous avez déjà ces serveurs sur votre système.

Comment créer le formulaire dans le navigateur

Étant donné que le code frontal sera le même pour chaque serveur, vous devrez copier ces nouveaux fichiers dans chacun des répertoires du serveur. Par conséquent, je parlerai des fichiers dans le chemin, comme indiqué dans le répertoire du serveur.

Au lieu d’ajouter un style spécifique au formulaire, ce script de formulaire regroupe tout au même endroit. Créez le fichier questions.html dans le répertoire site/parts du site Web avec le contenu suivant:

Cela crée un formulaire de base demandant un nom complet (prénom et nom), un courrier électronique et un message. Ce formulaire utilise des expressions régulières pour garantir la validité du nom et de l'adresse électronique. Si ce que l'utilisateur saisit dans ces champs ne correspond pas à l'expression régulière dans la directive pattern, le formulaire ne sera pas soumis. Une fenêtre contextuelle demandera à l'utilisateur de bien renseigner le champ avec le message dans le paramètre title. Chaque champ d'entrée contient également la primitive required . Cela empêche les formulaires vierges d'être soumis. Il s'agit de la validation de données minimale que vous devriez utiliser sur le serveur frontal.

La directive action de l'élément form indique au navigateur Web à quelle adresse envoyer les données de formulaire. La directive method demande au navigateur d’envoyer une méthode post . Les données du formulaire seront placées dans l'URL de la demande de publication adressée au serveur. Ceci est un Query String. Le serveur traite ensuite les informations dans la chaîne de requête.

Dans le répertoire site/pages, créez le fichier contact.md et placez ce code:

Une fois enregistré, vous pouvez essayer les pages du serveur. Dans votre navigateur, ouvrez la page http://localhost:8081/contact.

Contact Form Page
Formulaire de contact

La page Contact Us ressemblera à l'image ci-dessus. Remarquez la mise en surbrillance du champ Nom directement lors du chargement. La directive autofocus crée ce comportement souhaité. Il est toujours bon d’avoir le premier champ que l’utilisateur doit saisir automatiquement.

Après l'envoi du message, un message de confirmation à l'utilisateur serait utile. Dans le répertoire site/pages, créez le fichier messagesent.md et placez ce code:

Juste un simple message pour que l'utilisateur sache que le message a été correctement envoyé. Vous pouvez développer ce que vous voulez.

Message Sent Confirmation Page
Message envoyé page de confirmation

Traitement du formulaire avec goPress

Pour effacer le message donné par l'utilisateur, j'utilise la bibliothèque Blue Monday. Pour charger cette bibliothèque sur votre système, vous devez exécuter cette ligne de commande:

Cela rendra la bibliothèque disponible pour votre programme. C'est la seule bibliothèque non standard nécessaire.

Ouvrez le fichier goPressServer.go et ajoutez-le en haut du fichier dans l'instruction import():

Envoyer des messages par courrier électronique à partir du serveur nécessite ces bibliothèques. Après la ligne qui a goPress.DefaultRoutes (appel de fonction, ajoutez le code suivant:

Cela définit une route de publication de /api/message pour exécuter la fonction postMessage(). A la fin du fichier, ajoutez ce code:

Ces deux fonctions constituent le gestionnaire de traitement des courriels envoyés à partir du navigateur. La route/api/message appelle la fonction postMessage(). Il récupère les informations envoyées à partir du formulaire rempli par l'utilisateur, nettoie le message avec la bibliothèque BlueMonday et envoie un courrier électronique au propriétaire du site à l'aide de la fonction sendEmail() Vous devrez mettre votre adresse Gmail à la place du titulaire<your email address>  et le mot de passe dans le titulaire<password> .

Dans le fichier goPress.go, ajoutez cette fonction après la fonction SetGetRoute():

Cette fonction est exactement comme la fonction SetGetRoute(). La seule différence consiste à utiliser la fonction web.Post().

Avec ces modifications, votre serveur goPress peut maintenant envoyer vos courriels de l'utilisateur.

Traitement du formulaire avec nodePress

Pour envoyer des emails à partir de node, vous devez d'abord installer la bibliothèque nodemailer et la bibliothèque body-parser avec la ligne de commande suivante:

Ensuite, vous devez charger les nouvelles bibliothèques et configurer l'objet mailer. En haut du fichier nodePress.js, après la dernière bibliothèque chargée, ajoutez les lignes suivantes:

Ceci chargera la bibliothèque nodemailer et configurera le composant réutilisable pour l'envoi d'e-mails. Vous devez remplacer <your email name> par le nom de votre adresse de messagerie (c'est-à-dire avant le symbole @), <your email domain> est le domaine de votre adresse de messagerie (par exemple, gmail.com pour gmail normal ou votre nom de domaine si vous le souhaitez. gmail configuré sur votre nom de domaine) et <your password>  avec le mot de passe de votre compte de messagerie.

Après la ligne qui initialise la variable nodePress, ajoutez ce code:

Maintenant, après le dernier appel de la fonction nodePress.get(), ajoutez ce code:

C'est le gestionnaire pour l'adresse /api/message. Cette fonction récupère les informations envoyées à partir du formulaire, crée le message électronique approprié et l'envoie à l'adresse électronique indiquée dans <your email address> . Après avoir envoyé le courrier électronique, il enverra l’utilisateur à la page /messagesent. Le middleware de l'analyseur de corps a les paramètres d'URL enregistrés dans la variable request.body et correctement nettoyés.

Ce code fonctionne pour la configuration de Gmail sans authentification à deux facteurs. Si vous avez une authentification à deux facteurs, vous pouvez vous référer à la documentation de Nodemailer pour la configurer.

Traitement du formulaire avec rubyPress

Pour envoyer des emails en Ruby, vous devez installer la bibliothèque ruby-gmail à l'aide de la ligne de commande suivante:

En fonction de votre configuration Ruby, vous devrez peut-être utiliser sudo devant la commande. Maintenant, pour charger la bibliothèque, ajoutez la ligne suivante en haut du fichier rubyPress.rb:

Après toutes les définitions get, ajoutez les lignes suivantes:

Grâce à ces ajouts, votre serveur rubyPress peut traiter des formulaires de courrier électronique. Une fois que vous avez modifié <your email address>  en votre adresse électronique et <your password>  en un mot de passe pour votre serveur de messagerie, le script est terminé.

Traitement du formulaire avec phpPress

Le dernier serveur à modifier est le serveur phpPress. Pour ajouter des fonctionnalités de messagerie au serveur, je vais installer la bibliothèque phpmailer. C'est la bibliothèque PHP la plus utilisée pour travailler avec des emails. Pour installer la bibliothèque, vous devez exécuter ces commandes de ligne de commande dans le répertoire phpPress:

Malheureusement, la mise à jour du compositeur mettra à jour la bibliothèque LightnCandy. C'est bien parce que c'est beaucoup plus rapide et facile à utiliser. Mais cela rompt le code du serveur. Dans le fichier index.php, localisez la fonction ProcessPage() et remplacez-la par le code suivant:

En le comparant avec l'ancien code, vous n'avez plus besoin de travailler avec un fichier temporaire. Tout est fait en mémoire et est donc beaucoup plus rapide. Maintenant, en haut du fichier index.php, ajoutez ceci après la bibliothèque Jade:

Cela charge la librairie phpmailer. Maintenant, après la dernière fonction $app->get(), ajoutez ce code:

Ceci est un gestionnaire de demande de publication pour le chemin /api/message. Il récupère les données de formulaire envoyées par le navigateur, crée un courrier électronique avec celui-ci et l'envoie. PHP prend automatiquement tous les paramètres d'URL et les place dans le tableau global $_POST.

Vous devrez remplacer < your email address> , <your password> et <your name>  par les valeurs appropriées pour votre adresse électronique. Si vous utilisez autre chose qu'un serveur SMTP Gmail, vous devrez également modifier l'adresse $mail->Host.

Conclusion

Je vous ai montré comment ajouter facilement un formulaire de courrier électronique à un site pressCMS. Le téléchargement de ce didacticiel inclut tous ces serveurs avec leurs modifications. Vous pouvez donc le télécharger au lieu de le taper. J'ai un peu manipulé les erreurs. Je vais laisser le reste à vous comme un exercice.

La méthode que j'ai enseignée ici consiste à poster des données de formulaire avec les données de l'URL. De nos jours, de nombreux sites utilisent une API REST avec les données d'une chaîne JSON dans le corps pour effectuer l'action. Ces routines sont facilement adaptées à cette méthodologie, mais c’est un exercice pour vous (ou peut-être un futur tutoriel). Maintenant que vous savez comment procéder, ajoutez vos propres formulaires à votre site. Ce type de personnalisation est très amusant. La seule limite est votre imagination.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.