Comment créer un système de vote avec la stack Tall et le tester avec Pest ? – E#01 – Installation

Tall ? Pest ? Tu te dis de quoi je te parles, c’est ça ?

Tall, c’est l’acronyme pour Taiwind CSS, AlpineJS, Livewire et Laravel. Je suis certain que tu te sens déjà un peu plus en terre connue n’est ce pas ? 😉

Nota : pour info, suite au sondage que j’avais mis en place, je proposerai une formation sur Tall avant la fin de l’année. Je te préciserai la date plus précisément ultérieurement. En attendant, pour être tenu au courant, je te propose de t’inscrire par email pour recevoir les informations concernant cette formation.

Pest est un tout nouveau framework de test pour PHP développé par Nuno Maduro.

Le projet associé à cette séries d’articles

Voilà pour les présentations, maintenant que tout le monde se connait, voyons le fond. Nous allons mettre en place un système de vote pour que des utilisateurs connectés puissent voter pour leur article préféré.

Tu vas développer ce mini-projet avec moi au cours des prochains épisodes.

Voici un cahier des charges minimal mais tout de même mille fois plus détaillé que ce que nous fournissent nos MOA ou les marketeux 😀 !

• Une page d’accueil listera tous les articles disponibles
• L’article qui recueillera le plus de vote apparaîtra en premier tout simplement.
• Un utilisateur connecté peut voter « UP » or « DOWN » pour un article
• Il peut voter pour plusieurs articles
• Un utilisateur qui a déjà voté pour un article peut modifier son vote
• Pour un article, un utilisateur peut :
  • ne pas voter
  • OU voter « UP »
  • OU voter « DOWN »

Le décor est planté ! A nous, à présent de le rendre concret !!

Première partie : l’installation de Laravel et Tall

Allez on ne perds pas de temps, on rentre direct dans le sujet. On installe tout ce qui va nous être nécessaire pour la suite.

Installation de Laravel

Bon, je vais pas te mentir, on l’a déjà traité en long et en large ce sujet.

Donc ce micro chapitre va se résumer à choisir l’une des options d’installation :

• installer laravel à partir de laravel installer
• installer Laravel à partir de composer
• ou installer Laravel à partir de Laragon.

Le nom de notre application sera ‘htd-voting-system’, mais tu lui donnes le nom que tu veux. c’est juste que dans la suite de ce tutoriel c’est ce nom que je référencerai.

Avec Laravel installer

laravel new htd-voting-system

Si tu préfères composer :

composer create-project --prefer-dist laravel/laravel htd-voting-system

Enfin, troisième méthode, avec Laragon, cliques sur :

1. menu
2. Quick App
3. Laravel
4. donne le nom « htd-voting-system » et clique sur OK

Tu pourras retrouver l’ensemble de ces méthodes pour installer Laravel sur ma chaîne Youtube si tu souhaites plus de détails ou que tu préfères un pas à pas visuel.

Personnellement, j’ai utilisé Laragon. Donc ma base de données est créée directement, elle aura le même nom que le nom donné à l’application (ici htd-voting-system).

Installation de Livewire et du Tall frontend presets

Alors pour se simplifier la vie, on va faire appel à un preset pour notre frontend. Et ça tombe bien, car il y a un preset pour notre stack Tall.

Tu peux le trouver sur Github.

Une fois installé cela te donnera ceci comme rendu :

Et c’est plutôt joli, tu ne trouves pas ?

Bon ce n’est pas le tout de s’émerveiller, mais il faut remettre les mains dans le cambouis. Donc pour installer Livewire et notre preset pour Tall, il suffit de rentrer la commande suivante :

composer require livewire/livewire laravel-frontend-presets/tall

Une fois que composer a fini d’installer les paquets nécessaires et qu’il t’a rendu la main, tu dois indiquer que tu souhaites utiliser le preset Tall et de surcroit l’authentification, tu le verras on en aura besoin.

php artisan ui tall --auth

Juste derrière, il faudra lancer encore une commande :

npm install && npm run dev

Bien à présent, si tu entres dans ton navigateur favori ta page à l’adresse que tu auras réglé pour ton serveur en local, chez moi c’est http://htd-voting-system.happytodev tu peux voir la page d’accueil de ton site.

Et si tu cliques sur login en haut à gauche, le formulaire de connexion s’affiche :

Cela t’indique que l’installation s’est plutôt bien passée !

Configurons notre application

Avant d’aller plus loin, il y a des choses essentielles à faire, tu l’as déjà oublié padawan ?

Le fichier .env

Il y a des petites habitudes à prendre quand tu développes avec Laravel, comme donner un nom à l’application, régler les identifiants de la base de données, indiquer que l’on souhaite pendant la phase de développement avoir les mails envoyés dans les log, etc.

Pour le nom de l’application, tu es bien sûr libre de mettre ce que tu veux, nous sommes en démocratie tout de même 😉

Comme je te l’ai dit plus haut, la base de données a été créée lors de l’installation de l’application avec Laragon. Il faut à présent renseigner les champs 'DB_DATABASE', 'DB_USERNAME' et 'DP_PASSWORD' avec ta propre configuration.

Je te recommande de donner la valeur log au champ ‘MAIL_MAILER’ pour rediriger tous les mails que l’application pourrait générer dans le fichier de log de l’application qui s’appelle laravel.log et qui se trouve dans le dossier storage/logs

La migration

Une fois que notre fichier .env est parfaitement configuré, tu peux lancer la commande artisan permettant d’exécuter les migrations de l’application.

Mais avant de lancer cette dernière, tu peux prendre l’habitude de toujours controller le status de tes migrations pour savoir lesquelles ont étés lancées et celle qui attendent sur le pas de tir !

Pour cela

php artisan migrate:status

Comme tu peux le voir aucune des migrations n’a été lancé. Petite précision utile les migrations se trouvent dans le répertoire app/database/migrations.

Les fichiers de migrations sont nommés avec la date et l’heure au format américain, cela permet de les classer et de savoir dans quel ordre lancer les migrations.

A présent, tu vas lancer la migration afin d’effectuer les opérations concrètement dans la base de données que tu as configuré juste avant dans le fichier .env. Dans notre cas ici, cela va créer 3 tables dans la base de données :

• users
• password_resets
• et la table failed_jobs

Une table supplémentaire sera créée par Laravel, il s’agit de la table migrations qui conservera l’historique des migrations effectuées.

php artisan migrate

On peut aller vérifier dans notre base de données que les tables ont bien été créées :

A présent, nous allons installer le framework de test de Nuno Maduro : PestPHP.

Installation de PestPHP

Allez on commence par les pré-requis.

Il te faut tout d’abord une version de PHP 7.3+. Ensuite il va falloir que tu vérifies dans ton composer.json que tu as bien ces options :

"minimum stability": "dev",
"prefer-stable": true,

Comme ci-dessous :

Ce n’est pas tout, que croyais tu que cela allait être aussi simple que d’appeler Batman à la rescousse ?

Pest nécessite PHPUnit en version 9 et le paquet Collision en version 5.

Sur mon composer.json, comme tu peux le voir juste après ce n’est pas le cas.

Si tu es dans le même cas que moi, tu es bon pour lancer les deux commandes suivantes :

composer require phpunit/phpunit:"^9.0" --dev --update-with-dependencies

suivie de :

composer require nunomaduro/collision:"^5.0" --dev --update-with-dependencies

Une fois les dépendances installées, il est à présent possible d’installer le package pest via composer :

composer require pestphp/pest --dev

Finalement, il nous reste à installer Pest via la commande

php artisan pest:install

Une fois que tout est installé tu peux lancer la commande

./vendor/bin/pest

Si tout se passe bien, tu devrais avoir l’affichage suivant dans ta console

Si tu obtiens l’erreur suivante :

C’est très probablement que le driver pdo_sqlite n’est pas installé. Installe le et tout devrait rentrer dans l’ordre.

Nous en avons fini pour cette partie, tu peux créer un nouvel utilisateur pour vérifier que tout fonctionne, mais entre nous, les tests ayant réussis, cela marchera !

Une fois l’utilisateur créé, il sera automatiquement authentifié sur le site. Tu peux aller jeter un oeil en base de données pour vérifier qu’il est bien créé.

Tout fonctionne.

Je t’ai indiqué plus haut que les mails envoyés par l’application seront redirigés vers le fichier storage/logs/laravel.log.

On peut le vérifier en constatant que le mail de bienvenue a été envoyé à notre utilisateur John Doe :

Si tu copie/colle l’url de vérification du mail dans ton navigateur, tu pourras voir ensuite que le champ email_verified_at est à présent rempli.

Et voilà, cette fois, cette partie est terminée.

On va attaquer le concret dans le prochain article.

A bientôt.