8 Jan, 2020

De l’ajax avec cakephp 3

Exemple de la mise en place de fonctionnalités AJAX dans CakePHP 3 et utilisation d'un template Javascript
Attention, cet article a désormais quelques années… Il se peut que toutes les informations qu’il contient ne soient plus pertinentes.

– Introduction

Nous avons développé un outil pour gérer nos serveurs sur lesquels sont hébergés les sites de nos clients. Cet outil a pour but de superviser et piloter les hébergements ainsi que fournir à l’utilisateur d’autres informations utiles dans l’objectif final d’avoir un suivi concret de l’état de nos serveurs.

Chaque site appartient à un serveur et contient des informations propre à lui-même. Un serveur peut avoir zéro ou plusieurs sites liés.

Il est possible de changer les informations d’un site ou d’un serveur. Lorsqu’une modification est faite, nous ajoutons une opération au journal des opérations effectuées.

Ci-dessous, nous pouvons voir dans cette vidéo comment renseigner une nouvelle opération :

Dans cet article, nous présentons dans un premier temps la manière de créer un champ en fonction de la valeur d’un autre tout en restant sur la même page, c’est à dire en AJAX. Puis, pour aller plus loin nous présenterons l’utilisation du moteur de template HandleBars.

Dans notre contexte, nous avons trois tables : Un serveur, un site et une opération. Un site appartient à un serveur et est lié par serveur_id, une opération est une action faite sur un serveur et/ou sur un site, elle est liée à la table Serveurs et à la table Sites via serveur_id et site_id.

Dans notre formulaire, nous voulons ajouter une opération avec un site et un serveur. Ici l’AJAX prend forme au niveau de la sélection d’un site, c’est à dire n’afficher que les sites ayant pour serveur_id le serveur sélectionné.

– Les modèles utilisés

– Le formulaire d’ajout d’une opération

Au niveau de la vue, il faut mettre l’attribut “onchange” sur le champ select du “serveur” afin que la fonction JS soit appelée. De ce fait, à chaque changement de serveur, la fonction sera appelée et les sites seront mis à jour.

– AJAX

Dans le fichier Javascript webroot/js/app.js, on crée la fonction qui est appelée dans la vue (onchange). Elle fait elle-même appel à une méthode du SitesController pour récupérer la liste des sites ayant pour serveur_id celui sélectionné dans le champ Serveur :

Penchons nous plus particulièrement sur les paramètres généraux d’une requête AJAX :

  • url : La ressource ciblée, ici le lien vers la méthode du contrôleur
  • type : Le type de la requête HTTP. ( GET, POST, UPDATE, DELETE…)
  • dataType : Le type de données à recevoir, ici, du JSON ( peut être du HTML)
  • success : function(response, statut){} : Entre les accolades contient le HTML renvoyé à la page. Nous récupérons l’argument response qui est le résultat de la requête, ici ce sont nos sites. C’est ici que l’on ajoute le contenu des sites dans nos divs préalablement créées dans notre vue.
  • error : en cas d’erreur la fonction prend en charges trois arguments : le résultat jqXHR qui est un objet AJAX créé en interne par jQuery, le statut, et l’erreur.

– Controller CakePHP 3

Tout d’abord, dans la fonction initialize de AppController, il est utile de charger le component RequestHandler de cette manière : “$this->loadComponent(‘RequestHandler’);”. Le component Request Handler est utilisé dans CakePHP pour obtenir des informations supplémentaires au sujet des requêtes HTTP. Ici nous l’utilisons pour informer le controller que c’est un processus AJAX.

Dans un second temps, dans le contrôleur SitesController, il est nécessaire d’ajouter la fonction getSites qui prend en paramètre serveur_id :

– Aller plus loin pour gérer ses templates avec Javascript et HandleBars

Dans notre contexte, l’application devait pouvoir être internationale. La fonction de cakePHP __() permet d’internationaliser le contenu du site.

Notre problème était donc que du contenu était généré dans des fonctions javascript, il était donc compliqué de mettre la fonction PHP sur ce texte.

Afin de gérer notre contenu et épurer nos fichiers JS nous avons alors entrepris d’utiliser la librairie Handlebars.

Handlebars

Handlebars est une librairie JS qui permet la construction de vues dynamiques, son action est de fusionner un template html avec des données récupérées par une fonction JS.

Template

Tout d’abord, il faut créer un template. Il sera lié au JS où l’on récupérera les données à afficher. Pour plus de clarté, dans vos éléments créer un dossier template ou vous mettrez tous vos templates JS. Nous rangeons par exemple le fichier suivant dans /src/Template/Element/templates/affichageSite.ctp :

Javascript

Dans la requête ajax, au niveau du traitement de la réponse success, remplacer le code par ce dernier afin de lier le template JS et les données récupérer par la fonction du controller vu précédemment :

Vue

Dans la vue, il suffit d’ajouter le chargement du template créé ci-dessus et celui des JS (Ne pas oubliez de charger le app.js s’il n’est pas chargé avant) :

Attention : Bien charger le template avant le fichier Javascript sinon le template compilera avec un contenu vide.

– Conclusion

Nous avons vu dans cet article comment améliorer l’expérience utilisateur pour la saisie d’un champ qui dépend d’un autre. Pour cela, nous avons créé facilement un champ en AJAX avec CakePHP.

Nous avons aussi créer un template Javascript grâce a la librairie HandleBars afin de pouvoir utiliser ensuite des fonctions PHP dans les template JS aisément.

N’hésitez pas à proposer d’autres façons d’intégrer ce genre de champs ou d’autres idées concernant les templates JS.

#ajax #CakePHP #Javascript #template