La vista
Como hemos visto anteriormente, la vista representa la interfaz gráfica del usuario (GUI), es decir, es la encargada de mostrar la información al usuario de manera “humanamente legible”.
A tal fin, divideremos la vista en dos sub-capas: la GUI propiamente dicha y su lógica.
Como hemos visto anteriormente, la vista representa la interfaz gráfica del usuario (GUI), es decir, es la encargada de mostrar la información al usuario de manera “humanamente legible”.
A tal fin, divideremos la vista en dos sub-capas: la GUI propiamente dicha y su lógica.
Vista: la interfaz gráfica
Generalmente, en la práctica, no somos los programadores quienes nos hemos de encargar de la GUI. Es tarea que corresponde a diseñadores Web o gráficos, según aplique.
Como “arquitectos”, debemos tener preparada la estructura de nuestra aplicación, para que diseñadores puedan trabajar libremente en la GUI, sin tener que acceder al código PHP. Veremos además, como evitar por completo que los diseñadores tengan que implementar código PHP en sus GUI y que programadores, tengamos que implementar código HTML en nuestras lógicas.
En principio, la parte gráfica de las vistas (archivos HTML, imágenes, CSS, etc.), deberá tener un directorio reservado solo para ella. De esta forma, obtenemos varias ventajas de trabajar con el patrón MVC:
Generalmente, en la práctica, no somos los programadores quienes nos hemos de encargar de la GUI. Es tarea que corresponde a diseñadores Web o gráficos, según aplique.
Como “arquitectos”, debemos tener preparada la estructura de nuestra aplicación, para que diseñadores puedan trabajar libremente en la GUI, sin tener que acceder al código PHP. Veremos además, como evitar por completo que los diseñadores tengan que implementar código PHP en sus GUI y que programadores, tengamos que implementar código HTML en nuestras lógicas.
En principio, la parte gráfica de las vistas (archivos HTML, imágenes, CSS, etc.), deberá tener un directorio reservado solo para ella. De esta forma, obtenemos varias ventajas de trabajar con el patrón MVC:
• Los archivos estáticos (HTML, CSS, imágenes e incluso JavaScript) pueden almacenarse en un servidor independiente con todos los beneficios que esto conlleva (al igual que sucede con las bases de datos, los archivos estáticos también pueden independizarse)
• Nos aseguramos de que el código estático (aquel desarrollado por diseñadores), no “rompa” el núcleo de la aplicación
• Permitimos a los diseñadores trabajar cómodamente en la libertad de aplicar todos los conocimientos y herramientas inherentes a su área de conocimiento, sin la presión de tener que implementar un lenguaje de programación que desconocen, les es poco familiar o simplemente, la herramienta que utilizan para diseñar, suele dañarles el código no-estático
En segundo lugar, cada plantilla – template - o archivo HTML, deberá hacer referencia “estática” a los datos que se quieran reemplazar dinámicamente. Para esto, no será necesario implementar código que no sea HTML.
Veremos aquí como hacer referencia a estos datos, y más adelante, veremos como la lógica de la vista se encargará de renderizarlos.
Supongamos que tenemos una plantilla HTML, donde lo que necesitamos reemplazar de manera dinámica, es: título de la página, keywords y descripción. La mejor manera de referenciar a estos datos, facilitando la tarea a un diseñador, es haciendo una referencia textual a éstos. Para que a la vez, los programadores logremos diferenciar que allí se incluyen datos dinámicos, una buena práctica, es encerrar esa referencia textual entre llaves.
Veamos un ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{Título de la Página}</title>
<meta name="title" content="{Título de la Página}">
<meta name="keywords" content="{keywords}">
<meta name="description" content="{descripción}">
<link type="text/css" rel="stylesheet" href="css/template.css">
</head>
<body>
<div id="page">
<div id="cab">
<img alt="home page" src="img/logo.gif"></a>
</div>
<div id="contenido">
<h1>{Título de la Página}</h1>
</div>
</div>
</body>
</html>
<meta name="keywords" content="{keywords}">
<meta name="description" content="{descripción}">
<link type="text/css" rel="stylesheet" href="css/template.css">
</head>
<body>
<div id="page">
<div id="cab">
<img alt="home page" src="img/logo.gif"></a>
</div>
<div id="contenido">
<h1>{Título de la Página}</h1>
</div>
</div>
</body>
</html>
Como podemos ver, en la plantilla HTML solo hay código HTML. Para un diseñador, será una tarea sencilla.
Veremos en el siguiente paso, como la lógica de la vista, se encargará de reemplazar estos datos.
La Lógica de la Vista
Tenemos la plantilla que creó nuestro diseñador. Es hora de reemplazar dinámicamente los datos referenciados. Haremos esto, paso a paso, como si de una receta de cocina se tratara.
Primer paso: crear un diccionario de datos
El diccionario de datos es el que contendrá, literalmente hablando, un diccionario, indicando cuales referencias deben ser reemplazadas por cuáles datos, en forma dinámica.
$diccionario = array(
'Título de la Página'=>'POO y MVC en PHP',
'keywords'=>'poo, mvc, php, arquitectura de software',
'description'=>'El paradigma de la programación orientada a objetos con el patrón arquitectónico MVC en PHP'
);
Segundo paso: obtener la plantilla HTML
Para traer la plantilla HTML, vamos a utilizar la función file_get_contents() de PHP, y almacenar el contenido de ella, en una variable.
$template = file_get_contents('/carpeta/template.html');
Tercer paso: reemplazar el contenido
En el anteúltimo paso, reemplazaremos los datos, utilizando el bucle foreach de PHP para recorrer el diccionario, y la función str_replace() de PHP, para reemplazar los mismos.
foreach ($diccionario as $clave=>$valor) {
$template = str_replace('{'.$clave.'}', $valor, $template);
}
$template = str_replace('{'.$clave.'}', $valor, $template);
}
Cuarto paso: mostrar el contenido final al usuario
Por último, imprimiremos el resultado obtenido en pantalla.
print $template;
Y con esto, habremos concluido la lógica de la vista, obteniendo en el navegador del usuario, la siguiente salida (vista de código fuente):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>POO y MVC en PHP</title>
<meta name="title" content="POO y MVC en PHP">
<meta name="keywords" content="poo, mvc, php, arquitectura de software">
<meta name="description" content="El paradigma de la programación orientada a objetos con el
patrón arquitectónico MVC en PHP">
<link type="text/css" rel="stylesheet" href="css/template.css">
</head>
<body>
<div id="page">
<div id="cab">
<img alt="home page" src="img/logo.gif"></a>
</div>
<div id="contenido">
<h1>POO y MVC en PHP</h1>
</div>
</div>
</body>
</html>
No hay comentarios.:
Publicar un comentario