Cambiar idioma/locale de la aplicación según las preferencias del usuario

Preferencias de idioma

Este post es la segunda parte del anterior que escribí relacionado con la internacionalización de nuestra aplicacion web y tratará de como traducir nuestra aplicación según el idioma que el usuario haya seleccionado en su configuración personal.

Para ello asumiremos que tenemos una entidad UserPreferences relacionada con nuestra entidad User con una relacion OneToOne, y otra entidad Language relacionada con UserPreferences con una relación ManyToOne, donde guardaremos los posibles “locales” de la aplicación, de la siguiente forma:

User:

/**
 * @ORM\OneToOne(targetEntity="efor\AppBundle\Entity\UserPreference", inversedBy="user", cascade={"persist"})
 */
protected $userPreference;

UserPreference:

/**
 * @ORM\Id
 * @ORM\Column(type="integer", nullable=false)
 * @ORM\GeneratedValue()
 */
private $id;

/**
 * @ORM\ManyToOne(targetEntity="efor\AppBundle\Entity\Language", inversedBy="userPreference", fetch="EAGER")
 */
private $language;

/**
 * @ORM\OneToOne(targetEntity="efor\UsuarioBundle\Entity\User", mappedBy="userPreference")
 */
private $user;

Language:

/**
 * @ORM\Id
 * @ORM\Column(type="integer", nullable=false)
 * @ORM\GeneratedValue()
 */
private $id;

/**
 * @ORM\Column(name="idioma_nombre", type="string", length=50, nullable=false)
 */
private $name;

/**
 * @ORM\Column(name="idioma_abreviatura", type="string", length=4, nullable=true)
 */
private $slug;

/**
 * @ORM\Column(name="idioma_codigo", type="integer", nullable=true)
 */
private $code;

/**
 * @ORM\Column(name="idioma_activo", type="boolean", nullable=false)
 */
private $active = true;

/**
 * @ORM\Column(name="idioma_borrado", type="boolean", nullable=false)
 */
private $deleted = false;

/**
 * @ORM\OneToMany(targetEntity="efor\AppBundle\Entity\UserPreference", mappedBy="language")
 */
private $userPreference;

Todas estas entidades van con sus getters/setters correspondientes.

Montamos el formulario para mostrar los idiomas disponibles que en nuestro caso los tendremos guardados mediante fixtures o migración de datos en la entidad Language. Quedaría así:

class UserPreference extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('language', EntityType::class,array(
                'label' => 'Idioma'
            ));
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'efor\AppBundle\Entity\UserPreference'
        ));
    }

    public function getName()
    {
        return 'usuario_bundle_user_preference';
    }
}

Y este formulario lo añadiremos a nuestro formulario de configuración del perfil del usuario, tal que así:

class ProfileType extends AbstractType
{
    /** @var ObjectManager $manager */
    private $manager;

    /** @var Language $lang */
    private $lang;

    public function __construct(ObjectManager $manager, Language $lang)
    {
        $this->manager = $manager;
        $this->lang = $lang;
    }

    /**
     * @param FormBuilderInterface $builder
     * @param array                $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class, array('label' => 'name'))
            ->add('surnameFirst', TextType::class, array('label' => 'first_name'))
            ->add('surnameSecond', TextType::class, array('label' => 'last_name'))
            ->add('email', EmailType::class, array('label' => 'Email'))
            ->add('plainPassword', 'password', array(
                'label' => 'Nuevo Password',
                'required' => false,
            ))
            ->add('salt', HiddenType::class)
            ->add('photo', new UploadFileType(), array(
                'label' => 'Foto',
                'required' => false,
            ))
            ->add('city', TextType::class, array(
                'label' => 'city',
            ))
            ->add('postalCode', TextType::class, array(
                'label' => 'postal_code',
            ))
            ->add('country', TextType::class, array(
                'label' => 'country',
            ))
            ->add('birthdate', DateType::class, array(
                'label' => 'birthdate',
                'widget' => 'single_text',
                'format' => 'dd/MM/yyyy',
                'attr' => array(
                    'class' => 'form-control input-inline datepicker',
                    'data-provide' => 'datepicker',
                    'data-date-format' => 'dd/mm/yyyy',
                    ),
                )
            )
->add('language', EntityType::class, array(
                'class' => 'AppBundle:Language',
                'data' => $this->lang,
                'label' => 'Idioma',
                'mapped' => false,
                'required' => true,
                'multiple' => false,
                'expanded' => true
            ))
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'efor\UsuarioBundle\Entity\User'
        ));
    }

    /**
     * @return string
     */
    public function getName()
    {
        return 'efor_usuariobundle_User';
    }
}

En nuestro caso, este formulario recibe un objeto Language que se encargara de hidratar el campo “no mapeado” de los idiomas que lo pasaremos desde nuestro Controller al formulario de la siguiente forma:

public function editProfileAction(Request $request)
{
    /** @var User $user */
    $user = $this->getUser();
    $em = $this->getDoctrine()->getManager();
    $langUser = $user->getUserPreference()->getLanguage();
    $editProfileForm = $this->createForm(new ProfileType($em, $langUser), $user, array(
        'action' => $this->generateUrl('profile_edit'),
        'method' => 'POST',
    ));

    $editProfileForm
        ->add('update', 'submit', array(
            'attr' => array(
                'class' => 'boton pull-right'
            ),
            'label' => 'update'
        ));

    $editProfileForm->handleRequest($request);
    if ($editProfileForm->isValid()) {
        try {
            // Si el usuario no ha cambiado el password, su valor es null después
            // de hacer el ->bindRequest(), por lo que hay que recuperar el valor original
            if (null == $user->getPlainPassword()) {
                $user->setPassword($passwordOriginalEncripted);
            }

            /** @var Language $language */
            $language = $editProfileForm->get('language')->getData();
            $userPreference = new UserPreference();
            $userPreference->setLanguage($language);
            $userPreference->setUser($user);
            $user->setUserPreference($userPreference);

            $userManager = $this->getUserManager();
            $userManager->updateUser($user);

            $this->addFlashMessage(CoreController::FLASH_TYPE_SUCCES

            return $this->redirect($this->generateUrl('profile_show', array(
                '_locale' => $language->getSlug()
            )));


        } catch (\Exception $e) {
            $editProfileForm->addError(new FormError($e->getMessage()));

            return $this->render('UsuarioBundle:Profile:editProfile.html.twig', array(
                'form' => $editProfileForm->createView(),
            ));
        }
    }

    return $this->render('UsuarioBundle:Profile:editProfile.html.twig', array(
        'form' => $editProfileForm->createView(),
        'form_errors_validation_document' => $editProfileForm->getErrorsAsString(),
    ));
}

Para que funcione el cambio del “locale” de la aplicación, tendremos que pasarle el parámetro “_locale” en la URL.

Siguiendo la receta del libro de Symfony, tendremos que crear un LocaleListener que se encargara de atender cada petición en el evento ‘onKernelRequest’ y comprobar si existe un parámetro que sea ‘_locale’ para cambiar en la session el locale y que la aplicacion se traduzca. Para ello, creamos una carpeta EventListener dentro de nuestro bundle, y dentro creamos la clase LocaleListener, tal que asi:

<?php
namespace efor\CoreBundle\EventListener;

use Stof\DoctrineExtensionsBundle\DependencyInjection\Compiler\SecurityContextPass;
use Symfony\Component\HttpFoundation\Session\Session;
use Symfony\Component\HttpKernel\Event\GetResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorage;
use Symfony\Component\Security\Core\Authorization\AuthorizationChecker;

class LocaleListener implements EventSubscriberInterface
{
    private $defaultLocale;

    /**
     * LocaleListener constructor.
     *
     * @param string $defaultLocale
     */
    public function __construct($defaultLocale = 'es')
    {
        $this->defaultLocale = $defaultLocale;
    }

    /**
     * @param GetResponseEvent $event
     */
    public function onKernelRequest(GetResponseEvent $event)
    {
        $request = $event->getRequest();
        if (!$request->hasPreviousSession()) {
            return;
        }

        // try to see if the locale has been set as a _locale routing parameter
        if ($locale = $request->attributes->get('_locale')) {
            $request->getSession()->set('_locale', $locale);
        } else {
            // if no explicit locale has been set on this request, use one from the session
            $request->setLocale($request->getSession()->get('_locale', $this->defaultLocale));
        }
    }

    public static function getSubscribedEvents()
    {
        return array(
            // must be registered after the default Locale listener
            KernelEvents::REQUEST => array(array('onKernelRequest', 150)),
        );
    }
}

Después añadimos el listener como un servicio dentro del archivo app/config/services.yml :

services:

    app.locale_listener:
        class: efor\CoreBundle\Listener\LocaleListener
        arguments: ['%kernel.default_locale%']
        tags:
            - { name: kernel.event_subscriber }

Ademas, si queremos que cuando el usuario haga login se cambie el idioma de la aplicación, según el idioma que tenga guardado en sus preferencias, debemos hacerlo en otro listener. En mi aplicación, dispongo de un listener que se ejecuta después del login satisfactorio del usuario y es allí donde busco el locale en las preferencias y lo envió.  La documentación para este listener la tenéis aquí.

<?php

namespace efor\UsuarioBundle\Redirection;

use efor\AppBundle\Entity\Role;
use efor\UsuarioBundle\Entity\User;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\RouterInterface;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface;

class AfterLoginRedirection implements AuthenticationSuccessHandlerInterface
{
    const DEFAULT_LOCALE = 'es';

    /** @var RouterInterface */
    private $router;

    /**
     * AfterLoginRedirection constructor.
     *
     * @param RouterInterface $router
     */
    public function __construct(RouterInterface $router)
    {
        $this->router = $router;
    }

    public function onAuthenticationSuccess(Request $request, TokenInterface $token)
    {
        //Default redirect
        $response = new RedirectResponse($this->router->generate('fos_user_security_login'));

        if ($token->isAuthenticated()) {
                //Go home with user locale preferences
                /** @var User $user */
                $user = $token->getUser();
                $userPreference = $user->getUserPreference();
                $lang = $userPreference ? $userPreference->getLanguage()->getSlug() : self::DEFAULT_LOCALE;

                $response = new RedirectResponse($this->router->generate('dashboard_homepage', array(
                    '_locale' => $lang
                )));
        }
        // Go login
        return $response;
    }
}

Y tenemos este listener definido como servicio dentro de nuestro bundle, tal que así:

<service id="redirect.after.login" class="efor\UsuarioBundle\Redirection\AfterLoginRedirection">
    <argument type="service" id="router" />
</service>

En resumen, en mi caso solo cambiando el locale en la session, request y translator, no me funcionaba, por lo que he tenido que recurrir a la alternativa de pasar el locale por GET en la url y que el listener fuera el que hiciera el trabajo sucio.

No se si sera mejor o peor forma de hacerlo, el caso es que funciona y muy bien.

Si alguien tiene dudas, o quiere comentar algo, no dudéis en escribirme y lo comentamos.

Por favor, comparte si te a sido útil.

Hasta la vista SymfonyDevs ¡

 

Internacionalización de nuestra aplicación web o i18N en symfony2 con JMSTranslationBundle

El post de hoy tratará sobre como traducir nuestra aplicacion web hecha con Symfony 2 a distintos idiomas y no morir en el intento. (Que va, es mucho mas sencillo ya vereis…)

Lo primero, voy a usar un bundle muy famoso de los que más soporte tienen y que me gusta mucho porque aparte de funcionar muy bien, nos ofrece un panel donde poder añadir o editar traducciones que la verdad es que es muy cómodo y da mucha libertad si en nuestro equipo tuviéramos a personal dedicado a las traducciones, ya que les podríamos asignar un determinado ROL para que accedan al panel a trabajar todas las traducciones de nuestra aplicacion web.

Primeros pasos

1- Instalar bundle/s

>> composer require “jms/translation-bundle”

> composer require “jms/i18n-routing-bundle”

2- Configurar los bundles

2.1 Creamos un nuevo fichero jms_translations.yml, lo incluimos en nuestro config.yml y dentro añadimos todos los bundles que contendrán traducciones:

jms_translation:
    configs:
        app:
            dirs: ["%kernel.root_dir%", "%kernel.root_dir%/../src"]
            output_dir: "%kernel.root_dir%/Resources/translations"
            ignored_domains: ["routes"]
            output_format:  yml
            excluded_dirs: ["cache, data, logs"]
            extractors: ["jms_i18n_routing"]
        app_bundle:
            dirs: ["%kernel.root_dir%", "%kernel.root_dir%/../src"]
            output_dir: "%kernel.root_dir%/Resources/FOSUserBundle/translations/translations"
            extractors: ["jms_i18n_routing"]
        ...etc.

2.2 Creamos otro fichero llamado jms_i18n_routing.yml, lo incluimos en el config.yml y añadimos:

jms_i18n_routing:
    default_locale: "%locale%"
    locales: "%languages%"
    strategy: prefix_except_default

* Tendremos que definir en nuestro parameters.yml el ‘local’ y los lenguages que ofreceremos disponibles.

3- Habilitar dichos bundles en nuestro AppKernel.php

new JMS\TranslationBundle\JMSTranslationBundle(),
new JMS\I18nRoutingBundle\JMSI18nRoutingBundle(),

4- Crear una clase LocaleListener dentro de AppBundle/Listener/ que en cada petición revise si llega un parámetro llamado ‘_locale’ para que ajuste el locale en la session, tal como dice la documentación oficial de Symfony.

<?php
namespace efor\CoreBundle\Listener;

use Symfony\Component\HttpKernel\Event\GetResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class LocaleListener implements EventSubscriberInterface
{
    private $defaultLocale;

    public function __construct($defaultLocale = 'es')
    {
        $this->defaultLocale = $defaultLocale;
    }

    public function onKernelRequest(GetResponseEvent $event)
    {
        $request = $event->getRequest();
        if (!$request->hasPreviousSession()) {
            return;
        }

        // try to see if the locale has been set as a _locale routing parameter
        if ($locale = $request->attributes->get('_locale')) {
            $request->getSession()->set('_locale', $locale);
        } else {
            // if no explicit locale has been set on this request, use one from the session
            $request->setLocale($request->getSession()->get('_locale', $this->defaultLocale));
        }
    }

    public static function getSubscribedEvents()
    {
        return array(
            // must be registered after the default Locale listener
            KernelEvents::REQUEST => array(array('onKernelRequest', 15)),
        );
    }
}

5- Declaramos el servicio en nuestro app/config/services.yml

services:
    ...
    app.locale_listener:
        class: efor\CoreBundle\Listener\LocaleListener
        arguments: ['%kernel.default_locale%']
        tags:
            - { name: kernel.event_subscriber }

6- Ahora tendremos que crear las carpetas de traducciones dentro de cada bundle para añadir las traducciones de cada idioma tal que así(en mi caso tengo 3 idiomas, entonces un fichero por cada idioma):

estructura de carpetas traducciones

7- Dentro de cada fichero ‘.yml’ añadiremos las traducciones en el siguiente formato, agrupando las cosas comunes y que tengan sentido:

organization:
    title: 'Organizaciones'
    create: 'Crear organización'
    list: 'Lista de organizaciones'
    add_course: 'Añadir curso a organización'
logout: 'Cerrar sesión'

8- Ahora solo nos faltaría añadir el típico selector de idiomas en nuestro ‘header’ o ‘footer’ para que pueda cambiar el ‘locale’ de la aplicacion y listo(aun no del todo):

<a href="{{ url('dashboard_homepage', {'_locale': 'es'}) }}">Español</a> |
<a href="{{ url('dashboard_homepage', {'_locale': 'va'}) }}">Valenciano</a> |
<a href="{{ url('dashboard_homepage', {'_locale': 'en'}) }}">Ingles</a>

Añadimos un parámetro a la URL para que el LocaleListener lo recoja y lo setee en la session del usuario y asi, puedan funcionar las traducciones por arte de magia.

Y listo… ¿¡Espera no, aún no deberia funcionar…¡? Y de esto me dado cuenta después de 10 minutos de revisarlo todo de arriba a abajo¡¡¡

>> sudo rm -rf app/cache/* app/sessions/*

Si no borras la cache y cierras la session que pudieras tener abierta, no funcionaran las traducciones ni se añadirá el locale en la URL indicando que locale tienes ¡

Documentacion:

-http://jmsyst.com/bundles/JMSTranslationBundle

-http://jmsyst.com/bundles/JMSI18nRoutingBundle

Configurar el panel de traducciones

Como os he comentado antes, este magnifico bundle viene con un panel para administrar las traducciones que tenemos metidas en los ficheros. Para configurar el acceso a este panel, lo haremos de la siguiente forma:

1-  Instalamos el bundle que requiere dicho panel:

> composer require “jms/di-extra-bundle”

2- Activamos el bundle en AppKernel.php como nos dicen en la documentación del bundle:

new JMS\DiExtraBundle\JMSDiExtraBundle($this),
new JMS\AopBundle\JMSAopBundle(),

3- Importamos en el routing_dev.yml el bloque(solo se podrá acceder desde el entorno de desarrollo):

JMSTranslationBundle_ui:
    resource: "@JMSTranslationBundle/Controller/"
    type:     annotation
    prefix:   /_trans

*Si queremos añadirle seguridad de acceso, podemos añadir la siguiente configuración en el security.yml

4- Ahora podemos acceder a la ruta /_trans y veremos el panel que de forma automática nos ofrece el bundle JMS. Puede que nos aparezca un mensaje de error diciéndonos que los archivos no tienen permisos de escritura, por lo que tendremos que darles esos permisos a mano, o crearnos este pequeño shell-script para darle permisos a TODOS a la vez.

#!/bin/bash

find ../ -type f -name "*.es.yml" -exec chmod 777 {} \;
find ../ -type f -name "*.en.yml" -exec chmod 777 {} \;
find ../ -type f -name "*.va.yml" -exec chmod 777 {} \;

Si queréis mas informacion, podéis visitar los enlaces que he puesto arriba de documentación.

Si os ha gustado el post, no dudéis en compartirlo en redes sociales.

Hasta la próxima SymfonyDevs ¡

Enviar email desde SwiftMailer con Hotmail

Despues de buscar informacion por todos los lados no he encontrado apenas documentacion acerca de configurar SwiftMailer para el envio de emails desde nuestra cuenta de Hotmail.

La unica forma de hacerlo que he hecho funcionar es la siguiente:

– En el action del controlador donde queremos enviar el email debemos hacerlo así:

$transport = \Swift_SmtpTransport::newInstance(‘smtp.live.com’, 587, ‘tls’)
->setUsername(‘USUARIO@hotmail.com’)
->setPassword(‘PASSWORD’);

$mailer = \Swift_Mailer::newInstance($transport);
$message = \Swift_Message::newInstance()
->setSubject($subject)
->setFrom($sendFrom)
->setTo($sendTo)
->setBody($body);

$mailer->send($message);

Desconozco de que forma se puede meter esta configuración en el archivo config.yml ya que despues de hacer algunas pruebas no me ha llegado a funcionar. Si alguien lo prueba y lo consigue, que lo publique en los comentarios y lo añadire a esta entrada.

Saludos SymfonyDevs ¡

Compartid este articulo ¡

Formularios: Coleccion no mapeada en la entity usando un DTO

Si no has leido mi anterior “trick” acerca del uso de los DTOs en los formularios, deberias visitar antes este link.

En este ejemplo, necesitaba varios campos que no estan mapeados en la entity de la cual nace el formulario. Para ello, no he tenido mas remedio que añadir un nuevo campo “No mapeado”. Este campo es una coleccion, por lo que se puede añadir o eliminar elementos.

De acuerdo con esto, en mi formulario añado ese campo asi:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        //OTROS CAMPOS DE LA ENTIDAD
        //...
        ->add('enrolUserToOrg', CollectionType::class, array(
             'label' => false,
             'entry_type' => new EnrolUserToOrgType(),
             'mapped' => false,
             'allow_add' => true,
             'attr' => array(
                     'class' => 'enrolUserOrgWrapper'
             )
      ));
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'efor\AppBundle\Entity\Organization',
    ));
}

Os he marcado en color aquello que hay que tener en cuenta.

  • CollectionType::class: Definimos el campo de tipo coleccion para indicarle a Symfony que podremos añadir/quitar elementos
  • ‘entry_type’ => new EnrolUserToOrgType() : Instanciamos el sub-formulario que contendra los campos para cada fila de la coleccion
  • ‘mapped’ => false : Le indicamos que no esta mapeado en la entity para que no valide nada
  • ‘allow_add’ => true : Indicamos que podremos añadir elementos

Ahora lo que haremos sera crear un DTO(en otros sitios lo llaman ‘Domain Model’) que contendra los elementos del “subformulario” el cual hablaba antes y que representaran una fila de cada coleccion. Este DTO contendra 2 campos: usuario y rol, y quedaria asi:

<?php
namespace efor\AppBundle\Model;

use efor\AppBundle\Entity\Role;
use efor\UsuarioBundle\Entity\User;

class EnrolUserToOrg
{
    /** @var User $user */
    private $user;

    /** @var Role $role */
    private $role;

    /**
     * @return User
     */
    public function getUser()
    {
        return $this->user;
    }

    /**
     * @param User $user
     */
    public function setUser($user)
    {
        $this->user = $user;
    }

    /**
     * @return Role
     */
    public function getRole()
    {
        return $this->role;
    }

    /**
     * @param Role $role
     */
    public function setRole($role)
    {
        $this->role = $role;
    }
}

Ahora creamos el subformulario y le indicamos que la clase en la que se tiene que basar es el anterior DTO:

public function buildForm(FormBuilderInterface $builder, array $options)
{
        $builder
            ->add('user', EntityType::class, array(
                'label' => false,
                'class' => 'UsuarioBundle:User',
                'empty_value' => 'Selecciona el/los responsable/s',
                'query_builder' => function (EntityRepository $er) {
                    return $er->createQueryBuilder('users');
                },
                'attr' => array(
                    'class' => 'col-md-5 select-user'
                )
            ))
            ->add('role', ChoiceType::class, array(
                'label' => false,
                'empty_value' => 'Seleccionar un Rol',
                'choices' => $this->roleChoices,
                'attr' => array(
                    'class' => 'col-md-5 select-role'
                )
            ))
            ->add('Quitar', ButtonType::class, array(
                'attr' => array(
                    'class' => 'col-md-2 btn-danger button-remove-enrol'
                )
            ))
       ;
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'efor\AppBundle\Model\EnrolUserToOrg'
    ));
}

Llegados a este punto, vamos a por la vista. Como es una coleccion he seguido la guia de Symfony para pintar esos campos en el formulario y la he ajustado a mi gusto, y quedaria asi:

<ul class="enrolUserToOrg" 
    data-prototype="{{ form_widget(form.enrolUserToOrg.vars.prototype) | e }}">
</ul>

Despues añadiriamos la logica necesaria en jQuery para poder añadir y eliminar filas de esa coleccion:

var $collectionHolder;

// setup an "add a enrolUserToOrg" link
var $buttonAdd = '<span class="input-group-btn">'+
    '<a class="btn btn-success btn-add add_enrol_link"><span class="glyphicon glyphicon-plus"></span> ' +
    '<span>Añadir nuevo responsable</span></a>'+
    '</span>';
var $addLink = $($buttonAdd);
var $newLinkLi = $('<li class="text-center"></li>').append($addLink);

jQuery(document).ready(function() {
    // Get the ul that holds the collection of authorized
    $collectionHolder = $('ul.enrolUserToOrg');

    // add the add li object to the tags ul
    $collectionHolder.append($newLinkLi);

    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolder.data('index', $collectionHolder.find(':input').length);

    $addLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new tag form (see next code block)
        addAuthorizedUserForm($collectionHolder, $newLinkLi);
    });

    //initialize the collection with one element
    if($collectionHolder.find('li').length == 1){
        $addLink.click();
    }

    $(document).on('click', '.button-remove-enrol', function () {
        var contElems = $collectionHolder.find('li').length - 1;

        if(contElems > 1 ){
            $(this).closest('li').remove();
        }
    });

});

function addAuthorizedUserForm($collectionHolder, $newLinkLi)
{
    // Get the data-prototype explained earlier
    var prototype = $collectionHolder.data('prototype');

    // get the new index
    var index = $collectionHolder.data('index');

    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on how many items we have
    var newForm = prototype.replace(/__name__/g, index);

    // increase the index with one for the next item
    $collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

Y para la parte del controlador, podremos recoger los datos de la coleccion del campo no mapeado de la siguiente forma:

/**
 * @Route("/create", name="organization_create")
 */
public function createOrganizationAction(Request $request)
{
    $organization = new Organization();
    $form = $this->createForm(new OrganizationType(), $organization, array(
        'action' => $this->generateUrl('organization_create'),
    ));

    $form
        ->add('ok', 'submit', array(
            'attr' => array('class' => 'btn btn-primary pull-right'),
            'label' => 'Crear',
        ))
        ->add('cancel', 'button', array(
            'attr' => array('class' => 'return-button pull-right'),
            'label' => 'Volver atrás',
        ));

    $form->handleRequest($request);
    if ($form->isValid()) {
        $usersEnroled = $form->get('enrolUserToOrg')->getData();

        //DO SOMETHING YOU NEED WITH THIS ARRAY
        //...example
        // /** @var EnrolUserToOrg $usersEnroled */
        //foreach($usersEnroled as $userEnroled){
             //$user = $userEnroled->getUser();
             //$role = $userEnroled->getRole();
             //...
        //}  
        
       $this->addFlashMessage(CoreController::FLASH_TYPE_SUCCESS, 'La organización ha sido creada con exito'); return $this->redirect($this->generateUrl('organization_list')); } return $this->render('AppBundle:Organization:createOrganization.html.twig', array( 'form' => $form->createView() )); }

De esta forma, nuestra accion sera la que inicialice y procese el formulario a la vez, y asi podremos recoger la coleccion no mapeada y hacer lo que necesitemos.

Os dejo un pequeño video de como quedaria y el efecto de añadir / quitar elementos de la coleccion.

Coleccion no mapeada en Symfony 2

Espero que os guste y por favor, compartid este “trick”.

Cualquier duda, podeis consultarme o mirar en la documentación que os he puesto en los links de arriba y aqui.

Saludos Sf-Devs¡¡

Uso de Data Transfer Objects (DTO) en formularios

Uno de los problemas que a veces nos encontramos en los formularios a menudo, es que necesitamos mostrar campos que no existen en nuestra entidad directamente ya que puede que necesitemos esos campos para construir un determinado objeto en funcion de las opciones que haya elegido.

En mi caso, tengo un formulario en el que aparecen 4 campos de tipo <select> y que son dependientes entre sí, y en funcion de las opciones el usuario tendra asignado unas cosas o otras, y 3 de estos campos no estan mapeados en la Entity.

Para ello, debemos hacer uso de los DTO (Data Transfer Object) que no son mas que “Objetos de Transferencia de Datos” o objetos “pasarela” para recoger la informacion del formulario y hacer a posteriori nuestras cosas.

Enctonces, imaginamos que tenemos una entidad Organizacion pero necesitamos 4 campos mas que no estan en nuestra entity pero que los necesitamos para el formulario:

<?php
namespace myApp\AppBundle\Model;

use Symfony\Component\Validator\Constraints as Assert;

class Enrol
{
    protected $organization;

    protected $plan;

    protected $edition;

    protected $group;

    /**
     * @Assert\NotBlank()
     */
    protected $roleUser;

    /**
     * Enrol constructor.
     */
    public function __construct()
    {
    }

    /**
     * @return mixed
     */
    public function getOrganization()
    {
        return $this->organization;
    }

    /**
     * @param mixed $organization
     */
    public function setOrganization($organization)
    {
        $this->organization = $organization;
    }

    /**
     * @return mixed
     */
    public function getPlan()
    {
        return $this->plan;
    }

    /**
     * @param mixed $plan
     */
    public function setPlan($plan)
    {
        $this->plan = $plan;
    }

    /**
     * @return mixed
     */
    public function getEdition()
    {
        return $this->edition;
    }

    /**
     * @param mixed $edition
     */
    public function setEdition($edition)
    {
        $this->edition = $edition;
    }

    /**
     * @return mixed
     */
    public function getGroup()
    {
        return $this->group;
    }

    /**
     * @param mixed $group
     */
    public function setGroup($group)
    {
        $this->group = $group;
    }

    /**
     * @return mixed
     */
    public function getRoleUser()
    {
        return $this->roleUser;
    }

    /**
     * @param mixed $roleUser
     */
    public function setRoleUser($roleUser)
    {
        $this->roleUser = $roleUser;
    }
}

Este es el modelo en el que se basara nuestro formulario para “hidratar” los campos del objeto que le pasemos.

Nuestro formulario quedaría así:

<?php

namespace myApp\AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class EnrolType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('organization', 'entity', array(
                'label' => 'Seleccionar una Organización',
                'class' => 'AppBundle:Organization',
                'required' => false
            ))
            ->add('plan', 'entity', array(
                'label' => 'Seleccionar un Plan',
                'class' => 'AppBundle:Plan',
                'required' => false
            ))
            ->add('edition', 'entity', array(
                'label' => 'Seleccionar una Edición',
                'class' => 'AppBundle:Edition',
                'required' => false
            ))
            ->add('group', 'entity', array(
                'label' => 'Seleccionar un Grupo',
                'class' => 'AppBundle:Group',
                'required' => false
            ))
            ->add('roleUser', 'entity', array(
                'label' => 'Seleccionar un Rol',
                'class' => 'AppBundle:Role',
                'required' => false
            ));
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'myApp\AppBundle\Model\Enrol'
        ));
    }

    public function getName()
    {
        return 'myapp_bundle_enrol_type';
    }
}

Creamos el action:

/**
 * @Route("/organizations-form", name="org_form")
 */
public function orgFormAction(Request $request)
{
    $enrol = new Enrol();
    $form = $this->createForm(new EnrolType(), $enrol, array());
    $form->add('submit', 'submit');

    $form->handleRequest($request);
    if($form->isValid()){
        //Aqui harás lo que necesites con los datos del formulario
        //ya que tienes el DTO $enroll y con sus métodos puedes
        //recoger la informacion seleccionada en el formulario.
    }

    return $this->render('UserBundle::orgForm.html.twig', array(
        'form' => $form->createView()
    ));
}

Ya tenemos nuestro formulario, ahora la vista(puedes hacerla mas bonita si quieres):

{{ form_start(form) }}
{{ form_row(form.organization) }}
{{ form_row(form.plan) }}
{{ form_row(form.edition) }}
{{ form_row(form.group) }}
{{ form_row(form.roleUser) }}
{{ form_end(form) }}

Y con esto ya tendrias un formulario que no se a basado en una Entity y que contiene los campos que a ti te interesan y que despues procesaras en el Action de la forma que creas conveniente.

Espero que te haya servido, y si es asi, puedes compartir este articulo en redes sociales pulsando en ellas.

En otro articulo, explicare como hacer selects dependientes o anidados a traves de AJAX, otra de las necesidades que todo tenemos hoy en dia para los formularios. Pero eso sera en otro capitulo 🙂

Gracias y saludos a todos.

Uso de Voters para el control del acceso de usuarios en zonas

Acceso denegado - 403
Acceso denegado – 403

Los voters son un elemento de Symfony para darle una vuelta de tuerca al las listas de acceso – ACL (Access Control List) de Symfony donde podemos validar con mas profundidad si un recurso esta disponible para un usuario.

Aqui la documentacion oficial.

A continuacion explicare un ejemplo mas concreto donde lo he usado.

La problematica era la siguiente:

-Un usuario puede realizar ciertas acciones en las zonas, segun el tipo de rol y los permisos definidos para cada rol y zona. Es decir que para mi zona de “Gestion de Usuarios” existen las opciones de listar, crear, editar, visualizar y eliminar usuarios. Por ejemplo para un usuario con “rol admin” podra hacerlas todas, pero un usuario con “rol guest” solo podra listar y visualizar información de los usuarios.

Todo esto va gestionado a traves de relaciones entre enitdades que representan tablas en la BD. Esto lo explicare en otro post con mas detalle para que veais como he resuelto la gestion del acceso de usuarios con roles, permisos y zonas en una aplicacion con FOSUserBundle de por medio.

Empezamos:

1- He definido en el firewall que el rol minimo para poder acceder a esa ruta debe ser algo parecido a esto, de esa forma otros usuarios que no tengan ese rol “minimo” no podran acceder a esa/s ruta/s:

(security.yml)
access_control:
    - { path: ^/login$, roles: IS_AUTHENTICATED_ANONYMOUSLY }
    - ... //seguridad de acceso en otras rutas
    - { path: ^/users, roles: ROLE_GUEST }

2 – En mi bundle he creado una carpeta llamada “Security” donde metere los Voters para revisar la seguridad de las acciones sobre las entidades.

3 – Como en la gran mayoria de mis Voters van a hacerse las mismas (o parecidas) comprobaciones respecto a si puede acceder a ese recurso o no, me he hecho un “GenericVoter” abstracto donde se incluye la logica de la seguridad, el cual herederan el resto de Voters de mis zonas:

<?php
namespace efor\AppBundle\Security;

use Doctrine\Common\Collections\Criteria;
use efor\AppBundle\Entity\Role;
use efor\AppBundle\Entity\RoleZone;
use efor\UsuarioBundle\Entity\User;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Security\Core\Authorization\Voter\AbstractVoter;
use Symfony\Component\Security\Core\User\UserInterface;

// La clase AbstractVoter está disponible a partir de Symfony 2.6
abstract class GenericVoter extends AbstractVoter
{
    const READ = 'read';
    const CREATE = 'create';
    const EDIT = 'edit';
    const DELETE = 'delete';
    
    protected function getSupportedAttributes()
    {
        return array(self::CREATE, self::EDIT, self::DELETE, self::READ);
    }

    abstract protected function getSecureZone();

    /**
     * @param string $action
     * @param object $object
     * @param null $user
     *
     * @return bool
     */
    protected function isGranted($action, $object, $user = null)
    {
        if(!$user instanceof User){
            return false;
        }

        //Buscamos todos los roles del usuario(>= 1 role)
        $roleUser = $user->getRoleUser();

        //recorremos los posibles roles que tenga el usuario
        /** @var Role $role */
        foreach($roleUser as $role){ 
            //buscamos las zonas que tenga disponibles ese role
            $securedZones = $role->getRoleZone(); 

            /** @var RoleZone $securedZone */
            foreach($securedZones as $securedZone)
            {
                if($securedZone->getZone()->getName() === $this->getSecureZone()){
                    switch($action){
                        case self::READ:
                                return $securedZone->getAllowedToRead();
                            break;
                        case self::CREATE:
                                return $securedZone->getAllowedToAdd();
                            break;
                        case self::EDIT:
                                return $securedZone->getAllowedToEdit();
                            break;
                        case self::DELETE:
                                return $securedZone->getAllowedToDelete();
                            break;
                        default: return false;
                            break;
                    }
                }
            }
        }

        return true; //dejamos pasar siempre que se pueda
    }
}

En esta clase hay que destacar que hereda de AbstractVoter que definde una serie de metodos publicos implementados, y otros abstractos. De esa forma, asi nosotros añadimos las posibles acciones sobre un “objeto (entidad)” y una funcion abstracta getSecureZone() donde cada Voter especifico definira la “zona” donde se revisara la seguridad. Dentro de la funcion isGranted() comprobamos que esa zona este definida en alguno de los roles del usuario que la intenta acceder para ver si puede leer, crear, editar o eliminar un objeto de ese tipo.

4 – Definimos nuestro Voter especifico para comprobar la seguridad cuando se accede a los usuarios tal que así:

class UserVoter extends GenericVoter
{
    protected function getSupportedClasses()
    {
        return array('efor\UsuarioBundle\Entity\User');
    }

    protected function getSecureZone()
    {
        //en mi caso apunta a una clase donde tengo definidas 
        //mis rutas seguras - user
        return ZoneMapping::USERS_ROUTE_NAME;
    }
}

Este Voter comprobara para la entidad User (es la clase donde se podran hacer las 4 operaciones posibles – CRUD) cuando acceda a la zona ‘user’ si es posible conceder el acceso.

5 – Definimos un servicio en nuestro ‘services.yml’ que atendera para garantizar la seguridad:

services:
    ...
    user_voter:
        class: efor\AppBundle\Security\UserVoter
        public: false
        tags:
            - { name: security.voter }

6 – Ahora tenemos que usar las funciones que proporciona Symfony de chequeo del acceso para que este Voter se ejecute como responsable. Para ello en nuestro UserController deberemos añadir la/s siguiente/s comprobaciones a traves de anotaciones(cuando se pueda) o condicionales:

class UserController
 {
/**
 * @Route("/create", name="user_create")
 */
public function createUserAction(Request $request)
{
     $newUser = new User();

     if(!$this->isGranted(GenericVoter::CREATE, $newUser)){
         throw $this->createAccessDeniedException();
     }
     $form = ...
}
/**
 * @Route("/list", name="user_list")
 */
public function listUserAction()
{
    if(!$this->isGranted(GenericVoter::READ, new User())){
        throw $this->createAccessDeniedException();
    }
    ...
}

/**
* @Route("/show/{id}", name="user_show")
* @ParamConverter("user", class="efor\UsuarioBundle\Entity\User")
* @Security("is_granted('read', user)")
*/
public function showUserAction(User $user)
{
    if($user === $this->getUser()){
        return $this->redirectToRoute('profile_show');
    }

    return $this->render('UsuarioBundle:User:showUser.html.twig', array(
        'user' => $user
    ));
}

//IDEM con el resto de acciones del CRUD o Actions 
//que queramos proteger

Por una parte destacamos la anotacion @Security donde le decimos que ejecute la funcion isGranted y le pasamos la accion y un objeto(que se obtiene con el @ParamConverter previo).

De la misma forma pero sin usar anotacion, es llamando dentro de nuestro Action a $this->isGranted() pasandole la misma informacion ( a veces necesitamos instanciar un nuevo objeto para que se pueda comprobar) y lanzando una excepcion en caso negativo.

7 – Si queremos revisar la seguridad en las vistas para mostrar u ocultar botones podemos hacer uso de la funcion is_granted() en TWIG de la siguiente forma:

{% set editAction = constant('efor\\AppBundle\\Security\\GenericVoter::EDIT') %}
{% if is_granted(editAction, user) %}
    <a href={{ url('user_edit', { 'id': user.id } }}>Editar</a>
{% endif %}

De esta forma mostrar un link a la ruta de editar usuario solo si mi Voter lo permite validando los permisos sobre ese objeto.


 

Y eso es todo, podeis encontrar mas informacion sobre los Voters en el link que os deje al principio del post para que se ajuste a vuestras necesidades.

Si te ha gustado el articulo, no dudes en compartirlo en las redes sociales para que llegue a toda la comunidad Symfony Hispana. Si tienes otras formas de usarlo, o crees que harias algo distinto y que aportara valor a los demas, no dudes en dejar tu comentario al respecto, y lo revisare lo antes que pueda.

Saludos ¡

 

 

 

Crear un bundle distribuible para Symfony 2

vendorsHoy voy a explicar como se puede hacer un bundle para Symfony 2 distribuible y descargable para otros proyectos tuyos o de tipo Open Source y que cualquiera lo pueda descargar y usar en su proyecto.

Después de buscar y buscar documentación acerca de crear tus propios bundles y poder distribuirlos para la comunidad, por fin encontré una mini-guia que explica por encima como se puede hacer. Os voy a hacer yo una pequeña explicación de como lo he hecho yo para que podais ir practicando con vuestros bundles.

Empezamos ¡

1 – Crear un nuevo proyecto

Lo primero es crearse un proyecto nuevo vacío de Symfony en el cual vamos a crear un bundle y meteremos ahí todo el código que necesitemos, limpito de cualquier cosa para que no de problemas. Para ello ejecutamos:

*Si tenemos el instalador de Symfony:

> symfony new distributable-project

*Si no, siempre nos quedara composer(global):

> composer create-project symfony/framework-standard-edition distributable-project

Esto nos creara una nueva carpeta con la estructura del proyecto en Symfony. A continuación debemos crearnos un nuevo bundle.

> php app/console generate:bundle

Nos saltara el asistente donde deberemos completar todas las preguntas que nos hace:

-Bundle namespace: Company/YourBundle

Bundle name [CompanyYourBundle]: YourBundle

Target Directory [src/]: (Pulsamos Intro)

Configuration format (annotation, yml, xml, php) [xml]: annotation (Elegid la que mas os guste)

Y listo, ya hemos creado nuestro nuevo bundle.

2 – Crear el repositorio

Lo siguiente que haremos sera crear un repositorio en Github dentro de nuestra cuenta para ir subiendo los cambios que vayamos metiendo y además poder descargar en otros proyectos el bundle desde allí.

2.1 – Github

Accedemos con nuestro usuario en Github y creamos un nuevo proyecto dandole un nombre.

2.2 – Inicializamos nuestro repositorio Git en local

Ahora viene la pieza clave de todo esto. Como lo que queremos es distribuir un bundle, nuestro repositorio Git deberá ser inicializado dentro de ese bundle:

> cd src/Company/YourBundle

>git init

> git add -A

> git commit -m “First commit”

> git remote add origin https://github.com/YourAccount/YourBundle.git

> git push -u origin master

De esta forma hemos metido todo el bundle dentro de Github.

2.3 – Crear el composer.json

Ahora otra pieza clave es crear el archivo composer.json dentro del bundle que queremos distribuir.

> sudo nano src/Company/YourBundle/composer.json

{
    "name" : "company/your-bundle",
    "version": "v1.0.0",
    "description" : "Fill with your description",
    "type" : "symfony-bundle",
    "authors" : [{
        "name" : "Your name",
        "email" : "Your email",
        "homepage": "Your site"
    }],
    "keywords" : [
        "put",
        "your",
        "keywords",
        "here"
    ],
    "license" : [
        "MIT"
    ],
    "require" : {
        "php": ">=5.4",
        "symfony/framework-bundle": ">=2.2",
        "symfony/symfony": ">=2.2",
        //Add your require libraries here...
    },
    "autoload" : {
        "psr-4" : {
            "Company\\NameBundle\\" : ""
        }
    }
}

Este es un ejemplo de como podría ser el composer.json. Podeis ajustarlo a vuestras necesidades según los requisitos de vuestro bundle.

Por descontado, tenemos que subir este fichero al repositorio en Github.

> git add -A

> git commit -m “Added composer json file”

> git push origin master

3 – Probar a instalar dicho bundle en otro proyecto

Ahora solo nos queda usar dicho bundle dentro de otro proyecto, ya sea nuevo o uno que ya estemos desarrollando. Para ello tenemos que añadir en nuestro composer.json del proyecto donde vayamos a usar nuestro bundle distribuido lo siguiente:

 

“require”: {

…,

“company/your-bundle”: “dev-master” //o la rama que queramos

},

repositories”: [{

“type”: “vcs”,

“url”: “https://github.com/YourAccount/YourBundle.git

}]

Ahora solo nos queda actualizar nuestros vendors y ver si efectivamente se ha instalado nuestro bundle como un vendor dentro de nuestro proyecto:

>> composer update company/your-bundle

> … Installing company/yourbundle (dev-master)

Si todo a ido bien, deberíamos tener dentro de /vendor/Company/YourBundle nuestro bundle ya instalado.

Ahora debemos inicializarlo en nuestro archivo appKernel.php para poder hacer uso de el:

$bundles = [

… ,

new Company\YourBundle\YourBundle()

];

Y ya esta ¡ Con esto ya podremos empezar a usar nuestro bundle en cualquier otro proyecto.

En symfony recomiendan seguir una serie de buenas practicas a la hora de hacer un bundle ditribuible y ademas ojear otros proyectos famosos para ver como lo han resuelto ellos. Os dejo aquí el enlace de las buenas practicas para que le pegueis un vistazo.

4 – Resumen

Eso es todo por hoy.

Por supuesto que el composer.json es un pequeño ejemplo y debereis buscar mas información acerca de todas las opciones que os ofrece Composer para ese fichero.

Tampoco cabe decir que, esto son algunas pruebas que voy haciendo yo y que me sirve de recordatorio para en un futuro acordarme como lo hice y poder hacerlo en otros proyectos. Este articulo esta sujeto a errores y fallos como todo en este mundo, asi que se comprensible y no me castigues muy duro. Es más, ayudame a mejorar y si ves algun fallo o sugerencia siempre seran bienvenidos.

Uno de mis objetivos a corto-medio plazo es el de crear un bundle que hice para uno de los proyectos en los que trabaje y distribuirlo ya que no encontre nada sencillo que se pudiera acoplar a lo que necesitaba, pero eso sera mas adelante.

Gracias por leer, y si me haces un favor, comparte este post con tu equipo, o en redes sociales y ayudame a difundir el conocimiento y aprendizaje con Symfony2.

Nos vemos pronto ¡

Fuentes:

-http://stackoverflow.com/questions/21523481/symfony2-creating-own-vendor-bundle-project-and-git-strategy
-https://github.com/LilaConcepts/LilaConceptsBestPracticeBundle/blob/master/composer.json

Actualización(29/02/2016):

Puede ocurrir que si el bundle no es “publico” quizas no encuentre el repositorio de donde descargarse el bundle para nuestro proyecto y composer nos arroje un error en consola al intentar descargase ese “vendor”.

En ese caso, habria que rellenar lo siguiente para decirle la url del repositorio en nuestro composer.json:

"repositories": [{
    "type": "package",
    "package": {
        "name": "shtumi/useful-bundle",
        "version": "2.0",
        "source": {
            "url": "https://github.com/shtumi/ShtumiUsefulBundle.git",
            "type": "git",
            "reference": "2.0"
        }
    }
}],
"require": {
    ...
    "shtumi/useful-bundle": "2.0"
},

Despues hacemos >>composer update -o y listo.

Saludos ¡¡