Créer une application avec Laravel 5.5 - Introduction
Mardi 7 novembre 2017 17:23
Vous pouvez trouver sur ce blog un cours complet sur le framework Laravel dans sa version 5.5. Ce cours est illustré par une application de blog disponible sur github. Pour compléter tout ce matériel pédagogique je vous propose une nouvelle série de création d'une application pas à pas. J'ai réfléchi au type d'application qui serait adaptée pour ce genre de présentation et j'ai opté pour une galerie photos.
J'ai donc réalisé cette application en m'arrangeant pour couvrir les principales fonctionnalités du framework. Vous pouvez la trouver sur github et en ligne. Dans ce chapitre je vais vous présenter cette application qui est donc l'objectif à atteindre au bout de cette série.
On va se placer d'un triple point de vue :
Il dispose d'une barre de navigation et l'affichage par défaut de 8 vignettes de photos. Sur les vignettes on a systématiquement le nom de celui qui a mis la photo en ligne ainsi que la date à laquelle il l'a fait. Il peut aussi y avoir une description.
Pour changer de page il dispose de liens de pagination dans la partie inférieure :
D'autre part l'affichage est "responsive"et sur petit support la barre est rétractable et les vignettes empilées :
Lorsqu'on clique sur une image celle-ci apparaît en grand et on dispose d'une navigation pour se déplacer dans les images de la page :
Dans la barre de navigation on peut choisir la catégorie des photos à afficher :
On a plus alors que les images de la catégorie avec le rappel du nom de cette catégorie :
On peut aussi cliquer sur le nom de celui qui a mis en ligne une photo :
On a alors que les photos de cet utilisateur :
On peut aussi changer la langue de l'interface :
On a alors les textes dans la langue choisie :
Et les dates adaptées sur les vignettes.
On obtient alors ce formulaire :
C'est le formulaire classique de Laravel restylisé.
Je n'insiste pas sur cet aspect parce que c'est du Laravel "pur jus" avec aussi le formulaire de connexion :
Et de la même manière les deux formulaires pour le renouvellement du mot de passe.
Lorsqu'un utilisateur est connecté la barre de navigation change d'aspect :
En plus du simple visiteur il peut :
On a :
Si tout se passe bien on a une information :
L'image se retrouve en tête puisque la dernière envoyée :
Il peut supprimer ses photos :
La suppression est immédiate sans alerte.
Là il peut :
Un message confirme la création :
Et elle se retrouve ensuite dans le menu :
On a un bouton pour la suppression :
On a alors une alerte (parce que la suppression d'une catégorie entraîne en cascade celle de toutes les photos de cette catégorie) :
Si on confirme la catégorie disparaît définitivement (et toutes ses photos) :
Pour la modification c'est une simple formulaire :
On ne change que le nom (et le slug correspondant).
La seule action possible est de les supprimer définitivement avec le bouton Supprimer.
On a quand même une alerte :
- le simple visiteur
- l'utilisateur enregistré
- l'administrateur
Le visiteur
Lorsque le visiteur se rend sur le site il arrive sur cette page :
Il dispose d'une barre de navigation et l'affichage par défaut de 8 vignettes de photos. Sur les vignettes on a systématiquement le nom de celui qui a mis la photo en ligne ainsi que la date à laquelle il l'a fait. Il peut aussi y avoir une description.
Pour changer de page il dispose de liens de pagination dans la partie inférieure :
D'autre part l'affichage est "responsive"et sur petit support la barre est rétractable et les vignettes empilées :
Lorsqu'on clique sur une image celle-ci apparaît en grand et on dispose d'une navigation pour se déplacer dans les images de la page :
Dans la barre de navigation on peut choisir la catégorie des photos à afficher :
On a plus alors que les images de la catégorie avec le rappel du nom de cette catégorie :
On peut aussi cliquer sur le nom de celui qui a mis en ligne une photo :
On a alors que les photos de cet utilisateur :
On peut aussi changer la langue de l'interface :
On a alors les textes dans la langue choisie :
Et les dates adaptées sur les vignettes.
L'utilisateur
Pour devenir utilisateur et ainsi pouvoir :- envoyer des photos
- gérer son profil
On obtient alors ce formulaire :
C'est le formulaire classique de Laravel restylisé.
Je n'insiste pas sur cet aspect parce que c'est du Laravel "pur jus" avec aussi le formulaire de connexion :
Et de la même manière les deux formulaires pour le renouvellement du mot de passe.
Lorsqu'un utilisateur est connecté la barre de navigation change d'aspect :
En plus du simple visiteur il peut :
- se déconnecter
- consulter son profil
- ajouter une image
- supprimer l'une de ses images
Ajouter une image
L'ajout du image se fait par ce formulaire :
On a :
- un contrôle pour le choix de l'image à envoyer
- un contrôle pour le choix de la catégorie
- un contrôle pour une description éventuelle
Si tout se passe bien on a une information :
L'image se retrouve en tête puisque la dernière envoyée :
Il peut supprimer ses photos :
La suppression est immédiate sans alerte.
Le profil
Dans son profil il peut :- changer son adresse email
- changer la pagination
L'administrateur
Un administrateur peut en plus :- supprimer les photos de tout le monde (modération)
- accéder au menu de l'administration
Là il peut :
- ajouter une catégorie
- supprimer une catégorie
- modifier une catégorie
- purger les images orphelines
Ajouter une catégorie
Pour ajouter une catégorie il suffit de la nommer :
Un message confirme la création :
Et elle se retrouve ensuite dans le menu :
Gestion des catégories
Pour la gestion des catégories on a un tableau avec deux boutons pour chaque catégorie :
On a un bouton pour la suppression :
On a alors une alerte (parce que la suppression d'une catégorie entraîne en cascade celle de toutes les photos de cette catégorie) :
Si on confirme la catégorie disparaît définitivement (et toutes ses photos) :
Pour la modification c'est une simple formulaire :
On ne change que le nom (et le slug correspondant).
La maintenance
Quand on supprime une photo on efface juste sa référence dans la base mais elle reste physiquement sur le disque. On se retrouve donc avec des images orphelines (non rattachées à une catégorie). Quand on va dans la maintenance on a l'affichage de ces images orphelines :
La seule action possible est de les supprimer définitivement avec le bouton Supprimer.
On a quand même une alerte :
Conclusion
Voilà achevé la description de cette application à la fois simple et complète. Elle va nous servir d'objectif à atteindre progressivement au fil des prochains chapitres. Il est possible que je la fasse un peu évoluer selon les réactions.Par bestmomo
Aucun commentaire