Programación Web ITI-07

Práctica: Mini Sistema Web Universitario - Primer Backend


Mini Sistema Web Universitario – Primer Backend

Después de haber comprendido el concepto de programación del lado del servidor, el proceso de atención de solicitudes y las arquitecturas cliente-servidor, es momento de aplicar estos fundamentos en un escenario práctico.

En esta actividad desarrollarás un pequeño sistema web funcional que simula procesos reales de un entorno universitario.

🎯 Objetivo

Que el alumno implemente un mini sistema web aplicando:

  • Procesamiento de solicitudes
  • Manejo de sesiones
  • Manejo de archivos
  • Conectividad con base de datos
  • Validación y seguridad básica
  • Comprensión del flujo cliente-servidor

🏫 Escenario

La universidad necesita un sistema básico donde los alumnos puedan:

  • Iniciar sesión
  • Subir una tarea en formato PDF
  • Visualizar sus tareas enviadas
  • Cerrar sesión

El sistema será desarrollado utilizando:

  • HTML + CSS (lado del cliente)
  • PHP (lado del servidor)
  • MySQL (base de datos)

🏗️ Arquitectura del sistema

Este proyecto utiliza una arquitectura cliente-servidor tradicional:

  1. El navegador envía una solicitud (request).
  2. El servidor procesa la información.
  3. El servidor consulta la base de datos si es necesario.
  4. El servidor devuelve una respuesta (response).
  5. El navegador muestra el resultado al usuario.

📁 Estructura sugerida del proyecto

/mini-sistema/

├── index.php
├── dashboard.php
├── upload.php
├── logout.php

├── /uploads/
└── /config/
└── conexion.php

🗄️ Base de Datos

Tabla: usuarios

CampoTipo
idINT (PK)
usuarioVARCHAR
passwordVARCHAR

Tabla: tareas

CampoTipo
idINT (PK)
usuario_idINT (FK)
nombre_archivoVARCHAR
fechaDATETIME

🧩 Parte 1 – Sistema de Login (Sesiones)

Requisitos

  • Crear formulario de inicio de sesión
  • Validar usuario y contraseña contra la base de datos
  • Iniciar sesión con $_SESSION
  • Redirigir a dashboard.php
  • Proteger el dashboard si no existe sesión activa

Conceptos aplicados

  • Manejo de sesiones
  • Validación del lado del servidor
  • Seguridad
  • Comunicación con base de datos

🧩 Parte 2 – Subida de Archivos (Manejo de archivos)

En el dashboard deberá existir:

  • Un formulario para subir tareas en PDF
  • Guardado del archivo en la carpeta /uploads
  • Registro del archivo en la base de datos

Validaciones obligatorias

  • Solo archivos PDF
  • Tamaño máximo 5MB
  • Usuario autenticado
  • Sanitización básica del nombre del archivo

Conceptos aplicados

  • Manejo de archivos con $_FILES
  • Validación del lado del servidor
  • Seguridad
  • Persistencia de datos

🧩 Parte 3 – Visualización de tareas

En el dashboard se deberá:

  • Mostrar lista de tareas enviadas por el usuario autenticado
  • Permitir descarga del archivo
  • Filtrar resultados por usuario

Conceptos aplicados

  • Consultas SQL
  • Control de acceso
  • Protección de datos
  • Separación de responsabilidades

🔐 Reglas de Seguridad Mínimas

  • No confiar en datos enviados desde formularios
  • Validar todo del lado del servidor
  • Usar consultas preparadas (prepared statements)
  • No permitir acceso directo a archivos sin autenticación
  • Cerrar sesión correctamente

🔄 Análisis del Flujo Cliente-Servidor

En el documento final deberás explicar:

  1. ¿Qué ocurre cuando se envía el formulario de login?
  2. ¿Qué ocurre cuando se sube un archivo?
  3. ¿Dónde ocurre cada proceso?
  4. ¿Qué papel juega la base de datos?
  5. ¿Por qué el navegador no puede realizar estas tareas por sí solo?

📄 Producto a Entregar

  1. Carpeta del proyecto funcionando

  2. Script SQL de la base de datos

  3. Documento PDF que incluya:

    • Capturas del sistema funcionando
    • Explicación del flujo cliente-servidor
    • Identificación de:
      • Manejo de sesiones
      • Manejo de archivos
      • Conectividad con base de datos
      • Seguridad aplicada
    • Conclusión (mínimo 8 líneas)

🧠 Reflexión Final

Responde en tu conclusión:

  • ¿Por qué la programación del lado del servidor es indispensable?
  • ¿Qué pasaría si todo se hiciera solo con JavaScript en el navegador?
  • ¿Qué riesgos de seguridad existirían?

🧪 Nivel Extra (Opcional)

Para alumnos que quieran profundizar:

  • Implementar password_hash() y password_verify()
  • Agregar validación contra inyección SQL
  • Generar un endpoint que devuelva las tareas en formato JSON
  • Implementar control de tipo de usuario (admin / alumno)

🚀 Cierre

Esta práctica representa el primer paso hacia el desarrollo de sistemas web completos.
Aquí comienza el verdadero trabajo del backend.

Comprender lo que sucede en el servidor te permitirá construir aplicaciones seguras, organizadas y profesionales.

En la siguiente unidad comenzaremos a estructurar proyectos de manera más robusta.