da mysql a flash, leggere le variabili memorizzate nel database



Nella guida precedente abbiamo visto come trasferire delle variabili da flash a mysql, adesso faremo il percorso inverso, andremo a vedere come recuperare delle variabili memorizzate in un database mysql e visualizzarle all’interno di un filmato flash.

Al punto in cui eravamo arrivati avevamo un interfaccia flash nella quale inserire i dati, un file php che faceva da intermadiario tra flash e mysql e un db chiamato “prova” contenente una tabella chiamata “rubrica”, la quale a sua volta contiene tre campi: nickname, email e website, tutti e tre di tipo varchar.
Supponiamo di avere questo db pieno di indirizzi web, di email e di nomi utente, di aver bisogno di fare delle ricerche all’interno di questo db e di dover mandare il risultato della ricerca ad un file flash. Ecco come fare.

Innanzi tutto prepariamo il file flash. Creiamo un nuovo file flash con actionscript 2.0 e salviamolo nella cartella “prova” con nome “ricerca.fla”. Inseriamo nel primo frame una casella di testo statico e tre pulsanti. Dallo screenshot potrete avere un’idea di come dovrà venire…
20090623screenshot01
Clicca sull’immagine per ingrandirla.

(ovviamente, essendo un tutorial su flash, php e mysql, non sto curando molto la grafica, ma la parte riguardante la programmazione, lascio le personalizzazioni della pagina alla vostra fantasia)

Adesso aggiungiamo due livelli (pulsante “Nuovo livello” oppure menu->Inserisci->Linea Temporale->livello) e rinominiamoli come “common” e “action”, il primo è il livello in cui andremo ad inserire degli oggetti che saranno in comune tra vari frames, l’altro è un livello che non contiene oggetti, ma solo actionscript.

Dunque abbiamo al primo frame due livelli attualmente vuoti ed uno con una didascalia e tre pulsanti. Faremo in modo che il primo pulsante punti al frame 2, e qui inseriremo il  form per la ricerca del nickname, il secondo pulsante punti al frame 3, dove inseriremo il form per la ricerca dell’url, il terzo al frame 4, col form per la ricerca dell’email.

Andiamo per gradi: clicchiamo col destro sul secondo frame-livello1 e scegliamo aggiungi fotogramma chiave. Ci ritroveremo un fotogramma identico al primo, qui però possiamo togliere i 3 pulsanti che in questo fotogr. non ci servono e cambiamo la didascalia da “cerca per:” a “Inserisci il nickname da cercare:”. Clicchiamo ora senmpre  col destro sul frame3-livello1 ed aggiungiamo anche qui un fotogramma chiave, che stavolta sarà identico al secondo. Qui cambiamo la didascalia in “Inserisci l’URL da cercare:”. Stesso discorso vale per il frame4-livello1 dove andremo a mettere “Inserisci l’email da cercare:”. Adesso andiamo al frame2 del livello che abbiamo chiamato “common” e qui andremo a mettere una casella di testo di input ed un pulsante “OK”. Cosa molto importante è dare un nome istanza alla casella di input (se ricordate nella guida precedente avevo spiegato il perchè), quindi clicchiamo sulla casella di testo in modo da selezionarla, andiamo nella scheda proprietà ed inseriamo il nome istanza “input_text”. Ora clicchiamo col destro sul frame4 del livello “common” ed inseriamo un fotogramma chiave, in modo da ritrovarci pulsante e input_text in tutti e tre i frames don i form.

Per una migliore comprensione eccovi gli screenshot dei 3 frames:

Clicca per ingrandire

Clicca per ingrandire

Clicca per ingrandire

Clicca per ingrandire

Clicca per ingrandire

Clicca per ingrandire

L’ultimo frame (il 5) sarà quello in cui inseriremo l’interfaccia che visualizzerà i dati trovati dopo la ricerca e sarà molto simile all’interfaccia usata nella guida precedente per l’inserimento dei dati. Avremo infatti tre caselle di testo statico(per le didascalie) e tre caselle di testo dinamico (per i dati).

Andiamo a creare questo frame: clicchiamo col destro sul frame5-livello1 e scegliamo “inserisci fotogramma chiave vuoto” qui mettiamo le tre caselle di testo statico (le didascalie) dove scriveremo “Nicname”, “Website” e “Email”, quindi aggiungiamo le tre caselle di testo dinamico e diamo il nome istanza ad ognuna, rispettivamente “text_nickname”, “text_website”, “text_email”. Ecco lo screenshot.

Clicca per ingrandire

Clicca per ingrandire

Altra cosa importante: nella finestra proprietà, dopo aver selezionato le caselle di testo dinamico possiamo vedere in basso un’opzione chiamata “variabile”, serve ad associare il contenuto della nostra casella di testo ad una variabile: ciò che metteremo all’interno di quella variabile apparirà come testo.

Clicchiamo quindi sulla casella di testo che abbiamo chiamato “text_nickname” e nell’opzione “variabile” andiamo ad inserire “_root.nickname”. Adesso abbiamo una variabile globale (che si trova in root) dal nome nickname, il cui contenuto verrà sempre visualizzato in quest’area di testo.

Lo stesso facciamo anche per le altre 2 caselle di testo dinamico, associandole alle variabili “_root.website” e “_root.email”.

A questo punto possiamo passare all’actionscript.

La prima cosa da fare è evitare che il filmato continui a ciclare all’infinito mostrandoci tutti i frame uno dopo l’altro. Inseriamo quindi uno stop in ogni frame. Andiamo al frame1-livello “action” apriamo la finestra delle azioni ed andimo a scrivere

stop();

poi per semplicità possiamo cliccare col destro sempre sul frame1-livello”action” andare su “copia fotogramma” e poi incollare questo su tutti e 5 i frame (sempre del livello “action”) con “incolla fotogramma”.

Ora passiamo ai pulsanti del frame1. Clicchiamo sul primo (nickname) ed inseriamo il seguente actionscript:

on (release){
gotoAndPlay(2);
}

non c’è bisogno di troppe spiegazioni: appena il pulsante viene rilasciato il filmato si sposta al frame 2, cioè quello col form di ricerca tramite Nickname.

Ripetiamo l’operazione anche per il secondo e terzo pulsante, ricordando che il secondo deve puntare al frame 3 (ricerca per URL) e il terzo al frame 4 (ricerca per email)

Adesso andiamo nell’action del frame 2, e sotto lo stop inseriamo:

_root.command=”search_by_nickname”;

nell’action del frame 3 inseriamo:

_root.command=”search_by_URL”;

e nell’action del frame 4 inseriamo:

_root.command=”search_by_email”;

che significa? Semplicissimo, stiamo creando una variabile chiamata “_root.command” nella quale stiamo memorizziamo la nostra posizione attuale, ovvero in quale form ci troviamo. Questa variabile verrà poi passata a php che saprà così se dovrà effettuare la ricerca tramite email, url o website.

Adesso andiamo nel secondo frame-livello “common”, clicchiamo sul pulsante “ok” selezionandolo ed inseriamo l’actionscript per questo pulsante:

on (release){
_root.ricerca();
}

ovvero: non appena il pulsante viene rilasciato flash dovrà eseguire una serie di cose che specificheremo in seguito e che saranno tutte racchiuse dentro una funzione che chiameremo “ricerca” e che si troverà all’interno della root.

Creiamo ora questa funzione: clicchiamo sul frame1-livello “action” e inseriamo il seguante actionscript subito dopo lo stop:

function ricerca(){
dati = new LoadVars();
dati.command=_root.command;
dati.searchstring=_root.input_text.text;
dati.onLoad = function()
{
_root.nickname=dati.nickname;
_root.website=dati.website;
_root.email=dati.email;
gotoAndPlay(5);
}
dati.sendAndLoad(“http://localhost/prova/search.php”, dati, “POST”);
}

Vediamo lo script nel dettaglio:

function ricerca(){ Qui inizia la nostra funzione denominata “ricerca”

dati = new LoadVars(); Creiamo il nostro contenitore di nome “dati” che verrà poi spedito a php.

dati.command=_root.command;
dati.searchstring=_root.input_text.text;
Inseriamo i nostri dati all’interno del contenitore loadvars, per l’esattezza ci andremo a mettere una variabile di nome “command” che conterrà quel valora che ci dirà se dovremo cercare per nome, per url o per email, e poi una variabile di nome “searchstring” al cui interno mettiamo il contenuto della casella di testo che abbiamo chiamato “input_text” (quella nella quale scriveremo cosa cercare).

dati.onLoad = function()
{
non appena avrà finito di caricare i dati (la risposta della nostra ricerca, in questo caso) dovrà avviare una funzione specificata subito di seguito

_root.nickname=dati.nickname;
_root.website=dati.website;
_root.email=dati.email;
trasferisce le variabili ricevute dal php (dati.nickname, dati.website e dati.email) all’interno di variabili globali, le stesse variali che abbiamo associato alle aree di testo dinamico del frame 5.


gotoAndPlay(5);
vai al frame 5 (e vedremo le aree di testo dinamico riempite coi risultati);

dati.sendAndLoad(“http://localhost/prova/search.php”, dati, “POST”); questa invece è la riga che dice a flash di inviare i dati al file search.php (che creeremo in seguito) di mettere tutte le risposte da parte di search.php all’interno del contenitore loadvars chiamato “dati” e di trasferire questi dati col metodo POST.

Per quanto riguarda la parte flash è tutto. Vediamo adesso la parte php.

Andiamo nella cartella “prova” e creiamo un nuovo file di testo che chiamiamo “search.php”. Inseriamo in questo file il seguente codice:

<?

$conn=mysql_connect(“localhost”,”root”,””) or die (“<hr /><h2>Errore di connessione al DataBase</h2><h3>Contattare l’amministratore del sito</h3><hr />”);
mysql_select_db(“prova”, $conn);
$searchstring=$_POST[“searchstring”];
if ($_POST[“command”]==”search_by_nickname”){
$query=”SELECT * FROM `rubrica` WHERE `nickname` = ‘$searchstring'”;
} else if ($_POST[“command”]==”search_by_URL”){
$query=”SELECT * FROM `rubrica` WHERE `website` = ‘$searchstring'”;
} else if ($_POST[“command”]==”search_by_email”){
$query=”SELECT * FROM `rubrica` WHERE `email` = ‘$searchstring'”;
}
$res=mysql_query ($query);
$res_array=mysql_fetch_array($res);
$nickname=$res_array[“nickname”];
$website=$res_array[“website”];
$email=$res_array[“email”];
echo “nickname=$nickname&website=$website&email=$email”;
mysql_close($conn);
?>

Vediamo nel dettaglio:

$conn=mysql_connect(“localhost”,”root”,””) or die (“<hr /><h2>Errore di connessione al DataBase</h2><h3>Contattare l’amministratore del sito</h3><hr />”); Connettiti al db o dai il messaggio d’errore (maggiori chiarimenti nella guida precedente)

mysql_select_db(“prova”, $conn); seleziona il db.

$searchstring=$_POST[“searchstring”]; mette la stringa che gli abbiamo mandato tramite flash, quella con la parola da cercare, dentro una variabile chiamata $searchstring

if ($_POST[“command”]==”search_by_nickname”){
$query=”SELECT * FROM `rubrica` WHERE `nickname` = ‘$searchstring'”;
}
nel caso in cui fossimo partiti dal form di ricerca per nome utente ($_POST[“command”]==”search_by_nickname”) la query da eseguire è SELECT * FROM `rubrica` WHERE `nickname` = ‘$searchstring’ ovvero: seleziona tutti i dati della tabella “rubrica” in cui il valore del campo “nickname” è uguale alla stringa di ricerca.

else if ($_POST[“command”]==”search_by_URL”){
$query=”SELECT * FROM `rubrica` WHERE `website` = ‘$searchstring'”;
atrimenti se la stringa proviene dal form di ricerca per url la query da eseguire sarà un’altra: seleziona tutto dalla tabella “rubrica” dove il campo website è uguale alla stringa di ricerca.

else if ($_POST[“command”]==”search_by_email”){
$query=”SELECT * FROM `rubrica` WHERE `email` = ‘$searchstring'”;
}
altrimenti ancora, se dobbiamo cercare per email la query è quest’altra: seleziona tutto dalla tabella “rubrica” dove il campo “email” è uguale alla stringa di ricerca.

$res=mysql_query ($query); esegui la query e metti il risultato in una variabile chiamata $res.

$res_array=mysql_fetch_array($res); qui il risultato della query, composta da più valori diversi, viene messo in un  Array, quindi lo si ordina.

$nickname=$res_array[“nickname”]; dall’array del risultato della query prende il valore contenuto dentro “nickname” e lo mette in una nuova variabile chiamata “$nickname”.

$website=$res_array[“website”]; idem per “website”.

$email=$res_array[“email”]; idem per “email”

echo “nickname=$nickname&website=$website&email=$email”; qui stampa i dati uno dopo l’altro nel formato accettato da flash (variabile=valore&variabile2=valore2 ecc.)

mysql_close($conn); chiude la connessione al db.

Ecco fatto, adesso possiamo effettuare le nostre ricerche, ricordando però che essendo una guida a scopo didattico, non è stato messo nessun controllo degli errori. Quindi possiamo limitarci a cercare stringhe che già sappiamo che si trovano nel db, ma questo è solo un esempio introduttivo, partendo da qui ognuno può implementare il codice come vuole.

Per quanto riguarda la ricerca tramite flash, php e mysql è tutto, alla prossima guida.

JM@IKA

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest