4.12. Vistas

Las vistas pertenecen a la capa de presentación de la aplicación web porque su objetivo es producir una salida HTML que regresa el servidor web al visitante del sitio.

En Zend Framework 3 una vista se implementa como un archivo de plantilla que es una archivo que tiene la extensión .phtml ("phtml" representa PHP+HTML). Las plantillas de vista tienen ese nombre porque ellas usualmente contienen código HTML mezclado con retazos (snippets) de código PHP que imprimen la página web.

Generalmente las vistas están dentro de la subcarpeta view del módulo (ver figura 4.5):

Figura 4.5. Carpeta View

¿Por qué los archivos de plantilla de vistas no se almacenan dentro de la carpeta fuente del módulo?

Las plantillas de vista (archivos .phtml) no se almacenan dentro de la carpeta src/ del módulo porque ellas no son clases de PHP normales y no es necesario que la funcionalidad de autoloading de clases de PHP las busque. Las plantillas de vista son buscadas por la clase especial de ZF3 llamada view resolver y por esta razón las plantillas de vista se almacenan dentro del directorio view del módulo.

Las plantillas de vista pueden tener comportamientos diferentes dependiendo de las variables que les pasamos desde los métodos de acción del controlador. Los datos se pasan a las plantillas de vista con la ayuda del contenedor de variables ViewModel.

Por ejemplo, vamos a implementar la plantilla de vista para el método aboutAction() de nuestro controlador Index. La página Acerca de mostrará el título y alguna información sobre nuestra aplicación Hola Mundo.

Para crear el archivo de la plantilla de vista desde nuestro editor de texto favorito (NetBeans, Atom, etc.) navegamos hasta el directorio view/application/index (ver figura 4.6) y hacemos clic derecho sobre la carpeta "index". En el menú contextual que se despliega seleccionamos "New->PHP File...".

Figura 4.6. Menú Contextual

En la ventana de dialogo "New PHP File" que aparece (figura 4.7) ingresamos el siguiente nombre para el archivo: about.phtml, y hacemos clic en el botón Finish.

Figura 4.7. Menú Contextual

El archivo de plantilla de vista about.phtml será creado y mostrado en la ventana derecha de NetBeans. En este archivo agregamos el siguiente código:

<h1>About</h1>

<p>
    The Hello World application.
</p>

<p>
    Application name: <?= $this->escapeHtml($appName); ?>
</p>

<p>
    Application description: <?= $this->escapeHtml($appDescription); ?>.
</p>

Como podemos ver la plantilla de vista es una página HTML típica con varios fragmentos de código PHP. Un script de vista solo imprime los datos que le pasamos en el contenedor de variables ViewModel. Por ejemplo, en a línea 8 traemos el valor de la variable $appName y la imprimimos en el flujo de salida estándar.

Dentro de la plantilla de vista podemos fácilmente acceder a las variables que fueron pasadas desde la acción del controlador. Por ejemplo, para traer el valor de la variable: nombre de la aplicación, usamos la sintaxis $appName o $this->appName. Estas dos manera de acceder a la variable son equivalentes, pero la primera forma requiere escribir menos así que usaremos esta de ahora en adelante.

Notemos que estamos usando el ayudante de vista (view helper) EscapeHtml para escapar la cadena de caracteres impresa en la página web y hacer a nuestro sitio web resistente a los ataques de crackers.

Nosotros deberíamos siempre escapar las variables que imprimimos en nuestras páginas webs. Escapar permite asegurar que código malicioso no es inyectado en nuestra página.

Además, en nuestro script de vista podemos usar estructuras de control simples (como if, foreach o switch) para cambiar la apariencia de la página dependiendo del valor de las variables.

Ahora vamos a ver como se ve la página en el navegador web. Escribimos la URL http://localhost/application/about en nuestra barra de navegación del navegador web. La página Acerca de debería aparecer (ver figura 4.8):

Figura 4.8. Página Acerca de

En general el código PHP que usamos dentro de las vistas debe ser tan simple como sea posible. Las vistas generalmente no modifican los datos que pasamos desde el controlador. Por ejemplo, una vista puede usar el modelo que le pasamos para recorrer las filas de una tabla de base de datos e imprimir los elementos en una página HTML, pero la vista nunca debería crear tablas de base de datos o modificarlas.