Série – Créez un blog avec Symfony

#1 Administrez facilement votre site avec EasyAdmin

Créez un dashboard d'administration en quelques minutes

1 oct. 2020 à 16:11 – 6min


Table des matières

Bienvenue dans ce nouvel article concernant la construction d'un blog avec Symfony. Dans cet article, nous allons nous occuper de la partie administration de notre blog, en utilisant le bundle EasyAdmin. Attention, nous utiliserons ici la version 3 de ce bundle, qui change significativement des précédentes version.

Installation du bundle

Afin de pouvoir gérer nos articles et en créer de nouveaux, nous aurons besoin d'une interface d'administration. Vous pourriez vouloir en créer une par vous-même, ce qui est loin d'être infaisable, mais nous allons ici utiliser un bundle déjà tout prêt afin de nous faciliter la vie : le bundle EasyAdmin.

Attention, la version 3 de ce bundle, que nous allons utiliser ici, change significativement des versions précédentes. Si vous travaillez sur un projet utilisant la version 2 ou antérieure du bundle, référez-vous plutôt à la documentation officielle. 

Commençons par installer le bundle via composer, ainsi que le bundle security qui nous sera utile plus tard : 

symfony composer require admin security

Créons notre dashboard d'administration

Une fois le bundle installé, créez un dossier src/Controller/Admin/, vous comprendrez très vite pourquoi. Il nous faut maintenant créer notre dashboard. Cela tombe bien, puisque le bundle EasyAdmin nous propose déjà une commande pour nous mâcher le travail :

symfony console make:admin:dashboard

Vous pouvez laisser les valeurs par défaut et valider. Maintenant, rendez-vous à la page /admin, et là, magie ! Vous disposez déjà d'une belle page d'administration !

EasyAdmin default dashboard

Notre premier CrudController

Bon, je vous l'accorde, rien d'incroyable pour l'instant, mais vous allez voir que la force de ce bundle réside dans sa simplicité d'utilisation et sa customization complète. Par exemple, pour gérer nos articles, rien de plus simple. Il suffit de taper la commande suivante : 

symfony console make:admin:crud

Sélectionnez votre entité Article (0 si vous n'avez qu'une entité), puis validez. Le CLI vous demandera alors où générer le nouveau controller ainsi qu'un namespace. Là encore, vous pouvez laisser les valeurs par défaut et valider.

Maintenant, rendez-vous dans notre DashboardController. Vous verrez qu'une fonction configureMenuItems est déjà créée, avec une ligne commentée. C'est cette fonction qui va nous permettre de configurer le menu de notre interface. Ajoutons donc un lien vers nos articles en suivant l'exemple déjà fourni :

Vous remarquerez d'ailleurs que le bundle intègre les icônes FontAwesome. Il est donc possible d'indiquer une classe d'icône pour chaque élément de notre menu, comme je l'ai fait ici.

Si vous raffraichissez votre page /admin, vous verrez que notre menu a bien été mis à jour ! Si vous cliquez sur le bouton "Articles", vous verrez une nouvelle page listant vos articles (pour l'instant il n'y en a enore aucun), et d'en créer de nouveaux. Essayez par vous-même !

Personnaliser les formulaires

Par défaut, EasyAdmin va exposer tous les champs modifiables dans notre formulaire. Dans notre exemple d'article de blog, nous serions tenter de ne pas rendre le champ createdAt modifiable, mais plutôt de le définir automatiquement, et d'afficher l'image elle-même plutôt qu'un simple nom de fichier. Tout cela est facilement configurable depuis notre classe ArticleCrudController. 

En vous rendant dans ce fichier, vous verrez qu'une classe configureFields est commentée. Décommentez-là, et définissez-là comme suit : 

La syntaxe est assez claire. La propriété onlyOnIndex indique que l'on ne souhaite afficher le champ que dans la liste, alors que la propriété onlyOnForms ne va afficher le champ que lorsque l'on créé un nouvel article ou que l'on modifie un article existant. 

Enfin, nous avons utilisé les différents types de champs fournis par EasyAdmin afin de personnaliser l'interface. Le type TextEditorField par exemple permet d'afficher un formulaire wysiwyg permettant de formatter le texte en HTML, plutôt que sous forme de simple zone de texte. Vous pouvez voir la liste de tous les types de champs disponibles sur la documentation officielle du bundle

Configurer le dashboard

Vous l'avez remarqué, la page d'accueil de notre dashboard ne paye pas de mine. Occupons-nous de la rendre un peu plus intéressante. Pour ce faire, nous allons utiliser la capacité modifier facilement les templates de nos bundles, cela s'appelle l'override.

Commençons par créer un dossier templates/admin/, puis ajoutons un fichier dashboard.html.twig, contenant le code suivant : 

Ce morceau de code ne vient pas de nulle part. J'ai simplement copié le contenu du fichier welcome.html.twig fournit par défaut par EasyAdmin, qui se trouve dans vendor/easycorp/easyadmin-bundle/src/Resources/views/. Après l'avoir vidé pour ne garder que l'essentiel, voila le résultat. 

Enfin, modifions la fonction index de notre classe DashboardController pour afficher le template précédent :

Maintenant, si vous essayez d'accéder à votre interface d'administration via /admin, vous devriez voir un magnifique Hello World ! Bon, ce n'est toujours pas incroyable, mais vous avez maintenant la possibilité d'afficher n'importe quoi sur votre dashboard, et ça, c'est déjà un bon début non ? 

Vous pouvez maintenant afficher des informations un peu plus pertinentes, comme la liste de vos articles dans l'exemple suivant : 

Vous remarquerez peut-être que le bundle intègre Bootstrap par défaut. Libre à vous donc de personnaliser à votre gise votre nouvelle interface d'administration !