Ihre E-Mail wurde gesendet. Hurra!

Fehler beim Senden des Formulars
 Name 
 Email 
 Botschaft  <? php if (isset ($ _ POST ['Kommentare'])) {if (Funktion_exists ('stripslashes')) {echo stripeslashes ($ _ POST ['comments']); } else {echo $ _POST ['Kommentare']; }}?> 
 Schick uns Post! 

Möglicherweise haben Sie bemerkt, dass sich direkt nach dem Startformular ein weiterer bedingter Block befindet . Dies prüft auf eine Variable mit dem Namen $hasError und zeigt bei der Bestätigung eine Fehlermeldung an. Diese Fallback-Methode wird nur verwendet, wenn JavaScript im Browser deaktiviert ist und daher keine dynamischen Fehler generieren kann.

Den ganzen Weg hinunter können wir einzelne PHP-Variablen finden, die überprüft werden. Die Statements regeln, ob das Formular bereits mit nur unvollständigen Dateneingaben eingereicht wurde. Dies ist ein weiteres Fallback-System, das den Inhalt bereits ausgefüllter Felder anzeigt - ein schöner Trick für die richtige Benutzererfahrung!

Direkt nach unserem Formularabschluss sind die wenigen jQuery-Funktionen, die wir geschrieben haben. Wir werden zuerst über diese sprechen, da sie die Standardimplementierung bei Pageload sind. Wenn der Browser jedoch kein JavaScript akzeptiert, können wir uns standardmäßig auf unseren PHP-Code verlassen.

Öffnen von jQuery

Der einfachste Weg, um zu diesem Thema zu sprechen, wäre, direkt hineinzutauchen. Ich werde einzelne Blöcke Zeile für Zeile aufschlüsseln, damit Sie sehen können, wonach das Skript eigentlich sucht.

Wenn Sie jedoch verloren gehen, überprüfen Sie einfach die Projektcode-Dateien . Alle vollständigen Blöcke sind auf der jQuery-Website bereits beschrieben und gut dokumentiert. Um zu beginnen, öffnen wir unseren Code ähnlich wie andere:

Wenn Sie mit Rückrufen vertraut sind, stellen Sie möglicherweise fest, dass die Funktion post() über einen integrierten Parametersatz verfügt. Callbacks sind kleinere Funktionen, die auf die Antwort von Daten von einer anderen Funktion aufgerufen werden .

Wenn unsere jQuery.post() Funktion beispielsweise eine E-Mail erfolgreich erstellt, wird sie ihre eigene interne Funktion aufrufen, um die gleitende Animation anzuzeigen. All dieser Code könnte in einen eigenen Block geschrieben und an anderer Stelle verschoben werden. Für dieses Tutorial ist es jedoch viel einfacher, den Callback als Inline-Funktion zu schreiben.

Breaking vorbei an unserem PHP

Die letzte Hürde ist die Logik unseres PHP-Prozessors. Dies ist das Backend-System, das tatsächlich eine Mail-Funktion aufruft und die Nachricht versendet . Der gesamte in den folgenden Beispielen verwendete Code befindet sich direkt vor jeder HTML-Ausgabe oben in unserer .php-Hauptdatei .

Es gibt auch ein paar interne Stile, die die Seite auffrischen. Es gibt hier nichts speziell Neues, also werden wir nicht auf Details eingehen. Das Dokument styles.css ist jedoch im Projektcode enthalten und enthält rudimentäre CSS3-Techniken.

Zu Beginn öffnen wir unsere PHP-Klausel und prüfen, ob das Formular überhaupt übergeben wurde . Die POST- Variable " submitted " war eigentlich ein verstecktes Eingabefeld am Ende des Formulars. Es ist eine nützliche Methode, um zu überprüfen, ob der Benutzer bereits etwas eingereicht hat, sodass keine Serverressourcen verschwendet werden.
Danach haben wir 3 separate if / else- Statement-Prüfungen, um zu sehen, ob jedes Eingabefeld ausgefüllt wurde . Ich werde hier nicht jede Logik einbeziehen, da sie alle sehr repetitiv sind. Um Ihnen jedoch ein kurzes Beispiel zu geben, habe ich die folgende E-Mail-Verifizierungsklausel eingefügt:
 // brauche eine gültige E-Mail-Adresse if (trim ($ _ POST ['email']) === '') {$ emailError = 'Ich habe deine E-Mail-Adresse vergessen.'; $ hasError = wahr; } sonst if (! preg_match ("/ ^ [[: alnum:]]] [a-z0-9 _.-] * @ [a-z0-9 .-] + \. [az] {2, 4} $ / i ", trim ($ _ POST ['email']))) {$ emailError = 'Sie haben eine ungültige E-Mail-Adresse eingegeben.'; $ hasError = wahr; } else {$ email = trimmen ($ _ POST ['email']); } 
PHP schneidet alle Leerzeichen aus dem Wert und überprüft, ob etwas übrig ist. Wenn ja, haben wir einen detaillierten Regulären Ausdruck (Regex), um zu sehen, ob die Eingabezeichenfolge unseres Benutzers mit einem E-Mail-Muster übereinstimmt.
Sie müssen sicherlich nicht verstehen, wie preg_match() dieses Skript erstellt. Es ist eine nützliche Funktion, Regeln und Anforderungen für eine erfolgreiche Art von Daten zu bestimmen, aber befähigt erweiterte Programmierkenntnisse, um wirklich zu verstehen. In diesem Szenario stellen wir sicher, dass der Benutzer nur einige wenige Zeichen eingibt, ein @ -Symbol gefolgt von 2 bis 4 Zeichen,  die eine Top-Level-Domain darstellen .
Nachdem all unsere Logik weitergegeben wurde und wir keine Fehler mehr melden, ist es Zeit, unsere Nachricht zu senden! Dieses Code-Bit setzt individuelle Variablen, um unsere E-Mail-Nachricht anzupassen und einige Mail-Header für den Prozess einzurichten.
 // Auf keinen Fehler Fehler lassen Sie uns jetzt eine E-Mail! if (! isset ($ hasError)) {$ emailTo = '[email protected]'; $ subject = 'Übermittelte Nachricht von'. $ name; $ sendCopy = trimmen ($ _ POST ['sendCopy']); $ body = "Name: $ name \ n \ nEmail: $ email \ n \ nKommentare: $ comments"; $ headers = 'Von:'. ' <'. $ emailTo.'> '. "\ r \ n". 'Antwort an: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // Setze unseren booleschen Abschlusswert auf TRUE $ emailSent = true; } 
Wenn Sie sich fragen, wie der Code Ihre E-Mail-Adresse herausfinden wird, müssen Sie diesen ausfüllen. Die erste Variable in unserem Set heißt $emailTo und sollte die E-Mail-Adresse enthalten, die Sie erhalten die Nachricht.
Innerhalb unserer $body Variablen nutzen wir den \n Begrenzer, um neue Zeilen in die Nachricht einzufügen. Dadurch werden kleine Placements für den Namen des Absenders und die E-Mail-Adresse hinzugefügt, gefolgt von einer Unterbrechung für den Nachrichteninhalt . Natürlich könnte man Zeit damit verbringen, das Display hübsch zu machen, aber diese Struktur funktioniert gut.
Fazit 
Dies schließt unser Tutorial für ein erweitertes Kontaktformular. Wenn Sie Ihre Elemente in Relation zu meinen stylen möchten,  können Sie sich mein Beispiel styles.css im Projektcode ansehen . Die Seite ist jedoch gut genug strukturiert, sodass Sie Ihr eigenes Look & Feel sehr einfach gestalten können.
Fühlen Sie sich frei, den Quellcode herunterzuladen und zu untersuchen, was ich ein bisschen näher getan habe. Es ist gut, einem Tutorial zu folgen, aber der direkte Zugriff auf die Projektquelle kann von unschätzbarem Wert sein. Ich habe auch ein kurzes Stylesheet hinzugefügt, um Anpassungen zu einem Kinderspiel zu machen, danke für deine Ansicht!







        

          
          

		  
Progressive Web Apps - Die Zukunft des modernen Webs?
            
Heutzutage sind Progressive Web Apps (PWA) das Gesprächsthema der Stadt, hauptsächlich wegen ihrer erstaunlichen Benutzerfreundlichkeit und einzigartigen Benutzererfahrung. Mit den kombinierten Funktionen von Websites und nativen Apps werden PWAs zu einer Norm für Webanwendungen mit mehreren Geräten , mit denen Entwickler schnell dynamische Anwendungen erstellen können, ohne hybride Frameworks zu verwenden.Ich 
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Die Internetnutzung von Mobilgeräten und Tablets (weltweit) schlägt den Desktop zum ersten Mal
            
Es ist offiziell. Wir benutzen das Internet jetzt mehr auf unseren Handys und Tablets als auf unserem Desktop . Das unabhängige Webanalyseunternehmen StatCounter hat seine Ergebnisse zur Internetnutzung weltweit veröffentlicht - im Oktober 2016 entfielen 51, 3% der weltweiten Internetnutzung auf Mobil- und Tablet-Geräte, 48, 5% auf Desktop-PCs. H
			
(Tech- und Design-Tipps)