Ejemplo de proyecto basico con MVC - eliizquierdo/material_programacion_avanzada2026 GitHub Wiki

Introducción

El resultado final de este proyecto es visualizar un formulario en el navegador web que permita ingresar datos de personas, guardarlos en una lista (en memoria RAM) y mostrar la lista en una tabla, de la que se pueda editar y eliminar registros.

Para ello se utilizarán JSP para la vista y Servlets para el controlador.

Qué vamos a lograr (vista general y MVC)

Modelo (M)

Vamos a utilizar PersonaVO y PersonaDAO para representar datos y operaciones en memoria. Mantendremos un contrato simple (agregar, getLista) que nos permitirá migrar a JDBC más adelante sin cambiar vistas ni controlador.

Vista (V)

Vamos a diseñar tres JSP dentro de webapp/:

  • index.jsp (inicio y navegación)
  • WEB-INF/vista/persona-form.jsp (formulario de alta)
  • WEB-INF/vista/persona-lista.jsp (listado)

Usaremos baseURL para construir rutas robustas y vamos a limitar la lógica en las vistas a impresión de datos y enlaces.

Controlador (C)

Vamos a centralizar la navegación en el Servlet PersonaControladorServlet, anotado con @WebServlet("/persona"). Este controlador recibirá el parámetro action y decidirá el flujo:

  • action=form → forward a WEB-INF/vista/persona-form.jsp
  • action=listar o sin action → obtiene datos del DAO y hace forward a WEB-INF/vista/persona-lista.jsp
  • action=agregar (POST) → crea PersonaVO, llama a PersonaDAO.agregar(...) y aplicará PRG con sendRedirect hacia /persona para mostrar el listado actualizado

Creación de la Estructura del Proyecto

PASO 1: Crear el Proyecto

Creamos el proyecto como ya hemos visto anteriormente usando VS Code.

PASO 2: Completar la estructura y crear carpetas, packages y archivos

La estructura básica de un proyecto Maven creada con maven-archetype-webapp incluye:

  • Un archivo pom.xml válido
  • La estructura de carpetas básica
mi-proyecto/
├── pom.xml
├── src/
│   └── main/
│       └── webapp/
│           ├── index.jsp
│           └── WEB-INF/
│               └── web.xml
└── target/          (generado al compilar)

Para convertirlo en un proyecto con patrón MVC se agrega:

EJEMPLO-MVC/
├── pom.xml
├── src/
│   └── main/
│       ├── java/                              ← NUEVO: código Java
│       │   ├── controlador/
│       │   │   └── PersonaControladorServlet.java
│       │   └── modelo/
│       │       ├── dao/
│       │       │   └── PersonaDAO.java
│       │       └── vo/
│       │           └── PersonaVO.java
│       └── webapp/
│           ├── index.jsp
│           ├── css/                           ← NUEVO: estilos
│           │   └── styles.css
│           └── WEB-INF/
│               ├── web.xml
│               └── vista/                     ← NUEVO: JSP de la vista
│                   ├── persona-form.jsp
│                   └── persona-lista.jsp
└── target/          (generado por Maven, no modificar)

Estructura de carpetas a agregar:

  1. Carpeta java dentro de la carpeta main existente
    • Para ello hacer clic derecho sobre main y elegir la opción New Folder del menú contextual
  2. En la carpeta java agregar las carpetas:
    • modelo.vo
    • modelo.dao
    • controlador
  3. En la carpeta webapp agregar las carpetas:
    • css (opcional si agrega estilos)
    • WEB-INF/vista

💡 Nota: Algunas de estas carpetas serán luego packages, pero eso se hace desde el código declarándose como tal.

No crear un Main.java, ya no se usará. En lugar de eso, se crearán Servlets o JSPs.

PASO 3: Estructura del Proyecto MVC

Una vez creadas las carpetas y packages, agregar las clases de Java y los archivos JSP y CSS.

Estructura final del proyecto:

Archivos del Proyecto

1. PersonaVO.java (Value Object)

Clase que representa la entidad Persona con sus atributos código y nombre.

2. PersonaDAO.java (Data Access Object)

Clase que maneja las operaciones CRUD en memoria para las personas:

  • agregar(PersonaVO p): Agrega una persona a la lista
  • getLista(): Retorna la lista completa de personas
  • eliminar(int codigo): Elimina una persona por código
  • actualizar(PersonaVO p): Actualiza una persona existente
  • obtenerXCodigo(int cod): Obtiene una persona por código

3. PersonaControladorServlet.java

Servlet principal que maneja las peticiones HTTP:

  • GET: Maneja la visualización de formularios y listados
  • POST: Procesa el envío de datos del formulario

4. persona-form.jsp

JSP que contiene el formulario para agregar nuevas personas con campos para código y nombre.

5. persona-lista.jsp

JSP que muestra la tabla con todas las personas registradas, incluyendo botones para editar y eliminar (actualmente deshabilitados).

6. styles.css

Archivo de estilos CSS que proporciona el diseño visual para:

  • Formularios con layout en grid
  • Tablas responsivas
  • Botones con diferentes variantes (primario, secundario, editar, eliminar)
  • Contenedores y tipografías

Características del Proyecto

  • Patrón MVC bien definido
  • Responsive design con CSS Grid y Flexbox
  • Gestión de rutas robusta con baseURL
  • Patrón PRG (Post-Redirect-Get) para evitar reenvíos accidentales
  • Validación de formularios
  • Estilos consistentes y profesionales
  • Preparado para migrar a base de datos JDBC sin cambios en vista ni controlador

Continuamos por la página de inicio VISTA-index

📋 Palabras clave

MVC · PersonaVO · PersonaDAO · PersonaControladorServlet · JSP · CRUD · ArrayList · baseURL · patrón PRG · formulario · lista de personas · estructura de proyecto

🧠 Autoevaluación — Mini-CRUD con MVC

← ¿Qué es el MVC? · 🏠 Inicio · VISTA: index →