Snabbtips Skapa en kontaktformulär med sms och e-postmeddelanden

I denna Snabba Tips kommer jag att visa dig hur du bygger en kontaktformulär med hjälp av PHP och ActionScript 3. Vi lär dig att skicka variabler från Flash till PHP och varna ägaren genom att skicka antingen ett e-postmeddelande eller ett sms-textmeddelande.


Steg 1: Ställa in dokumentet

Det första du behöver göra är att hämta källfilerna för den här handledningen. Eftersom denna handledning är en snabb Tips, kommer jag att hoppa över layouten. När du har hämtat filerna, öppna filen "contactForm.fla".

SWF-layouten ser ut så här:


Steg 2: Dokumentklassen

Skapa en ny "ActionScript" -fil och spara den i samma mapp som "contactForm.fla." Ge filen ett namn på 'contatForm.as.' Därefter länka du Flash-filen och ActionScript-filen tillsammans i Egenskaper-panelen. För en mer djupgående titt på hur du ställer in dokumentklassen, kolla in den här snabbguiden.


Steg 3: Importen

Här är de importdeklarationer som vi ska använda för den här filen. Vi kommer också att skapa två globala variabler. En är att använda för en fil bilaga, och den andra är att hålla reda på om vi ska använda den filen eller inte.

 paket import fl.controls.ProgressBarMode; importera fl.controls.RadioButton; importera fl.controls.RadioButtonGroup; importera fl.controls.TextInput; importera fl.core.UIComponent; importera flash.display.MovieClip; importera flash.display.Sprite; importera flash.events.Event; importera flash.events.FocusEvent; importera flash.events.MouseEvent; importera flash.events.ProgressEvent; importera flash.external.ExternalInterface; importera flash.net.FileFilter; importera flash.net.FileReference; importera flash.net.URLLoader; importera flash.net.URLRequest; importera flash.net.URLRequestMethod; importera flash.net.URLVariabler; importera flash.text.TextField; public class contactForm utökar Sprite private var fil: FileReference; privat var bilaga: booleska; public function contactForm () init (); 

Steg 4: Börja med kod

Den första funktionen vi kallar är i det(). Inom funktionen ställer vi upp etiketterna för våra textfält. Vi skapar också en rad mobiltelefonleverantörer. Eftersom jag är belägen i USA använder jag bara de amerikanska leverantörerna. Kolla in den här artikeln på Wikipedia som hjälper dig med mobilleverantörerna i ditt land.

 privat funktion init (): void var labelArray: Array = [[nameLabel, "Från namn:"], [subjectLabel, "Subject:"], [messageLabel, "Message:"], [emailLabel, "From email:" ], [toLabel, "Att namnge:"], [addyLabel, "To email:"]]; var textArray: Array = [nameText, subjectText, messageText, emailText, toText, addyText]; var len: int = labelArray.length; bilaga = false; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; för (var i: int = 0; i 

Vi ställer också upp radioknapparna.


Steg 5: Hantera bilagan

Det första vi kommer att oroa oss över är att hantera bilagan. Eftersom jag använder Flash CS3, kommer vi att fästa det gammaldags sättet. När "attach" -knappen är klickad, kommer vi att instansera Filreferens variabel som vi skapade. En viktig sak att notera är att Filreferens variabel måste vara a global variabel (dvs inte specifik för bara en funktion) för att händelser ska kunna avfyra korrekt.

När användaren har valt en fil att ladda upp, kommer vi att göra framdriftsfältet synligt och lyssna på "framsteg" och "fullständiga" händelser. När händelsen "fullständig" brinner, inaktiverar vi "bifoga" -knappen, ställer in bilagans variabel till Sann och gömma framdriftsfältet.

 privat funktion onAttach (händelse: MouseEvent): void file = new FileReference (); file.addEventListener (Event.SELECT, onSelect); file.browse ([new filefilter ("bilder (* .jpg, * .jpeg, * .gif, * .png)", "* .jpg; * .jpeg; * .gif; * .png")]);  privat funktion påVälj (händelse: Händelse): void pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); file.addEventListener (Event.COMPLETE, onUpload); file.upload (ny URLRequest ("upload.php"), "fil");  privat funktion onProgress (händelse: ProgressEvent): void pBar.setProgress (int ((event.bytesLoaded / event.bytesTotal) * 100), 100);  privat funktion onUpload (händelse: händelse): void pBar.visible = false; attach.enabled = false; attachment = true; 

Steg 6: Ladda upp dokumentet

Byter till PHP. Skapa först ett nytt PHP-dokument och spara det som "upload.php". Skapa nu en katalog på din webbserver som kallas "temp". Det här är den mapp som vi använder för att lagra den uppladdade filen. Vi kommer att tilldela den platsen till en PHP-variabel som heter "mapp". Därefter använder vi super global variabel "$ _FILES" för att få namnet på filen vi laddat upp. Då skapar vi en variabel som lagrar det temporära namnet på filen vi just laddat upp. Slutligen flyttar vi filen till vår "temp" -katalog. Du kan hitta en bra handledning om att ladda upp filer med PHP över på Nettuts+.

 

Steg 7: Meddelandedokumentet

Skapa ett nytt PHP-dokument och spara det som "message.php". I den här filen kommer vi att få variablerna från Flash. Det första vi gör är att använda "$ _POST" super globala variabeln för att ställa in alla mailfält som "till" och "från". Därefter ställer vi in ​​vår "headers" -variabel. I PHP använder vi "." istället för att + + att sammanfoga. På vår "headers" -variabel märker du '. =' Som fungerar som '+ =' i ActionScript. Efter varje gång vi sammanfattar lägger vi till två linjens avkastning. Detta är viktigt och det kan inte misslyckas med vårt e-postmeddelande.

Slutligen, efter alla våra rubriker och fält är klara att gå, kallar vi funktionen "mail". Om posten är framgångsrik kontrollerar vi om det finns en fil som är associerad med e-postmeddelandet. Om "filen" -variabeln är inställd, tar vi helt enkelt bort den filen från vår server med funktionen "länk".

 '; $ adress = $ _POST ['email']; $ message = $ _POST ['message']; $ subject = $ _POST ['subject']; $ name = $ _POST ['name']; $ från = $ _POST ['från']; $ headers = "From: $ from <$address>\ r \ n "; $ headers. =" Retur-sökväg: $ adress \ r \ n "; $ headers. =" Svara-till: $ adress \ r \ n "; $ headers. =" X-Mailer: PHP ". phpversion ()." \ r \ n "; $ headers. =" MIME-Version: 1.0 \ r \ n "; // FILE ATTACHMENT GÅR HÄR $ headers. =" Innehållstyp: text / plain; charset = utf-8 \ r \ n "; om (post ($ till, $ ämne, $ meddelande, $ rubriker)) if (isset ($ file)) avlänk ($ fil); echo 1; else echo 0;?>

Steg 8: Lägga till bilagan

Här är koden som vi använder för att skicka en bilaga. Om du vill inkludera denna typ av funktionalitet i din ansökan, sätt bara in den här koden där det står "FILE ATTACHMENT GOES HERE". Det första vi gör är att kontrollera om variabeln "fil" har lagts upp. Vi kontrollerar också om bool-variabeln är "sann". Detta kontrollerar att användaren inte försöker skicka en bilaga som ett textmeddelande. Även om du kan skicka filer som bilagor till mobiltelefoner, är de maximala dimensionerna bara ca 640x480. Det skulle ta lite extra logik att ändra storlek på bilden och ligger utanför ramen för denna snabba tips. Du är dock fri att prova själv!

Tillbaka på rätt spår skapar vi en "fil" -variabel som leder till platsen för filen vi laddat upp. Dessutom, efter att ha gjort några enkla strängbyte, kontrollerar vi filtillägget. Slutligen ändrar vi vår "headers" -variabel för att inkludera filen och all information som behövs för att bifoga den.

 om (isset ($ _ POST ['fil']) && $ bool === 'true') $ file = 'temp /'. $ _POST [ 'file']; $ ext = $ _POST ['ext']; $ name = str_replace ($ ext, ", $ _POST ['fil']); $ ext = str_replace ('.', ', $ ext); $ attachment = chunk_split (base64_encode (file_get_contents ($ file))); switch ($ ext) case 'jpg': case 'jpeg': $ ext = 'image / jpeg'; ha sönder; fallet 'gif': $ ext = 'image / gif'; ha sönder; fallet 'png': $ ext = 'image / png'; ha sönder;  $ mime_boundary = md5 (tid ()); $ headers. = "Content-Type: multipart / mixed; boundary = \" $ mime_boundary \ "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; $ headers. = "Innehållstyp: $ ext; name = \" ". $ namn." \ "\ r \ n"; $ headers. = "Content-Transfer-Encoding: base64 \ r \ n"; $ headers. = "Content-Disposition: attachment; filnamn = \" ". $ _POST ['fil']." \ "\ r \ n"; $ headers. = "\ n"; $ headers. = $ attachment. "\ R \ n"; $ headers. = "- $ mime_boundary \ r \ n"; 

Steg 9: Tillbaka i Flash

När knappen 'avsändare' klickar, kallar vi funktionen 'onClick ()'. Vi gör några kontroller för att se om det är ett e-postmeddelande eller ett textmeddelande som användaren försöker skicka. Om det är ett textmeddelande, formaterar vi telefonnumret lite, kolla om användaren har valt en leverantör och se till att numret är giltigt. När vi har validerat all användarens information laddar vi dokumentet "message.php", skickar alla våra variabler till det och lyssnar på "komplett" händelsen.

 privat funktion onClick (händelse: MouseEvent): void var textArray: Array = [nameText, messageText, subjectText]; var len: int = textArray.length; om (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, "");  för (var i: int = 0; i 

Steg 10: Eventhanterare

När "fullständig" händelse avfyras, kommer vi helt enkelt att tolka heltalet som PHP skickar oss. Tillsammans med "komplett" -händelsen finns nedan resten av händelsehanteringsfunktionerna som används i detta projekt.

Funktionen "onChange" kommer att växla till kombinationsfältets synlighet samt kalla funktionen "handleAddy". Funktionen 'onText' kommer att ställa in fokus i textfältet när etiketten klickas - som i HTML. Slutligen hanterar funktionen "onLabel" markeringen av textfältet när musen rör sig över den.

 privat funktion onComplete (händelse: Event): void var num: int = parseInt (event.target.data); om (num) ExternalInterface.call ("alert", "Meddelandet skickades");  else ExternalInterface.call ("alert", "Ett fel uppstod");  privat funktion onChange (händelse: Händelse): void switch (event.target.selection) fall emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Till e-post:"; handleOffset (false); ha sönder; case textRadio: attachment = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Till nummer:"; handleOffset (true); ha sönder;  handleAddy ();  privat funktion onText (händelse: MouseEvent): void switch (event.type) fall MouseEvent.ROLL_OVER: event.target.drawFocus (true); ha sönder; fallet MouseEvent.ROLL_OUT: event.target.drawFocus (false); ha sönder;  privat funktion onLabel (händelse: MouseEvent): void var labelName: String = event.currentTarget.name.replace ("Etikett", "Text"); var tf: UIComponent; om (labelName === "messageText") tf = TextArea (this.getChildByName (labelName));  else tf = TextInput (this.getChildByName (labelName));  switch (event.type) fall MouseEvent.ROLL_OVER: tf.drawFocus (true); ha sönder; fallet MouseEvent.ROLL_OUT: tf.drawFocus (false); ha sönder; fallet MouseEvent.CLICK: tf.setFocus (); ha sönder;  privat funktion onFocus (händelse: FocusEvent): void event.target.text = ""; 

Steg 11: Resten av funktionerna

Det här är de sista funktionerna som hanterar kontroll av textfälten för att säkerställa att de inte är tomma samt hantering av förskjutningen som orsakats av val av alternativknapp.

 privat funktion handleOffset (bool: Boolean): void var ch: Number = combo.height + 10; switch (bool) fall sant: nameLabel.y + = ch; subjectLabel.y + = ch; messageText.y + = ch; messageLabel.y + = ch; subjectText.y + = ch; avsändare.y + = ch; nameText.y + = ch; rule.y + = ch; emailLabel.y + = ch; emailText.y + = ch; rule2.y + = ch; ha sönder; fall falskt: messageText.y - = ch; messageLabel.y - = ch; subjectText.y - = ch; subjectLabel.y - = ch; avsändare.y - = ch; nameLabel.y - = ch; nameText.y - = ch; rule.y - = ch; emailLabel.y - = ch; emailText.y - = ch; rule2.y - = ch; ha sönder;  privata funktionshandtagString (sträng: String): Boolean if (string.toLowerCase (). search (/ [a-z0-9] / g)! = -1) return true;  annars return false;  privatfunktionshandbokEmail (sträng: String): Boolean // den här RegExp används för att kontrollera om användaren angav en giltig e-postadress varmönster: 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; om (pattern.exec (string)! = null) return true;  annars return false;  privatfunktionshandtagNumber (sträng: String): Boolean if (string.search (/ [0-9] /) === -1) return false;  else // du kan behöva ändra den här logiken beroende på längden på // mobilnummer i ditt land om (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";  

Slutsats

I denna Quick Tip lärde du dig hur du använder Flash och AS3 för att skicka inte bara enkla textvariabler utan också bilder - och inte bara via e-post utan också via SMS-textmeddelande. Dessa tekniker kan användas på olika sätt. Fortsätt experimentera och kom ihåg att prenumerera på Tuts + feed. Tack för att du läser!