Share
În acest tutorial, vă voi arăta cum să folosiți împreună Flash, PHP și MySQL. Vom construi un simplu formular de comentarii care va face intrări și le va depozita într-o bază de date. Vom folosi PHP pentru a prelua intrările și pentru a formata comentariile în formă XML. Haide să mergem!
Porniți Flash și creați un nou fișier Flash (ActionScript 3.0). Creați un dosar nou și salvați fișierul în director ca "commentForm.fla". Apoi creați un nou fișier ActionScript. Salvați fișierul în același director ca "commentForm.as".
Deschideți noul document Flash creat, apoi în panoul proprietăților, modificați dimensiunea fazei la 960x400 pixeli. De asemenea, în caseta text din clasa Document, tastați "commentForm". Aceasta va lega fișierul ActionScript extern cu documentul nostru Flash.
Selectați instrumentul dreptunghi și extrageți o retușă cu un curs de orice dimensiune. Selectați întregul dreptunghi și deschideți panoul Aliniere accesând fereastra> Aliniere. În panoul Align, sub "Match size", faceți clic pe butonul "Lățime și înălțime de potrivire". Aceasta va scala dreptunghiul la mărimea scenei. În panoul Aliniere, sub "Aliniere", faceți clic pe butoanele "Aliniați marginea stângă" și "Aliniați marginea superioară". Aceasta va muta dreptunghiul în partea stângă sus a scenei.
Apoi, selectați porțiunea de umplere a dreptunghiului. În panoul Culoare, selectați gradientul linear ca culoare de umplere. Cu dreptunghiul selectat, selectați instrumentul Transformare gradient și rotiți gradientul la 90 de grade (asigurați-vă că partea neagră este îndreptată spre partea de jos). Sub opțiunile culorii gradientului, dați părții albe o culoare de # F2F2F2. Apoi, dați părții negre o culoare de # D9D9D9. În cele din urmă, selectați cursorul, dați-i o culoare de # 999999, iar în panoul cu proprietăți dați-i o dimensiune de 2.
În cele din urmă, selectați întregul dreptunghi și convertiți-l într-un movieclip. Du-te în fereastra Filtre, faceți clic pe pictograma plus și dați moviectlip-ului o strălucire. Glow ar trebui să aibă un 10 pentru Blur X și Blur Y, Forța de 33%, Calitatea de înaltă, Culoarea negru și asigurați-vă că pentru a verifica caseta de strălucire interioară. Dreptunghiul movieclip ar trebui să aibă o strălucire interioară ușoară acum.
Selectați instrumentul Text. În panoul cu proprietăți, selectați textul dinamic, asigurați-vă că culoarea este negru, fontul "Arial" și dimensiunea fontului de 10. Pe un nou strat, trageți o casetă de text cu lățimea de 41,9px și o înălțime de 15,2px. Dați casetei text o poziție X de 18 și o poziție Y de 6.3. În cele din urmă, dați caseta de text numele instanței "nameText".
Creați o altă casetă de text pe scenă. Această casetă de text va avea o lățime de 246,9, o înălțime de 17,4, o poziție X de 18, o poziție Y de 22,9 și un nume de instanță a "nameField".
Acum creați o alta caseta de text cu o lățime de 41,9, înălțimea de 15,2, X de 18, Y de 42,4 și numele instanței "emailText".
Faceți o altă casetă de text (aproape de acolo) cu o lățime de 246,9, înălțime de 17,4, X de 18, Y de 58,9 și nume de exemplu "emailField".
Încă o dată, creați o casetă de text cu o lățime de 55,5, înălțimea de 15,2, X de 18, Y de 80,1 și numele de instanță a "commentText".
In cele din urma, faceți încă o casetă de text. Dați o lățime de 466,9, înălțime de 260,9, X de 18, Y de 96,3 un nume de instanță a "commentField" și setați câmpul Caractere maxim la 1000. În caseta de text cu numele "nameText", dați-i o valoare de "Nume". Apoi, selectați "emailText" și dați-i valoarea "Email". În cele din urmă, selectați caseta de text "commentText" și îi dați o valoare "Comentariu". Vom modifica dinamic culoarea textului acestor casete text.
Creați o altă casetă de text dinamică. Dați acesteia o lățime de 421,1, o înălțime de 211,4, o valoare de 521,3, o valoare de 144,6 și o denumire de "zonă". Selectați toate cele patru casete text dinamice goale, iar în panoul cu proprietăți schimbați dimensiunea fontului la 12. Numai câmpurile pentru textul etichetei trebuie să aibă dimensiunea fontului de 10. Selectați din nou instrumentul de text. În panoul Proprietăți, schimbați tipul înapoi la Static, culoarea este neagră, fontul este "Arial", iar dimensiunea fontului este 10. Creați o casetă de text statică. Dați-l o lățime de 5,2, înălțimea ar trebui să fie implicit la 15,2, X de 520,5, Y de 11,1 și să-i dea o valoare de "Comentarii".
Apoi, navigați la panoul Components. Glisați o instanță a componentei Listă pe scenă. Dați componentei listei o lățime de 422,9, înălțimea de 100, X de 520, Y de 27,8 și un nume de instanță a "listei".
Glisați o copie a componentei Checkbox pe scenă. Dați-i o lățime de 100, înălțimea de 22, X de 280,3, Y de 57,4, denumirea instanței de "newsletter" și, în panoul Parameters, îi dați o etichetă "Newsletter". În cele din urmă, creați un câmp de text dinamic. Asigurați-vă că are o culoare negru, fontul este "Arial", iar dimensiunea fontului este 10. Dați-i o lățime de 128, înălțimea de 15,2, X de 356,9, Y de 367,6 și numele de instanță a "dyTex".
Următorul pas este crearea graficii sub casetele de text. Creați un nou strat și mutați-l sub stratul cu câmpurile de text. Selectați instrumentul dreptunghi. În panoul cu proprietăți, dați-i o cursă de 2. Asigurați-vă că culoarea cursei este #CCCCCC. Dați dreptunghiului o umplutură de culoare albă. În caseta cu colțuri rotunjite, dați-le o valoare de 10.
Desenați un dreptunghi care are o lățime de 466,9, o înălțime de 260,9. Selectați întregul dreptunghi și convertiți-l într-un movieclip. Cu ajutorul selectorului de filme, accesați fila Filtre. Dați dreptunghiului un filtru Dropshadow nou. Noul filtru va avea o valoare de 6 pentru Blur X și Blur Y, o rezistență de 66%, o calitate ridicată, un unghi de 90, o distanță de 1, o culoare de culoare neagră și bifați caseta de lângă umbra interioară. În final, dă dreptunghiului movieclip o poziție X de 18 și o poziție Y de 96.3.
Apoi trageți un alt dreptunghi cu aceleași stiluri aplicate. De data aceasta, dați dreptunghiului o lățime de 422,6, înălțimea de 214. Conversați-l într-un movieclip. Apoi dați movieclip un X de 520.5 și un Y de 143.3. Aplicați același filtru ca și dreptunghiul anterior.
Acum vom crea un alt dreptunghi. Acest timp dau colturilor rotunjite o valoare de 5; lăsați toți ceilalți parametri la fel. Desenați un dreptunghi care are o lățime de 246,9 și o înălțime de 17,4. Transformați-l într-un movieclip și dați-i o valoare X de 18 și un Y de 22,8. Apoi, accesați fila Filtre și aplicați un filtru Dropshadow. Dați filtrului o valoare Blur X și Blur Y de 4, Forța de 66%, Calitatea de înaltă, Culoarea negru, Unghiul de 90, Distanța de 1 și bifați caseta de lângă Umbra interioară. Selectați movieclip și duplicați-l. Dați următorului movieclip un X de 18 și Y de 58.9.
Luați din nou instrumentul dreptunghiular. Asigurați-vă că există încă o valoare de 5 pentru colțurile rotunjite și trageți un dreptunghi cu o lățime de 99 și o înălțime de 20,6. Transformați această formă într-un buton. Introduceți modul de editare al butonului și adăugați un nou strat. Prindeți instrumentul Text și creați o casetă de text statică cu o valoare de "Trimitere". Dați noului buton un X de 18,3, Y de 367,6 și un nume de instanță a butonului.
În cele din urmă, selectați instrumentul Linie. Dați-i un ampatament de 1 și o culoare de # 999999. Desenați o linie pe scenă. Selectați linia și îi dați o înălțime de 327, X de 502,4 și Y de 28,2. Duplicați linia și mutați-o peste un pixel spre dreapta și dați-i o culoare albă. Aplicația este complet proiectată acum.
Navigați la fișierul ActionScript creat la începutul acestui tutorial. Inserați acest cod în el.
pachet import flash.display.Sprite; public comment commentForm extinde Sprite public function commentForm ()
Iată instrucțiunile de import pe care le vom folosi. Lipiți-le sub declarația pachetului și deasupra declarației de clasă. De asemenea, vom enumera variabilele pe care le vom folosi.
pachet import flash.display.Loader; import flash.display.MovieClip; import flash.display.SimpleButton; import flash.display.Sprite; importul flash.events.Event; import flash.events.FocusEvent; import flash.events.IOErrorEvent; import flash.events.KeyboardEvent; importul 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; clasa publica de comentariiForm extinde Sprite private var tf: TextField; URL static static privat: String = "YOUR_SERVER"; funcția publică funcționalăForm ()
Aici, setăm ascultătorii evenimentului și înfășurarea cuvintelor pentru câmpurile de text mari. De asemenea, numim funcțiile onComplete și onInput. Funcția onComplete va încărca XML din baza de date. În acest fel, componenta listei este populate atunci când începe aplicația. Cu funcția onInput, setăm câmpul de text dyText cu valoarea corectă.
funcția publică funcționalăForm () init (); funcția privată init (): void commentField.addEventListener (FocusEvent.FOCUS_IN, onFocus); emailField.addEventListener (FocusEvent.FOCUS_IN, onFocus); nameField.addEventListener (FocusEvent.FOCUS_IN, onFocus); comentariuField.addEventListener (KeyboardEvent.KEY_DOWN, onInput); comentariuField.addEventListener (KeyboardEvent.KEY_UP, onInput); butonul.addEventListener (MouseEvent.CLICK, onClick); onComplete (null); onInput (null); commentField.wordWrap = adevărat; area.wordWrap = adevărat;
Funcția onInput va actualiza câmpul de text din partea de jos a aplicației noastre. Pur și simplu ia cantitatea de caractere introduse în formularul de comentarii și scade suma totală permisă. Utilizăm ambele evenimente "KEY_UP" și "KEY_DOWN", deoarece dorim ca câmpul să se actualizeze chiar și atunci când cineva ține o anumită cheie în jos. De asemenea, verificăm dacă câmpul de text al comentariului este plin. Dacă este, vom întoarce textul roșu.
funcția privată onInput (eveniment: KeyboardEvent): void dyText.text = String (commentField.maxChars - commentField.length) + "caractere rămase"; dacă (dyText.text == "0 caractere rămase") dyText.textColor = 0xff0000; altceva dyText.textColor = 0x000000;
Aceasta este funcția care va gestiona evenimentul "CLICK". Iată aici unde trecem variabilele către PHP și ascultăm pentru evenimentul "COMPLETE". Cu toate acestea, înainte de a trimite ceva către PHP, trebuie să verificăm și să ne asigurăm că câmpurile de text nu sunt goale. Dacă sunt, atunci le schimbăm câmpul de text al etichetei în roșu.
funcția privată onClick (eveniment: MouseEvent): void button.focusRect = false; stage.focus = buton; Numele var: String = nameField.text; var e-mail: String = emailField.text.toLowerCase (); var comentariu: String = commentField.text; dacă (validateString (nume)) if (validateEmail (email)) if (validateString (comment)) var url: URLLoader = nou URLLoader (); var req: URLRequest = URLRequest nou (URL + "/ leave.php"); var vars: URLVariables = noi URLVariabile (); req.method = URLRequestMethod.POST; vars.submit = true; vars.name = nume; vars.email = email; vars.comment = comment; dacă (newsletter.selected) vars.newsletter = true; altfel vars.newsletter = false; req.data = vars; url.addEventListener (eveniment.COMPLETE, onComplete); url.addEventListener (IOErrorEvent.IO_ERROR, peError); url.load (req); altceva commentText.textColor = 0xff0000; tf = commentText; altfel emailText.textColor = 0xff0000; tf = emailText; altceva nameText.textColor = 0xff0000; tf = numeText;
Iată cele două funcții utilizate pentru validarea câmpurilor noastre de text. Funcția validateEmail ia câmpul de text și rulează o expresie regulată pe el pentru a verifica e-mailul. Funcția validateString va elimina toate etichetele HTML care ar putea fi inserate și va asigura că există cel puțin un text în acel câmp.
funcția privată validateEmail (string: String): Boolean var model: 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ă validateString (string: String): Boolean var bool: Boolean; var model: RegExp = /<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|".*?"|[^"\">\ S] +))) + \ s * | \ s *) \ /> / Gl??; string = string.replace (model, ""); varianta var2: RegExp = / [a-zA-Z0-9] / g; dacă string.search (pattern2) == -1) bool = false; altfel bool = true; return bool;
Aici este codul sql pentru a crea tabelul din baza de date.
Accentsconagua
CURATE TABLE 'YOUR_DATABASE'. 'Comentarii' ('id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY, 'name' VARCHAR (40) NOT NULL, 'email' VARCHAR ENGINE = MYISAM Prima parte a PHP-ului nostru este crearea conexiunii bazei noastre de date. Copiați acest cod într-un nou fișier php. Salvați fișierul ca "requ.php".
Cu fișierul bazei de date salvat, îl putem accesa apoi în formularul de feedback. Linia "require_once" va încărca fișierul de conexiuni baze de date. Avem o anumită siguranță în acest fel. Apoi verificăm dacă variabila "trimitere" este goală. Am trimis mesajul "trimiteți" din Flash când am făcut clic pe butonul pentru trimitere. Dacă variabila nu este goală, vom popula variabilele noastre pe partea PHP. După ce curățăm valorile, le inserăm în baza de date. Salvați acest fișier ca "leave.php" în același director ca fișierul "require.php".
Iată unde curățăm valorile pe care le inserăm în baza noastră de date. Evităm toate intrările periculoase, apoi lăsăm toate etichetele html din valoare. Apoi, doar în cazul în care ceva a reușit, noi dezinfectăm valoarea.
funcția validateString ($ string) $ string = mysql_real_escape_string ($ string); $ string = strip_tags ($ șir); $ string = filter_var ($ șir, FILTER_SANITIZE_STRING); returnează $ string;
Aceasta este funcția pe care o utilizăm pentru a trimite e-mailul afară. Pentru acest exemplu, folosesc "PHPMailer" .Puteți descărca sursa aici.Aceasta este o clasă foarte simplă pentru a lucra cu.Aici avem nevoie de clasă cum am făcut-o cu conexiunea noastră la baza de date.Famma PHPMailer le spunem că trimitem un e-mail HTML și trimiteți-l la și de la valori, precum și șir HTML.Veți observa în metoda "AddAddress", vom trece valori de e-mail și nume.Funcția finală este conținutul HTML.Ea poate fi ajustată la spuneti orice doriti.Aceasta functie este chemata doar daca se face click pe casuta de validare "newsletter".
funcția handleEmail ($ name, $ email) necesită ("phpMailer / class.phpmailer.php"); $ mail = un nou PHPMailer (); $ mail-> From = "YOUR_FROM_ADDRESS ([email protected])"; $ mail-> FromName = "YOUR_FROM NAME (webmaster)"; $ mail-> AddReplyTo ("YOUR_REPLY_TO_NAME ([email protected]"); $ mail-> AddAddress ($ email, $ name); $ mail-> isHTML (true); $ mail-> Subject = "YOUR_SUBJECT" ; $ email-> Body = emailContent ($ name); dacă (! $ mail-> Trimite ()) return false; else return true; emailContent ($ name) $ emailString =\ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="E-mail de încercare \ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="| NEWSLETTER HEADER | \ n "; $ emailString. ="
| Dragă $ nume FELICITĂRI! Tocmai ați fost adăugat la comunitatea noastră de e-mail ... dar nu într-adevăr. | \ n "; $ emailString. ="
| NEWSLETTER FOOTER | \ n "; $ emailString. ="
Deschideți un alt fișier gol PHP. Salvați-l ca pe "comments.php". Aici folosim din nou fișierul "require.php", apoi efectuăm o interogare simplă MySQL. Selectează toate valorile din baza de date. Luăm toate valorile returnate și reluăm XML. Mai întâi vom trimite antetul, apoi vom relua părțile inițiale ale XML. După aceea, mergem într-o buclă. Această parte va reflecta toate comentariile, adresele de e-mail și numele. Când se termină buclă, închidem XML. Aceasta este ceea ce vom încărca în Flash.
