Creando un blog con Zend Framework – Parte 1

Published: November 23, 2008Posted in: Zend Framework, variosTags: , , , ,
Creando un blog con Zend Framework – Parte 1


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.

  1.  
  2. # Blog para el proyecto
  3. <VirtualHost *:8001>
  4.     ServerAdmin soporte@blogzf.com
  5.     DocumentRoot /var/www/html/blogzf/webroot
  6.     ServerName blogzf.dev
  7.     <Directory /var/www/html/blogzf/webroot>
  8.         Options FollowSymLinks
  9.         AllowOverride All
  10.     </Directory>
  11.     # Opciones de PHP
  12.     php_value include_path .:/var/www/html/blogzf/webroot
  13.     ErrorLog logs/blogzf-error.log
  14.     CustomLog logs/blogzf-access.log common
  15. </VirtualHost>
  16.  
  17.  

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.

  1.  
  2. <?php
  3. /**
  4.  * Configuración inicial
  5.  */
  6. error_reporting(E_ALL | E_STRICT);
  7. ini_set(‘display_startup_errors’, 1);
  8. ini_set(‘display_errors’, 1);
  9. date_default_timezone_set(‘America/Buenos_Aires’);
  10. /**
  11.  * Definición de directorios
  12.     OBS: ZendFramwork esta fuera de la aplicacion
  13.  */
  14. set_include_path(
  15.     ‘../’                    . PATH_SEPARATOR .
  16.     ‘../library’             . PATH_SEPARATOR .
  17.     ‘../application/model’   . PATH_SEPARATOR .
  18.     ‘../application/views’   . PATH_SEPARATOR .
  19.     ‘.’                      . PATH_SEPARATOR .
  20.     get_include_path());
  21. /**
  22.  * Carga de clases que sean necesarias
  23.  */
  24. include "Zend/Loader.php";
  25. Zend_Loader::registerAutoload();
  26. /**
  27.  * Configuramos el layout
  28.  * Agregamos el layout de colorpaper
  29.  */    
  30. $options = array( ‘layout’ => ‘colorpaper/colorpaper’,
  31.                 ‘layoutPath’ => ‘layout/’
  32. );
  33. Zend_Layout::startMvc( $options );
  34. /**
  35.  * Setup controller
  36.  */
  37. $controller = Zend_Controller_Front::getInstance();
  38. $controller->setParam( ‘config’, ‘config.default.ini’ )
  39.     ->setControllerDirectory(‘../application/controller’)
  40.     ->throwExceptions(true)
  41.     ->dispatch();
  42.  

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.

  1.  
  2. <?php
  3. class IndexController extends Zend_Controller_Action
  4. {
  5.     public function preDispatch()
  6.     {
  7.         /**
  8.          * Url basicas del sistema
  9.          */
  10.         $this->view->staticServer = ‘http://blogzf.dev:8001/’;
  11.         $this->view->appServer = ‘http://blogzf.dev:8001/’;
  12.                
  13.         /**
  14.          * Agrego el titulo de la pagina
  15.          */
  16.         $this->view->headTitle()->append(‘Blog con Zend Framework’);
  17.         /**
  18.          * Agrego los css para esta pagina
  19.          */
  20.         $this->view->headLink()
  21.             ->appendStylesheet( $this->view->staticServer . ‘layout/colorpaper/css/jd.gallery.css’ )
  22.             ->appendStylesheet( $this->view->staticServer . ‘layout/colorpaper/css/pink.css’ )
  23.             ->appendStylesheet( $this->view->staticServer . ‘layout/colorpaper/css/style.css’ );
  24.  

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

  1.  
  2. $this->view->headTitle()->append(‘Blog con Zend Framework’);
  3.  

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