Integrazione tra Flash, PHP e MySql
di Marcello Ruta
Tool utilizzati: Flash CS4 e Dreamweaver CS4
Requisiti: conoscenze di ActionScript 3.0, PHP e Sql
Assets: ReadData.as, readDataFromDb .fla, prodotti_db.sql, prod_list.php
Per eseguire questo esercizio ho utilizzato Flash CS4 (ma si poteva utilizzare anche Flash CS3) e Dreamweaver CS4 come editor per scrivere le poche righe di codice PHP. Nel tutorial vedremo come far interagire Flash con delle fonti di dati, con l’ausilio di PHP come linguaggio server. Ma adesso mettiamoci all’opera.
Primo Step >> PhpMyAdmin
Nel primo step dell’esercizio creeremo un database denominato prodotti_db, per fare ciò apriamo PhpMyAdmin e creiamo il nostro database. Creato il database creeremo la tabella products con 4 campi:
products_id (rappresenta la chiave primaria)
products_nome (varchar (255))
products_price (varchar (255))
products_cat (varchar (255))
Ecco il codice MySql della tabella products:
CREATE TABLE `products` (
`products_id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`products_nome` VARCHAR( 255 ) NOT NULL ,
`products_price` VARCHAR( 255 ) NOT NULL ,
`products_cat` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM ;
Secondo Step >> Connessione a MySql
Dopo aver affrontato la creazione del database ci occuperemo in questo fase della connessione alla fonte dei dati. Apriamo Dreamweaver o un editor qualsiasi per scrivere le poche righe di codice che ci permettono di effettuare la connessione al database. Quindi creiamo la pagina prod_list.php e la salviamo, d’ora in poi opereremo su questa pagina per effettuare il retrieve de dati dal database.
<? $link = mysql_connect('localhost', 'root', 'root');
mysql_select_db("prodotti_db", $link);
?>
la password e la username dipendono dal tipo di server PHP installato sulla vostra macchina, io nella fattispecie sto utilizzando MAMP per Mac OS X, chi usa EasyPHP naturalmente adotterà la password e la username relativa.
Terzo Step >> Codice PHP
Una volta stabilita la connessione con il database non ci resta che eseguire una Query per estrapolare i dati dal nostro database, a questo punto non faremo altro che aggiungere il codice relativo alla query portiamoci sotto mysql_select_db("prodotti_db", $link); ed aggiungiamo una variabile $query e effettuiamo una SELECT su tutti i campi della tabella products, ma ecco il codice finale dell’interrogazione:
$query = "SELECT *"; $query .= " FROM products"; $query .= " WHERE products_id";
$result = mysql_query($query);
" SELECT *” >> utilizziamo il carattere jolly (* l’asterisco) per indicare che vengono selezionati tutti i campi della tabella.
" FROM products" >> indichiamo da quale tabella dobbiamo estrapolare i dati.
" WHERE products_id" >> per filtrare i dati in base alla riga products_id.
Ho fornito una spiegazione abbastanza sintetica della sintassi utilizzata in precedenza, non è l’obiettivo di questo tutorial di fornire spiegazioni approfondite sulla sintassi SQL.
Andiamo avanti col codice, adesso inizializzeremo due variabili $output e l’indice $i, ecco il codice:
$output = "resp=loaded\n";
$i = 0;
Adesso eseguiamo un loop while sul risultato della query precedente:
while($row = mysql_fetch_array($result))
{
$output .= "&nome".$i."=".$row['products_nome'];
$output .= "&prezzo".$i."=".$row['products_price'];
$output .= "&cat".$i."=".$row['products_cat'];
$i++; }
$output .= "&total=" . $i;
//echo("indice i = ".$i);
print $output;
Esaminiamo il codice utilizzato nel loop, alla variabile $output abbiamo assegnato un nome ("&nome") e un valore ($i) per ogni singolo dato che ci viene ritornato dal database. I dati ritornati dalla funzione mysql_fetch_array() costituiscono un’array multidimensionale, mentre la variabile $row viene utilizzata per memorizzare i dati di ogni singola colonna del database ($row['products_nome']).
Andando avanti col codice noterete che ho aggiunto alla variabile $output una stringa "&total=" che poi richiameremo dentro Flash e che funge da contatore totale del nostro array.
L’ultima porzione di codice riguarda il print, che ci permette di mettere in output i nostri dati e di renderli disponibili per Flash.
Alla fine il nostro codice PHP sarà questo:
<?
$link = mysql_connect('localhost', 'root', 'root');
mysql_select_db("prodotti_db", $link);
$query = "SELECT *"; $query .= " FROM products"; $query .= " WHERE products_id";
$result = mysql_query($query);
$output = "resp=loaded\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
$output .= "&nome".$i."=".$row['products_nome'];
$output .= "&prezzo".$i."=".$row['products_price'];
$output .= "&cat".$i."=".$row['products_cat'];
$i++; }
$output .= "&total=" . $i;
//echo("indice i = ".$i);
print $output;
?>
Quarto Step >> Leggiamo i dati con Flash
L’ultima fase del nostro esercizio consisterà nel caricamento dei dati all’interno della nostra applicazioncina. Apriamo Flash CS4 o CS3 e creiamo il file readDataFromDb.fla nella stessa root del nostro fla creiamo la classe ReadData.as, quindi andiamo sul pannello Proprietà di Flash e nella Document Class (Classe Documento) scriviamo ReadData, questo per eseguire l’import della nostra classe, oppure creiamo un livello Action sul nostro fla eseguiamo l’import della classe ReadData ci creiamo un oggetto readData e facciamo l’addChild del nostro oggetto.
Ecco in breve il codice della seconda opzione:
import ReadData;
var readData:ReadData = new ReadData(); addChild(readData);
Adesso focalizzeremo la nostra attenzione sulla scrittura della Class ReadData.
Il primo passo consiste nell’impostazione del nostro package, e l’importazione delle classi e la dichiarazione della nostra classe:
package
{
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class ReadData extends Sprite
{
public function ReadData():void
{
//trace("Ready on!!");
}
//
}
}
adesso dichiariamo il blocco di variabili necessarie per la nostra classe, ci posizioniamo subito dopo la graffa di public class ReadData extends Sprite e scriviamo nel nostre variabili.
private var phpPath:String = "http://localhost:8888/php_test/prod_list.php"; >> con questa variabile definiamo la chiamata alla nostra pagina PHP private var urlReq:URLRequest; private var urlLoader:URLLoader; private var variables:URLVariables; private var nameProd:String; private var priceProd:String; private var catProd:String; private var nameArray:Array = new Array();
alla fine di questo passaggio la nostra classe avrà questo aspetto:
package
{
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class ReadData extends Sprite
private var phpPath:String = "http://localhost:8888/php_test/prod_list.php";
private var urlReq:URLRequest;
private var urlLoader:URLLoader;
private var variables:URLVariables;
private var nameProd:String;
private var priceProd:String;
private var catProd:String;
private var nameArray:Array = new Array();
{
public function ReadData():void
{
//trace("Ready on!!");
}
//
}
}
nel prossimo passaggio useremo la classe URLLoader per creare un event listener ed iniziare cosi il processo di caricamento dei dati, procediamo posizionandoci all’interno della function ReadData e scriviamo il nostro codice, alla fine di questo step la funzione ReadData avrà questo aspetto:
public function ReadData():void
{
//trace("Ready on!!");
urlReq = new URLRequest(phpPath);
urlLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, serverResponse);
urlLoader.load(urlReq);
}
in questo ultimo passaggio creiamo una funzione serverResponse che ci restituirà tutti i dati, all’interno di essa inizializzeremo un oggetto di tipo URLVariables che sarà incaricata della gestione dei dati (ovvero della coppia nome/valore in PHP) ed un ciclo for per mostrare le informazioni di ogni campo del database, nel nostro loop ci avvarremo della proprietà total per determinare quante volte il loop deve essere eseguito.
Ecco il codice necessario per fare tutto ciò:
private function serverResponse(e:Event):void
{
variables = new URLVariables(e.target.data);
//trace(variables);
//trace(variables.total);
for (var i:int = 0; i < variables.total; i++)
{
nameProd = variables["nome" + i];
priceProd = variables["prezzo" + i];
catProd = variables["cat" + i];
/*trace("Nome Prodotto: " + nameProd);
trace("Prezzo Prodotto: " + priceProd);
trace("Categoria Prodotto: " + catProd);
trace("================================================");*/
var mc:Container = new Container(); mc.txt.text = nameProd; mc.txt.selectable = false; mc.y = i * 45 + 5; addChild(mc);
var mcPrice:Container = new Container(); mcPrice.x = 190; mcPrice.y = i * 45 + 5; mcPrice.txt.text = priceProd; mcPrice.txt.selectable = false; addChild(mcPrice);
var mcCat:Container = new Container(); mcCat.x = 380; mcCat.y = i * 45 + 5; mcCat.txt.text = catProd; mcCat.txt.selectable = false; addChild(mcCat); } }
A questo punto l’esercizio e' concluso non ci resta che testare…
File Allegato: Integrazione Flash PHP MySql