Ajax toolkit - partage de classes entre php / js

Soyez le premier à donner votre avis sur cette source.

Vue 7 842 fois - Téléchargée 761 fois

Description

Faire le l'ajax c'est bien, mais c'est pas forcément évident. Ce toolkit prend en charge la partie controleur et vous propose un modéle hyper simpliste afin de facilement programmer en PHP puis en Javascript à travers l'AJAX et ce de manière INTUITIVE.

Le principe de base :

La partie serveur :

Vous faites un fichier PHP dans lequel vous créez une classe héritant de la classe ajaxify.
Vous créez des fonctions comme vous l'avez toujours fait. Ces fonctions seront accessible à partir de votre page (mode client) en faisant des appels javascript.

La partie client :

Dans votre page html, faites une référence à la lib : require_once('lib/ajaxify.class.php'); puis dans votre header html rajoutter une référence à la classe php que vous souhaitez utiliser : <?php ajaxify::AjaxClass('scripts/pannier.php', 'jsPannier'); ?>

Ensuite le reste c'est comme d'habitude en javascript - exemple : jsPannier.getProduits(...).

Vous avez deux fichiers en exemple pour comprendre un peu le fonctionnement et les possibilités de la librairie.
      • Détail techniques :


Dans la partie JS vous utilisez l'objet portant le même nom que la classe.

-> PHP :
class foo extends ajaxify {
function bar() {}
}

-> JS :

foo.bar(function(result) {
// do something
});

-- LE MODE SYNCHRONE --

Vous souhaitez intéroger le serveur et une fois qu'il aura répondu continuer l'execution de votre javascript en récupérant le résultat. C'est le mode synchrone.

PHP :
class foo extends ajaxify {
function bar($name) {
return 'Hello World '.$name;
}
}

JS :
alert(foo.bar('aKh'));

-- LE MODE ASYNCHRONE --

Vous souhaitez lancer un chargement et pendant ce temps ne pas bloquer l'affichage, voire même mettre un petit message d'attente. C'est le mode asynchrone, et c'est conseillé pour les réponses nécéssitant un long temps de réponse.

PHP :
class foo extends ajaxify {
function doSomething($name) {
sleep(1);
return 'Done '.$name;
}
}

JS / HTML :
<div id="result">...</div>
<script language="javascript">
document.getElementById('result').innerHTML = 'Wait ...';
foo.doSomething('akh !', function(result) {
document.getElementById('result').innerHTML = result;
});
</script>

Source / Exemple :


<?php

	/**

  • EXEMPLE SIMULANT LA GESTION D'UN CADDIE SUR UN SITE ECOMMERCE
  • AJAXIFY LIB
  • @author I. CHIRIAC
  • @license GNU/GPL
  • @package AJAX
  • /
// REQUIRE AJAX LIBRARY require_once('../lib/ajaxify.class.php'); // DEFINE A USER CLASS class jsPannier extends ajaxify { /**
  • Gets a list of products
  • /
function getProduits() { if (isset($_SESSION['pannier'])) { return $_SESSION['pannier']; } else return array(); } /**
  • Gets cart total
  • /
function getTotal() { if (isset($_SESSION['pannier'])) { $tot = 0; foreach($_SESSION['pannier'] as $produit) { $tot += $produit->getTotal(); } return $tot; } else return 0; } /**
  • Empty cart
  • /
function viderPannier() { $_SESSION['pannier'] = array(); return true; } /**
  • Add a product to cart
  • /
function addProduit($ref, $titre, $pu, $qte = 1) { if (!is_numeric($qte)) return false; if ($qte < 0) return false; if (!isset($_SESSION['pannier'][$ref])) { $_SESSION['pannier'][$ref] = new produit(); $_SESSION['pannier'][$ref]->ref = $ref; $_SESSION['pannier'][$ref]->titre = $titre; $_SESSION['pannier'][$ref]->pu = $pu; } $_SESSION['pannier'][$ref]->qte += $qte; return $_SESSION['pannier'][$ref]->qte; } /**
  • Get total price for a product (by product reference)
  • /
function getRefTotal($ref) { if (isset($_SESSION['pannier'][$ref])) { return $_SESSION['pannier'][$ref]->getTotal(); } else return ' --- '; } /**
  • Set a cart product quantity
  • /
function setQuantite($ref, $qte) { if (!is_numeric($qte)) return false; if ($qte < 0) return false; if (isset($_SESSION['pannier'][$ref])) { $_SESSION['pannier'][$ref]->qte = $qte; return true; } else return false; } /**
  • Remove a product by ref
  • /
function removeProduit($ref) { if (isset($_SESSION['pannier'][$ref])) { unset($_SESSION['pannier'][$ref]); return true; } else return false; } /**
  • Gets product data - by refrence
  • /
function getProduit($ref) { if (isset($_SESSION['pannier'][$ref])) { return $_SESSION['pannier'][$ref]; } else return false; } } /**
  • Product container
  • /
class produit { /**
  • Product Reference
  • /
var $ref; /**
  • Product Title
  • /
var $titre; /**
  • Product quantity
  • /
var $qte; /**
  • Product price per unit
  • /
var $pu; /**
  • Gets product total
  • /
function getTotal() { if ($this->qte > 0) { return $this->qte * $this->pu; } else return 0; } } // HANDLE REQUEST - SERVER ENTRY session_start(); ajaxify::request(); ?> <html> <head> <title>Ajax Demo</title> <?php ajaxify::AjaxClass('scripts/pannier.php', 'jsPannier'); ?> <script language="javascript"> function $(id) { return document.getElementById(id); } function refreshPannier() { $('pannier').innerHTML = 'Actualisation en cours ...'; jsPannier.getProduits(function(produits) { if (produits.length == 0) { $('pannier').innerHTML = 'Votre pannier est vide ...'; return false; } // TABLE HEADER var html = '<table border="1"><tr><td class="head">REF</td><td class="head">TITRE</td><td class="head">QTE</td><td class="head">PU</td><td colspan="2" class="head">SOUS-TOTAL</td></tr>'; // CREATE TABLE var total = 0; for(i = 0; i < produits.length; i++) { produit = produits[i]; html += '<tr><td>'+produit.ref+'</td><td>'+produit.titre+'</td>'; html += '<td><input type="text" size="6" value="'+produit.qte+'" onChange="setQuantite(\''+produit.ref+'\', this.value)" /><input type="button" value="ok" /></td>'; html += '<td>'+produit.pu+'</td><td id="'+produit.ref+'">'+(produit.pu*produit.qte)+' € TTC</td>'; html += '<td><input type="button" value="Supprimer" onClick="removeProduit(\''+produit.ref+'\');" /></td></tr>'; total += produit.pu*produit.qte; } // TABLE FOOTER html += '<tr><td colspan="4">&nbsp;</td><td colspan="2">'+total+' € TTC</td></tr></table>'; $('pannier').innerHTML = html; return true; }); } function setQuantite(ref, qte) { if (jsPannier.setQuantite(ref, qte)) { $(ref).innerHTML = jsPannier.getRefTotal(ref) + ' € TTC'; } else { alert('Impossible de modifier la quantite. Veuillez saisir un numerique.'); return false; } } function removeProduit(ref) { if (confirm('Etes-vous sur de supprimer la reference '+ref+' ?')) { if (jsPannier.removeProduit(ref)) { refreshPannier(); alert('Produit supprime !'); } else { alert('Impossible de supprimer ce produit !'); } } } function AjoutPannier() { var ok = jsPannier.addProduit($('ref').value, $('titre').value, $('pu').value, $('qte').value); if (ok) { refreshPannier(); } else { alert('Impossible d\'ajouter ce produit ...'); } } function ViderPannier() { if (confirm('Souhaitez-vous vider votre pannier ?')) { jsPannier.viderPannier(); refreshPannier(); } } </script> <style type="text/css">...</style> </head> <body onLoad="refreshPannier()"> <h1>Votre pannier :</h1> <div id="pannier"> ... </div> <a href="javascript:ViderPannier();">Vider le pannier</a> <fieldset>...

Conclusion :


AVANTAGES :
  • Pas de collision des noms de fonctions - encapsulation dans les noms de classes.
  • Gestion intuitive des requettes synchrones et asynchrones.
  • Pas besoin de se soucier de la couche AJAX & CONTROLEUR PHP.
  • Poids insignifiant - la lib < 10 ko.
  • Pas de config supplémentaire ou autre - c'est du plug & play
  • Compatible PHP 4 et PHP 5
  • Compatible IIS / Apache / IE 6 / IE 7 / Mozilla

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
vendredi 10 avril 2009
Statut
Membre
Dernière intervention
4 novembre 2010

Salut aKheNathOn,
d'abord ton code il est pure,facile a comprendre pour nous les debutants en ajax et facilement adaptable!!!
je mets 10/10 pour ne pas dire 11/10 si ça existait!!!
alors j'ai essayer d'enregistrer les produits saisis dans une base de données,la modification ainsi que la suppression,tout passe nikel.
mais quand j'essai de selectionner les produits dans la bdd pour les afficher avec la fonction refreshPannier() au demarage de la page,je n'obtient pas de resultat ou bien ce n'est pas possible!comme je l'ai dit je suis debutant en ajax!!
voici ce que j'ai fait:
function getProduits() {
if (isset($_SESSION['pannier'])) {
$req=mysql_query("select * from produit");
if($req!=false){
while($affiche=mysql_fetch_row($req)){
$_SESSION['pannier'][$ref]->ref=$affiche['ref'];
$_SESSION['pannier'][$ref]->titre=$affiche['titre'];
$_SESSION['pannier'][$ref]->pu=$affiche['pu'];
$_SESSION['pannier'][$ref]->qte=$affiche['qte'];
}
return $_SESSION['pannier'];
}
} else return array();
}

es-ce le bon emplacement ou ai-je fais des erreurs?
encore une fois de plus ton code est propre(10/10)!!!
merci pour ce toolkit bien codé!!a+
Messages postés
13
Date d'inscription
dimanche 1 avril 2007
Statut
Membre
Dernière intervention
15 juin 2009

Merci, je m'en vais tester cette approche qui semble bien pratique ^^
Messages postés
276
Date d'inscription
dimanche 22 juillet 2001
Statut
Modérateur
Dernière intervention
5 décembre 2013

lut stephane,

je te confirme comme quoi c'est OK. Ptite astuce pour éviter ce genre d'erreur :
Si votre fichier PHP est fait sous windows ou provient d'une base de données avec le charset par défaut, il faut effectivement rajoutter dans le Content-type le charset iso-8859-1 / si vous êtes sous linux ou sous une IDE qui vous enregistre les fichiers en UTF-8 faites la modif en conséquence.

Afin de gérer le charset dans tous les cas de figures il faudrait du code supplémentaire - tout upgrade sur le code est bien venu en MP.

bonne prog et a+,
akh
Messages postés
7
Date d'inscription
lundi 19 mars 2007
Statut
Membre
Dernière intervention
18 novembre 2009

Bonjour,

J'ai intégré les scripts dans un projet, et ça marche nickel donc j'en profite pour noter ...

Toutefois, j'ai eu un problème que je pense avoir résolu (car je suis totalement nouveau en ce qui concerne Ajax).
Ma page envoie la requête pour récupérer un nom. Ce nom contient des accents. Il est retourné avec des "?" qui remplacent ces accents ...
J'ai donc mis en place un envoi de header supplémentaire placé dans le code de Ajaxify.class.php au niveau des fonction : render_js() et render_response($value).

Voici ces fonctions :

function render_js() {
header('Content-type: application/x-javascript');
header('Content-type: text/html; charset=iso-8859-1'); /* <<<< nouveau code */
header("Cache-Control: no-cache");
....

et

function render_response($value) {
header('Content-type: text/html; charset=iso-8859-1'); /* <<<< nouveau code */
header("Cache-Control: no-cache");
echo 'var globalRet = ';
....

Comme je ne maitrise pas tout, pouvez vous me dire si c'est OK comme modif ...

Merci d'avance et encore merci pour ce toolkit bien pratique

Stéphane
Messages postés
27
Date d'inscription
samedi 28 décembre 2002
Statut
Membre
Dernière intervention
12 avril 2009

Ca fonction nikel maintenant.
Encore merci pour ce super code. 10/10
Michel
Afficher les 22 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.