Share
Maintenant que vous avez un site Web utilisant un système de fichiers à plat, vous souhaitez obtenir un retour d’information de vos utilisateurs. Il est facile d’ajouter Disqus 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 e-mails ouverts aux spammeurs capables de le récupérer à partir de votre code et de le vendre à d'autres spammeurs. Par conséquent, vous devez masquer votre adresse e-mail sur le serveur..
Ce tutoriel concerne l’ajout d’un système de messagerie électronique à votre nouveau PressCMS (c'est à dire. 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.
É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 vais parler des fichiers dans le chemin comme référencé depuis 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éer le fichier questions.html dans le site / pièces répertoire 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 le champ modèle directive, le formulaire ne sera pas soumis. Un popup demande à l'utilisateur de bien renseigner le champ avec le message dans le champ Titre paramètre. Chaque champ de saisie a le Champs obligatoires primitif aussi. Cela empêche les formulaires vierges d'être soumis. C’est la validation minimale des données que vous devriez utiliser sur le serveur frontal..
le action directive dans le forme L'élément indique au navigateur Web à quelle adresse envoyer les données du formulaire. le méthode directive dit au navigateur d'envoyer en tant que poster méthode. Les données du formulaire seront placées dans l'URL de la demande de publication adressée au serveur. C'est un Chaîne de requête. Le serveur traite ensuite les informations dans la chaîne de requête..
dans le site / pages répertoire, créer le fichier contact.md et placez ce code:
### Contactez-nous Ceci est un formulaire de contact simple. Veuillez indiquer votre nom, prénom et nom, votre adresse électronique et votre message. Je reviendrai vers vous dès que possible. Merci. question
Une fois enregistré, vous pouvez essayer les pages du serveur. Dans votre navigateur, ouvrez la page http: // localhost: 8081 / contact..
Formulaire de contact le Contactez nous page ressemblera à l'image ci-dessus. Remarquez la mise en surbrillance du champ Nom directement lors du chargement. le autofocus directive crée ce comportement souhaité. Il est toujours bon d’avoir le premier champ que l’utilisateur doit taper automatiquement en mode ciblé..
Après l'envoi du message, un message de confirmation à l'utilisateur serait utile. dans le site / pages répertoire, créer le fichier messagesent.md et placez ce code:
### Message envoyé Merci beaucoup d'avoir pris le temps de m'envoyer un message. Je répondrai dès que possible.
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 envoyé page de confirmation Pour effacer le message donné par l'utilisateur, j'utilise le Lundi bleu bibliothèque. Pour charger cette bibliothèque sur votre système, vous devez exécuter cette ligne de commande:
allez chercher github.com/microcosm-cc/bluemonday
Cela rendra la bibliothèque disponible pour votre programme. C’est la seule bibliothèque non standard nécessaire.
Ouvrez le goPressServer.go fichier et l'ajouter en haut du fichier à l'intérieur du import () déclaration:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
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:
Accentsconagua
// // Configuration d'un itinéraire spécial pour notre traitement de formulaire. // goPress.SetPostRoute ('/ api / message', postMessage)Cela définit un itinéraire post de / api / message exécuter la fonction postMessage (). A la fin du fichier, ajoutez ce code:
// // Fonction: postMessage // // Description: Cette fonction enverra // le message d'eux // du site Web au propriétaire // du site. // // Entrées: // ctx Le serveur Web // contexte. // func postMessage (ctx * web.Context) string // // Récupère les informations sur le message et envoie le // courrier électronique. // nom: = ctx.Params ["nom"] de: = ctx.Params ["email"] p: = bluemonday.UGCPolicy () message: = p.Sanitize (ctx.Params ["Message"]) à: = ""subject: =" Message de l'utilisateur: "+ nom +" de CustomCT.com "sendEmail (to, from, subject, message) // // Récupère le contenu de la page de messages et // le traite. // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" return goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Fonction: sendEmail // // Description: Cette fonction envoie un // message électronique. / / // Entrées: // à L'adresse électronique // à envoyer le // message // de L'adresse électronique // de la personne // à l'envoi du // message // objet L'objet du // message // message Le message du // email // func sendEmail (à chaîne, à partir de chaîne, chaîne d'objet, chaîne de message) body: = fmt.Sprintf ("To:% s \ r \ nSubject:% s \ r \ n \ r \ n% s ", to, subject, message) auth: = smtp.PlainAuth (" "," "," "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, from, [] chaîne à, [] octet (corps)) si err! = nil // // Traite l'erreur. Actuellement, en supposant qu'il n'y ait pas de problème. //
Ces deux fonctions constituent le gestionnaire de traitement des courriels envoyés à partir du navigateur. le / api / message route appelle le postMessage () une fonction. 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 du bouton sendEmail () une fonction. Vous devrez mettre votre adresse Gmail à la place du
dans le goPress.go fichier, ajoutez cette fonction après la SetGetRoute () une fonction:
// // Fonction: SetPostRoute // // Description: Cette fonction donne un // accès facile à la // variable Web configurée dans // cette bibliothèque. // // Entrées: // route Route to setup // handler Fonction permettant d'exécuter cette // route. // func SetPostRoute (chaîne de la route, interface du gestionnaire ) web.Post (route, gestionnaire)
Cette fonction est exactement comme la SetGetRoute () une fonction. La seule différence est d'utiliser le web.Post () une fonction.
Avec ces modifications, votre serveur goPress peut maintenant envoyer vos courriels de l'utilisateur..
Pour envoyer des courriels à partir de noeud, vous devez d’abord installer le logiciel. bibliothèque nodemailer et le bibliothèque d'analyseur de corps avec la ligne de commande suivante:
npm install -save nodemailer npm install -save analyseur de corps
Ensuite, vous devez charger les nouvelles bibliothèques et configurer l'objet mailer. Au sommet de la nodePress.js fichier, après la dernière bibliothèque chargée, ajoutez ces lignes:
var nodemailer = require ('nodemailer'); // https://nodemailer.com/ var bodyParser = require ('body-parser'); // https://github.com/expressjs/body-parser // // crée un objet transporteur réutilisable à l'aide du // transport SMTP par défaut // var transporteur = nodemailer.createTransport ('smtps: //:@ smtp.gmail.com '); Ceci chargera la bibliothèque nodemailer et configurera le composant réutilisable pour l'envoi d'e-mails. Vous devez remplacer
Après la ligne qui initialise la variable nodePress, ajoutez ce code:
// // Configure la bibliothèque d'analyseur de corps. // nodePress.use (bodyParser.urlencoded (extended: true));
Maintenant, après le dernier nodePress.get () appel de fonction, ajoutez ce code:
nodePress.post ('/ api / message', fonction (demande, réponse) // // configuration des données de messagerie // var mailOptions = from: request.body.Email, to: '', objet:' Message de '+ request.body.Name +' sur le formulaire de contact. ', text: request.body.Message, html: request.body.Message; // // Envoyer l'email. // transporter.sendMail (mailOptions, function (erreur, info) if (erreur) return console.log (erreur); // // a envoyé à l'utilisateur le message a été envoyé page correcte. // response.send ( page ("messagesent"));); ); Ceci est le gestionnaire pour le / api / message adresse. 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 /message envoyé page. Le middleware d’analyseur de corps a les paramètres d’URL enregistrés dans request.body variable et correctement assainie.
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 Nodemailer documentation pour le mettre en place.
Pour envoyer des emails en Ruby, vous devez installer le logiciel ruby-gmail bibliothèque avec la ligne de commande suivante:
bijou installer ruby-gmail
Selon votre configuration Ruby, vous devrez peut-être utiliser sudo devant la commande. Maintenant, pour charger la bibliothèque, ajoutez la ligne suivante en haut de la rubyPress.rb fichier:
nécessite 'gmail' # https://github.com/dcparker/ruby-gmail
Après tout obtenir définitions, ajoutez les lignes suivantes:
post '/ api / message' do # # Récupère les paramètres du formulaire. # name = params [: Nom] email = params [: Email] message = params [: Message] # # Créez et envoyez l'email. # Gmail.new ('','') faire | gmail | gmail.deliver do to ""de l'objet de l'e-mail" Message de "+ nom text_part corps corps fin du message fin # # Envoyez l'utilisateur à la page du message envoyé. # page 'messagesent' fin Grâce à ces ajouts, votre serveur rubyPress peut traiter des formulaires de courrier électronique. Une fois que vous changez
Le dernier serveur à modifier est le serveur phpPress. Pour ajouter des fonctionnalités de messagerie au serveur, je vais installer le 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:
composer mettre à jour composer nécessite phpmailer / phpmailer
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 le ProcessPage () fonction et le remplacer par le code suivant:
// // Fonction: ProcessPage // // Description: Cette fonction traitera // une page dans le modèle, // traitera toutes les macros Moustache //, et traitera tous les // codes courts. // // Entrées: // $ layout La disposition pour // la page // $ page Les pages principales // contenu // fonction ProcessPage ($ layout, $ page) global $ site, $ parts, $ helpers; // // Récupère le contenu de la page. // $ parts ['content'] = figurePage ($ page); // // Première passe sur le guidon. // $ phpStr = LightnCandy :: compile ($ layout, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // Traite les codes courts. // $ pageShort = processShortcodes ($ page); // // Deuxième passage du guidon. // $ phpStr = LightnCandy :: compile ($ pageShort, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // Renvoie les résultats. // return ($ page);
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, au sommet de la index.php fichier, ajoutez ceci après la bibliothèque Jade:
// // Mailer PHP: https://github.com/PHPMailer/PHPMailer // nécessite 'vendor / phpmailer / phpmailer / PHPMailerAutoload.php';
Cela charge la librairie phpmailer. Maintenant, après le dernier $ app-> get () fonction, ajoutez ce code:
// // Cet itinéraire permet de traiter la demande de publication à partir du formulaire // de courrier électronique sur le site Web. // $ app-> post ('/ api / message', function (Demande $ demande, Réponse $ réponse) global $ _POST; // // Récupère les variables de publication. // $ Nom = $ _POST ['Nom' ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Créez le message électronique et envoyez-le. // $ mail = new PHPMailer; $ mail-> isSMTP ( ); // Définissez le logiciel de messagerie pour qu'il utilise SMTP $ mail-> Host = 'smtp.gmail.com'; // Spécifiez les serveurs SMTP principaux et de sauvegarde $ mail-> SMTPAuth = true; // Activez l'authentification SMTP $ mail-> Nom d'utilisateur = ''; // nom d'utilisateur SMTP $ mail-> Password = ''; // mot de passe SMTP $ mail-> SMTPSecure = 'tls'; // Activer le cryptage TLS, 'ssl' également accepté $ mail-> Port = 587; // port TCP pour se connecter à $ mail-> setFrom ($ Email, $ Name); $ mail-> addAddress ('',''); // Ajouter un destinataire $ mail-> Subject = "Message de $ Name"; $ mail-> Body = $ Message; if (! $ mail-> send ()) echo 'Le message n'a pas pu être envoyé.'; echo 'Erreur Mailer:'. $ mail-> ErrorInfo; else $ newResponse = SetBasicHeader ($ response); $ newResponse-> getBody () -> write (page ('messagesent')); return ($ newResponse); ); Ceci est un gestionnaire de requêtes post pour le / api / message chemin. Il récupère les données de formulaire envoyées à partir du 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 $ mail-> Host adresse aussi bien.
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 vous laisse le reste comme 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 nombreux sites utilisent aujourd'hui un API REST avec les données dans un JSON chaîne dans le corps pour effectuer l'action. Ces routines s’adaptent facilement à 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.
