El tutorial Jobeet

4.2. El layout

Si te fijas atentamente en los bocetos gráficos, verás que algunas partes se repiten en todas las páginas. Como ya sabes, duplicar el código nunca es buena idea, ya sea código PHP o etiquetas HTML. Por tanto, tenemos que encontrar alguna forma de evitar la repetición de estos elementos comunes de las páginas.

Una forma sencilla de resolver este problema consiste en definir una cabecera y un pie que se añaden en cada plantilla:

Cabecera y pie de página

Figura 4.2 Cabecera y pie de página

El problema es que los archivos de la cabecera y del pie no contienen código HTML válido, por lo que debemos buscar una alternativa. En vez de perder el tiempo tratando de reinventar la rueda, vamos a utilizar otro patrón de diseño para resolver este problema: el patrón de diseño decorator.

El patrón decorator resuelve el problema de otra forma diferente: el contenido se muestra con una plantilla que después se decora con una plantilla global que en Symfony se llama layout:

Funcionamiento del layout

Figura 4.3 Funcionamiento del layout

El layout por defecto de todas las aplicaciones es un archivo llamado layout.php que se encuentra en el directorio apps/frontend/templates/. En este directorio se guardan todas las plantillas globales de una aplicación.

Para crear un layout apropiado para la aplicación Jobeet, reemplaza el contenido del layout por defecto de Symfony por este otro código:

<!-- apps/frontend/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 - Your best job board</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php include_javascripts() ?>
    <?php include_stylesheets() ?>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <div class="content">
          <h1><a href="/job">
            <img src="/images/logo.jpg" alt="Jobeet Job Board" />
          </a></h1>

          <div id="sub_header">
            <div class="post">
              <h2>Ask for people</h2>
              <div>
                <a href="/job/new">Post a Job</a>
              </div>
            </div>

            <div class="search">
              <h2>Ask for a job</h2>
              <form action="" method="get">
                <input type="text" name="keywords" id="search_keywords" />
                <input type="submit" value="search" />
                <div class="help">
                  Enter some keywords (city, country, position, ...)
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div id="content">
        <?php if ($sf_user->hasFlash('notice')): ?>
          <div class="flash_notice">
            <?php echo $sf_user->getFlash('notice') ?>
          </div>
        <?php endif; ?>

        <?php if ($sf_user->hasFlash('error')): ?>
          <div class="flash_error">
            <?php echo $sf_user->getFlash('error') ?>
          </div>
        <?php endif; ?>

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

      <div id="footer">
        <div class="content">
          <span class="symfony">
            <img src="/images/jobeet-mini.png" />
            powered by <a href="http://www.symfony-project.org/">
            <img src="/images/symfony.gif" alt="symfony framework" />
            </a>
          </span>
          <ul>
            <li><a href="">About Jobeet</a></li>
            <li class="feed"><a href="">Full feed</a></li>
            <li><a href="">Jobeet API</a></li>
            <li class="last"><a href="">Affiliates</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Las plantillas de Symfony se crean con archivos PHP normales. Por eso en el layout anterior existen llamadas a funciones PHP y referencias a variables PHP. De todas las variables, la más interesante se llama $sf_content, ya que la crea el propio framework y contiene el código HTML generado por la acción.

Si vuelves a acceder al módulo job desde un navegador (http://jobeet.localhost/frontend_dev.php/job), verás que ahora todas las acciones están decoradas por un layout.