El tutorial Jobeet

12.3. El aspecto de la aplicación backend

Los módulos que se acaban de generar ya están listos para ser usados:

http://jobeet.localhost/backend_dev.php/job
http://jobeet.localhost/backend_dev.php/category

Los módulos de administración tienen muchas más funcionalidades que los módulos simples que hemos generado hasta el momento. Sin ni siquiera tener que escribir una sola línea de código PHP, cada módulo incluye las siguientes características:

  • El listado de objetos muestra una paginación
  • El listado se puede ordenar
  • El listado se puede filtrar
  • Se pueden crear, modificar y borrar objetos
  • Se pueden borrar varios objetos a la vez
  • Se aplica la validación en los formularios
  • Se muestran mensajes flash para informar al usuario del resultado de las acciones
  • ...y muchas otras características

El generador de la parte de administración incluye todas las características necesarias para crear una interfaz de administración en forma de módulos generados fácilmente configurables.

Si quieres mejorar la experiencia de usuario de la aplicación, tenemos que modificar el aspecto por defecto de la aplicación backend. Para facilitar la navegación entre los módulos de la aplicación, también vamos a añadir un sencillo menú de navegación.

Reemplaza el contenido por defecto de layout.php por el siguiente código:

// apps/backend/templates/layout.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Jobeet Admin Interface</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php use_stylesheet('admin.css') ?>
    <?php include_javascripts() ?>
    <?php include_stylesheets() ?>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h1>
          <a href="<?php echo url_for('@homepage') ?>">
            <img src="/images/logo.jpg" alt="Jobeet Job Board" />
          </a>
        </h1>
      </div>

      <div id="menu">
        <ul>
          <li>
            <?php echo link_to('Jobs', '@jobeet_job') ?>
          </li>
          <li>
            <?php echo link_to('Categories', '@jobeet_category') ?>
          </li>
        </ul>
      </div>

      <div id="content">
        <?php echo $sf_content ?>
      </div>

      <div id="footer">
        <img src="/images/jobeet-mini.png" />
        powered by <a href="http://www.symfony-project.org/">
        <img src="/images/symfony.gif" alt="symfony framework" /></a>
      </div>
    </div>
  </body>
</html>

Este layout utiliza una hoja de estilos llamada admin.css. La hoja de estilos debería encontrarse en el directorio web/css/, ya que la instalamos durante el día 4 junto con el resto de hojas de estilos.

Como hicimos en la aplicación frontend, hemos creado una hoja de estilos muy sencilla para la aplicación backend. Puedes descargar el archivo admin.css directamente desde el repositorio de Subversion.

El aspecto del generador de la parte de administración

Figura 12.1 El aspecto del generador de la parte de administración

Por último, también puedes cambiar en el archivo routing.yml la portada por defecto de Symfony:

# apps/backend/config/routing.yml
homepage:
  url:   /
  param: { module: job, action: index }