Técnica Profesional en Programación de Sistemas de Información
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
CURSO CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
SESIÓN 5: INTRODUCCIÓN A LAS JAVA SERVER PAGES
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
Indicadores de Logro
1) Comprender como funcionan las Páginas Web Dinámicas en el Servidor
2) Comprender la tecnología JSP para aplicaciones que funcionan en servidores Web
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
Conceptos 1) Java Server Page: Tecnología que combina
HTML
con el lenguajeJava
mediante un conjunto especial de tags, para ser ejecutadas en servidores Web2) Java EE :
Java Enterprise Edition (Edición Empresarial de
Java)
Es una plataforma deJava
para desarrollar y ejecutar aplicaciones empresariales las cuales se soportan en servidores3) Java Servlet: es una clase especial de
Java
que se utiliza para ampliar las capacidades de un servidor4) JDBC:
Java Database Connectivity (Conectividad a Bases de
Datos de Java)
Es un API deJava
que permite acceder a bases de datosTécnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
Conceptos
4) JNDI:
Java Naming and Directory Interface (Interface de
Nombrado y Directorio Java)
API deJava
que permite localizar en una red objetos y datos a través de un nombre5) EJB :
Enterprise JavaBeans (JavaBeans Empresarial)
Es un API deJava
que hace parte de laJ2EE
6) JAXP:
Java API for XML Processing (API de Java para
Procesamiento XML)
Es un API deJava
que permite el manejo de información en formato XMLTécnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Qué son las Java Server Pages?
Es una tecnología para desarrollar páginas web que soportan contenido dinámico mediante la inserción de código Java en el HTML haciendo uso especial de los tags JSP.
Entre los objetivos principales de las páginas JSP están: • Permitir recoger información mediante formularios • Mostrar información almacenada en bases de datos • Agregar dinamismo a las páginas web
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Qué son las Java Server Pages?
Entre las características de las páginas JSP se tiene:
• El contenido HTML se puede manipular dinámicamente • Compilación antes de procesar la solicitud
• Acceso a toda la API Empresarial de Java (Java EE) la cual incluye JDBC, JNDI, EJB, JAXP
• Al utilizar Java, se puede utilizar en diferentes sistemas operativos
• Sólo funcionan en servidores Web mediante un servicio de publicación como Tomcat o GlassFish
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Cómo funcionan las Java Server Pages?
Para que puedan funcionar las JSP se necesita un servidor web con el Motor JSP que atienda las solicitudes a las páginas JSP. Dicho motor incluye tanto el ambiente de ejecución como otros servicios que requieren las JSP, como lo ilustra la siguiente gráfica:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Cómo funcionan las Java Server Pages?
El servidor web procesa la página de la siguiente manera: 1) El navegador de la computadora cliente realiza una
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Cómo funcionan las Java Server Pages?
2) El servidor reconoce la solicitud y la reenvía al motor JSP
3) El motor JSP lee la página JSP y la convierte en contenido
Servlet donde todos los elementos JSP son convertidos en código Java
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 1: La Tecnología JSP
¿Cómo funcionan las Java Server Pages?
4) Se compila el código Java generado para obtener un ejecutable .class que se envía al motor de Servlets
5) El motor de Servlets ejecuta el código compilado para generar código HTML que será enviado al cliente
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Para crear una aplicación web en la IDE Netbeans se debe elegir el tipo de proyecto «Web Application» en la carpeta
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Seguido se deben especificar el nombre del proyecto y la carpeta donde quedará alojado:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Ahora se deben especificar los parámetros del servicio de publicación Web:
• Software Servidor • Versión de Java EE
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Se tendría entonces un proyecto de aplicación web con una página HTML vacía
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Un aspecto fundamental que se debe tener en cuenta para poder ejecutar una aplicación web JSP
es tener disponible el servicio de publicación web. En este caso se utilizará Apache Tomcat.
Para configurarlo y administrarlo, este debe estar disponible en la ventana «Services» en el nodo
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Se debe verificar si el servicio funciona. Para ello se verificarán las propiedades, haciendo clic derecho sobre el servicio y eligiendo la respectiva opción:
Permite ocultar o desocultar la clave Ubicación del programa servidor Puerto HTTP del servidor
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Uno de los problemas más comunes es el puerto que utiliza el servicio de publicación.
Se debe proceder a verificar que el servicio inicia, eligiendo
Start en el menú emergente que sale al hacer clic derecho (aparece un pequeño reloj de arena al lado del servicio mientras carga)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Cuando el servicio termina de cargarse aparece el símbolo
Play al lado del nombre del servicio y se despliega una carpeta que incluye las aplicaciones Web disponibles
Proceso de la carga del servicio Aplicaciones Web
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
En algunas ocasiones es necesario iniciar la IDE Netbeans con privilegios de administrador para poder ejecutar la aplicación:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Ahora para probar el funcionamiento de la aplicación web, se agregará una página JSP que nos permita dar un saludo dependiendo de la hora del sistema.
Esto también servirá de introducción a la edición de las páginas JSP.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
En primer lugar se debe agregar un elemento JSP al proyecto, más concretamente en la carpeta «Web Pages»
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Aparece una ventana para la edición del código en JSP. Nótese que inicialmente es HTML puro
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Se comenzará por agregar las instrucciones que referencien los paquetes java.util y java.text necesarios para la aplicación.
Para ello, en primer lugar se debe tener en cuenta que las instrucciones se deben escribir en medio los tags JSP los cuales se definen mediante los símbolos <% … %>
Las referencias a paquetes se hacen mediante la directiva
@page y el atributo import
Incluye las clases Date y Calendar para manejar fechas
Incluye la clase DateFormat para dar formato a las fechas
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Se agregarán ahora las instrucciones para declarar las variables que permitirán manipular la fecha y hora actual (la del sistema). Se utilizará un objeto de la clase Date para obtener la fecha y otro de la clase Calendar para obtener la hora a partir de la fecha.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Se obtiene el valor de la hora del día mediante el método get()
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
A continuación sigue la parte que definirá el contenido dinámico de la página. Se trata de mostrar un saludo que dependerá de la hora del día:
• Desde las 0 horas hasta el mediodía (12 horas), se saludará
«Buenos Días»
• Desde las 12 horas hasta las 18, se saludará «Buenas Tardes»
• Desde las 18 horas y hasta las 24, se saludará «Buenas Noches»
Se inicia una instrucción condicional que verifica si son horas de la mañana. Se termina el tag JSP y se escribe el respectivo texto
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Después se inicia otro tag JSP para finalizar el bloque afirmativo del condicional y continuar con la lógica del problema, en este caso otro condicional anidado que verifica si son las horas de la tarde.
Se cierra de nuevo el tag JSP para colocar el texto HTML
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Después se inicia otro tag JSP para finalizar el bloque afirmativo del segundo condicional e iniciar el bloque negativo, el cual corresponde a las horas de la noche (las horas que le restan al día). Se cierra de nuevo el tag JSP para colocar el texto HTML respectivo. Después de este, irá otra tag JSP cerrando la instrucción condicional.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 2: Aplicación Web en Netbeans
Aplicaciones Web en la IDE Netbeans
Ahora se puede ver funcionar la página ejecutándola desde el servidor web mediante el navegador
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando el
proyecto Web
Configurando el proyecto Web
Un proyecto Web básico lo componen las siguientes clases de archivos: • Páginas HTML • Imágenes • Hojas de Estilos CSS • Scripts de Javascript • Imágenes • Páginas de Servidor JSP
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando el
proyecto Web
¿Cómo se agregan carpetas?
Es aconsejable crear carpetas como mínimo para los siguientes tipos de archivos:
• Hojas de estilos CSS
• Imágenes
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una imagen?
Para agregar una imagen al proyecto basta con copiarla mediante el
Explorador de Windows y luego pegarla en la carpeta respectiva
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
Buscando que las páginas del proyecto tengan uniformidad, se deben crear hojas de estilos CSS. Para ello se hace clic derecho en la carpeta respectiva y se eligen las opciones
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
Luego en la carpeta Other del cuadro de diálogo que aparece se elige la opción «Cascading Style Sheet»
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
Por último se debe especificar el nombre del archivo y finalizar
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
El primer estilo que se editará será aplicar una imagen de fondo a la ventana que la cubra toda
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
Para poder aplicar el estilo a la página «index.html» se debe agregar el respectivo tag
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
¿Cómo se agrega una hoja de estilos CSS?
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Identificando visualmente la aplicación
Se agregará un elemento al formulario que visualmente identificará la aplicación (a especie de título).
Para ello se agregará en el cuerpo de la página una etiqueta
<div>...</div> con el respectivo texto.
Se debe observar la manera como se especifican las tildes (
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Identificando visualmente la aplicación
Y para lograr el efecto visual, se agregará un estilo con el nombre del elemento <DIV>…</DIV> #Aviso
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Cuya ejecución luciría así:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Un menú para la aplicación
Para cargar las diferentes páginas JSP que compondrán la aplicación se creará un menú utilizando los siguientes tags: • <nav>…</nav> que define una sección de la página que
contiene vínculos a otras páginas • <ul>…</ul> que define una lista
• <il>…</il> que define un elemento de lista • <a>…</a> que define un vínculo
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Un menú para la aplicación
Se debe agregar un nuevo archivo de estilos para darle un mejor aspecto al diseño que se denominará “Estilos Menu.css”
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Un menú para la aplicación
Se definirán los estilos para los elementos <nav>…</nav> y
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Un menú para la aplicación
Y también para los elementos <li>…</li> y <a>…</a>
incluso cuando el puntero del ratón paso por encima de los vínculos
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Cuya ejecución luciría así:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios TEMA 3: Configurando la
aplicación
Ahora se debe establecer cual es la página inicial del proyecto. Esto se realiza mediante la ventana de propiedades del proyecto en el nodo «Run» en el ítem «Relative URL»
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Se implementará a continuación la página JSP que permitirá administrar los datos de la tabla Continente y que corresponden a la página que se denominará
“Continentes.jsp”:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Para poder acceder a la información almacenada en una base de datos desde una página JSP, es necesario primero comprender la tecnología que el lenguaje Java tiene para este propósito.
Java ofrece la API JDBC (Java Database Connectivity) especializada en acceder bases de datos relacionales a través de las siguientes clases de operaciones:
1. Conectarse a fuentes de datos como lo son las bases de datos (Una hoja de cálculo o un archivo XML también puede ser fuente de datos)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
2. Enviar consultas y actualizaciones a las fuentes de datos
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
3. Recuperar y procesar los resultados obtenidos tras la ejecución de una consulta (instrucción SELECT)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
El modelo de objetos típico para realizar una consulta
SQL a una base de datos relacional en Java se ilustra a continuación, donde se observa una estrecha relación entre ellos, y que se verá reflejada en el código
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Los siguientes serían los pasos típicos para una aplicación JSP
que accede bases de datos:
1) Se debe referenciar el paquete correspondiente a la API Modelo de objetos para acceder datos en Java
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
2) Cargar el Driver (Controlador) respectivo del motor de base de datos (en este caso Oracle) mediante la clase
DriverManager (Administrador de Controladores)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Para el siguiente paso es importante tener en cuenta que se debió haber configurado con anterioridad la conexión a la base de datos:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
3) Establecer la conexión con la base de datos. Para ello se instancia un objeto de la clase Connection a partir del
DriverManager. Se deben especificar la cadena de conexión
y las credenciales de seguridad (usuario y clave)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
4) Instanciar el objeto para realizar consultas a la base de datos. Este es de la clase Statement y se crea a partir del objeto Connection creado en el paso anterior
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
5) Definir la cadena de consulta, un texto con la instrucción
SQL que se va a ejecutar en la base de datos. Generalmente se guarda en una variable de tipo String
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
6) Ahora se solicita al servidor ejecutar la consulta mediante el método executeQuery() del objeto de la clase Statement. Se le pasa como parámetro la cadena de consulta. Como la instrucción es un SELECT de SQL se debe esperar como resultado una lista de registros. Para ello se utiliza un objeto de la clase ResultSet
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Con los resultados de la consulta SQL Select en memoria (almacenados en el objeto ResulSet) se debe proceder a realizar algún proceso con ellos.
En este caso se construirá un formulario que permita seleccionar algún elemento de la lista.
Esta acción de seleccionar permitirá luego poder modificar o eliminar el registro.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Una configuración adicional que debe hacerse en el proyecto es cargar la librería del controlador de Oracle.
Para ello se debe hacer clic derecho en el nombre del proyecto y seleccionar «Properties» en el menú emergente que se despliega.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
En el cuadro de diálogo que sale se elige el nodo
«Libraries» y se hace clic en botón «Add JAR/Folder»
para seleccionar el archivo que contiene el driver
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 4: Accediendo datos
Una vez encontrado el archivo .jar correspondiente al controlador del motor de base de datos, se hace clic en el botón «Open» para agregarlo al proyecto
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Un formulario JSP es la agrupación de objetos de entrada de datos (Generalmente codificados mediante tags <input>) que permiten enviar información al servidor.
Se definen mediante las etiquetas <form></form> dentro de las cuales debe ir como mínimo una etiqueta <input type="submit"> la cual corresponde a un botón que activa el envío de la información al servidor
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Un formulario establece una interacción entre el cliente y el servidor a través del envío de la información contenida en los elementos contenidos
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Para comprender dicho funcionamiento y continuando con el ejercicio, se procederá a construir un formulario con el resultado de la consulta obtenido en el proceso anterior.
El formulario consistirá en una lista formada por los registros obtenidos, en la cual se podrá seleccionar sólo uno de ellas, para permitir al usuario modificarlo o eliminarlo. También se permitirá agregar un nuevo elemento a la lista.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
El formulario tendría una apariencia como la siguiente:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
El código del formulario irá después de haber obtenido el resultado de la consulta. Para efectos de su presentación, el formulario irá en medio de una etiqueta <DIV>…</DIV> a la cual se le aplicará un estilo CSS.
Es importante observar los siguientes parámetros de la etiqueta <FORM>:
• action corresponde a la página JSP que responderá en el servidor (ContinentesResponse.jsp)
• method="POST" significa que la información será enviada en el cuerpo del mensaje (no en el URL)
Formularios en JSP
Código HTML para el formulario
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Seguido se pondrá el título del formulario.
A continuación, se pondrá una tabla que mostrará los datos almacenados en los registros, siempre y cuando la consulta arroje resultados (el ResultSet no puede ser nulo). La tabla tendrá 2 columnas, una para el elemento seleccionador (botones de radio) y otra para la información.
Formularios en JSP
Código HTML para la tabla Código HTML para
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Las filas de la tabla de la tabla serán llenadas con los registros de la consulta. Para efectos de una mejor visualización, se aplicarán estilos alternos a las filas.
El contenido de los registros se obtiene con el método
getString() el cual pide como parámetro el nombre del campo.
Formularios en JSP
Código JSP que recorre el ResultSet
Código HTML que define una fila de la
tabla
Código JSP que lee el valor de un campo
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Los siguientes serían los estilos necesarios para el área de despliegue del formulario:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Y estos serían los estilos para la tabla donde se mostrarán los datos:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Este sería el aspecto que tendría el formulario hasta el momento Formularios en JSP Información contenida en los registros Estilos alternos de las filas
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Ahora se agregarán los elementos del formulario que permitirán manipular la información y ejecutar las operaciones. En primer lugar se pondrán botones de radio en la columna que aun esta vacía en la tabla, los cuales permitirán seleccionar un registro ha actualizar
Formularios en JSP
Código JSP que obtiene la clave primaria del registro
Código HTML que define el botón de
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Ahora el aspecto que tendría el formulario sería el siguiente:
Formularios en JSP
Botones de radio que permiten seleccionar un
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Ahora se deben agregar los botones de comando que activarán las operaciones del CRUD y uno adicional para retornar al menú principal. Todos estarán bajo el mismo grupo «operación» y todos son «submit», lo cual significa que hacen solicitud al servidor.
Se definen estilos CSS para cada botón (atributo class).
Formularios en JSP
Código HTML que define los botones
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Estos serían los estilos para cada uno de los botones (Obsérvese que cada uno carga una imagen desde la carpeta de imágenes)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
El nuevo aspecto que tendría el formulario sería el siguiente:
Formularios en JSP
Botones de comando que permiten activar una operación en el
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Ahora se debe editar la página
JSP que responde al formulario, la cual se denominará
ContinentesResponse.jsp Formularios en JSP
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Esta nueva página JSP responderá a todos los botones del anterior formulario, y su vez creará nuevos formularios que permitirán editar un registro nuevo o uno existente.
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
En primer lugar se cambiará el título de página, se agregará el vínculo a la página de estilos y los delimitadores de código JSP. Dentro de este código se preguntará por el parámetro que defina la operación a efectuarse:
Formularios en JSP
Instrucción que pregunta por el parámetro
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
De momento se diseñará el formulario que permita editar el registro de un continente, ya sea que se esté agregando o modificando. A este formulario le responderá la página
«ContinentesActualizar.jsp».
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Como se pudo observar en el código anterior, será una tabla con un encabezado, una fila donde se lee el único dato del registro y una fila con 2 botones para aceptar o cancelar la operación
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Los estilos que se aplican a la tabla serían los siguientes:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Y los de los botones:
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Para poder editar un registro existente (operación de
modificar), se hacen los siguientes cambios: • Agregar referencia al paquete java.sql
• Declarar las variables para almacenar los valores de los campos a editar (si se esta agregando, sus valores son vacíos)
• Guardar en una variable session la clave primaria del registro a modificar (si se esta agregando su valor es -1) • Declarar e iniciar los objetos para acceder y consultar la
base de datos
• Declarar la cadena de consulta y ejecutarla. Con su resultado iniciar los valores de los campos
• Asignar los valores de los campos a los respectivos elementos de la interface de usuario mediante los cuales serán leídos (cajas de texto)
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Este sería el código respectivo, con los cambios propuestos:
Formularios en JSP
Variable session que almacenará la clave
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Formularios en JSP
Iniciar el valor del campo cuando se está
modificando
Consulta del registro que se está modificando
Técnica Profesional en Programación de Sistemas de Información Indicadores de Logro Conceptos TEMA 1: La Tecnología JSP TEMA 2: Aplicación Web en Netbeans TEMA 3: Configurando el proyecto Web TEMA 4: Accediendo Datos
CONSTRUCCIÓN DE ELEMENTOS DE SOFTWARE WEB
TEMA 5: Formularios
TEMA 5: Formularios
Formularios en JSP
Valor del campo editado Captura de posibles
errores en la consulta a la base de datos