Sfat rapid creați un formular de contact prin SMS și e-mail

În acest sfat rapid vă voi arăta cum să creați un formular de contact folosind PHP și ActionScript 3. Vom învăța cum să trecem variabilele de la Flash la PHP și să-i avertizăm pe proprietar prin trimiterea unui mesaj text sau SMS.


Pasul 1: Configurarea documentului

Primul lucru pe care trebuie să faceți este să descărcați fișierele sursă pentru acest tutorial. Deoarece acest tutorial este un sfat rapid, voi trece peste pașii de aspect. După ce ați descărcat fișierele, deschideți fișierul "contactForm.fla".

Formatul SWF arată astfel:


Pasul 2: Clasa de documente

Creați un nou fișier "ActionScript" și salvați-l în același director ca și "contactForm.fla". Dați fișierului un nume de "contatForm.as". Apoi, conectați fișierul Flash și fișierul ActionScript împreună în panoul Proprietăți. Pentru o privire mai detaliată asupra modului de configurare a clasei Document, consultați acest ghid rapid.


Pasul 3: Importurile

Iată instrucțiunile de import pe care le vom folosi pentru acest fișier. De asemenea, vom crea două variabile globale. Unul este de a utiliza pentru un fișier atașament, iar celălalt este de a urmări dacă vom folosi acel fișier sau nu.

 pachet 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; importul flash.events.Event; import flash.events.FocusEvent; importul 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 extinde Sprite fișier privat var: FileReference; private var atașament: Boolean; funcția publică funcția contactForm () init (); 

Pasul 4: Începând cu codul

Prima funcție pe care o numim este init (). În cadrul funcției, am creat etichetele pentru câmpurile noastre de text. De asemenea, creăm o gamă largă de furnizori de telefonie mobilă. De când mă aflu în Statele Unite, folosesc numai furnizorii din S.U.A. Verificați acest articol pe Wikipedia care vă va ajuta cu furnizorii de telefonie mobilă din țara dvs..

 init privat funcția (): void var labelArray: Array = [[nameLabel, "From name:"], [subjectLabel "Subject:"], [messageLabel "Mesajul:"], [emailLabel, "De la e-mail:" ], [laLabel, "Pentru a numi:"], [addyLabel, "Pentru a trimite un e-mail:"]]; var textArray: Array = [numeText, subiectText, mesajText, emailText, toText, addyText]; var numai: int = labelArray.length; atașament = fals; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; pentru (var i: int = 0; i 

De asemenea, am setat butoanele radio.


Pasul 5: Manipularea atașamentului

Primul lucru pe care ni-l facem griji este manipularea atașamentului. Deoarece folosesc Flash CS3, vom face atașarea modului vechi. Atunci când se face clic pe butonul "atașați", vom instanțializa Fișier de referință variabilă pe care am creat-o. Un lucru important este de menționat că Fișier de referință variabila trebuie să fie a global (adică nu este specifică unei singure funcții) pentru ca evenimentele să se tragă corect.

Când utilizatorul a selectat un fișier pentru încărcare, vom face vizibil bara de progres și vom asculta evenimentele "progress" și "complete". Când evenimentul "complet" apare, dezactivați butonul "atașați", setați variabila de atașament la Adevărat și ascundeți bara de progres.

 funcția privată onAtch (eveniment: MouseEvent): void file = new FileReference (); file.addEventListener (eveniment.SELECT, onSelect); file.browse ([nou FileFilter ( "imagini (* .jpg, * .jpeg, * .gif, .png *)", "* .jpg;. * jpeg; *. gif; *. png")]);  funcția privată onSelect (eveniment: Eveniment): void pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); fișier.addEventListener (Event.COMPLETE, onUpload); file.upload (nou URLRequest ("upload.php"), "fișier");  Funcția privată onProgress (eveniment: ProgressEvent): void pBar.setProgress (int ((event.bytesLoaded / event.bytesTotal) * 100), 100);  funcția privată onUpload (eveniment: Event): void pBar.visible = false; attach.enabled = false; atașament = adevărat; 

Pasul 6: Documentul de încărcare

Trecerea la PHP. Mai întâi, creați un nou document PHP și salvați-l ca "upload.php". Acum, creați un director pe serverul dvs. web numit 'temp'. Acesta va fi folderul pe care îl folosim pentru a stoca fișierul încărcat. Vom atribuia acea locație unei variabile PHP numite "folder". Apoi, folosim variabila globală superplă '$ _FILES' pentru a obține numele fișierului pe care l-am încărcat. Apoi vom crea o variabilă care stochează numele temporar al fișierului pe care tocmai l-am încărcat. În final, mutăm fișierul în directorul "temp". Puteți găsi un tutorial excelent în încărcarea fișierelor cu PHP peste Nettuts+.

 

Pasul 7: Documentul de mesaj

Creați un nou document PHP și salvați-l ca "message.php". În acest fișier, vom primi variabilele din Flash. Primul lucru pe care îl facem este să folosiți variabila globală super "$ _POST" pentru a seta toate câmpurile de e-mail, cum ar fi "la" și "de la". Apoi, setăm variabila "anteturi". În PHP, folosim "." în loc de "+" pentru a concatenate. În variabila "headers", veți observa '. =' Care funcționează la fel ca '+ =' în ActionScript. După fiecare concatenare adăugăm două retururi de linii. Acest lucru este important și fără el e-mailul nostru nu poate trimite.

În cele din urmă, după ce antetele și câmpurile noastre sunt gata să meargă, numim funcția "mail". Dacă e-mailul are succes, verificăm dacă există un fișier asociat cu e-mailul. Dacă variabila "fișier" este setată, atunci pur și simplu ștergem acel fișier de pe serverul nostru folosind funcția "deconectare".

 „; $ adresa = $ _POST ['e-mail']; $ message = $ _POST ['mesaj']; $ subject = $ _POST ['subiect']; $ nume = $ _POST ['nume']; $ din = $ _POST ['din']; $ headers = "De la: $ din <$address>\ R \ n "; $ antete =. "Return-Path: $ adresa \ r \ n"; $ antete =. "Reply-To: $ adresa \ r \ n"; $ antete =." X-Mailer: PHP "phpversion () " \ r \ n"; $ headers =. "MIME-Version: 1.0 \ r \ n"; // DOSAR ATAȘAREA GOES AICI $ headere =." Content-type: text / plain; charset = utf-8 \ r \ n "; în cazul în care (e-mail ($ la, $ subiect, $ mesaj, $ antete)) if (isset (fișier $)) deconectez (fișier $); echo 1; else echo 0;?>

Pasul 8: Adăugarea atașamentului

Iată codul pe care îl folosim pentru a trimite un atașament. Dacă doriți să includeți acest tip de funcționalitate în aplicația dvs., pur și simplu introduceți acest cod acolo unde scrie "FILE ATTACHMENT GOES HERE". Primul lucru pe care îl facem este să verificăm dacă variabila "fișier" a fost postată. De asemenea, verificăm dacă variabila "bool" este "adevărată". Aceasta va verifica dacă utilizatorul nu încearcă să trimită un atașament ca mesaj text. Deși puteți trimite fișiere ca atașamente la telefoanele mobile, dimensiunile maxime sunt de numai aproximativ 640x480. Acest lucru ar necesita o logică suplimentară pentru a redimensiona imaginea și nu se află în sfera de aplicare a acestui sfat rapid. Simțiți-vă liber să-l încercați, totuși!

Înapoi pe pistă, vom crea o variabilă "fișier" care să conducă la locația fișierului pe care l-am încărcat. De asemenea, după ce facem o înlocuire simplă a șirului, verificăm extensia fișierului. În cele din urmă, modificăm variabila "Headers" pentru a include fișierul, precum și toate informațiile necesare pentru al atașa.

 dacă (isset ($ _ POST ['fișier']) && $ bool === 'adevărat') $ file = 'temp /'. $ _POST [ 'fisier']; $ ext = $ _POST ['ext']; $ nume = str_replace ($ ext, "$ _POST ['fișier']); $ ext = str_replace ('.', '$ ext); $ attachment = chunk_split (base64_encode (file_get_contents (fișier $))); comutator ($ ext) caz 'jpg': caz 'jpeg': $ ext = 'imagine / jpeg'; pauză; cazul "gif": $ ext = 'imagine / gif'; pauză; cazul "png": $ ext = 'imagine / png'; pauză;  $ mime_boundary = md5 (timp ()); $ header = "Content Type: multipart / mixed; boundary = \" $ mime_boundary \ "\ r \ n"; $ headers = "- $ mime_boundary \ r \ n"; $ header; = "Tip de conținut: $ ext; nume =" ". $ nume." \ "\ r \ n"; $ header = "Content-Transfer-Encoding: base64 \ r \ n"; $ headers = "Content-Dispoziție: atașament; fișier nume =" ". $ _POST ['fișier']." \ "\ r \ n"; $ anteturi. = "\ n"; $ headers = $ atașament. "\ R \ n"; $ headers = "- $ mime_boundary \ r \ n"; 

Pasul 9: Înapoi în Flash

Când se face clic pe butonul "expeditor", sunăm funcția "onClick ()". Executăm verificări pentru a vedea dacă este vorba despre un e-mail sau un mesaj text pe care utilizatorul încearcă să îl trimită. Dacă este vorba de un mesaj text, vom format puțin numărul de telefon, verificați dacă utilizatorul a selectat un furnizor și asigurați-vă că numărul este valid. După ce am validat toate informațiile utilizatorului, vom încărca documentul "message.php", vom trimite toate variabilele la acesta și vom asculta evenimentul "complet".

 funcția privată onClick (eveniment: MouseEvent): void var textArray: Array = [numeText, messageText, subjectText]; var len: int = textErray.length; dacă (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, "");  pentru (var i: int = 0; i 

Pasul 10: Manipulatorii de evenimente

Când se declanșează evenimentul "complet", vom analiza pur și simplu întregul pe care îl trimite PHP. Împreună cu evenimentul "complet", mai jos sunt restul funcțiilor de gestionare a evenimentelor utilizate în acest proiect.

Funcția 'onChange' va comuta vizibilitatea cutiei combo și va apela funcția 'handleAddy'. Funcția "onText" va stabili focalizarea câmpului de text la apăsarea etichetei - ca în HTML. În cele din urmă, funcția "onLabel" se va ocupa de evidențierea câmpului de text atunci când mouse-ul se mișcă peste el.

 funcția privată onComplete (eveniment: Eveniment): void var num: int = parseInt (event.target.data); dacă (num) ExternalInterface.call ("alertă", "Mesajul a fost trimis");  altceva ExternalInterface.call ("alert", "A apărut o eroare");  funcția privată onChange (eveniment: Eveniment): void switch (event.target.selection) caz emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Pentru a trimite un e-mail:"; handleOffset (false); pauză; caz textRadio: attachment = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Numărul:"; handleOffset (true); pauză;  handleAddy ();  funcția privată onText (eveniment: MouseEvent): void switch (event.type) caz MouseEvent.ROLL_OVER: event.target.drawFocus (true); pauză; caz MouseEvent.ROLL_OUT: event.target.drawFocus (false); pauză;  funcția privată onLabel (eveniment: MouseEvent): void var nameName: String = event.currentTarget.name.replace ("Label", "Text"); var tf: UIComponent; dacă (labelName === "messageText") tf = TextArea (this.getChildByName (labelName));  altfel tf = TextInput (this.getChildByName (labelName));  comutator (event.type) caz MouseEvent.ROLL_OVER: tf.drawFocus (true); pauză; caz MouseEvent.ROLL_OUT: tf.drawFocus (fals); pauză; caz MouseEvent.CLICK: tf.setFocus (); pauză;  funcția privată onFocus (eveniment: FocusEvent): void event.target.text = ""; 

Pasul 11: Restul funcțiilor

Acestea sunt funcțiile finale care se vor ocupa de verificarea câmpurilor de text pentru a vă asigura că nu sunt goale, precum și de a manevra offsetul cauzat de selecția butonului radio.

 funcția privată handleOffset (bool: Boolean): void var ch: Number = combo.height + 10; comutare (bool) caz adevărat: nameLabel.y + = ch; subjectLabel.y + = ch; messageText.y + = ch; messageLabel.y + = ch; topicText.y + = ch; sender.y + = ch; numeText.y + = ch; rule.y + = ch; emailLabel.y + = ch; emailText.y + = ch; rule2.y + = ch; pauză; cazul false: messageText.y - = ch; messageLabel.y - = ch; topicText.y - = ch; subjectLabel.y - = ch; sender.y - = ch; numeLabel.y - = ch; nameText.y - = ch; rule.y - = ch; emailLabel.y - = ch; emailText.y - = ch; rule2.y - = ch; pauză;  funcția privată handleString (șir: String): Boolean if (string.toLowerCase (). căutare (/ [a-z0-9] / g)! = -1) return true;  altfel return false;  funcția privată handleEmail (string: String): Boolean // acest RegExp este folosit pentru a verifica dacă utilizatorul a introdus o adresă de e-mail valabilă var var: 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; dacă (model.exec (șir)! = null) return true;  altfel return false;  funcția privată handleNumber (șir: String): Boolean if (string.search (/ [0-9] /) === -1) return false;  altfel // poate fi necesar să schimbați această logică în funcție de lungimea // numerelor de telefon mobil din țara dvs. dacă (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";  

Concluzie

În acest sfat rapid, ați învățat cum să utilizați Flash și AS3 pentru a trimite nu numai variabile de text simple, ci și imagini, și nu doar prin e-mail, ci și prin SMS. Aceste tehnici pot fi utilizate într-o varietate de moduri. Continuați să experimentați și nu uitați să vă abonați la feedul Tuts +. Vă mulțumim pentru lectură!

Cod