Vista Agregar Persona - eliizquierdo/material_programacion_avanzada2026 GitHub Wiki

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

Esta página es la que se muestra cuando hacemos clic en el botón "Agregar Persona" desde index.jsp. Nos permite llenar un formulario con dos campos: código y nombre, y luego enviar esos datos al sistema.

Recordemos el enlace en index.jsp:

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

Ese enlace llama al Servlet PersonaControladorServlet, el cual interpreta la acción agregar y redirige a esta vista (persona-form.jsp) para mostrar el formulario.

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Agregar Persona</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>
<body>
<div class="form-container">
  <h1>Agregar Persona</h1>
  <!-- POST al Servlet con action=agregar -->
  <form action="${pageContext.request.contextPath}/persona" method="post">
    <input type="hidden" name="action" value="agregar">

    <label>Código</label>
    <input type="number" name="codigo" required>

    <label>Nombre</label>
    <input type="text" name="nombre" required>

    <button class="btn" type="submit">Guardar</button>
    <a class="btn btn-secondary" href="${pageContext.request.contextPath}/persona">Volver</a>
  </form>
</div>
</body>
</html>

La directiva de página es igual a la de index.jsp, así que continuamos con la cabecera.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Agregar Persona</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>

Declaramos HTML5 con <!DOCTYPE html>. En <head> vamos a:

• <html lang="es">: Sirve para indicar que el contenido de la página está escrito en español. Esto ayuda a los navegadores, lectores de pantalla y motores de búsqueda a interpretar correctamente el idioma, mejorando la accesibilidad y el SEO. Aunque no afecta directamente al funcionamiento del código, sí influye en la experiencia del usuario y en la correcta pronunciación en lectores de texto.

• <meta charset="UTF-8">: Especifica que el documento usará la codificación UTF-8, que soporta caracteres especiales como tildes, ñ, signos de apertura de exclamación/interrogación, etc. Sin esto, podríamos ver caracteres raros como ñ o á en vez de ñ o á. Es crucial para que los datos que mostramos (especialmente si vienen de formularios o base de datos) aparezcan de forma correcta en todos los navegadores.

• Definir el título de la pestaña (coherente con la acción "Agregar").

• Cargar la hoja de estilos styles.css usando ${pageContext.request.contextPath} (EL) para evitar 404 por cambios de contexto.

Aclaración:

• Directiva JSP (contentType) → afecta al servidor y a los headers HTTP.
• Meta HTML → lo interpreta el navegador cuando procesa el documento.

Lo ideal es tener ambas para cubrir cualquier caso donde el navegador no use (o pierda) la información de los headers, por ejemplo si el HTML se abre localmente o si hay algún proxy que cambie los headers.

<body>
  <div class="form-container">
    <h1>Agregar Persona</h1>
    ...
  </div>
</body>

• Vamos a estructurar la vista dentro de .form-container, que ya tiene bordes, sombra y padding en el CSS.
• El <h1> fija el propósito de la pantalla (alta simple).

<form action="${pageContext.request.contextPath}/persona" method="post">
    <input type="hidden" name="action" value="agregar">
    ....
    <button class="btn" type="submit">Guardar</button>
    <a class="btn btn-secondary" href="${pageContext.request.contextPath}/persona">Volver</a>
</form>

• Enviamos los datos del formulario al Servlet PersonaControladorServlet (mapeado en /persona) usando POST.
• El campo oculto action=agregar le dice al controlador qué operación realizar. En el doPost, el switch(action) dirige a agregar(...).

<label>Código</label>
<input type="number" name="codigo" required>

<label>Nombre</label>
<input type="text" name="nombre" required>

• label: etiquetas que indican qué se debe completar.
• input: campos de entrada de datos.
• name: define el nombre del parámetro que se enviará al Servlet.

Cuando se envía el formulario, el servidor recibe dos parámetros de texto: codigo y nombre. Luego, el controlador convierte codigo a entero (Integer.parseInt(...)) antes de usarlo.

Nota útil: type="number" solo ayuda del lado del cliente (teclado numérico, validación básica). Aun así:

• Pueden enviar codigo=abc manipulando la petición.
• Pueden venir formatos raros (" 12 ", "1,5", "1e3").
• Por eso, siempre valida y parsea en el servidor.

<button class="btn" type="submit">Guardar</button>

El botón "Guardar" dispara el POST a action=agregar. O sea que el botón envía los datos al servidor para que se procesen. El Servlet ejecuta la lógica de alta y aplica PRG (Post → Redirect → Get) redirigiendo a /persona (que lista).

<a class="btn btn-secondary" href="${pageContext.request.contextPath}/persona">Volver</a>

El enlace "Volver" al listado hace un GET a /persona (acción por defecto: listar) para ver la tabla.

1. El usuario abre "Agregar Persona" (/persona?action=agregar → persona-form.jsp).
2. Enviar el formulario hace POST a /persona con action=agregar.
3. El controlador agrega y redirige a /persona (PRG).
4. /persona (GET) lista y muestra los cambios.

Continuamos por VISTA- Listar Personas

persona-form.jsp · formulario agregar · doPost · action=agregar · getParameter · PersonaVO · PRG · sendRedirect · forward · Expression Language · EL

🧠 Autoevaluación — Mini-CRUD con MVC

← VISTA: index · 🏠 Inicio · VISTA: Listar Personas →