Suggerimento rapido crea un modulo di contatto con SMS e avvisi via email

In questo suggerimento rapido, ti mostrerò come creare un modulo di contatto utilizzando PHP e ActionScript 3. Impareremo come passare variabili da Flash a PHP e avvisare il proprietario inviando un'email o un messaggio di testo SMS.


Passaggio 1: impostazione del documento

La prima cosa da fare è scaricare i file sorgente per questo tutorial. Poiché questo tutorial è un suggerimento rapido, salterò i passaggi del layout. Una volta scaricati i file, aprire il file "contactForm.fla".

Il layout SWF ha questo aspetto:


Passaggio 2: la classe del documento

Crea un nuovo file 'ActionScript' e salvalo nella stessa cartella di 'contactForm.fla'. Dai al file un nome di "contatForm.as". Quindi, collega insieme il file Flash e il file ActionScript nel pannello Proprietà. Per uno sguardo più approfondito su come impostare la classe Documento, consulta questa guida rapida.


Passaggio 3: le importazioni

Ecco le istruzioni di importazione che utilizzeremo per questo file. Inoltre, creeremo due variabili globali. Uno è da usare per un file allegato, e l'altro è per tenere traccia se useremo quel file o meno.

 package import fl.controls.ProgressBarMode; importare fl.controls.RadioButton; importare fl.controls.RadioButtonGroup; importare fl.controls.TextInput; importare 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 estende Sprite file var privato: FileReference; allegato private var: Boolean; funzione pubblica contactForm () init (); 

Passaggio 4: avvio del codice

La prima funzione che chiamiamo è dentro(). All'interno della funzione, impostiamo le etichette per i nostri campi di testo. Inoltre, creiamo una serie di fornitori di telefoni cellulari. Poiché sono localizzato negli Stati Uniti, utilizzo solo i fornitori degli Stati Uniti. Dai un'occhiata a questo articolo su Wikipedia che ti aiuterà con i fornitori di cellulari nel tuo paese.

 funzione privata init (): void var labelArray: Array = [[nameLabel, "Dal nome:"], [subjectLabel, "Oggetto:"], [messageLabel, "Messaggio:"], [emailLabel, "Da email:" ], [toLabel, "Per nome:"], [addyLabel, "Per inviare un'email:"]]; var textArray: Array = [nomeText, subjectText, messageText, emailText, toText, addyText]; var len: int = labelArray.length; attachment = false; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; per (var i: int = 0; i 

Abbiamo anche impostato i pulsanti di opzione.


Passaggio 5: Gestione dell'allegato

La prima cosa di cui ci preoccuperemo è gestire l'allegato. Dal momento che sto usando Flash CS3, faremo il collegamento alla vecchia maniera. Quando viene cliccato il pulsante 'attach', istanziamo il File di riferimento variabile che abbiamo creato. Una cosa importante da notare è che il File di riferimento la variabile deve essere a globale variabile (ovvero non specifica di una sola funzione) per gli eventi che devono essere attivati ​​correttamente.

Quando l'utente ha selezionato un file da caricare, renderemo visibile la barra di avanzamento e ascolteremo gli eventi "progresso" e "completamento". Quando si attiva l'evento "completo", disabilitiamo il pulsante "Collega", impostiamo la variabile di allegato su vero e nascondi la barra di avanzamento.

 funzione privata onAttach (event: MouseEvent): void file = new FileReference (); file.addEventListener (Event.SELECT, onSelect); file.browse ([nuovo FileFilter ("Immagini (* .jpg, * .jpeg, * .gif, * .png)", "* .jpg; *. jpeg; *. gif; *. png")]);  funzione privata onSelect (event: Event): void pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); file.addEventListener (Event.COMPLETE, onUpload); file.upload (new URLRequest ("upload.php"), "file");  private function onProgress (event: ProgressEvent): void pBar.setProgress (int ((event.bytesLoaded / event.bytesTotal) * 100), 100);  funzione privata onUpload (event: Event): void pBar.visible = false; attach.enabled = false; attachment = true; 

Passaggio 6: il documento di caricamento

Passaggio a PHP. Innanzitutto, crea un nuovo documento PHP e salvalo come "upload.php". Ora crea una directory sul tuo server web chiamata "temp". Questa sarà la cartella che usiamo per memorizzare il file caricato. Assegneremo quella posizione a una variabile PHP chiamata 'cartella'. Successivamente, usiamo la variabile globale "$ _FILES" per ottenere il nome del file che abbiamo caricato. Quindi creiamo una variabile che memorizza il nome temporaneo del file che abbiamo appena caricato. Infine, spostiamo il file nella nostra directory "temp". Puoi trovare un ottimo tutorial sul caricamento di file con PHP su Nettuts+.

 

Passaggio 7: il documento del messaggio

Crea un nuovo documento PHP e salvalo come "messaggio.php". In questo file, riceveremo le variabili da Flash. La prima cosa che facciamo è usare la variabile globale "$ _POST" per impostare tutti i campi di posta elettronica come "a" e "da". Successivamente, impostiamo la nostra variabile 'intestazioni'. In PHP, usiamo '.' invece di '+' per concatenare. Sulla nostra variabile 'intestazioni', noterai '. =' Che funziona come '+ =' in ActionScript. Dopo ogni volta che concateniamo, aggiungiamo due ritorni di riga. Questo è importante e senza di esso la nostra e-mail potrebbe non riuscire a inviare.

Infine, dopo che tutte le nostre intestazioni e i nostri campi sono pronti, chiamiamo la funzione "posta". Se la posta è andata a buon fine, controlliamo se c'era un file associato all'email. Se la variabile 'file' è impostata, cancelleremo semplicemente quel file dal nostro server usando la funzione 'unlink'.

 '; $ indirizzo = $ _POST ['email']; $ message = $ _POST ['message']; $ subject = $ _POST ['subject']; $ nome = $ _POST ['nome']; $ da = $ _POST ['da']; $ intestazioni = "Da: $ da <$address>\ r \ n "; $ headers. =" Return-Path: $ address \ r \ n "; $ headers. =" Reply-To: $ indirizzo \ r \ n "; $ headers. =" X-Mailer: PHP ". phpversion ()." \ r \ n "; $ headers. =" Versione MIME: 1.0 \ r \ n "; // FILE ATTACHMENT VA QUI $ headers. =" Content-type: text / plain; charset = utf-8 \ r \ n "; if (mail ($ a, $ subject, $ message, $ headers)) if (isset ($ file)) unlink ($ file); echo 1; else echo 0;?>

Passaggio 8: aggiunta dell'allegato

Ecco il codice che usiamo per inviare un allegato. Se si desidera includere questo tipo di funzionalità nella propria applicazione, è sufficiente inserire questo codice dove viene indicato 'FILE ATTACHMENT GOES HERE'. La prima cosa che facciamo è controllare se la variabile 'file' è stata pubblicata. Inoltre, controlliamo se la variabile 'bool' è 'true'. Ciò verificherà che l'utente non stia tentando di inviare un allegato come messaggio di testo. Sebbene sia possibile inviare file come allegati ai telefoni cellulari, le dimensioni massime sono solo di circa 640x480. Ciò richiederebbe una logica aggiuntiva per ridimensionare l'immagine e non rientrare nell'ambito di questo suggerimento rapido. Sentiti libero di provarlo da solo, però!

Tornando in pista, creeremo una variabile "file" per indirizzare la posizione del file che abbiamo caricato. Inoltre, dopo aver sostituito alcune semplici stringhe, controlliamo l'estensione del file. Infine, modifichiamo la nostra variabile 'intestazioni' per includere il file e tutte le informazioni necessarie per collegarlo.

 if (isset ($ _ POST ['file']) && $ bool === 'true') $ file = 'temp /'. $ _POST [ 'file']; $ 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'; rompere; case 'gif': $ ext = 'image / gif'; rompere; case 'png': $ ext = 'image / png'; rompere;  $ mime_boundary = md5 (time ()); $ headers. = "Content-Type: multipart / mixed; boundary = \" $ mime_boundary \ "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; $ headers. = "Content-Type: $ ext; name = \" ". $ name." \ "\ r \ n"; $ headers. = "Content-Transfer-Encoding: base64 \ r \ n"; $ headers. = "Content-Disposition: attachment; filename = \" ". $ _POST ['file']." \ "\ r \ n"; $ intestazioni. = "\ n"; $ intestazioni. = $ allegato. "\ R \ n"; $ headers. = "- $ mime_boundary \ r \ n"; 

Passaggio 9: Indietro in Flash

Quando viene cliccato il pulsante 'mittente', chiamiamo la funzione 'onClick ()'. Eseguiamo alcuni controlli per vedere se si tratta di una e-mail o di un messaggio di testo che l'utente sta tentando di inviare. Se si tratta di un messaggio di testo, formifichiamo un po 'il numero di telefono, controlliamo se l'utente ha selezionato un fornitore e ci assicuriamo che il numero sia valido. Dopo aver convalidato tutte le informazioni dell'utente, caricheremo il documento "messaggio.php", invieremo tutte le nostre variabili e ascolteremo l'evento "completo".

 funzione privata onClick (event: MouseEvent): void var textArray: Array = [nameText, messageText, subjectText]; var len: int = textArray.length; if (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, "");  per (var i: int = 0; i 

Passaggio 10: i gestori di eventi

Quando viene attivato l'evento "completo", analizzeremo semplicemente il numero intero che PHP ci invia. Insieme all'evento 'completo', di seguito sono riportate le restanti funzioni del gestore eventi utilizzate in questo progetto.

La funzione 'onChange' commuta la visibilità sulla casella combinata e chiama la funzione 'handleAddy'. La funzione 'onText' imposterà il focus del campo di testo quando l'etichetta viene cliccata, come in HTML. Infine, la funzione 'onLabel' gestirà l'evidenziazione del campo di testo quando il mouse si sposta su di esso.

 funzione privata onComplete (event: Event): void var num: int = parseInt (event.target.data); if (num) ExternalInterface.call ("alert", "Message was send");  else ExternalInterface.call ("alert", "C'era un errore");  funzione privata onChange (event: Event): void switch (event.target.selection) case emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Email:"; handleOffset (false); rompere; caso textRadio: attachment = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Al numero:"; handleOffset (true); rompere;  handleAddy ();  funzione privata onText (event: MouseEvent): void switch (event.type) case MouseEvent.ROLL_OVER: event.target.drawFocus (true); rompere; case MouseEvent.ROLL_OUT: event.target.drawFocus (false); rompere;  funzione privata onLabel (event: MouseEvent): void var labelName: String = event.currentTarget.name.replace ("Etichetta", "Testo"); 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); rompere; case MouseEvent.ROLL_OUT: tf.drawFocus (false); rompere; case MouseEvent.CLICK: tf.setFocus (); rompere;  private function onFocus (event: FocusEvent): void event.target.text = ""; 

Passaggio 11: Il resto delle funzioni

Queste sono le funzioni finali che gestiranno il controllo dei campi di testo per assicurarsi che non siano vuoti e che gestiscano l'offset causato dalla selezione del pulsante di opzione.

 funzione privata 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; nomeText.y + = ch; regola.y + = ch; emailLabel.y + = ch; emailText.y + = ch; rule2.y + = ch; rompere; case false: messageText.y - = ch; messageLabel.y - = ch; subjectText.y - = ch; subjectLabel.y - = ch; sender.y - = ch; nomeLabel.y - = ch; nomeText.y - = ch; regola.y - = ch; emailLabel.y - = ch; emailText.y - = ch; regola2.y - = ch; rompere;  private function handleString (string: String): Boolean if (string.toLowerCase (). search (/ [a-z0-9] / g)! = -1) return true;  else return false;  private function handleEmail (string: String): Boolean // questo RegExp viene utilizzato per verificare se l'utente ha immesso un modello var di indirizzo email valido: 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 function handleNumber (string: String): Boolean if (string.search (/ [0-9] /) === -1) return false;  else // potrebbe essere necessario modificare questa logica in base alla lunghezza di // numero di telefono cellulare nel proprio paese se (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";  

Conclusione

In questo suggerimento rapido, hai imparato a utilizzare Flash e AS3 per inviare non solo semplici variabili di testo ma anche immagini, e non solo via email, ma anche tramite SMS. Queste tecniche possono essere utilizzate in vari modi. Continua a sperimentare e ricorda di iscriverti al feed di Tuts +. Grazie per aver letto!