Da Flash a MySQL via PHP: trasferire e salvare le variabili.



In questa guida vedremo come salvare una variabile da un’interfaccia di tipo flash-movie ad un database di tipo mysql, sfruttando così le enormi potenzialità del linguaggio php, le capacità di salvataggio e di organizzazione dei dati tipiche di mysql e le qualità grafiche di flash.

Innanzitutto avviamo il nostro server php e mysql, e a tal proposito non smetterò mai di consigliare di usare xampp (Clicca qui per saperne di più) sia per la versatilità, sia per la semplicità d’uso.

 Se usate xampp create una cartella in c:xampphtdocs e chiamatela “prova”, se non usate xampp createla comunque nella cartella del vostro web server. Dopodichè avviamo flash e creiamo un filmato nuovo. Per quanto riguarda l’actionscript useremo il 2.0 in questa guida, quindi clicchiamo su “Crea Nuovo File Flash (ActionScript 2.0)”. Salviamo sin da ora il nostro filmato in modo da dargli un nome ed essere sicuri che l’sfw verrà creato nella nostra cartella. Chiamiamo il file “flashform.fla”.

Passiamo ora ad inserire nel documento flash le caselle di input in cui immettere i dati. Inseriamo dunque tre caselle di testo statico per le desrizioni e tre caselle di testo di input per l’immissione dei dati. Inseriremo inoltre anche un pulsante per l’invio dei dati.

Ecco una schermata per renderci meglio conto di come dovrà apparire il nostro filmato flash:

Clicca per ingrandire

Clicca per ingrandire

(In quest’esempio ho ipotizzato di creare una sorta di rubrica per il web)

Per quanto riguarda il pulsante, quello che ho utilizzato lo si può trovare sempre all’interno di flash nelle librerie comuni (menu->Finestra->Librerie comuni->Pulsanti->buttons rect bevel ->rect bevel bronze), ovviamente potete usare un qualsiasi pulsante.

Una cosa importante e da non tralasciare e di dare un nome d’istanza ad ogni casella di input che mettiamo. Per fare ciò clicchiamo sulla prima casella di input (quella in cui verrà inserito il nickname nel nostro esempio) e nel pannello proprietà vedremo il riquadro “nome istanza” – nell’immagine sopra lo potete vedere evidenziato in rosso – qui andremo a scrivere “nickname”. D’ora in poi questo sarà il nome della nostra casella di input. Stessa identica operazione la facciamo anche per le altre due caselle, che andremo a chiamare “email” e “website”, e con questo l’interfaccia grafica è pronta, possiamo passare al codice.

Forse qualcuno a questo punto si chiederà “che bisogno c’è di usare flash per fare un semplice form? Lo si può fare anche in html” ed in effetti è vero, ma ricordo che questo è solo un esempio, giusto per fare capire come funziona, poi al form gli si possono aggiungere tutte le animazioni possibili e immaginabili, altrimenti l’uso di flash in effetti non avrebbe senso davvero.

Il codice actionscript:

Clicchiamo ora sul pulsante del nostro form e apriamo la finestra “azioni” qui inseriamo il seguente codice che poi spiegheremo passo passo:

on (release){
dati = new LoadVars();
dati.nickname=_root.nickname.text;
dati.email=_root.email.text;
dati.website=_root.website.text;
dati.sendAndLoad(“http://localhost/prova/datainsert.php”, dati, “POST”);
}

on (release) Stiamo dicendo a flash che tutto ciò che si trova tra questi due simboli {  } lo deve eseguire nel momento in cui il pulsante viene rilasciato, ovvero, non nel momento in cui abbiamo cliccato, ma quando il click è stato completato, cioè quando il pulsante del mouse è stato premuto e poi sollevato.

dati = new LoadVars(); Qui creiamo un contenitore che chiamiamo “dati” e nel quale andremo ad inserire le nostre variabili da spedire, come quando andiamo alla posta per spedire un pacco :) …”dati” non è altro che lo scatolo (al momento vuoto) che andremo a spedire.

dati.nickname=_root.nickname.text; All’interno di “dati” stiamo inserendo un’altro scatolino più piccolo, che a sua volta si chiama “nickname”. Cosa dovrà mettere flash all’interno di “dati.nickname” ? Semplicemente il contenuto dell’area di testo che abbiamo chiamato “nickname” ovvero “_root.nickname.text” (ricordate quando all’inizio abbiamo messo “nickname” nel nome istanza dell’area di testo? Se non l’avessimo fatto questa riga non troverebbe nulla).

dati.email=_root.email.text;
dati.website=_root.website.text;
idem per le altre due aree di testo

dati.sendAndLoad(“http://localhost/prova/datainsert.php”, dati, “POST”); e qui siamo alla posta che stiamo spedendo il nostro pacchetto :) …stiamo dicendo a flash di spedire il contenitore “dati” all’indirizzo “http://localhost/prova/datainsert.php” (file che andremo a creare), di restituire un’eventuale risposta (in questo caso non c’interessa molto) e di spedirla col metodo “POST”.

(in effetti avrei potuto utilizzare semplicemente “dati.send” anzichè sendAndLoad, ma questo metodo apre una nuova finestra nel browser, cosa che a me non piace)

E qui abbiamo finito con flash e con l’actionscript. Adesso il prossimo passo da fare e creare il database in cui dovremo mettere i nostri dati, e questo possiamo farlo in due modi, se avete xampp allora avete anche phpmyadmin, e da qui potrete creare il db e le tabelle, ma preferisco il secondo metodo, che è universale, cioè scrivere le query necessarie in un file php e farle eseguire… vediamo nel dettaglio come fare.

Andiamo nella nostra cartella di prova e creiamo un nuovo file di testo che chiameremo “creadb.php”. Editiamolo con un qualsiasi text-editor e andiamo ad inserire 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 />”);
$query=”CREATE DATABASE `prova`”;
mysql_query($query) or die (“<h1>Errore creazione Database</h1>”);

$query=”CREATE TABLE `prova`.`rubrica` (`nickname` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL ,`email` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL ,`website` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL) ENGINE = MYISAM “;
mysql_query($query) or die (“<h1>Errore creazione tabella</h1>”);

echo “Database creato”;
mysql_close($conn);
?>

Andiamo a vedere il codice nel dettaglio:

<? Inizio codice php (lo so… non c’era bisogno di dirlo :) )

$conn=mysql_connect(“localhost”,”root”,””) or die (“<hr /><h2>Errore di connessione al DataBase</h2><h3>Contattare l’amministratore del sito</h3><hr />”); Creiamo una nuova connessione a mysql che andiamo a chiamare $conn. Do per scontato che abbiate i diritti di root, mentre per quanto riguarda la password in questo caso non è settata, ma se dovesse esserci una password a protezione dei vostri dati allora dovrete inserirla subito dopo “root”, dentro le virgolette che in questo caso sono vuote. Se non dovesse riuscire a connettersi per qualsiasi motivo, verrà stampato a video il messaggio “Errore di connessione al DataBase. Contattare l’amministratore del sito” formattato in base al codice html che gli abbiamo dato, e in questo caso lo script morirebbe qui senza andare avanti nell’esecuzione (connect or die…. sembra il titolo di un film in stile “Arnold Schwarzenegger” :) ) , d’altra parte se non fossimo connessi al db e lo script continuerebbe la sua esecuzione, darebbe come risultato solo una serie di errori senza nulla di fatto.

$query=”CREATE DATABASE `prova`”; questa, come s’intuisce facilmente è la query che dirà a mysql di creare un nuovo database che chiamiamo “prova”. Attenzione a questo simbolo ` da non confondere con questo ‘

il primo simbolo potete farlo tenendo premuto il testo Alt e digitando il suo codice ascii, cioè 96,  nel tastierino numerico. Il secondo è quello che troviamo nelle nostre tastiere sotto il punto interrogativo, per il momento non ci serve ma spesso nelle query s’incontra questa distinzione che può causare facilmente degli errori.

mysql_query($query) or die (“<h1>Errore creazione Database</h1>”); Esegue la query precedentemente salvata col nome $query. E’ qui, dunque che crea il db…. o muore :) .

$query=”CREATE TABLE `prova`.`rubrica` (`nickname` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL ,`email` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL ,`website` VARCHAR( 30 ) CHARACTER SET latin1 COLLATE latin1_general_cs NOT NULL) ENGINE = MYISAM “;
mysql_query($query);
Creiamo una nuova query sempre in $query, sovrascrivendo quella precedente che ormai non ci serve più. Questa è un po’ più complessa ma non per questo deve fare paura. Crea una tabella di nome “rubrica” all’interno del db “prova” (CREATE TABLE `prova`.`rubrica`)  questa tabella contiene tre colonne, la prima si chiama “nickname”, la seconda “email” e la terza “website” tutte e tre sono di tipo varchar, cioè contengono caratteri al loro interno, e nello specifico ne possono contenere al massimo 30. Il set di caratteri da utilizzare è “latin1_general_cs” (cs sta per case sensitive, quindi avremo una distinzione tra maiuscole e minuscole) e nessun campo può rimanere vuoto (NOT NULL), sono tutti campi obbligatori.

mysql_query($query) or die (“<h1>Errore creazione tabella</h1>”); eseguiamo adesso questa query.

echo “Database creato”;
mysql_close($conn);
stampiamo a video un messaggio che ci dice che il db è stato creato e chiudiamo la connessione.

?> fine codice php. (lo so, anche stavolta non c’era bisogno di dirlo :) )

A questo punto salviamo il file, apriamo il browser e andiamo all’indirizzo “http://localhost/prova/creadb.php”. Se tutto va bene dovremmo vedere il nostro bel messaggio “Database creato”, e possiamo verificare tramite phpmyadmin che ciò è vero.

Passiamo dunque ora al file che riceverà i dati mandati da flash:

andiamo nella nostra cartella di prova, creiamo un nuovo file di testo, chiamiamolo “datainsert.php”, editiamolo con l’editor di testo e inseriamo il seguente codice:

<?
$nickname=$_POST[“nickname”];
$email=$_POST[“email”];
$website=$_POST[“website”];

$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);
$query=”INSERT INTO `prova`.`rubrica` (`nickname` ,`email` ,`website`) VALUES (‘$nickname’, ‘$email’, ‘$website’)”;
mysql_query ($query) or die (“<h1>Impossibile immettere i dati nel DB</h1>”);
echo “Dati inseriti nel database”;
mysql_close($conn);
?>

Vediamo nel dettaglio:

$nickname=$_POST[“nickname”]; prende il valore che gli abbiamo mandato tramite POST e lo mette nella variabile $nickname.

$email=$_POST[“email”];
$website=$_POST[“website”];
idem come sopra.

$conn=mysql_connect(“localhost”,”root”,””) or die (“<hr /><h2>Errore di connessione al DataBase</h2><h3>Contattare l’amministratore del sito</h3><hr />”); si connette al database

mysql_select_db(“prova”, $conn); seleziona il db “prova” che abbiamo precedentemente creato.

$query=”INSERT INTO `prova`.`rubrica` (`nickname` ,`email` ,`website`) VALUES (‘$nickname’, ‘$email’, ‘$website’)”; creiamo la nostra query nella quale andremo a chiedere a mysql di inserire i dati nella tabella “rubrica” del database “prova” (INSERT INTO `prova`.`rubrica`) dopodichè gli diciamo che i dati vanno inseriti dentro i campi “nickname”, “email” e “website”. Infine specifichiamo quali sono questi dati da inserire, e cioè i contenuti delle variabili ‘$nickname’, ‘$email’ e ‘$website’.

ATTENZIONE alla distinzione già vista precedentemente tra il simbolo ‘ e il simbolo `

echo “Dati inseriti nel database”;
mysql_close($conn);
ci avvisa che i dati sono stati inseriti, dopodichè chiude la connessione al db.

A questo punto possiamo avviare il nostro filmato flash, inserire i dati e verificare con phpmyadmin che questi sono stati inseriti correttamente.

Nella prossima guida andremo invece a vedere come fare l’operazione inversa, ovvero prendere i dati già esistenti nel db e farli apparire all’interno dell’animazione flash.

A presto.

JM@IKA

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Ciao, grazie per la guida innanzi tutto. L’unica cosa è che non riesco a far funzionare il form. Sto sviluppando la cosa non in locale e quando carico tutto online ed effettuo l’invio dei dati, rimane a caricare o esce completato ma senza alcun risultato.

Pinterest