Vista index - eliizquierdo/material_programacion_avanzada2026 GitHub Wiki

📦 Proyecto: mini-crud0 (Fase 1) — ⬇️ Descargar ZIP · ☁️ Abrir en Codespace

Comencemos por analizar la capa VISTA, siguiendo el flujo de la aplicación.

Vamos a comenzar por lo más básico: nuestra página web de bienvenida dentro de una aplicación Java web.

Esta página se llama index.jsp y será la puerta de entrada de nuestra aplicación web. Cuando abrimos el navegador y accedemos a http://localhost:8080/mini-crud, el servidor carga automáticamente este archivo. En él vamos a presentar dos opciones: una para agregar una persona y otra para listar personas.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Inicio</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>
<body>
    <div class="form-container">
       <h1>Bienvenido</h1>
       <!-- Página de inicio con dos botones -->
       <a class="btn" href="persona?action=agregar">Agregar Persona</a>
       <a class="btn" href="persona?action=listar">Listar Personas</a>
    </div>
</body>
</html>

En este caso, solo vamos a mostrar dos botones que nos llevan a otras partes del sistema. (Más adelante sustituiremos esto por un menú de opciones).

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

Esta directiva le indica al servidor JSP dos cosas:

• contentType="text/html;charset=UTF-8": La página enviará una respuesta HTML al navegador y usará la codificación de caracteres UTF-8 para mostrar correctamente acentos y símbolos especiales. Esto se traduce en un encabezado HTTP Content-Type con esos valores.
• language="java": Indica el lenguaje del contenedor JSP (valor por defecto, se mantiene por compatibilidad aunque en este archivo no usemos código Java embebido).

En conjunto, define desde el inicio cómo se procesará y enviará la página, y garantiza que el navegador interprete correctamente el contenido y la codificación.

${pageContext.request.contextPath}

Esta es una expresión de Expression Language (EL), la forma moderna de acceder a datos en un JSP, sin escribir código Java.

• pageContext.request.contextPath obtiene la raíz de la aplicación.
• Por ejemplo, si estamos en http://localhost:8080/mini-crud, el context path es /mini-crud
• La usamos directamente donde hace falta (como en el href del CSS), sin necesidad de guardarla en una variable primero.
• Con esto construimos URLs que funcionarán tanto en local como en un servidor donde la app no está en la raíz.

<!DOCTYPE html>
<html>
<head>
    <title>Inicio</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>

• El <!DOCTYPE html> declara que vamos a usar HTML5.
• En <head> ponemos el título de la pestaña y cargamos la hoja de estilos.
• El href del <link> usa ${pageContext.request.contextPath} para formar una URL segura al CSS:
  • Si el archivo está en webapp/css/styles.css, la ruta final será /<contexto>/css/styles.css.
  • Así evitamos 404 cuando movamos o renombremos el contexto de la app.

<body>
    <div class="form-container">
        <h1>Bienvenido</h1>
        <!-- Página de inicio con dos botones -->
        <a class="btn" href="persona?action=agregar">Agregar Persona</a>
        <a class="btn" href="persona?action=listar">Listar Personas</a>
    </div>
</body>

• Vamos a estructurar la vista dentro de .form-container, que ya tiene bordes, sombra y padding en el CSS
• Mostramos un título principal con <h1>Bienvenido</h1>.
• Luego agregamos dos botones de navegación, usando enlaces <a> con clase btn.

🎨 La clase .btn será definida en el archivo styles.css para que parezcan botones.

🔹 Primer enlace: Agregar Persona

<a class="btn" href="persona?action=agregar">Agregar Persona</a>

Cuando hacemos clic, el navegador va a esta URL: http://localhost:8080/mini-crud/persona?action=agregar

Este enlace llama al controlador, que es un Servlet llamado PersonaControladorServlet. Como le estamos diciendo action=agregar, el controlador va a:

✔ Mostrar el formulario para agregar una nueva persona.

🔹 Segundo enlace: Listar Personas

<a class="btn" href="persona?action=listar">Listar Personas</a>

Cuando hacemos clic, vamos a: http://localhost:8080/mini-crud/persona?action=listar

El mismo controlador recibe la petición, pero esta vez con la acción listar.

✔ Entonces, se conecta con la base de datos (o una lista en memoria) y muestra una tabla con todas las personas registradas.

Esta página es parte de la Vista del sistema. No procesa datos ni guarda nada. Solo muestra información y permite navegar.

En términos del modelo MVC:

• index.jsp → Vista
• PersonaControladorServlet → Controlador
• PersonaDAO y PersonaVO → Modelo de datos

Este archivo index.jsp es el punto de entrada simple e intuitivo a nuestra aplicación. Nos permite acceder a las dos funciones principales: agregar y listar personas.

Todo el contenido HTML se adapta al contexto de despliegue gracias a ${pageContext.request.contextPath} (EL), sin necesidad de escribir código Java en la vista.

Continuemos por VISTA- Agregar Persona

index.jsp · Expression Language · EL · pageContext.request.contextPath · JSP · Vista MVC · enlace · navegación · punto de entrada · href

🧠 Autoevaluación — Mini-CRUD con MVC

← MINI-CRUD: Ejemplo completo · 🏠 Inicio · VISTA: Agregar Persona →