Opprett en Flash Logg System Bruke PHP og MySQL - Del 1

Create en Flash Logg System Bruke PHP og MySQL - Del 1
18
Del
7
Del

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

Denne opplæringen vil demonstrere hvordan å lage enkle, men profesjonelle Flash login system med tre ulike programmeringsspråk.; AS3, PHP og MySQL. Avanserte seksjoner som applikasjonslogikk, PHP og MySQL integrering med Flash vil være våre viktigste snakker poeng. La oss sette seg fast i!




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet, klikker du bare på demo-knappen på toppen av denne opplæringen.

Prøv å logge inn med brukernavn admin og passord passord eller brukernavn test1 og passord password1. Du vil se et enkelt stykke tekst som tilsvarer den brukeren.

I denne del vil vi få den faktiske innlogging fungerer, så i del 2 skal vi la brukerne registrere seg gjennom en SWF.
< hr>
Trinn 1: Få MAMP eller annen lokal server

Hvis du ikke har web-server som støtter mysql databaser og php, og deretter laste ned MAMP (for Mac), WAMP (for Windows), eller en annen lokal server.

MAMP er en åpen kildekode lokal server som lar deg kjøre php og opprette og lagre data i MySQL-databaser fra den lokale harddisken. MAMP oppretter automatisk en server når du laster det derfor jeg anbefaler å bruke det over andre lokale servere.

Du kan alternativt bruke web-serveren hvis den støtter MySQL og PHP.

Installer phpMyAdmin på serveren vil vi bruke den senere



Trinn 2:.. Importen

Her er de tingene du trenger for å lage sluttproduktet

En tekst eller html editor (f.eks notepad eller Dreamweaver).

Flash CS3 +

nå har vi alt vi trenger det er på tide å sette opp vår dokument klasse.
< hr>
Trinn 3: AS3 Dokument Class Setup

Opprett en flunkende ny .as-fil og en AS3 FLA fil. Lagre .as filen som main.as i en ny mappe som heter handlinger
.

Lagre FLA filen i rotmappen på søknaden vår. Nå i vår FLA fil inn i hovedklassen navn (og klassebane) i egenskapsvinduet, som angitt nedenfor:



Trinn 4: Opprette Base Class Kode

Åpne hoved .as fil og legge til følgende kode:
pakke handlinger {/* alltid strekke ut en klasse bruker MovieClip stedet for sprite når du bruker blits. * /Import flash.display.MovieClip; /* Lage vår klasse * /public class hoved strekker MovieClip {offentlig funksjon main (): void {trace ( "suksess"); }}}

Dette blir dokumentet klassen. Trykk ctrl + enter for å kjøre SWF

Hvis du får en melding i produksjonen du har koblet både dokumenter og kan gå videre



Trinn 5:.. Opprette vår database Connection - del 1

for å opprette en forbindelse til vår database vi trenger å bruke php. Først må du opprette en database på serveren din. Kall det admin. Du kan opprette en database med phpMyAdmin på serveren din. Bildet nedenfor er første siden du ser når du åpner phpMyAdmin. Dette er den eneste gangen vi skal bruke phpMyAdmin; Vi vil lage tabellen ved hjelp php



Trinn 6:. Opprette vår Database Connection - Del 2

Vi trenger en fil som kan kobles til vår database. Opprett en ny mappe kalt php. Opprett et nytt dokument med php forlengelse og kaller det connect.php

Følg kode kommentarer for å se hva som skjer. Twitter /* All kode i disse kodene vil bli anerkjent som php-kode. * /≪? php /* database vars som vi bruker til å koble til vår mysql database. Endre verdiene dine databaseinnstillinger * /$ db_name = "admin";. $ Db_username = "root"; $ db = "root"; $ db_host = "localhost"; /* mysql_connect er en innebygd funksjon som lar oss gjøre en enkel tilkobling * /mysql_connect ($ db_host, $ db_username, $ db, $ db_name.), /* mysql_select_db er en innebygd funksjon som tillater oss å velge databasen. Dette er en viktig function.We bruke "dø" funksjon for å se etter feil * /mysql_select_db ($ db_name) or die (mysql_error ());. Echo 'suksess';? ≫

Deretter må du laste opp filer til testing server. Hvis du bruker MAMP kopiere mappen til htdocs mappen i MAMP programmappen.

Hvis det er en vellykket tilkobling vil det bli en suksess melding som nedenfor, og du vil ha koblet til databasen.

Merk: Det er viktig å fjerne ekko 'suksess'; fra PHP etterpå

Merk:. Katalogen vil ikke være den samme som på bildet. Ignorer "kilden" banen. For eksempel http: //localhost: 8888 /loginsystem /php /connect.php



Trinn 7: Opprette Interface i Flash

Først Opprett to tekstbokser - Input Tekst - til tillate brukeren å legge inn navn og passord.

Deretter plassere dem vertikalt. Gi den øverste tekstboksen forekomsten navnet "brukernavn" og den nederste "passord". Merk de to slik du ønsker.

Deretter tegner en firkant og sette inn en annen tekstboks skriver på det "send". Konvertere disse til et filmklipp med en forekomst navnet "submit_button"

Fordel alle forskjellige objekter i lag. (Endre > Tidslinje > Fordel å Layers)

grensesnittet skal se noe. som dette:



Trinn 8: knapp Submission

Deretter vil vi lage vår send-knappen hendelseshåndterer, checkLogin (), som skal kjøres når brukeren klikker "send"

Først må vi importere flash.events. *; i vår kode. På denne måten kan vi bruke Flash-hendelser. Følg kode kommentarer.
Pakke handlinger {/* alltid strekke ut en klasse bruker MovieClip stedet for sprite når du bruker blits. * /Import flash.display.MovieClip; import flash.events. *; /* Lage vår klasse * /public class hoved strekker MovieClip {offentlig funksjon main (): void {/* buttonMode gir på send-knappen en velt * /submit_button.buttonMode = true; /* Hva dette sier er at når vår knappen trykkes, vil checkLogin funksjon kjøre * /submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); /* Angi starttekstfeltet verdier * /username.text = ""; password.text = ""; } /* Funksjonen til checkLogin * /public funksjon checkLogin (e: Mouseevent): void {trace ( "underkastelse suksess"); }}}

Hvis utgangs viser "innsending suksess" når du klikker på knappen, har vår knapp hendelsen blitt opprettet



Trinn 9:. Feltet Validering

Nå er vi kommer til å sjekke om våre felt har data. Erstatte dagens checkLogin funksjon med koden under. Det er thoroghly kommen for enkelhets skyld Twitter /* funksjonen for å sjekke login * /public funksjon checkLogin (e: Mouseevent):. Void {/* Sjekk felt før du sender forespørsel til php * /if (username.text == "" || password.text == "") {/* hvis brukernavn eller passord feltene er tomme sett feilmeldinger * /if (username.text == "") {username.text = "Skriv inn brukernavn"; } If (password.text == "") {password.text = "Skriv inn passordet ditt"; }} Else {/* init funksjon for å behandle login * /processLogin (); }}



Trinn 10: Opprette databasen tabellen

Data lagres i tabeller i databaser. Derfor trenger vi å opprette en tabell, og vi vil bruke php til å gjøre det. Opprett en ny php dokument i php mappen og kall det hva du vil (det vil ingen rolle, dette er bare midlertidig for å opprette tabellen, vil vi ikke trenger å holde kjører det). Deretter fylle den med koden under
. ≪? Php /* koble til vår database * /require_once "connect.php"; /* lage mysql spørringen * /$ sql = "CREATE TABLE brukere (id int (11 ) NOT NULL AUTO_INCREMENT, brukernavn varchar (255) NOT NULL, passord varchar (255) NOT NULL, user_bio longtext NOT NULL, PRIMARY KEY (id)) "; $ query = mysql_query ($ sql); if ($ query === TRUE) {echo 'Du har nå opprettet tabellen';} mysql_close ();? >

Etter dette, laste opp alle filene til serveren din. Deretter skriver du inn filbanen i nettleseren, hvis tabellen ble opprettet vil det vise en suksess melding. Hvis ikke, så kan du sjekke din konfigurasjon. Merk:. Pass på at du sletter denne filen fra serveren etter suksessen meldingen vises

Så gå til phpMyAdmin eller et alternativ for å sjekke om bord har blitt lagt til. Hvis det har blitt lagt til er hva du vil se nedenfor ...



Trinn 11: Legge til den første bruker:

Nå har vi vårt bord laget la oss gå videre og legge til en bruker .

Opprett en ny php dokument og kalle det hva du vil, og deretter plassere den i php mappen
. <? php /* koble til databasen * /require_once "connect.php"; /* lage mysql queryWhat dette spørsmålet betyr er php kaller mysql for å sette inn verdier i tabellen brukere. Det spør deretter for de feltene du vil legge til data for deretter verdiene for at enkelte felt i stigende rekkefølge. * /$ Sql ​​= "INSERT INTO brukere (brukernavn, passord, user_bio) VALUES (" admin "," passord ", ' dette er brukeren bio ') "; $ query = mysql_query ($ sql); mysql_close (); >

Vi har nå lagt en bruker så derfor vår tabellen vil se slik ut:?

bør være klar til å begynne å lage vår søknad logikk, som gir strøm til backend av våre SWF



Trinn 12:. sende en forespørsel til PHP

det noen variabler vi trenger å prosessen for å få våre databasedata.

Her er funksjonen fullført processLogin (), for å gå i vår main.as fil (det vil bli kalt når brukeren klikker på knappen). Vi trenger å importere Flash netto klasser her. Så, legg dette på toppen. Import flash.net *, Twitter /* funksjon for å behandle våre login * /public funksjon processLogin (): void {/* variabler som vi sender til php fil * /var phpVars: URLVariables = nye URLVariables (); /* Lager vi en URLRequest variabel. Dette får php filbanen. * /Var phpFileRequest: URLRequest = new URLRequest ( "php /controlpanel.php"); /* Dette gjør at vi kan bruke den post-funksjonen i php * /phpFileRequest.method = URLRequestMethod.POST; /* Feste php variabler til URLRequest * /phpFileRequest.data = phpVars; /* Lage en ny loader å laste inn og sende vår URLRequest * /var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, utstillingsresultat); /* Nå kan lage variabler som skal sendes til php fil * /phpVars.systemCall = "checkLogin"; phpVars.username = username.text; phpVars.password = password.text; /* Dette vil starte kommunikasjon mellom flash og php * /phpLoader.load (phpFileRequest);}



Trinn 13: PHP Vars Forklart

Den første linjen:
phpVars.systemCall = "checkLogin";

vil bli forklart senere når vi skaper hoved php kontroll fil

de neste to linjene.
phpVars.username = username.text; phpVars.password = password.text;

hente hva brukeren matet inn i de to tekstfeltene og konvertere dem til php variabler



Trinn 14:. Resultat tekstfelt

Lag en dynamisk tekstboksen og gi det en forekomst navnet "result_text".

Plasser den under innloggingsskjemaet og send-knappen. Dette vil vise informasjon hentes fra serveren



Trinn 15:. Hoved PHP kontrollfilen

Dette er filen som skal kommunisere med php og returnere en verdi å blinke. Opprett en ny php fil som heter "controlpanel.php" og plassere den i \\ php \\ mappe
. ≪? Php /* koble til vår database * /include_once "connect.php"; /* vi legge variablene vi mottar fra flash * /$ username = $ _POST [ 'brukernavn']; $ password = $ _POST [ 'passord']; /* hvis flash kalt login system koden under runs * /if ($ _POST [ 'systemCall'] == "checkLogin") {/* den * betyr søket initally velger alle postene i database.Then søket filtrerer ut noen poster som ikke er det samme som hva brukeren skrev inn. * /$ sql = "SELECT * FROM brukere WHERE brukernavn = '$ username' AND password = '$ passord' "; $ query = mysql_query ($ sql); /* Dette teller hvor mange poster matche vår spørring * /$ login_counter = mysql_num_rows ($ query); /* hvis $ login_counter er større vi sende en melding tilbake til flash og få data fra databasen * /if ($ login_counter > 0) {/* vi bruke en stund loop for å få brukerens bio. mysql_fetch_array får alle feltets data for den aktuelle posten * /while ($ data = mysql_fetch_array ($ query)) {/* får user_bio verdi fra den valgte posten * /$ userbio = $ data [ "user_bio"];. /* bruke utskriftsfunksjonen til å sende verdier tilbake til flash * /print "systemResult = $ userbio";}} else {print "systemResult = påloggingsopplysningene ikke matche våre registre.";}} >?



Trinn 16: vise resultatet - del 1

La oss gå tilbake til vår prosess innloggingsfunksjonen og legge til denne:
phpLoader.addEventListener (Event.COMPLETE, utstillingsresultat);

Når skjemaet er ferdig denne lytteren kaller utstillingsresultat () -funksjonen. Vi skal se på det nå



Trinn 17:. Vise resultatet - Del 2

Her er funksjonen. Det viser verdien vi trykt i "controlpanel.php" file Twitter /* funksjon for å vise resultatet av påloggings * /public funksjon utstillingsresultat (hendelse: hendelse). Void {/* dette autosizes tekstfeltet ** *** Du må importere flash er tekst klasser. Du kan gjøre dette ved å legge til:. Import flash.text *; ... Til i listen over import uttalelser * /result_text.autoSize = TextFieldAutoSize.LEFT; /* Dette blir resultatet, og viser det i følge tekstfeltet * /result_text.text = "" + event.target.data.systemResult;}

SWF blir teksten som vi skriver i php og vise den i result_text tekstfeltet



Trinn 18:. en vellykket Pålogging Eksempel

Hvis du har opprettet en vellykket pålogging, er dette hva du vil se:

nå er vi kommer til å legge en ekstra bruker for å teste om systemet vårt fungerer for flere brukere



Trinn 19:. legge vår Tilleggs bruker:

Åpne "adduser.php" -filen i vår php mappen som vi opprettet tidligere.

Bare endre verdiene i mysql spørringen.

$ sql = "INSERT INTO brukere (brukernavn, passord, user_bio) VALUES ( 'test1', 'password1', 'Dette er det flere brukere bio')";

Deretter kjører script på serveren ved å skrive inn filbanen i en nettleser



Trinn 20:. Test Vår Tilleggs bruker:

suksess! Vi har en vellykket flash login system som støtter flere brukere. Her er resultatet når vi har logget inn ekstra bruker:



Trinn 21:. Hele Actionscript-koden med kommentarer
pakken handlinger {/* alltid strekke ut en klasse bruker MovieClip stedet for sprite når du bruker blits. * /Import flash.display.MovieClip; import flash.events. *; import flash.net. *; import flash.text. *; /* Lage vår klasse * /public class hoved strekker MovieClip {offentlig funksjon main (): void {/* buttonMode gir på send-knappen en velt * /submit_button.buttonMode = true; /* Hva dette sier er at når vår knappen trykkes, vil checkLogin funksjon kjøre * /submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); /* Angi starttekstfeltet verdier * /username.text = ""; password.text = ""; } /* Funksjonen for å sjekke login * /public funksjon checkLogin (e: Mouseevent): void {/* sjekke felt før du sender forespørsel til php * /if (username.text == "" || password.text == "" ) {/* hvis brukernavn eller passord feltene er tomme sett feilmeldinger * /if (username.text == "") {username.text = "Skriv inn brukernavn"; } If (password.text == "") {password.text = "Skriv inn passordet ditt"; }} Else {/* init funksjon for å behandle login * /processLogin (); }} /* Funksjon for å behandle våre login * /public funksjon processLogin (): void {/* variabler som vi sender til php fil * /var phpVars: URLVariables = nye URLVariables (); /* Lager vi en URLRequest variabel. Dette får php filbanen. * /Var phpFileRequest: URLRequest = new URLRequest ( "php /controlpanel.php"); /* Dette gjør at vi kan bruke den post-funksjonen i php * /phpFileRequest.method = URLRequestMethod.POST; /* Feste php variabler til URLRequest * /phpFileRequest.data = phpVars; /* Lage en ny loader å laste inn og sende vår URLRequest * /var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, utstillingsresultat); /* Nå kan lage variabler som skal sendes til php fil * /phpVars.systemCall = "checkLogin"; phpVars.username = username.text; phpVars.password = password.text; /* Dette vil starte kommunikasjon mellom flash og php * /phpLoader.load (phpFileRequest); } /* Funksjon for å vise resultatet av påloggings * /public funksjon utstillingsresultat (hendelse: Hendelse): void {/* dette autosizes tekstfeltet ***** Du må importere flash er tekst klasser. Du kan gjøre dette ved å:. Import flash.text *; * /Result_text.autoSize = TextFieldAutoSize.LEFT; /* Dette blir resultatet, og viser det i følge tekstfeltet * /result_text.text = "" + event.target.data.systemResult; }}}

Konklusjon

Vel som konkluderer med del 1 av vår Flash login system opplæringen. I del 2 vil vi skape et register form som vil legge til brukere uten at brukeren oppgir det i backend. Takk for at du leser denne opplæringen. Nyt det :)