• Author / Uploaded
• Pharry Garcia

Citation preview

---

Introducción al modelo MVC Por: Ing. Pedro García Guerrero Verificamos que este en ejecución los servidores apache y postgresql (usaremos bitnami WAPP) e iniciamos sesión en la página de http://127.0.0.1/php pgadmin/ user= postgres clave = ????

Primero debemos tener la tabla libros en la base de datos postgres:

Definimos los campos

1|Página

Abrimos una ventana de SQL, para ejecutar 4 comandos INSERT y tener la tabla con datos:

En el directorio público del servidor web creamos la carpeta biblioteca, quedando la siguiente ruta: C:\Bitnami\wappstack-5.6.30-0\apache2\htdocs\biblioteca Dentro de este directorio crearemos todos nuestros archivos. El siguiente programa se conecta a una base de datos, extrae información y la muestra en la página. index.php



Listado de Libros

Listado de Libros

ID	Titulo	Disponibles

2|Página



La salida será:

El script anterior tiene las siguientes desventajas:   

No existe protección frente a errores (¿qué ocurre si falla la conexión con la base de datos?). El código HTML y el código PHP están mezclados en el mismo archivo e incluso en algunas partes están entrelazados. El código solo funciona si la base de datos es postgreSQL. Diagrama:

Internet

index.php

postgreSQL postgres.libros

3|Página

Separando la presentación El código va a ser dividido en dos partes. En primer lugar, el código PHP puro con toda la lógica de negocio se incluye en el script del controlador, como se muestra en el listado: Index2.php





Una buena regla general para determinar si la parte de la vista está suficientemente limpia de código es que debería contener una cantidad mínima de código PHP, la suficiente como para que un diseñador HTML sin conocimientos de PHP pueda entenderla. Las instrucciones más comunes en la parte de la vista suelen ser echo, if / endif, foreach / endforeach y poco más. Además, no se deben incluir instrucciones PHP que generen etiquetas HTML. 4|Página

Toda la lógica se ha centralizado en el script del controlador, que solamente contiene código PHP y ningún tipo de HTML. De hecho, y como puedes imaginar, el mismo controlador se puede reutilizar para otros tipos de presentaciones completamente diferentes, como por ejemplo un archivo PDF o una estructura de tipo XML. Diagrama:

Internet

postgreSQL index2.php postgres.libro

vista.php

5|Página

Separando la manipulación de los datos ¿Qué ocurre si cambia el modelo de datos y la tabla artículo pasa a llamarse libros? ¿Y si se quiere cambiar a Oracle en vez de PostgreSQL? Para poder hacer todo esto, es imprescindible eliminar del controlador todo el código que se encarga de la manipulación de los datos y ponerlo en otro script, llamado el modelo, tal y como se muestra: modelo.php

El controlador modificado se puede ver a continuación: index3.php

Ahora el controlador es mucho más fácil de leer. Su única tarea es la de obtener los datos del modelo y pasárselos a la vista. En las aplicaciones más complejas, el controlador se encarga además de procesar las peticiones, las sesiones de los usuarios, la autenticación, etc. El script del modelo solamente se encarga del acceso a los datos y puede ser reorganizado a tal efecto.

6|Página

Todos los parámetros que no dependen de la capa de datos (como por ejemplo los parámetros de la petición del usuario) se deben obtener a través del controlador y por tanto, no se puede acceder a ellos directamente desde el modelo. Las funciones del modelo se pueden reutilizar fácilmente en otros controladores. Diagrama:

modelo.php

postgreSQL postgres.libro

Internet

index3.php

Este es el famoso controlador!

vista.php

Conclusión: MVC (Modelo-Vista-Controlador) El principio más importante de la arquitectura MVC es la separación del código del programa en tres capas, dependiendo de su naturaleza:  La lógica relacionada con los datos se incluye en el MODELO,  el código de la presentación en la VISTA y  la lógica de la aplicación en el CONTROLADOR.

7|Página

Separación en capas más allá del MVC La programación se puede simplificar si se utilizan otros patrones de diseño. De esta forma, las capas del modelo, la vista y el controlador se pueden subdividir en más capas. Patrones de Diseño. "Cada patrón describe un problema que ocurre infinidad de veces en nuestro entorno, así como la solución al mismo, de tal modo que podemos utilizar esta solución un millón de veces más adelante sin tener que volver a pensarla otra vez."

Abstracción de la base de datos La capa del modelo se puede dividir en la capa de acceso a los datos y en la capa de abstracción de la base de datos. Objetivo: Independizar sentencias y consultas del DBMS. Ventaja: Si cambia de DBMS, solamente actualiza la capa de abstracción de la base de datos. Ejemplo de capa de acceso a datos específica para MySQL: conector_mysql.php

Ejemplo de capa de abstracción de la base de datos: modelo2.php

9|Página

Y modificamos ligeramente el index… Index4.php

Diagrama:

Conector postgreSQL postgresql.php postgres.libro

modelo2.php Internet

Index4.php

vista.php

10 | P á g i n a

Los elementos de la vista Las páginas web suelen contener elementos que se muestran de forma idéntica a lo largo de toda la aplicación:  cabeceras de la página,  el layout genérico,  el pie de página y  la navegación global. Normalmente sólo cambia el interior de la página. Por este motivo, la vista se separa en un layout y en un contenido. Normalmente, el layout es global en toda la aplicación o al menos en un grupo de páginas. El contenido sólo se encarga de visualizar las variables definidas en el controlador. Para que estos componentes interaccionen entre sí correctamente, es necesario añadir cierto código. Siguiendo estos principios, la parte de la vista se puede separar en tres partes:  Contenido (contenido.php)  Lógica de la vista (lógica_vista.php)  Layout (layout.php) A continuación se muestra el código: contenido.php Listado de Libros (Mi plantilla)

ID	Titulo	Disponibles

lógica_vista.php

11 | P á g i n a

layout.php





Introducción al MVC. ITSLP 2017
Por: Ing. Pedro García Guerrero



Y nuevamente modificamos ligeramente el index… Index5.php

Y obtenemos:

12 | P á g i n a

Diagrama:

conector_ mysql.php

postgreSQL postgres.libro s

modelo2.php

Internet

index5.php logica_vista.php

layout.php

contenido.php

13 | P á g i n a

Mejorando la vista usando un framework CSS (Bulma) Usaremos hojas de estilo para mejorar la apariencia de la página, pero para hacerlo con poco esfuerzo se pueden usar librerías CSS de terceros como:  Bootstrap  Pure  Mini  Bulma En este caso usaremos Bulma (bulma.io):

A continuación se muestra el código en cada uno de los archivos para incluir los cambios de estilo: contenido2.php Listado de Libros (Mi plantilla)

ID	Titulo	Disponibles

14 | P á g i n a

Layout2.php

Introducción al MVC.
ITSLP 2017
Por: Ing. Pedro García Guerrero

15 | P á g i n a

Y nuevamente modificamos ligeramente el index… Index6.php

Finalmente obtenemos:

16 | P á g i n a

Diagrama:

conector_ mysql.php

postgreSQL postgres.libro s

modelo2.php

Internet

index5.php logica_vista.php

layout.php

contenido.php

Framework CSS BULMA

17 | P á g i n a