Schneller Tipp Erstellen Sie ein Kontaktformular mit SMS- und E-Mail-Benachrichtigungen

In diesem Schnelltipp zeige ich Ihnen, wie Sie ein Kontaktformular mit PHP und ActionScript 3 erstellen. Wir erfahren, wie Sie Variablen von Flash an PHP übergeben und den Eigentümer durch Senden einer E-Mail oder einer SMS-Textnachricht benachrichtigen.

Schritt 1: Einrichten des Dokuments

Als erstes müssen Sie die Quelldateien für dieses Tutorial herunterladen. Da es sich bei diesem Tutorial um einen Schnelltipp handelt, überspringe ich die Schritte des Layouts. Wenn Sie die Dateien heruntergeladen haben, öffnen Sie die Datei 'contactForm.fla'.

Das SWF-Layout sieht folgendermaßen aus:

Schritt 2: Die Dokumentenklasse

Erstellen Sie eine neue "ActionScript" -Datei und speichern Sie sie im selben Ordner wie "contactForm.fla". Geben Sie der Datei den Namen "contatForm.as". Verknüpfen Sie als Nächstes die Flash-Datei und die ActionScript-Datei im Eigenschaftenfenster. Weitere Informationen zum Einrichten der Document-Klasse finden Sie in dieser Kurzanleitung.

Schritt 3: Die Importe

Hier sind die Import-Anweisungen, die wir für diese Datei verwenden werden. Außerdem erstellen wir zwei globale Variablen. Eine ist die Verwendung für einen Dateianhang, und die andere besteht darin, nachzuverfolgen, ob wir diese Datei verwenden werden oder nicht.

 Paket import fl.controls.ProgressBarMode; import fl.controls.RadioButton; import fl.controls.RadioButtonGroup; import fl.controls.TextInput; import fl.core.UIComponent; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.FocusEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.external.ExternalInterface; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.TextField; public class contactForm erweitert Sprite private var-Datei: FileReference; privater var-Anhang: Boolean; public function contactForm () init (); 

Schritt 4: Start zum Code

Die erste Funktion, die wir nennen, ist drin(). Innerhalb der Funktion richten wir die Beschriftungen für unsere Textfelder ein. Außerdem erstellen wir ein Array der Mobilfunkanbieter. Da ich in den USA ansässig bin, verwende ich nur die US-amerikanischen Anbieter. Lesen Sie diesen Artikel auf Wikipedia, der Ihnen bei den Mobilfunkanbietern in Ihrem Land helfen wird.

 private Funktion init (): void var labelArray: Array = [[nameLabel, "From name:"], [subjectLabel, "Betreff:"], [messageLabel, "Message:"], [emailLabel, "From email:" ], [toLabel, "To name:"], [addyLabel, "to email:"]]; var textArray: Array = [nameText, subjectText, messageText, emailText, toText, addyText]; var len: int = labelArray.length; Anhang = falsch; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; für (var i: int = 0; i 
Wir richten auch die Optionsfelder ein.
 
 
 Schritt 5: Umgang mit der Anlage
 
Das erste, worüber wir uns Sorgen machen müssen, ist der Umgang mit dem Anhang. Da ich Flash CS3 verwende, machen wir das Anhängen auf die altmodische Art und Weise. Wenn Sie auf die Schaltfläche "Anhängen" klicken, wird die Instanz erstellt Aktenzeichen Variable, die wir erstellt haben. Eine wichtige Sache zu beachten ist, dass die Aktenzeichen Variable muss a sein global Variable (d. h. nicht nur für eine Funktion spezifisch), damit Ereignisse korrekt ausgelöst werden. 
 
Wenn der Benutzer eine Datei zum Hochladen ausgewählt hat, machen wir den Fortschrittsbalken sichtbar und warten auf die Ereignisse 'Fortschritt' und 'Abschluss'. Wenn das Ereignis 'complete' ausgelöst wird, deaktivieren wir die Schaltfläche 'attach' und setzen die Attachment-Variable auf wahr und blende den Fortschrittsbalken aus.
 
 private Funktion onAttach (Ereignis: MouseEvent): void file = new FileReference (); file.addEventListener (Event.SELECT, onSelect); file.browse ([new FileFilter ("Bilder (* .jpg, * .jpeg, * .gif, * .png)", "* .jpg; *. jpeg; *. gif; *. png")]));  private Funktion onSelect (Ereignis: Ereignis): void pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); file.addEventListener (Event.COMPLETE, onUpload); file.upload (neue URLRequest ("upload.php"), "file");  private Funktion onProgress (Ereignis: ProgressEvent): void pBar.setProgress (int ((event.bytesLoaded / event.bytesTotal) * 100), 100);  private Funktion onUpload (Ereignis: Ereignis): void pBar.visible = false; attach.enabled = false; Anhang = wahr; 
 
 
 Schritt 6: Das Dokument hochladen
 
Umstieg auf PHP. Erstellen Sie zunächst ein neues PHP-Dokument und speichern Sie es als 'upload.php'. Erstellen Sie nun auf Ihrem Webserver ein Verzeichnis mit dem Namen 'temp'. Dies ist der Ordner, in dem wir die hochgeladene Datei speichern. Wir werden diesen Ort einer PHP-Variablen mit dem Namen 'folder' zuordnen. Als Nächstes verwenden wir die super globale Variable '$ _FILES', um den Namen der hochgeladenen Datei zu ermitteln. Dann erstellen wir eine Variable, die den temporären Namen der gerade hochgeladenen Datei speichert. Zuletzt verschieben wir die Datei in unser "Temp" -Verzeichnis. Auf Nettuts finden Sie ein großartiges Tutorial zum Hochladen von Dateien mit PHP+.
 
 
 
 
 Schritt 7: Das Nachrichtendokument
 
Erstellen Sie ein neues PHP-Dokument und speichern Sie es als 'message.php'. In dieser Datei erhalten wir die Variablen von Flash. Das erste, was wir tun, ist die super globale Variable '$ _POST', um alle E-Mail-Felder wie 'an' und 'von' festzulegen. Als Nächstes setzen wir unsere Variable "Header". In PHP verwenden wir '.' anstelle von '+' verketten. In unserer 'headers' -Variable werden Sie '. =' Bemerken, das genauso funktioniert wie '+ =' in ActionScript. Nach jeder Verkettung fügen wir zwei Zeilenrückgaben hinzu. Dies ist wichtig, und ohne diese E-Mail-Adresse kann es nicht gesendet werden.
 
Nachdem alle unsere Header und Felder fertig sind, rufen wir die Mail-Funktion auf. Wenn die E-Mail erfolgreich ist, überprüfen wir, ob der E-Mail eine Datei zugeordnet ist. Wenn die Variable 'file' gesetzt ist, löschen wir diese Datei einfach mit der Funktion 'unlink' von unserem Server.
 
 '; $ address = $ _POST ['email']; $ message = $ _POST ['message']; $ subject = $ _POST ['subject']; $ name = $ _POST ['name']; $ from = $ _POST ['from']; $ headers = "From: $ from <$address>\ r \ n "; $ headers = = Return-Path: $ address \ r \ n"; $ headers = = Antwort an: $ address \ r \ n "; $ headers = = X-Mailer: PHP ". phpversion ()." \ r \ n "; $ headers = = MIME-Version: 1.0 \ r \ n"; // DATEIABSETZUNG GEHT HIER $ Kopfzeilen. = "Inhaltstyp: text / plain; charset = utf-8 \ r \ n "; if (mail ($ to, $ subject, $ message, $ headers)) if (isset ($ file)) unlink ($ file); echo 1; else echo 0;?>
 
 
 Schritt 8: Hinzufügen der Anlage
 
Hier ist der Code, den wir zum Senden eines Anhangs verwenden. Wenn Sie diese Art von Funktionalität in Ihre Anwendung aufnehmen möchten, geben Sie einfach diesen Code an der Stelle ein, an der "DATEI BEFESTIGUNG HIER" steht. Als erstes prüfen wir, ob die Variable 'file' gebucht wurde. Außerdem prüfen wir, ob die 'bool'-Variable' true 'ist. Dadurch wird überprüft, ob der Benutzer nicht versucht, einen Anhang als Textnachricht zu senden. Sie können zwar Dateien als Anhänge an Mobiltelefone senden, die maximalen Abmessungen betragen jedoch nur 640 x 480. Dies würde einige zusätzliche Logik erfordern, um die Größe des Bildes zu ändern, und liegt außerhalb des Geltungsbereichs dieses Kurztipps. Fühlen Sie sich frei, es selbst auszuprobieren!
 
Wieder auf dem richtigen Weg, erstellen wir eine 'Datei'-Variable, um zum Speicherort der hochgeladenen Datei zu gelangen. Nachdem Sie einige einfache Zeichenfolgen ersetzt haben, überprüfen wir die Dateierweiterung. Schließlich ändern wir unsere 'Header'-Variable so, dass sie die Datei sowie alle Informationen enthält, die zum Anhängen erforderlich sind.
 
 if (isset ($ _ POST ['file']) && $ bool === 'true') $ file = 'temp /'. $ _POST ['Datei']; $ ext = $ _POST ['ext']; $ name = str_replace ($ ext, ", $ _POST ['file']); $ ext = str_replace ('.',", $ ext); $ attachment = chunk_split (base64_encode (file_get_contents ($ file))); switch ($ ext) case 'jpg': case 'jpeg': $ ext = 'image / jpeg'; brechen; case 'gif': $ ext = 'image / gif'; brechen; case 'png': $ ext = 'image / png'; brechen;  $ mime_boundary = md5 (time ()); $ headers = "Content-Type: multipart / mixed; border =" $ mime_boundary "" \ r \ n "; $ headers. = "- $ mime_boundary \ r \ n"; $ headers. = "Inhaltstyp: $ ext; name = \" ". $ name." \ "\ r \ n"; $ headers. = "Content-Transfer-Encoding: base64 \ r \ n"; $ headers. = "Inhaltsdisposition: Anhang; Dateiname = \" ". $ _POST ['file']." \ "\ r \ n"; $ headers. = "\ n"; $ headers. = $ attachment. "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; 
 
 
 Schritt 9: Zurück in Flash
 
Wenn Sie auf die Schaltfläche "Sender" klicken, rufen wir die Funktion "onClick ()" auf. Wir prüfen, ob es sich um eine E-Mail oder eine SMS-Nachricht handelt, die der Benutzer zu senden versucht. Wenn es sich um eine SMS handelt, formatieren wir die Telefonnummer ein wenig. Überprüfen Sie, ob der Benutzer einen Anbieter ausgewählt hat, und stellen Sie sicher, dass die Nummer gültig ist. Nachdem wir alle Benutzerinformationen überprüft haben, laden wir das Dokument 'message.php', senden alle unsere Variablen an dieses Dokument und warten auf das Ereignis 'complete'.
 
 private Funktion onClick (Ereignis: MouseEvent): void var textArray: Array = [nameText, messageText, subjectText]; var len: int = textArray.length; if (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, "");  für (var i: int = 0; i 
 
 Schritt 10: Die Ereignishandler
 
Wenn das 'complete' -Ereignis ausgelöst wird, analysieren wir einfach die ganze Zahl, die PHP uns sendet. Neben dem Ereignis 'complete' werden im Folgenden die übrigen in diesem Projekt verwendeten Event-Handler-Funktionen aufgeführt. 
 
Die 'onChange'-Funktion schaltet die Sichtbarkeit des Kombinationsfelds um und ruft die' handleAddy'-Funktion auf. Die 'onText'-Funktion legt den Fokus des Textfelds fest, wenn auf das Label geklickt wird - wie in HTML. Schließlich übernimmt die Funktion 'onLabel' die Hervorhebung des Textfelds, wenn der Mauszeiger darüber bewegt wird.
 
 private Funktion onComplete (event: Event): void var num: int = parseInt (event.target.data); if (num) ExternalInterface.call ("alert", "Nachricht wurde gesendet");  else ExternalInterface.call ("alert", "Es ist ein Fehler aufgetreten");  private Funktion onChange (event: Event): void switch (event.target.selection) case emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "An E-Mail senden:"; handleOffset (false); brechen; case textRadio: Anhang = falsch; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Bis Nummer:"; handleOffset (true); brechen;  handleAddy ();  private Funktion onText (event: MouseEvent): void switch (event.type) case MouseEvent.ROLL_OVER: event.target.drawFocus (true); brechen; case MouseEvent.ROLL_OUT: event.target.drawFocus (false); brechen;  private Funktion onLabel (Ereignis: MouseEvent): void var labelName: String = event.currentTarget.name.replace ("Label", "Text"); var tf: UIComponent; if (labelName === "messageText") tf = TextArea (this.getChildByName (labelName));  else tf = TextInput (this.getChildByName (labelName));  switch (event.type) case MouseEvent.ROLL_OVER: tf.drawFocus (true); brechen; case MouseEvent.ROLL_OUT: tf.drawFocus (false); brechen; case MouseEvent.CLICK: tf.setFocus (); brechen;  private Funktion onFocus (event: FocusEvent): void event.target.text = ""; 
 
 
 Schritt 11: Die restlichen Funktionen
 
Dies sind die letzten Funktionen, die die Textfelder überprüfen, um sicherzustellen, dass sie nicht leer sind, sowie den durch die Auswahl der Optionsfelder verursachten Versatz.
 
 private Funktion handleOffset (bool: Boolean): void var ch: Number = combo.height + 10; switch (bool) case true: nameLabel.y + = ch; subjectLabel.y + = ch; messageText.y + = ch; messageLabel.y + = ch; subjectText.y + = ch; Sender.y + = ch; nameText.y + = ch; rule.y + = ch; emailLabel.y + = ch; emailText.y + = ch; rule2.y + = ch; brechen; case false: messageText.y - = ch; messageLabel.y - = ch; subjectText.y - = ch; subjectLabel.y - = ch; Sender.y - = ch; nameLabel.y - = ch; nameText.y - = ch; rule.y - = ch; emailLabel.y - = ch; emailText.y - = ch; rule2.y - = ch; brechen;  private Funktion handleString (string: String): Boolean if (string.toLowerCase (). search (/ [a-z0-9] / g)! = -1) return true;  else return false;  private Funktion handleEmail (string: String): Boolean // Dieses RegExp wird verwendet, um zu prüfen, ob der Benutzer ein gültiges E-Mail-Adressen-Var-Muster eingegeben hat: RegExp = / [a-z0-9! # $% & '* + \ / =? ^ _ '| ~ -] + (?: \. [a-z0-9! # $% &' * + \ / =? ^ _ '| ~ -] +) * @ ( : [a-z0-9] (?: [a-z0-9 -] * [a-z0-9])? \.) + [a-z0-9] (?: [a-z0-9.) -] * [a-z0-9]) / g; if (pattern.exec (string)! = null) return true;  else return false;  private Funktion handleNumber (string: String): Boolean if (string.search (/ [0-9] /) === -1) return false;  else // Möglicherweise müssen Sie diese Logik ändern, abhängig von der // Länge der // Mobiltelefonnummern in Ihrem Land if (string.length < 11)  return false;  else  return true;   return false;  private function handleAddy():void  addyText.addEventListener(FocusEvent.FOCUS_IN, onFocus); if(!emailRadio.selected)  addyLabel.text = "To email:"; addyText.text = "";  else  addyLabel.text = "To number:"; addyText.text = "Starting with country code";  
 
 
Fazit
 
In diesem Quick Tip haben Sie gelernt, wie Sie mit Flash und AS3 nicht nur einfache Textvariablen, sondern auch Bilder senden - und zwar nicht nur per E-Mail, sondern auch per SMS. Diese Techniken können auf verschiedene Arten verwendet werden. Experimentieren Sie weiter und vergessen Sie nicht, den Tuts + -Feed zu abonnieren. Danke fürs Lesen!



		
			
	   
	




Code