Maîtrisez les étapes clés de la mise en œuvre d’Ext Direct avec PHP. Exposez les méthodes de vos classes PHP à votre code javascript.
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre le modèle de composant ExtJS
Liens utiles
Statcks ExtJS (PHP, JAVA,…)
Stack java : ExtDirect4J
Programme
Introduction
Partie 1 : installation d’un Routeur PHP
Partie 2 : votre classe PHP
Partie 3 : votre page html
Partie 4 : votre code javascript
Partie 5 : test
Durée
30min
Introduction
Ext Direct est un pont un pont entre votre code javascript coté client et votre code coté serveur
Ext Direct expose à votre code javascript les méthodes de vos classes serveurs.
A partir de votre code javascript , vous allez pouvoir écrire un appel du genre : MaClasse.maMethod()
Partie 1 : installation du Routeur PHP
créez un répertoire ‘demoextdirect/php’ à la racine de votre serveur web (ici Wamp)
Téléchargez et installez un Routeur PHP. Par exemple celui développé par J. Bruni.
Partie 2 : votre classe PHP
créez une page example.php
Ajoutez le contenu suivant
Expliquez les lignes suivantes : 3, 5, 7, 13
Partie 3 : votre page html
créez une page example.html
Ajoutez le code pour accéder à la librairie ExtJS 4 , en local ou bien en ligne. Exemple : http://extjs.cachefly.net/ext-4.0.2/ext-all.js
Ajouter également le code nécessaire au branchement avec example.php
INFO : le paramètre ?javascript permet d’assurer que la réponse à l’appel serveur sera du code javascript. Cela est géré par le routeur
Partie 4 : votre code javascript
INFO 1 : notez que le namespace par défaut ‘Ext.php‘ est requis
INFO 2 : notez la technique pour le passage de paramètre à la méthode serveur.
INFO 3 : analysez le code source de la page et en particulier le javascript généré par le routeur.
3 remarques :
1) présence du Manager ExtDirect : Ext.direct.Manager
2) namespace spécifique pour l’appel des classes exposées
3) RemotingProvider necessaire pour que ExtJS crée proxy/stubs. cré par la méthode addProvider de Ext.direct.Manager
4) Ext.php.REMOTING_API : décrit les classes et méthodes accessibles par le client javascript
Test
Remarque : vous auriez aussi pu utiliser un ‘console.log(result);’ pour voir l’info dans la console javascript
Solution
Conclusion
Vous avez mis en oeuvre la technologie Ext Direct. Vous avez pu accéder en direct aux méthodes d’une classe PHP à partir de votre code javascript.
