MI PRIMER MVC

TUTORIAL SUPER SENCILLO: "MI PRIMER MVC"

馃幆 ¿Qu茅 es MVC?

Imagina un restaurante:

  • Modelo = La cocina (donde est谩n los ingredientes)

  • Vista = El men煤 y la mesa (lo que ve el cliente)

  • Controlador = El mesero (conecta al cliente con la cocina)

馃摑 Paso a Paso de Nuestro C贸digo:

PASO 1: El MODELO (La Cocina)

php
class UsuarioModelo {
    public function obtenerUsuario() {
        return "Sa煤l Sotelo";  // El ingrediente (dato)
    }
}

✅ El modelo solo guarda y obtiene datos. No sabe c贸mo mostrarlos.

PASO 2: El CONTROLADOR (El Mesero)

php
class UsuarioControlador {
    private $modelo;  // El mesero conoce la cocina
    
    public function __construct() {
        $this->modelo = new UsuarioModelo();  // Conecta con la cocina
    }
    
    public function mostrarUsuario() {
        return $this->modelo->obtenerUsuario();  // Pide el dato a la cocina
    }
}

✅ El controlador conecta todo. Le pide datos al modelo y se los da a la vista.

PASO 3: La VISTA (El Cliente ve la mesa)

php
<?php
$jefe = new UsuarioControlador();  // Llamar al mesero
$nombre = $jefe->mostrarUsuario();  // Pedirle el dato
echo $nombre;  // Ver el dato en la mesa
?>

✅ La vista solo muestra. Usa PHP para mostrar lo que el controlador le da.

馃攧 El Flujo Completo:

text
1. El usuario abre la p谩gina (VISTA)
2. La vista crea un controlador: $jefe = new UsuarioControlador()
3. El controlador crea un modelo en su constructor
4. La vista pide datos: $jefe->mostrarUsuario()
5. El controlador pide al modelo: $this->modelo->obtenerUsuario()
6. El modelo devuelve el dato
7. El controlador devuelve el dato a la vista
8. La vista muestra: <?php echo $nombre; ?>

⭐ Ejercicios para Practicar:

  1. Agrega m谩s datos: Modifica el modelo para tener apellido, email, etc.

  2. Agrega m茅todos: Crea en el modelo obtenerEmail() y mu茅stralo.

  3. Haz una lista: Cambia el modelo para devolver un array de usuarios.

馃帹 Ejemplo de Lista (para practicar):

php
// En el MODELO
public function obtenerTodos() {
    return ["Ana", "Carlos", "Mar铆a", "Sa煤l"];
}

// En el CONTROLADOR
public function mostrarTodos() {
    return $this->modelo->obtenerTodos();
}

// En la VISTA
$usuarios = $jefe->mostrarTodos();
foreach($usuarios as $usuario) {
    echo "<li>$usuario</li>";
}

馃挕 Tips Importantes:

  • El modelo NO sabe que existe el controlador

  • El controlador conecta todo

  • La vista SOLO muestra, no calcula

  • Usa nombres claros: UsuarioModelo, UsuarioControlador

 Te ayudo a crear un tutorial super sencillo para entender MVC. Primero, corrijo el c贸digo y luego te explico paso a paso:

馃搧 C贸digo Corregido (todo en un archivo)

php
<?php
// =============================================
// MODELO - Maneja los datos
// =============================================
class UsuarioModelo {
    
    // Obtener un usuario
    public function obtenerUsuario() {
        $usuario = "Sa煤l Sotelo";
        return $usuario;
    }
    
    // M茅todo adicional para practicar
    public function obtenerEdad() {
        return 25;
    }
}

// =============================================
// CONTROLADOR - Conecta Modelo y Vista
// =============================================
class UsuarioControlador {
    
    private $modelo;  // Propiedad para guardar el modelo
    
    // Constructor: se ejecuta autom谩licamente al crear el objeto
    public function __construct() {
        $this->modelo = new UsuarioModelo();  // Crear instancia del modelo
    }
    
    // M茅todo para obtener usuario
    public function mostrarUsuario() {
        $usuario = $this->modelo->obtenerUsuario();  // Usar el modelo
        return $usuario;
    }
    
    // M茅todo para obtener edad
    public function mostrarEdad() {
        return $this->modelo->obtenerEdad();
    }
}

// =============================================
// VISTA - HTML con PHP
// =============================================
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer MVC</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .tarjeta {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="tarjeta">
                    <h1 class="text-center text-primary mb-4">馃幆 Mi Primer MVC</h1>
                    
                    <?php
                    // 1. Crear controlador (el "jefe" que organiza todo)
                    $jefe = new UsuarioControlador();
                    
                    // 2. Pedir datos al controlador
                    $nombre = $jefe->mostrarUsuario();
                    $edad = $jefe->mostrarEdad();
                    ?>
                    
                    <!-- 3. Mostrar los datos -->
                    <div class="text-center">
                        <h3>馃搶 Datos del Usuario</h3>
                        <p class="display-6"><?php echo $nombre; ?></p>
                        <p class="lead">Edad: <?php echo $edad; ?> a帽os</p>
                        
                        <div class="alert alert-info mt-4">
                            <strong>¿C贸mo funciona?</strong><br>
                            Vista → Controlador → Modelo → Controlador → Vista
                        </div>
                    </div>
                    
                    <!-- Botones de ejemplo -->
                    <div class="d-flex justify-content-center gap-2 mt-4">
                        <button class="btn btn-primary" onclick="location.reload()">
                            馃攧 Actualizar
                        </button>
                        <a href="#" class="btn btn-outline-secondary">
                            馃摑 Editar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 ¿Constructor s铆 o constructor no?
Sin constructor (tu ejemplo):
php
class ControladorUsuarios {
    public function ctrObtenerUsuarios() {
        return ModeloUsuarios::obtenerUsuarios();  // Llamada est谩tica
    }
}
✅ M谩s simple de entender
✅ Menos c贸digo
✅ Ideal para empezar
Con constructor (mi ejemplo anterior):
php
class UsuarioControlador {
    private $modelo;
    public function __construct() {
        $this->modelo = new UsuarioModelo();  // Crear modelo
    }
}
✅ Mejor para proyectos grandes
✅ M谩s flexible
✅ Sigue mejores pr谩cticas
Aqu铆 tienes el primer ejercicio simplificado SIN CONSTRUCTOR:
php
<?php
// =============================================
// MODELO - Datos de usuarios
// =============================================
class UsuarioModelo {
    
    // M茅todo est谩tico - f谩cil de llamar sin crear objeto del modelo
    public static function obtenerUsuario() {
        return "Sa煤l Sotelo";
    }
    
    public static function obtenerEdad() {
        return 25;
    }
}

// =============================================
// CONTROLADOR - Conecta modelo y vista
// =============================================
class UsuarioControlador {
    
    // M茅todos que llaman directamente al modelo (sin constructor)
    public function mostrarUsuario() {
        return UsuarioModelo::obtenerUsuario();  // Llamada est谩tica
    }
    
    public function mostrarEdad() {
        return UsuarioModelo::obtenerEdad();  // Llamada est谩tica
    }
}

// =============================================
// VISTA - HTML con PHP
// =============================================
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer MVC (sin constructor)</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .tarjeta-simple {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .explicacion {
            background: #f8f9fa;
            border-left: 4px solid #28a745;
            padding: 15px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 mx-auto">
                
                <!-- Tarjeta Principal -->
                <div class="tarjeta-simple text-center">
                    <h1 class="mb-4">馃幆 MVC S脷PER SIMPLE</h1>
                    <h2 class="display-4">馃懁 Datos del Usuario</h2>
                    
                    <?php
                    // PASO 1: Crear el controlador (el "jefe")
                    $controlador = new UsuarioControlador();
                    
                    // PASO 2: Pedir datos al controlador (sin constructor)
                    $nombre = $controlador->mostrarUsuario();
                    $edad = $controlador->mostrarEdad();
                    ?>
                    
                    <!-- PASO 3: Mostrar los datos -->
                    <div class="mt-4">
                        <p class="display-6"><?php echo $nombre; ?></p>
                        <p class="lead">Edad: <?php echo $edad; ?> a帽os</p>
                        
                        <!-- Decoraci贸n -->
                        <div class="mt-3">
                            <span class="badge bg-light text-dark p-2">Modelo</span>
                            <span class="text-white mx-2">→</span>
                            <span class="badge bg-light text-dark p-2">Controlador</span>
                            <span class="text-white mx-2">→</span>
                            <span class="badge bg-light text-dark p-2">Vista</span>
                        </div>
                    </div>
                </div>
                
                <!-- Explicaci贸n Simple -->
                <div class="explicacion mt-4">
                    <h4 class="text-success">✅ As铆 funciona (sin constructor):</h4>
                    <ol class="list-group list-group-flush bg-transparent">
                        <li class="list-group-item bg-transparent">
                            <strong>1. El Modelo</strong> guarda el dato: "Sa煤l Sotelo"
                        </li>
                        <li class="list-group-item bg-transparent">
                            <strong>2. El Controlador</strong> lo pide: <code>UsuarioModelo::obtenerUsuario()</code>
                        </li>
                        <li class="list-group-item bg-transparent">
                            <strong>3. La Vista</strong> lo muestra: <code>&lt;?php echo $nombre; ?&gt;</code>
                        </li>
                    </ol>
                </div>
                
                <!-- C贸digo explicado -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-primary text-white">
                                馃搧 MODELO (Datos)
                            </div>
                            <div class="card-body">
                                <pre class="mb-0"><code>class UsuarioModelo {
    // static = se usa sin crear objeto
    static function obtenerUsuario() {
        return "Sa煤l Sotelo";
    }
}</code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-success text-white">
                                馃幃 CONTROLADOR (Conexi贸n)
                            </div>
                            <div class="card-body">
                                <pre class="mb-0"><code>class UsuarioControlador {
    function mostrarUsuario() {
        // Llama directo al modelo
        return UsuarioModelo::obtenerUsuario();
    }
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Botones de acci贸n -->
                <div class="text-center mt-4">
                    <a href="#" class="btn btn-primary btn-lg" onclick="location.reload()">
                        馃攧 Actualizar
                    </a>
                    <a href="#" class="btn btn-outline-secondary btn-lg">
                        馃搵 Ver c贸digo
                    </a>
                </div>
                
                <!-- Mensaje clave -->
                <div class="alert alert-success mt-4 text-center">
                    <strong>馃幆 ¡AS脥 DE SIMPLE!</strong><br>
                    El controlador llama al modelo con <code>::</code> (sin necesidad de constructor)
                </div>
                
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
馃摑 Las diferencias clave (para que lo expliques):
❌ Con constructor (m谩s complejo):
php
class Controlador {
    private $modelo;
    public function __construct() {
        $this->modelo = new Modelo();  // Paso extra
    }
    public function mostrar() {
        return $this->modelo->get();  // M谩s c贸digo
    }
}
✅ Sin constructor (m谩s simple):
php
class Controlador {
    public function mostrar() {
        return Modelo::get();  // Directo y claro
    }
}
馃幆 Para tus alumnos:
  • static significa "puedo usar esto sin crear un objeto"
  • :: se llama "operador de resoluci贸n de 谩mbito" (pero diles "dos puntos para llamar al modelo")
  • El controlador es solo un "traductor" entre los datos y lo que se ve

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

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

¿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

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