Inicio > Desarrollo Web, Software Libre > MVC en Zend Framework

MVC en Zend Framework

MVC es un acrónimo para Model-View-Controller (Modelo-Vista-Controlador); esta es un patrón de arquitectura de software.

Básicamente este patrón divide una aplicación (en nuestro caso una aplicación web) en tres partes:

  • Modelo
    Es la parte que se entenderá con la base de datos, una manera elegante y clara de separar esto, es que para cada tabla generar una clase que será su Modelo, aunque en realidad podría ser que un Modelo controle varias tablas que tengan mucho en común, por ejemplo para las relaciones muchos-a-muchos.
  • Controlador
    Se encarga de procesar la entrada del usuario, en nuestro caso de recoger los datos de formularios, la URL, etc. Procesarlos (utilizando los otros componentes ya que esta parte debería ser la única que se comunica con los demás y las otras partes deben estar aisladas) y producir un resultado.
  • Vista
    Es la parte que maneja la parte que el usuario verá, el caso más común es tener una página en HTML, pero las posibilidades son que podemos tener incluso páginas en WAP (contenido móbil) o representaciones de texto. El controlador procesará todo lo necesario y enviará sus resultados a la vista (en el caso de Zend Framework mediante asignación de variables). La vista procesará todos los datos de una manera que sean claros para el usuario (aunque una vez más, esto podría ser incluso tener como salida por ejemplo XML para una API para comunicación entre librerías)

En este tutorial veremos de manera introductoria como funciona el patrón de MVC con Zend Framework. Antes de ver el código, mostraremos como funciona básicamente Zend Framework con MVC mediante el siguiente esquema:

Proceso de MVC en Zend Framework

En el esquema el primer paso es cuando accedemos a una dirección, por ejemplo http://www.danguer.com/ajax/resultado

La configuración de Zend Framework mediante Apache utilizando Mod_Rewrite hace que la mayoría de ligas (con algunas excepciones por ejemplo extensiones de hojas de estilo, javascript, etc) las procese el archivo index.php que contiene el código básico para inicializar el MVC que veremos más adelante.

Este archivo index.php tiene un código básico para inicializar toda la aplicación web, lo cual es ya de entrada interesante. Para la estructura de directorios será de la siguiente manera:

Estructura de Directorios de Zend Framework MVC

Tendremos la carpeta principal app/ que será donde irá todo el código de PHP, dentro de esta carpeta tenemos varias carpetas pero las principales son:

  • controllers, donde estará el código de los controladores
  • models, donde estará el código de los modelos (no lo utilizaremos)
  • layout, las plantillas para el sitio (parte de las vistas)
  • views, las vistas junto con “ayudantes” (helpers)

La carpeta adicional langs, es una carpeta opcional y personal que he dejado del ejemplo de tutorial con Zend_Form, solo para ilustrar que se pueden crear carpetas adicionales sin problemas.

Como nota personal a mi me gusta dejar código que es necesario dentro de la carpeta /app, en el ejemplo se puede ver el archivo: Danguer_Controller_Action.php que después veremos a detalle. Esto es totalmente preferencia personal de como estructurar el archivo.

Después de la carpeta /app, hay una carpeta styles/ que contiene archivos CSS, en realidad la carpeta no será visible para el usuario ya que http://sitio/styles intentará interpretarlo como código PHP mediante controladores como veremos más adelante.

Hay sugerencias de seguridad de como estructurar estas carpetas, pero en lo personal para mis desarrollos utilizo la estructura mostrada para no separar por completo el código y tenerlo todo en un solo lugar.

El archivo realmente importante es index.php y por supuesto .htaccess, el primero tiene el código de manejo para el MVC de Zend Framework y el segundo es un archivo para que Apache redireccione todas las peticiones al archivo index.php

Contenido del archivo index.php y .htaccess

El archivo .htaccess es muy simple, debido a que solamente habilita Mod_Rewrite y redirecciona todas las peticiones al archivo index.php:

  1. RewriteEngine on
  2. RewriteRule !\.(js|ico|gif|jpg|png|css|swf)$ index.php
RewriteEngine on

RewriteRule !\.(js|ico|gif|jpg|png|css|swf)$ index.php

La primera linea habilita Mod_Rewrite, la otra linea indica que salvo las ligas que contengan las extensiones js, ico, gif, jpg, png, css y swf deben procesarse con el archivo index.php, aqui se puede hacer que por ejemplo se habiliten algunos directorios para no ser procesador por el archivo index.php (por ejemplo un directorio de imagenes), pero esto debe ser tratado con cada caso en particular.

El archivo index.php contiene más lineas, pero son muy sencillas:

  1. require_once ‘Zend/Controller/Front.php’;
  2. require_once ‘Zend/Layout.php’;
  3. require_once ‘./app/Danguer_Controller_Action.php’;
  4. // Configurar controlador
  5. $controller = Zend_Controller_Front::getInstance();
  6. $controller->setControllerDirectory(‘./app/controllers’);
  7. $controller->throwExceptions(true);
  8. // asignar MVC
  9. Zend_Layout::startMvc(array(
  10. ‘layoutPath’ => ‘./app/layouts’,
  11. ‘layout’ => ‘principal’
  12. ));
  13. // ejecutar!
  14. $controller->dispatch();
require_once 'Zend/Controller/Front.php';
require_once 'Zend/Layout.php';

require_once './app/Danguer_Controller_Action.php';

// Configurar controlador
$controller = Zend_Controller_Front::getInstance();
$controller->setControllerDirectory('./app/controllers');
$controller->throwExceptions(true); 

// asignar MVC
Zend_Layout::startMvc(array(
    'layoutPath' => './app/layouts',
    'layout' => 'principal'
	));

// ejecutar!
$controller->dispatch();

Las primeras lineas llaman las librerías necesarias que son el “despachador” de los controladores (Zend/Controller/Front.php) y la plantilla (Zend/Layout.php) la otra línea requiriendo un archivo en php (./app/Danguer_Controller_Action.php) será discutido más adelante, pero en esta parte podemos incluir todas los archivos/librerías que necesitemos, tanto de Zend como propios.

La siguiente línea de código genera el despachador, básicamente genera una instancia de este despachador (es única para toda la aplicación, por eso utilizamos de manera estática sin construirlo), asignamos el directorio de los controladores (./app/controllers) y por último permitimos que muestre excepciones por ser código en desarrollo (en producción se sugiere no utilizarlo para no dejar ver código importante a los usuarios).

La siguiente parte tiene como misión inicializar el sistema MVC de la parte de la plantilla. Anteriormente Zend Framework no manejaba plantillas en sus vistas, algo odioso porque se necesitaba crear un código propio (aunque había buenos ejemplos en la red). Actualmente con esa línea podemos definir la plantilla que utilizarán las vistas. Más adelante veremos como está hecha la plantilla.
Con ese código hemos definido que el sistema debe buscar en el directorio ./app/layouts las plantillas, y que la plantilla por defecto es ‘principal’ que el archivo debe llamarse: ./app/layouts/principal.phtml

Con esto el sistema llamará a los controladores de la manera que veremos en la siguiente sección.

Proceso del MVC

Zend Framework una vez que tenga la liga (en este caso /ajax/resultado) procederá a “enrutarla”, es decir a convertir la liga en el controlador y acción deseada. Si no modificamos nada, por defecto el enrutamiento funciona de la siguiente manera:

http://sitio/controlador/accion

Así en nuestro ejemplo, el controlador es “ajax” y la acción es “resultado“. Por supuesto se pueden definir rutas alternativas, por ejemplo se puede decir que http://sitio/blog/2008 sea el controlador “blog“, la acción “archivos” y pasarle a la acción un parámetro de nombre “annio” con el valor 2008. Esto podría ser un alias de: http://sitio/blog/archivos?annio=2008 que funciona bajo la configuración estándar

El ruteador puede ser tan personalizado que podemos pasar nuestro propio ruteador siempre y cuando se extienda de la interfaz: Zend_Controller_Router_Interface, o en su defecto que extienda la clase Zend_Controller_Router_Abstract, pero esto son temas avanzados que podemos discutir en otro tutorial =).

Una vez que el sistema sabe que controlador y acción es, procederá a llamar al controlador y a la acción. El controlador debe ser especificado de la siguiente forma:

  1. <?php
  2. require_once ‘Zend/Controller/Action.php’;
  3. class ControladorController extends Zend_Controller_Action {
  4. public function accionAction() {
  5. //codigo del controlador
  6. }
  7. }
<?php
require_once 'Zend/Controller/Action.php';

class ControladorController extends Zend_Controller_Action {
    public function accionAction() {
         //codigo del controlador
    }
}

En donde el nombre de la clase debe ser el nombre del controlador iniciando con mayúscula y seguido por ‘Controller‘ (sin espacios) y cada nombre de función debe ser el nombre de la acción seguido por ‘Action‘ (sin espacios). El nombre del archivo debe ser igual que el nombre de la clase y se almacena dentro de la carpeta /app/controllers.

En el caso anterior para la liga /ajax/resultado nuestro archivo sería el siguiente:

  1. <?php
  2. require_once ‘Zend/Controller/Action.php’;
  3. class AjaxController extends Zend_Controller_Action {
  4. public function resultadoAction() {
  5. //codigo del controlador
  6. }
  7. }
<?php
require_once 'Zend/Controller/Action.php';

class AjaxController extends Zend_Controller_Action {
    public function resultadoAction() {
         //codigo del controlador
    }
}

Cuando entremos a la liga mencionada, el sistema procesará todo el código en la función de la acción. Como vemos nuestra clase extiende de Zend_Controller_Action, esta clase contendrá básicamente:

  • una petición (que contiene información de variables de entrada o del sistema)
  • una respuesta (que puede ser para redireccionar la página a otra por ejemplo)
  • la vista

Por defecto el sistema crea una vista, crea las variables de la petición y la respuesta, llama a la función de la acción; y por último llama a un “ayudante” para que la vista sea generada y la salida se envia al navegador. Es por esto que dentro del controlador no llamaremos a la función render ya que la clase principal lo hace automáticamente.

Para obtener información de entrada, como un parámetro que se especificó mediante /controlador/accion?variable=valor utilizamos la variable de la petición de la siguiente manera:

  1. $peticion = $this->getRequest();
  2. $valor = $peticion->getParam(‘variable’);
$peticion = $this->getRequest();
$valor = $peticion->getParam('variable');

También existe una función $peticion->getParams(); que regresa un arreglo asociativo con todas las variables y sus valores.

Para pasar una variable a la vista existe una variable $this->view dentro del controlador a la que podemos pasar valores de la siguiente forma:

  1. $variable = ‘Hola mundo’;
  2. $this->view->assign(‘variable’, $variable);
  3. //la vista ahora tendrá una variable que puede ser accesada como $this->variable
$variable = 'Hola mundo';
$this->view->assign('variable', $variable);
//la vista ahora tendrá una variable que puede ser accesada como $this->variable

Más adelante veremos algunas opciones útiles para inicializar valores en la vista o cambiar el ciclo de renderizado de la vista.

Vistas

Las vistas deben ser guardadas en el directorio apps/views/scripts/controlador/ con el nombre de archivo: accion.phtml, así por ejemplo para nuestro ejemplo de /ajax/resultado debemos crear el siguiente archivo: apps/views/scripts/ajax/resultado.phtml

La vista contendrá archivo principalmente HTML, pero podemos procesar código PHP de forma normal entre <?php y ?>, Zend también permite que las vistas utilicen cualquier otro sistema de plantillas que esté escrito en PHP, por ejemplo Smarty.

Dentro llamamos a las variables que hemos asignado de la siguiente manera:

  1. <?=$this->variable?>
<?=$this->variable?>

Dentro de las vistas podemos alterar un poco la plantilla, para iniciar podemos cambiar el título de la siguiente manera:

  1. <?php
  2. $this->headTitle(‘Ventana emergente’);
  3. ?>
<?php
$this->headTitle('Ventana emergente');
?>

Eso hará que el título de la página sea “Ventana Emergente”, pero también podemos agregar un archivo de hoja de estilo de la siguiente manera:

  1. <?php
  2. $this->headLink()->appendStylesheet($this->baseUrl.’/styles/archivo.css’, ‘screen’);
  3. ?>
<?php
$this->headLink()->appendStylesheet($this->baseUrl.'/styles/archivo.css', 'screen');
?>

O incluir un archivo de javascript:

  1. <?php
  2. $this->headScript()->appendFile($this->baseUrl.’/scripts/archivo.js’);
  3. ?>
<?php
$this->headScript()->appendFile($this->baseUrl.'/scripts/archivo.js');
?>

El sistema de plantillas tiene algunas opciones extra que por brevedad no revisaremos, pero incluyen la posibilidad de incluir código en javascript/css que manejará de manera adecuada mediante una cadena.

La variable de $this->baseUrl, no es estándar de las vistas y es algo que yo he agregado y que veremos más adelante como se logra.

Plantillas

Las plantillas son muy simples, tienen el siguiente modelo:

  1. <?php
  2. /* con esto establecemos un documento XHTML */
  3. echo ‘<?xml version=”1.0″ encoding=”UTF-8″ ?>’;
  4. /* esto generará las cabeceras de XHTML,
  5. también podemos definir otras como HTML 4 */
  6. echo $this->doctype()
  7. ?>
  8. <html>
  9. <head>
  10. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  11. <!– es bueno definir algunas etiquetas “globales” aunque pueden hacerse sobreescribiendo el Danguer_Action_Controller  –>
  12. <link type=”text/css” href=”<?=$this->baseUrl?>/styles/main.css” rel=”stylesheet” />
  13. <?php
  14. /* Con esto nos aseguramos que el título siempre tenga un nombre al inicio */
  15. $this->headTitle(‘Ejemplo de MVC, danguer.com | ‘,Zend_View_Helper_Placeholder_Container_Abstract::PREPEND);
  16. echo $this->headTitle();
  17. echo $this->headScript();
  18. echo $this->headStyle();
  19. ?>
  20. </head>
  21. <body>
  22. <!–  solo contenido, esto puede ser usado para un popup –>
  23. <?php echo $this->layout()->content ?>
  24. </body>
  25. </html>
<?php
/* con esto establecemos un documento XHTML */
echo '<?xml version="1.0" encoding="UTF-8" ?>';
/* esto generará las cabeceras de XHTML,
   también podemos definir otras como HTML 4 */
echo $this->doctype()
?>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- es bueno definir algunas etiquetas "globales" aunque pueden hacerse sobreescribiendo el Danguer_Action_Controller  -->
		<link type="text/css" href="<?=$this->baseUrl?>/styles/main.css" rel="stylesheet" />		

		<?php
			/* Con esto nos aseguramos que el título siempre tenga un nombre al inicio */
			$this->headTitle('Ejemplo de MVC, danguer.com | ',Zend_View_Helper_Placeholder_Container_Abstract::PREPEND);

			echo $this->headTitle();
		    echo $this->headScript();
		    echo $this->headStyle();
	    ?>
	</head>

	<body>
		<!--  solo contenido, esto puede ser usado para un popup -->
		<?php echo $this->layout()->content ?>
	</body>

</html>

Como vemos definimos básicamente la plantilla del documento y definimos una parte que será donde irá el contenido con: <?php echo $this->layout()->content ?>, esta parte es reemplazada por la vista en cuestión.
La otra parte dinámica es:

  1. <?php
  2. /* Con esto nos aseguramos que el título siempre tenga un nombre al inicio */
  3. $this->headTitle(‘Ejemplo de MVC, danguer.com | ‘,Zend_View_Helper_Placeholder_Container_Abstract::PREPEND);
  4. echo $this->headTitle();
  5. echo $this->headScript();
  6. echo $this->headStyle();
  7. ?>
<?php
			/* Con esto nos aseguramos que el título siempre tenga un nombre al inicio */
			$this->headTitle('Ejemplo de MVC, danguer.com | ',Zend_View_Helper_Placeholder_Container_Abstract::PREPEND);

			echo $this->headTitle();
		    echo $this->headScript();
		    echo $this->headStyle();
	    ?>

Que se reemplazará como vimos anteriormente por el título de la página, los archivos de scripts y las hojas de estilo.

Una plantilla también puede tener zonas de contenido, donde desde la vista podemos llenarlas, por ejemplo podemos tener una zona que indique un mensaje y no tendremos que alterar la plantilla segmentándola en diferentes archivos como se suele hacer. Eso se verá en otro tutorial =)

Controlador Base

En lo particular me gusta crear un controlador base que contiene código de utilidad para mis aplicaciones, casi siempre utilizo uno. En el código de ejemplo tiene nombre: app/Danguer_Controller_Action.php

Lo que hace este controlador base es lo siguiente:

  • Asigna variables a la vista (por ejemplo baseUrl que es el directorio base de ligas relativas, muy útil para subdirectorios)
  • Permite deshabilitar el renderizado automático (ya que al finalizar la función intentará buscar el archivo de vista que puede no existir por ejemplo para resultados de AJAX)
  • Tiene funciones de utilidad, en el ejemplo tiene una función para enviar datos en formato JSON con el simple llamado de una función, pero puede incluir código que se compartan entre todos (o la mayoría) de controladores

El código del controlador base es el siguiente:

  1. <?php
  2. require_once ‘Zend/Controller/Action.php’;
  3. class Danguer_Controller_Action extends Zend_Controller_Action {
  4. protected $autoRender = true;
  5. public function initView()
  6. {
  7. parent::initView();
  8. $this->view->assign(‘baseUrl’, $this->getRequest()->getBaseUrl());
  9. $this->view->assign(‘fullUrl’, $this->getFullURL());
  10. return $this->view;
  11. }
  12. public function init() {
  13. $this->initView();
  14. }
  15. public function disableAutoRender() {
  16. $this->autoRender = false;
  17. $args = $this->getInvokeArgs();
  18. $args[‘noViewRenderer’] = true;
  19. $this->_setInvokeArgs($args);
  20. $this->_helper->resetHelpers();
  21. }
  22. protected function getFullURL() {
  23. $protocol = ‘http://&#8217;;
  24. $host = $_SERVER[‘HTTP_HOST’];
  25. $port = $_SERVER[‘SERVER_PORT’];
  26. if ($port != ’80’)
  27. $port = “:{$port}”;
  28. else
  29. $port = ”;
  30. return “{$protocol}{$host}{$port}”.$this->getRequest()->getBaseUrl();
  31. }
  32. protected function writeJSON($data) {
  33. require_once ‘Zend/Json.php’;
  34. $this->disableAutoRender();
  35. header(‘Content-Type: text/javascript’);
  36. print Zend_Json::encode($data);
  37. }
  38. }
<?php
require_once 'Zend/Controller/Action.php';

class Danguer_Controller_Action extends Zend_Controller_Action {
	protected $autoRender = true;

    public function initView()
    {
    	parent::initView();

	    $this->view->assign('baseUrl', $this->getRequest()->getBaseUrl());
		$this->view->assign('fullUrl', $this->getFullURL());
    	return $this->view;
    }

    public function init() {
    	$this->initView();
    }

    public function disableAutoRender() {
    	$this->autoRender = false;
    	$args = $this->getInvokeArgs();   	

    	$args['noViewRenderer'] = true;
    	$this->_setInvokeArgs($args);

    	$this->_helper->resetHelpers();
    }

    protected function getFullURL() {
    	$protocol = 'http://';
    	$host = $_SERVER['HTTP_HOST'];
    	$port = $_SERVER['SERVER_PORT'];

    	if ($port != '80')
    		$port = ":{$port}";
    	else
   			$port = '';

    	return "{$protocol}{$host}{$port}".$this->getRequest()->getBaseUrl();
    }

	protected function writeJSON($data) {
		require_once 'Zend/Json.php';

		$this->disableAutoRender();
		header('Content-Type: text/javascript');

		print Zend_Json::encode($data);
	}
}

La función init (similar al constructor de clases) forza a iniciar la vista, en esa función (initView) se llama al padre para que genere el objeto de vista y le asignemos variables predefinidas. Aqui podemos incluir todas las variables que necesitemos.

Las otras dos funciones extras son:

  • disableAutoRender
    Permite deshabilitar el auto-renderizado para que la aplicación no busque el archivo de la acción.
  • writeJSON
    Codifica una variable en formato JSON (apropiado para AJAX), también automáticamente deshabilita el auto-renderizado

Estas funciones son ejemplo de lo que se puede lograr personalizando el sistema MVC.

Por último si se necesita modificar la plantilla, es muy sencillo; en el código del controlador simplemente necesitamos hacer los siguientes pasos:

  1. $mvc = Zend_Layout::getMvcInstance();
  2. $mvc->setLayout(‘simple’); //utilizar la plantilla app/layouts/simple.phtml
$mvc = Zend_Layout::getMvcInstance();
$mvc->setLayout('simple'); //utilizar la plantilla app/layouts/simple.phtml

Esto es la base para entender el modelo MVC de Zend Framework, más adelante explicaré más a detalle cosas como los ayudantes, modelos y Ruteadores.

Categorías:Desarrollo Web, Software Libre Etiquetas: ,
  1. cristhian
    abril 17, 2010 a las 1:49 am

    hola…no queda mas q felicitarte por la entrada esta muy compresible, tengo algunas dudas que quisiera que me repondas:

    que version de ZF usas?
    la clase Danguer_Controller_Action solo la escribes xq para ti es mejor?

    gracias por tu aporte estoy aprendiendo ZF y ps existen variantes del bootstrap en funcion de cada version, estoy basandome en ZF ver 1.10

    SAludos

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: