Zend Framework 8: Creando una plantilla del sistema
Esta es la octava parte de mi tutorial de Zend Framework. La parte anterior la puedes ver acá.Definiendo una plantilla para todo el sistema
Como decíamos al final del artículo anterior, ¿cómo hacerlo para no tener que escribir en cada página .phtml el código de todo el sitio?
Pues ZF nos permite crear una plantilla general para nuestro sitio. Una vez creada, dentro de ella colocamos los datos de la vista, y asunto arreglado. Veamos cómo se hace esto.
Con nuestro proyecto abierto con Netbeans 6.9, hacemos Alt+Z para ir a los comandos de ZF, y en filtro escribimos layout, y buscamos el comando
enable-layout
y presionamos Enter para ejecutarlo:
Ahora vemos en la parte inferior de Netbeans, en la Salida (Output), dice algo como:
Layouts have been enabled, and a default layout created at G:\xampp\xampp\htdocs\miproyecto/application/layouts/scripts/layout.phtml
A layout entry has been added to the application config file.
Lo que nos indica que se ha creado un nuevo layout (plantilla) para nuestro sitio. Este layout es el archivo
reservas/application/layouts/scripts/layout.phtml
Si lo abrimos, veremos esto:
<?php echo $this->layout()->content; ?>
Esa instrucción lo que hace es colocar ahí el contenido de la vista que estemos llamando: add.phtml, index.phtml, etc.
Vamos a colocarle algunas cosas extra para que veamos cómo trabaja:
Primero, dentro de la carpeta /public crearemos dos subcarpetas: images y css (botón derecho sobre carpeta public, Nuevo / Directorio).
Ahora, descarga esta imagen y guardala en la carpeta /public/images
(clic en la imagen para verla en tamaño completo)
Segundo, crearemos un nuevo archivo CSS dentro de la carpeta /public/css
hacemos clic con el botón derecho sobre la carpeta /public/css, Menú Nuevo Archivo, y seleccionamos 'Cascading Style Sheet' ('Hoja de Estilos') y le damos el nombre 'estilo.css'
Nuestra estructura debería estar así:
Reemplazemos el contenido de layout.phtml por el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title><?php echo $this->title; ?></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- referencia al archivo css, uso $this->baseUrl para tener una referencia segun el lugar dede donde se llame al layout--> <link href="<?php echo $this->baseUrl; ?>/css/estilos.css" type="text/css" rel="stylesheet"> </head> <body> <div class="banner"> <!-- imagen, tambien uso $this->baseUrl para referenciarla--> <img src="<?php echo $this->baseUrl; ?>/images/header.png" width="876" height="104" alt="header"/> </div> <h1><?php echo $this->title; ?></h1> <h3>Este es el contenido de la vista:</h3> <div class="contenido"> <!-- muestro el contenido segun la vista--> <?php echo $this->layout()->content; ?> </div> </body> </html>
Y si abrimos en nuestro navegador la dirección
http://localhost/miproyecto/public/album
veremos algo como :
Como se puede apreciar, el contenido de layout.phtml se agrega automáticamente a la vista. Como lo muestra el código de la página:
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- referencia al archivo css, uso $this->baseUrl para tener una referencia segun el lugar dede donde se llame al layout--> <link href="/miproyecto/public/css/estilos.css" type="text/css" rel="stylesheet"> </head> <body> <div class="banner"> <!-- imagen, tambien uso $this->baseUrl para referenciarla--> <img src="/miproyecto/public/images/header.png" width="876" height="104" alt="header"/> </div> <h1></h1> <h3>Este es el contenido de la vista:</h3> <div class="contenido"> <!-- muestro el contenido segun la vista--> <!--creo link para agregar un album --> <a href="/miproyecto/public/album/add">Agregar Album</a> <!--creo una tabla para mostrar los datos--> <table> <tr> <th>Nombre</th> <th>Artista</th> <th>Fecha</th> <th>Descripcion</th> <th>Borrar</th> </tr> <!-- recorro el arreglo de datos--> <!-- por cada fila, muestro sus datos --> <tr> <!-- nombre del album, con un enlace para editar el album--> <td> <a href="/miproyecto/public/album/update/id/1"> Nos sobran los motivos </a> </td> <!-- id del artista--> <td>1</td> <!-- fecha del album--> <td>2000-09-10</td> <!-- descripcion--> <td>grabacion en vivo</td> <!-- enlace para borrar el album--> <td> <a href="/miproyecto/public/album/delete/id/1">Delete</a> </td> </tr> <!-- fin del for--> <!-- por cada fila, muestro sus datos --> <tr> <!-- nombre del album, con un enlace para editar el album--> <td> <a href="/miproyecto/public/album/update/id/2"> de juez y parte </a> </td> <!-- id del artista--> <td>1</td> <!-- fecha del album--> <td>1995-09-10</td> <!-- descripcion--> <td>album</td> <!-- enlace para borrar el album--> <td> <a href="/miproyecto/public/album/delete/id/2">Delete</a> </td> </tr> <!-- fin del for--> <!-- ... mas filas ....--> <!-- fin del for--> </table> </div> </body> </html>
¿Por qué usamos <?php echo $this->baseUrl; ?>/css/estilos.css y <?php echo $this->baseUrl; ?>/images/header.png para refenciar al archivo .css y a la imágen? Pues, como layout.phtml no está en nuestra carpeta public, al momento de generar la página que se va a mostrar, necesitamos decirle en dónde están nuestros archivos.
Además noten que para mostrar el título de la página usamos la instrucción
<?php echo $this->title; ?>
De dónde vienen estas variables, $this->baseUrl; y $this->title; ??
Simple, las enviamos desde nuestros controladores. Abramos cualquiera de ellos, a saber, AlbumController.php. y observemos la función init():
public function init()
{
$this->initView();
$this->view->baseUrl = $this->_request->getBaseUrl();
}
Aquí creamos en la vista la variable baseUrl y le asignamos la url de la vista. Recordemos que la función init() de un controlador se ejecuta cada vez que se llama a una acción de ese controlador.
y la variable $this->title? Pues veamos en el mismo AlbumController.php la acción addAction():
public function addAction()
{
//titulo para la pagina
$this->view->title = "Agregar album";
//valor para title
$this->view->headTitle($this->view->title);
//creo el formulario
$form = new Application_Form_Albumform ();
//cambio el texto del boton submit
$form->submit->setLabel('Agregar Album');
//lo asigno oa la accion (la pag web que se mostrara)
$this->view->form = $form;
Esta variable se crea en cada vista, con el título que querramos darle a cada acción. Las variables creadas en las vistas pueden ser accedidas desde layout.phtml, y de esa forma podremos personalizar la plantilla al nivel que queramos.
Ahora probemos a agregar álbumes o a editarlos. Veremos que el layout se ve en todas las páginas.
Incluso podríamos agregar algo de css en nuestro archivo estilos.css para que nuestro sitio se vea mejor:
/public/css/estilos.css:
h1{
color: blue;
font-size: 120%;
}
table
{
/*para que los bordes que se junten se conviertan en uno solo*/
border-collapse:collapse;
}
table th
{
text-align: center;
background-color: #CDCDCD;
}
table td{
padding-left: 5px;
padding-right: 5px;
}
table tbody tr
{
background-color: white;
}
table th, table td
{
border: 1px solid #CDCDCD;
height:20px;
vertical-align:bottom;
}
table tbody tr:hover
{
background-color: #FFD324;
}
/*formualrios*/
form label{
font-family: sans-serif;
color: darkorange;
font-weight: bold;
}
/*clase de la lista de errores de los formularios*/
ul.errors li{
color: red;
font-weight: bold;
}
Ahora, podemos recargar nuestra página
http://localhost/miproyecto/public/album
Y se verá así:
Y si vamos a 'Agregar Album':
Como podemos ver, todo lo que hagamos en layout.phtml se reflejará en nuestras vistas.
Creando la página de inicio
Una cosa que le falta a nuestro sitio es una págia de inicio, para que cuando apuntemos a
http://localhost/miproyecto/public/
se vea algo más adecuado.
Abramos nuestro controlador index (IndexController.php), y en su funcion init() coloquemos lo mismo que en las de los otros controladores:
public function init()
{
$this->initView();
$this->view->baseUrl = $this->_request->getBaseUrl();
} Y en la vista de la accion index (index.phtml), a la que podemos ir más rápido haciendo clic dentro de indexAction(), boton derecho, Navigate / Go to view, borremos lo que hay y coloquemos esto:
<table>
<thead>
<tr>
<th>Menú</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="<?php echo $this->url(array('controller' => 'album',
'action' => 'index')); ?>">
Ver Albumes
</a>
</td>
</tr>
<tr>
<td>
<a href="<?php echo $this->url(array('controller' => 'artista',
'action' => 'index')); ?>">
Ver Artistas
</a>
</td>
</tr>
<tr>
<td>
<a href="<?php echo $this->url(array('controller' => 'tema',
'action' => 'index')); ?>">
Ver Temas
</a>
</td>
</tr>
</tbody>
</table>
Ahora, apuntemos nuestro navegador a
http://localhost/miproyecto/public/
y veremos algo como esto:
Desde acá puedes descargar el proyecto de prueba:
http://www.mediafire.com/?a0zy45x36nbmv6g
Ahora ya tenemos un sitio web que se ve medianamente bien. Sin embargo, hay dos temas que aún no se han tratado.
- ¿Cómo traducir los mensajes de error?
- ¿Cómo uso Zf con Ajax?
Veremos estos temas en los siguientes artículos.
Suscribirse a:
Enviar comentarios
(
Atom
)
Entradas
6 comentarios :
Hola angelorum. Tu tutorial esta excelente. Pero otra duda ha saltado en el estudio de tu tutorial. Cuando creo un nuevo artista, no graba la fecha_ingreso. Examine la BD q creaste y el tipo de fecha_ingreso es datetime; diferente a la fecha de la tabla album cuyo tipo es date. Como haria para que quede registrada la fecha al registrar un nuevo artista, que la unica solucion que le veo es cambiar el tipo datetime x date pero asi no se vale xD.Quiero que me aparezca le fecha y la hora como deberia ser con el datetime. Explicame esoooo xD
como se realiza un boton cancelar...
trate de hacerlo. creo el boton $cancel = new Zend_Form_Element_Submit('cancel');
$cancel->setAttrib('id', 'cancelbutton');
pero como se lo redirecciona hacia un pagina hacia atras...
tienen que cambiar en las variables a fecha_ingreso dice solo fecha.
Hola Amigo Excelente trabajo es un muy buen tutorial, aunque aun tengo una pequeña duda :D, como harias las consultas con uniones entre dos o mas tablas ?
Muy bueno el tutorial pero tengo una duda con respecto a los layout.
Digamos tengo un Login( un diseño diferente) y mi pagina principal donde estan todo el diseño. Cuando se crea un layout contiene por defecto a todos los archivos .phtml pero quisiera seleccionar a que archivos debe de afectar el layout. Espero haber explicado bien mi duda. Gracias.
Hola, "Ninguno zolo". Tu respuesta está acá:
http://stackoverflow.com/questions/1615956/how-to-switch-layout-files-in-zend-framework
en resumen, en el action del controller en donde quieres usar un layout distinto, colocas
$this->_helper->layout->setLayout('mi_otro_layout.phtml');
El archivo mi_otro_layout.phtml debe estar en el mismo directorio que el archivo layout.phtml.
Saludos
Publicar un comentario