6. Validating the input form

 

Validación de Formularios en PHP

📚 Tema del Tutorial:

"Validación de Datos: Protegiendo tu Aplicación PHP de Entradas Incorrectas"

---

🎯 Objetivo de Aprendizaje

Al final de este tutorial entenderás:

• Cómo validar formularios en el lado del servidor

• Qué son las variables superglobales en PHP

• Cómo manejar archivos subidos por usuarios

• Cómo mostrar mensajes de error apropiados

• Por qué la validación es crucial para la seguridad

---

📂 Parte 1: ¿Por qué Validar Formularios?

La Importancia de la Validación

Imagina tu aplicación web como un restaurante:

• Usuario = Cliente que hace un pedido

• Formulario = Menú donde el cliente escribe su pedido

• Validación = El chef que revisa si el pedido es posible

Sin validación:

text

Cliente pide: "Quiero un pastel de luna"

Chef: "Aquí tienes" (pero no tiene ingredientes) ❌

Con validación:

text

Cliente pide: "Quiero un pastel de luna"

Chef: "Lo siento, solo tenemos pastel de chocolate" ✅

Dos tipos de validación:

1. ✅ Validación Frontend (JavaScript):

• Rápida, en el navegador

• Mejora experiencia de usuario

• NO es segura (se puede desactivar)

2. ✅ Validación Backend (PHP):

• En el servidor

• Obligatoria para seguridad

• Última línea de defensa

Analogía:

text

Frontend = Guardia en la entrada (amable pero evitable)

Backend = Policía dentro del banco (definitiva y segura)

---

🔍 Parte 2: Las Variables Superglobales de PHP

¿Qué son las Superglobales?

Son variables especiales de PHP que están SIEMPRE disponibles, como cámaras de seguridad en tu aplicación:

text

$_POST     → 📝 Lo que el usuario ESCRIBE en formularios

$_GET      → 🔗 Lo que viene en la URL (parámetros)

$_FILES    → 📤 Archivos que el usuario SUBE

$_SERVER   → 🖥️ Información del servidor

$_SESSION  → 🧠 Memoria temporal del usuario

Enfoque en $_SERVER y $_FILES:

$_SERVER - El "carnet de identidad" de la petición:

php

$_SERVER['REQUEST_METHOD'] = 'POST' // ¿Cómo vino la petición?

$_SERVER['REMOTE_ADDR'] = '192.168.1.1' // IP del usuario

$_SERVER['HTTP_USER_AGENT'] = 'Chrome' // Navegador usado

$_FILES - El "paquete" de archivos:

php

$_FILES['file']['name'] = 'video.mp4'    // Nombre original

$_FILES['file']['type'] = 'video/mp4'    // Tipo MIME

$_FILES['file']['size'] = 1024000        // Tamaño en bytes

$_FILES['file']['tmp_name'] = '/tmp/xyz' // Ubicación temporal

$_FILES['file']['error'] = 0             // Código de error

---

🛠️ Parte 3: Creando init.php - El "Centro de Control"

Paso 1: Crear init.php

Este archivo es como el cuarto de control de tu aplicación:

php

// backend/init.php

<?php

// Cargar las "herramientas" necesarias

require 'classes/DB.php';      // 📦 Herramienta para base de datos

require 'classes/Whisper.php'; // 🎤 Herramienta para procesar audio

// Crear una instancia de Whisper lista para usar

$whisperObj = new Whisper;

?>

Analogía:

text

init.php = Maletín de herramientas del fontanero

require = Sacar las herramientas

$whisperObj = Herramienta principal lista para usar

Paso 2: Incluir init.php en index.php

php

// index.php (al inicio del archivo)

<?php

include 'backend/init.php'; // ← ¡Trae todo el cuarto de control!

?>

Esquema visual:

text

📄 index.php (página principal)

│

├── 📦 Incluye: backend/init.php

│   │

│   ├── 🔧 Carga: classes/DB.php

│   │

│   └── 🎤 Crea: $whisperObj (objeto listo)

│

└── 🎨 HTML (interfaz visual)

---

🚦 Parte 4: Validando el Método de la Petición

Paso 3: Verificar el Método HTTP

Los métodos HTTP más comunes:

• GET = Pedir información (como preguntar "¿Qué hay de comer?")

• POST = Enviar información (como decir "Quiero una pizza")

Código para verificar:

php

if($_SERVER['REQUEST_METHOD'] === "POST"){

    // Esto se ejecuta SOLO si es una petición POST

    echo "¡Alguien está enviando datos!";

}

Explicación detallada:

php

if(                           // SI

    $_SERVER                  // en la información del servidor

    ['REQUEST_METHOD']        // el método de petición

    ===                       // ES EXACTAMENTE IGUAL A

    "POST"                    // "POST"

){                            // ENTONCES haz lo siguiente...

Diagrama de flujo:

text

[📨 Usuario envía formulario]

        ↓

[🤔 PHP pregunta: ¿Método = POST?]

        │

        ├── SI → ✅ Procesa los datos

        │

        └── NO → ⏭️ Salta al HTML (primera visita)

---

📋 Parte 5: Validando que se Subió un Archivo

Paso 4: Verificar si $_FILES está configurado

isset() - El "detector de presencia":

php

if(isset($_FILES['file'])){

    // ¡Hay un archivo en la petición!

}

empty() - El "detector de contenido":

php

if(!empty($_FILES['file']['name'][0])){

    // ¡Y tiene un nombre! (no está vacío)

}

Combinando ambos:

php

if(isset($_FILES['file']) && !empty($_FILES['file']['name'][0])){

    // ✅ Archivo presente y con nombre

} else {

    // ❌ Error: No hay archivo válido

    $error = "Por favor selecciona un archivo para convertir a texto";

}

Analogía del correo:

text

isset() = ¿Hay un paquete en la mesa de correos?

empty() = ¿El paquete tiene algo dentro?

Combinado = ¿Hay un paquete NO vacío en la mesa?

Paso 5: Obteniendo el Tipo de Archivo

php

$fileType = $_FILES['file']['type'];

// Ejemplo: 'video/mp4', 'audio/mpeg', 'image/png'

Por qué es importante saber el tipo:

• Seguridad: Evita que suban archivos maliciosos

• Compatibilidad: Asegura que tu aplicación pueda procesarlo

• Base de datos: Guardar información correcta

Ejemplo de tipos MIME comunes:

text

🎥 Video: video/mp4, video/mpeg, video/avi

🎵 Audio: audio/mpeg, audio/wav, audio/ogg

🖼️ Imagen: image/jpeg, image/png, image/gif

📄 Documento: application/pdf, text/plain

---

🚨 Parte 6: Mostrando Mensajes de Error

Paso 6: Estructura de Mensajes de Error

HTML para mostrar errores (en index.php):

html

<!-- ERROR DIV -->

<?php if(isset($error)): ?>    

    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">

        <strong class="font-bold">Error:</strong>

        <span class="block sm:inline"><?php echo $error; ?></span>

    </div>

<?php endif; ?>

Desglose visual del mensaje de error:

text

🔴 CONTENEDOR ROJO (bg-red-100)

├── 🚫 BORDE ROJO (border-red-400)

├── 📝 TEXTO ROJO (text-red-700)

├── 🔠 ENCABEZADO: <strong>Error:</strong>

└── 📄 MENSAJE: <?php echo $error; ?>

Paso 7: Lógica Condicional PHP/HTML

Sintaxis alternativa PHP/HTML:

php

<?php if($condicion): ?>

    <!-- HTML a mostrar si la condición es TRUE -->

<?php else: ?>

    <!-- HTML a mostrar si la condición es FALSE -->

<?php endif; ?>

Ventajas de esta sintaxis:

• Más legible cuando hay mucho HTML

• Mejor organización del código

• Fácil de entender para principiantes

---

🧩 Parte 7: Código Completo Explicado

Código final de validación:

php

<?php

include 'backend/init.php'; // 1️⃣ Cargar herramientas

if($_SERVER['REQUEST_METHOD'] === "POST"){ // 2️⃣ ¿Es POST?

    

    if(isset($_FILES['file'])){ // 3️⃣ ¿Hay archivo en la petición?

        

        if(!empty($_FILES['file']['name'][0])){ // 4️⃣ ¿Tiene nombre?

            

            $fileType = $_FILES['file']['type']; // 5️⃣ Obtener tipo

            var_dump($fileType); // Mostrar para depurar

            

            // Aquí procesaremos el archivo después...

            

        } else {

            $error = "Por favor selecciona un archivo para convertir a texto";

        }

        

    } else {

        $error = "Por favor selecciona un archivo para convertir a texto";

    }

}

?>

Diagrama de validación paso a paso:

text

[👤 Usuario envía formulario]

        ↓

[1️⃣ ¿REQUEST_METHOD === "POST"?]

        ↓ SI

[2️⃣ ¿isset($_FILES['file'])?]

        ↓ SI  

[3️⃣ ¿!empty($_FILES['file']['name'][0])?]

        │

        ├── SI → ✅ $fileType = tipo

        │        ✅ Continuar procesamiento

        │

        └── NO → ❌ $error = "Selecciona archivo"

---

🔧 Parte 8: Ejercicio Práctico - Validación Extendida

Ejercicio 1: Validar Formulario de Contacto

HTML del formulario:

html

<form method="post">

    <input type="text" name="nombre" placeholder="Tu nombre">

    <input type="email" name="email" placeholder="Tu email">

    <textarea name="mensaje" placeholder="Tu mensaje"></textarea>

    <button type="submit">Enviar</button>

</form>

PHP de validación para practicar:

php

<?php

$errores = [];

if($_SERVER['REQUEST_METHOD'] === "POST"){

    

    // Validar nombre

    if(empty($_POST['nombre'])){

        $errores[] = "El nombre es obligatorio";

    } elseif(strlen($_POST['nombre']) < 2){

        $errores[] = "El nombre debe tener al menos 2 caracteres";

    }

    

    // Validar email

    if(empty($_POST['email'])){

        $errores[] = "El email es obligatorio";

    } elseif(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){

        $errores[] = "El email no es válido";

    }

    

    // Validar mensaje

    if(empty($_POST['mensaje'])){

        $errores[] = "El mensaje es obligatorio";

    }

    

    // Si no hay errores, procesar

    if(empty($errores)){

        echo "¡Formulario enviado correctamente!";

    }

}

?>

Ejercicio 2: Mostrar Múltiples Errores

php

<?php if(!empty($errores)): ?>

    <div class="errores">

        <h3>Errores encontrados:</h3>

        <ul>

            <?php foreach($errores as $error): ?>

                <li><?php echo $error; ?></li>

            <?php endforeach; ?>

        </ul>

    </div>

<?php endif; ?>

---

🛡️ Parte 9: Seguridad - ¿Por qué Validar en el Servidor?

Principales Amenazas sin Validación:

1. 📤 Inyección de Archivos Maliciosos:

• Usuario sube archivo .exe con virus

• Sin validación: Se sube y puede infectar

• Con validación: Se rechaza (no es audio/video)

2. 💾 Ataques de Desbordamiento:

• Usuario sube archivo de 10GB

• Sin validación: Llena el servidor

• Con validación: Se rechaza (límite de tamaño)

3. 🔄 Cross-Site Scripting (XSS):

• Usuario sube archivo con código malicioso

• Sin validación: Ejecuta código peligroso

• Con validación: Sanitiza el contenido

Reglas de Oro para Validación Segura:

1. ❌ Nunca confíes en datos del usuario

2. ✅ Valida TODO en el servidor

3. 📏 Establece límites claros (tamaño, tipo)

4. 🔒 Sanitiza los datos antes de procesar

5. 📝 Registra intentos sospechosos

---

🧪 Parte 10: Depuración - var_dump() y Desarrollo

Usando var_dump() para Depurar:

¿Qué hace var_dump()?
Muestra información detallada de una variable, como una radiografía:

php

$fileType = $_FILES['file']['type'];

var_dump($fileType);

// Salida: string(9) "video/mp4"

Interpretación:

• string = Tipo de dato (cadena de texto)

• (9) = Longitud (9 caracteres)

• "video/mp4" = Valor real

Otros métodos de depuración:

php

print_r($_FILES);        // Muestra array de forma legible

echo $variable;          // Muestra valor simple

error_log($mensaje);     // Guarda en logs del servidor

---

📊 Parte 11: Esquema Visual del Proceso Completo

text

🌐 FLUJO COMPLETO DE VALIDACIÓN

[👤 USUARIO]

     ↓ (selecciona archivo + envía)

[🌐 NAVEGADOR]

     ↓ (envía POST + archivo)

[🖥️ SERVIDOR - index.php]

     │

     ├── 1️⃣ include 'backend/init.php'

     │       ↓

     │    [🔧 Carga DB.php + Whisper.php]

     │       ↓

     │    [🎤 Crea $whisperObj]

     │

     ├── 2️⃣ if($_SERVER['REQUEST_METHOD'] === "POST")

     │       │

     │       ├── NO → ⏭️ Salta a HTML

     │       │

     │       └── SI → 3️⃣ if(isset($_FILES['file']))

     │                 │

     │                 ├── NO → 🚨 $error = "Selecciona archivo"

     │                 │

     │                 └── SI → 4️⃣ if(!empty($_FILES['file']['name'][0]))

     │                           │

     │                           ├── NO → 🚨 $error = "Selecciona archivo"

     │                           │

     │                           └── SI → ✅ $fileType = tipo

     │                                   ✅ Continuar procesamiento

     │

     └── 🎨 Mostrar HTML (con o sin error)

---

❓ Parte 12: Cuestionario de Evaluación

Pregunta 1:

¿Cuál es la principal razón para validar formularios en PHP (backend) además de JavaScript?
a) Para que la página cargue más rápido
b) Porque JavaScript puede ser desactivado por el usuario ✅
c) Para usar menos código
d) Porque PHP es más moderno

Explicación: La validación en backend es obligatoria por seguridad, ya que el usuario puede desactivar JavaScript.

Pregunta 2:

¿Qué hace exactamente esta condición en PHP?

php

if($_SERVER['REQUEST_METHOD'] === "POST")

a) Verifica si hoy es día festivo
b) Comprueba si la petición vino por método POST ✅
c) Valida el tipo de archivo subido
d) Revisa la conexión a internet

Pregunta 3:

¿Cuál es la diferencia entre isset() y empty()?
a) isset() verifica si existe, empty() si tiene valor ✅
b) isset() es para números, empty() para texto
c) isset() es más rápido que empty()
d) No hay diferencia, son iguales

Pregunta 4:

¿Qué información contiene $_FILES['file']['type']?
a) El tamaño del archivo en bytes
b) El tipo MIME del archivo (ej: video/mp4) ✅
c) La fecha de creación del archivo
d) El nombre original del archivo

Pregunta 5:

¿Para qué sirve el archivo init.php en nuestro proyecto?
a) Para almacenar imágenes del sitio
b) Para cargar configuraciones y crear objetos ✅
c) Para contener los estilos CSS
d) Para validar formularios automáticamente

---

Pregunta 6:

En esta línea, ¿qué representa [0]?

php

!empty($_FILES['file']['name'][0])

a) El primer carácter del nombre
b) El primer archivo si se suben múltiples ✅
c) Un valor por defecto
d) Un índice de base de datos

Respuesta correcta: b) Cuando se permiten múltiples archivos, [0] es el primero.

Pregunta 7:

¿Por qué es importante validar el tipo MIME de un archivo subido?
a) Para organizarlos alfabéticamente
b) Por seguridad y compatibilidad ✅
c) Para reducir el tamaño del archivo
d) Para cambiarle el nombre automáticamente

---

🏆 Resumen Final - Reglas de Validación

Las 5 Reglas de Oro de la Validación PHP:

1. 🔒 Siempre valida en el servidor - JavaScript es solo para experiencia

2. 📋 Verifica el método - Asegúrate de recibir POST para formularios

3. 📦 Usa isset() y empty() - Primero existe, luego tiene contenido

4. 🎯 Específica qué esperas - Define tipos, tamaños y formatos permitidos

5. 🚨 Informa claramente - Mensajes de error comprensibles para el usuario

Checklist de Validación para tu Proyecto:

✅ Archivo init.php creado en backend/
✅ Incluido init.php en index.php
✅ Verificado método REQUEST_METHOD === "POST"
✅ Comprobado isset($_FILES['file'])
✅ Verificado !empty($_FILES['file']['name'][0])
✅ Obtenido tipo de archivo $fileType
✅ Mensajes de error implementados
✅ Probado con archivo válido
✅ Probado sin archivo (debe mostrar error)

---

🚀 Próximos Pasos y Mejoras

Para tu proyecto actual:

1. Añadir validación de tamaño máximo

2. Validar extensiones específicas (.mp4, .mp3, .wav)

3. Sanitizar nombres de archivo

4. Mover archivos a carpeta segura

Ejemplo de validación mejorada:

php

// Validar tamaño (máximo 20MB)

if($_FILES['file']['size'] > 20000000){

    $error = "El archivo es muy grande (máximo 20MB)";

}

// Validar extensiones permitidas

$extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));

$permitidas = ['mp4', 'mp3', 'wav', 'mpeg'];

if(!in_array($extension, $permitidas)){

    $error = "Tipo de archivo no permitido";

}

---

📚 Recursos para Aprender Más

Funciones PHP importantes para validación:

• filter_var() - Filtra y valida datos

• htmlspecialchars() - Previene XSS

• strip_tags() - Elimina etiquetas HTML

• preg_match() - Validación con expresiones regulares

• move_uploaded_file() - Mueve archivos subidos de forma segura

Proyectos para practicar:

1. Formulario de registro con validación completa

2. Sistema de subida de imágenes con miniaturas

3. Blog con comentarios validados

4. Carrito de compras con validación de cantidades

¡Excelente trabajo! 🎉 Has aprendido la base de la validación segura en PHP. Recuerda: un formulario sin validación es como una casa sin puertas. ¡La seguridad primero!

---

💡 Consejo final:
Cuando desarrolles:

1. Piensa como atacante - ¿Cómo rompería mi formulario?

2. Prueba casos extremos - Archivos enormes, tipos raros, nombres extraños

3. Registra intentos fallidos - Para mejorar y detectar ataques

4. Mantente actualizado - La seguridad web evoluciona constantemente

🔒 ¡Ahora tu formulario es mucho más seguro! En la próxima lección procesaremos realmente los archivos validados