Flex, php et mysql : une interaction élaborée (2eme partie)
FlexPosté par Euclide sam, mars 22, 2008 15:18:00Pour commencer, il est intéressant lorsque l'on développe une application d'utiliser une methode de programmation afin de séparer le code applicatif du reste de l'application, c'est d'appliquer un Design Pattern.
Ce qui nous évite d'avoir tout le code en un seul fichier(code imbuvable lorsque l'on doit y retourner un temps plus tard), mieux cette méthode nous permet de ré-utiliser les classes sans avoir à les écrire une X-ième fois.
Dans cet exemple, j'en ai donc utilisé un assez connu dans le milieu JAVA : le design pattern MVC.
Ce qui signifie que je sépare les Modèles, des Vues, des Controleurs.
Il existe deux frameworks MVC connus sous Flex (à l'heure ou je vous parle, d'autres viendront probablement s'ajouter à la liste) qui sont intéressants mais que je n'utiliserai pas pour cet exemple. L'un se nomme "Cairngorm" et l'autre "PureMVC".
Ils ont une certaine utilité (surtout PureMVC selon moi) lors de projets d'envergures ou lorsque l'on travaille en équipe.
Ici pour mon exemple, nous mettrons en oeuvre une méthode simplifiée de cette technique de design pattern MVC.
Voici un "printscreen" de l'arborescence du projet Flex qui nous attend :
Il y a du monde au balcon ;-) ET une petite explication de la structure s'impose.
Dans le Modèle, un dossier php contenant tous les fichiers php dont on a besoin pour ajouter, effacer, updater et lister.
J'ai aussi séparé l'actionscript des applications dans ce dossier Modèle, ces fichiers sont des classes HTTPServices pour ajouter, effacer, lister.
Dans cet exemple j'ai utilisé la technique "viewstack" de Flex et chaque panneau du viewstack est dans le dossier view.
On peut remarquer que dans le dossier view on a trois différents fichiers mxml qui représentent chaque panneau de viewstack(ajouter,effacer,lister).
Pour commencer, nous allons créér notre base de données :
MySQL:
CREATE TABLE `susers` (
`id` int(3) NOT NULL auto_increment,
`firstname` varchar(255) NOT NULL,
`lastname` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM ;
Voici notre application principale
phpproject.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:view="view.*" creationComplete="initapp()">
<mx:Script source="app_config.as"/>
<mx:VBox x="10" y="10" " ">
<mx:Label text="{title}" " fontSize="32" fontFamily="Times New Roman" alpha="0.53"/>
<mx:LinkBar dataProvider="viewstack1">
</mx:LinkBar>
<mx:ViewStack id="viewstack1" " ">
<view:dsp_addform id="addform" label="Formulaire Ajout" " "/>
<view:dsp_list id="list_view" label="Liste Entrées" " "/>
<view:dsp_delete id="delete_view" label="Effacer Entrée" " "/>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
Notre fichier AS qui se trouve à la racine "app_config.as" que j'ai utilisé afin d'ajouter une configuration à notre application (Il peut être utilisé afin d'y inclure la version, la configuration URL, etc...)
app_config.as:
[Bindable]
public var title:String = new String();
public function initapp():void
{
title = "Flex-PHP-Mysql projet via HTTPservice";
}
Nos trois vues sous forme de canvas:
dsp_addform.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script source="../model/act_add.as"/>
<mx:VBox x="0" y="0" " ">
<mx:Form " >
<mx:FormItem label="Prénom">
<mx:TextInput id="firstname" text=""/>
</mx:FormItem>
<mx:FormItem label="Nom">
<mx:TextInput id="lastname" text=""/>
</mx:FormItem>
</mx:Form>
<mx:HBox ">
<mx:Button label="Ajouter" id="addButton" click="add()"/>
<mx:Button label="Clear" click="clear()"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
dsp_delete.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" " show="init()">
<mx:Script source="../model/act_del.as"/>
<mx:HBox x="0" y="0" ">
<mx:ComboBox id="combo" dataProvider="{myHTTPservice.lastResult.users.user}"></mx:ComboBox>
<mx:Button label="Effacer" click="del()"/>
</mx:HBox>
</mx:Canvas>
dsp_list.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" show="init()">
<mx:Script source="../model/act_list.as"/>
<mx:HBox x="0" y="0" " ">
<mx:DataGrid id="dguser" " " dataProvider="{myHTTPservice.lastResult.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="id"/>
<mx:DataGridColumn headerText="Prénom" dataField="firstname"/>
<mx:DataGridColumn headerText="Nom" dataField="lastname"/>
</mx:columns>
</mx:DataGrid>
<mx:VBox " ">
<mx:FormHeading label="Formulaire Edition"/>
<mx:Form ">
<mx:FormItem label="Prénom">
<mx:TextInput id="firstname" text="{dguser.selectedItem.firstname}"/>
</mx:FormItem>
<mx:FormItem label="Nom">
<mx:TextInput id="lastname" text="{dguser.selectedItem.lastname}"/>
</mx:FormItem>
<mx:HBox " horizontalAlign="right" x="50">
<mx:Button label="Update" click="edit()" toolTip="Veuillez selectionner un utilisateur parmi le datagrid, faites les modifs dans le formulaire d'edition et clicker"/>
</mx:HBox>
</mx:Form>
</mx:VBox>
</mx:HBox>
</mx:Canvas>
Dans notre dossier Modèle, nos trois fichier AS qui font appel au php via HTTPService(Attention à bien respecter les url's HTTPService pointant vers les fichiers php en gras ci-dessous)
act_add.as:
import mx.rpc.http.HTTPService;
[Bindable]
public var myHTTPservice:HTTPService = new HTTPService();
public function add():void
{
myHTTPservice.url = "http://localhost/phpproject/model/php/qry_add.php";
myHTTPservice.method = "POST";
var variables:URLVariables = new URLVariables();
variables.firstname = firstname.text;
variables.lastname = lastname.text;
myHTTPservice.request = variables;
myHTTPservice.send();
clear();
}
public function clear():void
{
firstname.text = "";
lastname.text = "";
}
act_del.as:
import mx.rpc.http.HTTPService;
import flash.net.URLVariables;
[Bindable]
public var myHTTPservice:HTTPService = new HTTPService();
public function init():void
{
myHTTPservice.url = "http://localhost/phpproject/model/php/qry_combo.php";
myHTTPservice.send();
}
public function del():void
{
myHTTPservice.url = "http://localhost/phpproject/model/php/qry_del.php";
myHTTPservice.method = "POST";
var variables:URLVariables = new URLVariables();
variables.id = combo.value;
myHTTPservice.request = variables;
myHTTPservice.send();
}
act_list.as:
import mx.rpc.http.HTTPService;
import mx.core.Application;
[Bindable]
public var myHTTPservice:HTTPService = new HTTPService();
public function init():void
{
myHTTPservice.url = "http://localhost/phpproject/model/php/qry_list.php";
myHTTPservice.send();
}
public function edit():void
{
myHTTPservice.url = "http://localhost/phpproject/model/php/qry_edit.php?id="+dguser.selectedItem.id+"&firstname="+firstname.text+"&lastname="+lastname.text;
myHTTPservice.method = "POST";
var variables:URLVariables = new URLVariables();
variables.id = dguser.selectedItem.id;
variables.firstname = firstname.text;
variables.lastname = lastname.text;
myHTTPservice.request = variables;
myHTTPservice.send();
}
Et pour terminer notre logique applicative en PHP(Attention: indiquer vos paramètres de connexion MySQL en gras ci-dessous)
qry_add.php:
<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "pwd" );
define( "DATABASE_NAME", "nomdb" );
//connexion à la database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//ajout
$Query = "INSERT INTO susers VALUES('', '".$_POST['firstname']."', '".$_POST['lastname']."')";
mysql_query( $Query );
print ($_GET['firstname']);
?>
qry_combo.php:
<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "pwd" );
define( "DATABASE_NAME", "nomdb" );
//connexion à la database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
$Query = "SELECT * from susers";
$Result = mysql_query($Query);
$Return = '<users>';
while($User = mysql_fetch_object($Result))
{
$Return .= "<user><data>".$User->id."</data><label>".$User->firstname." ".$User->lastname."</label></user>";
}
$Return .= "</users>";
mysql_free_result($Result);
print ($Return);
?>
qry_del.php:
<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "pwd" );
define( "DATABASE_NAME", "nomdb" );
//connexion à la database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//supprimer user
$Query = "DELETE FROM susers WHERE id = '".$_POST['id']."'";
mysql_query( $Query );
$Query = "SELECT * from susers";
$Result = mysql_query($Query);
$Return = '<users>';
while($User = mysql_fetch_object($Result))
{
$Return .= "<user><data>".$User->id."</data><label>".$User->firstname." ".$User->lastname."</label></user>";
}
$Return .= "</users>";
mysql_free_result($Result);
print ($Return);
?>
qry_edit.php:
<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "pwd" );
define( "DATABASE_NAME", "nomdb" );
//connexion à la database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//update user
$Query = sprintf("UPDATE susers SET firstname='%s', lastname='%s' WHERE id=%s", $_POST['firstname'], $_POST['lastname'], $_POST['id']);
$Result = mysql_query( $Query );
$Query = "SELECT * from susers";
$Result = mysql_query($Query);
$Return = '<users>';
while($User = mysql_fetch_object($Result))
{
$Return .= "<user><id>".$User->id."</id><firstname>".$User->firstname."</firstname><lastname>".$User->lastname."</lastname></user>";
}
$Return .= "</users>";
mysql_free_result($Result);
print ($Return);
?>
qry_list.php:
<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "pwd" );
define( "DATABASE_NAME", "nomdb" );
//connexion à la database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
$Query = "SELECT * from susers";
$Result = mysql_query($Query);
$Return = '<users>';
while($User = mysql_fetch_object($Result))
{
$Return .= "<user><id>".$User->id."</id><firstname>".$User->firstname."</firstname><lastname>".$User->lastname."</lastname></user>";
}
$Return .= "</users>";
mysql_free_result($Result);
print ($Return);
?>
Ouf, c'est fini...Avec ce type d'application et de logique applicative, l'interfaçage entre Flex-PHP-MySQL n'a plus aucun secret pour vous...du moins du point de vue HTTPService...
Dans notre prochain tutoriel nous mettrons en oeuvre quelque chose de plus fun...une interface video avec dossiers de selection via la technique d'accordeon de Flex.
Ah, j'oubliais...voici le résultat de notre application ICI
Bon codage ;-)
- Commentaires(2)http://blog.euclide.be/#post2
