I denne Quick Tip vil jeg vise deg hvordan du bygger et kontaktskjema ved hjelp av PHP og ActionScript 3. Vi lærer hvordan du kan passere variabler fra Flash til PHP og varsle eieren ved å sende enten en e-post eller en SMS-melding.
Trinn 1: Sette opp dokumentet
Det første du må gjøre er å laste ned kildefilene for denne opplæringen. Siden denne opplæringen er en rask tips, vil jeg hoppe over oppsettstrinnene. Når du har lastet ned filene, åpner du filen "contactForm.fla".
SWF-oppsettet ser slik ut:
Trinn 2: Dokumentklassen
Opprett en ny 'ActionScript' -fil og lagre den i samme mappe som 'contactForm.fla.' Gi filen et navn på 'contatForm.as'. Deretter kobler du Flash-filen og ActionScript-filen sammen i Egenskaper-panelet. For en mer grundig titt på hvordan du konfigurerer Dokument-klassen, sjekk ut denne hurtigveiledningen.
Trinn 3: Importen
Her er de importerte utsagnene som vi skal bruke for denne filen. Også, vil vi opprette to globale variabler. Den ene er å bruke for et filvedlegg, og den andre er å holde styr på om vi skal bruke den filen eller ikke.
Den første funksjonen vi kaller er i det(). Innenfor funksjonen setter vi opp etikettene for våre tekstfelt. Vi lager også en rekke mobiltelefonleverandører. Siden jeg er lokalisert i USA, bruker jeg bare amerikanske leverandører. Sjekk ut denne artikkelen på Wikipedia som vil hjelpe deg med mobilleverandørene i ditt land.
privat funksjon init (): void var labelArray: Array = [[navnLabel, "Fra navn:"], [subjectLabel, "Subject:"], [messageLabel, "Message:"], [emailLabel, "From email:" ], [toLabel, "For å nevne:"], [addyLabel, "To email:"]]; 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 jeg: int = 0; i
Vi stiller også opp radioknappene.
Trinn 5: Håndtering av vedlegget
Det første vi vil bekymre oss om, er å håndtere vedlegget. Siden jeg bruker Flash CS3, gjør vi vedlegget den gammeldags måten. Når "vedlegg" knappen klikkes, vil vi instantiere FileReference variabel som vi opprettet. En viktig ting å merke seg er at FileReference variabel må være a global variabel (dvs. ikke spesifikk for bare en funksjon) for hendelser som brann riktig.
Når brukeren har valgt en fil som skal lastes opp, vil vi gjøre fremdriftslinjen synlig og lytte etter 'fremgang' og 'fullstendig' hendelser. Når "komplette" hendelsen brenner, deaktiverer vi "vedlegg" -knappen, setter vedleggsvariabelen til ekte og skjul fremdriftslinjen.
Bytter til PHP. Først oppretter du et nytt PHP-dokument og lagrer det som "upload.php". Nå opprett en katalog på din webserver kalt 'temp'. Dette blir mappen vi bruker til å lagre den opplastede filen. Vi vil tildele denne plasseringen til en PHP-variabel kalt "mappe". Deretter bruker vi super global variabel '$ _FILES' for å få navnet på filen vi lastet opp. Deretter oppretter vi en variabel som lagrer det midlertidige navnet på filen vi nettopp lastet opp. Til slutt flytter vi filen til vår "temp" -katalog. Du kan finne en flott opplæring om opplasting av filer med PHP over på Nettuts+.
Trinn 7: Meldingsdokumentet
Opprett et nytt 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 globale variabelen til å angi alle e-postfeltene som 'til' og 'fra'. Deretter setter vi vår "headers" -variabel. I PHP bruker vi '.' i stedet for '+' for å sammenkoble. På variabelen 'headers' vil du legge merke til '. =' Som fungerer det samme som '+ =' i ActionScript. Etter hver gang vi sammenkaller legger vi til to linjevendinger. Dette er viktig, og uten det kan e-posten vår ikke sende.
Til slutt, etter at alle våre overskrifter og felt er klare til å gå, kaller vi postfunksjonen. Hvis posten er vellykket, kontrollerer vi for å se om det var en fil knyttet til e-posten. Hvis "fil" -variabelen er satt, sletter vi bare den filen fra vår server ved hjelp av funksjonen "unlink".
'; $ address = $ _POST ['email']; $ message = $ _POST ['message']; $ subject = $ _POST ['subject']; $ name = $ _POST ['name']; $ fra = $ _POST ['fra']; $ headers = "Fra: $ fra <$address>\ r \ n "; $ headers. =" Return-path: $ address \ r \ n "; $ headers. =" Svar til: $ adresse \ r \ n "; $ headers. =" X-Mailer: PHP ". phpversion ()." \ r \ n "; $ headers. =" MIME-Versjon: 1.0 \ r \ n "; // FILBEHANDLING GJØR HER $ headers. =" Content Type: Text / plain; charset = utf-8 \ r \ n "; hvis (post ($ til, $ emne, $ melding, $ overskrifter)) if (isset ($ file)) unlink ($ file); echo 1; else echo 0;?>
Trinn 8: Legge til vedlegget
Her er koden vi bruker til å sende et vedlegg. Hvis du vil inkludere denne typen funksjonalitet i søknaden din, kan du bare sette inn denne koden der det står "FILE ATTACHMENT GOES HERE". Det første vi gjør er å se om fil-variabelen er lagt ut. Vi sjekker også for å se om "bool" -variabelen er "ekte". Dette kontrollerer at brukeren ikke prøver å sende et vedlegg som en tekstmelding. Selv om du kan sende filer som vedlegg til mobiltelefoner, er de maksimale dimensjonene bare omtrent 640x480. Det ville ta litt ekstra logikk for å endre størrelsen på bildet og er utenfor omfanget av denne raske tipsen. Vær så snill å prøve det selv selv!
Tilbake på sporet vil vi opprette en "fil" -variabel som fører til plasseringen av filen vi lastet opp. Også, etter å ha gjort noen enkle strengskift, sjekker vi filtypen. Endelig endrer vi vår "headers" -variabel for å inkludere filen, så vel som all informasjon som trengs for å feste den.
hvis (isset ($ _ POST ['fil']) && $ bool === 'true') $ file = 'temp /'. $ _POST [ 'fil']; $ ext = $ _POST ['ext']; $ name = str_replace ($ ext, ", $ _POST ['fil']); $ ext = str_replace ('.', ', $ ext); $ vedlegg = chunk_split (base64_encode (file_get_contents ($ file))); bytte ($ ext) case 'jpg': case 'jpeg': $ ext = 'image / jpeg'; gå i stykker; case 'gif': $ ext = 'image / gif'; gå i stykker; sak 'png': $ ext = 'image / png'; gå i stykker; $ mime_boundary = md5 (tid ()); $ headers. = "Content-Type: multipart / mixed; boundary = \" $ mime_boundary \ "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; $ headers. = "Innholdstype: $ ext; name = \" ". $ navn." \ "\ r \ n"; $ headers. = "Content-Transfer-Encoding: base64 \ r \ n"; $ headers. = "Content-Disposition: vedlegg; filnavn = \" ". $ _POST ['fil']." \ "\ 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 funksjonen 'onClick ()'. Vi utfører noen kontroller for å se om det er en e-post eller en tekstmelding som brukeren prøver å sende. Hvis det er en tekstmelding, formaterer vi telefonnummeret litt, sjekk for å se om brukeren har valgt en leverandør, og sørg for at nummeret er gyldig. Etter at vi har validert all brukerens informasjon, laster vi inn 'message.php'-dokumentet, sender alle våre variabler til det og lytter etter' fullstendig 'event.
privat funksjon onClick (event: MouseEvent): void var textArray: Array = [nameText, messageText, subjectText]; var len: int = textArray.length; hvis (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, ""); for (var i: int = 0; i
Trinn 10: Event Handlers
Når "komplett" hendelsen blir sparket, vil vi bare tolke heltalet som PHP sender oss. Sammen med "komplett" arrangementet, er resten av hendelseshandlerfunksjonene som brukes i dette prosjektet.
Funksjonen "onChange" vil bytte til kombinasjonsboksen sikt og ringe til 'handleAddy' -funksjonen. Funksjonen 'onText' vil sette fokus på tekstfeltet når etiketten klikkes - som i HTML. Endelig vil "onLabel" -funksjonen håndtere utheving av tekstfeltet når musen beveger seg over den.
privat funksjon onComplete (event: Event): void var num: int = parseInt (event.target.data); hvis (num) ExternalInterface.call ("alert", "Melding ble sendt"); else ExternalInterface.call ("alert", "Det oppstod en feil"); privat funksjon onChange (event: Event): void switch (event.target.selection) tilfelle emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Til e-post:"; handleOffset (false); gå i stykker; case textRadio: vedlegg = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Til nummer:"; handleOffset (true); gå i stykker; handleAddy (); privat funksjon onText (event: MouseEvent): void switch (event.type) tilfelle MouseEvent.ROLL_OVER: event.target.drawFocus (true); gå i stykker; tilfelle MouseEvent.ROLL_OUT: event.target.drawFocus (false); gå i stykker; privat funksjon onLabel (event: MouseEvent): void var labelName: String = event.currentTarget.name.replace ("Label", "Text"); var tf: UIComponent; hvis (labelName === "messageText") tf = TextArea (this.getChildByName (labelName)); else tf = TextInput (this.getChildByName (labelName)); bytt (event.type) tilfelle MouseEvent.ROLL_OVER: tf.drawFocus (true); gå i stykker; tilfelle MouseEvent.ROLL_OUT: tf.drawFocus (false); gå i stykker; tilfelle MouseEvent.CLICK: tf.setFocus (); gå i stykker; privat funksjon onFocus (event: FocusEvent): void event.target.text = "";
Trinn 11: Resten av funksjonene
Dette er de endelige funksjonene som skal håndtere å sjekke tekstfeltene for å sikre at de ikke er tomme, samt å håndtere kompensasjonen forårsaket av valg av valgknappen.
privat funksjon handleOffset (bool: Boolean): void var ch: Number = combo.height + 10; bytt (bool) tilfelle 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; tilfelle falskt: 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; privat funksjon handleString (streng: String): Boolsk if (string.toLowerCase (). søk (/ [a-z0-9] / g)! = -1) return true; ellers return false; privatfunksjon handleEmail (streng: streng): Boolsk // denne RegExp 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; hvis (pattern.exec (streng)! = null) return true; ellers return false; privatfunksjon handleNumber (streng: String): Boolsk if (string.search (/ [0-9] /) === -1) return false; ellers // 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 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";
Konklusjon
I denne Quick Tip lærte du hvordan du bruker Flash og AS3 til å sende ikke bare enkle tekstvariabler, men også bilder - og ikke bare via e-post, men også via SMS-tekstmelding. Disse teknikkene kan brukes på flere måter. Fortsett å eksperimentere og husk å abonnere på Tuts + feed. Takk for at du leste!
Share
Accentsconagua
