Cet exemple consiste à réaliser une animation Flash permettant de remplir un formulaire d’inscription, une confirmation sera envoyée par courrier électronique. Par défaut, nous l’avons vu plus haut, le lecteur Flash n’a pas la possibilité d’envoyer des eMails directement ni d’effectuer des opérations sur les bases de données, il faudra passer par un script serveur et utiliser la classe URLRequest() et la fonction NavigateToURL(). Notre animation utilisera un script PHP pour récupérer les informations saisies dans le formulaire, ajouter l’inscription dans une base de données.
Structure de l’application
- inscriptionMembre.as : Fichier script contenant le package et la classe inscriptioMembre
- inscriptionMembre.fla : Animation Flash
- Inscription.php : Script PHP appelé par l’animation en charge d’ajouter le membre dans la table et d’envoyer un message életronique de confirmation d’inscription.
Nous avons besoin d’une table dans une base de données MySQL avec la structure suivante :
Création de l’interface Flash
Commençons par créer un fichier script .as contenant un package et une classe que nous appelerons inscriptionMembre. Nous créons ensuite une animation avec l’interface permettant de saisir le login, le mot de passe et une adresse eMail valide.
Nous utiliserons des composants de type User Interface disponibles depuis la fenêtre Composant de Flash. Nous aurons besoins des types Button et TextInput.
Pour simplifier nous allons créer l’interface en mode design dans Flash bien qu’il soit possible de le créer entièrement en mode code en utilisant les classes TextField et Button.
A l’aide des panneaux Propriétés et Inspecteur de composants, dessinez l’interface suivante :
Les champs de saisies seront créés dynamiquement depuis le code.
Notre animation est terminée, nous allons gérer la classe inscriptionMembre dans le fichier inscriptionMembre.as.
Pour l’instant votre classe devrait ressembler à ceci :
package {
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
public class inscriptionMembre extends MovieClip {
// Constructeur
public function inscriptionMembre() {
}
}
}
Déclarons trois variables pour les champs de saisies du pseudo, du mot de passe et de l’adresse de messagerie.
Nous avons besoin également d’un bouton pour envoyer les données.
public var txtLogin:TextInput;
public var txtPwd:TextInput;
public var txteMail:TextInput;
public var btnEnvoi:Button;
Dans le constructeur de la classe, nous initialisons ces variables. Il faut indiquer les paramètres concernant l’aspect du composant (largeur, hauteur, position, etc.) puis l’intégrer à la scène, à l’aide de la fonction addChild(). Voici le code pour le premier champ de saisie, essayez d’écrire le code pour les champs »txtPwd » et »txteMail ».
// Champ de saisie du login
txtLogin = new TextInput();
txtLogin.width = 200;
txtLogin.height = 22;
txtLogin.x = 220;
txtLogin.y = 120;
addChild(txtLogin);
Nous configurons le bouton et lui ajoutons un écouteur en pointant sur la méthode qui sera exécutée lorsque le bouton sera cliqué.
Voici le code du constructeur :
// Constructeur
public function inscriptionMembre() {
// Champ de saisie du login
txtLogin = new TextInput();
txtLogin.width = 200;
txtLogin.height = 22;
txtLogin.x = 220;
txtLogin.y = 120;
addChild(txtLogin);
// Champ de saisie du mot de passe
txtPwd = new TextInput();
txtPwd.width = 200;
txtPwd.height = 22;
txtPwd.x = 220;
txtPwd.y = 160;
addChild(txtPwd);
// Champ de saisie pour l'adresse eMail
txteMail = new TextInput();
txteMail.width = 200;
txteMail.height = 22;
txteMail.x = 220;
txteMail.y = 200;
addChild(txteMail);
btnEnvoi = new Button();
btnEnvoi.width = 100;
btnEnvoi.height = 22;
btnEnvoi.x = 225;
btnEnvoi.y = 253;
btnEnvoi.label = "Envoyer";
addChild(btnEnvoi);
// Ajout d'un écouteur sur le bouton
btnEnvoi.addEventListener(MouseEvent.CLICK, envoiInformations);
}
Notre animation fonctionne maintenant de façon indépendante, nous allons la lier avec notre script PHP dans la méthode envoiInformations. Cette fonction aura la charge de récupérer le contenu des champs de saisies et d’envoyer le tout au script situé sur le serveur inscription.php.
La classe URLRequest() nous servira à pointer sur le script PHP du serveur. La fonction navigateToURL() nous permettra d’ouvrir le script pointé en passant les paramètres récupérés dans les champs de saisies du formulaire.
Nous utiliserons la méthode POST pour envoyer les données de l’animation au script PHP.
Voici le code complet de la méthode envoiInformations.
public function envoiInformations(e:Event):void
{
// Objet permettant de récupérer les champs saisis
var variables:URLVariables = new URLVariables();
// Pointe sur le script PHP
var script:String = "http://localhost:8888/coursflash/inscription.php";
var req:URLRequest = new URLRequest(script);
// Affectation des variables à envoyer au serveur
variables.login = txtLogin.text;
variables.pwd = txtPwd.text;
variables.mail = txteMail.text;
req.method = URLRequestMethod.POST; // Méthode utilisée pour l'envoi
req.data = variables; // Données envoyées
// Ouverture d'une fenêtre dans le navigateur et envoi des données
navigateToURL(req);
}
Voici le code complet du script PHP. Adaptez les valeurs des constantes de connexion en début de code par rapport à votre configuration personnelle.’
<?php
/***
*
* inscription.php
* Projet : Cours Flash dynamique
* Auteur : Maurizio Stasi
* Objet : Reçoit des données en paramètre pour l'inscription
* d'un nouvel utilisateur dans la table USERS.
* Après ajout de l'enregistrement, nous envoyons un
* message de confirmation par courrier électronique.
*
* Versions : 21.08.2008 - première version [MSI]
*
*/
define('SERVER', 'localhost:8888');
define('DATABASE', 'coursphp');
define('USER', 'root');
define('PWD', 'root');
// Récupération des données envoyées par l'animation Flash
echo $_POST['login'] . '<br/>';
echo $_POST['pwd'] . '<br/>';
echo $_POST['mail'] . '<br/>';
$login = $_POST['login'];
$pwd = $_POST['pwd'];
$mail = $_POST['mail'];
$conn = mysql_connect(SERVER, USER, PWD) or die('La connexion au serveur a échoué!');
$db = mysql_select_db(DATABASE) or die('La sélection de la BD a échoué!');
// Insertion de l'utilisateur avec cryptage du mot de passe...
$query = 'INSERT INTO users(login, pwd, email) VALUES (\'' .
$login . '\', \'' . md5($pwd) . '\', \'' . $mail . '\')';
echo $query;
mysql_query($query);
if (mysql_affected_rows() == 0) {
$Result = 'L\'insertion a échoué';
echo 'Echec!';
} else {
// Envoi d'un message
$head = 'From: webmaster@coursflash.com';
mail($mail, 'Confirmation de votre inscription', 'Félicitations, vous êtes maintenant inscript!', $head);
$Result = 'Félicitations, vous êtes maintenant inscript!';
}
echo $Result;
?>
Publiez votre animation Flash et placez le fichier .swf sur votre serveur local ou distant au même endroit que le script inscription.php.
Testez ensuite l’animation depuis votre navigateur.
Une nouvelle occurrence a été ajoutée à notre table USERS de notre base de données.
Posted by admin
0 comments
Posts Feed
