Exemple de ajax avec Rialto et PHP
III- EXEMPLE :
Un de mes prof le dit toujours: « Rien ne vaut qu'un exemple pour bien comprendre ».
Dans cette partie on va mettre en place une très petite application sur laquelle j'ai travaillé pendant deux jours, c'est ma première application utilisant RIALTO et AJAX et je souhaite la partager avec vous.
Dans cette application on aura besoin d'une base de donnée mysql contenant une table nommée ''etudiant'' :
---------------------------Scipt SQL pour base de donnée -------------------------
CREATE DATABASE school;
USE school;
CREATE TABLE etudiant (
id char(20) primary key, nom char(50), prenom char(50), date date
);
---------------------------------------Fin du script----------------------------------
Notre application va afficher la liste des étudiants dans un tableau (l'objet Grid offert par RIALTO), et va présenter un formulaire pour ajouter de nouveaux étudiants, et un bouton permettant la suppression de l'étudiant sélectionné sur le tableau.
Je suppose que vous êtes d'accord avec le cahier des charges, et je commence...
Vous avez votre base de données mysql, on va créer la page avec RIALTO
tout d'abord. On aura besoin de php pour remplir le tableau avec les données
de la table etudiant.
Je note que cet exemple n'a aucune relation avec les précédents.
voilà la page index.php
---------------------------------- index.php -----------------------------------------
<html>
<head>
<title>Liste des auteurs</title>
<link rel='STYLESHEET' type='text/css' href='./rialtoEngine/style/rialto.css'/>
<link id = 'standart_behavior' rel='STYLESHEET' type='text/css'
href='./rialtoEngine/style/behavior.css'>
<link rel='STYLESHEET' type='text/css'
href='./rialtoEngine/style/defaultSkin.css'>
<script type='text/javascript' src='./rialtoEngine/config.js'></script>
<script>rialtoConfig.pathRialtoE = "./rialtoEngine/";</script>
<script type='text/javascript' src='./rialtoEngine/javascript/rialto.js'></script>
<script type='text/javascript' src='ajax.js'></script>
</head>
<body>
<script type='text/javascript'>
//On crée une fenêtre
var sWin = new
rialto.widget.SimpleWindow({parent:document.body,title:'Auteurs'});
//On y insère une frame
var frame = new rialto.widget.Frame({name:'frame',title:'Ajout d'un etudiant',
top:'15',left:'10',width:'98%',height:'460',open:true,dynamic:true,position:'relati
ve',draggable:false,parent:sWin});
//On la divise horizontalement
var splitFC = new
rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.33,orientation:'h',name:'splitFC',
parent:frame,style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:true});
//Sur la première division on insère les objets suivants :
//une étiquette (label) avec le texte id
new rialto.widget.Label('lib1',15,10,splitFC.div1,"id",'libelle1');
//Une zone de texte devant cet étiquette
var idEtudiant=new rialto.widget.Text('idEtudiant', 10,180,100,'A', splitFC.div1,
{rows:5} );
//Une étiquette et un champ de texte pour chaque champ dans la table :
new rialto.widget.Label('lib2',45,10,splitFC.div1,"Nom",'libelle1');
var nom=new rialto.widget.Text('nom',40,180,100,'A',splitFC.div1,{rows:5});
new rialto.widget.Label('lib4',75,10,splitFC.div1,"Prenom",'libelle1');
var prenom=new
rialto.widget.Text('prenom',70,180,100,'A',splitFC.div1,{rows:5});
new rialto.widget.Label('lib4',105,10,splitFC.div1,"Date de
Naissance",'libelle1');
var date=new rialto.widget.Text('date',100,180,100,'D',splitFC.div1,{rows:5});
//un bouton pour valider le formulaire une fois remplis
var btInsert=new rialto.widget.Button(130,200,"ajouter", "Ajouter l'etudiant",
splitFC.div1,{enable:true,adaptToText:true,width:88,widthMin:88});
//Un autre diviseur de de la deuxième division
var splitFC2 = new
rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.85,orienta
tion:'v',name:'splitFC2',parent:splitFC.div2,
style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:true});
//On a le droit de faire puisque c'est facile et en plus gratuit
//Une deuxième frame dans la division obtenue :
var frame2 = new rialto.widget.Frame({name:'frame2',title:'Manipulation des
donnees', top:'15',left:'10',width:'98%',height:'98%', open:true,dynamic:true,
position:'relative',draggable:false,parent:splitFC2.div2});
//On y insère un bouton permettant la suppression :
var btSupp=new rialto.widget.Button(1,1,"Supprimer","Supprimer l'etudiant",frame2,{enable:true,adaptToText:true,width:88,widthMin:88});
//Ici c'est du php classique adaptez le script à vos paramètres:
<?php
mysql_connect("localhost","root","");
mysql_select_db("school");
$res = mysql_query("select * from etudiant");
$i = 0;
while($tab=mysql_fetch_array($res))
{
$ids[$i] = $tab[0];
$noms[$i] = $tab[1];
$prenoms[$i] = $tab[2];
$dates[$i] = $tab[3];
$i++;
}
?>
//Enfin voilà comment on déclare et dessine un tableau :
oTableau = new rialto.widget.Grid
({autoResizableW:true,autoResizableH:false,withContextualMenu:true,asynchLo
ad:true,top:0,left:0,height:'99%',name:'oTableau',parent:splitFC2.div1,
navigationMode:true,row:15,cellActive:false,sortable:true,multiSelect:false,line
Height:16,boolPrint:true,switchable:true,clickable:true,writable:true,
arrHeader:[{title:"Id",width:50,type:"string"},{title:"Nom",width:150,type:"string"},
{title:"Prenom",width:150,type:"string"},
{title:"Date de
naissance",width:150,type:"date",pattern:"dd/MM/yyyy",maskPattern:"dd/MM/y
yyy"}]});
//Et voilà comment le remplir avec des données de la bd :
oTableau.fillGrid([
<?php
$n = $i;
for($i=0;$i<$n;$i++){
?>
["<? echo $ids[$i]; ?>","<?php echo $noms[$i]; ?>","<?php
echo $prenoms[$i]; ?>","<?php echo $dates[$i]; ?>"],
<?php } ?>
]);
//La pour chaque bouton on appelle une fonction javascript
// Les deux fonctions inserer() et supprimer vont être déclarées dans le fichier ajax.js
btInsert.onclick = function() { inserer(); }
btSupp.onclick = function() { supprimer(); }
</script>
</body>
</html>
------------------------------fin du fichier index.php---------------------------------
Voyons maintenant comment se présentent les deux fonctions (supprimer et inserer) et dans quels conditions ils vivent, voici le fichier ajax.js :
-----------------------------------------ajax.js----------------------------------------
//On récupère l'objet XMLHttpRequest : function getXhr(){ var xhr = null; if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest"); xhr = false; } return xhr; } //Les deux fontions suivantes vont nous permettre de récupérer un même fichier xml quelque soit le navigateur function go(c){ if(!c.data.replace(/s/g,'')) c.parentNode.removeChild(c); } function clean(d){ var bal=d.getElementsByT agName('*'); for(i=0;i<bal.length;i++){ a=bal[i].previousSibling; if(a && a.nodeType==3) go(a); b=bal[i].nextSibling; if(b && b.nodeType==3) go(b); } return d; } //Et ici la fontion qui va permettre l'insertion : function inserer(){ var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ //on récupère la réponse en format XML: response = clean(xhr.responseXML.documentElement); var items = response.getElementsByT agName("element"); /* Nombre des elements */ count = items.length; /* Présentation des données sous forme d'une tableau js */ donnees = new Array(); for(i = 0; i < count; i++) { var identifiant = items[i].getElementsByT agName("id")[0].firstChild.nodeValue; var nom = items[i].getElementsByT agName("nom")[0].firstChild.nodeValue ; var prenom = items[i].getElementsByT agName("prenom")[0].firstChild.nodeValue; var date = items[i].getElementsByT agName("date")[0].firstChild.nodeValue; donnees[i] = new Array(identifiant,nom,prenom,date); } //On réinitialise note tableau dessiné oT ableau.initT ab(); //On le rempli avec les nouvelles données oT ableau.fillGrid(donnees); //On y sélectionne la première ligne : oT ableau.clickFirst(); } } // Ici on envoie des données en post xhr.open("POST","data.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form- urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'etudiant idEt = idEtudiant.getValue(); // id du nouveau étudiant nomEt = nom.getValue(); // nom du nouveau étudiant preEt = prenom.getValue(); //pénom du nouveau étudiant dtEt = date.getValue(); //Date de naissance du nouveau étudiant //On envoie la requête au serveur xhr.send("id="+idEt+"&nom="+nomEt+"&prenom="+preEt+"&date="+ dtEt); } //Pour la fonction de suppression j'ai préféré de tout reprendre comme pour la fontion d'insertion même si j'étais sûr qu'il y aura une solution plus fiable function supprimer(){ var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ //on récupère la réponse en format XML: response = clean(xhr.responseXML.documentElement); var items = response.getElementsByT agName("element"); /* Nombre des elements */ count = items.length; /* Présentation des données sous forme d'un tableau js */ donnees = new Array(); for(i = 0; i < count; i++) { var identifiant = items[i].getElementsByT agName("id")[0].firstChild.nodeValue; var nom = items[i].getElementsByT agName("nom")[0].firstChild.nodeValue ; 13/16var prenom = items[i].getElementsByT agName("prenom")[0].firstChild.nodeValue; var date = items[i].getElementsByT agName("date")[0].firstChild.nodeValue; donnees[i] = new Array(identifiant,nom,prenom,date); } //On réinitialise note tableau dessiné oT ableau.initT ab(); //On le rempli avec les nouvelles données oT ableau.fillGrid(donnees);
//On y sélectionne la première ligne : oTableau.clickFirst(); } } // Ici on envoie des données en post xhr.open("POST","data.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-formurlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'etudiant //C'est où commence la différence avec la fonction précédente //On récupère la cellule du tableau sur la on affiche l'identifiant de l'étudiant : ident = oTableau.getCellText(oTableau.getIndLineClic(),0); // On utilise l'objet string offert par RIALTO pour évite les espaces de débuts et de fin da la chaine. idEt = rialto.string.trim(ident); // On se sert de Notre objet XHR pour envoyer la requête au serveur xhr.send("idEt="+idEt); } ---------------------------------------fin du fichier ajax.js------------------------------------ En commentant ce dernier fichier on a parlé des données sous formats XML mais où sont ils ces données? c'est la réponse du serveur. Un fichier xml est généré dynamiquement par php de façon à ce qu'il représente les mêmes données que celles qu'on a dans la base des données. Voilà le fichier php/XML nommé data.php : ---------------------------------------------data.php------------------------------------------ <?php //Définition de l'entête header('Content-Type: text/xml'); echo "<?xml version="1.0"?> "; //On se connecte à la BD mysql_connect("localhost","root",""); mysql_select_db("school"); //On insère les données si le bouton d'insertion a été cliqué if(isset($_POST['id'])) { $id = $_POST['id']; $nom =$_POST['nom']; $prenom = $_POST['prenom']; $date = $_POST['date']; $req="insert into etudiant values($id,'$nom','$prenom','$date')"; mysql_query($req)or die("Un problème a eu place pendant l'insertion de l'etudiant"); } //On supprime l'étudiant concerné si le bouton de suppression a été cliqué if(isset($_POST['idEt'])) { $id = $_POST['idEt']; $req="delete from etudiant where id='$id'"; mysql_query($req)or die("Un problème a eu place pendant la suppression de l'etudiant"); } //Dans le reste on cherche à créer un fichier XML contenant nos données echo "<etudiant>"; $res = mysql_query("select * from etudiant"); while($tab=mysql_fetch_array($res)) { $id = $tab[0]; $nom = $tab[1]; $prenom = $tab[2]; $date = $tab[3]; echo " <element> "; echo " <id> ".$id." </id> "; echo " <nom> ".$nom." </nom> "; echo " <prenom> ".$prenom." </prenom> "; echo " <date> ".$date." </date> "; echo " </element> "; } echo "</etudiant>"; ?> --------------------------------Fin du fichier data.php---------------------------------------- CONCLUSION RIALTO
nous offre un objet à utiliser pour faire de l'AJAX mais je n'ai pas pu
deviné comment il marche et sa documentation ne m'a pas suffit pour
comprendre son fonctionnement, c'est ajaxRequest, à vous de le découvrir.
Tout ce que je souhaite maintenant c'est que ce tutoriel va aider
quelqu'un. faites un feedback dans le cas où vous appréciez ce petit
travail, qui est fait proprement pour vous et vous en avez tout les
droits offerts par la GPL (derniere version). -----------------------------------------------------------------------------------