Upload Files and persist to Doctrine Entity - Parte III - User CRUD Templates

Si actualizamos el formulario de creación de usuarios, entonces nos daremos cuenta de que hay un error, el campo path no esta declarado en nuestro UserType, para ello debemos eliminar todo el DIV donde aparece el campo $path no usado:

nano src/Petramas/MainBundle/Resources/views/User/new.html.twig

Upload Files and persist to Doctrine Entity - Parte II - UserType

Si observamos el formulario de creación de usuario luego de generar el crud veremos que el campo path es un input text, debemos modificarlo para que acepte subida de archivos, esto se logra modificando el FormType.

nano src/Petramas/MainBundle/Form/UserType.php

Upload Files and persist to Doctrine Entity - Parte I - User Entity

Para poder subir archivos (en este caso imágenes), poder visualizarlos, guardarlos en una carpeta con un hash por nombre  y guardar el nombre original, cambiarlos al editarlos y borrarlos al eliminar el registro, primero debemos crear una entidad, o editar la que tengamos.

En este caso vamos darle a los usuarios la posibilidad de subir una foto para su perfil, para ello editamos la entidad User que tenemos creada:

nano src/Petramas/MainBundle/Entity/User.php

FOSUserBundle - Parte IX - Overriding Profile

Vamos a sustituir el formulario del perfil del usuario, para que pueda editar y agregar la información que crea pertinente.

mkdir src/Petramas/MainBundle/Form/Type/

FOSUserBundle - Parte VIII - Overriding Translations

De igual modo se pueden sustituir las traducciones:

mkdir src/Petramas/MyFOSUserBundle/Resources/translations/

FOSUserBundle - Parte VII - Overriding Login

Como nuestro formulario de login lo renderizaremos dentro de nuestro menú superior, en el caso de que no este logueado el usuario, entonces no va a tener que heredar de PetramasMainBundle:layout.html.twig porque si no tendríamos la página dentro de la misma página ocasionando un conflicto.

por lo tanto copiamos el archivo login.html.twig:

mkdir src/Peteramas/MyFOSUserBundle/Resources/views/Security/

FOSUserBundle - Parte VI - Overriding Resetting

Aquí son 4 archivos a sustituir:

checkEmail.html.twig
passwordAlreadyRequested.html.twig
request_content.html.twig
reset_content.html.twig

mkdir src/Peteramas/MyFOSUserBundle/Resources/views/Resetting/

FOSUserBundle - Parte V - Overriding Profile y Change Password

Ahora vamos a sustituir las plantillas del perfil y de cambiar la contraseña:

mkdir src/Peteramas/MyFOSUserBundle/Resources/views/Profile/

cp vendor/friendsofsymfony/user-bundle/FOS/UserBundle/Resources/views/Profile/show_content.html.twig src/Peteramas/MyFOSUserBundle/Resources/views/Profile/

FOSUserBundle - Parte IV - Overriding Registration

Si empezamos a usar las rutas del FOSUserBundle nos daremos cuenta que todas funcionan. Las rutas pueden ser tomadas usando el comando de Symfony router debug:

php app/console router:debug

fos_user_security_login           ANY      ANY    ANY  /login
fos_user_security_check           POST     ANY    ANY  /login_check
fos_user_security_logout          ANY      ANY    ANY  /logout
fos_user_profile_show             GET      ANY    ANY  /profile/
fos_user_profile_edit             ANY      ANY    ANY  /profile/edit
fos_user_registration_register    ANY      ANY    ANY  /register/
fos_user_registration_check_email GET      ANY    ANY  /register/check-email
fos_user_registration_confirm     GET      ANY    ANY  /register/confirm/{token}
fos_user_registration_confirmed   GET      ANY    ANY  /register/confirmed
fos_user_resetting_request        GET      ANY    ANY  /resetting/request
fos_user_resetting_send_email     POST     ANY    ANY  /resetting/send-email
fos_user_resetting_check_email    GET      ANY    ANY  /resetting/check-email
fos_user_resetting_reset          GET|POST ANY    ANY  /resetting/reset/{token}
fos_user_change_password          GET|POST ANY    ANY  /profile/change-password

FOSUserBundle - Parte III - Sustitución de plantillas (Overriding Templates) - layout.html.twig

El modo de sustituir plantillas hechas en FOSUserBundle es muy sencillo, teniendo nuestro bundle hijo de éste.

Tenemos que fijarnos dentro de la carpeta:

"vendor/friendsofsymfony/user-bundle/FOS/UserBundle/Resources/views"

FOSUserBundle - Parte II - Creación del Child Bundle

Para poder modificar las plantillas que vienen por defecto en FOSUserBundle, es necesario crear un bundle que sólo se encargará de recoger todas las modificaciones hechas, dejando nuestro MainBundle tal como está.

php app/console generate:bundle

el cuál ejecuta una consola interactiva para la creación de bundles e iremos respondiendo una a una las preguntas:

Bundle namespace: Petramas/MyFOSUserBundle
Bundle name [PetramasMyFOSUserBundle]:
Target directory [/home/joerobles/NetBeansProjects/petramas/src]:
Configuration format (yml, xml, php, or annotation): annotation
Do you want to generate the whole directory structure [no]? yes
Do you confirm generation [yes]?
Confirm automatic update of your Kernel [yes]? 
Confirm automatic update of the Routing [yes]?

luego se debe indicar a éste bundle creado que heredará de FOSUserBundle, editando el archivoPetramasMyFOSUserBundle.php

nano src/Petramas/MyFOSUserBundle/PetramasMyFOSUserBundle.php

y agregando return 'FOSUserBundle'; dentro de la función getParent:

public function getParent()
{
    return 'FOSUserBundle';
}

Mensajes de confirmación (Flash messages) Bootstrap 3 en Symfony2

Nuestros formularios funcionan, lo que le falta es el retorno o mensajes de confirmación de las acciones: Crear, Editar, Eliminar; para que el usuario tenga la certeza de que su acción ha sido ejecutada satisfactoriamente.

Para esto Symfony tiene "Flash bag" (antes "Flash message"), y Bootstrap tiene alerts, lo implementaremos en 2 pasos

1.- Agregar el flashbag a los controladores createAction, updateAction y deleteAction siempre después de:

$em->flush();

createAction:

$this->get('session')->getFlashBag()->set(
    'success',
    array(
        'title' => 'Nuevo!',
        'message' => 'Cliente creado con éxito.'
    )
);

updateAction

$this->get('session')->getFlashBag()->set(
    'success',
    array(
        'title' => 'Editado!',
        'message' => 'Cliente actualizado satisfactoriamente.'
    )
);

deleteAction

$this->get('session')->getFlashBag()->set(
    'success',
    array(
        'title' => 'Eliminado!',
        'message' => 'Cliente removido.'
    )
);

2.- Agregar en el layout al comienzo del body:

{% block body -%}
{# aquí va el siguiente código #}

Si hay flash entonces lo itera y muestra:

nano src/Petramas/MainBundle/Resources/views/layout.html.twig

{% for type, flashMessage in app.session.flashbag.all() %}
    <div class="alert alert-{{ type }} fade in">
        <button class="close" data-dismiss="alert" type="button">×</button>
        {% if flashMessage.title is defined %}
        <strong>{{ flashMessage.title }}</strong>
        {{ flashMessage.message }}
        {% else %}
        {{ type }}
        {% endif %}
    </div>
{% endfor %}

Estilos en botones submit de CRUD

Si han seguido todos los pasos, entonces se darán cuenta que los botones para crear editar y eliminar se encuentran sin estilos. Ésto es debido a que el botón se crea en el controlador con todo el formulario (métodos: createCreateForm, createEditForm, createDeleteForm). Ésto es nuevo desde Symfony 2.3.

nano src/Petramas/MainBundle/Controller/ClienteController.php

Confirmación en Bootstrap 3

Para eliminar un registro sólo hace falta hacer click sobre el botón eliminar, pero, mejor si le preguntamos al usuario si esta seguro de eliminar ese registro, para ello vamos a hacer una modal con un botón para confirmar la eliminación del registro.

Para ello agregamos en nuestro archivo scripts.js:

nano src/Petramas/MainBundle/Resources/js/scripts.js

Maquetación con Bootstrap 3 - show.html.twig - Parte V

Ésta es la última plantilla por defecto creada cuando generamos el CRUD automáticamente:

Maquetación con Bootstrap 3 - edit.html.twig - Parte IV

Esta plantilla es exáctamente igual que new.html.twig, sólo que en lugar de "form." es "edit_form." y en lugar de "(form" es "(edit_form"

Maquetación con Bootstrap 3 - new.html.twig - Parte III

Nuestra plantilla para editar registros se ve así:

{% extends '::base.html.twig' %}

{% block body -%}
    <h1>Cliente creation</h1>

    {{ form(form) }}

        <ul class="record_actions">
    <li>
        <a href="{{ path('cliente') }}">
            Back to the list
        </a>
    </li>
</ul>
{% endblock %}

Maquetación con Bootstrap 3 - index.html.twig - Parte II

Para que la ruta a la que se hace click este siempre debajo del menú superior, se debe modificar la plantilla destino del siguiente modo:

nano src/Petramas/MainBundle/Resources/views/cliente/index.html.twig

Maquetación con Bootstrap 3 - layout.html.twig - Parte I

Editamos el layout

nano src/Petramas/MainBundle/Resources/views/layout.html.twig

Implementar Twitter Bootstrap 3 Estable en Symfony

Editar el archivo base.html.twig

nano app/Resources/views/base.html.twig

este archivo se ve así:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

lo que necesitamos es que se vea así: