Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Formulaire Flash / PHP

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash 8. Cliquer pour en savoir plus sur les compatibilités.Par dada, le 09 avril 2007
  • Révision : mim - le 28/06/2006

Vous trouverez un tutoriel semblable en Actionscript 3 pour Flash CS3 et suivants ici.

But de ce tutoriel

Ce tutoriel aborde la création d'un formulaire avec Flash8. On utilisera quelques composants V2, le formulaire sera mis en forme en texte simple et en HTML et envoyé à un script PHP qui s'occupera de l'envoi de l'email.

Ce formulaire permettra à un utilisateur de renseigner ses nom, prénom, adresse email, de spécifier s'il souhaite recevoir une lettre d'information et d'ajouter un éventuel commentaire personnel.

Nous utiliserons ActionScript2 pour profiter du typage strict des données.

Préparation de l'interface utilisateur

Placement des composants sur la scène

Commençons par créer un nouveau document FLA en 600×400 px et posons sur un même calque (par exemple nommé “scène”) les différents composants utilisés par notre interface.
La fenêtre des composants est accessible via le raccourci clavier “CTRL F7”. Ouvrez ensuite le sous-menu “User Interface” et faites glisser sur la scène :

  • 3 TextInput : nom, prénom, email,
  • 2 TextArea : un pour le commentaire de l'utilisateur et un pour le tenir informé du bon déroulement (ou pas ^^) du formulaire,
  • 1 CheckBox : s'il est sélectionné, l'utilisateur souhaite recevoir la lettre d'informations,
  • 1 Button : pour valider l'envoi du formulaire

Ajoutons à ceci quelques TextField (champs de texte) statiques pour indiquer à l'utilisateur à quoi correspondent les différents champs.

Pour finir, indiquons-lui quels sont les champs qui doivent obligatoirement être renseignés avec un petit astérisque rouge.

Au final, vous devriez obtenir quelque chose comme çà, votre touche artistique en plus ;-) :

formulaire_flash_php.jpg

Donner des noms d'occurence aux composants

Comme nous aurons besoin d'accéder aux occurences des composants via du code ActionScript, nous allons leur donner des noms d'occurence :

  • nom_ti pour le champs nom,
  • prenom_ti pour le champs prénom,
  • email_ti pour le champs email,
  • commentaire_ta pour le champs commentaire,
  • lettre_cb pour la checkBox,
  • sortie_ta pour le champs destiné à l'affichage des erreurs et validation du formulaire,
  • envoyer_mc pour le bouton d'envoi.

L'interface est prête, ouf. :-)
Nous allons maintenant nous attaquer au plus intéressant : le code ActionScript !

Le code ActionScript

Vision d'ensemble

Avant de nous lancer tête baissée dans le code, faisons une petite liste des actions nécessaires au fonctionnement d'un formulaire :

  • Vérifier la validité des informations. Par exemple, s'assurer que les champs obligatoires sont renseignés, que l'adresse email ressemble à une adresse valide, etc,
  • Mettre en forme le message de l'email, nous le ferons en texte simple et en HTML,
  • Envoyer les informations au script PHP, pour qu'il envoie le mail,
  • Recevoir un retour du script PHP, pour s'assurer qu'aucun problème n'est survenu côté PHP,
  • Tenir l'utilisateur au courant de l'avancement des opérations, qu'il sache s'il a bien rempli le formulaire, si l'envoi s'est bien déroulé, etc,

Nous pourrions encore détailler certaines opérations, mais nous y viendrons par la suite. ;-)

Un peu de préparation

Commençons pas créer un calque nommé “as - init et fonctions” sur lequel nous écrirons le code ActionScript.

Typer les données pour plus de rigueur

Afin d'utiliser le typage strict de l'AS2, nous allons référencer les composants par le biais de variables en indiquant explicitement leur type. Celà nous permettra de profiter de l'aide à la saisie et facillitera la correction d'erreur par le compilateur (plutôt que par nous-même ;-)).

La première chose à faire est d'importer les classes utilisées, pour que le compilo en connaisse les définitions :

import mx.controls.TextInput;
import mx.controls.TextArea;
import mx.controls.CheckBox;
import mx.controls.Button;

Ensuite, on référence nos composants en indiquant le type de donnée de chaque variable :

var tiNom:TextInput = this.nom_ti;
var tiPrenom:TextInput = this.prenom_ti;
var tiEmail:TextInput = this.email_ti;
var taCommentaire:TextArea = this.commentaire_ta;
var taSortie:TextArea = this.sortie_ta;
var cbLettre:CheckBox = this.lettre_cb;
var mcEnvoyer:Button = this.envoyer_mc;

Par la suite, on utilisera ces variables pour accéder aux composants. Si vous deviez changer le ciblage d'un compo, il n'y aurait qu'à le changer ici, plutôt que partout où il est utilisé.

Ces étapes ne sont pas indispensables, mais peuvent nous faciliter le code par la suite.

Initialiser les composants

Si vous désirez personnaliser les composants, vous pouvez le faire ici. Pour l'instant nous allons juste nous contenter de modifier le rendu du TextArea destiné aux messages d'erreur et de confirmation. Nous allons supprimer son fond (background) et son contour (border), lui donner une police de couleur rouge en italique et faire en sorte qu'il ne soit pas sélectionnable :

taSortie["depthChild0"]._visible = false;
taSortie.setStyle("color", "0xB13501");
taSortie.setStyle("fontStyle", "italic");
taSortie.label.selectable = false;

La première ligne est en fait un “hack”. Ce n'est pas la méthode conseillée par Macromedia pour supprimer le fond et le contour d'un TextArea, mais c'est la plus simple et la moins contraignante. ;-)

Si vous n'avez pas défini le label du CheckBox dans les paramètres du composant, vous pouvez le faire en code :

cbLettre.label = "Recevoir la lettre d'information";
Définir les ordres de tabulation

Ceux qui sont habitués à remplir des formulaires (demandez à un employé de La Poste ^^) connaissent l'importance de la touche de tabulation.

Par défaut, l'ordre de tabulation est l'ordre dans lequel les composants ont été glissés sur la scène, mais nous pouvons le redéfinir grâce à la propriété tabIndex. Les compos pour lesquels nous n'aurons pas défini tabIndex seront exclus de l'ordre de tabulation, comme notre TextArea destiné aux messages d'erreur.

tiNom.tabIndex = 1;
tiPrenom.tabIndex = 2;
tiEmail.tabIndex = 3;
cbLettre.tabIndex = 4;
taCommentaire.tabIndex = 5;
mcEnvoyer.tabIndex = 6;

Avec la touche TAB on se déplace vers l'index supérieur ; et vers l'index inférieur avec la combinaison de touches “MAJ TAB”.

Note : si vous souhaitez tester çà dans Flash, il est nécessaire de “désactiver les raccourcis clavier” dans le Flash Player intégré à Flash (menu “Contrôle” du Flash Player après avoir fait “CTRL ENTREE”).

Stocker les valeurs récurrentes dans des variables

Allez, pour finir cette préparation, car nous aimons bien faire les choses :-) nous allons stocker les valeurs auxquelles on aura souvent besoin d'accéder dans des variables. Celà rendra le code plus lisible et un poil plus optimisé.
Nous ne connaissons pas encore les valeurs à stocker, mais nous pouvons déclarer les variables qui les contiendront pour qu'elles soient accessibles de n'importe quel script du formulaire.

var nom:String;
var prenom:String;
var email:String;
var recevoirLettre:Boolean;
var commentaire:String;

Rédiger les fonctions outils

Nous allons maintenant rédiger les fonctions qui permettront d'effectuer les opérations décrites dans la section Vision d'ensemble.

Afficher les messages à l'attention de l'utilisateur

Commençons simple, on sait qu'on va devoir afficher des messages de confirmation ou d'erreur, alors faisons une petite fonction toute simple :

function afficherEnSortie(pChaine:String):Void
{
	taSortie.text = pChaine;
}

Si l'on devait complexifier cet affichage d'erreur, par exemple en utilisant une fenêtre d'alerte, on pourrait alors modifier le contenu de cette fonction.

Réinitialiser le formulaire

Continuons dans la simplicité avec une fonction qui sera exécutée après l'envoi du mail (sans erreur) pour réinitialiser le formulaire. Elle vide les champs de texte et décoche le CheckBox :

function reinitFormulaire():Void
{
	tiNom.text = tiPrenom.text = tiEmail.text = taCommentaire.text = "";
	cbLettre.selected = false;
}
Valider le formulaire

Avant de mettre en forme le mail et d'envoyer les infos au script PHP, nous allons nous assurer que le formulaire est correctement rempli. Uniquement les champs nom, prénom et email sont obligatoires, nous n'aurons pas besoin de vérifier les autres.
Pour le nom et le prénom, nous allons uniquement vérifier que le champs est rempli (propriété text différente d'une chaîne vide -””-), pour l'email nous allons faire de même, plus :

  • vérifier qu'il contient un ”@”
  • vérifier qu'il contient un ”.” au moins un caractère après le ”@”

Ces vérifications sont assez sommaires, mais dans le contexte de ce tutoriel nous n'en ferons pas plus (libre à vous de les améliorer ^^).

Première chose à faire dans cette fonction, récupérer les valeurs des champs dans les variables préalablement déclarées, car cette fonction sera la première appellée lors de la demande d'envoi.
Ensuite, nous déclarons une variable locale à la fonction, “erreur”, contenant une chaîne vide. Nous stockerons dans cette variable les différentes erreurs recontrées et retourneront sa valeur.
Si aucune erreur n'est recontrée, c'est une chaîne vide qui sera retournée.

function validerFormulaire ():String
{
	nom = tiNom.text;
	prenom = tiPrenom.text;
	email = tiEmail.text;
	commentaire = taCommentaire.text;
	recevoirLettre = cbLettre.selected;
 
	var erreurs:String = "";
 
	if (nom == "") erreurs += "Merci de remplir le champ 'nom'" + newline;
	if (prenom == "") erreurs += "Merci de remplir le champ 'prénom'" + newline;
	if (email == "") erreurs += "Merci de remplir le champ 'email'" + newline;
	else
	{
		var atIndex:Number = email.indexOf("@");
		var dotIndex:Number = email.indexOf(".", atIndex);
		if (atIndex == -1 || dotIndex == -1 || dotIndex - atIndex <= 1)
			erreurs += "L'email n'est pas valide" + newline;
	}
	return erreurs;
}

Lorsque nous appellerons cette fonction, nous vérifierons son retour : si c'est une chaîne vide le formulaire est OK, sinon il faudra avertir l'utilisateur en utilisant le message d'erreur retourné. ;-)

Mettre en forme le message du mail

La mise en forme se passe en deux étapes, la première est la mise en forme du message en texte brut.

Pour garder un peu de clarté dans le code, on peut faire çà sur plusieurs lignes.

La propriété de MovieClip _url nous permet d'indiquer quelle est l'URL du swf d'où provient le formulaire.

Si l'utilisateur a coché la CheckBox, on ajoute une phrase concernant la lettre d'informations. De même s'il a écrit un commentaire, on l'ajoute. On retourne le message mis en forme.

function formerMessageText ():String
{
	var message:String = "Formulaire :";
	message += "Origine : " + this._url + "\r\n";
	message += "Nom : " + nom + "\r\n";
	message += "Prénom : " + prenom + "\r\n";
	message += "Adresse email : " + email +"\r\n";
	if (recevoirLettre)
		message += "Personne souhaitant recevoir la lettre d'information.\r\n";
	if (commentaire != "")
		message += "Commentaire :\r\n";
		message += commentaire;
 
	return message;
}

Nous allons utiliser des balises HTML pour mettre le message en forme.

Nous ne sommes pas limité aux balises reconnues par Flash car le logiciel qui lira le message sera un client mail (qui possède tout de même ses limites).

Entre les balises head, nous pouvons déclarer une feuille de style qui, pour l'instant, est très sommaire, mais deviendra sûrement un chef d'oeuvre en passant entre vos mains. :-) On fait attention à bien refermer les balises ouvertes et on retourne le message mis en forme.

function formerMessageHtml ():String
{
	var message:String = "<html><head><style type='text/css'> p{font: 12px Arial} </style></head><body>";
	message += "<h4>Formulaire : </h4>";
	message += "<p>Origine : " + this._url + "</p>";
	message += "<p>Nom : " + nom + "<br />";
	message += "Prénom : " + prenom + "<br />";
	message += "Adresse email : <a href='mailto:" + email + "'>" + email +"</a></p>";
	if (recevoirLettre)
		message += "<p>Personne souhaitant recevoir la lettre d'information.</p>";
	if (commentaire != "")
		message += "<p><u>Commentaire :</u><br />";
		message += commentaire;
	message += "</p></body></html>";
 
	return message;
}
Envoyer les infos au script PHP

Pour se faire nous allons utiliser la classe LoadVars.

Au début de la fonction “envoyerMail” nous allons verrouiller le bouton d'envoi, pour éviter que l'utilisateur clique plusieurs fois dessus.

Nous créons ensuite deux objets (instances) LoadVars, un pour l'envoi (il contiendra donc les variables à envoyer) et un pour le retour du script PHP (il contiendra les variables retournées par PHP).

L'objet LoadVars d'envoi contiendra sous forme de propriétés les valeurs pour :

  • le sujet du mail,
  • le message, formaté en texte,
  • le message, formaté en HTML,
  • l'expéditeur du mail (nom et prénom),
  • l'adresse mail de réponse, qui servira si nous répondons au mail reçu du formulaire.

Toutes les propriétés ajoutées sur l'objet LoadVars d'envoi seront accessibles côté PHP.

La classe LoadVars met à notre disposition un gestionnaire “onLoad”, appellé dès le retour d'exécution du PHP. On référence dans ce gestionnaire une fonction “onMailEnvoye” (que nous implémenterons après), qui sera donc exécutée en retour de l'envoi au PHP.

La méthode “sendAndLoad” permet d'appeller le script PHP, de définir en second paramètre l'objet LoadVars qui sera utilisé pour récupérer le retour de PHP et la méthode d'envoi des variables, ici POST.

Pour terminer, on indique à l'utilisateur que les données sont en cours d'envoi.

function envoyerMail ():Void
{
	mcEnvoyer.enabled = false;
 
	var envoyeur:LoadVars = new LoadVars();
	var receveur:LoadVars = new LoadVars();	
 
	envoyeur.sujet = "Formulaire";
	envoyeur.messageText = formerMessageText ();
	envoyeur.messageHtml = formerMessageHtml ();
	envoyeur.expediteur = prenom + " " + nom;
	envoyeur.mailReponse = email;
 
	receveur.onLoad = onMailEnvoye;
 
	envoyeur.sendAndLoad("php/envoyer_mail.php", receveur, "POST");
	afficherEnSortie("Envoi en cours...");
}
Recevoir les infos de retour d'exécution du script PHP

OK, nous avons envoyé tout çà à PHP, mais qu'en a-t'il fait ? Est-ce que tout s'est bien déroulé ou y-a-t-il eu un problème ?

Si tout s'est bien déroulé et que le mail est parti, on peut formater notre formulaire en appellant la fonction “reinitFormulaire”.

Dans le cas contraire, même si notre pauvre utilisateur ne pourra rien y faire, il faudrait tout de même l'avertir qu'il y a eu un problème lors de l'envoi. Il pourra toujours réessayer plus tard ou nous prévenir que “çà marche pas !”. :-P

Le premier moyen pour détecter un problème nous est fourni par la classe LoadVars, méthode onLoad, grâce au paramètre “pSuccess”.
Si ce paramètre a pour valeur false, c'est probablement que le script PHP n'a pu être trouvé.

Quels autres problèmes pourrait-on rencontrer ?

  • Les variables attendues par PHP en méthode POST n'ont pas été transmises (faute de frappe dans les noms de variables, mauvaise méthode d'envoi, etc)
  • Le mail n'a pu être envoyé et la fonction PHP “mail” renvoie false.

Dans le script PHP que nous verrons à la fin, nous renvoyons une variable “erreurPHP” qui contient soit un message d'erreur, à afficher pour l'utilisateur, soit une chaîne vide (aucune erreur), comme le fait notre fonction AS validerFormulaire. Et dans la fonction qui suit, nous vérifions la valeur de cette variable, soit pour formater le formulaire, soit pour afficher les erreurs.

A noter qu'on commence par déverrouiller le bouton d'envoi.

function onMailEnvoye (pSuccess:Boolean):Void
{
	mcEnvoyer.enabled = true;
	if (!pSuccess)
	{
		afficherEnSortie("Problème avec le script PHP.");
	}
	else if (this.erreurPHP == "")
	{
		afficherEnSortie("L'envoi s'est terminé avec succès.");
		reinitFormulaire();
	}
	else
	{
		afficherEnSortie("Erreurs PHP : \n" + this.erreurPHP);
	}
}

Notez que la fonction onMailEnvoye s'exécute dans la portée de l'objet LoadVars receveur. Le this dans cette fonction cible donc cet objet, et on s'en sert pour accéder aux variables renvoyées par PHP, elles sont des propriétés de cet objet.

Actions de l'utilisateur

Et voilà, nos fonctions sont prêtes, nous n'avons plus qu'à déclencher leur exécution via le bouton “envoyer”.

Nous pouvons éventuellement les placer sur un autre calque nommé “as - actions”.

Le code est ici sommaire : on vérifie la validité du formulaire, s'il n'y a pas d'erreurs on envoie le formulaire, sinon on informe l'utilisateur des erreurs à corriger.

mcEnvoyer.onRelease = function():Void
{
	var erreurs:String = validerFormulaire();
	if (erreurs == "") envoyerMail();
	else afficherEnSortie(erreurs);
}

Le code PHP

Terminons ce tutoriel avec le code PHP présent dans le fichier envoyer_mail.php.

La fonction “decoder” permet de convertir les chaînes de caractère reçues de Flash (en UTF-8) en ISO-8859-1. On enlève aussi les caractères d'échappement utilisés pour échapper les caractères comme les guillemets. La fonction “decoderHtml” ajoute la fonction nl2br qui converti les retours à la ligne de type “\r” en ”<br />”. Les seuls qui sont envoyés par Flash dans cet exemple proviennent du TextArea “taCommentaire”. Celà nous permet d'une manière simple de conserver dans le mail au format HTML les retours à la ligne entrés par l'utilisateur.

Ensuite, comme pour la validation du formulaire dans le FLA (fonction validerFormulaire), nous déclarons une variable d'erreur contenant une chaîne vide, que nous remplirons avec les éventuels messages d'erreur.
On ajoute une erreur si une variable censée être transmise n'est pas reçue puis, à la fin du script, si la fonction mail nous renvoie false.
Cette variable est finalement transmise à Flash, via le gestionnaire onLoad de LoadVars, après encodage en UTF-8.

Le mail est ensuite formé avec ses deux parties texte brut et html séparés par une frontière. Après préparation des entêtes (headers), la fonction mail… envoie le mail ! :-D

N'oubliez pas de remplacer l'adresse mail d'envoi (ici : destinataire@fai.fr) par celle de votre choix. ;-)

<?php
function decoder($texte){
        $texte = utf8_decode($texte); // converti en iso-8859-1
        $texte = stripslashes($texte); // élimine les anti-slashs d'échappement
        $texte = nl2br($texte); // converti les retours  en <br />
        $texte = trim($texte); // élimine les '\n', '\r', '\t' etc
        return $texte;
}
 
$erreurPHP="";
 
/* Paragraphe à decommenter pour tester le script php seul, sans le fla
$_POST['sujet'] = 'formulaire Test';
$_POST['messageHtml'] = '<html><body>Salut<br /> mon cher<br /><br />Bye</body></html>';
$_POST['messageText'] = "Salut  mon cher  Bye";
$_POST['expediteur'] = "expediteur@fai.fr";
$_POST['mailReponse'] = "expediteur@fai.fr";
*/
 
if(isset($_POST['sujet']))$sujet = $_POST['sujet'];
else $erreurPHP .= "Variable 'sujet' non transmise\n";
 
if(isset($_POST['messageHtml']))$messageHtml = $_POST['messageHtml'];
else $erreurPHP .= "Variable 'message' non transmise\n";
 
if(isset($_POST['messageText']))$messageTexte = $_POST['messageText'];
else $erreurPHP .= "Variable 'message' non transmise\n";
 
if(isset($_POST['expediteur']))$expediteur = $_POST['expediteur'];
else $erreurPHP .= "Variable 'expediteur' non transmise\n";
 
if(isset($_POST['mailReponse']))$mailReponse = $_POST['mailReponse'];
else $erreurPHP .= "Variable 'mailReponse' non transmise\n";
 
if($erreurPHP != "") echo utf8_encode("erreurPHP=".$erreurPHP);
else
{
	$to = "destinataire@fai.fr";
	$sujet = decoder($sujet);
	$expediteur = decoder($expediteur);
	$messagehtml = decoder($messageHtml);
	$messageTexte = utf8_decode($messageTexte);
 
	 //-----------------------------------------------
     //GENERE LA FRONTIERE DU MAIL ENTRE TEXTE ET HTML
     //-----------------------------------------------
 
     $frontiere = '-----=' . md5(uniqid(rand()));
 
     //-----------------------------------------------
     //HEADERS DU MAIL
     //-----------------------------------------------
 
     $headers = 'From: '.$expediteur.' <'.$mailReponse.'>'."\n";
     $headers .= 'Return-Path: <'.$mailReponse.'>'."\n";
     $headers .= 'MIME-Version: 1.0'."\n";
     $headers .= 'Content-Type: multipart/alternative; boundary="'.$frontiere.'"'."\n";
	 $headers .= 'Content-Transfer-Encoding: 8bit';
 
     //-----------------------------------------------
     //MESSAGE TEXTE
     //-----------------------------------------------
     $message = "This is a multi-part message in MIME format\n\n";
 
     $message = "--$frontiere\n";
     $message .= "Content-Type: text/plain; charset=UTF-8\n";
     $message .= "Content-Transfer-Encoding: 8bit\n\n";
     $message .= $messageTexte."\n\n";
 
 
	 //-----------------------------------------------
     //MESSAGE HTML
     //-----------------------------------------------
     $message .= "--$frontiere\n";
     $message .= "Content-Type: text/html; charset=UTF-8\n";
     $message .= "Content-Transfer-Encoding: 8bit\n\n";
     $message .= $messageHtml."\n\n";
 
     $message .= "--$frontiere--\n"; 
 
	$mail_OK = mail($to, $sujet, $message, $headers) ;
 
 
	if (!$mail_OK)
	{
		$erreurPHP .= "Problème lors de l'envoi du mail";
 
	}
	echo utf8_encode("erreurPHP=".$erreurPHP);
}
?>

Note : chez certains FAI, la fonction mail est désactivée.
Note 2 : Hotmail (et peut être d'autre) filtre les mails provenant des pages perso free. Les mails ne sont donc pas reçus.


Télécharger les sources


Pour toute question ou remarque concernant ce tuto, n'hésitez-pas à vous faire entendre sur le forum flash Mediabox. :-)


par dada - 09/04/2007 18:44
ajout du multipart dans le mail par mim - 28/07/07 mise à jour 16/04/08
Merci à Tonic d'avoir consolidé le code PHP


Note sur la sécurité

Par lilive, le 17/05/2011

Ce tutoriel n'aborde pas le sujet de la sécurité, ni ce qu'il est possible de faire pour éviter le spam. C'est-à-dire que quelqu'un qui enverrait en boucle au script envoyer_mail.php les bonnes données POST pourrait générer automatiquement des milliers d'envoi de mails. Gaobonga nous fait ici une remarque utile à ce sujet.