Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Formulaire de contact Flash / PHP avec Flash Builder ou Flash Professional CS5

Compatible Flash Builder 4. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par slyc3 (DOMIN Steve), le 30 septembre 2010

Bonjour et bienvenue.
Dans ce tutoriel nous allons parler de la façon de créer un formulaire de contact avec Flash Professional CS5 OU Flash Builder. Les sources pour Flash Professional CS3 sont également disponibles.

La réalisation d’un formulaire de contact est une étape quasi indispensable lors de la création d’un site utilisant Flash.
Par formulaire de contact, on veut dire un formulaire à remplir qui permet à l'utilisateur d'envoyer un message. Par exemple:

On désire que quand le formulaire est rempli et le bouton “envoyer” pressé, un mail reprenant les informations du formulaire soit envoyé à une adresse donnée. Cependant Flash permet seulement la création de la partie client du formulaire, à savoir l’affichage d’une interface graphique qui permet de récupérer les données auprès du visiteur. On ne peut pas directement demander à Flash, en Actionscript, d'envoyer un mail. Nous avons besoin de passer par un script côté serveur qui se chargera de récupérer et de traiter les données envoyé par Flash à la validation du formulaire, et d'envoyer le mail.

Le script côté serveur peut être par exemple en PHP, en Java ou en C#. Dans ce tutoriel nous utiliserons PHP. L'application ne pourra donc fonctionner qu'avec un serveur le supportant.

Premièrement, je vous expliquerai sommairement comment installer un environnement serveur local. L'installation d'un serveur local vous permettra de tester “chez vous” le formulaire et l'envoi des mails, avant de mettre le tout sur le véritable serveur. Si ce concept vous échappe vous pouvez lire ceci.

Ensuite nous concevrons le formulaire Flash, et pour finir je vous fournirai le script PHP sans l'expliquer, ce tutoriel n'étant pas un tutoriel sur le PHP. Cependant si n’avez vraiment aucunes notions en PHP, que vous souhaitez en savoir un petit plus avant de commencer, ou que mes explications ne vous suffisent pas, je vous conseille de vous rendre sur ce site.

Prérequis
  • Connaitre les notions de base d'utilisation de Flash Professional CS5 OU celle de Flash Builder.
  • Des notions de PHP vous aideront à comprendre le script PHP, mais vous n'êtes pas obligé de le comprendre pour l'utiliser ;).

Pour réaliser le formulaire avec Flash Builder, c'est ci-dessous. Pour le faire avec Flash CS5, c'est plus bas.

Mise en place d’un environnement serveur local

Avec Mac OS X

La mise en place d’un environnement serveur local avec Mac OS X est très simple.

Deux méthodes :

1- Dans les préférences systèmes d’OS X rendez-vous dans la section Partage (Sharing) et activez Partage web (Web sharing).

  2- Téléchargez et installez un utilitaire prêt à l’emploi : MAMP. Voici le lien : http://www.mamp.info/en/mamp/index.html Une fois ce logiciel installé vous aurez un serveur complètement fonctionnel à disposition. Tapez localhost/MAMP pour accéder à la page d’accueil de votre serveur.

Avec Windows

Je n’ai pas pu réaliser de mini-guide pour l’installation d’un environnement serveur sous Windows cependant, avec un utilitaire tel que Wamp Server 2.0, c’est aussi simple que l’installation de MAMP sous Mac OS X (Partie 2 de la section “Avec Mac OS X”).

Pour le télécharger : http://www.wampserver.com/

Si vous avez besoin d’aide pour l’installation ou la configuration, n’hésitez pas à me contacter.

Création du formulaire avec Flash Builder

Création de l’interface

La création de l’interface avec Flash Builder n’est qu’une formalité, du moins si on ne veut pas skinner les composants.

Commençons par créer un nouveau projet.
Pour cela, dans le “Package Explorer”, effectuez un clic droit puis sélectionnez New → Flex Project. Je l’ai nommé FormulaireDeContact. Dans la section “Server technology” pour “Application server type” choisissez PHP.

Cliquez sur Next. La page suivante vous demande des informations concernant votre environnement serveur. Remplissez les champs en fonction de votre environnement et cliquez sur Finish.

Votre projet est maintenant créé et doit apparaître dans votre Package Explorer.

Passez en mode Design et ajoutez un Form à votre application. Dans la fenêtre “Insert Form” qui s’affiche, laissez les valeurs par défaut pour la width et la height, à savoir <fit to content>. Placez votre Form en 0,0 et dedans ajoutez 2 TextInput, 1 Text Area et 1 Button. Changez le label de vos composants par “Votre nom”, “Votre email”, “Votre message” et pour le bouton, “Envoyer”.

Voici à peu près à quoi devrait ressembler votre application :

Nous devons maintenant ajouter des ids à chacun de nos composants. Pour cela, repassez en mode Source, et attribuez les ids suivants à vos composants :

  • TextInput “Votre nom” : votreNom_ti
  • TextInput “Votre email” : votreEmail_ti
  • TextArea “Votre message” : votreMessage_ta
  • Button “Envoyer” : envoyer_btn

Pour parfaire un peu l’interface nous allons ajouter un astérisque devant chacun de nos champs textes pour indiquer qu’ils sont obligatoires. Avec Flex ceci est très simple puisqu’il nous suffit de passer à “true” la propriété “required” des FormItems contenant nos champs texte.

Voici le code de notre application à ce stade :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<mx:Form x="0" y="0">
		<mx:FormItem label="Votre nom :" required="true">
			<s:TextInput id="votreNom_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre email" required="true">
			<s:TextInput id="votreEmail_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre message :" required="true">
			<s:TextArea id="votreMessage_ta" />
		</mx:FormItem>
		<mx:FormItem>
			<s:Button id="envoyer_btn" label="Envoyer"/>
		</mx:FormItem>
	</mx:Form>
 
</s:Application>

Validation

Bien que n’étant pas obligatoire l’étape de validation permet d’éviter beaucoup de problèmes, notamment des champs manquant, incomplet ou incorrect. Une adresse email mal formaté (oubli du @, de l’extension) est inutile. Pour éviter cela mettre en place un système de validation nous permettra d’éviter certains écueils et de garantir une certaine consistance des informations. Pas leur véracité, seulement leur validité.

Avec Flex c’est vraiment très simple à mettre en place. En effet, sont déjà inclus dans le framework une grande quantité de “Validator” :

  • StringValidator
  • EmailValidator
  • DateValidator
  • NumberValidator
  • RegExpValidator
  • CreditCardValidator
  • CurrencyValidator
  • PhoneNumberValidator
  • ZipCodeValidator (US & Canada seulement)
  • SocialSecurityNumberValidator (US seulement)

Pour ces “Validator” vous n’avez qu’à configurer les paramètres (la devise, l’expression régulière, le nombre de chiffre maximum pour le numéro de téléphone, le séparateur, etc.), les messages d’erreurs à afficher en cas d’échec de la validation, la source et le nom de la propriété qu’il faut valider pour cette source.

Tout le reste est entièrement automatique. Dès le moment où l’utilisateur quittera le champs auquel est associé un “Validator”, si son contenu ne remplit pas les critères de validation, la bordure du champs devient rouge et un tooltip s’affiche avec le message que vous avez spécifié pour le critère en question.

Autre chose, tout à l’heure nous avons passé la propriété “required” des “FormItem” à “true”. Cette étape est inutile, si ce n’est informer nos utilisateurs, sans la logique de validation qui va avec et qui permet de nous assurer que le champs est effectivement rempli.

Puisqu’un exemple vaut mieux qu’un long discours (j’en ai déjà pas mal dit me direz vous), voici le code après ajout de la logique de validation:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:EmailValidator id="votreEmail_validator" 
						   source="{votreEmail_ti}" property="text"
						   required="true"
						   requiredFieldError="Ce champs est requis"
						   invalidCharError=""
						   tooManyAtSignsError="Il y a plus d'un signe @ dans votre adresse email" />
 
		<mx:StringValidator id="votreNom_validator" 
							source="{votreNom_ti}" property="text"
							required="true"
							requiredFieldError="Ce champs est requis"
							minLength="2" maxLength="100"
							tooShortError="Votre nom doit contenir au minimum deux caractères."
							tooLongError="Votre nom peut contenir au maximum 100 caractères." />
 
		<mx:StringValidator id="votreMessage_validator" 
							source="{votreMessage_ta}" property="text"
							required="true"
							requiredFieldError="Ce champs est requis"
							minLength="3" maxLength="300"
							tooShortError=""
							tooLongError="" />
 
 
	</fx:Declarations>
 
	<mx:Form x="0" y="0">
		<mx:FormItem label="Votre nom :" required="true">
			<s:TextInput id="votreNom_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre email" required="true" >
			<s:TextInput id="votreEmail_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre message :" required="true">
			<s:TextArea id="votreMessage_ta" />
		</mx:FormItem>
		<mx:FormItem>
			<s:Button id="envoyer_btn" label="Envoyer" />
		</mx:FormItem>
	</mx:Form>
 
</s:Application>

Si vous le souhaitez vous pouvez créer vos propres “Validator” en créant une sous-classe de la classe Validator et en implémentant votre propre logique.

Grâce aux 3 “Validators”, nous sommes maintenant assurés que les champs sont valides pour l’envoi des données.
Une amélioration intéressante pourrait être de garder le bouton Envoyer désactivé tant que tous les champs ne sont pas remplis et valides.

Envoi

Maintenant que notre logique de validation est en place nous allons procéder à l’envoi des données et bien sûr informer notre visiteur de l’échec ou la réussite de cet envoi.

Voici donc le code final une fois cette partie ajouté :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
 
	<fx:Script>
	<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.validators.Validator;
 
			protected var alertPopUp:Alert; 
 
			protected function envoyer_btn_clickHandler(event:MouseEvent):void
			{
				var validators:Array = Validator.validateAll([votreEmail_validator, votreMessage_validator, votreNom_validator]);
 
				if(!validators.length)
					service.send();
				else
					alertPopUp = Alert.show("Un ou plusieurs champs sont incorrects ou incomplets");
			}
 
			protected function service_faultHandler(event:FaultEvent):void
			{
				trace("ECHEC:", event.message);
 
				PopUpManager.removePopUp(alertPopUp);
 
				alertPopUp = Alert.show("Échec de l'envoi.", "Échec");
			}
 
 
			protected function service_resultHandler(event:ResultEvent):void
			{
				trace("RESULT:", event.result);
 
				if(event.result == "sent=OK")
				{
					Alert.show();
					reinitialiserFormulaire()
				}
				else if(event.result == "sent=ERREUR")
					Alert.show(, "Erreur");
			}
 
			protected function reinitialiserFormulaire():void
			{
				votreNom_ti.text = "";
				votreEmail_ti.text = "";
				votreMessage_ta.text = "";
 
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<s:HTTPService id="service" 
					   url="./services/mailService.php" 
					   method="POST"
					   showBusyCursor="true"
					   fault="service_faultHandler(event)"
					   result="service_resultHandler(event)"> 
 
			<mx:request xmlns=""> 
				<nomVisiteur>{votreNom_ti.text}</nomVisiteur> 
				<emailVisiteur>{votreEmail_ti.text}</emailVisiteur>
				<messageVisiteur>{votreMessage_ta.text}</messageVisiteur>
			</mx:request> 
 
		</s:HTTPService>
 
		<mx:EmailValidator id="votreEmail_validator" 
						   source="{votreEmail_ti}" property="text"
						   required="true"
						   requiredFieldError="Ce champs est requis"
						   invalidCharError=""
						   tooManyAtSignsError="Il y a plus d'un signe @ dans votre adresse email" />
 
		<mx:StringValidator id="votreNom_validator" 
							source="{votreNom_ti}" property="text"
							required="true"
							requiredFieldError="Ce champs est requis"
							minLength="2" maxLength="100"
							tooShortError="Votre nom doit contenir au minimum deux caractères."
							tooLongError="Votre nom peut contenir au maximum 100 caractères." />
 
		<mx:StringValidator id="votreMessage_validator" 
							source="{votreMessage_ta}" property="text"
							required="true"
							requiredFieldError="Ce champs est requis"
							minLength="3" maxLength="300"
							tooShortError="Votre message est trop court. Il doit contenir au minimum deux caractères."
							tooLongError="Votre message est trop long. Il peut contenir au maximum 300 caractères."" />
 
 
	</fx:Declarations>
 
	<mx:Form x="0" y="0">
		<mx:FormItem label="Votre nom :" required="true">
			<s:TextInput id="votreNom_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre email" required="true" >
			<s:TextInput id="votreEmail_ti" />
		</mx:FormItem>
		<mx:FormItem label="Votre message :" required="true">
			<s:TextArea id="votreMessage_ta" />
		</mx:FormItem>
		<mx:FormItem>
			<s:Button id="envoyer_btn" label="Envoyer"
					  click="envoyer_btn_clickHandler(event) "/>
		</mx:FormItem>
	</mx:Form>
 
</s:Application>

La méthode envoyer_btn_clickHandler() est appelée lors du clic sur le bouton Envoyer. On fait appel à la fonction Validator.validateAll() pour vérifier que tous nos “Validator” sont bien validés. Si le tableau est vide cela signifie que tout nos “Validator” sont ok et qu’on peut donc procéder à l’envoi des données à notre service PHP. Pour cela on fait juste appel à la méthode send() de notre HTTPService ‘service’. Dans le cas où on ne passe pas la validation, une alerte s’affiche indiquant à l’utilisateur qu’il y a des champs manquants ou incorrects.

Notre HTTPService est configuré très simplement :

  • url : correspond à l’URL de notre service PHP (URL relative ou absolue au choix)
  • method : la méthode d’envoi des données
  • showBusyCursor : permet d’afficher un curseur “sablier” signalant à l’utilisateur qu’un traitement est en cours
  • fault : méthode à appeler en cas d’échec de l’envoi.
  • result : méthode à appeler en cas de réussite de l’envoi. L’appel de cette méthode par notre HTTPService ne voudra pas forcément dire que l’envoi de l’email aura marché. Cela nous indique juste que PHP a bien reçu notre requête, à nous de traiter le résultat et de voir si effectivement ou non notre email à été effectué en fonction du code de retour.
  • request : la liste de paramètres à passer lors de l’appel du service.

En cas d’échec de l’envoi, on trace() le message d’erreur et on affiche une “Alert” l’indiquant à l’utilisateur.

En cas de réussite, on vérifie le code de retour : s’il est positif on notifie à l’utilisateur que son message a été envoyé avec succès et on réinitialise le formulaire. S’il est négatif on avertit l’utilisateur mais on laisse le formulaire tel quel. Cela lui permet de réessayer.

Voilà! La création du formulaire avec Flash Builder est maintenant terminée. Il ne vous reste qu’à créer un dossier “services” dans le dossier src de votre projet (dans le package explorer), d’y créer un fichier mailService.php contenant le code PHP que vous pouvez trouver dans la section Sources PHP.

Il reste encore beaucoup de façons d’améliorer ce formulaire, notamment comme je vous en parlais plus haut, l’activation/désactivation du bouton envoyer en fonction de l’état des “Validator”.
On peut bien entendu rajouter autant d’informations que l’on souhaite à ce formulaire : un champ “sujet”, un champ pour que l’utilisateur puisse ajouter un numéro de téléphone, une “Checkbox” pour s’inscrire à une newsletter, etc.
Il suffit de passer toutes ces données en paramètres lors de l’appel du service et de modifier le code PHP en conséquence.

Création du formulaire avec Flash Professional CS5

Création de l’interface utilisateur

Commencez par créer un nouveau projet Actionscript dans Flash Professionnal. Pour cela, à l’ouverture, cliquez sur Actionscript 3.0 en dessous de “Create New” ou faîtes File → New, onglet “General”, Actionscript 3.0. Validez par OK.

Nous allons maintenant créer les calques dont nous aurons besoin pour ce projet. Renommez le calque “Layer 1” “Affichage” et créez un nouveau calque, “AS”.

Plaçons les éléments graphiques sur notre calque “Affichage”.
Pour cela, sélectionnez Window → Components. Une nouvelle fenêtre flottante s’ouvre avec une liste de composants.
Glissez un bouton, 2 “TextInput” et 1 TextArea sur la scène (en vous assurant que c’est bien votre calque “Affichage” qui est sélectionné).
Agrandissez la TextArea en utilisant l’outil “Free Transform Tool”.
Spécifiez un nom d’instance pour chacun des composants que vous venez de déposer sur la scène (cliquez sur le composant et remplissez le champs “Instance name” dans le panneau “Properties”). Personnellement j’ai choisi : votreNom_ti, votreEmail_ti, votreMessage_ta et envoyer_btn.

Puis, changez le label de votre bouton, en cliquant dessus et en changeant la valeur de la propriété “Label” dans le panneau “Component Parameters”.

Enfin créez une zone de texte devant chacun de vos champs pour indiquer à quoi ils correspondent et une autre zone de texte à droite du bouton qui nous servira à afficher des messages d’informations pour avertir l’utilisateur du succès ou de l’échec de l’opération. Choisissez TLF Text comme type de texte et entrez statut_tlftext comme nom d’instance.

Voici à quoi devrait à peu près ressembler votre application à ce point :

Vérifier que votre projet se lance sans problème et passez à l’étape suivante.

Ordre de tabulation

L'ordre de tabulation est l'ordre dans lequel l'utilisateur va pouvoir passer d'un composant à l'autre en appuyant sur la touche TAB de son clavier, pour remplir le formulaire en utilisant uniquement le clavier. Nous voulons qu'il puisse remplir le champ votreNom_ti, puis presser TAB, puis remplir le champ votreEmail_ti, presser TAB, remplir votreMessage_ti, presser TAB et enfin sélectionner envoyer_btn en pressant la touche ESPACE.

Sélectionnez le calque “AS”, effectuez un clic droit sur la première image et cliquez sur “Actions” pour ouvrir le panneau d’édition de code.

Pour changer l’ordre de tabulation, entrez les lignes de code suivantes :

// Définit l'ordre de tabulation
this.votreNom_ti.tabIndex = 1;
this.votreEmail_ti.tabIndex = 2;
this.votreMessage_ta.tabIndex = 3;
this.envoyer_btn.tabIndex = 4;
Pour pouvoir tester il est nécessaire de désactiver les raccourcis clavier de Flash : une fois votre application lancée (CMD+ENTRER ou CTRL+ENTRER), sélectionnez Control → Disable keyboard shortcut.

Réinitialisation du formulaire

Nous allons maintenant créer une méthode permettant de réinitialiser le formulaire. Voici le code final cette fonction :

// Méthode pour réinitialiser le formulaire
function reinitialiserFormulaire():void
{
	votreNom_ti.text = "";
	votreEmail_ti.text = "";
	votreMessage_ta.text = "";
}

Rien de bien sorcier dans cette méthode, on remplace le contenu de la propriété “text” de nos “TextInput” par une chaîne vide.

Bouton “Envoyer”

La seule chose que l’on fait avec le bouton d’envoi, c’est d’ajouter un écouteur d’évènement sur le CLICK, qui va appeler la méthode envoyer_btn_clickHandler quand l'utilisateur presse le bouton. Dans cette méthode, on vérifie juste que la validation a bien réussi et, le cas échéant, on fait appel à la méthode envoyerFormulaire (que nous implémenterons plus tard) ou, si la validation échoue, on informe l’utilisateur de cet échec.

Voici le code:

// Bouton "Envoyer"
this.envoyer_btn.addEventListener(MouseEvent.CLICK, envoyer_btn_clickHandler);
 
function envoyer_btn_clickHandler(event:MouseEvent):void
{
    var error:String = validerFormulaire();
    if(error == "")
        envoyerFormulaire();
    else
        statut_tlftext.text = error;
}

Validation

Dans cette partie nous allons mettre en place la logique de validation qui permettra de vérifier que l’utilisateur a correctement rempli les champs du formulaire.
La méthode teste que les champs ne sont pas vides et que l'adresse email est bien formée. S'il y a un champ mal rempli elle renvoie le message d'erreur correspondant, sinon elle renvoie une chaîne de caractères vide.
En cas d'erreur nous pourrons indiquer à notre visiteur que la validation a échouée, et pourquoi.

Voici le code de cette fonction :

// Méthode de validation du formulaire
function validerFormulaire():String
{
    var nom:String = votreNom_ti.text;
    var email:String = votreEmail_ti.text;
    var message:String = votreMessage_ta.text; 
 
    var emailAt:Number;
    var emailPoint:Number;
 
    if(nom == "")
        return "Le champ \"Votre nom\" ne doit pas être vide.";
    else
        if(message == "")
            return "Le champ \"Votre message\" ne doit pas être vide.";
        else
            if(email == "")
                return "Le champ \"Votre email\" ne doit pas être vide.";
            else
            {
                // On vérifie qu'il y a bien un @ dans l'adresse
                emailAt = votreEmail_ti.text.indexOf("@");
                if(emailAt == -1)
                    return "Votre adresse email n'est pas valide.";
 
                // On vérifie qu'il y a bien un point dans l'adresse
		// Que ce point est situé après le @ et qu'il y a au moins 1 caractère entre ce point et le @
		// Que ce point n'est pas le dernier caractère de l'adresse
                emailPoint = votreEmail_ti.text.indexOf(".", emailAt);
                if(emailPoint == -1 || emailPoint - emailAt <= 1 || emailPoint == votreEmail_ti.text.length - 1)
                    return "Votre adresse email n'est pas valide.";
            }
 
    return "";
 
}

Comme vous pouvez le voir, elle est très simple : dans un premier temps on vérifie qu’aucun des champs n’est vide. Ensuite on vérifie que l’email possède bien un @, qu’il y a un point après le @ et qu’il y a un caractère entre le @ et ce point. Si tous ces tests sont passés avec succès, alors on retourne une chaîne vide.

Envoi

Nous voici rendu à la dernière partie du processus de création de ce formulaire avec Flash Professional CS5 : l’envoi.

Pour cette partie nous avons besoin de trois méthodes :

  • envoyerFormulaire()
  • service_completeHandler()
  • service_ioErrorHandler()

Dans la méthode envoyerFormulaire, nous créons une URLRequest, lui assignons des paramètres et spécifions le type de requête (POST). Ensuite, nous créons un URLLoader qui charge notre URLRequest. En cas de réussite, on fait appel à notre deuxième méthode.

Dans cette méthode, on récupère le paramètre ‘sent’ en créant un nouvel object URLVariables qui contient les données retournées par notre service. En fonction du code de retour on affiche un message pour que l’utilisateur puisse savoir le résultat de son envoi. Si l’envoi à réussi, nous réinitialisons aussi le formulaire.

En cas d’échec, on fait appel à la méthode service_ioErrorHandler. Cette méthode est appelée si le service est injoignable (l’URL est erronée, n’existe plus, …). Elle ne sera pas appelée s’il y a un problème dans votre script PHP, ce sont deux choses bien différentes.

Pour en savoir plus sur l’envoi de données en ActionScript 3, je vous invite à lire ce chapitre tiré du livre “Pratique de l’ActionScript 3” de Thibault Imbert.

Voici le code de cette dernière partie :

// Envoi du formulaire
function envoyerFormulaire():void
{
	// URLRequest
	var requete:URLRequest = new URLRequest("./services/mailService.php");	
 
	// Ici on définit les variables qui seront envoyés au service
	var params:URLVariables = new URLVariables();
	params.nomVisiteur = votreNom_ti.text;
	params.emailVisiteur = votreEmail_ti.text;
	params.messageVisiteur = votreMessage_ta.text;
 
	requete.method = URLRequestMethod.POST;			
	requete.data = params;
 
	// URLLoader
	var service:URLLoader = new URLLoader();
	service.dataFormat = URLLoaderDataFormat.VARIABLES;
	service.addEventListener(Event.COMPLETE, service_completeHandler);
	service.addEventListener(IOErrorEvent.IO_ERROR, service_ioErrorHandler);	
 
	service.load(requete);
}
 
function service_ioErrorHandler(event:IOErrorEvent):void
{
	trace("Impossible de joindre le service.");
	statut_tlftext.text = "Impossible de joindre le service.";
}
 
 
function service_completeHandler(event:Event):void
{
	var loader:URLLoader = event.target as URLLoader;
	var URLVars:URLVariables = new URLVariables(loader.data);
 
	trace("MESSAGE", URLVars);
 
	if(URLVars.sent == "OK")
        {
		statut_tlftext.text = "Votre message a été envoyé avec succès.";
                reinitialiserFormulaire();
        }
	else if(URLVars.sent == "ERREUR")
		statut_tlftext.text = "Votre message n'a pas pu être envoyé";
}

Test du projet

Vous avez fini la création de formulaire. Pour tester le bon fonctionnement du formulaire, notamment l’envoi des données au script PHP, vous avez besoin de placer les fichiers dans la racine web de votre environnement local ou d’uploader les fichiers sur un serveur distant.

Par exemple, pour tester le projet en local, il vous suffit de créer un dossier ‘formulaireFlashCS5’ à la racine de votre environnement (par défaut, avec Mac OS X, /Applications/MAMP/htdocs). Dans ce dossier, copier votre fichier SWF et le fichier textLayout_1.0.0.595.swz. Ensuite, créer un dossier ‘services’, dans ce dossier, créer un fichier mailService.php et copier le code du script PHP que vous trouverez plus loin dans ce tuto.

Pour tester, lancez votre navigateur favoris et allez à l’adresse de votre fichier SWF, par exemple : http://localhost/formulaireFlashCS5/formulaire.swf

Sources PHP

Savoir coder en PHP n’étant pas l’objet de ce tutoriel, j’ajoute ci-dessous le code du service qui sera appelé par votre application.

<?php
 
// On récupère les variables envoyés par Flash                 
if(isset($_POST['nomVisiteur'])) $nomVisiteur = $_POST['nomVisiteur'];     
 
if(isset($_POST['emailVisiteur'])) $emailVisiteur = $_POST['emailVisiteur'];    
 
if(isset($_POST['messageVisiteur'])) $messageVisiteur = $_POST['messageVisiteur'];   
 
// Adresse de réponse
$mail_to = "slyc3isback@me.com";
 
// Nom de l'expéditeur                     
$from = "Formulaire de contact";
 
// L'objet
$sujet = "Demande de contact";
 
// Header du mail
$headers = "Content-Type: text/html; charset=\"UTF-8\";\r\n";
$headers .= "From: Formulaire de contact <admin@formulaire.com>; \r\n"; 
 
// Message au format HTML
$message = <<<EOF
<br/>
<b>Mail envoyé par: </b> {$from}<br/><br/>
 
---------- Infos sur le visiteur -------------<br/><br/>
 
<b>Nom:</b> {$nomVisiteur}<br/>
<b>E-mail:</b> {$emailVisiteur}<br/><br />    
 
----------- Message du visiteur -------------<br/><br/>
 
<b>Message:</b> {$messageVisiteur}<br/><br/>
 
EOF;
 
// Appel de la fonction 'mail'
$OK = mail ($mail_to, $sujet, $message, $headers);
 
// En fonction du retour, on affiche le message suivant sent=OK ou sent=ERREUR
if ($OK)
{
	echo("sent=OK");
} 
else 
{
	echo("sent=ERREUR");
}
 
?>

Conclusion

Ce tutoriel est maintenant fini, j’espère qu’il vous aura aidé dans cette étape redondante et essentielle qu’est la création d’un formulaire de contact. Vous pouvez appliquer les méthodes de ce tutoriel à la création de n’importe quel type de formulaire (inscription newsletter, etc.). Il reste beaucoup de choses à améliorer, notamment au niveau de la validation dans la version Flash mais j’espère que cela vous aura donné un point de départ. Bon dev!

Les sources : formulaire_flash_pro-flash_builder.zip
Contient la version Flash Builder, la version Flash Pro CS5, la version Flash CS3 et le PDF du tuto.

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 mailService.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.

Pour aller plus loin

N’hésitez pas à me contacter directement pour toutes questions (slyc3isback[at]me.com) ou sur le forum (lien ci-dessous) pour faire profiter tout le monde de votre expérience.