Creare un Form in Php e Flash
In questo tutorial creeremo un semplice form in flash (vers.MX) per poter inviare una e-mail in formato html conl’ausilio di una pagina PHP.
Introduzione:
Cosa ci serve per inviare una e-mail senza aprire ilprogramma di posta? Semplicemente un po’ di conoscenzadi action script, php e ovviamente un server che supporti ilphp. Iniziamo col vedere come strutturare la nostra paginaphp:
<?if(isset($_POST['flashMAIL'])){/////////////////$nome = htmlspecialchars(stripslashes(utf8_decode(trim($_POST['nome']))),ENT_QUOTES);$email = htmlspecialchars(stripslashes(utf8_decode(trim($_POST['email']))),ENT_QUOTES);$oggetto = htmlspecialchars(stripslashes(utf8_decode(trim($_POST['oggetto']))),ENT_QUOTES);$msg = nl2br(stripslashes(utf8_decode(trim($_POST['msg']))));$msg = str_replace("<br />" ,"[br]" ,$msg);$msg = htmlspecialchars($msg,ENT_QUOTES);$msg = str_replace("[br]" ,"<br />" ,$msg);$page = "WWW.YASSASSIN.IT";$to = "antoniocorrado@artega.it";//$messaggio ='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>'.$page.'</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {margin:0px;padding:0px;}table {width: 100%;font-family:Verdana, Arial, Helvetica, sans-serif;}.tdSX {width:40%;font-size:10px;color:#333333;}.tdDX {width:60%;font-size:10px;color:#000066;}#titolo {width: 100%;font-size:14px;color:#003366;text-decoration:underline;}</style></head><body><table><tr><td align="center" id="titolo" colspan="2">CONTATTI '.$page.'</td></tr><tr><td colspan="2"> </td></tr><tr><td align="center" class="tdSX">Nome:</td><td align="center" class="tdDX">'.$nome.'</td></tr><tr><td align="center" class="tdSX">E-mail:</td><td align="center" class="tdDX">'.$email.'</td></tr><tr><td align="center" class="tdSX">messaggio:</td><td align="center" class="tdDX">'.$msg.'</td></tr> </table></body></html>';$intestazioni = "MIME-Version: 1.0$intestazioni .= "Content-type: text/html; charset=iso-8859-1$intestazioni .= "To: ".$to."$intestazioni .= "From: ".$nome." <".$email.">$intestazione .= "Return-Path: ".$nome."if (mail($to, $oggetto, $messaggio, $intestazioni)) { print "ris=ok"; } else { print "ris=error"; }} else {print "ris=error";}?>
Al primo rigo abbiamo:
if(isset($_POST['flashMail'])){
che serve per verificare se la variabile flashMail èstata inviata correttamente dal form flash con il metodoPOST. Questo solo per fare in modo che, se la pagina vieneaperta direttamente dal browser o viene richiamata da qualchealtro script che non imposta la variabile flashMail, nonsucceda nulla.
$nome = htmlspecialchars(stripslashes(utf8_decode( trim( $_POST['nome']))),ENT_QUOTES);$email = htmlspecialchars(stripslashes(utf8_decode(trim( $_POST['email']))),ENT_QUOTES);$oggetto = htmlspecialchars(stripslashes(utf8_decode(trim( $_POST['oggetto']))),ENT_QUOTES);$msg = nl2br(stripslashes(utf8_decode(trim( $_POST['msg']))));$msg = str_replace("<br />" ,"[br]" ,$msg);$msg = htmlspecialchars($msg,ENT_QUOTES);$msg = str_replace("[br]" ,"<br />" ,$msg);$page = "WWW.YASSASSIN.IT";$to = "antoniocorrado@artega.it";
Una volta accertato che i dati vengono dal nostro form,effettuiamo sulle variabili alcune operazioni che non sto quia descrivere, ma per le quali potete trovare maggioriinformazioni su www.php.net.
Inoltre assegno alla variabile $page il nome del sitoed a $to l’indirizzo a cui inviare la nostrae-mail.
Per il resto, non penso servano altre spiegazioni.
$messaggio contiene il testo completo della e-mailcon tanto di formattazione css. Quindi impostiamo leintestazioni ed inviamo la nostra e-mail con:
if (mail($to, $oggetto, $messaggio, $intestazioni)) { print "ris=ok"; } else { print "ris=error"; }
se l’e-mail viene inviata correttamente stampiamoris=ok, in caso contrario ris=error (in seguito vedremo chequesto print servirà a flash per capire sel’e-mail sia stata inviata correttamente).
Vediamo ora la parte in flash
Dall’immagine possiamo vedere com’ècomposto il nostro form: abbiamo il nome del campo a sinistraed un campo di input a destra. In basso i 2 pulsanti perinviare o cancellare i dati inseriti ed infine un campo cheavviserà l’utente se l’e-mail sia statainviata oppure no.
Vediamo più da vicino come formattare il campo ditesto:
Impostiamo Testo di input, il carattere preferito e ladimensione. Vi ricordo che se usate un pixel Font (come nelmio caso) dovete incorporare i caratteri (cliccando sulpulsante “carattere…”).
A questo punto controlliamo le coordinate x e y (in modo chesi trovino su numeri interi). La larghezza invece laimposteremo tramite action script, mentre per il campomessaggio, non dimenticate di impostare la modalitàmultiriga.
Infine, ai vari campi di input diamo un nome di istanza (ioho assegnato nome, email, oggetto, msg ed esito).
Passiamo ai pulsanti.
Come potete vedere, sono due semplici movieClip checontengono 2 frame. Sul primo frame disegniamo il pulsanteallo stato normale, sul secondo allo stato over. Inoltre sulprimo frame aggiungiamo uno stop per evitare che vada inciclo. Ai due pulsanti diamo come nome di istanza invio ecancella.
A questo punto abbiamo finito di lavorare sullo stage epossiamo passare all’action script.
Partiamo dalla formattazione dei campi di input.
campi = new Array("nome" ,"email" ,"oggetto" ,"msg" ,"esito");// array che contiene i nomi di istanza dei campi di input e del campo esito
larghezzaCampi = 200; // larghezza dei campi di input
bordino_n = 0x666666; // bordino dei campi di input allo stato normale (non selezionato)
bordino_s = 0x000000; // bordino dei campi di input se selezionato
sfondo_n = 0xCCCCCC; // sfondo dei campi di input allo stato normale
sfondo_s = 0x999999; // sfondo dei campi di input se selezionato
colore_n = 0x000000; // colore del testo dei campi di input allo stato normale
colore_s = 0xFFFFFF; // colore del testo dei campi di input se selezionato
for(i=0;i<campi.length;i++){with(eval(campi[i])){border = true;
_width = larghezzaCampi;
borderColor = bordino_n;
background = true;
backgroundColor = sfondo_n;
textColor = colore_n;
}
}
Dai commenti si può ben capire come funzioni questocodice. Il ciclo for serve per assegnare ai singoli campi leimpostazioni date prima. Alla fine settiamo il focus nelprimo campo di input (nel nostro caso, nome).
TextField.prototype.onSetFocus = function(){ this.borderColor = bordino_s; this.backgroundColor = sfondo_s; this.textColor = colore_s;}TextField.prototype.onKillFocus = function(){ this.borderColor = bordino_n; this.backgroundColor = sfondo_n; this.textColor = colore_n;}MovieClip.prototype.useHandCursor = false;
Qui abbiamo tre funzioni prototype. Le prime due sonoassociate ai campi di testo. Non fanno altro che cambiare ilbordo, lo sfondo ed il colore del testo quando viene attivatoo disattivato il focus dei campi di input. La terza funzioneinvece, disabilita l’uso della manina su tutti imovieClip.
cancella.onRelease = function() { for (i=0; i<campi.length; i++) { eval(campi[i]).text = ""; // al rilascio del pulsante cancella, svuoto il contenuto di tutti I campi }};invio.onRelease = function() { dati = new LoadVars(); // al rilascio del pulsante invio, creo un nuovo oggetto loadVars() campiVuoti = false; // imposto la variabile campiVuoti su false (ossia non ci sono campi vuoti) for (i=0; i<(campi.length-1); i++) { // scorro l’array campi escluso l’ultimo, che sarebbe il campo esito if (eval(campi[i]).text == "") { // se il campo è vuotocampiVuoti = true; // imposto campiVuoti truebreak; // ed interrompo il ciclo for } dati[campi[i]] = eval(campi[i]).text; // altrimenti assegno all’oggetto dati.nomeCampo il rispettivo valore } if (!campiVuoti) { // se campiVuoti è false (ossia tutti i campi sono stati riempiti) dati.flashMAIL = true; //creiamo la variabile flashMAIL in modo da far capire alla pagina php che //i dati arrivano da flash dati.onLoad = function(ok) {if (ok) { if (this.ris == "ok") { // se ris (variabile ti ritorno dalla pagina php) è ok esito.text = "l'e-mail è stata inviata correttamente"; // significa che l’e-mail è stata inviata e lo indico nel campo di testo esito for (i=0; i<(campi.length-1); i++) {eval(campi[i]).text = ""; // svuoto tutti gli altri campi di input } } else { esito.text = "l'e-mail non è stata inviata"; // se ris non è uguale a ok, l’e-mail non è stata inviata }} else { esito.text = "errore durante l'invio dei dati"; // se php non mi ritorna alcun dato, si è verificato un errore (probabilmente la pagina // non è stata trovata o c’è un errore nella pagina}delete dati; // elimino l’oggetto dati }; dati.sendAndLoad("sendmail.php" , dati, "POST"); // invio i dati alla pagina php con il metodo POST e ricevo i dati nell’oggetto dati } else { delete dati; // elimino l’oggetto dati esito.text = "Tutti i campi sono obbligatori"; // avvisiamo l’utente che tutti i campi sono obbligatori }};cancella.onRollOver = function() { this.nextFrame();// al rollOver sul pulsante cancella passiamo al frame successo del pulsante};cancella.onRollOut = cancella.onReleaseOutside=function () { this.prevFrame();// al rollOut del pulsante cancella torniamo al frame precedente (ossia il primo)};invio.onRollOver = function() { this.nextFrame();// come il pulsante cancella};invio.onRollOut = invio.onReleaseOutside=function () { this.prevFrame();// come il pulsante cancella};
Abbiamo finito :-) Ora non vi resta che provare.
- Articolo precedente Creiamo dinamicamente un grafico usando Php, MySql e Flash (Parte III)
- Articolo successivo Visualizzare immagini random immagazzinate in un database