Ajax toolkit - partage de classes entre php / js

Soyez le premier à donner votre avis sur cette source.

Vue 7 714 fois - Téléchargée 721 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

pj27
Messages postés
13
Date d'inscription
jeudi 16 février 2006
Statut
Membre
Dernière intervention
7 juillet 2008
-
Bien codé, bien pensé, et rien que pour le système et l'idée de ce projet, je mets 10.
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
29 -
il te manque un tbody dans ta table, c'est nul, 1/10, et c'est parce-que je peux pas mettre 0 !

bon allez, j'arrete d'essayer de faire de l'humour, j'y arrive pas, 10/10, et je te pose quand meme quelques questions :

pourquoi tu fais pas du json ?
<script language="javascript"> => <script type="text/javascript">
et sacrifie php4 pour php5 serieux...
aKheNathOn
Messages postés
276
Date d'inscription
dimanche 22 juillet 2001
Statut
Modérateur
Dernière intervention
5 décembre 2013
-
En plus d'être compatible PHP 4, mon code HTML est en 3.2 (lol). Pour la partie démo c'est du bloc notes du coup j'ai fait simple.

Vu c'est une lib, je me suis dit que tant qu'à faire qu'elle soit compatible si je ne dois pas sacrifier les perfs - mais rien ne vous empêche de faire vos classes en PHP5. Quand PHP 6 arrivera je n'en ferrais plus ...

Les résultats des executions (retour de vos fonctions) peuvent être des tableaux ou des objets, ou les deux - voir getProduits -> tableau contenant des objets de classe produit. Le tout est sérialisé en JSON. pour la partie sérialisation des classes js gérant les requettes AJAX c'est du pseudo JSON au niveau syntaxe - quant aux exemple c'est des fonctions afin de ne pas allourdir la lecture pour les novices.

Merci pour vos encouragements, ça fait chaud au coeur :)
djlghoul
Messages postés
6
Date d'inscription
samedi 8 décembre 2007
Statut
Membre
Dernière intervention
21 juin 2008
-
j'ai un site web mais j'aimerai bien l'organiser parceque il est totalement riche en tout les modules et les composants parmi eux moteur de recherche AJAX si quelqu'un a une idée ou quelque chose
vous pouvez vister le site puis me laisser des solutions ou des idée www.sami.10gbfreehost.com
cs_Sodams
Messages postés
57
Date d'inscription
mercredi 11 juin 2008
Statut
Membre
Dernière intervention
18 novembre 2009
-
Voilà quelque chose de bien coder et utile.
Un 10 pour monsieur.

Au fait :

# function getProduits() {
# if (isset($_SESSION['pannier'])) {
# return $_SESSION['pannier'];
# } else return array();
# }

Pas besoin du else :-)

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.