Unidad 4: Patrón MVC

4.2 Diagrama del patrón MVC

4.2.1 Diagrama de flujo básico

Para que los estudiantes comprendan mejor cómo interactúan los diferentes componentes del patrón MVC, es útil mostrar un diagrama de flujo que ilustre cómo los Modelos, Vistas y Controladores se comunican entre sí. Usaremos Mermaid para crear un diagrama sencillo pero efectivo.

A continuación, te proporciono un diagrama básico que ilustra el flujo de información dentro de una aplicación MVC.

Diagrama:

graph TD
    A[Usuario] --> B[Controlador]
    B --> C[Modelo]
    C --> D[Base de datos]
    B --> E[Vista]
    E --> A

Explicación del Diagrama:

1. El usuario interactúa con la Vista:

2. La Vista puede ser un formulario HTML, una tabla de empleados, o cualquier otra interfaz de usuario.

3. El Controlador recibe la acción del usuario:

4. El Controlador es el encargado de procesar las solicitudes que realiza el usuario en la Vista. Por ejemplo, si el usuario hace clic en un botón de "Editar", el Controlador recibe esa acción.

5. El Controlador consulta al Modelo:

6. El Controlador envía una solicitud al Modelo para obtener o actualizar los datos. Por ejemplo, si el usuario quiere ver los detalles de un empleado, el Controlador consulta al Modelo para obtener esa información.

7. El Modelo interactúa con la Base de datos:

8. El Modelo es responsable de gestionar los datos de la aplicación. Puede ser una clase que maneja la conexión a la base de datos y ejecuta consultas SQL para obtener o modificar la información.

9. El Controlador actualiza la Vista:

10. Después de obtener o actualizar los datos, el Controlador pasa los datos a la Vista para que se muestren al usuario. Por ejemplo, si el Controlador actualizó la información de un empleado, lo reflejará en la Vista.

11. La Vista presenta los datos al Usuario:

12. Finalmente, la Vista muestra los datos al usuario, ya sea en un formulario, una tabla o cualquier otro formato visual.

---

4.2.2 Ejemplo práctico con un diagrama

Vamos a usar un ejemplo de aplicación CRUD de empleados para ilustrar cómo funciona el patrón MVC en la práctica.

Diagrama de flujo con ejemplo de aplicación CRUD:

graph TD
    A[Usuario] --> B[Controlador]
    B --> C[Modelo]
    C --> D[Base de datos]
    B --> E[Vista]
    E --> A
    subgraph Modelo
        C1[Consultar empleados]
        C2[Crear empleado]
        C3[Editar empleado]
        C4[Eliminar empleado]
    end
    subgraph Vista
        E1[Formulario de empleados]
        E2[Lista de empleados]
    end
    A --> E1
    E1 --> B
    B --> C1
    B --> C2
    B --> C3
    B --> C4
    C1 --> E2
    C2 --> E2
    C3 --> E2
    C4 --> E2

Explicación del Diagrama:

1. El usuario interactúa con la Vista:

2. Al principio, el usuario ve una lista de empleados y puede editar, agregar o eliminar empleados.

3. El Controlador recibe las solicitudes del usuario:

4. Si el usuario quiere ver la lista de empleados, el Controlador llama al Modelo para consultar los empleados.

5. Si el usuario agrega, edita o elimina un empleado, el Controlador envía la solicitud correspondiente al Modelo.

6. El Modelo interactúa con la Base de datos:

7. El Modelo realiza las consultas necesarias en la base de datos para recuperar o modificar la información de los empleados.

8. La Vista muestra la información al usuario:

9. Después de que el Controlador haya recibido los datos del Modelo, actualiza la Vista para que los cambios se reflejen en la interfaz de usuario.
10. Si el usuario agrega, edita o elimina un empleado, la lista de empleados en la Vista se actualiza.

---

Resumen:

1. Diagrama de flujo básico de MVC:

2. Este diagrama muestra cómo interactúan los tres componentes principales de MVC: Modelo, Vista y Controlador.

3. Diagrama con ejemplo práctico:

4. Utilizamos un ejemplo CRUD de empleados para ilustrar cómo funciona el patrón MVC en una aplicación real.

5. Flujo de datos:

6. El usuario interactúa con la Vista, el Controlador procesa la solicitud y solicita datos al Modelo, que interactúa con la Base de datos. Finalmente, el Controlador actualiza la Vista para mostrar los resultados.

---