• Laravel 5,  Vue.js

    Page dynamique

    Un fil récent sur le forum Laravel m’a paru suffisamment intéressant et didactique pour donner l’occasion d’un article. Le cas évoqué est assez fréquent et mérite qu’on s’y penche un peu. On a des données structurées dans un fichier JSON et on veut afficher une liste de nom et ensuite par un clic sur un nom afficher des détails. On peut envisager plusieurs façons de réaliser cela. De façon traditionnelle on va passer par jQuery, commencer par envoyer la liste des noms et ensuite utiliser Ajax pour récupérer les informations sélectionnées. Évidemment on aura ainsi une requête pour chaque clic. Une autre approche consiste à envoyer une page simple, celle-ci…

  • Vue.js

    Comprendre Vue.js : Nuxt en action

    Dans le précédent article je vous ai présenté Nuxt. On a vu qu’il simplifie le développement d’une application Vue en gérant par exemple de façon automatisé le routage. Dans le présent article je vous propose de l’utiliser pour une petite application de recherches d’informations nutritives à partir d’un code-barre. Ce genre d’application se multiplie étant donné la sensibilisation croissante aux méfaits des additifs et à l’équilibre alimentaire. Il existe une base de donnée ouverte renseignée par les utilisateurs qui expose une API que nous allons utiliser. C’est d’ailleurs cette API qui est exploitée par toutes les applications qui existent actuellement. Open Food Facts Open Food Facts est une initiative citoyenne…

  • Vue.js

    Comprendre Vue.js : Nuxt

    On a vu au cours des précédents articles que Vue se présente comme un outil simple et puissant. D’autre part il bénéficie d’une communauté très active et ses possibilités s’élargissent rapidement. Dans le présent article je vous présente Nuxt, un framework dont l’ambition n’est rien moins que créer des applications Vue.js universelles. L’idée est d’utiliser le SSR (Server Side Rendering). C’est quoi cette bête ? Imaginez que vous créez une application avec pas mal de manipulation de code côté client, vous risquez deux écueils : votre application risque de perturber les moteurs de recherche, ça peut poser des soucis parfois au navigateur qui se retrouve avec un gros boulot. La…

  • Vue.js

    Comprendre Vue.js : le routeur

    Dans cet article je vous propose de prolonger l’exemple du quiz en l’enrichissant. Jusque là on a proposé un seul questionnaire, ce qui est limité. Dans une situation réaliste on aurait le choix entre plusieurs questionnaires. Du coup on va se  retrouver avec deux page : une pour le choix du questionnaire et l’autre pour répondre aux questions. Ça nous donne l’occasion de découvrir le routeur de Vue qui est bien pratique ! Le code final pour cet article est téléchargeable ici. On crée le projet On va encore utiliser Vue Cli pour créer le projet. Je ne vais pas trop détailler à nouveau le processus parce que je l’ai…

  • Vue.js

    Comprendre Vue.js : Vuex

    Dans le précédent article on a vu la réalisation d’un quiz. Les données (questions et réponses) ont été placées dans la propriété data du composant. C’est simple et efficace. Mais imaginez qu’on ait plusieurs composants qui se partagent ces informations. On n’a pas trop creusé la communication entre composants mais on a vu déjà les props pour transmettre une information du composant parent vers l’enfant. On verra que dans l’autre sens on utilise des événements. Ça peut devenir rapidement assez lourd. Il serait bien de disposer des données dans un endroit accessible pour tous les composants… La solution préconisée est d’utiliser la librairie Vuex. Elle permet de stocker des données…

  • Vue.js

    Comprendre Vue.js : un quiz

    Poursuivons notre découverte de Vue.js avec une nouvelle petite application. Cette fois il va être question d’un quiz avec donc question et possibilités de réponses, ce qui va nous permettre de voir comment Vue gère les listes de données. Le code final pour cet article est téléchargeable ici. On crée le projet Toujours avec le Cli on crée un nouveau projet : vue create quiz Vérifiez que le projet est correctement créé en lançant le serveur : npm run serve Si vous avez la page d’accueil alors tout va bien on peut poursuivre… Cette fois on va commencer par supprimer le composant HelloWorld : Et pour que ça fonctionne encore…

  • Vue.js

    Comprendre Vue.js : simple application

    Pour poursuivre notre exploration de Vue je vous propose dans ce nouvel article de créer une petite application qui va se contenter de calculer la TVA avec ses différents taux. Ça va nous permettre de voir de nouvelles possibilités et d’avancer dans la compréhension de Vue. Le code final pour cet article est téléchargeable ici. On crée le projet On commence par créer un nouveau projet en acceptant les réglages par défaut : vue create tva Si ça se termine comme ça c’est parfait : Si ce n’est pas le cas reportez-vous au précédent article pour voir si vous avez tous les outils nécessaires. Voilà la structure du projet :…

  • Vue.js

    Comprendre Vue.js : introduction

    Vue.js connaît un succès de plus en plus grand. Le projet sur Github a 118621 étoiles au moment ou j’écris cette ligne. Qui aurait parié sur ce petit poucet face à React et Angular ? Vue.je est un « framework progressif », ce qui signifie qu’on peut le mettre en œuvre de façon incrémentielle. D’autre part il s’entend très bien avec la plupart des librairies Javascript. Il devient ainsi une solution incontournable pour créer une application SPA (Single Page Application). Mais il trouve également toute sa place dans des application qui font un appel intensif au serveur… Pour les développeurs PHP Javascript se présente toujours comme un langage un peu étrange avec…

  • Vue.js

    Vue.js2 : pagination avancée

    Dans le précédent article on a vu un exemple de pagination très simplifié. Je vous propose dans le présent article de poursuivre l’exemple en construisant un composant de pagination digne de ce nom qui soit à la fois pratique, complet et esthétique. On va donc partir de la situation telle qu’on l’a laissée précédemment en transformant la pagination en composant indépendant. Je vous ai mis un zip contenant tout le code final ici. Côté Laravel Du côté de Laravel on va garder le même code mais on va ajouter des utilisateurs. Dans le seeder on va en prévoir 1000 : <?php use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder { /** *…