Plan:
Partie 1 : Installation des différents framework et création d’une première page
Partie 2 : Création de la base du frontend avec Vue et CoreUI
Introduction
Dans cette partie, on va créer la structure de l’application.
Question architecture, on va utiliser :
- Symfony 4.1 (dernière version en date)
- VueJS 2 (https://vuejs.org)
Heureusement pour nous, Symfony a tout prévu pour créer une grosse application, robuste et durable, et propose nombre de “bundles” afin d’éviter de tout recoder à a main.
Quant à Vue JS, c’est vraiment LE framework front dont la prise en main est juste époustouflante !
Pré-requis
Pas grand chose :
- PHP > 7.1 (j’utilise la 7.2)
- Composer (cf getcomposer.org)
- MySQL ou MariaDB
- Node + NPM
Note : les manipulations sont ici faites sous Ubuntu (18.04)
A l’attaque !
Allez, on installe Symfony :
composer create-project symfony/website-skeleton workeet
Comme on peut le voir, l’installation nous dit plein de choses :
Changer de répertoire
cd workeet
Installer le serveur de dev intégré (tiens, un premier bundle !)
composer require server — dev
Configurer la base de données, mais nous on ne le fera pas tout de suite ;)
Maintenant que notre partie “back” est mise en place, voyons un peu la partie “front”. Certes, on a dit qu’on allait utiliser Vue, mais il est nécessaire de concevoir la partie graphique de l’application.
Comme je ne suis qu’un humble développeur, mais pas designer, j’ai pris quelque chose de “all-in-one” : CoreUI : https://coreui.io/vue/ .
C’est du Bootstrap 4 sous forme de composants déjà tout faits, mais surtout basé sur Bootstrap-Vue (https://bootstrap-vue.js.org).
Allez c’est parti.
Symfony + Vue JS
Nous, on veut faire une “SPA” : Single Page Application
En bref, Symfony (et Twig, le moteur de template) ne va charger qu’une seule page qui contiendra tout le Javascript nécessaire au fonctionnement de l’application.
Seules les données (sous forme de JSON) seront échangées entre le “front” (en Vue) et le “back” (en Symfony).
Donc se pose la question de “comment j’arrive à coupler les 2 !??”
C’est là qu’intervient Webpack Encore, un bundle de Symfony.
Comme son nom l’indique, il va nous aider à utiliser/configurer Webpack proprement pour construire/”bundler” notre application Vue, et ainsi pouvoir ajouter le résultat dans une page Twig de Symfony.
C’est pas clair ? Pas grave, on va faire ça pas à pas.
Encore ?
Installons d’abord Webpack Encore et installons les dépendances JS
composer require webpack-encore
npm i
Une fois ceci réalisé, allons voir de plus prêt la doc, ….tiens une page spéciale Vue.
On fait donc comme dans la doc :
npm i — save vue vue-loader@^¹⁴ vue-template-compiler
Puis intéressons-nous à un des fichiers centraux de notre application : webpack.config.js
Ce fichier regroupe toute la configuration pour compiler notre application.
Ajoutons juste la ligne :
.enableVueLoader()
et le tour est joué (enfin pour l’instant !)
Une page (et une seule)
Comme évoqué dans la structure de l’application, nous n’aurons qu’une seule page HTML qui chargera notre application Vue.
Créons-là, ce sera fait !
Editez le fichier templates/base.html.twig et remplacez le contenu par :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0">
{#<link rel=”icon” href=”<%= BASE_URL %>favicon.ico”>#}
<title>Workeet</title>
<link rel=”stylesheet” href=”{{ asset(‘build/app.css’) }}”>
</head>
<body>
<noscript>
<strong>We’re sorry but test doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript><div id=”app”></div>
<script src=”{{ asset(‘build/app.js’) }}”></script>
</body>
</html>
C’est minimaliste, mais pas besoin de plus :
- une div “app” qui servira de point d’ancrage à notre application
- import du CSS (“bundlé”) de l’application
- import du JS (“bundlé”) de notre application
Heu, ils sortent d’où les fichiers CSS et JS “bundlés” ? De Webpack !
Enfin, pour l’instant, ils n’existent pas ! mais là aussi, pas de panique, on va les créer dans un second temps.
C’est l’heure maintenant de “propulser” notre nouvelle page.
Propulsons !
Symfony est un framework MVC (Modèle Vue Controleur)
Pour faire simple, sans parler de la partie données (Modèle), il faut faire en sorte d’afficher notre page web quand on appellera l’URL de notre site web.
Ainsi, quand on va appeler l’URL “http://mon_super_serveur/”, un mécanisme doit dire “il y a quelqu’un qui sait ce qu’on doit faire quand on appelle l’URL “/” ?”.
Ce mécanisme, c’est le routage.
Le routeur va faire correspondre une URL à une fonction d’un controleur.
Créons donc un contrôleur, et faisons en sorte qu’une de ses fonctions puisse traiter notre URL de base (“/”).
A la racine du projet :
Note: ici, on peut voir en action un deuxième bundle: MakerBundle (toutes les commandes make:….)
Le résultat de la commande nous dit 2 choses :
- elle a créé notre controleur
- elle a aussi créer un template correspondant
Allons voir ce contrôleur : éditez le fichier src/Controller/DefaultController.php
Pour l’instant, il ressemble à ça :
Evidemment, ce fichier est généré et ne correspond pas à notre besoin.
Mais il offre déjà pas d’informations :
- L’annotation “Route”: c’est elle qui agit sur notre fameux routeur. Ici, celle-ci est configurée pour qu’à chaque appel de l’url http://mon_super_serveur/default la méthode “index” exécute (oui c’est aussi simple !)
2. la méthode renvoie le template qui a été généré par la commande make, mais avec une variable “controller_name”.
2 modifications sont donc à faire :
- On veut une “route” “/” et non “default”
- On ne veut pas renvoyer de variable
Voici donc comment doit être modifié ce contrôleur:
Maintenant que notre contrôleur est modifié, allons voir ce qui va être affiché : notre template. Editez le fichier templates/default/index.html.twig
Le voici:
Bon ici, nous c’est beaucoup plus simple : on a besoin de rien, puisqu’on va attacher notre application à la “div” déjà contenue dans base.html.twig.
Notez simplement la première ligne : {% extends ‘base.html.twig’ %}
En bref, on utilise ici l’héritage de template (merci TWIG ;) ), et donc même si on dit dans le controleur qu’on affiche (render) le template index.html.twig, celui-ci “hérite” de base.html.twig, donc on aura bien le contenu de base.html.twig à l’écran (+ éventuellement le contenu d’index.html.twig, mais ici pas besoin).
Note : on pourrait se passer de base.html.twig et transférer son contenu dans index.html.twig, mais je me suis rendu compte que quand on fait ça, plus de barre de debug Symfony !
Ainsi donc supprimez TOUT le contenu d’index.html.twig sauf la première ligne :
{% extends ‘base.html.twig’ %}
Et si on testait si ça marche ?
Serveur, mon beau serveur…
Pour tester si tout ce qu’on a mis en place jusqu’à présent fonctionne, on va se servir du serveur de développement de Symfony (cf Pré-requis).
Lançons-le :
Tout à l’air OK. Ouvrez votre navigateur à l’adresse indiquée : http://127.0.0.1:8000
Arghhh, une erreur :
On va solutionner le problème sans rentrer dans le détail. Sachez juste que le fichier manquant est généré par Webpack Encore pour que la commande “asset” sache quel fichier prendre et quelle URL “rendre” dans le template.
Lancez donc “npm run dev” comme suit :
Cette commande n’est pas anodine. C’est elle qui va “bundler” nos fichiers sources (suivant la configuration de webpack.config.js) et modifier au passage le fameux fichier manifest.json qui nous manquait.
Rappelez l’URL http://127.0.0.1:8000 : ça marche !
Oui ok, pour l’instant on ne voit rien, mais tout y est si vous lancez l’inspecteur de votre navigateur (F12) puis onglet “Elements”.
Hello Symfony !
On va faire en sorte d’afficher quelque chose dans notre page, histoire de ne pas rester sur notre faim dans cette première partie.
Editez le fichier assets/js/app.js, qui souvenez-vous est le fichier qui est contenu dans notre page base.html.twig, et ajoutez ces quelques lignes à a fin :
Ici, rien de très compliqué (en apparence) :
- on importe “Vue” pour s’en servir juste après ;)
- on démarre notre application avec en paramètres:
→l’élément de base (souvenez-vous de <div id=”app”></div>, c’est celle-là!)
→un composant de base (on y reviendra) “App”
Puis créons ce composant “App”, en créant un fichier assets/js/App.vue tel que:
Faisons de nouveau appel à Webpack Encore pour “compiler” nos modifications:
npm run dev
Puis réaffichons notre page http://127.0.0.1:8000 :
Et voilà ;)
