Posted by admin
0 commentsDans cette animation nous allons afficher les données de la table MySQL utilisée dans l’étude de cas précédente. Nous savons maintenant que nos animations Flash doivent passer par un script serveur pour effectuer les opérations sur les bases de données, selon le shéma étudié dans les concepts :
Concept de l’animation
L’utilisateur pourra saisir le nom à rechercher puis lorsqu’il clique sur le bouton Afficher, une méthode enverra une requête à un script PHP qui aura la charge de faire une opération de type SELECT et de nous renvoyer les données sélectionnées pour que nous puissions les afficher dans un composant DataGrid.
Commencez par créer le squelette de votre classe affichageMembre dans un nouveau fichier ActionScript et une nouvelle animation du même nom dans laquelle il faut assigner la classe du document.
package {
import flash.display.*;
import flash.text.*;
public class affichageMembre extends MovieClip {
// constructeur
public function affichageMembre()
{
}
}
}
Code PHP du script serveur
Côté serveur notre script PHP doit recevoir un paramètre correspondant à la recherche spécifiée par l’animation, rechercher les données puis les renvoyer.
Le renvoi des informations se fait avec la commande echo.
Puisqu’il est possible que plusieurs lignes soient concernées par la requête, nous allons utiliser un compteur qui nous permettra également de séparer chaque ligne en nommant les champs { (login1, pwd1, email1), (login2, pwd2, email2), (loginn-1, pwdn-1, emailn-1), (loginn, pwdn, emailn)},.
<?php
/***
*
* Projet : Cours ActionScript
* Auteur : MSI
* Date : août 2008
*
* Objet : Script serveur à utiliser avec l'animation affichageMembre.fla
*
* Renvoie les membres de la table [USERS] selon le critère
* de recherche 'contenu' reçu en paramètre.
*
*
* Modifications
* - 22.08.2008 : première version [MSI]
*/
// Constantes de connexion à modifier en fonction de la configuration
define("SERVER", "localhost:8888");
define("BD", "coursphp");
define("USER", "root");
define("PWD", "root");
// Connection au serveur BD
$link = mysql_connect(SERVER, USER, PWD) or die("Connexion au serveur " . SERVER . " impossible!");
// Sélection de la base de données de travail
if (mysql_select_db(BD) == false)
die ("Impossible de se connecter à la base de données !");
// Critère de recherche envoyé par l'animation Flash
$contenu = $_POST["contenu"];
// Construction de la requête SQL
if(empty($contenu)) {
$sql = "SELECT * FROM users";
} else {
$sql = "SELECT * FROM users WHERE login LIKE '" . "%$contenu%" . "'";
}
// Requête de sélection
$result = mysql_query($sql) or die("La requête de sélection" . $sql . " a échoué!");
// Puisque nous avons plusieurs enregistremens à renvoyer nous utilisons un compteur
$compteur=1;
while ($row=mysql_fetch_array($result)) {
// Il faut un &amp;amp;amp; avant la variable nom si ce n'est pas le premier...
if($compteur>1) {
$strResult="&amp;amp;amp;";
} else {
$strResult="";
}
// les variables retournées sont uniques pour remplir ma DataGrid
$strResult .= "login$compteur=" . $row["login"] ."&amp;amp;amp;pwd$compteur=" . $row["pwd"] .
"&amp;amp;amp;email$compteur=" . $row["email"];
echo ($strResult);
// J'incrémente le compteur
$compteur++;
}
echo "&amp;amp;amp;nbusers=" . mysql_num_rows($result);
?>
Classe afficherMembre
A propos des importations avec import
Lorsque vous obtenez un message d’erreur de la part du compilateur Flash ressemblant à ceci :
cela indique qu’il vous manque un import en début de package.Dans notre cas il faudra ajouter respectivement fl.controls.TextInput, fl.controls.Button et fl.controls.DataGrid.
Il est plus simple d’importer tous les composants d’une seule ligne : fl.controls.*
Si le problème persiste, il existe un bug dans AS3, ajoutez manuellement un champ du même type dans l’animation, publiez l’animation et enfin supprimez le composant. Il sera ainsi ajouté à la bibliothèque et le problème sera résolu.
!!!Constructeur
Nous initialisons affichons l’interface utilisateur dans le constructeur de notre classe.
// constructeur
public function affichageMembre()
{
// Champ de saisie pour le critère de recherche
txtFiltre = new TextInput();
txtFiltre.width = 200;
txtFiltre.height = 20;
txtFiltre.x = 10;
txtFiltre.y = 370;
addChild(txtFiltre);
// Bouton d'envoi
btnEnvoi = new Button();
btnEnvoi.width = 50;
btnEnvoi.height = 20;
btnEnvoi.x = 250;
btnEnvoi.y = 370;
btnEnvoi.label = "Afficher";
addChild(btnEnvoi);
// Grille d'affichage
grdAffichage = new DataGrid();
grdAffichage.width = 540;
grdAffichage.height = 350;
grdAffichage.x = 5;
grdAffichage.y = 5;
addChild(grdAffichage);
}
Il faut ensuite ajouter un écouteur pour appeler la méthode en charge d’appeler le script PHP. Cet écouteur sera ajouté également dans le constructeur.
// Ecouteur sur le bouton btnEnvoi.addEventListener(MouseEvent.CLICK, appelerScriptPHP);
Appel du script PHP
Nous allons utiliser les classes URLRequest et URLLoader pour appeler le script et lui passer le contenu du champ de saisie. La classe URLLoader nous permet d’appeler un script sans que celui-ci soit ouvert dans le navigateur, rendant l’opération de récupération des données transparente pour l’utilisateur.
Ensuite nous devons traiter la récupération des informations renvoyées, pour cela nous utiliserons un nouvel écouteur avec le paramètre COMPLETE.
public function appelerScriptPHP(e:MouseEvent):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/affichageMembre.php";
var req:URLRequest = new URLRequest(script);
// Affectation des variables à envoyer au serveur
variables.contenu = txtFiltre.text;
req.method = URLRequestMethod.POST; // Méthode utilisée pour l'envoi
req.data = variables; // Données envoyées
var loader:URLLoader = new URLLoader();
// Ecouteur pour traiter la récupération des informations
loader.addEventListener(Event.COMPLETE, recupererDonnees);
// Appel du script sans ouverture dans le navigateur
loader.load(req);
}
Lorsque le script est terminé, la méthode recupererDonnees est appelée automatiquement par l’écouteur. Cette fonction aura la charge de remplir le composant DataGrid avec les données de la table.
Récupération des données depuis PHP
Il s’agit de récupérer les données en utilisant la classe URLVariables. Les paramètres login, pwd, email correspondent aux champs retournés par PHP avec la commande echo.
public function recupererDonnees(e:Event):void
{
var myvars:URLVariables=new URLVariables(e.target.data);
grdAffichage.removeAll();
var i:uint;
for(i=1; i<=myvars.nbusers; i++) {
var objUser:Object = {
login:myvars["login"+i],
pwd:myvars["pwd"+i],
email:myvars["email"+i]
};
grdAffichage.addItem(objUser);
}
}
Nous utilisons la classe Object qui nous permet de construire facilement une ligne de grille DataGrid.
Que s’est-il passé ?
Nous avons utilisé un script PHP pour retourner des informations d’une base de données.
Nous avons vu l’utilisation des classes URLRequest, URLLoader, URLVariables pour échanger des données. Comme dans l’étude précédente, le transfert des informations entre l’animation Flash et le script serveur s’est fait en utilisant la méthode POST.
Sans filtre, toutes les données de la table sont affichées.
Lorsqu’un filtre est saisit, le script PHP effectue une comparaison avec l’opérateur LIKE.
Posts Feed