Quick Tips: Lag et kontaktskjema med SMS og e-post Alerts

Quick Tips: Lag et kontaktskjema med SMS og e-postvarsler
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne hurtig Tip, vil jeg vise deg hvordan du kan bygge et kontaktskjema med PHP og Actionscript 3. Vi vil lære å passere variabler fra Flash til PHP og varsle eieren av sende enten en e-post eller en SMS-melding




Trinn 1:. Sette opp Document

Det første du må gjøre er å laste ned kildefilene for dette opplæringen. Siden denne opplæringen er en rask spiss, vil jeg hoppe layout trinn. . Når du har filer som lastes ned, åpne 'contactForm.fla' fil

SWF layout ser slik ut:



Trinn 2: The Document Class

Opprett en ny "Actionscript-fil og lagre den i samme mappe som" contactForm.fla. Gi filen et navn 'contatForm.as. Deretter kobler Flash-filen og Actionscript-fil sammen i Properties panelet. For en mer inngående titt på hvordan du setter opp dokumentklassen, sjekk ut denne hurtigguide



Trinn 3:. De Importen

Her er import uttalelser som vi vil være å bruke for denne filen. Dessuten vil vi lage to globale variabler. Det ene er å bruke for et filvedlegg, og den andre er å holde styr på om vi kommer til å bruke den filen eller ikke
pakke {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 kontaktskjema strekker Sprite {private Var file: FileReference; private Var vedlegg: Boolean; offentlig funksjon kontaktskjema () {init (); }}}



Trinn 4: Begynner å kode

Den første funksjonen vi kaller er init (). I funksjonen, setter vi opp etikettene for våre tekstfelt. Dessuten skaper vi en rekke av de mobiltelefon leverandører. Siden jeg befinner meg i USA, bruker jeg bare de amerikanske leverandører. Sjekk ut denne artikkelen på Wikipedia som vil hjelpe deg med mobiltelefon leverandører i ditt land
privat funksjon init (). Void {var labelArray: Array = [[nameLabel, "Fra navn:"], [subjectLabel, " Emne: "], [messageLabel," Melding: "], [emailLabel," Fra e-postadresse: "], [toLabel," Å navn: "], [addyLabel," Til e-post: "]]; Var textArray: Array = [nameText, subjectText, messageText, emailText, toText, addyText]; Var len: int = labelArray.length; vedlegg = false; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; for (var i: int = 0; i < len; i ++) {labelArray [i] [0] .dyText.text = labelArray [i] [1]; labelArray [i] [0] .addEventListener (MouseEvent.CLICK, onLabel); } Len = textArray.length; for (i = 0; i < len; i ++) {textArray [i] .addEventListener (MouseEvent.ROLL_OVER, onText); textArray [i] .addEventListener (MouseEvent.ROLL_OUT, onText); } Combo.addItem ({label: "--- Velg en leverandør ---", data: ""}); Var leverandører: Array = [["Alltel", "message.alltel.com"], ["AT & T", "txt.att.net"], ["Boost Mobile", "myboostmobile.com"], [ ,,,0],"Cricket Wireless", "sms.mycricket.com"], ["Nextel", "messaging.nextel.com"], ["Sprint", "messaging.sprintpcs.com"], ["T-Mobile", " tmomail.net "], [" Verizon "," vtext.com "], [" Virgin Mobile USA "," vmobl.com "]]; len = providers.length; for (i = 0; i < len; i ++) {combo.addItem ({label: leverandører [i] [0], data: leverandører [i] [1]}); } Var gruppe: RadioButtonGroup = new RadioButtonGroup ("ContactGroup"); group.addEventListener (Event.CHANGE, onChange); handleOffset (true); sender.addEventListener (MouseEvent.CLICK, onClick); attach.addEventListener (MouseEvent.CLICK, onAttach); handleAddy ();}

Vi har også satt opp radioknappene



Trinn 5: Håndtering av Attachment

Det første vi skal bekymre håndterer vedlegg.. Siden jeg er ved hjelp av Flash CS3, vil vi gjøre det feste den gammeldagse måten. Når 'fest' knappen klikkes, vil vi instantiate FileReference variabel som vi opprettet. En viktig ting å merke seg er at FileReference variabelen må være en global
variabel (dvs. ikke spesielt for bare én funksjon) for hendelser for å fyre riktig.

Når brukeren har valgt en fil å laste opp, vil vi gjøre fremdriftslinjen synlig og lytte etter "fremskritt" og "komplette" hendelser. Når 'komplett' event branner, deaktivere vi den "feste" -knappen, satt vedlegget variabelen til true og skjule fremdriftslinjen
privat funksjon onAttach (event: MouseEvent): void {file = new FileReference ();. file.addEventListener (Event.SELECT, onSelect); file.browse ([new Filefilter ("Images (* .jpg, * .jpeg, * .gif, * .png)", "* .jpg;. * jpeg,. * gif;. * png")]); } private funksjon onSelect (hendelse: Hendelse): void {pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); file.addEventListener (Event.COMPLETE, onUpload); file.upload (ny URLRequest ("upload.php"), "fil");} private funksjon onProgress (event: ProgressEvent): void {pBar.setProgress (int ((event.bytesLoaded /event.bytesTotal) * 100), 100);} private funksjon onUpload (hendelse: Hendelse): void {pBar.visible = false; attach.enabled = false; attachment = true;}



Trinn 6: The Last opp dokument

Slå over til PHP. Først oppretter du en ny PHP dokument og lagre det som "upload.php '. Nå opprette en katalog på webserveren din heter "temp". Dette vil være den mappen som vi bruker til å lagre opplastede fil. Vi vil tildele denne plasseringen til en PHP variabel kalt 'mappe'. Deretter bruker vi '$ _files' super global variabel for å få navnet på filen vi lastet opp. Deretter oppretter vi en variabel som lagrer den midlertidige navnet på filen vi nettopp lastet opp. Til slutt, flytter vi inn filen i vår "temp-katalogen. Du kan finne en god tutorial på å laste opp filer med PHP over på Nettuts +
. ≪? Php $ mappe = 'temp /'; $ file = $ _files ['file'] ['name']; $ temp = $ _files ['file'] ['tmp_name']; move_uploaded_file ($ temp, $ mappe $ fil.); >



Trinn 7:? The Message Document

Opprett en ny PHP dokument og lagre det som "message.php '. I denne filen, vil vi motta variablene fra Flash. Det første vi gjør er å bruke '$ _POST' super global variabel for å sette alle e-post feltene som "til" og "fra". Deretter setter vi vår "headers" variabel. I PHP, vi bruker '.' i stedet for "+" for å sette sammen. På vår "headers" variabel, vil du legge merke til ". = 'Som fungerer på samme måte som" + =' i Actionscript. Etter hver gang vi sette sammen vi legge to linje avkastning. Dette er viktig, og uten det vår epost kan mislykkes i å sende.

Til slutt, etter at alle våre overskrifter og felt er klar til å gå, vi kaller den "post" -funksjonen. Hvis posten er vellykket, sjekker vi for å se om det var en fil som er knyttet til e-post. Hvis 'file' variabelen er satt, så vi bare slette filen fra vår server med 'unlink' funksjon
. ≪? Php $ bool = $ _POST ['bool']; $ til = $ _POST [' til'] . '≪' . $ _POST ['ToAddy']. '>'; $ adresse = $ _POST ['email'], $ message = $ _POST ['melding'], $ emne = $ _POST ['emne']; $ name = $ _POST ['name']; $ fra = $ _POST ['fra']; $ headers = "Fra: $ fra < $ adresse > \\ r \\ n"; $ headers = "Return-Path: $ adresse \\ r \\ n";.. $ overskrifter = "Svar til: $ adresse \\ r \\ n";. $ headers = "X-Mailer: PHP". phpversion (). "\\ r \\ n"; $ headers = "MIME-Version: 1.0 \\ r \\ n"; //filvedlegg GOES HERE $ headers = "Content-type:.. text /plain; charset = utf-8 \\ r \\ n "; if (mail ($ til, $ emne, $ melding, $ headers)) {if (isset ($ fil)) {oppheve koblingen ($ fil); } Echo 1;} else {echo 0;} >



Trinn 8: Legge til vedlegg

Her er koden som vi bruker til å sende et vedlegg. Hvis du ønsker å inkludere denne typen funksjonalitet i programmet, og rett og slett sette inn denne koden der det står 'filvedlegg GOES HERE ". Det første vi gjør er å sjekke for å se om 'file' variable har blitt postet. Sjekk også vi å se om "bool" variabelen er "sann". Dette vil sjekke for å være sikker på at brukeren ikke prøver å sende et vedlegg som en tekstmelding. Selv om du kan sende filer som vedlegg til mobiltelefoner, maksimumsmålene er bare ca 640x480. Det ville ta litt ekstra logikk for å endre størrelsen på bildet og er ute av omfanget av denne Quick Tips. Føl deg fri til å prøve det ut selv, though!

Back on track, vil vi lage en "file 'variabel til fører til plasseringen av filen vi lastet opp. Også, etter å gjøre noen enkle strengen erstatter, sjekker vi filtypen. Til slutt, vi endrer vår "headers" variabel å inkludere filen samt all informasjon som er nødvendig for å feste den
if (isset ($ _ POST ['file']) &. &Amp; $ 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 ($ fil))); switch ($ ext) {case 'jpg': case 'jpeg': $ ext = 'image /jpeg'; gå i stykker; case 'gif': $ ext = 'image /gif'; gå i stykker; case 'png': $ ext = 'image /png'; gå i stykker; } $ 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"; $ headers = "\\ n".; $ headers. = $ vedlegg. "\\ r \\ n"; $ headers = "- $ mime_boundary \\ r \\ n";}



Trinn 9:. Tilbake i Flash

Når 'avsender' knappen klikkes, kaller vi den "onClick () ' funksjon. Vi utfører noen sjekke for å se om det er en e-post eller en tekstmelding at brukeren prøver å sende. Hvis det er en tekstmelding, vil vi formatere telefonnummer litt, sjekk for å se om brukeren har valgt en leverandør, og sørge for at nummeret er gyldig. Etter at vi har validert alle brukerens informasjon, vil vi laster du de message.php 'dokument, sende alle våre variabler til det og lytte til "komplett" event
privat funksjon 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, ""); } For (var i: int = 0; i < len; i ++) {if {var Errormessage (handleString (textArray [i] .text)!): String = "Vennligst skriv inn et" + textArray [i] .name.replace ("Tekst", ""); ExternalInterface.call ("alert", Errormessage); komme tilbake; }} If (emailRadio.selected) {if (handleEmail (emailText.text)) {ExternalInterface.call ("varsling", "Vennligst skriv inn en gyldig e-postadresse"); komme tilbake; }} Else {if (combo.selectedItem.data === "") {ExternalInterface.call ("varsling", "Vennligst velg en leverandør"); komme tilbake; } Else if {ExternalInterface.call ("varsling", "Vennligst velg en gyldig nummer") (handleNumber (addyText.text)!); komme tilbake; }} Var url: URLLoader = new URLLoader (); Var req: URLRequest = new URLRequest ("message.php"); Var vars: URLVariables = nye URLVariables (); req.method = URLRequestMethod.POST; if (vedlegg) {vars.file = file.name; vars.ext = file.type; } Vars.bool = emailRadio.selected; vars.subject = subjectText.text; vars.message = messageText.text; vars.email = emailText.text; vars.from = nameText.text; vars.to = toText.text; if (emailRadio.selected) {vars.toAddy = addyText.text; } Else {vars.toAddy = addyText.text + "@" + combo.selectedItem.data; } Req.data = vars; url.addEventListener (Event.COMPLETE, onComplete); url.load (req);}



Trinn 10: Arrangementet Handlers

Når "komplett" event er avfyrt, vil vi bare analysere heltall som PHP sender oss. Sammen med "komplett" event, nedenfor er resten av hendelsesbehandling funksjoner som brukes i dette prosjektet.

'onChange' funksjonen vil veksle kombinasjonsboksen synlighet samt kaller "handleAddy" -funksjonen. The 'onText' funksjon vil sette fokus på tekstfeltet når etiketten klikket - som i HTML. Til slutt vil den "onLabel 'funksjon håndtere utheving av tekstfeltet når musen beveger seg over det
privat funksjon onComplete (event: Aktivitet): void {var num. Int = parseInt (event.target.data); if (num) {ExternalInterface.call ("varsling", "Meldinga ble sendt"); } Else {ExternalInterface.call ("varsling", "Det oppstod en feil"); }} privat funksjon onChange (hendelse: Hendelse): void {switch (event.target.selection) {case emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Til e-post:"; handleOffset (false); gå i stykker; case textRadio: attachment = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "til nummer:"; handleOffset (true); gå i stykker; } HandleAddy ();} private funksjon onText (event: MouseEvent): void {switch (event.type) {case MouseEvent.ROLL_OVER: event.target.drawFocus (true); gå i stykker; case MouseEvent.ROLL_OUT: event.target.drawFocus (false); gå i stykker; }} privat funksjon onLabel (event: MouseEvent): void {var etikettnavn: String = event.currentTarget.name.replace ("Label", "tekst"); Var tf: UIComponent; if (etikett === "messageText") {tf = Tekstfelt (this.getChildByName (etikettnavn)); } Else {tf = TextInput (this.getChildByName (etikettnavn)); } Switch (event.type) {case MouseEvent.ROLL_OVER: tf.drawFocus (true); gå i stykker; case MouseEvent.ROLL_OUT: tf.drawFocus (false); gå i stykker; case MouseEvent.CLICK: tf.setFocus (); gå i stykker; }} privat funksjon onFocus (event: FocusEvent): void {event.target.text = "";}



Trinn 11: Resten av funksjoner

Dette er de siste funksjonene som vil håndtere sjekke tekstfeltene for å sørge for at de ikke tømmes samt håndtering forskyvningen skyldes valgknappen
privat funksjon handleOffset. (bool: Boolean): void {var ch: Number = combo.height + 10; bryteren (bool) {case sant: 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; gå i stykker; Ved falsk: 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; gå i stykker; (.! string.toLowerCase () søk (/[a-Z0-9] /g) = -1)}} privat funksjon handleString (string:: String) Boolean {if {return true; } Else {return false; }} privat funksjon handleEmail (string: String): Boolean {//intervall dette brukes til å sjekke om brukeren skrev inn en gyldig e-postadresse Var mø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; if (! pattern.exec (string) = null) {return true; } Else {return false; }} privat funksjon handleNumber (string: String): Boolean {if (string.search (/[0-9] /) === -1) {return false; } Else {//må du kanskje endre denne logikken avhengig av lengden på //mobiltelefonnumre i ditt land hvis (string.length < 11) {return false; } Else {return true; }} Return false;} private funksjon handleAddy (): void {addyText.addEventListener (FocusEvent.FOCUS_IN, onFocus); if (emailRadio.selected!) {addyLabel.text = "Til e-post:"; addyText.text = ""; } Else {addyLabel.text = "til nummer:"; addyText.text = "Starter med landskode"; }}



Konklusjon

I denne hurtig Tip, lært deg hvordan du bruker Flash og AS3 å sende ikke bare enkel tekstvariabler, men bilder også - og ikke bare via e-post, men også via SMS tekstmelding. Disse teknikkene kan brukes i en rekke forskjellige måter. Holde eksperimentere og husk å abonnere på Tuts + feed. Takk for lesing!