Share
In deze zelfstudie laat ik je zien hoe je Flash, PHP en MySQL samen gebruikt. We zullen een eenvoudig commentaarformulier maken dat vermeldingen invoert en opslaat in een database. We gebruiken PHP om de gegevens op te halen en de opmerkingen in XML-vorm te formatteren. Laten we gaan!
Start Flash en maak een nieuw Flash-bestand (ActionScript 3.0). Maak een nieuwe map en sla het bestand op in de map als "commentForm.fla". Maak vervolgens een nieuw ActionScript-bestand. Sla het bestand op in dezelfde map als "commentForm.as".
Open uw nieuw gemaakte Flash-document en wijzig vervolgens in het eigenschappenvenster de grootte van de stage in 960x400 pixels. Typ in het tekstvak Documentklasse ook "commentForm". Hiermee wordt het externe ActionScript-bestand gekoppeld aan ons Flash-document.
Selecteer het gereedschap Rechthoek en teken een rechthoek uit met een slag van elke grootte. Selecteer de hele rechthoek en open het paneel Uitlijnen door naar Venster> Uitlijnen te gaan. Klik in het deelvenster Uitlijnen onder 'Overeenkomstformaat' op de knop 'Breedte en hoogte matchen'. Hiermee wordt de rechthoek geschaald naar de grootte van het werkgebied. Klik nog steeds in het uitlijnpaneel onder "Uitlijnen" op de knoppen "Linkerrand uitlijnen" en "Begin bovenrand". Hiermee verplaats je de rechthoek naar de linkerbovenhoek van het werkgebied.
Selecteer vervolgens het opvulgedeelte van de rechthoek. Selecteer in het deelvenster Kleur de lineaire gradiënt als vulkleur. Terwijl de rechthoek nog steeds is geselecteerd, selecteert u het gereedschap Gradiënttransformatie en roteert u het verloop 90 graden (zorg ervoor dat de zwarte zijde naar de onderkant is gericht). Geef onder de opties voor de verloopkleur het witte gedeelte de kleur # F2F2F2. Geef dan de zwarte kant een kleur van # D9D9D9. Selecteer ten slotte de lijn, geef deze de kleur # 999999 en geef deze een grootte van 2 in het eigenschappenvenster.
Selecteer ten slotte de hele rechthoek en converteer deze naar een filmclip. Ga naar het venster Filters, klik op het plus-pictogram en geef de filmclip een gloed. De gloed moet een 10 hebben voor Blur X en Blur Y, een sterkte van 33%, een hoge kwaliteit, een zwarte kleur en zorg ervoor dat u de gloedbinnenbak van de binnenkant controleert. De rechthoekige filmclip zou nu een lichte innerlijke gloed moeten hebben.
Selecteer het gereedschap Tekst. Selecteer Dynamische tekst in het eigenschappenvenster, zorg dat de kleur zwart is, het lettertype "Arial" en de tekengrootte 10. Teken in een nieuwe laag een tekstvak van 41,9 px breed en een hoogte van 15,2 px. Geef het tekstvak een X-positie van 18 en een Y-positie van 6.3. Geef als laatste het tekstvak een instantienaam van "nameText".
Maak een nieuw tekstvak op het podium. Dit tekstvak heeft een breedte van 246,9, een hoogte van 17,4, een X-positie van 18, een Y-positie van 22,9 en een instantienaam van "nameField".
Nu maken een ander tekstvak met een breedte van 41,9, hoogte van 15,2, X van 18, Y van 42,4 en instantienaam van "emailText".
Maak een ander (bijna) tekstvak met een breedte van 246,9, hoogte van 17,4, X van 18, Y van 58,9 en instantienaam van "emailField".
Maak opnieuw een tekstvak met een breedte van 55,5, hoogte van 15,2, X van 18, Y van 80,1 en instantienaam van "commentText".
Tenslotte, maak nog een tekstvak. Geef het een breedte van 466.9, hoogte van 260.9, X van 18, Y van 96.3 een instantienaam van "commentField", en stel het veld Maximum-tekens in op 1000. Geef het een waarde in het tekstvak met de naam "nameText" van "Naam". Selecteer vervolgens de "emailText" en geef deze de waarde "E-mail". Selecteer ten slotte het tekstvak "commentText" en geef het de waarde "Opmerking". We zullen de tekstkleur van deze tekstvakken dynamisch wijzigen.
Maak nog een dynamisch tekstvak. Geef het een breedte van 421.1, een hoogte van 211.4, X van 521.3, Y van 144.6, en exemplaarnaam van "gebied". Selecteer alle vier lege dynamische tekstvakken en wijzig in het eigenschappenvenster hun lettertypegrootte in 12. Alleen de labeltekstvelden moeten een lettergrootte van 10 hebben. Selecteer de teksttool opnieuw. Wijzig in het venster Eigenschappen het type terug naar Statisch, de kleur is zwart, het lettertype is "Arial" en de tekengrootte is 10. Maak een statisch tekstvak. Geef het een breedte van 5.2, de hoogte moet standaard op 15,2 staan, X op 520,5, Y op 11,1 en geef het een waarde van "Opmerkingen".
Navigeer vervolgens naar het paneel Componenten. Sleep een exemplaar van het lijstonderdeel naar het werkgebied. Geef de component List een breedte van 422,9, een hoogte van 100, X van 520, Y van 27,8 en een instantienaam van "list".
Sleep een kopie van de Checkbox-component naar het werkgebied. Geef het een breedte van 100, hoogte van 22, X van 280,3, Y van 57,4, exemplaarnaam van "nieuwsbrief", en, in het paneel Parameters, geef het een label van "Nieuwsbrief". Maak ten slotte nog een dynamisch tekstveld. Zorg ervoor dat het een zwarte kleur heeft, het lettertype is "Arial" en de lettergrootte is 10. Geef het een breedte van 128, een hoogte van 15,2, X van 356,9, Y van 367,6 en een instantienaam van "dyTex".
De volgende stap is om de afbeeldingen onder de tekstvakken te maken. Maak een nieuwe laag en verplaats deze onder de laag met de tekstvelden. Selecteer het gereedschap Rechthoek. Geef in het eigenschappenvenster een slag van 2. Zorg dat de kleur van de streek #CCCCCCC is. Geef de rechthoek een vulling van wit. In de afgeronde hoeken geeft u het een waarde van 10.
Teken een rechthoek met een breedte van 466,9, een hoogte van 260,9. Selecteer de hele rechthoek en converteer deze naar een filmclip. Ga met de filmclip naar het tabblad Filters. Geef de rechthoek een nieuw slagschaduwfilter. Het nieuwe filter heeft een 6 voor Blur X en Blur Y, een sterkte van 66%, een kwaliteit van hoog, een hoek van 90, een afstand van 1, een kleur zwart en vink het vakje aan naast Innerlijke schaduw. Geef als laatste de rechthoekige filmclip een X-positie van 18 en een Y-positie van 96,3.
Teken vervolgens nog een rechthoek met dezelfde toegepaste stijlen. Deze keer geeft u de rechthoek een breedte van 422,6, hoogte van 214. Converteer het in een filmclip. Geef de filmclip dan een X van 520,5 en een Y van 143,3. Pas hetzelfde filter toe als de vorige rechthoek.
Nu gaan we een nieuwe rechthoek maken. Geef deze keer de afgeronde hoeken een waarde van 5; laat alle andere parameters hetzelfde. Teken een rechthoek met een breedte van 246,9 en een hoogte van 17,4. Verander het in een filmclip en geef het een X-waarde van 18 en een Y van 22,8. Ga vervolgens naar het tabblad Filters en pas een slagschaduwfilter toe. Geef het filter een Blur X en Blur Y-waarde van 4, een sterkte van 66%, een hoge kwaliteit, een zwarte kleur, een hoek van 90, een afstand van 1 en vink het selectievakje naast de binnenste schaduw aan. Selecteer de filmclip en dupliceer deze. Geef de volgende filmclip een X van 18 en Y van 58,9.
Neem de tool Rechthoek nog een keer. Zorg dat er nog steeds een waarde van 5 is voor de afgeronde hoeken en teken een rechthoek met een breedte van 99 en een hoogte van 20,6. Converteer deze vorm naar een knop. Ga naar de bewerkingsmodus van de knop en voeg een nieuwe laag toe. Pak de tool Tekst en maak een statisch tekstvak met de waarde "Verzenden". Geef de nieuwe knop een X van 18.3, Y van 367.6 en een instantienaam van 'knop'.
Selecteer tot slot het gereedschap Lijn. Geef het een slaggrootte van 1 en een kleur van # 999999. Teken een lijn op het podium. Selecteer de regel en geef deze een hoogte van 327, X van 502,4 en Y van 28,2. Dupliceer de lijn en verplaats deze over één pixel naar rechts en geef het een witte kleur. De applicatie is nu volledig ontworpen.
Navigeer naar het ActionScript-bestand dat aan het begin van deze zelfstudie is gemaakt. Plak deze code erin.
pakket import flash.display.Sprite; public class commentForm breidt public function commentForm () uit
Dit zijn de importstatements die we gaan gebruiken. Plak ze onder de declaratie van het pakket en boven de klasseverklaring. We vermelden ook de variabelen die we gaan gebruiken.
pakket 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 breidt Sprite uit private var tf: TextField; private static const URL: String = "YOUR_SERVER"; openbare functie commentForm ()
Hier stellen we de gebeurtenislisteners en woordterugloop in voor de grote tekstvelden. We noemen ook de functies onComplete en onInput. De functie onComplete laadt de XML uit de database. Op deze manier wordt de lijstcomponent gevuld wanneer de toepassing start. Met de functie onInput stellen we het dyText-tekstveld in op de juiste waarde.
openbare functie commentForm () init (); private function 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;
De functie onInput werkt het tekstveld bij aan de onderkant van onze applicatie. Het neemt eenvoudigweg het aantal tekens op dat in het commentaarformulier is ingevoerd en trekt het totale toegestane bedrag af. We gebruiken zowel de gebeurtenissen "KEY_UP" als "KEY_DOWN" omdat we willen dat het veld wordt bijgewerkt, zelfs als iemand een bepaalde sleutel ingedrukt houdt. We controleren ook of het veld voor de commentaartekst vol is. Als dat zo is, zetten we de tekst rood.
private function onInput (event: KeyboardEvent): void dyText.text = String (commentField.maxChars - commentField.length) + "characters left"; if (dyText.text == "0 tekens over") dyText.textColor = 0xff0000; else dyText.textColor = 0x000000;
Dit is de functie die de "KLIK" -gebeurtenis zal afhandelen. Hier geven we de variabelen door aan PHP en luisteren we naar de "COMPLETE" -gebeurtenis. Voordat we echter iets naar PHP verzenden, moeten we controleren of de tekstvelden niet leeg zijn. Als dat het geval is, veranderen we hun labeltekstveld in rood.
privéfunctie onClick (event: MouseEvent): void button.focusRect = false; stage.focus = knop; var name: String = nameField.text; var email: String = emailField.text.toLowerCase (); var comment: String = commentField.text; if (validateString (name)) if (validateEmail (email)) if (validateString (comment)) var url: URLLoader = new URLLoader (); var req: URLRequest = nieuwe URLRequest (URL + "/ leave.php"); var vars: URLVariables = new URLVariables (); req.method = URLRequestMethod.POST; vars.submit = true; vars.name = naam; vars.email = e-mail; vars.comment = opmerking; 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 = commentaartekst; else emailText.textColor = 0xff0000; tf = emailText; else nameText.textColor = 0xff0000; tf = naamTekst;
Hier zijn de twee functies die worden gebruikt om onze tekstvelden te valideren. De functie validateEmail neemt het tekstveld en voert een reguliere expressie uit om de e-mail te verifiëren. De functie validateString verwijdert alle HTML-tags die kunnen worden ingevoegd en zorgt ervoor dat er ten minste tekst in dat veld aanwezig is.
private function validateEmail (string: String): Boolean var pattern: 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 validateString (string: String): Boolean var bool: Boolean; var pattern: RegExp = /<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|".*?"|[^"\">\ S] +))) + \ s * | \ s *) \ /> / gi?; string = string.replace (patroon, ""); var pattern2: RegExp = / [a-zA-Z0-9] / g; if (string.search (pattern2) == -1) bool = false; else bool = true; terug bool;
Hier is de sql-code om de tabel in uw database te maken.
Accentsconagua
MAAK TAFEL 'YOUR_DATABASE'. 'Comments' ('id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY, 'naam' VARCHAR (40) NOT NULL, 'email' VARCHAR (40) NOT NULL, 'comment' VARCHAR (1200) NOT NULL) MOTOR = MYISAM Het eerste deel van onze PHP is om onze databaseverbinding tot stand te brengen. Kopieer deze code naar een nieuw php-bestand. Sla het bestand op als "require.php".
Als het databasebestand is opgeslagen, kunnen we het in ons feedbackformulier openen. De regel "require_once" laadt het databaseverbindingsbestand. Op deze manier hebben we wat extra beveiliging. We controleren vervolgens of de variabele "submit" leeg is. We hebben het "verzenden" vanuit Flash verzonden toen we op de knop klikten om te verzenden. Als de variabele niet leeg is, vullen we onze variabelen aan de PHP-kant. Nadat we de waarden hebben opgeschoond, voegen we ze in de database in. Bewaar dit bestand als "leave.php" in dezelfde map als uw "require.php" -bestand.
Hier reinigen we de waarden die in onze database moeten worden ingevoegd. We ontsnappen aan gevaarlijke ingangen, waarna we alle html-tags uit de waarde verwijderen. Dan, voor het geval er iets doorkomt, zuiveren we de waarde.
function validateString ($ string) $ string = mysql_real_escape_string ($ string); $ string = strip_tags ($ string); $ string = filter_var ($ string, FILTER_SANITIZE_STRING); return $ string;
Dit is de functie die we gebruiken om de e-mail te verzenden. Voor dit voorbeeld gebruik ik "PHPMailer". Je kunt de bron hier downloaden. Dit is een heel eenvoudige klasse om mee te werken. Hier hebben we de klasse nodig zoals we deden met onze databaseverbinding. We vertellen PHPMailer dat we verzenden een HTML-e-mail en geef deze door aan zowel de waarden als de HTML-reeks.U zult opmerken in de "AddAddress" -methode, we geven de waarden voor e-mail en naam door.De laatste functie is de HTML-inhoud. zeg wat u maar wilt Deze functie wordt alleen opgeroepen als op het selectievakje 'nieuwsbrief' wordt geklikt.
function handleEmail ($ name, $ email) require ("phpMailer / class.phpmailer.php"); $ mail = nieuwe 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" ; $ mail-> Body = emailContent ($ name); if (! $ mail-> Send ()) return false; else return true; function emailContent ($ name) $ emailString = "\ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="Test e-mail \ n "; $ emailString. ="\ n "; $ emailString. ="\ n "; $ emailString. ="| NIEUWSBRIEFKOPER | \ n "; $ emailString. ="
| Beste $ naam GEFELICITEERD! Je bent zojuist toegevoegd aan onze e-mailcommunity ... maar niet echt. | \ n "; $ emailString. ="
| NIEUWSBRIEF VOETER | \ n "; $ emailString. ="
Open nog een leeg PHP-bestand. Bewaar deze als "comments.php". Hier gebruiken we ons "require.php" -bestand opnieuw, waarna we een eenvoudige MySQL-query uitvoeren. Het selecteert alle waarden uit de database. We nemen alle geretourneerde waarden en echoën de XML. Eerst sturen we de koptekst en geven dan de eerste delen van de XML weer. Daarna gaan we in een while-lus. Dit deel zal echo van al onze opmerkingen, e-mailadressen en namen. Wanneer de while-lus voorbij is, sluiten we de XML. Dit is wat we zullen terug laden in Flash.
