Share
Nun, da Sie eine Website mit einem Flat-File-System haben, möchten Sie einige Rückmeldungen von Ihren Benutzern erhalten. Das Hinzufügen von Disqus ist einfach, da der gesamte JavaScript-Code der Seite hinzugefügt wurde, aber es ist nicht das, was Sie wollen. Sie möchten, dass sie Sie direkt per E-Mail kontaktieren können, sodass Sie nur darauf antworten können.
Sie könnten ein vollständig JavaScript-System erstellen, um E-Mails direkt vom Computer des Benutzers aus zu senden. Dies lässt Ihre E-Mails jedoch für Spammer geöffnet, die sie aus Ihrem Code abrufen und an andere Spammer verkaufen können. Daher müssen Sie Ihre E-Mail-Adresse auf dem Server ausblenden.
In diesem Lernprogramm wird ein E-Mail-Nachrichtensystem zu Ihrem neuen hinzugefügt PressCMS (d.h.. phpPress, RubyPress, nodePress, und goPress). Ich beginne mit dem Frontend und adressiere dann das Backend für jedes System. Ich gehe davon aus, dass Sie diese Server bereits auf Ihrem System haben.
Da der Front-End-Code für jeden Server gleich ist, müssen Sie diese neuen Dateien in jedes der Serververzeichnisse kopieren. Daher werde ich über die Dateien im Pfad sprechen, auf die vom Serververzeichnis verwiesen wird.
Dieses Formularskript enthält keine formspezifischen Formatvorlagen, sondern enthält alles an einem Ort. Erstellen Sie die Datei fragen.html in dem Standort / Teile Verzeichnis für die Website mit folgendem Inhalt:
Dadurch wird ein Basisformular erstellt, in dem nach einem vollständigen Namen (Vor- und Nachname), einer E-Mail und einer Nachricht gefragt wird. Dieses Formular verwendet reguläre Ausdrücke, um sicherzustellen, dass Name und E-Mail-Adresse gültig sind. Wenn das, was der Benutzer in diese Felder eingibt, nicht mit dem regulären Ausdruck im übereinstimmt Muster Direktive, dann wird das Formular nicht übermittelt. Ein Popup fordert den Benutzer auf, das Feld mit der Nachricht im Feld korrekt auszufüllen Titel Parameter. Jedes Eingabefeld hat die erforderlich auch primitiv. Dies verhindert, dass leere Formulare gesendet werden. Dies ist das absolute Minimum an Datenvalidierung, das Sie im Frontend verwenden sollten.
Das Aktion Richtlinie in der bilden Element teilt dem Webbrowser mit, an welche Adresse die Formulardaten gesendet werden sollen. Das Methode Direktive weist den Browser an, als Post Methode. Die Formulardaten werden in die URL der Post-Anfrage an den Server gestellt. Das ist ein Abfragezeichenfolge. Der Server verarbeitet dann die Informationen in der Abfragezeichenfolge.
In dem Website / Seiten Verzeichnis erstellen, erstellen Sie die Datei contact.md und geben Sie diesen Code ein:
### Kontakt Das ist ein einfaches Kontaktformular. Bitte geben Sie Ihren Namen, den ersten und letzten Namen, die E-Mail-Adresse und die Nachricht ein. Ich werde mich so schnell wie möglich bei Ihnen melden. Vielen Dank. Frage
Nach dem Speichern können Sie die Seiten auf dem Server ausprobieren. Öffnen Sie in Ihrem Browser die Seite http: // localhost: 8081 / contact.
Kontaktformular Seite Das Kontaktiere uns Die Seite sieht wie auf dem obigen Bild aus. Beachten Sie die Hervorhebung des Namensfeldes direkt beim Laden. Das Autofokus Direktive erstellt dieses gewünschte Verhalten. Es ist immer ein gutes Design, wenn das erste Feld, das der Benutzer eingeben muss, automatisch fokussiert wird.
Nach dem Senden der Nachricht wäre eine Bestätigungsnachricht an den Benutzer wünschenswert. In dem Website / Seiten Verzeichnis erstellen, erstellen Sie die Datei messagesent.md und geben Sie diesen Code ein:
### Nachricht wurde gesendet Vielen Dank, dass Sie sich die Zeit genommen haben, mir eine Nachricht zu senden. Ich werde so schnell wie möglich antworten.
Nur eine einfache Nachricht, damit der Benutzer weiß, dass die Nachricht ordnungsgemäß gesendet wurde. Sie können dies beliebig erweitern.
Bestätigungsseite der Nachricht gesendet Um die vom Benutzer angegebene Nachricht zu bereinigen, verwende ich die Blauer Montag Bibliothek. Um diese Bibliothek in Ihr System zu laden, müssen Sie folgende Befehlszeile ausführen:
Gehen Sie auf github.com/microcosm-cc/bluemonday
Dadurch wird die Bibliothek für Ihr Programm verfügbar. Dies ist die einzige nicht standardisierte Bibliothek.
Öffne das goPressServer.go Datei und fügen Sie diese am Anfang der Datei in der einführen () Aussage:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
Zum Versenden von E-Mail-Nachrichten vom Server sind diese Bibliotheken erforderlich. Nach der Zeile hat das goPress.DefaultRoutes ( Funktionsaufruf, fügen Sie den folgenden Code hinzu:
Accentsconagua
// // Spezielle Route für unsere Formularverarbeitung einrichten. // goPress.SetPostRoute ('/ api / message', postMessage)Dadurch wird eine Nachroute von festgelegt / api / nachricht um die Funktion auszuführen POST-Meldung(). Fügen Sie am Ende der Datei diesen Code hinzu:
// // Funktion: postMessage // // Beschreibung: Diese Funktion sendet // die Nachricht von ihnen // der Website an den Eigentümer // der Site. // // Eingaben: // ctx Der Webserver // Kontext. // func postMessage (ctx * web.Context) string // // Liefert die Postinformationen und sendet die // E-Mail. // name: = ctx.Params ["Name"] von: = ctx.Params ["Email"] p: = bluemonday.UGCPolicy () message: = p.Sanitize (ctx.Params ["Message"]) an: = ""subject: =" Nachricht von Benutzer: "+ name +" von CustomCT.com "sendEmail (an, von, Betreff, Nachricht) // // Den Inhalt der messageent-Seite abrufen und // verarbeiten. // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" return goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Funktion: sendEmail // // Beschreibung: Diese Funktion sendet eine // E-Mail-Nachricht. / / // Eingaben: // an Die E-Mail-Adresse // zum Senden der // Nachricht // von Die E-Mail-Adresse // der Person //, die die // Nachricht sendet // Betreff Der Betreff der // Nachricht // Nachricht Die Nachricht der // E-Mail-Adresse // func sendEmail (an Zeichenfolge, aus Zeichenfolge, Betreffzeichenfolge, Nachrichtenzeichenfolge) body: = fmt.Sprintf ("An:% s \ r \ nSubjekt:% s \ r \ n \ r \ n% s ", an, Betreff, Nachricht) auth: = smtp.PlainAuth (" "," "," "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, from, [] string to, [] byte (body)), falls err! = null // // Verarbeiten Sie den Fehler. Angenommen, // ist kein Problem. //
Diese beiden Funktionen bilden den Handler für die Verarbeitung von E-Mails, die vom Browser gesendet werden. Das / api / nachricht Route nennt die POST-Meldung() Funktion. Es ruft die Informationen ab, die von dem vom Benutzer ausgefüllten Formular gesendet wurden, bereinigt die Nachricht mit der BlueMonday-Bibliothek und sendet eine E-Mail an den Eigentümer der Site E-Mail senden() Funktion. Sie müssen Ihre Google Mail-Adresse anstelle der
In dem goPress.go Datei, fügen Sie diese Funktion nach dem hinzu SetGetRoute () Funktion:
// // Funktion: SetPostRoute // // Beschreibung: Diese Funktion ermöglicht einen einfachen Zugriff auf das // // Web-Variablen-Setup in dieser Bibliothek. // // Eingaben: // route Route zum Setup // Handler Funktion zum Ausführen dieser // Route. // func SetPostRoute (Routenzeichenfolge, Handler-Schnittstelle ) web.Post (Route, Handler)
Diese Funktion ist genau wie die SetGetRoute () Funktion. Der einzige Unterschied ist die Verwendung von web.Post () Funktion.
Mit diesen Änderungen kann Ihr goPress-Server jetzt Ihre E-Mails vom Benutzer versenden.
Um E-Mails von Node zu senden, müssen Sie zuerst die Nodemailer-Bibliothek und das Body-Parser-Bibliothek mit der folgenden Befehlszeile:
npm install -save nodemailer npm install -save body-parser
Dann müssen Sie die neuen Bibliotheken laden und das Mailerobjekt konfigurieren. An der Spitze der nodePress.js Fügen Sie nach dem Laden der zuletzt geladenen Bibliothek folgende Zeilen hinzu:
var nodemailer = required ('nodemailer'); // https://nodemailer.com/ var bodyParser = required ('body-parser'); // https://github.com/expressjs/body-parser // // wiederverwendbares Transporterobjekt mithilfe des // Standard-SMTP-Transports erstellen // var transporter = nodemailer.createTransport ('smtps: //:@ smtp.gmail.com '); Dadurch wird die Nodemailer-Bibliothek geladen und die wiederverwendbare Komponente für das Senden von E-Mails eingerichtet. Sie müssen ersetzen
Fügen Sie nach der Zeile, die die nodePress-Variable initialisiert, den folgenden Code hinzu:
// // Konfigurieren Sie die Body-Parser-Bibliothek. // nodePress.use (bodyParser.urlencoded (extended: true)));
Jetzt nach dem letzten nodePress.get () Funktionsaufruf, fügen Sie diesen Code hinzu:
nodePress.post ('/ api / message', Funktion (Anfrage, Antwort) // // E-Mail-Daten einrichten // var mailOptions = from: request.body.Email, an: '', Betreff:' Nachricht von '+ request.body.Name +' auf dem Kontaktformular. ', Text: request.body.Message, html: request.body.Message; // // E-Mail senden // transporter.sendMail (mailOptions, Funktion (Fehler, Info) if (error) return console.log (error); // // Senden Sie den Benutzer an die Nachricht wurde eine OK-Seite gesendet. // response.send ( page ("messagesent"));); ); Dies ist der Handler für die / api / nachricht Adresse. Diese Funktion ruft die Informationen aus dem Formular ab, erstellt die richtige E-Mail-Nachricht und sendet sie an die in angegebene E-Mail-Adresse /Nachricht gesendet Seite. Die Body-Parser-Middleware speichert die URL-Parameter in der request.body variabel und ordnungsgemäß desinfiziert.
Dieser Code funktioniert für die Einrichtung von Google Mail ohne Zwei-Faktor-Authentifizierung. Wenn Sie über eine Zwei-Faktor-Authentifizierung verfügen, können Sie auf die Nodemailer Dokumentation zum Einrichten.
Um E-Mails in Ruby zu senden, müssen Sie das installieren Ruby-Gmail Bibliothek mit der folgenden Befehlszeile:
gem installieren ruby-gmail
Abhängig von Ihrem Ruby-Setup müssen Sie möglicherweise verwenden Sudo vor dem Befehl. Um die Bibliothek zu laden, fügen Sie die folgende Zeile am oberen Rand des Fensters ein rubyPress.rb Datei:
"gmail" erforderlich # https://github.com/dcparker/ruby-gmail
Nach all dem erhalten Definitionen, fügen Sie die folgenden Zeilen hinzu:
post '/ api / message' do # # Liefert die Parameter aus dem Formular. # name = params [: Name] email = params [: Email] message = params [: Message] # # Erstellen und senden Sie die E-Mail. # Gmail.new ('','') do | gmail | gmail.deliver tun ""from email subject" Nachricht von "+ name text_part do body Nachricht end end # # Sendet den Benutzer an die gesendete Nachrichtenseite. # page" messageent "end Mit diesen Ergänzungen kann Ihr RubyPress-Server E-Mail-Formulare verarbeiten. Sobald Sie sich ändern
Der letzte zu ändernde Server ist der phpPress-Server. Um dem Server E-Mail-Funktionen hinzuzufügen, installiere ich die phpmailer library. Dies ist die am häufigsten verwendete Bibliothek in PHP für die Arbeit mit E-Mails. Um die Bibliothek zu installieren, müssen Sie die folgenden Befehlszeilenbefehle im Verzeichnis phpPress ausführen:
composer update composer benötigt phpmailer / phpmailer
Leider aktualisiert das Composer-Update die LightnCandy-Bibliothek. Das ist gut, weil es viel schneller und einfacher zu bedienen ist. Aber es bricht den Servercode. Suchen Sie in der Datei index.php nach ProcessPage () Funktion und ersetzen Sie es durch den folgenden Code:
// // Funktion: ProcessPage // // Beschreibung: Diese Funktion verarbeitet // eine Seite in die Vorlage, // verarbeitet alle Mustache // -Makros und verarbeitet alle // Shortcodes. // // Eingaben: // $ layout Das Layout für // die Seite // $ page Die Seiten // Hauptinhalte // Funktion ProcessPage ($ layout, $ page) globale $ site, $ parts, $ helpers; // // Liefert den Seiteninhalt. // $ parts ['content'] = figurePage ($ page); // // Erster Handgriff. // $ phpStr = LightnCandy :: compile ($ layout, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // Shortcodes bearbeiten. // $ pageShort = processShortcodes ($ page); // // Zweiter Durchgang Lenker. // $ phpStr = LightnCandy :: compile ($ pageShort, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // Liefert die Ergebnisse. // return ($ page);
Beim Vergleich mit dem älteren Code müssen Sie nicht mehr mit einer temporären Datei arbeiten. Es ist alles in Erinnerung und ist daher viel schneller. Nun oben auf der index.php Datei, füge dies nach der Jade-Bibliothek hinzu:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // erfordert 'vendor / phpmailer / phpmailer / PHPMailerAutoload.php';
Dies lädt die phpmailer-Bibliothek. Jetzt nach dem letzten $ app-> get () Funktion, fügen Sie diesen Code hinzu:
// // Diese Route dient zur Bearbeitung der Post-Anfrage aus dem // E-Mail-Formular auf der Website. // $ app-> post ('/ api / message', Funktion (Request $ request, Response $ response) global $ _POST; // // Liefert die Nachvariablen. // $ Name = $ _POST ['Name' ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Erstelle die E-Mail-Nachricht und sende sie. // $ mail = neuer PHPMailer; $ mail-> isSMTP ( ); // Mailer für die Verwendung von SMTP $ mail-> Host = 'smtp.gmail.com' festlegen; // Haupt- und Backup-SMTP-Server angeben $ mail-> SMTPAuth = true; // SMTP-Authentifizierung aktivieren $ mail-> Username = ''; // SMTP-Benutzername $ mail-> Password = ''; // SMTP-Passwort $ mail-> SMTPSecure = 'tls'; // TLS-Verschlüsselung aktivieren, 'ssl' akzeptiert auch $ mail-> Port = 587; // TCP-Port für die Verbindung zu $ mail-> setFrom ($ Email, $ Name); $ mail-> addAddress ('',''); // Einen Empfänger hinzufügen $ mail-> Subject = "Nachricht von $ Name"; $ mail-> Body = $ Message; if (! $ mail-> send ()) Echo 'Nachricht konnte nicht gesendet werden.'; Echo 'Mailer-Fehler:'. $ mail-> ErrorInfo; else $ newResponse = SetBasicHeader ($ response); $ newResponse-> getBody () -> write (page ('messagesent')); return ($ newResponse); ); Dies ist ein Post-Request-Handler für die / api / nachricht Pfad. Es ruft die vom Browser gesendeten Formulardaten ab, erstellt eine E-Mail und sendet die E-Mail. PHP übernimmt automatisch alle URL-Parameter und platziert sie im globalen Array $ _POST.
Sie müssen ersetzen $ mail-> Host adresse auch.
Ich habe Ihnen gezeigt, wie Sie auf einfache Weise ein E-Mail-Formular zu einer pressCMS-Site hinzufügen. Der Download für dieses Lernprogramm enthält alle diese Server mit ihren Änderungen. Sie können es also herunterladen, anstatt zu tippen. Ich habe eine kleine Fehlerbehandlung gemacht. Den Rest überlasse ich Ihnen als Übung.
Die Methode, die ich hier gelehrt habe, besteht darin, Formulardaten mit den Daten in der URL zu veröffentlichen. Viele Websites verwenden heutzutage ein REST-API mit den Daten in einem JSON Zeichenfolge im Körper, um die Aktion auszuführen. Diese Routinen können leicht in diese Methodik übernommen werden, aber dies ist eine Übung für Sie (oder möglicherweise ein zukünftiges Tutorial). Nun, da Sie wissen, wie das geht, fügen Sie Ihrer Site eigene Formulare hinzu. Diese Art des Customizings macht viel Spaß. Die einzige Grenze ist Ihre Vorstellungskraft.
