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 :

• 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

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.

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

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

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.