Avec Laravel 5.5 je vous ai proposé une application d'exemple créée progressivement, en l'occurrence une galerie photos que j'ai appelée album. Cette application est disponible sur Github. Elle est aussi en démonstration en ligne. Une année a passé depuis que j'ai rédigé cet ensemble d'articles et maintenant Laravel en est à la version 5.7. Il n'y a à vrai dire pas de révolution entre les deux versions parce que désormais Laravel en est arrivé à un stade mâture.

Par contre j'ai eu envie de donner plus d'étoffe à mon application et lui ajouter quelques fonctionnalités et la rendre plus réaliste. Je vous propose donc une nouvelle série d'articles pour apprendre Laravel 5.7 en déployant cette application améliorée. Pour la démarquer de la précédente je l'ai appelée album-plus. Cette application couvre les principales fonctionnalités du framework. Vous pouvez la trouver sur Github. Pour le côté client je suis resté classique avec une utilisation de Bootstrap 4 et JQuery. J'ai hésité à employer Vue.js mais je n'ai pas considéré que le traitement en cause le nécessitait. Dans ce chapitre je vais vous présenter cette application dans son stade final qui est donc l'objectif à atteindre au bout de cette série. Mais évidemment il risque d'y avoir des changements en cours de route... On va se placer d'un triple point de vue :

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. On trouve également le vote des autres utilisateurs qui peuvent donner leur note s'ils sont authentifiés, ainsi que le nombre de clics. Pour changer de page il dispose de liens de pagination dans les parties supérieure et inférieure :

D'autre part l'affichage est "responsive"et sur petit support la barre est rétractable et les vignettes empilées :

Lorsque la largeur augmente on passe à deux vignettes :

Puis ensuite à 3 et 4 vignettes sur la largeur... 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. Dans le bas de la page on a deux liens pour les mentions légales et la politique de confidentialité :

L'utilisateur

Pour devenir utilisateur et ainsi pouvoir :

envoyer des photos
créer des albums
noter les photos des autres utilisateurs
gérer son profil
gérer ses données personnelles

Il faut s'inscrire. Pour ça il faut utiliser le lien Inscription dans la barre de navigation :

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. Laravel 5.7 a intégré la vérification de l'email, je l'ai donc ajouté à l'application. 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
ajouter un album
gérer ses albums
supprimer l'une de ses images
changer le statut d'une image (adulte ou pas)
consulter ses notifications (quand il a reçu au moins une note sur une de ses photos)

Ajouter, supprimer une image, changer de catégorie

Pour ajouter une image on passe par ce menu :

On tombe sur 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
une case à cocher pour indiquer un contenu adulte

On a évidemment la validation pour tous les contrôles :

Quand on sélectionne une image elle apparaît dans le formulaire pour vérification :

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 :

Il y a une alerte avant suppression. On peut aussi changer la catégorie d’une image avec cette icône :

On peut alors choisir la catégorie avec une boîte de dialogue :

Le changement de statut de l'image (adulte ou pas) se fait aussi avec une icône :

Lorsqu'une image a le statut "adulte" elle apparaît avec un liseré rouge :

On va dire que le hibou pourrait effrayer les enfants :)

Les albums

Pour ajouter un album on passe par ce menu :

On a alors un formulaire de saisie :

On demande juste un nom. Si tout se passe bien on a une alerte :

Pour gérer les albums existants on passe aussi par le menu :

On obtient cette page :

Là on peut modifier le nom des albums et aussi les supprimer. Lorsqu'on a des albums on peut ajouter une image dans un de ces albums en utilisant cette icône :

On obtient une page de dialogue :

Une image peut se trouver dans plusieurs albums. Une fois qu'on a des albums on y accède dans le menu :

Le profil

Dans son profil il peut :

changer son adresse email
changer la pagination
déclarer son statut adulte
en application du RGPD : supprimer son compte et obtenir ses données personnelles (portabilité)

Les notifications

Lorsque une note est attribuée à une photo une notification est créée pour le propriétaire de la photo. Dans la barre de menu on a une petite cloche qui apparaît avec le nombre de notifications :

Quand on clique sur la cloche on obtient le détail des notifications :

Au survol des liens des photos on a une vignette d'aperçu :

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
mettre le site en maintenance
gérer les utilisateurs

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 un simple formulaire :

On ne change que le nom (et le slug correspondant).

Les images orphelines

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.

Le mode maintenance

Lorsque l'administrateur choisi l'option "Mode maintenance" il arrive sur cette page :

Là il peut mettre le site en maintenance, il ne sera ainsi plus accessible. Et il peut aussi autoriser son IP aprce qu'il vaut quand même mieux qu'il puisse lui y accéder ! Une petite icône rouge apparaît dans la barre de menu pour rappeler qu'on est en mode maintenance :

Un clic sur l'icône ramène directement dans la page des réglages.

Gestion des utilisateurs

La dernière option concerne la gestion des utilisateurs avec cette page :

La il dispose de tous les renseignements concernant les utilisateurs. Il peut aussi les modifier :

Et aussi les supprimer, avec une alerte par sécurité.

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 encore un peu évoluer selon les réactions.