En esta parte vamos a emprolijar un poco nuestro sistema, en la versión anterior el objetivo era mostrar el frontend, pero el código no nos quedo muy limpio, y tampoco aprovechamos todo el potencial de ZF.

Usando Zend_Config

Si ustedes configuraron el virtual host de forma diferente al mio, y apunte a otro puerto y/o a otra url, cuando fueron a ejecutar el blog, seguramente no les tomo los estilos. Esto se debe a que nosotros hardcodeamos la url del proyecto, dentro del preDispatch, si quisieramos arreglar esto deberíamos entrar al IndexController y cambiar los valores de estas variables, si bien esto es mejor que escribir la url, una por una donde se requiera, lo mejor es tener un archivo de configuracion, donde todos estos datos que pueden variar según donde este alojado nuestro proyecto. ZF nos provee Zend_Config, y nos da la posibilidad de guardar nuestra configuracion en archivos .ini, y .xml, por simpleza, y porque me parece mucho mas claro, yo uso los .ini, que va a ser el que vamos a usar en este proyecto. Lo que hace Zend_Config, es levantar el file, y crear un objeto con todas las propiedades que pusieron en ese archivo. Vamos al ejemplo del proyecto, creamos un archivo de configuracion, dentro de la carpeta config/ llamado condig.default.ini.

Este archivo va a contener inicialmente las dos propiedades que antes teníamos en el preDispatch.

[site]
static.server = “http://blogzf.dev:8001/”
app.server = “http://blogzf.dev:8001/”

Si nuestro virtual host es diferente completamos los valores equivalentes.

La forma para levantar estos valores es muy simple, desde el bootstrap, vamos a levantar los datos de este archivo y lo vamos a almacenar con Zend_Registry, de forma tal que podamos utilizarlo en cualquier estado del sistema.

$config = new Zend_Config_Ini('config/config.default.ini');
$registry = Zend_Registry::getInstance();
$registry->set( 'config_ini', $config );

Esto es mas que suficiente, para tener nuestro archivo de configuracion en un objeto, y al alcance de cualquier clase que lo requiera.

Ahora en nuestro preDispatch, vamos a traer los valores del config, para mostrarlos en la vista con el siguiente código.

get( 'config_ini' );

$this->view->staticServer = $config->site->static->server;
$this->view->appServer = $config->site->static->server;

La forma de traer datos de la configuracion, es anidar las propiedades, hasta el ultimo valor para que devuelva el valor correspondiente en el config. En nuestro archivo de configuracion tenemos [site] static.server, y para obtener este valor hacemos $config->site->static->server;

Limpiando el layout

En la primer parte teníamos un html pegado en colorpaper.phtml, que es nuestro layout. Para esta versión trate de separarlo por lo menos un poco, para que el archivo quede mas claro, y mas adelante podamos modificarlo de una forma mas cómoda.

Para hacer esto use $this->layout()->content, que como default, me muestra el phtml del action que estamos viendo. Por ejemplo, el action de nuestra home, deberia mostrar un listado de los ultimos post enviados.

Para el menu principal, use $this->layout->menuTop, y lo configure desde el preDispatch. Definiendo que modulo tenia que llamar para mostrar el contenido en esa seccion, lo mismo, para el sidebar, y el footer.

A todo esto cree un controller SidebarController, para que maneja estos 3 modulos (menuTop, sidebar, footer), mas adelante podemos seguir separando esto, de acuerdo al diseño que vayamos a utilizar.

Las lineas donde configuramos esto son las siguientes.

$response = $this->getResponse();
$response->insert( 'sidebar', $this->view->action( 'rightcontent', 'sidebar' ));
$response->insert( 'footer', $this->view->action( 'footer', 'sidebar' ));
$response->insert( 'topMenu', $this->view->action( 'menutop','sidebar' ));

Sino queremos llamar a un modulo y solo queremos mostrar contenido html estatico podemos hacer un render de un archivo, por ejemplo si el codigo html del footer estuviera en un phtml, sin necesidad de llamar a una accion, podriamos hacer lo siguiente

$response->insert( 'footer', $this->view->render('sidebar/footer.phtml' ));

Esto va a depender de las necesidades que tengamos.

Para bajarte esta version del programa podes descargartelo desde el tag

$ svn internal https://blogzf.googlecode.com/svn/tags/paso_2_layouts_y_configuracion

Componentes utilizados

Zend_Config
Zend_Registry

La url del proyecto es

http://code.google.com/p/blogzf/

Creando un blog desde cero.

Introduccion al proyecto.

La idea de este proyecto, es tratar de transmitir mis conocimientos sobre Zend Framework, y mostrar que es muy simple trabajar con el. Hace tiempo que llevo trabajando con este framework, y me facilita mucho el trabajo diario, y el trabajo en grupo. El blog posiblemente cuando se termine reemplaze a mi worpress, pero eso veremos mas  adelante como evoluciona el proyecto.

Cuando ustedes lean esto el blog va a estar bastante encaminado. Cada parte importante del desarrollo del blog voy a postearlo para que hagan comentarios, y el aprendizaje sea de apoco y no todo de golpe.

Subi el proyecto a google code, por cada corte importante del proyecto cree un tag, ese tag corresponde a un post especifco donde se explican los cambios y porque aplicamos tal o cual cosa.

Una vez el proyecto este terminado cualquiera tiene derecho a implementar este  blog que vamos a desarrollar aca es open source, y totalmente libre.

Manos a la obra

La gente que este leyendo este post, y no sepa nada de Zend Framework quizas les cueste un poco mas entenderlo porque hay conceptos que ya se hablaron en este blog, y no quiero repetirlos, si hay algo que no entienden pueden preguntarlo o googlearlo.

Lo primero que vamos a hacer es armar la estructura, que va a ser practicamente la misma que en el articulo que arme hace varias semanas, pero con algunos cambios, la carpeta apps, se va a llamar application, y la carpeta html sera webroot. Ademas vamos a mover la carpeta layout dentro de webroot.

Creando el virtual host.

# Blog para el proyecto

    ServerAdmin soporte@blogzf.com
    DocumentRoot /var/www/html/blogzf/webroot
    ServerName blogzf.dev
    
        Options FollowSymLinks
        AllowOverride All
    
    # Opciones de PHP
    php_value include_path .:/var/www/html/blogzf/webroot
    ErrorLog logs/blogzf-error.log
    CustomLog logs/blogzf-access.log common

Lo primero que vamos a crear es el bootstrap, que va a ser muy simple por ahora, y generar un layout basico que vamos a pedir prestado por ahi. La configuracion inicial va a quedar bastante basica. Vamos a crear un controller IndexController, un bootstrap index.php en la carpeta webroot, un .htaccess en la carpeta webroot tambien, y una carpeta con el nombre del layout, tambien vamos a agregar como external la libreria de Zend al proyecto. Si queres saber mas sobre como hacer esto, ya hay un post en el blog.

Para ir viendo como quedo esta parte del blog pueden bajarse los archivos del tag de esta version del proyecto haciendo.

$ svn import http://blogzf.googlecode.com/svn/tags/paso_1_layouts_y_configuracion/

Si crearon bien el virtual host, con solo escribir en el navegador http://blogzf.dev:8001/, tienen que ver algo parecido a esto.

Analizando el codigo.

Como primer punto voy a describir el bootstrap, basicamente este archivo tiene que tener una configuracion basica, para que pueda llamar al controller que correspondiente, y asi ejecutar la accion que requerimos.

Nuestro bootstrap es el siguiente.

 'colorpaper/colorpaper',
                'layoutPath' => 'layout/'
);
Zend_Layout::startMvc( $options );
/**
 * Setup controller
 */
$controller = Zend_Controller_Front::getInstance();
$controller->setParam( 'config', 'config.default.ini' )
    ->setControllerDirectory('../application/controller')
    ->throwExceptions(true)
    ->dispatch();

Hacemos unas configuraciones basicas, y despues que le decimos lo path del sistema, esto lo hacemos para que la comunicacion entre carpetas, sea mas sencilla. Algo importante que va a tener nuestro sistema de Blog, es que vamos a usar Zen_Loader::registerAutoload();, lo que hace este componente, es tratar de incluir el archivo que estes llamando, de esta forma si escribis bien el nombre de una clase, haciendo referencia al path, no necesitas hacer un required, o include. Si bien esto no es muy recomendable, porque cae un poco el rendimiento, tambien es cierto que es muy comodo , igual despues mas adelante, cuando optimizemos el sistema, vamos a arreglar un poco este problema.

Las siguientes lineas corresponden a la configuracion del layout, que en este caso agregamos un layout, que se llama colorpaper, y queremos que ejecute colorpaper.phtml.

Las ultimas lineas ejecutan el controller,

Si vemos el codigo vamos a ver que no hay nada raro en especial tenemos un controller (IndexController), con un preDispatch, y un indexAction. El preDispatch ejecutamos todo lo que necesitamos que se cargue antes de empezar a ejecutar la accion.

view->staticServer = 'http://blogzf.dev:8001/';
        $this->view->appServer = 'http://blogzf.dev:8001/';

        /**
         * Agrego el titulo de la pagina
         */
        $this->view->headTitle()->append('Blog con Zend Framework');
        /**
         * Agrego los css para esta pagina
         */
        $this->view->headLink()
            ->appendStylesheet( $this->view->staticServer . 'layout/colorpaper/css/jd.gallery.css' )
            ->appendStylesheet( $this->view->staticServer . 'layout/colorpaper/css/pink.css' )
            ->appendStylesheet( $this->view->staticServer . 'layout/colorpaper/css/style.css' );

En las primeras lineas del preDispatch, configuramos dos propiedades, que van a afectar a las vistas y al layout, uso dos tipos de variables para guardar el dominio, porque puede surgir que yo tenga por un lado un servidor para las imagenes, css, html y en otro servidor la aplicacion en si. Por ahora va a ser la misma, pero esto va a depender de ustedes.

Al hacer $this->view->staticServer, le estamos diciendo que cree una propiedad staticServer, esta es la forma en que ZF comunica desde un controller a una vista.

Despues tenemos la linea

$this->view->headTitle()->append('Blog con Zend Framework');

Aca estamos seteando el titulo del blog.

Y en la siguientes lineas, agregamos los css, que vamos a trabajar.

Cuando nosotros apendeamos, un titulo, los meta, los css, y los js, podemos mostrarlos desde la vista muy facilmente, usando los metodos que van a encontrar en el layout, que veremos mas adelante.

Por ahora nuestro indexAction no hace nada, lo mismo que la vista del mismo.

Como primera meta de este proyecto me propuse tomar un diseño modernoso, y adaptarlo al sistema de layout de Zend. Quise darle un aspecto atractivo, para que llame la atencion, y vean un poco el potencial del proyecto, que a veces el problema con excelentes proyectos de este tipo el problema es que no son atractivos y no llaman la atencion, este proyecto busca llamar la atencion, por eso este diseño. Lo unico que queria para esta parte es que me mostrara los datos de forma estatica pero minimante configurado el layout, y digo minimamete porque este layout va ir mutando a medida que avanze el proyecto.

Com hablamos antes en el preDispatch, apendeamos el title, y los css del layout, para mostrarlos desde nuestro layout, hicimos lo siguiente.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head profile=”http://gmpg.org/xfn/11″>
<?= $this->headMeta() ?>
<?= $this->headTitle() ?>
<?= $this->headScript() ?>
<?= $this->headLink() ?>
</head>
<body>

Bueno por hoy es suficiente, para la proxima vamos a seguir separando el layout, para que nos quede mejor dividido, y vamos a usar archivos de configuracion, para guardar los datos de nuestros sistemas.

En esta parte del proyecto vimos los siguientes componentes.
* Zend_Controller
* Zend_Loader
* Zend_Layout