Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Servers
Code

Formulare bearbeiten Mit phpPress, goPress, rubyPress und nodePress

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Nun, da Sie eine Website mit einem flachen Dateisystem haben, möchten Sie gerne Feedback von Ihren Benutzern erhalten. Das Hinzufügen von Disqus ist einfach, da der gesamte JavaScript-Code der Seite hinzugefügt wird, aber nicht das, was Sie möchten. Sie möchten, dass sie Ihnen direkt eine E-Mail senden können, damit Sie nur darauf antworten können.

Sie können ein gesamtes JavaScript-System erstellen, um direkt vom Computer des Benutzers eine E-Mail zu senden. Dadurch bleibt Ihre E-Mail 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 verstecken.

Dieses Tutorial beschreibt das Hinzufügen eines E-Mail-Nachrichtensystems zu Ihrem neuen PressCMS (also 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.

So erstellen Sie das Formular im Browser

Da der Front-End-Code für jeden Server gleich ist, müssen Sie diese neuen Dateien in jedes der Server-Verzeichnisse kopieren. Daher werde ich über die Dateien im Pfad sprechen, die vom Serververzeichnis aus referenziert werden.

Anstatt dem Thema formularspezifisches Styling hinzuzufügen, hat dieses Formularskript alles an einem Ort. Erstellen Sie die Datei questions.html im Verzeichnis site/parts für die Website mit folgendem Inhalt:

Dies erstellt ein Basisformular, das nach einem vollständigen Namen (Vor- und Nachname), E-Mail und einer Nachricht fragt. Dieses Formular verwendet reguläre Ausdrücke, um sicherzustellen, dass der Name und die E-Mail-Adresse gültig sind. Wenn die Eingaben des Benutzers in diese Felder nicht mit der regular expression in der pattern-Direktive übereinstimmen, wird das Formular nicht gesendet. Ein Popup fordert den Benutzer auf, das Feld mit der Nachricht im title-Parameter richtig auszufüllen. Jedes Eingabefeld hat ebenfalls das Grundelement required . Dies verhindert, dass leere Formulare gesendet werden. Dies ist die Mindestdatenvalidierung, die Sie für das Front-End verwenden sollten.

Die Anweisung action im Element form teilt dem Webbrowser mit, an welche Adresse die Formulardaten gesendet werden sollen. Die method directive weist den Browser an, als post-Methode zu senden. Die Formulardaten werden in die URL der Postanforderung an den Server eingefügt. Dies ist eine Abfragezeichenfolge. Der Server verarbeitet dann die Informationen in der Abfragezeichenfolge.

Erstellen Sie im Verzeichnis site/pages die Datei contact.md und fügen Sie diesen Code ein:

Nach dem Speichern können Sie die Seiten auf dem Server ausprobieren. Öffnen Sie in Ihrem Browser die Seite http: // localhost: 8081 / contact.

Contact Form Page
Kontaktformular Seite

Die Contact Us-Seite sieht wie das obige Bild aus. Beachten Sie die Hervorhebung des Namensfeldes direkt beim Laden. Die autofocus -Direktive erstellt dieses gewünschte Verhalten. Es ist immer gut, das erste Feld zu verwenden, in das der Benutzer automatisch automatisch eintippen muss.

Nach dem Senden der Nachricht wäre eine Bestätigungsnachricht an den Benutzer nett. Erstellen Sie im Verzeichnis site/pages die Datei messagesentent.md und fügen Sie diesen Code ein:

Nur eine einfache Nachricht, damit der Benutzer weiß, dass die Nachricht ordnungsgemäß gesendet wurde. Sie können dies beliebig erweitern.

Message Sent Confirmation Page
Bestätigungsseite für gesendete Nachrichten

Bearbeiten des Formulars mit goPress

Um die Nachricht des Benutzers zu bereinigen, verwende ich die Blue Monday-Bibliothek. Um diese Bibliothek auf Ihrem System zu laden, müssen Sie diese Befehlszeile ausführen:

Dadurch wird die Bibliothek für Ihr Programm verfügbar gemacht. Das ist die einzige Nicht-Standard-Bibliothek, die benötigt wird.

Öffnen Sie die Datei goPressServer.go und fügen Sie sie in der import() -Anweisung an den Anfang der Datei hinzu:

Das Versenden von Nachrichten vom Server erfordert diese Bibliotheken. Fügen Sie nach der Zeile mit goPress.DefaultRoutes (Funktionsaufruf) den folgenden Code hinzu:

Dies legt eine Post-Route von /api/message fest, um die Funktion postMessage() auszuführen. Fügen Sie am Ende der Datei diesen Code hinzu:

Diese beiden Funktionen bilden den Handler für die Verarbeitung von E-Mails, die vom Browser gesendet werden. Die Route /api/message route ruft die Funktion postMessage() auf. Er 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 mit der Funktion sendEmail() an den Eigentümer der Site. Sie müssen Ihre Google Mail-Adresse anstelle des <your email address>-Inhabers und das Passwort im <password>  -Halter angeben.

Fügen Sie diese Funktion in der Datei goPress.go nach der Funktion SetGetRoute() hinzu:

Diese Funktion ist genau wie die Funktion SetGetRoute(). Der einzige Unterschied besteht in der Verwendung der web.Post() -Funktion.

Mit diesen Änderungen kann Ihr goPress-Server Ihre E-Mails jetzt vom Benutzer senden.

Bearbeiten des Formulars mit nodePress

Um E-Mails von einem Knoten zu senden, müssen Sie zunächst die Bibliothek nodemailer und die Bibliothek body-parser mit der folgenden Befehlszeile installieren:

Dann müssen Sie die neuen Bibliotheken laden und das Mailer-Objekt konfigurieren. Fügen Sie am Anfang der Datei nodePress.js nach dem Laden der letzten Bibliothek folgende Zeilen hinzu:

Dadurch wird die nodemailer-Bibliothek geladen und die wiederverwendbare Komponente zum Senden von E-Mails eingerichtet. Sie müssen <your email name> durch den Namen Ihrer E-Mail-Adresse ersetzen (dh vor dem @ -Symbol), <your email domain> ist die Domain für Ihre E-Mail-Adresse (dh gmail.com für normale Google Mail oder Ihr Domain-Name, wenn Sie Google Mail für Ihren Domain-Namen eingerichtet haben ), und <your password> mit dem Passwort für Ihr E-Mail-Konto.

Fügen Sie nach der Zeile, die die Variable nodePress initialisiert, diesen Code hinzu:

Fügen Sie nach dem letzten Funktionsaufruf nodePress.get() diesen Code hinzu:

Dies ist der Handler für die Adresse /api/message. Diese Funktion ruft die Informationen ab, die aus dem Formular gesendet werden, erstellt die richtige E-Mail-Nachricht und sendet sie an die E-Mail-Adresse, die in <your email address> angegeben ist. Nach dem Senden der E-Mail wird der Benutzer zur Seite /messagesent gesendet. Die Body-Parser-Middleware hat die URL-Parameter in der request.body-Variable gespeichert und ordnungsgemäß bereinigt.

Dieser Code funktioniert für die Google Mail-Einrichtung ohne Zwei-Faktor-Authentifizierung. Wenn Sie über eine Zwei-Faktor-Authentifizierung verfügen, können Sie in der Nodemailer-Dokumentation darauf zugreifen.

Bearbeitung des Formulars mit RubyPress

Um E-Mails in Ruby zu senden, müssen Sie die ruby-gmail-Bibliothek mit der folgenden Befehlszeile installieren:

Abhängig von Ihrer Ruby-Konfiguration müssen Sie möglicherweise sudo vor dem Befehl verwenden. Um die Bibliothek zu laden, fügen Sie die folgende Zeile am Anfang der Datei rubyPress.rb hinzu:

Fügen Sie nach allen get-Definitionen die folgenden Zeilen hinzu:

Mit diesen Ergänzungen kann Ihr rubyPress-Server E-Mail-Formulare bearbeiten. Sobald Sie <your email address> an Ihre E-Mail-Adresse und <your password> an das Passwort für Ihren E-Mail-Server geändert haben, ist das Skript beendet.

Bearbeiten des Formulars mit phpPress

Der letzte zu ändernde Server ist der phpPress Server. Um dem Server E-Mail-Funktionen hinzuzufügen, werde ich die phpmailer-Bibliothek installieren. 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 diese Befehlszeilenbefehle im phpPress-Verzeichnis ausführen:

Leider aktualisiert das Composer-Update die LightnCandy-Bibliothek. Das ist gut, weil es viel schneller und einfacher zu benutzen ist. Aber es bricht den Servercode. Suchen Sie in der index.php-Datei die ProcessPage() - Funktion und ersetzen Sie sie durch den folgenden Code:

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. Fügen Sie nun oben in der index.php-Datei Folgendes nach der Jade-Bibliothek hinzu:

Dies lädt die phpmailer-Bibliothek. Fügen Sie nach der letzten $app->get() -Funktion folgenden Code hinzu:

Dies ist ein Post-Request-Handler für den Pfad /api /message. Er ruft die vom Browser gesendeten Formulardaten ab, erstellt eine E-Mail mit dieser und sendet die E-Mail. PHP nimmt automatisch alle URL-Parameter und platziert sie im globalen Array $_POST.

Sie müssen <your email address>, <your password> und <your name> durch die entsprechenden Werte für Ihre E-Mail ersetzen. Wenn Sie etwas anderes als einen Gmail-SMTP-Server verwenden, müssen Sie auch die $mail->Host-Adresse ändern.

Fazit

Ich habe Ihnen gezeigt, wie Sie einfach ein E-Mail-Formular zu einer PressCMS-Site hinzufügen können. Der Download für dieses Tutorial enthält alle diese Server mit ihren Änderungen. Sie können es daher herunterladen, anstatt zu tippen. Ich habe eine kleine Fehlerbehandlung gemacht. Ich überlasse Ihnen den Rest 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 eine REST-API mit den Daten in einer JSON-Zeichenfolge im Textkörper, um die Aktion auszuführen. Diese Routinen werden leicht an diese Methode angepasst, aber das ist eine Übung für Sie (oder vielleicht ein zukünftiges Tutorial). Nun, da Sie wissen, wie Sie es auf diese Weise tun können, fügen Sie Ihrer Website eigene Formulare hinzu. Diese Art der Anpassung macht viel Spaß. Die einzige Grenze ist deine Vorstellungskraft.

Advertisement
Advertisement
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.