Ajax toolkit - partage de classes entre php / js

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (akhenathon)