Initiation à EasyAdmin

Pré-requis (1/2)

  • Avoir un projet Symfony2 existant
    • Sf2.3+ (pas de silex)
    • Doctrine
  • Contraines :
    • Les clés primaires doivent être simples (et pas composées)
    • Les entités utilisant l'héritage ne sont pas supportés 
    • Tous types de relations est supportés (sauf many-to-many)

Les Fonctionnalités  (2/2)

  • EasyAdmin est un bundle qui permet de
    • gérer les opérations CRUD sur les entités Doctrine (créer, modifier la liste, supprimer).
    • faire une recherche textuel, de la pagination et du tri sur colonnes.
    • d'être afficher sur différents supports  : smartphones, tablettes et ordinateurs de bureau.
  • Les petits plus 
    • Traduit en des dizaines de langues.
    • Rapide, simple et intelligent.

Récupérer le Bundle (1/4)

Ouvrir votre console 

Aller dans le répertoire de votre projet Sf2.3+

Exécuter la ligne ci-dessous

$ composer require javiereguiluz/easyadmin-bundle

Activer le Bundle (2/4)

Ouvrir le fichier app/AppKernel.php 

Ajouter le bundle à la liste des $bundles

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new JavierEguiluz\Bundle\EasyAdminBundle\EasyAdminBundle(),
        );
    }

    // ...
}

Charger les route du Bundle (3/4)

Ouvrir le fichier app/config/routing.yml  (habituellement placé ici)

Ajouter les quatre lignes ci-dessous

# app/config/routing.yml
easy_admin_bundle:
    resource: "@EasyAdminBundle/Controller/"
    type:     annotation
    prefix:   /admin

# ...

Installer les Assets du Bundle (4/4)

Ouvrir votre console

Aller dans le répertoire de votre projet Sf2.3+

Exécuter la ligne ci-dessous

$ php app/console assets:install --symlink

Votre premier Backend (1/6)

Ouvrir le fichier app/config/config.yml 

Modifier le nom dans les menus de votre "EasyAdmin"

# app/config/config.yml
easy_admin:
    entities:
        - AppBundle\Entity\Customer
        - AppBundle\Entity\Order
        - AppBundle\Entity\Product
# app/config/config.yml
easy_admin:
    entities:
        Customers: 
            label: 'Active Clients'
            class: AppBundle\Entity\Customer
        Orders: 
            label: 'Pending Orders'
            class: AppBundle\Entity\Order

** transformation **

Personnaliser votre Backend (2/6)
~Global~

Il est possible de :

  1. changer le prefix pour accéder à l'EasyAdmin
  2. modifier le nom qui apparaîtra de l'EasyAdmin
  3. choisir la langue par défaut 
  4. mettre en place de la sécurité
# app/config/config.yml
easy_admin:
    entities:
        'Active Clients': AppBundle\Entity\Customer
        'Pending Orders': AppBundle\Entity\Order
        'Inventory (2015)': AppBundle\Entity\Product

Personnaliser votre Backend (3/6)
~Les listes~

 

<p text-align:left"="" style="text-align: left;">Il est possible de :

  1. changer le titre de la page
  2. modifier le nom des boutons
  3. choisir le nombre d’éléments affichés par page
  4. sélectionner les colonnes à afficher
  5. d'afficher des "propriétés virtuels" - ex. : getprettyName()
    1. création d'un getter personnalisé
    2. utilisation du nom de la méthode pour l'affichage
  6. personnaliser / traduire le nom des colonnes
  7. définir le format des dates et des chiffres
  8. changer la gestion des booléens
  9. afficher des images
  10. modifier l'apparence des champs

Personnaliser votre Backend (4/6)
~La vue~

Il est possible de :

  1. compléter le titre de la page
  2. sélectionner les champs à afficher, et leur ordre               
  3. personnaliser les labels 
  4. afficher des images  
easy_admin:
    entities:
        Product:
            class: AppBundle\Entity\Product
            show:
                fields:
                    - { property: 'photo', format: 'image' }
                    # ...
    # ...

Personnaliser votre Backend (5/6)
~La création / L'édition (1/3)~

Il est possible de :

  1. modifier le titre de la page
  2. choisir les champs à afficher et leur ordre
  3. personnaliser l'apparence des champs
  4. d'utiliser des types Custom de Doctrine                                    
easy_admin:
    entities:
        Customer:
            class: AppBundle\Entity\Customer
            form:
                fields: ['id', 'name', 'email']
                title:  'Add customer'
            new:
                fields: ['name', 'email']
            edit:
                title:  'Edit customer'
    # ...

Personnaliser votre Backend (5/6)
~La création / L'édition (2/3)~

Il est possible de surcharger les actions de création et d'édition du controller

<?php 
// Ces méthodes existent toujours et sont présentes avant 
// la persistance des informations en BDD
// Edition
protected function prepareEditEntityForPersist($entity)
{
    return $entity;
}
// New
protected function prepareNewEntityForPersist($entity)
{
    return $entity;
}
<?php 
// Etape 1 - Création d'un nouveau controller 
// + il faut étendre le EasyAdminController
// src/AppBundle/Controller/AdminController.php
namespace AppBundle\Controller;

use Symfony\Component\HttpFoundation\Request;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use JavierEguiluz\Bundle\EasyAdminBundle\Controller\AdminController 
      as EasyAdminController;

class AdminController extends EasyAdminController 
{
    /**
     * @Route("/admin/", name="admin")
     */
    public function indexAction(Request $request)
    {
        return parent::indexAction($request);
    }
    /** @TODO **/
}
<?php 
// Etape 2 - Etendre les méthodes souhaitées

    protected function prepareEditEntityForPersist($entity)
    {
        if ($entity instanceof Article) {
            return $this->updateSlug($entity);
        }
    }

    protected function prepareNewEntityForPersist($entity)
    {
        if ($entity instanceof Article) {
            return $this->updateSlug($entity);
        }
    }

    private function updateSlug($entity)
    {
        $slug = $this->get('app.slugger')
                  ->slugify($entity->getTitle());
        $entity->setSlug($slug);

        return $entity;
    }

Personnaliser votre Backend (5/6)
~La création / L'édition (3/3)~

Il est possible de surcharger les formulaires par défaut

<?php
// src/AppBundle/Controller/AdminController.php
namespace AppBundle\Controller;

use Symfony\Component\HttpFoundation\Request;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use JavierEguiluz\Bundle\EasyAdminBundle\Controller\AdminController as EasyAdminController;
use AppBundle\Entity\Event;

class AdminController extends EasyAdminController
{
    /**
     * @Route("/admin/", name="admin")
     */
    public function indexAction(Request $request)
    {
        return parent::indexAction($request);
    }

    public function createEditForm($entity, array $entityProperties)
    {
        $editForm = parent::createEditForm($entity, $entityProperties);

        if ($entity instanceof Event) {
            // the trick is to remove the default field and then
            // add the customized field
            $editForm->remove('city');
            $editForm->add('city', 'choice', array('choices' => array(
                'London', 'New York', 'Paris', 'Tokyo'
            )));
        }

        return $editForm;
    }
}

Personnaliser votre Backend (6/6)
~Le design~ 

layout.html.twig          c'est la mise en page générale
new.html.twig             utilisé pour les actions : new, search
show.html.twig            utilisé pour l'action : show
edit.html.twig            utilisé pour l'action : edit
list.html.twig            utilisé pour l'action : list
_list_paginator.html.twig utilisé pour la pagination 
_flashes.html.twig        utilisé pour les flash messages


your-project/
├─ app/
│  ├─ ...
│  └─ Resources/
│     └─ EasyAdminBundle/
│        └─ views/
│           └─ _list_paginator.html.twig
├─ src/
├─ vendor/
└─ web/

Il est possible de :

  1. changer les assets
  2. personnaliser les templates                                                   
easy_admin:
    assets:
        css:
            # HTTP protocol-relative URL
            - '//example.org/css/admin1.css'
            # absolute non-secure URL
            - 'http://example.org/css/admin2.css'
            # absolute secure URL
            - 'https://example.org/css/admin3.css'
            # absolute internal bundle URL
            - '/bundles/acmedemo/css/admin4.css'
            # relative internal bundle URL
            - 'bundles/app/css/admin5.css'
        js:
            # this option works exactly 
            # the same as the 'css' option
            - '//example.org/js/admin1.js'
            - 'http://example.org/js/admin2.js'
            - 'https://example.org/js/admin3.js'
            - '/bundles/acmedemo/js/admin4.js'
            - 'bundles/app/js/admin5.js'
    # ...

Avant de Commencer

Il faut :

  1. mettre la configuration d'EasyAdmin dans un fichier distinct
  2. activer le cacher
# app/config/config.yml
imports:
    - { resource: parameters.yml }
    - { resource: security.yml }
    - { resource: services.yml }
    - { resource: admin.yml }  # <-- Ajouter cette ligne

# app/config/admin.yml         # <-- Créer ce fichier
easy_admin:
    # ...
    # Copier toute la configuration que vous aviez écrit 
    # ...
# app/config/config_prod.yml
doctrine:
    orm:
        metadata_cache_driver: apc 
        # memcache, memcached, xcache et service sont valides

C'est finito

Los Pollos 

Made with Slides.com