Ayer os contaba cómo instalar FOSJsRoutingBundle en WAMP (Windows) y hoy veremos un ejemplo de cómo usar FOSJsRoutingBundle en nuestras plantillas TWIG.
Hoy os traigo un nuevo minitutorial sobre el tema de moda estos días, Symfony.
Propósito
Aprovecharé el gestor de tareas que construimos con Symfony ayer para incluir una nueva funcionalidad, que será borrar tareas.
Sin FOSJsRoutingBundle
Realmente, podríamos proceder sin utilizar FOSJsRoutingBundle. Recordemos que TWIG nos permite generar rutas con parámetros.
Veamos cómo hacerlo SIN FOSJsRoutingBundle.
Sería tan sencillo como crear una nueva ruta en routing.yml:
cursoTaskBundle_task_delete:
pattern: /{id}/delete
defaults: { _controller: cursoTaskBundle:Default:delete, id: 0}
requirements:
id: \d+ |
La acción necesaria en el controlador (DefaultController.php), que contiene la invocación a la función de Doctrine que borra un elemento de la BD.
public function deleteAction($id){ // borrado de tarea de la BD if (!$id){ throw $this->createNotFoundException('No se puede borrar una tarea si no se especifica su ID'); } $em = $this->getDoctrine()->getEntityManager(); $task = $em->getRepository('cursoTaskBundle:Task2')->find($id); if (!$task){ throw $this->createNotFoundException('No se ha encontrado la tarea '.$id.' en la BD'); } // task exists // so, delete it $em->remove($task); $em->flush(); return $this->render('cursoTaskBundle:Default:success.html.twig', array( 'message' => "Tarea borrada correctamente" )); } |
Y crear las rutas en TWIG (editaremos la plantilla show.html.twig que construimos en el ejemplo mencionado anteriormente). Atención a la línea 16:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | {% block message %}
{% if tasks is defined %}
<table style="border-spacing: 5px; margin-right: 5px; border-collapse: separate;">
<tr style="font-weight: bold;">
<td></td><!-- editar -->
<td></td><!-- borrar -->
<td>NOMBRE</td>
<td>FECHA</td>
<td>DESCRIPCIÓN</td>
<td>URL</td>
</tr>
{% for tarea in tasks %}
<tr style="font-size: 0.8em">
<td><a href=" {{ path('cursoTaskBundle_task_edit', { 'id' : tarea.id } ) }}" >edit</a></td><!-- editar -->
<td><a href=" {{ path('cursoTaskBundle_task_delete', { 'id' : tarea.id } ) }}" >edit</a></td><!-- borrar -->
<td>{{ tarea.task }}</td>
<td>{{ tarea.dueDate|date("m/d/Y") }}</td>
<td>{{ tarea.description }}</td>
<td>{{ tarea.url }}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No hay tareas. Puedes <a href="{{ path('cursoTaskBundle_task_new2') }}">Insertar una nueva tarea</a></p>
{% endif %}
{% endblock message %} |
Y ya estaría. El usuario, al pulsar sobre “delete”, sería redirigido a curso/task/(id)/delete, que borraría la tarea identificada por (id). Si vuestro usuario es de click fácil, como yo, esto podría causar el borrado involuntario de una tarea. Nunca está de más pedir una confirmación al borrado. En este caso vamos a construirla en Javascript y el ejemplo servirá para ver cómo utilizar FOSJsRoutingBundle.
Con FOSJsRoutingBundle
Deseamos que, cuando el usuario pulse sobre el link de “borrar tarea”, se le pregunte si está seguro de que desea hacerlo.
El primer paso será modificar nuestra plantilla en TWIG añadiendo los javascripts necesarios para que FOSJsRoutingBundle funcione, para lo cual reescribiremos el block script que definimos en nuestro primer ejemplo.
Además de incluir los JS (líneas 5 y 6), debemos crear una nueva función que genere un cuádro de diálogo tipo Sí/No. En caso de que el usuario pulse sí, habrá que redirigirle a la página que borra esa tarea (url_borrar). Es en la generación de esta url_borrar donde interviene FOSJsRoutingBundle (líneas 13 a 19)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | {% block script %}
{% javascripts
'@cursoe5Bundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script type="text/javascript" src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{% endjavascripts %}
<script type="text/javascript">
//<![CDATA[
// Sacar un dialogo de confirmacion y redireccionar al borrado, si procede.
function estasSeguro(id){
var url_borrar = Routing.generate('cursoTaskBundle_task_delete',{ "id": id });
//alert(url_borrar);
if (confirm("Seguro que deseas borrar?")){
window.location = url_borrar;
}
}
//]]>
</script>
{% endblock script %} |
La ruta que borra las tareas es cursoTaskBundle_task_delete. Para poder acceder a una ruta vía FOSJsRoutingBundle tenemos que indicarlo de forma explícita en el fichero de rutas (routing.yml). Esto se conoce como exponer una ruta. Atención a las líneas 4 y 5:
1 2 3 4 5 6 7 | cursoTaskBundle_task_delete:
pattern: /{id}/delete
defaults: { _controller: cursoTaskBundle:Default:delete, id: 0}
options:
expose: true
requirements:
id: \d+ |
De no hacer esto, obtendríamos el error “Route 'cursoTaskBundle_task_delete does not exist” (lo veríamos en la consola de errores de javascript de nuestro navegador)
Y ya solo nos faltaría modificar show.html.twig de forma que al pulsar el enlace de borrar, se ejecute la función estasSeguro() que definimos anteriormente.
{% block message %}
{% if tasks is defined %}
<table style="border-spacing: 5px; margin-right: 5px; border-collapse: separate;">
<tr style="font-weight: bold;">
<td></td><!-- editar -->
<td></td><!-- borrar -->
<td>NOMBRE</td>
<td>FECHA</td>
<td>DESCRIPCIÓN</td>
<td>URL</td>
</tr>
{% for tarea in tasks %}
<tr style="font-size: 0.8em">
<td><a href=" {{ path('cursoTaskBundle_task_edit', { 'id' : tarea.id } ) }}" >edit</a></td><!-- editar -->
<td><a href="#" onclick="(estasSeguro({{ tarea.id }}))">delete</a></td><!-- borrar -->
<td>{{ tarea.task }}</td>
<td>{{ tarea.dueDate|date("m/d/Y") }}</td>
<td>{{ tarea.description }}</td>
<td>{{ tarea.url }}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No hay tareas. Puedes <a href="{{ path('cursoTaskBundle_task_new2') }}">Insertar una nueva tarea</a></p>
{% endif %}
{% endblock message %} |
Y ya tendremos nuestro gestor de tareas con funcionalidad completa: insertar, editar y borrar.
Si deseamos exponer una lista de rutas más larga, podemos editar directamente config.yml:
# app/config/config.yml fos_js_routing: routes_to_expose: [ route_1, route_2, ... ] |
