Unidad 2_ Desarrollo de una aplicación web siguiendo el patrón MVC.pdf

7/25/2019 Unidad 2_ Desarrollo de una aplicacin web siguiendo el patrn MVC.pdf

1/13

Unidad 2: Desarrollo de una aplicacin web siguiendo el patrn MVC

El patrn MVC en el desarrollo de aplicaciones web

Muchos de los problemas que aparecen en la ingeniera del software son similares en su estructura. Y, por tanto, se resuelven de manera parecida. A lo largo de lahistoria de esta disciplina se han elaborado un buen nmero de esquemas resolutivos que son conocidos con el nombre des patrones de diseo y cuyo conocimiento y

aplicacin son de una inestimble ayuda a la hora de disear y construir una aplicacin informtica.

Posiblemente uno de los ms conocidos y utilizados sea el patrn Modelo, Vista, Controlador (MVC), que propone organizar una aplicacin en tres partes biendiferenciadas y dbilmente acopladas entre s, de manera que los cambios que se produzcan en una no afecten demasiado a las otras (idealmente nada). El nombre delpatrn enumera cada una de las partes:

El Controlador. En este artefacto se incluye todo lo referente a la lgica de control de la aplicacin, que no tiene nada que ver con las caractersticas propias delnegocio para el que se est construyendo la aplicacin. En el caso de una aplicacin web, un ejemplo sera la manipulacin de la request HTTP.El Modelo. Donde se implementa todo lo relativo a la lgica de negocio, es decir, los aspectos particulares del problema que la aplicacin resuelve. Si, porejemplo estamos desarrollando un blog, un ejemplo sera una librera de funciones para la gestin de los comentarios.La Vista. Aqu se ubica el cdigo encargado de pintar el resultado de los procesos de la aplicacin. En una aplicacin web la vista se encarga de producirdocumentosHTML,XML, JSON, etctera, con los datos que se hayan calculado previamente en la aplicacin.

Para que el conjunto funcione, las partes deben interaccionar entre s. Y en este punto encontramos en la literatura distintas soluciones. La que proponemos en estecurso es la mostrada en la siguiente figura:

Diagrama del modelo MVC

El controlador recibe la orden de entrada y se encarga de procesarla utilizando, si es preciso, los servicios del modelo para ello. Una vez que ha realizado el clculoentrega los datos crudos a la vista y esta se encarga de decorarlos adecuadamente. La caracterstica ms importante de esta solucin es que la vista nunca interaccionacon el modelo.

Las aplicaciones web ms tpicas pueden plantearse segn este patrn: el controlador recibe una peticin HTTPy la procesa, haciendo uso del modelo calcula los datosde salida y los entrega a la vista, la cual se encarga de construir una respuesta HTTPcon las cabeceras adecuadas y un payloado cuerpo de la respuesta que suele ser uncontenidoHTML,XMLo JSON.

Aunque no todas las aplicaciones web se pueden ajustar a este modelo, si es cierto que la idea de separar responsabilidades o las distintas areas de un problema ensistemas dbilmente acoplados, es una estrategia comn en las metodologa que utilizan el paradigma de programacin orientado a objetos. Es lo que se conoce en la

terminologa anglosajona como Separation Of Concerns .

En esta unidad vamos a plantear y desarrollar una sencilla aplicacin web utilizando como gua de diseo este patrn. De esta manera ilustraremos sus ventajas y nosservir como material introductorio a la arquitectura de symfony 1.4.

Descripcin de la aplicacin

Vamos a construir una aplicacin web para elaborar y consultar un repositorio de alimentos con datos acerca de sus propiedades dietticas. Utilizaremos una base dedatos para almacenar dichos datos que consistir en una sola tabla con la siguiente informacin sobre alimentos:

El nombre del alimento,la energa en kilocaloras ,la cantidad de protenas,la cantidad hidratos de carbono en gramos

la cantidad de fibra en gramos yla cantidad de grasa en gramos,

todo ello por cada 100 gramos de alimento.

Aunque se trata de una aplicacin muy sencilla, cuenta con los elementos suficientes para trabajar el aspecto que realmente pretendemos estudiar en esta unidad: laorganizacin del cdigo siguiendo las directrices del patrn MVC. Comprobaremos como esta estrategia nos ayuda a mejorar las posibilidades de crecimiento(escalabilidad) y el mantenimiento de las aplicaciones que desarrollamos.

[1]

[2]
http://-/?-http://-/?-


2/13

Diseo de la aplicacin (I). Organizacin de los archivos

La anatoma de una aplicacin web tpica consiste en:

1. El cdigo que ser procesado en el servidor (PHP, Java,Python, etctera) para construir dinmicamente la respuesta.2. LosAssets, que podemos traducir como activos de la aplicacin, y que lo constituyen todos aquellos archivos que se sirven directamente sin ningn tipo de

proceso. Suelen ser imgenes, CSSsy cdigo Javascript.

El servidor web nicamente puede acceder a una parte del sistema de ficheros que se denominaDocument Root. Es ah donde se buscan los recursos cuando se realizauna peticin a la raz del servidor a travs de la URL http://el.servidor.que.sea/ . Sin embargo, el cdigo ejecutado para construir dinmicamente larespuesta puede vivir en cualquier otra parte, fuera delDocument root .

Tode esto sugiere una manera de organizar el cdigo de la aplicacin para que no se pueda acceder desde el navegador ms que al cdigo estrictamente imprescindiblepara que esta funcione. Se trata, simplemente, de colocar en el Document root slo los activos y los scripts PHP de entrada a la aplicacin. El resto de archivos,fundamentalmente librerasPHPsy ficheros de configuracin (XML, YAML, JSON, etctera), se ubicarn fuera del Document Rooty sern incluidos por los scriptsde inicio segn lo requieran.

Siguiendo estas conclusiones, nuestra aplicacin presentar la siguiente estructura de directorio:

.

appweb css images js

Configuraremos nuestro servidor web para que el directorioweb sea suDocument root, y en app colocaremos el cdigoPHPy la configuracin de la aplicacin.

Diseo de la aplicacin (II). El controlador frontal

La manera ms directa y naf de construir una aplicacin en PHP consiste en escribir un script PHP para cada pgina de la aplicacin. Sin embargo esta prcticapresenta algunos problemas, especialmente cuando la aplicacin que desarrollamos adquiere cierto tamao y pretendemos que siga creciendo. Veamos algunos de losproblemas ms significativos de este planteamiento.

Por lo general, todos los scripts de una aplicacin realizan una serie de tareas que son comunes. Por ejemplo: interpretar y manipular la request, comprobar lascredenciales de seguridad y cargar la configuracin. Esto significa que una buena parte del cdigo puede ser compartido entre los scripts. Para ello podemos utilizar elmecanismo de inclusin de ficheros dePHPy fin de la historia. Pero, qu ocurre si en un momento dado, cuando ya tengamos escrito mucho cdigo, queremos aadira todas las pginas de la aplicacin una nueva caracterstica que requiere, por ejemplo, el uso de una nueva librera?. Tenemos, entonces, que aadir dicha modificacina todos los scriptsPHPde la aplicacin. Lo cual supone una degradacin en el mantenimiento y un motivo que aumenta la probabilidad de fallos una vez que el cambiose haya realizado.

Otro problema que ocurre con esta estrategia es que si se solicita una pgina que no tiene ningn scriptPHPasociado, el servidor arrojar un error (404 Not Found)cuyo aspecto no podemos controlar dentro de la propia aplicacin (es decir, sin tocar la configuracin del servidor web).

Como se suele decir, a grandes males grandes remedios! si el problema lo genera el hecho de tener muchos scripts, que adems comparten bastante cdigo, utilicemosuno solo que se encargue de procesar todas las peticiones. A este nico script de entrada se le conoce como controlador frontal.

Entonces, cmo puedo crear muchas pginas distintas con un solo script?. La clave est en utilizar la query stringde la URL como parte de la ruta que define la pginaque se solicita. El controlador frontal, en funcin de los parmetro que lleguen en la query string determinar que acciones debe realizar para construir la pginasolicidada.

Nota:La query stringes la parte de la URL que contiene los datos que se pasarn a la aplicacin web. Por ejemlo, en:http://tu.servidor/index.php?accion=hola , la query stringes: ?accion=hola .

Construccin de la aplicacin. Vamos al lo.

Pues eso, vamos al lo aplicando todo lo que llevamos dicho hasta el momento:

El patrn de diseoMVC,La estructura de directorios que expone nicamente los ficheros indispensables para el servidor web y,La idea de que todas la peticiones pasen por un solo script, el controlador frontal

Creacin de la estructura de directorios

Comenzamos creando la estructura de directorios propuesta anteriormente. Por lo pronto, en nuestro entorno de desarrollo y por cuestiones de comodidad, crearemos laestructura en alguna ubicacin dentro del Document root.

Nota:Si ests utilizando como sistema operativo Ubuntu, el Document rootse encuentra en /var/www , es ah donde debes crear un directorio denominadoalimentos que alojar la estructura propuesta. Si ests utilizandoXAMPen Windows, se encuentra en C:/xampp/htdocs .

Es importante resaltar que esto no debera hacerse en un entorno de produccin, ya que dejamos al servidor web acceder directamente al directorio app, y esalgo que deseamos evitar. Sin embargo, de esta manera podemos aadir todos los proyectos que queramos sin tener que tocar la configuracin del servidor web.Lo cual es algo muy agradecido cuando se est desarrollando. En un entorno de produccin debemos asegurarnos de que el directorio web es el Documentrootdel servidor (o del VirtualHost de nuestra aplicacin, si es que estamos alojando varias webs en un mismo servidor).

Nuestra implementacin del patrnMVCser muy sencilla crearemos una clase para la parte del controlador que denominaremos Controller, otra para el modelo

[3]
http://-/?-


3/13

que denominaremos Model, y para los parmetros de configuracin de la aplicacin utilizaremos una clase que llamaremos Config. Los archivos donde se definenestas clases los ubicaremos en el directorio app . Por otro lado las Vistas sern implementadas como plantillasPHPen el directorio app/templates.

Los archivos CSS, Javascript, las imgenes y el controlador frontal los colocaremos en el directorio web.

Cuando terminemos de codificar, la estructura de ficheros de la aplicacin presentar el siguiente aspecto:

/var/www/alimentos app | templates | Controllers.php | Model.php | Config.php | web css images js index.php

El controlador frontal y el mapeo de rutas

En cualquier aplicacin web se deben definir las URLsasociadas a cada una de sus pginas. Para la nuestra definiremos las siguientes:

URL Accin

http://tu.servidor/alimentos/index.php?ctl=inicio mostrar pantalla inicio

http://tu.servidor/alimentos/index.php?ctl=listar listar alimentos

http://tu.servidor/alimentos/index.php?ctl=insertar insertar un alimento

http://tu.servidor/alimentos/index.php?ctl=buscar buscar alimentos

http://tu.servidor/alimentos/index.php?ctl=ver&id=x ver el alimentox

A cada una de estas URLsles vamos a asociar un mtodo pblico de la clase Controller. Estos mtodos se suelen denominar acciones. Cada accinse encarga decalcular dinmicamente los datos requeridos para construir su pgina. Podr utilizar, si le hace falta, lo servicios de la clase Model. Una vez calculados los datos, selos pasar a una plantilla donde se realizar, finalmente, la construccin del documento HTMLque ser devuelto al cliente.

Todos estos elementos sern orquestados por el controlador frontal, el cual lo implementaremos en un script llamado index.php ubicado en el directorioweb.En concreto, la responsabilidad del controlador frontal ser:

cargar la configuracin del proyecto y las libreras donde implementaremos la parte del Modelo, del Controlador y de la Vista.Analizar los parmetros de la peticin HTTP (request) comprobando si la pgina solicitada en ella tiene asignada alguna accin del Controlador. Si es as laejecutar, si no dar un error 404 (page not found).

Llegados a este punto es importante aclara que, el controladorfrontal y la clase Controller , son distintas cosas y tienen distintas responsabilidades. El hecho deque ambos se llamen controladorespuede dar lugar a confusiones.

El controlador frontal tiene el siguiente aspecto. Crea el archivoweb/index.php y copia el siguiente cdigo.


4/13

// Ejecucin del controlador asociado a la ruta

if

(method_exists($controlador['controller'],$controlador['action'])) { call_user_func(array(new$controlador['controller'], $controlador['action']));} else{

header('Status: 404 Not Found'); echo'Error 404: El controlador '. $controlador['controller'] . '->'. $controlador['action'] . ' no existe';}

En las lneas 5-7 se realiza la carga de la configuracin del modelo y de los controladores.En las lneas 10-16 se declara un array asociativo cuya funcin es definir una tabla para mapear (asociar), rutas en acciones de un controlador. Esta tabla serutilizada a continuacin para saber qu accin se debe disparar.En las lneas 19-31 se lleva a cabo el parseo de la URLy la carga de la accin, si la ruta est definida en la tabla de rutas. En caso contrario se devuelve unapgina de error. Observa que hemos utilizado la funcin header() dePHPpara indicar en la cabecera HTTPel cdigo de error correcto. Adems enviamosun pequeo documentoHTMLque informa del error. Tambin definimos a inicio como una ruta por defecto, ya que si la query string llega vaca, se optapor cargar esta accin.

Nota:En honor a la verdad tenemos que decir que lo que estamos llamando parseo de la URL, no es tal. Simplemente estamos extrayendo el valor de la variable

ctl que se ha pasado a travs de la peticinHTTP. Sin embargo, hemos utilizado este termino porque lo ideal sera que, en lugar de utilizar parmetros de lapeticinHTTPpara resolver la ruta, pudisemos utilizar rutas limpias(es decir, sin caracteres ? ni & ) del tipo:

http://tu.servidor/index.php/iniciohttp://tu.servidor/index.php/buscarhttp://tu.servidor/index.php/ver/5

En este caso s es necesario proceder a un parseo de la URLpara buscar en la tabla de rutas la accin que le corresponde. Esto, obviamente, es ms complejo.Pero es lo que hace (y muchas cosas ms) el componente Routingde symfony 1.4.

Las acciones del Controlador. La clase Controller.

Ahora vamos a implementar las acciones asociadas a las URLsen la clase Controllers. Crea el archivo app/Controller.php y copia el siguiente cdigo:


5/13

'proteina'=>'', 'hc'=>'', 'fibra'=>'', 'grasa'=>'', );

$m=newModel(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario, Config::$mvc_bd_clave, Config::$mvc_bd_hostname);

if($_SERVER['REQUEST_METHOD'] =='POST') {

// comprobar campos formulario if($m->validarDatos($_POST['nombre'], $_POST['energia'], $_POST['proteina'], $_POST['hc'], $_POST['fibra'], $_POST['grasa'])) {

$m->insertarAlimento($_POST['nombre'], $_POST['energia'], $_POST['proteina'], $_POST['hc'], $_POST['fibra'], $_POST['grasa']); header('Location: index.php?ctl=listar');

} else{ $params=array( 'nombre'=>$_POST['nombre'], 'energia'=>$_POST['energia'], 'proteina'=>$_POST['proteina'], 'hc'=>$_POST['hc'], 'fibra'=>$_POST['fibra'], 'grasa'=>$_POST['grasa'], ); $params['mensaje'] ='No se ha podido insertar el alimento. Revisa el formulario'; } }

require__DIR__ .'/templates/formInsertar.php'; }

publicfunctionbuscarPorNombre() { $params=array( 'nombre'=>'', 'resultado'=>array(), );


if($_SERVER['REQUEST_METHOD'] =='POST') { $params['nombre'] =$_POST['nombre']; $params['resultado'] =$m->buscarAlimentosPorNombre($_POST['nombre']); }

require__DIR__ .'/templates/buscarPorNombre.php'; }

publicfunctionver() {

if

(!isset($_GET['id'])) { thrownewException('Pgina no encontrada'); }

$id=$_GET['id'];


$alimento=$m->dameAlimento($id);

$params=$alimento;

require__DIR__ .'/templates/verAlimento.php'; }

}

Esta clase implementa una serie de mtodos pblicos, que hemos denominado acciones para indicar que son mtodos asociados a URLs. Fjate como en cada una de las

acciones se declara un array asociativo ( params ) con los datos que sern pintados en la plantilla. Pero en ningn caso hay informacin acerca de como se pintarndichos datos. Por otro lado, casi todas las acciones utilizan un objeto de la clase Models para realizar operaciones relativas a la lgica de negocio, en nuestro caso atodo lo relativo con la gestin de los alimentos.

Para comprender el funcionamiento de las acciones, comencemos por Analizar la funcin listar() . Comienza declarando un objeto del modelo (lnea 17) parapedirle posteriormente el conjunto de alimentos almacenados en la base de datos. Los datos recopilados son almacenados en el array asociativo params (lneas 20-22). Por ltimo incluye el archivo /templates/mostrarAlimentos.php (lnea 24). Tal archivo, que denominamos plantilla, ser el encargado de construir el


6/13

documento HTMLcon los datos del array params . Observa que todas las acciones tienen la misma estructura: realizan operaciones, recojen datos y llaman a unaplantilla para construir el documentoHTMLque ser devuelto al cliente.

Observa tambin que en las acciones del controlador no hay ninguna operacin que tenga que ver con la lgica de negocio, todo lo que se hace es lgica de control.

Analicemos ahora la accin insertar(), cuya lgica de control es algo ms compleja debido a que tiene una doble funcionalidad:

1. Enviar al cliente un formulario HTML,2. Validar los datos sobre un alimento que se reciben desde el cliente para insertarlos en la base de datos.

La funcin comienza por declarar un array asociativo con campos vacos que coinciden con los de la tabla alimento (lneas 29-36). A continuacin comprueba si lapeticin se ha realizado mediante la operacin POST (lnea 41), si es as significa que se han pasado datos a travs de un formulario, si no es as quiere decir quesimplemente se ha solicitado la pgina para ver el formulario de insercin. En este ltimo caso, la accin pasa directamente a incluir la plantilla que pinta el formulario

(lnea 65). Como el array de parmetros est vaco, se enviar al cliente un formulario con los campos vacos (cuando veas el cdigo de la plantilla lo vers en directo,por lo pronto basta con saber que es as).

Por otro lado, si la peticin a la accin insertar() se ha hecho mediante la operacinPOST, significa que se han enviado datos de un formulario desde el cliente(precisamente del formulario vaco que hemos descrito un poco ms arriba). Entonces se extraen los datos de la peticin, se comprueba si son vlidos (lnea 44) y en sucaso se realiza la insercin (lnea 47) y una redireccin al listado de alimentos (lnea 50). Si los datos no son vlidos, entonces se rellena el array de parmetros con losdatos de la peticin (lneas 53-60) y se vuelve a pintar el formulario, esta vez con los campos rellenos con los valores que se enviaron en la peticin anterior y con unmensaje de error.

Todo el proceso que acabamos de contar no tiene nada que ver con la lgica de negocio esto es, no decide cmo deben validarse los datos, ni cmo deben insertarse enla base de datos, esas tareas recaen en el modelo (el cual, obviamente debemos utilizar). Lo importante aqu es que debe haber una operacin de validacin para tomaruna decisin: insertar los datos o reenviar el formulario relleno con los datos que envi el usuario y con un mensaje de error. Es decir, nicamente hay cdigo queimplementa la lgica de control.

Nota:El esquema de control que se acaba de presentar resulta muy prctico y ordenado para implementar acciones que consisten en recopilar datos del usuario

y realizar algn proceso con ellos (almacenarlos en una base de datos, por ejemplo). A lo largo del curso aparecer, con ms o menos variaciones, en variasocasiones.

La implementacin de la Vista.

Las plantillasPHPAhora vamos a pasar a estudiar la parte de la Vista, representada en nuestra solucin por las plantillas. Aunque en el anlisis que estamos haciendo ya hemos utilizadola palabra plantilla en varias ocasiones, an no la hemos definido con precisin. As que comenzamos por ah.

Una plantilla es un fichero de texto con la informacin necesaria para generar documentos en cualquier formato de texto (HTML,XML, CSV,LaTeX, JSON, etctera).Cualquier tipo de plantilla consiste en un documento con el formato que se quiere generar, y con variables expresadas en el lenguaje propio de la plantilla y querepresentas a lo valores que son calculados dinmicamente por la aplicacin.

Cuando desarrollamos aplicaciones web conPHP, la forma ms sencilla de implementar plantillas es usando el propio PHPcomo lenguaje de plantillas. Qu significaesto? Acudimos al refranero popular y decimos aquello de que una imagen vale ms que mil palabras. Con todos vosotros un ejemplo de plantillaHTMLque usaPHPcomo lenguaje de plantillas (dedcale un ratito a observarla y analizarla, qu es lo que te llama la atencin en el aspecto del cdigo PHPque aparece?)

alimento (por 100g) energa (Kcal) grasa (g)

Esencialmente no es ms que un trozo de documento HTML donde la informacin dinmica se obtiene procesando cdigo PHP. La caracterstica principal de estecdigoPHPes que debe ser escueto y corto. De manera que no contamine la estructura delHTML. Por ello cada instruccinPHPcomienza y termina en la mismalnea. La mayor parte de estas instrucciones son echo's de variables escalares. Pero tambin son muy usuales la utilizacin de bucles foreach - endforeachpara recorrer arrays de datos, as como los bloques condicionales if - endif para pintar bloques segn determinadas condiciones.

En el ejemplo de ms arriba se genera el cdigo HTMLde una tabla que puede tener un nmero variable de filas. Se recoje en la plantilla el parmetro alimentos ,que es un array con datos de alimentos, y se genera una fila por cada elemento del array con informacin de la URL de una pgina sobre el alimento (lnea 9), y sunombre, energa y grasa total (lneas 10-14).

Observa tambin la forma de construir el bucle foreach, se abre en la lnea 7 y se cierra en la 16. Lo particular de la sintaxis de este tipo de bucle para plantillas esque la instruccin foreach que lo abre terminan con el caracter : . Y la necesidad de cerrarlo con un .

El layout y el proceso de decoracin de plantillas

En una aplicacin web, muchas de las pginas tienen elementos comunes. Por ejemplo, un caso tpico es la cabecera donde se coloca el mensaje de bienvenida, el men


7/13

y el pie de pgina. Este hecho, y la aplicacin del conocido principio de buenas prcticas de programacin DRY (Dont Repeat Yourself, No Te Repitas), lleva a quecualquier sistema de plantillas que se utilice para implementar la vista utilice otro conocido patrn de diseo: El Decorator, o Decorador . Aplicado a la generacin

de vistas la solucin que ofrece dicho patrn es la de aadir funcionalidad adicional a las plantillas. Por ejemplo, aadir el men y el pie de pgina a las plantillas que lorequieran, de manera que dichos elementos puedan reutilizarse en distintas plantillas. Literalmente se trata de decorar las plantillas con elementos adicionalesreutilizables.

Nuestra implementacin del patrnDecoratores muy simple y, por tanto limitada, pero suficiente para asimilar las bases del concepto y ayudarnos a comprender msadelante la filosofa del sistema de plantillas de symfony 1.4.

Nuestras plantillas sern ficheros PHPdel tipo que acabamos de explicar, y las ubicaremos en el directorio app/templates . Como ya has visto en el cdigo delcontrolador, las acciones finalizan incluyendo alguno de estos archivos. Comencemos por estudiar la plantilla app/templates/mostrarAlimentos.php, que es laque utiliza la accin listar() para pintar los alimentos que obtiene del modelo. Crea el archivo app/templates/mostrarAlimentos.php con el siguiente

cdigo:

app/templates/mostrarAlimentos.php


Como ves, las lneas 3-18 son las que se han puesto como ejemplo de plantilla PHPhace un momento. La novedad son las lneas 1 y 21-23. En ellas est la clave delnuestro proceso de decoracin. Para comprenderlo del todo es importante echarle un vistazo al fichero app/templates/layout.php , incluido al final de la

plantilla. Cralo y copia el siguiente cdigo:

app/templates/layout.php

Informacin Alimentos


8/13

El nombre del fichero es bastante ilustrativo, es un layoutHTML, es decir, un diseo de un documento HTML que incluye como elemento dinmico a la variable$contenido (lnea 26), la cual esta definida al final de la plantilla mostrarAlimentos.php , y cuyo contenido es precisamente el resultado de interpretar las

lneas comprendidas entre el ob_start() y $contenido = ob_get_clean() . En la documentacin de estas funciones(http://php.net/manual/es/function.ob-start.php) puedes ver que el efecto de ob_start() es enviar todos los resultados del script desde la invocacin de la funcina un buffer interno. Dichos resultados se recojen a travs de la funcin ob_get_clean() . De esa manera conseguimos decorar la plantilla con el layout. Esta tcnicaes utilizada en todas las plantillas, de manera que todos los elementos comunes a todas las pginas son escritos una sla vez en layout.php y reutilizados con todaslas plantillas generadas con los datos de cada accin.

Observa que el layoutque hemos propuesto incluye:

los estilos CSS(lnea 6),el men de la aplicacin (lneas 14-23)el pie de pgina (lneas 29-32)

A continuacin mostramos el cdigo del resto de las plantillas:

app/templates/inicio.php

InicioFecha:

app/templates/formInsertar.php

Nombre

Energa (Kcal) Proteina (g) H. de carbono (g) Fibra (g)

Grasa total (g)

app/templates/buscarPorNombre.php

nombre alimento:


9/13


app/templates/verAlimento.php

Energa

Proteina

Hidratos de Carbono

Fibra

Grasa total

Todas las plantillas recurren al uso de las funciones ob_start() y ob_get_clean() y a la inclusin del layoutpara realizar el proceso de decoracin.

El Modelo. Accediendo a la base de datos

Ya slo nos queda presentar al Modelo. En nuestra aplicacin se ha implementado en la clase Model y esta compuesto por una serie de funciones para persistir datosen la base de datos, recuperarlos y realizar su validacin.

Dependiendo de la complejidad del negocio con el que tratemos, el modelo puede ser ms o menos complejo y, adems de tratar con la persistencia de los datos puede


10/13

incluir funciones para ofrecer otros servicios relacionados con el negocio en cuestin. Crea el archivo app/Model.php y copia el siguiente cdigo:

app/Model.php


11/13

$f=htmlspecialchars($f); $g=htmlspecialchars($g);

$sql="insert into alimentos (nombre, energia, proteina, hidratocarbono, fibra, grasatotal) values ('". $n."',".$e.",".$p.",".$hc.",".$f.",".$g.")";

$result=mysql_query($sql, $this->conexion);

return$result; }

publicfunctionvalidarDatos($n, $e, $p, $hc, $f, $g) { return(is_string($n) & is_numeric($e) &

is_numeric($p) & is_numeric($hc) & is_numeric($f) & is_numeric($g)); }

}

Cuando el controlador requiere el uso del modelo, creamos un objeto de tipo $m = new Model() . El constructor de esta clase realiza una conexin con la base dedatos y la pone disponible a todos sus mtodos al aadir la conexin creada como atributo del objeto. Cada funcin utiliza esta conexin para realizar su cometidocontra la base de datos.

La ltima funcin de la clase, validarDatos() , es algo distinta, ya que no utiliza para nada la conexin con la base de datos. Simplemente valida datos. Si laaplicacin fuera ms compleja sera interesante crear una clase dedicada a la validacin. De manera que atendamos al principio de la Separation of Concerns.

La configuracin de la aplicacin

A lo largo y ancho de todo el cdigo expuesto, aparece cada tanto una referencia a unos atributos estticos de la clase Config . Por ejemplo, en la lnea 10 delarchivo app/Model.php , aparece Config::$mvc_bd_hostname , Config::$mvc_bd_usuario, etctera. Se trata de parmetros de configuracin que hemosdefinido en una clase denominada Config :

app/Config.php


12/13

top:2em;left

:1em; width:9em}h1{ font family:Helvetica,Geneva,Arial, SunSans-Regular,sans serif}ulnavbarli{ background:white; margin:0.5em0;padding

:0.3em; border right:1emsolidblack}ulnavbara{ text decoration:none}a:link{ color:blue}

a:visited{ color:purple}address{ margin top:1em; padding top:1em; border top:thindotted}#contenido{ display:block; margin:auto; width:auto; min height:400px;}

Fjate que en el archivo app/templates/layout.php se incluye (lnea 6) este archivo CSSque acabamos de crear. Como dicho layoutdecora a todas las plantillas,estos estilos afectarn a todas las pginas.

La base de datosEn el Sistema Gestor de Base de Datos MySQLque vayas a utilizar, utilizando algn clienteMySQL crea una base de datos para almacenar los alimentos. Introducealgunos registros para probar la aplicacin.

CREATETABLEàlimentos`( ìdìnt(11) NOTNULLAUTO_INCREMENT, `nombre`varchar(255) NOTNULL, ènergia`decimal(10,0) NOTNULL, `proteina`decimal(10,0) NOTNULL, `hidratocarbono`decimal(10,0) NOTNULL, `fibra`decimal(10,0) NOTNULL, `grasatotal`decimal(10,0) NOTNULL, PRIMARYKEY(ìd`)) ENGINE=InnoDB DEFAULTCHARSET=utf8;

Lo importante para que la conexin funcione, es que los parmetros de conexin que se establecen en el fichero app/Config.php coincidan con los de tu base de

datos.

Consejo:Lo ms cmodo para desarrollar es tener todo en el mismo computador: tanto el servidor web (apache) como el servidor de base de datos (MySQL).Adems es muy prctico, aunque nada seguro, utilizar en el servidor MySQLel usuario root (superadministrador) como usuario de nuestras aplicaciones. As nohay que preocuparse por temas de permisos. Repetimos: es lo ms cmodo pero, a la vez, lo ms inseguro. Esta prctica est justificada NICAMENTE en unentorno de desarrollo en local, donde la seguridad, en principio no es primordial.

Ya puedes juntar todas las piezas y probar la aplicacin introduciendo en tu navegador la URLcorrespondiente:

http://tu.servidor/ruta/a/alimentos/web/index.php

Suerte!

Ejercicios

Ejercicio 1.

Aade al men una opcin para mostrar un listado con todos los alimentos con enlaces a los artculos correspodientes de la wikipedia y construye dicha funcionalidad.

Consejo:Los artculos de la wikipedia presentan la siguiente URL:

http://es.wikipedia.org/wiki/{trmino}, teniendo en cuenta las tildes, de manera que el artculo correspondiente a la fruta limn ser:http://es.wikipedia.org/wiki/limn, puedes construir una tabla con dos columnas, en la primera muestras el nombre del alimento y en la segunda el enlace a lawikipedia

Ejercicio 2.Enriquece los enlaces del ejercicio anterior con cajas modales.

Consejo:Las pobres interfaces HTML de las aplicaciones web pueden enriquecerse gracias al uso de javascript en la parte del cliente. En este ejercicio sepropone al estudiante que convierta los enlaces del ejercicio anterior de manera que cuando se pique en ellos el enlace aparezca en una ventana situada encima de lapgina que muestra los enlaces, es decir, en una ventana modal. Esto se consigue utilizando javascript. Vamos a esbozar una posible solucin que te ayude a realizarel ejercicio:

Descarga las siguientes libreras javascript:
http://es.wikipedia.org/wikihttp://es.wikipedia.org/wiki


13/13

jquery, http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.jscolorbox, http://colorpowered.com/colorbox/colorbox.zip

El siguiente cdigo convierte todos los enlaces cuya clase (atributo class del elemento HTML) sea cajamodal:

$(document).ready(function(){

$(".cajamodal").colorbox(); }); Para que dicho ejemplo funcione, el documento HTML debe incluir las libreras jquery-1.3.2.min.js y colorbox.js (en ese orden). Adem

http://colorpowered.com/colorbox/core/example1/index.html

Tu tarea consiste en ubicar en los lugares que corresponda las libreras y el cdigo anterior para que los enlaces a los artculos de la wikipedia del ejercicio anterior sevean en caja modal.

Ejercicio 3Aade al listado de alimentos del ejercicio 1 una columna ms donde ubicars un enlace que proporcione un archivo XML con los datos del alimento.

Consejo:Un posible formato para el fichero XML que esta funcionalidad debe entregar como respuesta puede ser (atencin, cualquier parecido con los datosdietticos reales de este ejemplo es pura casualidad) :

limn 100 150 45 24 10

Adems, para enviar como respuesta un XML en lugar del HTML, puedes utilizar la funcin header() de PHP en la propia accin que implemente esta funcionalidad,y terminar dicha accin con un exit, de manera que no se utilice la plantilla ni el layout que dan lugar al HTML. Mira la documentacin de la funcin header() en elsitio web de PHP. Tambin podras mejorar el sistema de la vista, agregando la posibilidad de utilizar, adems del HTML, un layout XML. Esta ltima solucin esms elegante pero ms compleja de implementar (no mucho ms compleja).

Ejercicio 4Para terminar el tema explica brevemente las ventajas que tu ves en la organizacin del cdigo segn el patrn MVC.

[1] Patrones de Diseo de los autores Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides (conocidos como The Gun of Four) es un clsico en la

literatura sobre este tema.

[2] http://en.wikipedia.org/wiki/Separation_of_concerns

[3] En el caso deApacheconPHP, que es el que nos interesa en este curso, el servidor debe estar configurado adecuadamente para que se puedan incluir archivos

PHPque estn fuera delDocument root*. Esto se hace con la directiva open_basedir .

[4] http://es.wikipedia.org/wiki/Decorator_%28patr%C3%B3n_de_dise%C3%B1o%29

Desarrollo de Aplicaciones web con symfony 1.4 por Juan David Rodrguez Garca ([email protected])

se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://es.wikipedia.org/wiki/Decorator_%28patr%C3%B3n_de_dise%C3%B1o%29http://-/?-http://-/?-http://en.wikipedia.org/wiki/Separation_of_concernshttp://-/?-http://-/?-http://colorpowered.com/colorbox/colorbox.ziphttp://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Documents

Unidad 2_ Desarrollo de una aplicación web siguiendo el patrón MVC.pdf