13-Aplicando el Patrón MVC – Parte 1: Estructura y Primeras Vistas

 Aplicando el Patrón MVC – Parte 1: Estructura y Primeras Vistas

En este tutorial, comenzaremos a construir una pequeña aplicación web utilizando el patrón de diseño Modelo-Vista-Controlador (MVC) . Nuestro objetivo inicial será organizar el proyecto y lograr que el usuario vea una página HTML (la vista) a través de un controlador, todo gestionado por un archivo central (index.php).

Paso 1: Creando la Estructura de Carpetas

Lo primero es organizar nuestro proyecto. MVC se basa en la separación de responsabilidades, por lo que crearemos una carpeta principal y, dentro de ella, tres subcarpetas para cada capa.

  1. Crea una carpeta principal para tu proyecto. En este ejemplo, la llamaremos 0.8 MVC .

  2. Dentro de 0.8 MVC, crea las siguientes subcarpetas:

    • controllers: Aquí vivirán los archivos que manejan las peticiones del usuario y la lógica de la aplicación.

    • models: (Aunque no lo usaremos en esta parte) Aquí residirá la lógica de negocio y la interacción con la base de datos.

    • views: Aquí guardaremos las plantillas y archivos que construyen la interfaz de usuario (lo que el usuario ve).

La estructura de tu proyecto debería verse así:

text
0.8 MVC/
├── controllers/
├── models/
└── views/

Paso 2: El Punto de Entrada (index.php)

Todo proyecto web tiene un punto de entrada único, el archivo que se carga cuando un usuario escribe nuestra URL. Este archivo se llama comúnmente index.php y estará ubicado en la raíz de nuestro proyecto, es decir, fuera de las tres carpetas que acabamos de crear.

0.8 MVC/index.php

Este archivo será muy sencillo. Su misión es:

  1. Incluir el archivo del controlador principal.

  2. Crear un objeto de ese controlador.

  3. Ejecutar un método de ese controlador que se encargará de mostrar la página.

php
<?php

# EL INDEX: En él mostraremos la salida de las vistas al usuario
# y a través de él enviaremos las distintas acciones que el usuario envíe.

require_once "controllers/controller.php";

$mvc = new MvcController();
$mvc -> plantilla();

?>

Paso 3: Creando la Vista Principal (template.php)

Ahora, pasemos a la capa de las Vistas. Necesitamos una plantilla base que contenga la estructura HTML que el usuario verá. Dentro de la carpeta views, crearemos un archivo llamado template.php.

0.8 MVC/views/template.php

Aquí colocaremos nuestro código HTML. Por ahora, será algo muy simple: un encabezado, un menú de navegación y una sección de contenido.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio MVC</title>
</head>
<body>
    <header>
        <h1>LOGOTIPO</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contáctenos</a></li>
        </ul>
    </nav>

    <section>
        <h1>PÁGINA DE INICIO</h1>
    </section>

</body>
</html>

Paso 4: El Controlador que Orquesta (controller.php)

Necesitamos un "director de orquesta" que conecte la petición del index.php con la vista template.php. Para eso, crearemos nuestro primer controlador dentro de la carpeta controllers.

0.8 MVC/controllers/controller.php

Este archivo contendrá una clase PHP con un método específico para llamar a la plantilla.

php
<?php

class MvcController{

    public function plantilla(){
        // La función 'include' incorpora y ejecuta el archivo especificado.
        // Aquí le decimos que incluya el archivo template.php de la carpeta views.
        include "views/template.php";
    }

}

?>

Paso 5: El Flujo de la Aplicación

Ahora que tenemos todos los archivos, veamos cómo funciona el flujo cuando un usuario accede a nuestro sitio:

  1. El usuario escribe la URL y el servidor web ejecuta el archivo index.php.

  2. El index.php carga el controlador (controllers/controller.php) usando require_once.

  3. Se crea un objeto de la clase MvcController y se llama a su método plantilla().

  4. El método plantilla() ejecuta include "views/template.php".

  5. include lee y ejecuta el contenido de template.php, que es nuestro código HTML.

  6. El navegador del usuario recibe el HTML resultante y lo muestra.

La Magia del include vs. echo

Un detalle crucial aquí es el uso de include. Si en nuestro controlador, en lugar de include, hubiéramos usado echo de la siguiente manera:

php
// Código INCORRECTO para este caso
public function plantilla(){
    echo "views/template.php";
}

Al actualizar nuestra página, el navegador no mostraría el HTML con el logotipo, el menú y el contenido. Simplemente mostraría el texto literal: views/template.php.

include le dice a PHP: "Toma el contenido de este archivo e insértalo aquí como si fuera parte del código". Por eso funciona para incluir plantillas HTML.

echo (o print) le dice a PHP: "Toma este texto y envíalo al navegador".

Comprobando el Resultado

Si has seguido todos los pasos, al abrir tu navegador y acceder a la carpeta 0.8 MVC (a través de un servidor local como XAMPP, WAMP o similar), verás tu página con el logotipo, el menú y el texto "PÁGINA DE INICIO".

Lo más interesante ocurre si inspeccionas el código fuente de la página en tu navegador (clic derecho -> "Ver código fuente" o "Inspeccionar"). Verás únicamente el código HTML limpio de template.php. ¡No verás ni una sola línea de PHP! Esto es porque el PHP se ejecutó en el servidor y lo único que se envió al navegador fue el resultado final (HTML).

Conclusión

Hemos dado el primer paso para implementar el patrón MVC. Hemos separado la lógica de presentación (la vista template.php) de la lógica de control (el controlador controller.php) y establecimos un punto de entrada único (index.php). En la Parte 2, empezaremos a integrar los Modelos para manejar datos dinámicos y a crear diferentes vistas que nuestro controlador pueda gestionar.

Comentarios

Publicar un comentario

Entradas más populares de este blog

¿Qué es un token y cómo se utiliza en una API?

  ¿Qué es un token y cómo se utiliza en una API? ¿Qué es un token? Un  token  es una cadena de caracteres que actúa como credencial de acceso para autenticar y autorizar a un usuario o aplicación en una API. Funciona como una "llave digital" que permite acceder a recursos protegidos sin necesidad de compartir credenciales sensibles como usuario y contraseña en cada solicitud. Tipos comunes de tokens: JWT (JSON Web Token) : Token auto-contenido con información codificada Access Token : Para acceso a recursos Refresh Token : Para renovar access tokens expirados API Key : Clave simple de identificación Ejemplo con PHP usando JWT 1. Instalación de dependencias bash composer require firebase/php-jwt 2. Generar un token JWT php <?php require 'vendor/autoload.php' ; use Firebase \ JWT \ JWT ; use Firebase \ JWT \ Key ; class TokenManager { private $secretKey = "tu_clave_secreta_muy_segura" ; private $algorithm = 'HS256' ; ...
Leer más

token

  ¿Qué es un token? Un  token  es una cadena de caracteres que representa información específica, como credenciales de acceso, identificadores únicos o datos de sesión. Se utilizan comúnmente en: Autenticación y autorización (JWT, tokens de acceso) Protección CSRF (Cross-Site Request Forgery) Identificación única de recursos Contraseñas de un solo uso Ejemplo pequeño en PHP: Token de autenticación simple php <?php // Función para generar un token aleatorio function generarToken ( $longitud = 32 ) { return bin2hex ( random_bytes ( $longitud ) ) ; } // Generar un token $token = generarToken ( ) ; echo "Token generado: " . $token . "\n\n" ; // Simular verificación del token (en una aplicación real se guardaría en base de datos) function verificarToken ( $tokenAlmacenado , $tokenRecibido ) { return hash_equals ( $tokenAlmacenado , $tokenRecibido ) ; } // Ejemplo de uso $tokenAlmacenado = $token ; // En la práctica, esto ven...
Leer más

Generación de Credenciales API

   Generación de Credenciales API Método 1: Credenciales básicas (API Key + Secret) php <?php // Generar credenciales seguras function generarCredencialesAPI ( ) { $api_key = bin2hex ( random_bytes ( 32 ) ) ; // 64 caracteres hexadecimales $api_secret = bin2hex ( random_bytes ( 64 ) ) ; // 128 caracteres hexadecimales return [ 'api_key' => $api_key , 'api_secret' => password_hash ( $api_secret , PASSWORD_DEFAULT ) ] ; } // Generar y guardar credenciales $credenciales = generarCredencialesAPI ( ) ; // Guardar en base de datos (ejemplo) // INSERT INTO api_credentials (api_key, api_secret_hash, created_at) // VALUES (:api_key, :api_secret, NOW()) ?> Método 2: Credenciales JWT php <?php use Firebase \ JWT \ JWT ; use Firebase \ JWT \ Key ; class JWTCredentials { private $secret_key ; public function __construct ( ) { $this -> secret_key = bin2hex ( r...
Leer más