Zend Framework/Configuracion básica

Configuración Básica

editar

Esta es la configuración básica inicial para hacer el "HOLA MUNDO".

Aquí encontraremos todo lo necesario para realizar el primer ejemplo en ZF.

A todos los invito a suscribirse al grupo Zend Framework Hispano ahí colocaremos los archivos de ejemplos para que puedan ser descargados. Podes bajar el ejemplo aquí zfw_configuracion_basica.zip

Secuencia de sucesos

editar

Los pasos que se efectúan al invocar una página por (ej. http://localhost/zft/html/index/fecha) son los siguientes:

* se invoca al frontcontroller ( único punto de entrada del sistema ) para que determine que controlador y acción dentro del mismo serán ejecutadas.
* se invoca al controlador indicado luego de html/ (en este caso, index, o sea que se invoca IndexController)
* se invoca al método indicado dentro del controlador (en este caso, fechaAction dentro del controlador IndexController) Aquí se cargan datos para la vista.
* se invoca a la vista correspondiente (en este caso /application/views/scripts/index/fecha.phtml) que despliega los datos obtenidos en el método (fechaAction) dentro del content de la página.

Estructura de archivos

editar

La estructura de los archivos será al siguiente. En la figura podemos ver dos carpetas principales

* application
* html

En application residen los módulos que desarrollaremos, aquí se encuentran la estructura que soporta el MVC [1]. Dentro de esta carpeta residen los controladores, las vistas y los modelos. Cada uno de ellos serán descritos más adelante. En html residen los archivos que son propios de una salida html como ser css, javascript, imágenes y demás recursos.

Archivo:Zft configuracion basica.png

/.htaccess

editar

Este archivo me permite realizar una redirección utilizando apache, aquí me indica que cada vez que ingrese a la url http://localhost/zft ( que es donde reside este ejemplo ) nos redireccionará hacia http://localhost/zft/html que es la url base de la aplicación.

RewriteEngine on
RewriteRule !\.(js|ico|gif|jpg|png|css)$ html

/application/controllers/IndexController.php

editar

El controlador es parte del MVC. Este se encarga de llamar a la lógica de negocio para solicitarle que realice determinadas acciones ( como ser cálculo de impuestos ) y envía los resultados de dichas llamadas hacia la vista, la cual se encarga de darle el formato necesario, como ser mostrar tablas, listados, etc.

Aquí vemos un par de punto interesantes.

El nombre del controlador IndexController, sigue las convenciones en donde se indica que el nombre del controlador tiene que ser camelcase, además extiende la clase Zend_Controller_Action que es la unidad fundamental de los controladores.

Existe un método llamado init() que nos permite personalizar para todas las acciones que el controlador maneja, es una configuración inicial del controlador. En este caso estamos indicando al layout cuales son las vistas a utilizar para las secciones header,footer,sider-bar-left,sider-bar-right.

Por último vemos el método indexAction() esta es la acción por defecto, cuando en la url no se indica acción a realizar por el controlador, esta se ejecuta. Aquí no se realizó ninguna llamada hacia lógica de negocio, ni tampoco se anexó información para que la vista lo despliegue.

El siguiente paso en el proceso es ir a la vista que desplegará la salida de la acción predeterminada #/application/views/scripts/index/index.phtml

<?php
/**
 * Zend Framework Tutorial
 * 
 * Este tutorial tiene un enfoque pragmático, lo cual indica una amplia cantidad
 * de ejemplos. Este material forma parte del Wikibook en español para ZF.
 * 
 * @author Mario Garcia
 * @copyright  Copyright (c) 2006-2008 Oh!Studio Media Solutions (http://www.ohstudio.com.ar)
 * @license    http://www.php.net/license/3_0.txt
 */


class IndexController extends Zend_Controller_Action
{
	

	function init()
    {
    	

        $response = $this->getResponse();
        $response->insert('sidebarLeft', $this->view->render('sidebarLeft.phtml'));
        $response->insert('sidebarRight', $this->view->render('sidebarRight.phtml'));
        $response->insert('header', $this->view->render('header.phtml'));
        $response->insert('footer', $this->view->render('footer.phtml')); 
    }
    
    

    public function indexAction()
    {
    }
    
    public function fechaAction()
    {
        $this->view->fecha = date('l dS \of F Y h:i:s A');
    }
}

/application/views/layouts/layout.phtml

editar

Este es el archivo de layout de la aplicación, es un composite que nos permite definir de una manera sencilla cómo será estructurada nuestra aplicación a nivel de despliegue.

<!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">
<head>
	<title>ZFTutorial :: Enfoque pragmatico</title>
    <link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl();?>/css/grid.css" />
</head>
<body>
	<div id="bcss-header">
    <!-- bcss-header -->
	<?php echo $this->layout()->header ?>
    <!-- /bcss-header -->
	</div>
	
	<div id="bcss-sidebar-1">
    <!-- bcss-sidebar-1 -->
	<?php echo $this->layout()->sidebarLeft ?>
    <!-- /bcss-sidebar-1 -->
 	</div>
 	
	<div id="bcss-content">
    <!-- bcss-content -->
	<?php echo $this->layout()->content ?>
    <!-- /bcss-content -->	
	</div>
	
	<div id="bcss-sidebar-2">
    <!-- bcss-sidebar-2 -->
	<?php echo $this->layout()->sidebarRight ?>
    <!-- /bcss-sidebar-2 -->	
 	</div>
 	
	<div id="bcss-footer">
    <!-- bcss-footer -->
	<?php echo $this->layout()->footer ?>
    <!-- /bcss-footer -->	
	</div>
</body>
</html>

/application/views/helpers/BaseUrl.php

editar

Este helper nos permite determinar cual se la url base de la aplicación, es muy útil al momento de migrar nuestro sistema desde desarrollo a producción. Por ejemplo en nuestro ambiente de desarrollo tendremos la siguiente url http://localhost/zft/html pero al subirlo necesitamos que quede al estilo http://www.ejemplo.com. Aquí todas las referencias hacia archivos css, js, imágenes tendrían que ser modificadas, pero gracias a este helper se nos facilita todo este trabajo para ver como utilizamos el helper podemos ver en #/application/views/layouts/layout.phtml donde se indica $this->baseUrl().

<?php
/**
 * Zend Framework Tutorial
 * 
 * Este tutorial tiene un enfoque pragmatico, lo cual indica una amplia cantidad
 * de ejemplos. Este material forma parte del Wikibook en español para ZF.
 * 
 * @author Mario Garcia
 * @copyright  Copyright (c) 2006-2008 Oh!Studio Media Solutions (http://www.ohstudio.com.ar)
 * @license    http://www.php.net/license/3_0.txt
 */


class Zend_View_Helper_BaseUrl
{
	
    function baseUrl()
    {
        $fc = Zend_Controller_Front::getInstance();
        $request = $fc->getRequest();
        return $request->getBaseUrl();
    }
}

/application/views/scripts/sidebarLeft.phtml

editar

Sección lateral izquierda, es parte del layout donde podremos poner por ejemplo menúes, banners, etc.

<ul>
<li><a href="<?php echo $this->baseUrl();?>/index/index">home</a></li>
<li><a href="<?php echo $this->baseUrl();?>/index/fecha">fecha</a></li>
<li><a href="http://www.google.com">google</a></li>
</ul>

Podemos ver que existen dos link internos y uno externo.

Donde /index/fecha nos llevará al controlador IndexController y a la acción fechaAction()

/application/views/scripts/header.phtml

editar

Sección encabezado, es parte del layout donde podremos poner por ejemplo logos, menúes, banners, etc.

<h1>Header</h1>

/application/views/scripts/footer.phtml

editar

Sección pie, es parte del layout donde podremos poner por ejemplo copyright, menúes, etc.

<h1>Footer</h1>

/application/views/scripts/sidebarRight.phtml

editar

Sección lateral derecha es parte del layout donde podremos poner por ejemplo menúes, banners, etc.

<h1>Sidebar Right</h1>

/application/views/scripts/index/index.phtml

editar

Este es la parte de la vista encargada de desplegar en nuestro caso la salida a de la url http://localhost/zft/html/index/index, es decir ante la invocación de la acción index del controlador index se mostrara por defecto esta salida.

<h1>Hello World !!!</h1>


/application/views/scripts/index/fecha.phtml

editar

Este es la parte de la vista encargada de desplegar en nuestro caso la salida a de la url http://localhost/zft/html/index/fecha que nos muestra la fecha actual.

La fecha fue cargada en el IndexController, dentro de la acción de la página, es decir, dentro de fechaAction, y ya esta lista para usarse dentro de la variable $this->fecha.

<h1><?php echo $this->fecha ?></h1>

/html/index.php

editar

Breve descripción del archivo

<?php
/**
 * Zend Framework Tutorial
 * 
 * Este tutorial tiene un enfoque pragmatico, lo cual indica una amplia cantidad
 * de ejemplos. Este material forma parte del Wikibook en español para ZF.
 * 
 * @author Mario Garcia
 * @copyright  Copyright (c) 2006-2008 Oh!Studio Media Solutions (http://www.ohstudio.com.ar)
 * @license    http://www.php.net/license/3_0.txt
 */

/*poner comentario*/


define('ROOT_DIR', dirname(dirname(__FILE__)));

// Setup path to the Zend Framework files
set_include_path('.'
	. PATH_SEPARATOR . ROOT_DIR.'/lib/'
	. PATH_SEPARATOR . get_include_path()
);

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();

// Inicializar el MVC
Zend_Layout::startMvc(array('layoutPath' => ROOT_DIR.'/application/views/layouts'));

// Run!
$frontController = Zend_Controller_Front::getInstance();
$frontController->addControllerDirectory(ROOT_DIR.'/application/controllers');
$frontController->throwExceptions(true);
try {
    $frontController->dispatch();
} catch(Exception $e) {
    echo nl2br($e->__toString());
}


/html/.htaccess

editar

Nos permite redireccionar todo llamada por url que no sean archivos imágenes o css o js hacia el index. Este archivo es fundamental para el ruteo.

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

/html/css/grid.css

editar

Este archivo es el css que nos define el look&feel de layout.

/* Site Grid by BoxedCSS.com */

#bcss-header {

	width:100%;

	background:#FFFFE5; /* you can delete this, it's just a visual aid */

	clear:both;

	}

#bcss-sidebar-1 {

	width:27%;

	float:left;

	background:#FFE5FF; /* you can delete this, it's just a visual aid */

	}

#bcss-sidebar-2 {

	width:13%;

	float:left;

	background:#F7FBEA; /* you can delete this, it's just a visual aid */

	}

#bcss-content {

	width:60%;

	min-height: 400px;

	float:left;

	background:#E5F2FF; /* you can delete this, it's just a visual aid */

	}

#bcss-footer {

	width:100%;

	clear:both;

	background:#FFF2E5; /* you can delete this, it's just a visual aid */

	}