Create en kommentar Form med Flash, PHP, XML og MySQL
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil jeg vise deg hvordan du bruker Flash, PHP og MySQL sammen. Vi skal bygge en enkel kommentar form som tar oppføringer og lagrer dem i en database. Vi vil bruke PHP til å hente oppføringene og formatere kommentarer i XML form. La oss komme i gang
Trinn 1: Lag Flash File
Start opp Flash og opprette en ny Flash-fil (Actionscript 3.0). Opprett en ny mappe, og lagre filen i mappen som "commentForm.fla". Neste opprette en ny Actionscript-fil. Lagre filen i samme mappe som "commentForm.as"
Trinn 2:. Sette scenen
Åpne din nyopprettede Flash dokument, deretter i egenskapsvinduet, endre størrelsen på scenen til 960x400 piksler. Også i dokumentklassen tekstboksen, skriv inn "commentForm". Dette vil knytte den eksterne Actionscript-fil med vårt Flash dokument
Trinn 3:. Bakgrunnen
Velg rektangelverktøyet og trekke ut en retangle med et slag i alle størrelser. Velg hele rektangelet og åpne Juster-panelet ved å gå til Vindu > Juster. I Align panel, under "Match size", klikk på "Match bredde og høyde" -knappen. Dette vil skalere rektangelet til størrelsen på scenen. Fortsatt i Align panel, under "Align", klikk på "Juster venstre kant" og "Rett topp edge" knappene. Dette vil flytte rektangelet øverst til venstre på scenen.
Deretter velger du fylle del av rektangelet. I fargepanelet, velg lineær gradient som fyllfargen. Med rektangel fortsatt er valgt, velg Gradient Transform verktøyet og roter gradient 90 grader (pass på at den svarte siden vender mot bunnen). Under de graderte fargealternativer, gi den hvite delen en farge # F2F2F2. Deretter gir den svarte siden en farge # D9D9D9. Til slutt velger slaget, gir det en farge # 999999, og i egenskapsvinduet, gi den en størrelse på 2.
Til slutt, velge hele rektangelet og konvertere den til en MovieClip. Gå inn i Filters vinduet klikker du på pluss-ikonet og gi MovieClip en Glow. The Glow bør ha en 10 for Blur X og Blur Y, styrke på 33%, Quality of High, Color av svart og sørg for å sjekke indre gløden boksen. Rektangelet MovieClip skal ha en svak indre glød nå
Trinn 4:. Legge til komponenter
Velg tekstverktøyet. I egenskapsvinduet, velger du Dynamisk Tekst, sørg for at fargen er svart, font av "Arial", og skriftstørrelse 10. På et nytt lag, trekke ut en tekstboks som er 41.9px bred og en høyde på 15.2px. Gi tekstboksen en X posisjon på 18 og en Y posisjon på 6,3. Til slutt, gi tekstboksen en forekomst navnet "nameText".
Opprett en tekstboks på scenen. Denne tekstboksen vil ha en bredde på 246,9, en høyde på 17,4, en X-stilling av 18, en Y-posisjon på 22,9, og en forekomst navnet "navnefelt".
Nå opprette en Lag en annen (nesten der) tekstboks med en bredde på 246,9, høyde på 17,4, X 18, Y på 58,9, og forekomsten navnet "emailField". Igjen, opprette en tekstboks med en bredde på 55,5, høyde på 15,2, X 18, Y av 80,1 og eksempel navnet "commentText". Endelig Opprett en annen dynamisk tekstboks. Gi den en bredde på 421,1, en høyde på 211,4, X av 521,3, Y av 144,6, og forekomsten navnet "område". Velg alle fire tomme dynamiske tekstbokser, og i egenskapsvinduet, endre skriftstørrelsen til 12. Bare label tekstfelt bør ha en skriftstørrelse på 10. Velg tekstverktøyet på nytt. I panelet Egenskaper, endre type tilbake til Statisk, fargen er svart, font er "Arial", og skriftstørrelse er 10. Opprett en statisk tekstboks. Gi den en bredde på 5,2, bør høyden standard til 15,2, X av 520,5, Y på 11,1 og gi den en verdi på "Kommentarer". Deretter navigere til Components panelet. Dra en forekomst av listen komponent på scenen. Gi List komponent en bredde på 422,9, høyde på 100, X 520, Y på 27,8 og en forekomst navnet "list". Dra en kopi av Markerings komponent på scenen. Gi den en bredde på 100, høyde på 22, X av 280,3, Y av 57,4, forekomst navnet "nyhetsbrev", og i den Parametere panel, gir det en merkelappen "nyhetsbrev". Til slutt, opprette en mer dynamisk tekstfelt. Sørg for at den har en farge av svart, skriften er "Arial", og skriftstørrelsen er 10. Gi den en bredde på 128, høyde på 15,2, X av 356,9, Y av 367,6 og instans navnet "dyTex". Det neste steget er å lage grafikken under tekstboksene. Lag et nytt lag og flytte den under lag med tekstfeltene. Velg rektangelverktøyet. I egenskapsvinduet, gi den et strøk av 2. Kontroller at hjerneslag farge er #CCCCCC. Gi rektangelet et fyll av hvit. I avrundede hjørner boksen, gi den en verdi på 10. Tegn ut et rektangel som har en bredde på 466,9, en høyde på 260,9. Velg hele rektangelet og konvertere den til en MovieClip. Med MovieClip valgt, gå til kategorien Filter. Gi rektangelet en ny drop filter. Det nye filteret vil ha en 6 for Blur X og Blur Y, en styrke på 66%, en Quality of High, en vinkel på 90, en avstand på 1, en farge av svart, og merk av i Indre skygge. Til slutt, gi rektangelet MovieClip en X posisjon på 18 og en Y stilling 96,3. Neste trekke ut en firkant med de samme stilene brukt. Denne gangen gir rektangelet en bredde på 422,6, høyde på 214. konvertere den til en MovieClip. Deretter gi MovieClip en X på 520,5 og en Y av 143,3. Bruke samme filter som forrige rektangelet. Nå skal vi lage en firkant. Denne gangen gir de avrundede hjørner en verdi på 5; la alle de andre parameterne det samme. Tegn et rektangel som har en bredde på 246,9, og en høyde på 17,4. Gjør det til en MovieClip og gi den en X verdi på 18 og en Y på 22,8. Deretter går du til kategorien Filter og bruke en drop filter. Gi filteret en Blur X og Blur Y verdi på 4, styrke på 66%, Quality of High, Color av svart, Vinkel 90, Avstand på 1, og merk av i Indre skygge. Velg MovieClip og kopiere det. Gi neste MovieClip en X på 18, og Y på 58,9 Ta rektangelverktøyet en gang til. Sørg for at det fortsatt er en verdi på 5 for de avrundede hjørner og tegne et rektangel som er 99 bred og har en høyde på 20,6. Konvertere denne formen inn i en knapp. Inn i redigeringsmodus på knappen og legge et nytt lag. Grab Tekst-verktøyet og lage en statisk tekstboks med en verdi på "Send". Gi den nye knappen en X på 18,3, Y av 367,6, og en forekomst navnet "knapp". Til slutt velger linjeverktøyet. Gi det et slag størrelsen på en og en farge # 999999. Tegn en linje på scenen. Velge linjen og gi den en høyde av 327, X i 502,4, og Y 28.2. Duplisere linjen og flytte den over én piksel til høyre og gi den en farge hvit. Søknaden er fullt utviklet nå Gå over til Actionscript-fil som ble opprettet i begynnelsen av denne opplæringen. Lim denne koden inn i den Her er import uttalelser om at vi kommer til å bruke. Lime dem inn under pakken erklæringen og over klassen erklæringen. Også lister vi ut de variablene vi skal bruke Her setter vi hendelses lyttere og tekstbryting for de store tekstfeltene. Også vi kaller onComplete og onInput funksjoner. Den onComplete funksjonen vil laste XML fra databasen. På denne måten listen komponent er befolket når programmet starter. Med onInput funksjon, vi setter dyText tekstfeltet med riktig verdi onInput funksjonen vil oppdatere tekstfeltet nederst i søknaden vår. Det tar rett og slett mengden av tegn inngått kommentarskjemaet og trekker den totale mengden tillatt. Vi bruker både "KEY_UP" og "KEY_DOWN" hendelser fordi vi ønsker at feltet skal oppdatere selv når noen holder en viss tasten nede. Også vi sjekke for å se om den kommentaren tekstfeltet er full. Hvis det er det, slår vi teksten rød Dette er funksjonen som vil håndtere "KLIKK" event. Her er der vi passerer variablene over til PHP, og lytt etter "COMPLETE" event. Men før vi sende noe over til PHP, må vi sjekke og sørge for at tekstfeltene ikke er tomme. Hvis de er, så vi endre sin etikett tekstfeltet til rødt Her er de to funksjonene som brukes til å validere våre tekstfelt. Den validateEmail funksjonen tar tekstfeltet og kjører et vanlig uttrykk på den for å bekrefte e-posten. Den validateString funksjonen vil strippe alle HTML-koder som kan settes inn og sørger for at det er minst tekst i dette feltet Her er en SQL-kode for å opprette tabellen på databasen Den første delen av vår PHP er å skape vår database tilkobling. Kopier denne koden inn i en ny php fil. Lagre filen som "require.php" Med databasefilen lagres, kan vi da få tilgang til det i vårt tilbakemeldingsskjema. Den "require_once" linjen vil laste databasetilkoblingen filen. Vi har noen ekstra sikkerhet på denne måten. Vi sjekker deretter å se om "send" variabelen er tom. Vi sendte "send" fra Flash når vi klikket på knappen for å sende. Hvis variabelen ikke er tom, fyller vi våre variabler på PHP side. Etter at vi rydde verdiene, setter vi dem inn i databasen. Lagre denne filen som "leave.php" i samme katalog som din "require.php" file Her er hvor vi rydde verdiene å sette inn i vår database. Vi unnslippe farlige innganger, så vi strippe alle html koder ut av verdien. Så, bare i tilfelle noe gjort det gjennom, desinfisere vi verdien Dette er funksjonen som vi bruker til å sende e-post ut. For dette eksempelet, jeg "m bruke" PHPMailer ". Du kan laste ned kilde her. Dette er en veldig enkel klasse å jobbe med. Her trenger vi klassen som vi gjorde med vår database tilkobling. Vi forteller PHPMailer at vi sender en HTML-e-post, og gi det til og fra verdier samt HTML strengen. Du vil merke i "AddAddress" metoden, passerer vi e-post og navn verdier. Den siste funksjonen er HTML-innholdet. Det kan justeres til si hva du vil Denne funksjonen er bare kalles hvis "nyhetsbrev" boksen klikkes Åpne en tom PHP-fil. Lagre dette som "comments.php". Her bruker vi vår "require.php" filen på nytt, så vi utføre en enkel MySQL spørring. Det velger alle verdier fra databasen. Vi tar alle verdiene tilbake og ekko ut XML. Først sender vi overskriften, deretter ekko ut begynnelsen deler av XML. Etter det vi går inn i en stund loop. Dette vil delvis vil ekko ut alle våre kommentarer, e-postadresser og navn. Når mens loop er over, vi lukker XML. Dette er hva vi vil være lasting tilbake i Flash Her er funksjonen som laster etter at PHP har satt våre kommentarer i databasen. Vi setter alle tekstfeltene tilbake til standardtilstanden. Deretter legger vi den XML fra "comments.php" file Dette er funksjonen for når XML er lastet. Vi tar XML fra databasen, sortere gjennom det i en loop, deretter legge objektene i listen komponent. Vi setter fokus på listen til det siste elementet i loop, som er den siste kommentaren Til slutt, vi kommer til resten av funksjonene for å gjøre programmet arbeidet riktig. Bare i tilfelle det er en feil på serveren, vi lytter til "IOErrorEvent". Hvis serveren er nede, vil Flash kalle en javascript varsling ved hjelp av "ExternalInterface" class. Den "onChange" funksjonen kalles hver gang brukeren velger en annen liste element. Det setter tekstfeltet under listen til tilsvarende kommentar. Den "onFocus" -funksjonen bare snur tekstfeltet tildelt "TF" variabler tilbake til svart Det er mange forskjellige måter å gjøre Flash, PHP og MySQL fungerer sammen. Når du får taket på det, er det ingen grenser for hva du kan gjøre. De Tuts + nettstedene har en mengde nyttig informasjon der ute, så ikke glem å melde seg for hver og en av sine feeds. Takk!
tekstboks med en bredde på 41,9, høyde på 15,2, X 18, Y på 42,4, og forekomsten navnet "emailText".
, gjør en mer tekstboksen. Gi den en bredde på 466,9, høyde på 260,9, X 18, Y av 96,3 en forekomst navnet "commentField", og sett Maximum tegn feltet til 1000. I tekstboksen med navnet "nameText", gir det en verdi for "Name". Deretter velger du "emailText", og gi den en verdi på "E-post". Til slutt velger du "commentText" tekstboksen, og gi den en verdi på "kommentar". Vi kommer til å endre teksten fargen på disse tekstboksene dynamisk.
Trinn 5: Legge komponent bakgrunner
Trinn 6:. Siste hånd
Trinn 7:. Dokument Class Skeleton
pakke {import flash.display.Sprite.; public class commentForm strekker Sprite {offentlig funksjon commentForm () {}}}
Trinn 8: De Importen
pakke {import flash.display.Loader.; import flash.display.MovieClip; import flash.display.SimpleButton; import flash.display.Sprite; import flash.events.Event; import flash.events.FocusEvent; import flash.events.IOErrorEvent; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.external.ExternalInterface; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.TextField; public class commentForm strekker Sprite {private Var tf: Textfield; private static konst URL: String = "din_server"; offentlig funksjon commentForm () {}}}
Trinn 9: Init Funksjonen
offentlig funksjon commentForm () {init ().; } Private funksjon init (): void {commentField.addEventListener (FocusEvent.FOCUS_IN, onFocus); emailField.addEventListener (FocusEvent.FOCUS_IN, onFocus); nameField.addEventListener (FocusEvent.FOCUS_IN, onFocus); commentField.addEventListener (KeyboardEvent.KEY_DOWN, onInput); commentField.addEventListener (KeyboardEvent.KEY_UP, onInput); button.addEventListener (MouseEvent.CLICK, onClick); onComplete (null); onInput (null); commentField.wordWrap = true; area.wordWrap = true; }
Trinn 10: onInput Funksjon
privat funksjon onInput (event: KeyboardEvent):. Void {dyText.text = String (commentField.maxChars - commentField.length) + "tegn igjen"; if (dyText.text == "0 tegn igjen") {dyText.textColor = 0xff0000; } Else {dyText.textColor = 0x000000; }}
Trinn 11: Håndtering av klikke
privat funksjon onClick (event: MouseEvent):. Void {button.focusRect = false; stage.focus = knappen; Var navn: String = nameField.text; Var epost: String = emailField.text.toLowerCase (); Var kommentar: String = commentField.text; if (validateString (navn)) {if (validateEmail (e)) {if (validateString (kommentar)) {var url: URLLoader = new URLLoader (); Var req: URLRequest = new URLRequest (URL + "/leave.php"); Var vars: URLVariables = nye URLVariables (); req.method = URLRequestMethod.POST; vars.submit = true; vars.name = navn; vars.email = e-post; vars.comment = kommentar; if (newsletter.selected) {vars.newsletter = true; } Else {vars.newsletter = false; } Req.data = vars; url.addEventListener (Event.COMPLETE, onComplete); url.addEventListener (IOErrorEvent.IO_ERROR, onError); url.load (req); } Else {commentText.textColor = 0xff0000; tf = commentText; }} Else {emailText.textColor = 0xff0000; tf = emailText; }} Else {nameText.textColor = 0xff0000; tf = nameText; }}
Trinn 12: Validere tekstfelter
privat funksjon validateEmail. (String: String): Boolean {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 validateString (string: String): Boolean {var bool: Boolean; Var mønster: RegExp = /< \\ /\\ w + ((\\ s + (\\ w | \\ w [\\ w -] * \\ w) (\\ s * = \\ s * (:?? ".? * \\" \\ ".? *" | | [^ "\\" > \\ r] +))) + \\ s * | \\ s *) \\ />? /GI; string = string.replace (mønster, ""); Var pattern2: RegExp = /[a-za-Z0-9] /g; if (string.search (pattern2) == -1) {bool = false; } Else {bool = true; } Returnere bool; }
Trinn 13: SQL-kode
CREATE TABLE `YOUR_DATABASE`.`comments` (` id` INT NOT NULL AUTO_INCREMENT PRIMÆR. KEY, `name` VARCHAR (40) NOT NULL,` email` VARCHAR (40) NOT NULL, `comment` VARCHAR (1200) NOT NULL) MOTOR = MyISAM
Trinn 14: Database Connection
. ≪? Php $ username = "brukernavnet_ditt"; $ password = "ditt_passord"; $ hostname = "YOUR_HOST"; $ dbhandle = mysql_connect ($ hostname, $ brukernavn, $ passord) or die ("Kan ikke koble til MySQL"); $ valgt = mysql_select_db ("YOUR_DATABASE", $ dbhandle) or die ("Kunne ikke velge eksempler");? >
Trinn 15: Sette inn kommentarer i databasen
. ≪? Phprequire_once ("require.php");! If (tom ($ _ POST ["send"]) ) {$ name = $ _POST ["navn"]; $ email = $ _POST ["email"]; $ kommentar = $ _POST ["kommentar"]; $ nyhetsbrev = $ _POST ["nyhetsbrev"]; $ name = validateString ($ navn); $ email = validateString ($ email); $ email = filter_var ($ epost, FILTER_SANITIZE_EMAIL); $ kommentar = validateString ($ kommentar); if ($ nyhetsbrev) {if (handleEmail ($ navn, $ email)) {echo 1; } Else {echo 0; }} $ Query = "INSERT INTO kommentarer VERDIER (" "," $ name "," $ e "," $ comment ")"; mysql_query ($ query) or die (mysql_error ()); ekko 1; mysql_close ($ dbhandle);} else {echo 0;} >
Trinn 16: Rengjøring av verdier
fungere validateString ($ string) {$ string = mysql_real_escape_string ($ string).; $ string = strip_tags ($ string); $ string = filter_var ($ string, FILTER_SANITIZE_STRING); returnere $ string;}
Trinn 17: Håndtering av e-post
funksjon handleEmail ($ navn, $ email) {require ("PHPMailer /class.phpmailer.php");.. $ mail = new PHPMailer (); $ post- > Fra = "YOUR_FROM_ADDRESS ([email protected])"; $ post- > FromName = "YOUR_FROM NAME (webmaster)"; $ post- > AddReplyTo ("YOUR_REPLY_TO_NAME (no-reply @ example.com "); $ post- > AddAddress ($ epost, $ navn); $ post- > isHTML (true); $ post- > Subject =" YOUR_SUBJECT "; $ post- > Body = emailContent ( $ navn); if ($ post- >! Send ()) {return false;} else {return true; }} funksjon emailContent ($ navn) {$ emailString = "< html > \\ n"; $ emailString = "< head > \\ n."; $ emailString =. "< meta http-equiv = \\" Content-Type \\ "content = \\" text /html; charset = utf-8 \\ "/> \\ n"; $ emailString = "< title > Test email < /title > \\ n."; $ emailString =. "< /head > \\ n"; $ emailString =. "< body > \\ n"; $ emailString =. "< table width = \\" 600 \\ "border = \\" 0 \\ "cellpadding = \\" 0 \\ "cellspacing = \\" 0 \\ "> \\ n"; $ emailString = "< tr > \\ n."; $ emailString =. "< td width = \\" 100% \\ "height = \\" 30 \\ "bgcolor = \\" # 003366 \\ "align = \\" sentrum \\ "> < font face = \\" Arial \\ " color = \\ "# FFFFFF \\" style = \\ "font-size: 15px; font-weight: bold; \\ "> NYHETSBREV HEADER < /font > < /td > \\ n"; $ emailString =. "< /tr > \\ n"; $ emailString = "< tr > \\ n."; . $ emailString = "< td width = \\" 90% \\ "align = \\" left \\ "style = \\" padding: 15px; \\ "> < font face = \\" Arial \\ "style = \\" font -size: 12px; \\ "> < b > Kjære $ name < /b > < br /> < b > GRATULERER < /b > Du har nettopp blitt lagt til vår e-post samfunnet ... men . egentlig ikke < /font > < /td > \\ n "; $ emailString =. "< /tr > \\ n"; $ emailString = "< tr > \\ n."; $ emailString =. "< td width = \\" 100% \\ "height = \\" 30 \\ "bgcolor = \\" # 003366 \\ "align = \\" sentrum \\ "> < font face = \\" Arial \\ " color = \\ "# FFFFFF \\" style = \\ "font-size: 15px; font-weight: bold; \\ "> NYHETSBREV FOOTER < /font > < /td > \\ n"; $ emailString =. "< /tr > \\ n"; $ emailString =. "< /table > \\ n"; $ emailString =. "< /body > \\ n"; $ emailString = "< /html >."; Avkastningen $ emailString;}
Trinn 18: Hente de Kommentarer
. ≪? Phprequire_once ("require.php"); $ resultat = mysql_query ("SELECT * FROM` comments` "); if ($ resultat) {header (" Content-Type: text /xml "); echo "<? xml version = \\" 1,0 \\ "encoding = \\" utf-8 \\ ">? \\ n"; echo "< kommentarer \\ n >"; while ($ row = mysql_fetch_array ($ resultat)) {echo "< kommentere \\ n >"; echo "< navn >" . $ row ["navn"]. "< /navn > \\ n"; echo "< e >" . $ row ["e"]. "< /e > \\ n"; echo "< beskrivelse >" . $ row ["kommentere"]. "< /beskrivelse > \\ n"; echo "< /kommentar \\ n >"; } Echo "< /kommentarer >";} >
Trinn 19: Tilbake i Flash
privat funksjon onComplete (hendelse: Hendelse): void {if (event = null) {nameField.text = "";. emailField.text = ""; commentField.text = ""; onInput (null); newsletter.selected = false; } Var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, xmlLoaded); url.addEventListener (IOErrorEvent.IO_ERROR, onError); url.load (ny URLRequest (URL + "/comments.php")); }
Trinn 20: analysere XML
privat funksjon xmlLoaded (hendelse: Hendelse):. Void {list.removeAll (); Var xml: XML = new XML (event.target.data); Var oppføring: XMLList = xml..comment; Var len: int = listing.length (); for (var i: int; i < len, jeg ++) {var objekt: Object = liste [i]; list.addItem ({label: object.name, data: objekt}); } List.addEventListener (Event.CHANGE, onChange); list.selectedIndex = len-1; area.htmlText = notering [Len-1] .description; list.scrollToIndex (Len-1); }
Trinn 21: Nesten ferdig
privat funksjon onError (event: IOErrorEvent). {ExternalInterface.call ("varsling", "Server er utilgjengelig"); } Private funksjon onChange (hendelse: Hendelse): void {var objekt: Object = event.target.selectedItem.data; area.htmlText = object.description; } Private funksjon onFocus (event: FocusEvent): void {if (! Tf = null) {tf.textColor = 0x000000; }}
Konklusjon