Mis à jour pour Laravel 5.2 !
Laravel est un superbe framework pour gérer le back-end mais qu'en est-il du front-end ? Les frameworks Javascript sont très nombreux et il est difficile de faire son choix tant les propositions de qualité sont variées. Il y a évidemment le grand classique et incontournable JQuery mais d'autres solution plus complètes se dessinent de plus en plus nettement. Il me semble que la plus aboutie est AngularJS. Dans cette série d'articles je vous propose de voir comment on peut articuler ces deux frameworks (AngularJS et Laravel) à l'aide d'une application un peu minimaliste mais suffisante pour évoquer suffisamment le sujet.
L'application
Vous pouvez trouver l'application qui va servir de support sur github. Je l'ai nommée Larangular pour évoquer les deux frameworks. Les instructions d'installation se trouvent avec le projet. Le but de l'application est de permettre à des utilisateurs de partager leurs rêves. Il suffit de s'inscrire pour pouvoir en laisser sur le site. On peut faire défiler tous les rêves et on a la possibilité de modifier ou même supprimer les siens. Un administrateur a accès à tous les rêves (un peu comme Dieu ^^).
Pour le template j'ai encore opté pour un gratuit de chez startbootstrap : Grayscale :
Je le trouve plutôt réussi. J'ai juste changé les photos de fond et ajouté quelques règles de style pour le mettre plus à mon goût.
L'accueil
La page d'accueil se présente ainsi pour un utilisateur non connecté :
Le menu est aussi simple que l'application. On peut atteindre les rêves par l'option DREAMS ou avec le bouton central. Pour se connecter au site on choisit l'option LOGIN. Comme l'approche est SPA (Simple Page Application) les éléments sont déjà présents sur la page chargée. C'est un scrollspy qui permet de les atteindre.
Les rêves
Les rêves se trouvent sur la partie centrale de la page :
Le menu s’adapte pour signaler qu'on est dans la zone des rêves. Ces derniers signalent le nom de leur auteur, leur contenu. Ils sont séparés par une bordure pour la lisibilité de l'ensemble. D'autre part une pagination permet de passer aux rêves suivants ou précédents. Le chargement des rêves pour une page se fait avec une requête spécifique en rafraîchissant uniquement la zone concernée.
La connexion
Si on choisit l'option LOGIN la page glisse jusqu'au formulaire :
On voit la possibilité de s'inscrire ou de renouveler le mot de passe. Ces actions ne sont pas traitées avec AngularJS. J'en parle un peu plus loin dans cet article.
La soumission est effectuée avec une requête spécifique. Les erreurs de saisie modifient le DOM juste pour renseigner l'utilisateur :
Si les informations envoyées ne correspondent à aucun utilisateur dans la base on affiche une barre d'information (toujours sans régénération de la page) :
Si la connexion réussit le menu s'adapte :
On a maintenant le choix entre ajouter un rêve ou se déconnecter. D'autre part deux icônes apparaissent au niveau des rêves qui appartiennent à l'utilisateur pour la modification et la suppression :
Modifier ou supprimer un rêve
Pour modifier un rêve on utilise l'icône en forme de stylo. Une fenêtre modale apparaît alors avec le formulaire :
Si la validation est correcte le nouveau contenu est mis à jour dans la base côté serveur et sur la page côté client et évidemment la fenêtre modale se ferme.
Pour la suppression d'un rêve c'est plus simple. On affiche juste un petit message de confirmation. Si la réponse est positive on envoie une requête au serveur pour la mise à jour de la base et on supprime le rêve sur la page.
Remarque : un administrateur dispose des boutons sur tous les rêves.
Ajouter un rêve
Si on utilise l'option ADD A DREAM on glisse jusqu'au formulaire de création d'un rêve :
Pour la validation c'est exactement comme pour la modification d'un rêve, le message apparaît en rouge léger sous la zone de saisie. Par contre comme le rêve est ajouté à la liste des rêves il faut rafraîchir toute la zone des rêves pour afficher la première page. Comme les rêves apparaissent dans l'ordre décroissant des dates de création le nouveau rêve va apparaître en premier de la première page.
Enregistrement utilisateur et reset du mot de passe
Pour la partie enregistrement d'un nouvel utilisateur et reset du mot de passe je ne l'ai pas traité avec AngularJS. Ce sont des actions ponctuelles et pas très fréquentes. J'ai prévu de les traiter pour avoir une application complète mais c'est du pur Laravel. Je me suis contenté de respecter l'esthétique du site. Par exemple pour le formulaire d'inscription :
Comme toute cette partie est classique je n'en parlerai pas dans cette série d'articles.
Organisation du code
Côté client
Les fichiers côté client se trouvent évidemment dans le dossier public :
On trouve :
- le CSS du template grayscale.css
- les polices font-awesome et celles de glyphicons
- les images du template
- les fichiers Javascript :
- ceux du template : grayscale.js et jquery.easing.min.js
- ceux de l'application pour AngularJS :
- app.js : l'application
- controllers.js : les contrôleurs
- services.js : les services
Laravel
Contrôleurs
Pour Laravel on a les contrôleurs :
Ceux pour l'authentification ont été un peu modifiés pour s'adapter aux requêtes d'AngularJS. Tout ce qui concerne les rêves est traité dans le contrôleur DreamController.
Modèles et repository
Voici les modèles et le repository :
On verra les modifications apportées au modèle User. Tout ce qui concerne les rêves se situe dans le modèle Dream et la gestion des données se situe dans le repository DreamRepository.
Les vues
Voici les vues :
Les vues pour l'authentification on été adaptées pour le template choisi. L'ensemble des informations nécessaires à AngularJS se situe dans le fichier index.php. D'autre part j'ai prévu une page 404 au look de l'application :
Les routes
Un aspect intéressant concerne les relations entre les deux frameworks. Pour le côté SPA Laravel se présente comme une simple API. Pour la partie enregistrement d'un utilisateur et renouvellement du mot de passe Laravel par contre prend tout en charge.
Le fichier des routes est plutôt léger :Route::get('/', function(){
return view('index');
});
Route::auth();
Route::get('log', 'Auth\AuthController@log');
Route::resource('dream', 'DreamController', ['only' => ['index', 'store', 'update', 'destroy']]);
Ce qui nous donne ces routes :
- authentification
- renouvellement du mot de passe
- rêves
- log (get) : pour savoir si l'utilisateur est authentifié
- login (post) : pour connecter l'utilisateur
- logout (get) : pour déconnecter l'utilisateur
- dream (get) : pour récupérer une page de rêves
- dream (post) : pour créer un rêve
- dream/{dream} (put ou patch) : pour modifier un rêves
- dream/{dream} (delete) : pour supprimer un rêve
Côté AngularJS il faut donc mettre en place les services qui vont utiliser cette API :
Plutôt que d'utiliser $http j'ai préféré me servir de $resource qui simplifie grandement la syntaxe :
'use strict';
/* Services */
var dreamsServices = angular.module('dreamsServices', ['ngResource']);
dreamsServices.factory('Log', ['$resource',
function ($resource) {
return $resource("log", {}, {
get: {method: 'GET'}
});
}]);
dreamsServices.factory('Login', ['$resource',
function ($resource) {
return $resource("login", {}, {
save: {method: 'POST'}
});
}]);
dreamsServices.factory('Logout', ['$resource',
function ($resource) {
return $resource("logout", {}, {
get: {method: 'GET'}
});
}]);
dreamsServices.factory('Dream', ['$resource',
function ($resource) {
return $resource("dream/:id", {page: '@page'}, {
get: {method: 'GET'},
save: {method: 'POST'},
delete: {method: 'DELETE'},
update: {method: 'PUT'}
});
}]);
On a ainsi toute l'intendance en place pour la communication entre les deux frameworks.
Dans le prochain article on continuera à analyser cette application.
Par bestmomo
Nombre de commentaires : 6