Módulo 6: Conceptos de Desarrollo Web

Patrón MVC

Lección 29 de 33 del Curso Roadmap Learning Laravel

Duración: 1 hora
Nivel: Principiante (requiere conocimientos de HTML, CSS, JavaScript, PHP básico, MySQL, SQL básico, y protocolo HTTP)
Objetivo: Comprender el patrón MVC (Modelo, Vista, Controlador), cómo organiza el código en aplicaciones web, y aplicarlo en una estructura simple, como preparación para frameworks como Laravel.
Materiales necesarios:

Computadora con:
- XAMPP, WAMP, o MAMP (para ejecutar PHP y MySQL, descarga gratuita desde sus sitios oficiales).
- Editor de texto (recomendado: VS Code, descarga gratuita desde code.visualstudio.com).
- Navegador web (Chrome, Firefox, etc.) con herramientas de desarrollo (DevTools, accesible con F12).
- Papel y lápiz para diagramas o notas.
Acceso a internet (para la tarea o referencias).
Contexto: El patrón MVC organiza el código de forma modular, separando la lógica de negocio, la presentación y el control de flujo. Es fundamental en frameworks como Laravel y se conecta con los conceptos de los módulos previos (formularios PHP en Módulo 4, bases de datos en Módulo 5, HTTP en Módulo 6). Esta lección introduce MVC para estructurar aplicaciones web de manera eficiente.

Introducción al patrón MVC (15 minutos)

Explicación:
El patrón MVC (Modelo-Vista-Controlador) es un diseño arquitectónico que organiza el código en tres componentes para separar responsabilidades, facilitando el mantenimiento y escalabilidad de aplicaciones web.

Componentes del MVC:

Modelo:
- Representa los datos y la lógica de negocio.
- Interactúa con la base de datos (por ejemplo, consultas SQL del Módulo 5).
- Ejemplo: Una clase PHP que gestiona usuarios en MySQL (crear, leer, actualizar, eliminar).
Vista:
- Representa la interfaz de usuario (UI).
- Muestra datos al usuario (HTML, CSS, JavaScript del Módulo 2 y 3).
- Ejemplo: Un formulario HTML para mostrar o ingresar datos.
Controlador:
- Actúa como intermediario entre Modelo y Vista.
- Maneja las solicitudes del usuario (por ejemplo, solicitudes HTTP POST del Módulo 6).
- Procesa datos del Modelo y los pasa a la Vista.
- Ejemplo: Un script PHP que recibe datos de un formulario, los envía al Modelo y devuelve una Vista.

Cómo funciona MVC:

El usuario envía una solicitud HTTP (por ejemplo, POST al enviar un formulario).
El Controlador recibe la solicitud, interactúa con el Modelo para procesar datos (por ejemplo, guardar en la base de datos).
El Modelo devuelve los datos procesados al Controlador.
El Controlador selecciona una Vista y le pasa los datos para mostrar al usuario.

Ventajas de MVC:

Separación de responsabilidades: Facilita modificar una parte sin afectar otras.
Mantenimiento: Código más organizado y reutilizable.
Escalabilidad: Ideal para proyectos grandes, como en Laravel.

Por qué es importante:

En el Módulo 4, mezclaste HTML, PHP y SQL en un solo archivo (por ejemplo, formularios). MVC organiza esto en capas.
Frameworks como Laravel usan MVC para estructurar aplicaciones (por ejemplo, modelos Eloquent, vistas Blade, controladores).

Punto clave: MVC divide la lógica, presentación y control, mejorando la organización del código.

Actividad rápida (3 minutos):
Escribe en papel un componente de MVC y su función.

Ejemplo:
- Componente: Modelo.
- Función: Gestiona datos y consultas a la base de datos.

Cómo organiza el código en MVC (15 minutos)

Explicación:
MVC organiza el código en carpetas y archivos separados para cada componente, promoviendo modularidad.

Estructura típica:

/proyecto
  /models       # Archivos PHP para Modelos (lógica de datos)
  /views        # Archivos HTML/PHP para Vistas (interfaz)
  /controllers  # Archivos PHP para Controladores (lógica de control)
  index.php     # Punto de entrada, maneja solicitudes
  config.php    # Configuración (por ejemplo, conexión a la base de datos)

Flujo de una solicitud en MVC:

Paso 1: El usuario accede a una URL (por ejemplo, http://localhost/index.php?route=mostrar_usuarios, solicitud GET).
Paso 2: index.php interpreta la solicitud y llama al Controlador correspondiente (por ejemplo, UsuarioController).
Paso 3: El Controlador interactúa con el Modelo (por ejemplo, UsuarioModel) para obtener datos de la base de datos.
Paso 4: El Controlador pasa los datos a una Vista (por ejemplo, usuarios_view.php) para mostrarlos.

Ejemplo conceptual:

Aplicación: Lista de usuarios desde una base de datos (similar al proyecto del Módulo 5).
Modelo (models/UsuarioModel.php):
- Consulta SQL: SELECT * FROM usuarios.
Vista (views/usuarios_view.php):
- HTML para mostrar una tabla de usuarios.
Controlador (controllers/UsuarioController.php):
- Recibe la solicitud, llama al Modelo, pasa datos a la Vista.

Cómo se relaciona con módulos previos:

Modelo: Usa SQL del Módulo 5 (por ejemplo, INSERT, SELECT).
Vista: Usa HTML/CSS del Módulo 2 y JavaScript del Módulo 3.
Controlador: Usa PHP del Módulo 4 y maneja solicitudes HTTP del Módulo 6.

Punto clave: MVC organiza el código en capas, facilitando el desarrollo y mantenimiento.

Actividad rápida (3 minutos):
Dibuja en papel la estructura de carpetas de un proyecto MVC.

Ejemplo:

/proyecto
  /models
  /views
  /controllers
  index.php

Ejemplo práctico: Estructura MVC en una aplicación simple (20 minutos)

Explicación:
Creemos una aplicación simple para listar usuarios desde una base de datos, estructurada con MVC. La aplicación mostrará una lista de nombres y correos de la tabla usuarios (similar al Módulo 5).

Escenario:

Base de datos: app_usuarios con una tabla usuarios (creada en Módulo 5).

CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE
);
INSERT INTO usuarios (nombre, email) VALUES 
    ('Ana López', 'ana@correo.com'),
    ('Juan Pérez', 'juan@correo.com');

Funcionalidad: Mostrar una lista de usuarios en una página web (solicitud GET).

Estructura MVC:

/mvc_app
  /models
    UsuarioModel.php
  /views
    usuarios_view.php
  /controllers
    UsuarioController.php
  index.php
  config.php

Código del ejemplo:

Configuración (config.php):

Conexión a la base de datos (MySQL).

<?php
$host = 'localhost';
$usuario = 'root';
$contrasena = ''; // Vacío en XAMPP por defecto
$base_datos = 'app_usuarios';

$conexion = new mysqli($host, $usuario, $contrasena, $base_datos);
if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
}
?>

Modelo (models/UsuarioModel.php):

Gestiona la lógica de datos (consulta a la base de datos).

<?php
class UsuarioModel {
    private $conexion;

    public function __construct($conexion) {
        $this->conexion = $conexion;
    }

    public function obtenerUsuarios() {
        $query = "SELECT nombre, email FROM usuarios";
        $resultado = $this->conexion->query($query);
        $usuarios = [];
        while ($fila = $resultado->fetch_assoc()) {
            $usuarios[] = $fila;
        }
        return $usuarios;
    }
}
?>

Controlador (controllers/UsuarioController.php):

Maneja la solicitud y conecta Modelo y Vista.

<?php
require_once 'models/UsuarioModel.php';

class UsuarioController {
    private $modelo;

    public function __construct($conexion) {
        $this->modelo = new UsuarioModel($conexion);
    }

    public function mostrarUsuarios() {
        $usuarios = $this->modelo->obtenerUsuarios();
        require 'views/usuarios_view.php';
    }
}
?>

Vista (views/usuarios_view.php):

Muestra los datos en HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista de Usuarios</title>
    <style>
        table { border-collapse: collapse; width: 50%; }
        th, td { border: 1px solid black; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>Usuarios</h2>
    <table>
        <tr><th>Nombre</th><th>Email</th></tr>
        <?php foreach ($usuarios as $usuario): ?>
            <tr>
                <td><?php echo htmlspecialchars($usuario['nombre']); ?></td>
                <td><?php echo htmlspecialchars($usuario['email']); ?></td>
            </tr>
        <?php endforeach; ?>
    </table>
</body>
</html>

Punto de entrada (index.php):

Interpreta la solicitud y llama al Controlador.

<?php
require_once 'config.php';
require_once 'controllers/UsuarioController.php';

$controlador = new UsuarioController($conexion);
$controlador->mostrarUsuarios();
?>

Cómo probarlo:

Crea la base de datos app_usuarios y la tabla usuarios en phpMyAdmin (o CLI).
Inserta los datos de prueba (SQL proporcionado).
Guarda los archivos en C:\xampp\htdocs\mvc_app.
Inicia XAMPP (Apache y MySQL).
Abre http://localhost/mvc_app/index.php en el navegador.
Resultado esperado: Una tabla HTML con los usuarios (Ana López, Juan Pérez).
Usa Chrome DevTools (F12, pestaña “Red”) para verificar:
- Solicitud GET a index.php.
- Código de estado: 200 OK.

Flujo MVC en este ejemplo:

Solicitud: GET a http://localhost/mvc_app/index.php.
Controlador: UsuarioController recibe la solicitud y llama a UsuarioModel.
Modelo: UsuarioModel ejecuta SELECT y devuelve los usuarios.
Vista: usuarios_view.php muestra los datos en una tabla HTML.

Por qué es importante:

Este ejemplo organiza el código del Módulo 4 (formularios PHP) en capas MVC.
Prepara para Laravel, donde usarás modelos, vistas y controladores similares.

Punto clave: MVC estructura el código de forma clara, dividiendo responsabilidades.

Actividad rápida (3 minutos):
Escribe en papel qué archivo pertenece a cada componente MVC en este ejemplo.

Ejemplo:
- Modelo: UsuarioModel.php.
- Vista: usuarios_view.php.
- Controlador: UsuarioController.php.

Resumen y preparación para la tarea (10 minutos)

Resumen:

MVC: Patrón que divide el código en:
- Modelo: Lógica de datos (base de datos, SQL).
- Vista: Interfaz de usuario (HTML, CSS).
- Controlador: Manejo de solicitudes (PHP, HTTP).
Organización: Carpetas separadas (models, views, controllers).
Ejemplo: Aplicación para listar usuarios usando MVC.
Beneficio: Código modular, fácil de mantener y escalar.

Preparación para la tarea:
La tarea pide diseñar una aplicación PHP con carpetas para modelos, vistas y controladores.

Estrategia:
- Crea una estructura de carpetas similar al ejemplo.
- Define una aplicación simple (por ejemplo, gestionar tareas, como en Módulo 5).
- Especifica archivos para cada componente (Modelo, Vista, Controlador).
Lógica básica:
- Modelo: Clase PHP para interactuar con la base de datos.
- Vista: Archivo HTML/PHP para mostrar datos.
- Controlador: Clase PHP que conecta Modelo y Vista.
- Archivos: index.php como entrada, config.php para la base de datos.

Punto clave: Diseñar con MVC prepara para frameworks modernos y mejora la organización.

Tarea práctica: Diseña una aplicación PHP con carpetas para modelos, vistas y controladores

Instrucciones:

Diseña una aplicación PHP simple estructurada con el patrón MVC.
- Tema sugerido: Gestión de tareas (basado en el proyecto del Módulo 5), pero puedes elegir otro (por ejemplo, lista de productos).
- Funcionalidad mínima: Mostrar una lista de tareas (o recursos) desde una base de datos.
Crea una estructura de carpetas con:
- /models: Para el Modelo (por ejemplo, TareaModel.php).
- /views: Para la Vista (por ejemplo, tareas_view.php).
- /controllers: Para el Controlador (por ejemplo, TareaController.php).
- index.php: Punto de entrada.
- config.php: Conexión a la base de datos.
Especifica:
- Base de datos: Nombre y tabla(s) necesarias (por ejemplo, app_tareas con tabla tareas).
- Modelo: Qué hace (por ejemplo, consultar tareas).
- Vista: Qué muestra (por ejemplo, tabla HTML de tareas).
- Controlador: Qué maneja (por ejemplo, solicitud GET para listar tareas).
Entregable:
- Un archivo de texto o documento (tarea_mvc.txt o .docx) con:
  - Descripción de la aplicación (qué hace).
  - Estructura de carpetas y archivos (listado).
  - SQL para la base de datos (por ejemplo, CREATE TABLE).
  - Breve descripción de cada componente (Modelo, Vista, Controlador).
- Opcional: Código PHP/HTML inicial para cada archivo (similar al ejemplo).
- Opcional: Diagrama de la estructura (captura o descripción).

Ejemplo de guía:

Tarea: Aplicación MVC para gestionar tareas

Descripción: Una aplicación PHP que lista tareas desde una base de datos.

Estructura:
/tareas_app
  /models
    TareaModel.php
  /views
    tareas_view.php
  /controllers
    TareaController.php
  index.php
  config.php

Base de datos:
CREATE DATABASE app_tareas;
CREATE TABLE tareas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    titulo VARCHAR(200) NOT NULL,
    descripcion TEXT
);

Componentes:
- Modelo (TareaModel.php): Consulta tareas con SELECT.
- Vista (tareas_view.php): Muestra tareas en una tabla HTML.
- Controlador (TareaController.php): Maneja la solicitud GET y pasa datos a la Vista.

Pasos para completar:
- Paso 1: Define la aplicación (por ejemplo, listar tareas).
- Paso 2: Diseña la estructura de carpetas y archivos.
- Paso 3: Crea el SQL para la base de datos.
- Paso 4: Describe cada componente (Modelo, Vista, Controlador).
- Paso 5: Escribe el entregable en un archivo de texto o documento.
- Paso 6: Opcional: Implementa el código y pruébalo en XAMPP.

Ejemplo de solución esperada:

Archivo (tarea_mvc.txt):

Tarea: Aplicación MVC para gestionar tareas

Descripción: Una aplicación PHP que muestra una lista de tareas almacenadas en una base de datos.

Estructura de carpetas:
/tareas_app
  /models
    TareaModel.php
  /views
    tareas_view.php
  /controllers
    TareaController.php
  index.php
  config.php

Base de datos:
CREATE DATABASE app_tareas;
CREATE TABLE tareas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    titulo VARCHAR(200) NOT NULL,
    descripcion TEXT
);

Componentes:
- Modelo (TareaModel.php): Ejecuta una consulta SELECT para obtener todas las tareas.
- Vista (tareas_view.php): Muestra las tareas en una tabla HTML con columnas para título y descripción.
- Controlador (TareaController.php): Recibe la solicitud GET, obtiene datos del Modelo y los pasa a la Vista.

Tiempo estimado: 45-60 minutos (puedes hacerlo después de la lección).
Entregable:

Archivo de texto o documento con la descripción, estructura, SQL y componentes.
Opcional: Código inicial o diagrama.

Consejo:

Usa el ejemplo de la lección como referencia para la estructura.
Mantén la base de datos simple (una tabla es suficiente).
Si implementas el código, prueba en XAMPP y verifica con DevTools (solicitud GET, código 200).

Siguiente lección: Configuración de entornos locales