lenguaje de programación iii
Post on 15-Feb-2016
212 Views
Preview:
DESCRIPTION
TRANSCRIPT
UNIVERSIDAD PRIVADA TELESUP
1
UNIVERSIDAD PRIVADA TELESUP
2
Prefacio:
Este libro auto instructivo tiene la finalidad de ser un material educativo que facilitará
el aprendizaje interactivo del alumno de la asignatura de Lenguaje de Programación
III, mediante este recurso se pretende que el alumno sea el
protagonista de su propio aprendizaje y capacitarlo en la metodología
de la programación web en el desarrollo de aplicaciones visuales
con orientación a eventos y con conexión a base de datos
bajo la plataforma Java, con la cual podrá elaborar
aplicaciones informáticas que faciliten la toma de
decisiones en una organización.
Comprende Cuatro Unidades de Aprendizaje:
Unidad I: Páginas Dinámicas en Java.
Unidad II: Páginas Dinámicas con Base de Datos.
Unidad III: Complementos en JSP
Unidad IV: Patrón de Diseño DAO en JSP
UNIVERSIDAD PRIVADA TELESUP
3
Estructura de los Contenidos
La competencia que el estudiante debe lograr al final de la asignatura es:
“Construye una aplicación informática usando la
programación orientada a objetos con conexión a
base de datos, con el propósito de facilitar la toma de
decisiones en la gestión empresarial y comercial”.
Páginas Dinámicas en Java
Páginas Dinámicas con Base de Datos
Complementos en JSP
Patrón de Diseño DAO
en JSP
Introducción a HTML.
Introducción a JSP.
Envío de datos entre
páginas.
JavaScript.
Introducción a
base de datos
MySQL.
Introducción a
base de datos
desde Java:
JDBC.
Consultas en
páginas
dinámicas.
Sesiones.
Reportes en JSP.
Gráficos en JSP.
Uso de Servlets.
Introducción a
programación
en capas.
Implementación
de Capas.
Consultas con
n- capas.
Mantenimientos
con n- Capas.
jQuery en JSP.
UNIVERSIDAD PRIVADA TELESUP
4
Índice del Contenido
I. PREFACIO 02
II. DESARROLLO DE LOS CONTENIDOS 03 - 195
UNIDAD DE APRENDIZAJE 1: PÁGINAS DINÁMICAS EN JAVA 05-63
1. Introducción a. Presentación y contextualización b. Competencia c. Capacidades d. Actitudes e. Ideas básicas y contenido
2. Desarrollo de los temas a. Tema 01: Introducción a HTML. b. Tema 02: Introducción a JSP. c. Tema 03: Envío de Datos Entre Páginas. d. Tema 04: JavaScript.
3. Lecturas recomendadas 4. Actividades 5. Autoevaluación 6. Resumen
06 06 06 06 06 06
07-58 07 18 29 44 59 59 61 63
UNIDAD DE APRENDIZAJE 2: PÁGINAS DINÁMICAS CON BASE DE DATOS 64-115
1. Introducción a. Presentación y contextualización b. Competencia c. Capacidades d. Actitudes e. Ideas básicas y contenido
2. Desarrollo de los temas a. Tema 01: Introducción a Base de Datos MySQL. b. Tema 02: Introducción a Base de Datos Desde Java: JDBC. c. Tema 03: Consultas en Páginas Dinámicas. d. Tema 04: Sesiones.
3. Lecturas recomendadas 4. Actividades 5. Autoevaluación 6. Resumen
65 65 65 65 65 65
66-111 66 74 88
101 112 112 113 115
UNIDAD DE APRENDIZAJE 3: COMPLEMENTOS EN JSP 116-158
1. Introducción a. Presentación y contextualización b. Competencia c. Capacidades d. Actitudes e. Ideas básicas y contenido
2. Desarrollo de los temas a. Tema 01: Reportes en JSP. b. Tema 02: Gráficos en JSP. c. Tema 03: jQuery en JSP. d. Tema 04: Uso de Servlets.
3. Lecturas recomendadas 4. Actividades 5. Autoevaluación 6. Resumen
117 117 117 117 117 117
118-154 118 132 139 146 155 155 156 158
UNIDAD DE APRENDIZAJE 4: PATRÓN DE DISEÑO DAO EN JSP 159-192
1. Introducción a. Presentación y contextualización b. Competencia c. Capacidades d. Actitudes e. Ideas básicas y contenido
2. Desarrollo de los temas a. Tema 01: Introducción a Programación en Capas. b. Tema 02: Implementación de Capas. c. Tema 03: Consultas con n- Capas. d. Tema 04: Mantenimientos con n- Capas.
3. Lecturas recomendadas 4. Actividades 5. Autoevaluación 6. Resumen
160 160 160 160 160 160
161-188 161 166 176 186 189 189 190 192
III. GLOSARIO 193
IV. FUENTES DE INFORMACIÓN 194
V. SOLUCIONARIO 195
UNIVERSIDAD PRIVADA TELESUP
5
<
UNIVERSIDAD PRIVADA TELESUP
6
Introducción
a) Presentación y contextualización
En esta unidad de aprendizaje conoceremos las herramientas y técnicas a usar
para el diseño y creación de páginas web.
Así como también la programación en java que se podrá incluir dentro de las
páginas. Haciendo de el estudiante un profesional altamente capacitado para las
exigencias de las empresas actuales.
b) Competencia
Diseña y reconoce las funcionalidades de las páginas web dinámicas.
c) Capacidades
1. Reconoce la importancia del uso de la programación en páginas web.
2. Identifica la importancia del envió de datos entre páginas web.
3. Implementa los códigos necesarios de lado del cliente.
4. Inserta los códigos necesarios de lado del servidor.
d) Actitudes Toma actitud positiva para planificar, implementar y gestionar el uso de las
Tecnologías de Información a partir del análisis de sus requerimientos.
Valora el uso del lenguaje de programación.
Toma en cuenta los criterios de calidad, seguridad y ética profesional
propiciando el trabajo en equipo.
e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:
La Unidad de Aprendizaje 01: Páginas Dinámicas en Java, comprende el
desarrollo de los siguientes temas:
TEMA 01: Introducción a HTML.
TEMA 02: Introducción a JSP.
TEMA 03: Envío de Datos Entre Páginas.
TEMA 04: JavaScript.
UNIVERSIDAD PRIVADA TELESUP
7
TEMA 1
Reconocer la importancia del uso de la programación en páginas web.
Competencia:
HTML a
Introducción
UNIVERSIDAD PRIVADA TELESUP
8
Desarrollo de los Temas
Tema 01: Introducción a HTML
INTRODUCCIÓN
HTML (HyperText Markup Language) es un
lenguaje de programación que se utiliza para
la creación de páginas en la WWW. Por
página entenderemos el documento que
aparece en el visualizador.
En resumen las páginas web son hechas en
HTML y el navegador, visualizador, cliente o el
web browser como se le quiera llamar lo interpreta, compila y ejecuta mostrando como
resultado el contenido de la pagina.
Para hacer una página Web solo se necesita un editor de texto desde el block de
notas hasta programas hechos exclusivamente para editar páginas web (FrontPage,
Visual InterDev, Dreamweaver, etc.).
Estructura básica de un documento HTML: Cabecera y cuerpo del documento
Tres son las tags que describen la estructura general de un documento y dan una
información sencilla sobre él. Estas tags no afectan a la apariencia del documento y
solo interpretan y filtran los archivos HTML.
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
<HEAD>: Especifica el prólogo del resto del archivo.
Son pocas las tags que van dentro de ella,
destacando la del título <TITLE> que será utilizado
por los marcadores del navegador e identificará el
contenido de la página. Solo puede haber un título
por documento, preferiblemente corto aunque
significativo, y no caben otras tags dentro de él. En
head no hay que colocar nada del texto del documento.
<BODY>: Encierra el resto del documento, el contenido.
UNIVERSIDAD PRIVADA TELESUP
9
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
ETIQUETAS HTML
Hipervínculo
<a href="paginaallamar.html" target="_blank">Visitar</a>
Imagen Sin Enlace:
<img src="imagen.gif" alt="descripción de la imagen">
Imagen con Enlace:
<a href="http://www.nombredeldominio.com" target="_blank"><img src="
nombredelaimagen.gif" alt="descripción de la imagen"></a>
Correo Electrónico:
<a href="mailto:tuemail@tuemail.com">Contacta</a>
Alinear a la Izquierda:
<div align="left"> Texto alineado a la izquierda. </div>
Centrar:
<div align="center">Texto centrado </div>
Alinear a la Derecha:
<div align="right">Texto alineado a la izquierda </div>
UNIVERSIDAD PRIVADA TELESUP
10
Salto de línea
<br> o <br />
Tipo de Letra:
<font face="verdana"> Texto escrito en verdana </font>
Utilizamos <font face="verdana"> antes del texto elegido y acabamos con </font>.
Negrita:
<strong>Texto </strong>
Cursiva:
<em>Texto </em>
Subrayado:
<u>Texto subrayado </u>
TABLAS: En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas
de una fila irá encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en
las etiquetas de tabla.
El comienzo y fin de una tabla se define mediante el tag <table> ... </table>. Para
especificar cada fila de la tabla se utilizan las etiquetas <tr> ... </tr>. Finalmente, para
especificar cada celda de una fila habrá que usar las etiquetas <td> ... </td>.
Teniendo en cuenta estas simples reglas, vamos a mostrar a continuación
algunos ejemplos:
<table>
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>
UNIVERSIDAD PRIVADA TELESUP
11
El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:
Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
FORMULARIOS WEB
Las páginas webs no son solo permiten presentar documentos de forma más o menos
atractiva al destinatario final, sino que también proporcionan elementos para
interactuar con él. De esta manera el usuario final puede enviar su opinión de la
página al autor, o realizar una compra en línea. Estos elementos se conocen como
formularios y seguro que todos los hemos visto y utilizado alguna vez. Por ejemplo
este sencillo formulario:
Principio del formulario
Tu nombre:
¿Estás registrado?
Si
No Final del formulario
El código sería el siguiente:
<FORM ACTION="" METHOD="POST" name="formul">
Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario está formado por una serie de elementos (cajas de texto, casillas de
verificación, botones...) encerrados entre las etiquetas <FORM> </FORM> (Todo esto
va dentro de las etiquetas BODY de la pagina web). Como verás en esta etiqueta
existen varios parámetros como son:
UNIVERSIDAD PRIVADA TELESUP
12
ACTION: La acción que se ejecutará al pulsar el botón de enviar. Habitualmente será
una URL a un programa CGI encargado de
procesar los datos del formulario. Puede ser
también mailto: seguido de una dirección de
correo electrónico, en este caso el formulario se
enviará por correo, en cuyo es recomendable
añadir el parámetro ENCTYPE="text/plain" para
que el mensaje sea fácil de leer.
METHOD: Indica cómo se enviarán los datos del formulario al programa que los
procese: POST de forma interna (oculta) y GET añadido a la dirección URL del
programa. Si usas el formulario para un mailto: debes usar el método POST
NAME: Es el nombre que identifica al formulario, útil si se usan scripts dentro de la
página.
Controles de Formularios
Cajas de Texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario.
Pueden ser cajas de una solo línea o cuadros de texto con varias líneas. Las primeras
usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de
tipo password (lo que escribimos es visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere
decir que esté codificado en ninguna manera. Ambos tipos
comparten todos sus atributos que son:
SIZE: Tamaño en columnas de la caja de texto.
MAXLENGTH: Número máximo de caracteres que se pueden
teclear.
VALUE: Texto por defecto que aparecerá en el campo.
UNIVERSIDAD PRIVADA TELESUP
13
Pero si necesitamos que el usuario escriba más líneas de texto pues usamos la
etiqueta <TEXTAREA></TEXTAREA>:
<TEXTAREA>Comienza a escribir </TEXTAREA>
Comienza a escribir
Si escribimos algún texto dentro de esta etiqueta, ese texto aparecerá por defecto en
esa área de texto. Admite estos parámetros:
ROWS: Filas que ocupará la caja de texto.
COLS: Columnas que ocupará la caja de texto.
Opciones:
Para que el usuario pueda marcar una de entre varias opciones podemos usar un
campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO
VALUE="1"><BR>
Si
No<INPUT NAME="Registrado" TYPE=RADIO
VALUE="0"><BR>
No
Fíjate que ambos INPUT usan el mismo atributo NAME, de esa manera el navegador
los reconoce como un juego de respuestas alternativas.
Parámetro Significado VALUE Este es el valor que asignará a la variable. CHECKED
Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
Listas de opciones
Hay una alternativa al control de selección de alternativas: las listas desplegables.
Mediante este control el usuario puede seleccionar una opción de entre un grupo que
aparece en una lista desplegable. La lista se encierra en etiquetas
<SELECT></SELECT>, y las opciones se ponen en etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Español</OPTION>
<OPTION>Alemán</OPTION>
</SELECT>
UNIVERSIDAD PRIVADA TELESUP
14
Los parámetros que admite SELECT son las siguientes:
Parámetro Significado
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista
de selección con un scroll y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario
utilizará la tecla CTRL y el botón activo del ratón.
Y OPTION estos:
Parámetro Significado
VALUE Este es el valor que asignará a la variable.
SELECTED La opción con esta propiedad será la que
aparezca seleccionada por defecto.
Botones del Formulario
Existen dos clases e botones: uno que se utiliza para poner en marcha la operación
indicada por ACTION (botones submit) y otro que sirve para resetear el formulario
borrando el contenido de todos los controles:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro
del botón. El botón de submit puede ser una imagen, por ejemplo
Marcas de Verificación
Son controles parecidos a los campos de opciones
pero que no van agrupados, o sea no son
excluyentes, Sirven para que el usuario coloque una
marca de sí o no (verdadero o falso, marcado o no
marcado). Lo podremos conseguir por medio de
controles de confirmación:
<INPUT NAME="Opina" TYPE=CHECKBOX> ¿Te gusta el curso?
¿Te gusta el curso?
UNIVERSIDAD PRIVADA TELESUP
15
Ejemplos de páginas web:
Página con Hipervínculos y viñetas
Código Fuente:
Resultado:
UNIVERSIDAD PRIVADA TELESUP
16
Página con Tablas HTML
Código Fuente:
Resultado:
UNIVERSIDAD PRIVADA TELESUP
17
Formulario Web
Código Fuente:
Resultado:
UNIVERSIDAD PRIVADA TELESUP
18
TEMA 2
Identificar la importancia del envió de datos entre páginas web.
Competencia:
JSP a
Introducción
UNIVERSIDAD PRIVADA TELESUP
19
Tema 02: Introducción a JSP
JAVA SERVER PAGES JavaServer Pages (JSP) combinan HTML con fragmentos de Java para producir
páginas web dinámicas.
Cada página es automáticamente compilada a servlet por el
motor de JSP, en primer lugar es recogida y a continuación
ejecutada.
JSP tiene gran variedad de formas para comunicarse con
las clases de Java, servlets, applets y el servidor web; por
esto se puede aplicar una funcionalidad a nuestra web a base
de componentes.
Resumen de la arquitectura de una página JSP
Una página JSP es archivo de texto simple que consiste en contenido HTML o XML
con elementos JSP. Cuando un cliente pide una página JSP del sitio web y no se ha
ejecutado antes, la página es inicialmente pasada al motor de JSP, el cual compila la
página convirtiéndola en Servlet, la ejecuta y devuelve el contenido de los resultados
al cliente.
Qué es lo que usted necesita para ejecutar un servlet (también una JSP)
Un programa servidor Web para HTTP. Pueden ser los más utilizados o populares
como el Apache HTTP server, o el IIS que viene en el sistema operativo Windows NT
4.0 o Windows 2000 Server, o incluso en la versión profesional de Windows XP.
¿Qué ocurre cuando se accede a una página JSP?
Si es la primera vez, el servidor de aplicaciones genera un
servlet (que implementa javax.servlet.jsp.HttpJspPage) a partir de la
página JSP, lo compila y lo carga en memoria
Si no es la primera vez, le pasa la petición al servlet (ya
compilado y creado en memoria)
Si la página se ha modificado desde la última compilación, el
servidor se da cuenta, genera el nuevo servlet, lo compila
y lo carga de nuevo
UNIVERSIDAD PRIVADA TELESUP
20
Los servlets son clases de Java que amplían la funcionalidad de un servidor Web
mediante la generación dinámica de páginas Web. Un entorno de ejecución
denominado motor de servlets administra la carga y descarga del servlet, y trabaja con
el servidor Web HTTP para dirigir las peticiones de los usuarios remotos (clientes) a
los servlets y enviar la respuesta a los clientes. Aparecen en 1997 y poco a poco se
han convirtiendo en el entorno dominante de la programación Java en servidor.
Los servlets nacen para cubrir las limitaciones de los applets, a saber:
Limitación al acceso de otro servidor que no sea el mismo en que se aloje el applet.
Limitación en el acceso a los servicios del servidor
Limitaciones de seguridad. (Ingeniería inversa para retocar el applet, para acceso a la
lógica del negocio del sistema en cuestión)
Estructura Básica de una Página JSP
Directiva de importación de
librerías (paquetes)
Declaración de una variable global
(Incrustación de código java)
Mostrar una
variable por
pantalla
(Incrustación
de código
java)
UNIVERSIDAD PRIVADA TELESUP
21
En la siguiente estructura básica de una página JSP, nos
damos cuenta que la estructura está conformado
por HTML y pequeñas incrustaciones de código
java.
Luego que está terminado la pagina, se tendrá
que desplegar la aplicación Web, donde se
debe de iniciar el servidor J2EE
La pagina JSP y los archivos dependientes son
conocidos en conjunto como una unidad de
traducción. La primera vez que una maquina JSP
intercepta una solicitud para una JSP, compila la unidad de traducción en u servlet.
Este es un proceso de dos fases. El código fuete JSP es convertido en un servlet y
este servlet es entonces compilado.
La primera vez que una JSP es cargada por el contenedor JSP (también llamado
JSP), el código de servlet necesario para implementar las etiquetas JSP es
automáticamente generado, compilado y cargado en el contenedor de servlet. Esto
sucede en el periodo de traducción. Es importante destacar que esto solo tiene lugar
la primera vez que una página JSP es solicitada. La primera que se accede a una
página JSP habrá una respuesta lenta pero, en posteriores solicitudes, el servlet
compilado con anterioridad simplemente procesa las solicitudes. Esto ocurre en el
periodo de ejecución.
Si modificamos el código fuente para la JSP, este es automáticamente recompilado y
cargado cuando esa pagina sea solicitada de
nuevo. Detrás de estos procesos suceden muchas
cosas y nosotros, como desarrolladores, estamos
recibiendo los beneficios en forma de ventaja de
composición (La maquina servlet gestionara
normalmente esta situación haciendo que la clase de servlet generada exponga una
estampilla de tiempo. Antes de cada solicitud, la estampilla de tiempo puede
compararse con la estampilla de tiempo de modificación del sistema de archivos del
archivo JSP. Será necesario recompilar solo si la estampilla de tiempo del archivo JSP
es posterior a la estampilla de tiempo de la clase).
UNIVERSIDAD PRIVADA TELESUP
22
Implementar una fracción de código Java
<%
// Fracción de código Java
%>
Ejemplo:
Mostrar una línea de resultado
<%=”mensaje hola mundo”%>
Ejemplo:
UNIVERSIDAD PRIVADA TELESUP
23
EJERCICIOS RESUELTOS
Ejemplo 1: Mostrar los números del 1 al 50.
Código:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<% for (int i=1; i <= 50; i++) {%>
<br><%=i%>
<% } %>
</body>
</html>
Resultado:
UNIVERSIDAD PRIVADA TELESUP
24
Ejemplo 2: Mostrar en una tabla (TABLE) 10 números aleatorios y al costado
debe salir si es par o impar.
Código:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border=1>
<tr>
<td>Numero</td>
<td>Observación</td>
</tr>
<%
int i, n;
String obs;
for (i=1; i<=10; i++) {
n= (int) (Math.random ()*10);
if(n%2==0){obs="Par";}
else{obs="Impar";} %>
<tr>
<td><%=n%></td>
<td><%=obs%></td>
</tr>
<% } %>
</table>
</body>
</html>
Resultado:
UNIVERSIDAD PRIVADA TELESUP
25
Ejemplo 3: Llenar un arreglo con códigos y al costado mostrar imágenes que
pertenece a cada código (para esto se debe tener imágenes que tengan el mismo
nombre de los códigos)
Código:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border=1>
<tr>
<td>Código</td>
<td>Foto</td>
</tr>
<%
int i,n;
String[] Cod={"A001","A002","A003"};
for(i=0;i<Cod.length;i++){ %>
<tr>
<td><%=Cod[i]%></td>
<td><img src=”<%=Cod[i]%>.JPG” width=100 height=100></td>
</tr>
<% } %>
</table>
</body>
</html>
Resultado:
UNIVERSIDAD PRIVADA TELESUP
26
ENTORNO DE TRABAJO
Para este presente libro trabajaremos con “Netbeans” la versión 7.0
Parar crear un proyecto nos vamos
Escogemos Java Web – Web Application
Después nos pedirá el nombre del proyecto y la ubicación del mismo
UNIVERSIDAD PRIVADA TELESUP
27
Luego escogemos el servidor web con el cual se va a trabajar (Podemos seleccionar el
que sale por defecto)
UNIVERSIDAD PRIVADA TELESUP
28
De ahí se le da “Finish”
El programa responderá mostrándonos la siguiente pantalla
Por defecto se crea una página llamada Index en la cual se podrá programar todo lo
que hemos visto en las páginas anteriores de este libro. (La programación va dentro
de las etiquetas BODY)
Si queremos agregar otra página
UNIVERSIDAD PRIVADA TELESUP
29
TEMA 3
Implementar los códigos necesarios de lado del cliente.
Competencia:
Datos Entre de Envío
Páginas
UNIVERSIDAD PRIVADA TELESUP
30
Tema 03: Envío de Datos Entre Páginas
ENVIANDO INFORMACIÓN A UNA PÁGINA JSP (TRABAJANDO CON
FORMULARIOS)
Métodos GET y POST
Los métodos HTTP GET y POST envían datos al servidor. En una Aplicación JSP,
GET y POST envían los datos a un Bean, servlet, u otro componente del lado del
servidor que está manejando los datos del formulario.
En teoría, GET es para obtener datos desde el servidor y POST es para enviar datos.
Sin embargo, GET añade los datos del formulario (llamada una query string (string de
solicitud)) a una URL, en la forma de parejas clave/valor desde el formulario HTML,
por ejemplo, name=john. En el String de solicitud las parejas de clave/valor se separan
por caracteres &, los espacios se convierten en caracteres +, y los caracteres
especiales se convierten a sus correspondientes hexadecimales. Como el String de
solicitud está en la URL, la página puede ser añadida a los bookmarks o enviada por
e-mail con el string de solicitud. Este string normalmente está limitado a un número
relativamente pequeño de caracteres.
Sin embargo, el método POST, pasa los datos de una longitud ilimitada
como un cuerpo de solicitud de cabecera HTTP hacia el servidor. El
usuario que trabaja en el navegador cliente no puede ver los datos que
están siendo enviados, por eso la solicitud POST es ideal para enviar
datos confidenciales (como el número de una tarjeta de crédito) o
grandes cantidades de datos al servidor.
UNIVERSIDAD PRIVADA TELESUP
31
Objeto Request
Los datos que el usuario introduce se almacenan en
un objeto request, que usualmente implementa
javax.servlet.HttpServletRequest (o si nuestra
implementación usa un protocolo diferente, otro
interface que sea una subclase de
javax.servlet.ServletRequest).
Podemos acceder al objeto request directamente desde dentro de un scriptlet. Los
scriptlet son fragmentos de código escritos en un lenguaje de scripts y situado dentro
de los caracteres <% y %>. En JSP 1.0, debemos usar el lenguaje de programación
Java como lenguaje de Script.
Podríamos encontrar útiles algunos de estos métodos para trabajar con objetos
request:
Método Definido en Trabajo Realizado
getRequest javax.servlet.jsp.PageContext Devuelve el Objeto request actual
getParameterNames javax.servlet.ServletRequest
Devuelve los nombres de los
parámetros contenidos
actualmente en request
getParameterValues javax.servlet.ServletRequest
Devuelve los valores de los
parámetros contenidos
actualmente en request
getParameter javax.servlet.ServletRequest
Devuelve el valor de un
parámetro su proporcionamos el
nombre
También podemos encontrar otros métodos definidos en ServletRequest,
HttpServletRequest, o cualquier otra subclase de ServletRequest que implemente
nuestra aplicación
El motor JSP siempre usa el objeto request detrás de la escena, incluso si no la
llamamos explícitamente desde el fichero JSP.
UNIVERSIDAD PRIVADA TELESUP
32
Ejemplo de envió de datos
Realizar un formulario donde se ingrese el código, nombre, precio y cantidad de un
artefacto.
Al hacer click en el botón “Enviar” los datos se enviaran a pagina2 y se mostraran los
resultados tal como se muestra en la imagen.
Código fuente del formulario (Pagina1.jsp)
UNIVERSIDAD PRIVADA TELESUP
33
Observación: el botón “SUBMIT” se encargara de enviar los datos a la página destino.
La página de destino se define en la etiqueta “FORM” en la propiedad “ACTION”
Código fuente de la página destino (Pagina2.jsp)
Como se puede apreciar aquí, se reciben los datos ingresados en el formulario
anterior.
request.getParameter(“nombredevariable”) permite recuperar el dato del formulario
en donde “nombredevariable” es el nombre del control (caja de texto)
Si el dato a recuperar es entero hay que convertirlo con Integer.parseInt, y si fuera real
con Double.parseDouble
UNIVERSIDAD PRIVADA TELESUP
34
Ejercicios Resueltos
Ejercicio 1
Seleccione el curso a estudiar, además si el alumno tendrá algún tipo de beca,
Finalmente se marca si pagara seguro por inscribirse a estudiar el curso
(El seguro será un recargo del 10% del precio)
Otra página recibirá los datos y mostrara el nombre del curso seleccionado,
El precio que dependerá del curso,
El descuento por beca y
El recargo por seguro si esta marcado el check.
Código Pagina2.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<center>
<form name="form2" method="post" action="Pagina2.jsp">
<table border="1">
<tr>
<td>Seleccione Carrera</td>
<td>
<select name="combo1">
<option value="1">Visual Basic</option>
<option value="2">Java</option>
<option value="3">Algoritmica</option>
</select>
</td>
</tr>
<tr>
<td>Beca </td>
<td>
<input type="radio" value="M" name="rbtbeca">Media Beca
<input type="radio" value="B" name="rbtbeca">Beca
UNIVERSIDAD PRIVADA TELESUP
35
<input type="radio" value="S" name="rbtbeca">Sin Beca
</td>
</tr>
<tr>
<td>Recargo por Seguro</td>
<td>
<input type="checkbox" name="chkreca">
</td>
</tr>
</table>
<input type="reset" value="Nuevo">
<input type="submit" value="Enviar Informacion">
</form>
</center>
</body>
</html>
Resultado de Página2.html:
Código de Pagina2.jsp: <%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resultado</title>
</head>
<body>
UNIVERSIDAD PRIVADA TELESUP
36
<%
int op;
String beca;
String curso="";
int precio=0;
double desc=0,reca=0,total=0;
//recuperamos el valor del combo y lo convertimos a entero
op = Integer.parseInt(request.getParameter("combo1"));
beca = request.getParameter("rbtbeca");//Recuperamos el valor del radiobutton
seleccionado
//Preguntamos por el curso
switch(op){
case 1:
curso ="Visual Basic";
precio=350;
break;
case 2:
curso ="Java";
precio=400;
break;
case 3:
curso ="Algoritmica";
precio=250;
break;
}
//Preguntamos por el radiobutton
if(beca.equalsIgnoreCase("M")){
desc = precio / 2;
}
if(beca.equalsIgnoreCase("B")){
desc =precio;
}
if(beca.equalsIgnoreCase("S")){
desc =0;
}
UNIVERSIDAD PRIVADA TELESUP
37
//el checkbox tomara el valor de "on" si ha sido marcado caso contrario tomara el
valor de "null"
if(request.getParameter("chkreca")==null){
reca=0;
}else{
reca = precio * 0.10;
}
total = precio + reca - desc;
%>
<center>
<table>
<tr>
<td>Curso</td>
<td><%=curso%></td>
</tr>
<tr>
<td>Precio</td>
<td><%=precio%></td>
</tr>
<tr>
<td>Descuento x Beca</td>
<td><%=desc%></td>
</tr>
<tr>
<td>Recargo x Seguro</td>
<td><%=reca%></td>
</tr>
<tr>
<td>Total</td>
<td><%=total%></td>
</tr>
</table>
<a href="Pagina2.html">Regresar</a>
</center>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
38
Resultado de Pagina2.jsp:
Ejercicio 3
Ingresar el código de un alumno la pagina3.jsp recibirá el código y lo buscara en un
arreglo
Si lo encuentra mostrara su nombre y edad que estarán en otros 2 arreglos.
Además se mostrara la foto del alumno para eso se tendrán imágenes con el mismo
nombre de los códigos
Código Pagina3.html: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<center>
<form name="form3" method="post" action="Pagina3.jsp">
<table border="1">
<tr>
<td>Ingrese Código</td>
<td><input type="text" name="txtcod"></td>
</tr>
</table>
<input type="reset" value="Nuevo">
<input type="submit" value="Enviar Informacion">
</form>
</center>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
39
Resultado Pagina3.html:
Código Pagina3.jsp: <%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resultado</title>
</head>
<body>
<center>
<%
//Declarando Arreglos paralelos
String codigos[]={"A001","A002","A003","A004","A005"};
String Nombres[]={"Ana","Maria","Pedro","Teresa","Juan"};
int Edades[]={17,20,18,19,21};
String cod,nom="";
int edad=0;
//Aquí se recupera el código del alumno ingresado en el form anterior
cod=request.getParameter("txtcod");
//Buscamos el código recibido en el arreglo de codigos
for(int i=0;i<codigos.length;i++){
if(cod.equalsIgnoreCase(codigos[i])){ //Si lo encontramos
//guardamos el nombre y edad que le corresponde
nom = Nombres[i];
edad= Edades[i];
break;
}
}
UNIVERSIDAD PRIVADA TELESUP
40
//Si edad vale 0 quiere decir que no se encontró el código recibido
if(edad==0){
out.print("<h1>No se encontró el alumno</h1>");
}else{
//si entra aquí es que si se encontró el código
%>
<table border="1">
<tr>
<td>Código</td>
<td><%=cod%></td>
<td rowspan="3"><img src="<%=cod%>.JPG" width="80"
height="100"></td>
</tr>
<tr>
<td>Nombre</td>
<td><%=nom%></td>
</tr>
<tr>
<td>Edad</td>
<td><%=edad%></td>
</tr>
</table>
<%
} //cierra el ELSE
%>
<a href="Pagina3.html">Regresar</a>
</center>
</body>
</html>
Resultado Pagina3.jsp:
UNIVERSIDAD PRIVADA TELESUP
41
Ejercicio 4: Enviando datos a la misma página, realizar un programa Web en java que me
permita calcular la potencia de un número ingresado por teclado.
Programa1.jsp
Según la figura nos muestra una página JSP donde nos pide que ingresemos por
teclado un numero entero en la cual al presionar el botón calcular potencia,
automáticamente nos tiene que calcular el resultado final
Código fuente de la página:
Código Fuente de la página Programa1.jsp
Observación:
Debemos de fijarnos en esa sentencia if
if(request.getParameter(“numero”) !=null){
Cuando se hace click en un botón submit se envían
datos, en este caso se están enviando datos a la misma página. (Mirar el action de la
etiqueta form)
UNIVERSIDAD PRIVADA TELESUP
42
En este formulario solo tenemos un texto que se llama “numero”,
por lo tanto la pagina recibirá una variable llamada número
cuando alguien haga click en el “submit”.
Como la programación se hace en la misma página hay que
preguntar si hemos recibido la variable numero (la caja de texto).
Por ese motivo es que se hace el if, si es diferente de null quiere
decir que la variable numero existe (caso contrario sería igual a
null)
ENVIÓ DE VARIABLES ENTRE PÁGINAS Es muy común enviar variables entre páginas, esto debido a la necesidad de enviar
información entre una y otra pagina sin necesidad de tener un formulario Web
Sintaxis: <a ref=pag.jsp?cod=1002&nom=Ana>Ir
a pagina</a>
Noten en el ejemplo anterior se está llamando a
una página llamada “pag”.
Se observa un signo de interrogación, esto indica
que se enviara variables, en este caso se están
enviando 2 variables la primera llamada “cod” con
el valor de “1002” y la segunda variable se llama “Nom” y el valor que contiene es
“Ana” Las variables son separadas por el signo “&”
Ejemplo: Aquí se detalla un ejemplo de envío de variables
Pagina1.jsp
<%
for(int i=1;i<=12;i++){
out.print("<br><a href='Pagina2.jsp?num="+i+"' > Tabla del "+i+"</a>");
}
%>
El resultado del código seria esto:
Cada hipervínculo llamara a Pagina2 enviando una variable llamada “num” con el valor
de 1,2,3. Así respectivamente
UNIVERSIDAD PRIVADA TELESUP
43
Pagina2.jsp
Para recibir el valor de una variable seria así:
<%
int n=Integer.parseInt(request.getParameter("num"));
out.print("Numero "+n);
%>
Donde num es el nombre de la variable que se ha recibido
Al final esta página recibirá la variable num y mostrara su valor.
UNIVERSIDAD PRIVADA TELESUP
44
TEMA 4
Insertar los códigos necesarios de lado del servidor.
Competencia:
JavaScript
UNIVERSIDAD PRIVADA TELESUP
45
Tema 04: JavaScript
INTRODUCCIÓN
Javascript es un código interpretado cuya finalidad es darle mayor interactividad a
nuestras páginas web.
La sintaxis es la siguiente:
<script language="javascript">
function nombrefun1(parametros){
} function nombrefun2(parametros){
} </script>
Generalmente el código Script va entre los tags <HEAD> </HEAD>
En el código javascript se crean funciones que luego serán llamadas desde la página
web.
Ejemplo 1: Ingresar un número y visualizar el doble y su mitad.
El código script sería el siguiente:
<script language="JavaScript">
//Aqui está la función que calculara el doble y la mitad
function calcular(){
var num;
/*En la variable num se almacena el contenido de la caja de texto txtnum se
pone form1 por que
Asi se llama el formulario form1.La función parseInt transforma el valor a entero
NOTA: para acceder a cualquier objeto del formulario se pone el nombre del
formulario el nombre del control
Y su propiedad*/
num = parseInt(form1.txtnum.value) ;
form1.txtdoble.value = num * 2;
form1.txtmitad.value = num / 2;
}
</script>
UNIVERSIDAD PRIVADA TELESUP
46
Para llamar a la función creada seria así:
<input name="cmdcalcular" type="button" value="Calcular" onClick="calcular();">
Se entiende que hay un botón llamado cmdcalcular y cajas de texto llamados txtdoble
y txtmitad.
Ahora si queremos que las cajas de texto estén desactivadas seria de la siguiente
manera:
<input name="txtmitad" type="text" id="txtmitad" readonly="true">
Noten la propiedad readonly.
Código fuente de pagina (Pag1.jsp)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="JavaScript">
function calcular(){
var num;
num = parseInt(form1.txtnum.value);
form1.txtdoble.value = num * 2;
form1.txtmitad.value = num / 2;
}
</script>
</head>
<body>
<form name="form1" method="POST">
<table border="1">
<tr>
<td>Ingrese Numero</td>
<td><input type="text" name="txtnum" value="" /></td>
</tr>
<tr>
<td>Doble</td>
UNIVERSIDAD PRIVADA TELESUP
47
<td><input type="text" name="txtdoble" value="" readonly="readonly"
/></td>
</tr>
<tr>
<td>Mitad</td>
<td><input type="text" name="txtmitad" value="" readonly="readonly"
/></td>
</tr>
<tr>
<td><input type="reset" value="Nuevo" /></td>
<td><input type="button" value="Calcular" onclick="calcular();"/></td>
</tr>
</table>
</form>
</body>
</html>
Ejemplo 2: Validación de Formulario
Ingresar datos en un formulario y enviarlos a otra página, pero antes de enviarlo
validar que se haya ingresado todos los datos.
Código fuente Pag1.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="javascript">
UNIVERSIDAD PRIVADA TELESUP
48
//función para validar si la tecla presionada es un número
function validarnum(){
t = window.event.keyCode; //Recupera el ascci de la tecla presionada
if(t>=48 && t<=57){
//si entra aquí es un numero
}else{
alert("Error solo se aceptan números");
window.event.keyCode = 0; //Esto es para que la ultima tecla presionada
no se muestre
}
}
//función para validar que solo se acepte letras
function validarletra(){
t = window.event.keyCode;
if((t>=65 && t<=90)|| (t>=97 && t<=122)|| t==32 || t==241 || t==209){
//si es mayúscula, minúscula, espacio o la ñ
}else{
alert("Error solo se aceptan letras");
window.event.keyCode = 0;
}
}
//función para validar que se ingrese los datos
function validartodo(){
cad ="";
if (document.form1.txtnom.value==""){
cad = cad +"\nIngrese Nombre";
}
if (document.form1.txtedad.value==""){
cad = cad +"\nIngrese Edad";
}
if (document.form1.txtdni.value==""){
cad = cad +"\nIngrese DNI";
}
if (document.form1.combo1.value=="0"){
cad = cad +"\nSeleccione Nacionalidad";
UNIVERSIDAD PRIVADA TELESUP
49
}
if(document.form1.rbtsexo[0].checked==false&&document.form1.rbtsexo[1].checked==
false){
cad = cad +"\nSeleccion Sexo";
}
//Se tiene 2 controles rbtsexo al tener el mismo nombre se maneja como un arreglo de
controles por eso el rbtsexo[0],rbtsexo[1]
if(cad!=""){ //si cad no está vacio
alert(cad);
return false;//se hace un return para salir de la función
}
//Confirm muestra una caja de dialogo de confirmación donde se tendrá 2 botones
“OK” y “Cancel”
if(confirm("Desea Grabar")==true){//Si presione OK al confirm.
document.form1.action="page2.jsp";//Estableciendo el action del form (a
quien se va a llamar)
document.form1.submit();//Ejecuntado el submit del formulario,
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="pag2.jsp">
<table bgcolor="gray">
<tr>
<td>Nombre</td>
<td><input type="text" name="txtnom" onkeypress="validarletra();"></td>
</tr>
<tr>
<td>Edad</td>
<td><input type="text" name="txtedad" maxlength="3"
onkeypress="validarnum();"></td> <%--Cantidad de CAracteres a ingresar--%>
</tr>
<tr>
<td>DNI</td>
UNIVERSIDAD PRIVADA TELESUP
50
<td><input type="text" name="txtdni" maxlength="8"
onkeypress="validarnum();"></td>
</tr>
<tr>
<td>Nacionalidad</td>
<td>
<select name="combo1">
<option value="0">Seleccione</option>
<option value="1">Peruana</option>
<option value="2">Extranjera</option>
</select>
</td>
</tr>
<tr>
<td>Sexo</td>
<td>
<input type="radio" name="rbtsexo" value="M">M
<input type="radio" name="rbtsexo" value="F">F
</td>
</tr>
<tr>
<td>Contraseña</td>
<td>
<input type="password" name="txtpas">
</td>
</tr>
<tr>
<td>Confirmar Contraseña</td>
<td>
<input type="password" name="txtpas2">
</td>
</tr>
</table>
<input type="reset" value="Nuevo">
<input type="button" value="Enviar Consulta" onclick="validartodo();">
</form>
</body>
UNIVERSIDAD PRIVADA TELESUP
51
Resultado pag1.jsp
Ejemplo 4: Generar clave aleatoriamente
Se debe de generar números al azar sin que se repitan y mostrarse en un arreglo de
botones, al hacer click en el botón se debe de mostrar en la caja de texto el número
que tiene el botón presionado.
<html>
<head>
<title>JSP Page</title>
<script language="javascript">
function Buscar(n){ //función que busca un numero en los botones
pos=-1;
for(i=0;i<document.form1.boton.length;i++){
if(parseInt(document.form1.boton[i].value)==n){
pos=i;
break;
}
}
return pos;
UNIVERSIDAD PRIVADA TELESUP
52
}
// document.form1.boton.length.- devuelve la cantidad de elementos que tiene el
arreglo boton
function llenar(){ //function para llenar los botones con números aleatorios
cont=0;
while(cont<10){
n=parseInt(Math.random()*10);//se genera un número aleatorio del 0 al 9
if(Buscar(n)==-1){ //Si no se encontró
document.form1.boton[cont].value=n; //agregamos al boton el numero
aleatorio
cont++;
}
}
}
function poner(caja){//Aquí se recibe un parámetro que será el botón, para
poner luego //su valor en la caja de texto
document.form1.txtclave.value+=caja.value;
}
</script>
</head>
<body onload="llenar()">
<form name="form1">
<table border="0">
<tr>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td><input type="button" value=" " name="boton"
onclick="poner(this)"/></td>
</tr>
<tr>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
UNIVERSIDAD PRIVADA TELESUP
53
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td><input type="button" value=" " name="boton"
onclick="poner(this)"/></td>
</tr>
<tr>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td><input type="button" value=" " name="boton"
onclick="poner(this)"/></td>
</tr>
<tr>
<td><input type="button" value=" " name="boton" onclick="poner(this)"
/></td>
<td></td>
<td></td>
</tr>
</table>
<br>Clave <input type="text" name="txtclave">
</form>
</body>
</html>
NOTAS:
onload="llenar()".- Aquí se está llamando a la función llenar cuando se cargue la
pagina.
onclick="poner(this)" .- Aquí se está llamando a la función poner y se está enviando el
parámetro THIS,
OBJETO THIS
Este objeto puede simplificar muchas cosas por ejemplo
Tenemos 2 cajas de texto y queremos que al hacer clic en la caja de texto nos salga
un alert con el valor que se ingreso en dicha caja de texto
UNIVERSIDAD PRIVADA TELESUP
54
<input type=text name=txtcod onclick=”mensaje(this)”>
<input type=text name=txtnom onclick=”mensaje(this)”>
function mensaje(caja){
alert(caja.value);
}
Entonces observemos que en ambas cajas se llama a la misma función y se envía
como parámetro this pero cuando se hace clic en txtcod this tomara el valor de txtcod y
cuando se hace clic en txtnom this tomara el valor de txtnom, cosa que cuando se
recibe el parámetro en la función mensaje CAJA tomara el valor con sus propiedades
del control que lo llamo.
Ejemplo 5: Generar la tabla de multiplicar del 1 al 12
<html>
<head>
<title>JSP Page</title>
</head>
<body>
<script language="javascript">
for(i=1;i<=12;i++){
document.write("<table border='1'>");
for(j=1;j<=12;j++){
document.write("<tr>");
document.write("<td>"+i+"</td>");
document.write("<td>*</td>");
document.write("<td>"+j+"</td>");
document.write("<td>=</td>");
document.write("<td>"+(i*j)+"</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
NOTA: document.write.- Sirve para visualizar o imprimir algo en javascript
UNIVERSIDAD PRIVADA TELESUP
55
Si podemos observar no hay ninguna función y eso se debe a que se quiere que
cuando cargue la pagina se ejecute lo que se ha programado en el script
ARREGLOS EN JAVASCRIPT
Para declarar un arreglo en javascript seria de la siguiente manera:
var vector = new Array(5); donde vector es el nombre de la variable y 5 es la
cantidad de elementos que tendrá esa variable empezando desde el índice 0 hasta al
4.
Se puede saber la longitud del vector mediante la propiedad length es decir:
cant = vector.length el resultado seria 5
Ejemplos:
var pais = new Array(3);
pais[0]=”peru”;
pais[1]=”mexico”;
pais[2]=”italia”;
Este mismo ejemplo podría declararse de la siguiente forma:
var pais=new Array(“peru”,”México”,”italia”)
Ejemplo 6: Tenemos una página donde se debe mostrar Información sobre Cds
disponibles a vender.
Para eso se debe mostrar el nombre del artista, el pais de origen, el precio del Cd y la
foto del CD(se debe crear arreglos paralelos donde se guardara esa información).
El resultado sería así:
UNIVERSIDAD PRIVADA TELESUP
56
El código seria así: <body>
<script language="javascript">
var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena
Herrera","Maria Conchita Alonso","Patricia Manterola");
var pais=new Array("USA","Mexico","España","Mexico","Venezuela","Mexico");
var precio=new Array(23,24,25,20,27,22);
var imag=new
Array("Jenifer.jpg","Gloria.jpg","Monica.jpg","Lorena.jpg","Maria.jpg","Patricia.jpg");
//En la parte superior se ha declarado los 4 vectores paralelos en cd se guarda el
nombre del Cd en pais el pais
//de origen en precio el precio del cd y en imag va el nombre de la imagen que
queremos insertar
document.write("<table border=1>");//Con esto estamos dibujando una tabla
document.write("<tr>");//se abre una fila
document.write("<td>Nombre del Cd</td>");
document.write("<td>Pais de Origen</td>");
document.write("<td>Precio</td>");
document.write("<td>Imagen</td>");
document.write("</tr>");//cierra la fila
//Lo anterior se pudo simplificar en una sola línea
//el for empieza de 0 hasta la longitud del vector cd que será 6 como los otros vectores
son paralelos todos tendrán la misma longitud
for(i=0;i<cd.length;i++){
document.write("<tr>");//se abre una fila
document.write("<td>" + cd[i] + "</td>");//Muestra los cd almacenados en el
vector
document.write("<td>" + pais[i] + "</td>");//Muestra los países almacenados en
el vector
document.write("<td>" + precio[i] + "</td>");//Muestra los precios almacenados
en el vector
document.write("<td><img src=" + imag[i] + " width=50
height=50></td>");//Saca la imagen
document.write("</tr>");//cierra la fila
}
UNIVERSIDAD PRIVADA TELESUP
57
/*Si analizamos veremos que se está sumando cadenas en la parte donde se agrega
la imagen notemos que hay 3 cadenas la primera es "<td><img src=" de ahí se está
sumando con el valor que tome el vector imag si la variable que controla el for está en
0 será "jenifer.jpg" y esa es la segunda cadena luego a esto se le suma una tercera
cadena que es " width=50 height=50></td>" entonces sumemos las 3 cadenas y
tenemos "<td><img src=jenifer.jpg width=50 height=50></td>" y así será para cada
elemento del vector.
Si se pone width y height es por la razón que queremos que las
imágenes salgan de ese tamaño de lo contrario saldría del tamaño
natural de la imagen*/
document.write("</table>");//Cerramos la tabla
</script>
</body>
Importante.- Noten que para esta página no se ha usado ninguna función debido a
que queremos que salga ni bien cargue la pagina además noten que el codigo script
esta dentro del tag BODY ya que si lo ponemos en HEAD no saldrá nada.
setTimeout(expresión, msec)
Este método ejecuta la expresión pasada como
argumento después de que el número de
milisegundos msec haya pasado.
Ejemplo: setTimeout ("alert('hola');",1000) .- saldrá
un mensaje alert después de 1000 milisegundos.
Ejemplo 10:
Al cargar la pagina se deberá mostrar la hora (esta debe
cambiar cada segundo), además de un mensaje que este girando.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="javascript">
UNIVERSIDAD PRIVADA TELESUP
58
var cad="Bienvenido";
function mostrar(){
a = cad.substring(0,1); //Extrae el Primer carácter
b = cad.substring(1,cad.length); //Extrae los caracteres desde el 2do
cad = b+a; //Concatenamos invertido
document.form1.txtmensaje.value = cad;
setTimeout(mostrar,500); //Permite llamar a algo cada cierto tiempo
(Milisegundos)
}
function ponerhora(){
f = new Date();
c = f.getHours() + ":" +
f.getMinutes() + ":" +
f.getSeconds();
document.form1.txthora.value = c;
setTimeout(ponerhora,1000);
}
</script>
</head>
<body onload="mostrar(),ponerhora()">
<form name="form1" method="post" action="">
<input type="text" name="txthora">
<input type="text" name="txtmensaje">
</form>
</body>
<script language="javascript">
</script>
</html>
UNIVERSIDAD PRIVADA TELESUP
59
1. Ingresa al link “HTML” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Desarrolle una página HTML con una tabla con 5 filas y 2 columnas.
Todas alineadas al centro y que cada celda tenga una imagen.
Finalmente comprima sus archivos en un Winrar y envíelo.
2. Ingresa al link “Alumnos JSP” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Crear un listado de alumnos con sus notas (para eso debemos de
tener los nombres en un arreglo y las notas en otro arreglo). Al final
debe de salir cuantos alumnos aprobaron, desaprobaron y el total de
alumnos. Tome en cuenta que una fila sale de un color y otra de otro
color. Finalmente comprima sus archivos en un Winrar y envíelo.
Lecturas Recomendadas
LENGUAJE DE HTML
http://www.desarrolloweb.com/articulos/711.php
INTRODUCCIÓN A JSP http://mygnet.net/manuales/jsp/javaserver_pages.1470
JAVASCRIPT http://www.manualdejavascript.com/
Actividades y Ejercicios
UNIVERSIDAD PRIVADA TELESUP
60
3. Ingresa al link “Alumnos JSP II” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Llene en un combo los ciclos (1 al 6) y en otro combo los cursos a
estudiar (estarán en un arreglo). Cuando se hace clic en enviar debe
de salir los datos tal como se ve en la imagen:
Finalmente comprima sus archivos en un Winrar y envíelo.
4. Ingresa al link “Javascript” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Contando con 4 arreglos paralelos (códigos, nombres, precio y
cantidad vendida) que guardan datos de suministros de computadoras,
se deberá de hacer un listado de la siguiente manera:
Finalmente comprima sus archivos en un Winrar y envíelo.
UNIVERSIDAD PRIVADA TELESUP
61
Autoevaluación
1) ¿La etiqueta HTML que crea una fila de una tabla es?
a. <table>
b. <td>
c. <tr>
d. <br>
e. <file>
2) ¿La etiqueta HTML que crea una casilla de verificación (Checked) es?
a. <checked>
b. <form>
c. <input>
d. <select>
e. <radio>
3) ¿El código JSP se incrusta dentro del HTML con las etiquetas?
a. <??>
b. <jsp>
c. <%%>
d. <body>
e. <script>
4) ¿Para recuperar un parámetro de una página hacia otra la sentencia es?
a. request.form
b. request.getparameter
c. request.querystring
d. return
e. isset
5) ¿Para imprimir los datos dentro de un jsp la sentencia es?
a. out.print
b. system.out.print
c. printer
d. document.write
e. writeline
UNIVERSIDAD PRIVADA TELESUP
62
6) ¿Muestra un mensaje o alerta en JavaScript?
a. prompt
b. window.open
c. open
d. alert
e. form
7) ¿Para imprimir en javascript es?
a. out.print
b. system.out.print
c. printer
d. document.write
e. writeline
8) ¿Cuál es el lenguaje que crea el diseño de la página web?
a. JSP.
b. JavaScript.
c. HTML.
d. Servlets.
e. XML.
9) ¿Cuál es el lenguaje que se ejecuta en el lado del cliente?
a. JSP.
b. JavaScript.
c. XML.
d. Servlets.
e. CGI.
10) ¿Cuál es el lenguaje que se ejecuta en el lado del servidor?
a. JSP.
b. JavaScript.
c. HTML.
d. VBscript.
e. JS.
UNIVERSIDAD PRIVADA TELESUP
63
Resumen
UUNNIIDDAADD DDEE AAPPRREENNDDIIZZAAJJEE II::
HTML (HyperText Markup Language) es un lenguaje de programación que se utiliza
para la creación de páginas en la WWW. Por página entenderemos el documento que
aparece en el visualizador.
En resumen las páginas web son hechas en HTML y el navegador, visualizador,
cliente o el web browser como se le quiera llamar lo interpreta, compila y ejecuta
mostrando como resultado el contenido de la pagina.
Una página JSP es archivo de texto simple que consiste en contenido HTML o XML
con elementos JSP. Cuando un cliente pide una página JSP del sitio web y no se ha
ejecutado antes, la página es inicialmente pasada al motor de JSP, el cual compila la
página convirtiéndola en Servlet, la ejecuta y devuelve el contenido de los resultados
al cliente. JSP tiene gran variedad de formas para comunicarse con las clases de
Java, servlets, applets y el servidor web.
Los métodos HTTP GET y POST envían datos al servidor. En una Aplicación JSP,
GET y POST envían los datos a un Bean, servlet, u otro componente del lado del
servidor que está manejando los datos del formulario.
En teoría, GET es para obtener datos desde el servidor y POST es para enviar datos.
Sin embargo, el método POST, pasa los datos de una longitud ilimitada como un
cuerpo de solicitud de cabecera HTTP hacia el servidor.
Javascript es un código interpretado cuya finalidad es darle mayor interactividad a
nuestras páginas web.
Es un código que se ejecuta al lado del cliente y ayudara en la interacción entre el
usuario y las páginas webs.
JavaScript es un lenguaje de programación interpretado, dialecto del estándar
ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo,
débilmente tipado y dinámico.
UNIVERSIDAD PRIVADA TELESUP
64
UNIVERSIDAD PRIVADA TELESUP
65
Introducción
a) Presentación y contextualización
En esta unidad se presenta un tutorial del uso del código java dentro de una
página web acceder a una base de datos.
Abarcando la creación de tablas y el acceso a ellas mediante código JSP,
obteniendo como resultado consultas y mantenimientos.
b) Competencia
Analiza y plantea el desarrollo de páginas dinámicas con acceso a base de
datos.
c) Capacidades
1. Identifica y desarrolla la creación de tablas dentro de una base de datos.
2. Desarrolla páginas dinámicas con acceso a base de datos.
3. Implementa consultas a base de datos desde páginas web.
4. Comprende el uso de sesiones de usuario.
d) Actitudes Aprecia las bases de datos como MySQL.
Toma una actitud con capacidad crítica para comparar la JDBC.
Valora la utilización de los recursos en páginas dinámicas.
e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:
La Unidad de Aprendizaje 02: Páginas Dinámicas con Base de Datos,
comprende el desarrollo de los siguientes temas:
TEMA 01: Introducción a Base de Datos MySQL.
TEMA 02: Introducción a Base de Datos Desde Java: JDBC.
TEMA 03: Consultas en Páginas Dinámicas.
TEMA 04: Sesiones.
UNIVERSIDAD PRIVADA TELESUP
66
TEMA 1
Identificar y desarrollar la creación de tablas dentro de una base de datos.
Competencia:
MySQL de a
Introducción Base
Datos
UNIVERSIDAD PRIVADA TELESUP
67
Desarrollo de los Temas
Tema 01: Introducción a Base de Datos MySQL
MySQL
MySQL es un gestor de base de datos sencillo de usar y
increíblemente rápido. También es uno de los motores
de base de datos más usados en Internet, la
principal razón de esto es que es gratis para
aplicaciones no comerciales.
COMANDOS PARA IMPLEMENTAR UNA BASE DE DATOS
Crear una Base de Datos
create database Comercial;
Visualizar la Lista de Base de Datos
show databases;
Activar una Base de Datos
use Comercial;
UNIVERSIDAD PRIVADA TELESUP
68
Crear Una Tabla
Crearemos dentro de la base de datos Comercial la siguiente tabla: Tabla
Productos.
CREATE TABLE producto (
codpro char(3) NOT NULL,
nompro varchar(25) NOT NULL,
marpro varchar(15) NOT NULL,
prepro double default NULL,
stockpro int(11) default NULL,
codcat char(2) NOT NULL,
PRIMARY KEY (codpro)
)
Nota: La columna de la tabla que servirá de dato distintivo único para registro
recibe el nombre de campo clave.
Insertar Registros a las Tablas
Utilizaremos el comando INSERT INTO. En el primer ejemplo se inserta un
registro y se llena datos en todas las columnas y en el segundo caso, se llena
datos solo en algunas columnas.
insert into producto values ('001','Aceite','Primor',4.99,100,'01')
insert into producto(codpro,nompro,marpro) values ('002','Jabon','Palmolive')
UNIVERSIDAD PRIVADA TELESUP
69
Eliminar un Registro
Utilizaremos el comando DELETE. En el primer ejemplo se
eliminan todos los registros de la tabla y en el segundo caso, se
eliminan los registros que cumplan con la condición.
Delete from vendedores;
Delete from vendedores where codvend=’02’;
Modificar los Datos de un Registro
Utilizaremos el comando UPDATE. En el ejemplo se modifica el apellido del vendedor
cuyo código es 02.
Update vendedores set apeven='Vidal' where codven='02';
Manipular los Registros
Para los ejemplos de manipulación trabajaremos con las siguientes tablas:
UNIVERSIDAD PRIVADA TELESUP
70
Mostrar todas las carreras
SELECT * FROM CARRERAS
Mostrar los nombres de los alumnos que son de la carrera 2
SELECT NOMALU FROM ALUMNOS WHERE CODCAR=1
Mostrar los alumnos que sean de la carrera 1 o 3 (Sentencia IN)
SELECT * FROM ALUMNOS WHERE CODCAR IN(1,3)
Mostrar los cursos ordenados por precio(Sentencia Order BY)
SELECT * FROM CURSOS ORDER BY PRECIO
UNIVERSIDAD PRIVADA TELESUP
71
Mostrar las notas del alumno 1000008 ordenadas por prom en
forma descendente
SELECT * FROM NOTAS WHERE CODALU=1000008
ORDER BY PROM DESC
Mostrar el codigo del alumno,nombre del alumno y nombre
de la carrera.(Select Multiple)
SELECT A.CODALU, A.NOMALU, C.NOMCAR FROM ALUMNOS AS
A,CARRERAS AS C WHERE A.CODCAR=C.CODCAR
Mostrar el codigo del alumno,nombre del alumno y nombre de la carrera solo
de la carrera ADMINISTRACIÓN
SELECT A.CODALU,A.NOMALU,C.NOMCAR FROM ALUMNOS AS
A,CARRERAS AS C WHERE A.CODCAR=C.CODCAR AND
C.NOMCAR='Administracion'
Mostrar el nombre del alumno,nombre del curso y prom pero solo de los
alumnos aprobados
SELECT A.NOMALU,C.NOMCUR,N.PROM FROM ALUMNOS AS A,CURSOS
AS C,NOTAS AS N WHERE A.CODALU=N.CODALU AND
C.CODCUR=N.CODCUR AND N.PROM >10
Mostrar el nombre del alumno y todas sus notas pero solo las notas del
curso de 'Taller' o de 'Economia'
SELECT A.NOMALU,C.NOMCUR,N.PP,N.TRA,N.EX,N.PROM FROM
ALUMNOS AS A,CURSOS AS C,NOTAS AS N
WHERE A.CODALU=N.CODALU AND C.CODCUR=N.CODCUR AND
(C.NOMCUR LIKE 'Taller %' OR C.NOMCUR='Economia')
Mostrar los nombres de los alumnos que
tienen Nota
SELECT A.NOMALU FROM ALUMNOS AS
A,NOTAS AS N
WHERE A.CODALU=N.CODALU
UNIVERSIDAD PRIVADA TELESUP
72
Mostrar el Mayor y menor Precio de los cursos(MAX,MIN,SUM,AVG,COUNT)
SELECT MAX(PRECIO) AS PREMA,MIN(PRECIO) AS PREME FROM
CURSOS
Mostrar la cantidad de alumnos que hay por carrera
SELECT C.NOMCAR,COUNT(A.CODALU) FROM CARRERAS AS C,
ALUMNOS AS A WHERE C.CODCAR=A.CODCAR GROUP BY C.
NOMCAR
Mostrar el Nombre del alumno y su nota promedio pero
solamente los que su nota promedio sea aprobatoria (HAVING)
SELECT A.NOMALU,AVG(N.PROM) AS PROMEDIO FROM
ALUMNOS AS A, NOTAS AS N WHERE A.CODALU=N.CODALU
GROUP BY A.NOMALU
HAVING AVG(N.PROM)>10
PROCEDIMIENTOS ALMACENADOS
Los procedimientos almacenados y funciones son nuevas funcionalidades de la
versión de MySQL 5.0. Un procedimiento almacenado es un conjunto de
comandos SQL que pueden almacenarse en el servidor. Una vez que se hace, los
clientes no necesitan relanzar los comandos individuales pero pueden en su lugar
referirse al procedimiento almacenado.
Algunas situaciones en que los procedimientos almacenados pueden ser
particularmente útiles:
Cuando múltiples aplicaciones cliente se escriben en distintos lenguajes o
funcionan en distintas plataformas, pero necesitan realizar la misma operación en
la base de datos.
Cuando la seguridad es muy importante. Los bancos, por
ejemplo, usan procedimientos almacenados para todas las
operaciones comunes. Esto proporciona un entorno seguro
y consistente, y los procedimientos pueden asegurar que
cada operación se loguea apropiadamente. En tal entorno, las
aplicaciones y los usuarios no obtendrían ningún acceso directo a las tablas de la
base de datos, sólo pueden ejecutar algunos procedimientos almacenados.
UNIVERSIDAD PRIVADA TELESUP
73
Teniendo de ejemplo la tabla productos crear lo siguientes procedimientos:
Creación de la Tabla
Create table producto(
cod_art varchar(5) NOT NULL DEFAULT '',
nom_art varchar(30),
pre_art decimal(10,0),
stk_art int,
cod_cat varchar(3),
cod_mar int(3),
PRIMARY KEY (cod_art) );
Procedimiento “Grabar”
create procedure grabar (xcod varchar(5),xnom varchar(30),xpre
decimal(10,0),xstk int,xcat varchar(3),xmar int(3))
insert into producto values (xcod,xnom,xpre,xstk,xcat,xmar);
Llamando al procedimiento:
call grabar("A0001","TELEVISOR LCD","1200",30,"c01",1);
Procedimiento “Eliminar”
create procedure eliminar(xcod varchar(5))
delete from producto where cod_art=xcod;
Llamando al procedimiento:
call eliminar("A0001")
Procedimiento “Listar”
create procedure listar()
select * from producto;
Llamando al procedimiento:
call listar()
UNIVERSIDAD PRIVADA TELESUP
74
TEMA 2
Desarrollar páginas dinámicas con acceso a base de datos.
Competencia:
a
Java: JDBC
Base Introducción
desde de
Datos
UNIVERSIDAD PRIVADA TELESUP
75
Las tres clases que manejaremos en nuestro ejemplo serán Connection para
realizar la conexión a la base de datos, PreparedStatement que será la que
contenga la sentencia SQL y ResultSet que será la que contenga el
resultado.
4
Tema 02: Introducción a Base de Datos Desde Java: JDBC
INTRODUCCIÓN A JDBC
La capacidad para acceder a bases de datos desde Java la
ofrece la API JDBC (Java DataBase Conectivity).
JDBC es un estándar para manejar bases de datos
en Java.
Gracias a este API nosotros podemos conectarnos a
diferentes proveedores de base de datos tales como
(Microsoft SQL Server, Oracle, MySQL, Interbase, Microsoft Access, IBM DB2,
PostgreSQL, etc.) Usando instrucciones SQL (Structured Query Language =
Lenguaje estructurado de consultas).
JDBC realiza varias funciones:
Conecta con la base de datos (BD en adelante); la BD puede ser local (en nuestro
PC) o remota (en otro PC)
Envía las sentencias SQL
Manipula los registros de la BD
Recoge el resultado de la ejecución de las sentencias SQL
.
UNIVERSIDAD PRIVADA TELESUP
76
Lo primero que tenemos que saber para realizar la
conexión a la base de datos es donde se encuentra
dicha base de datos. Para hacer referencia a la base
de datos lo podemos hacer directamente mediante la
IP o, por ejemplo, mediante una referencia ODBC. (De
ahí veremos que es un ODBC).
Una vez conocemos la localización de nuestra base de datos debemos de saber el
nombre de la clase que tiene implementada la conexión a la base de datos. Es lo
que llamamos driver. Dependiendo de la forma en la que este implementado el
driver, este, recibirá el apelativo de driver tipo1, tipo2, tipo3 o tipo4.
UNIVERSIDAD PRIVADA TELESUP
77
Si nos ponemos a escribir código, lo primero que debemos de hacer es
instanciar la clase del driver.
Class.forName(“nombre del driver”).newInstance();
Dicha clase será la que nos proporcione una conexión a la
base de datos, y como bien hemos dicho, la conexión la
guardaremos en una instancia de la clase Connection.
Connection cn = DriverManager.getConnection(“nombre de la conexión”);
Un vez que hemos conseguido una conexión a la base de datos lo siguiente será
el preparar una sentencia SQL en un PreparedStatement. No haremos nada
complicado con el SQL, algo así como...
PreparedStatement cmd=cn.prepareStatement("Sentencia
SQL");
Construida nuestra sentencia, realizamos la ejecución de la
misma. Y el resultado al ResultSet.
Si la sentencia SQL es un select entonces
ResultSet rs=cmd.executeQuery();
Un ResultSet no deja de ser una especie de matriz (filas x columnas) que
deberemos de recorrer mediante el movimiento de un cursor. Y la forma más fácil
en Java es mediante un bucle while. Y para acceder a las columnas bastará con
utilizar los métodos getXXX del ResultSet: getString() para las cadenas de texto,
getDouble() para los decimales, getDate() para las fechas,......
while (rs.next()){
out.print (rs.getString("deporte"));//deporte es el nombre de un campo
}
Si en caso la sentencia SQL es un insert update, delete, etc. sería así:
UNIVERSIDAD PRIVADA TELESUP
78
int rs=cmd executeUpdate();
Donde rs será un entero que guardara la cantidad de filas afectadas por la
instrucción SQL que se ha ejecutado.
Una vez que hemos finalizado el cometido de nuestro
ejercicio deberemos de cerrar las conexiones a la base de
datos. Para ello invocaremos el método close() sobre los
tres objetos mencionados.
Importante:
Debemos de ejecutar nuestro código en un bloque try-catch que controle el
SQLException. Excepción común que se produce en el acceso a la base de datos.
TIPOS DE DRIVERS
Un driver JDBC puede pertenecer a una de cuatro categorías diferentes en cuanto
a la forma de operar.
Puente JDBC-ODBC
La primera categoría de drivers es la utilizada por Sun inicialmente para
popularizar JDBC y consiste en aprovechar todo lo existente, estableciendo un
puente entre JDBC y ODBC. Este driver convierte todas las llamadas JDBC a
llamadas ODBC y realiza la conversión correspondiente de los resultados.
UNIVERSIDAD PRIVADA TELESUP
79
La ventaja de este driver, que se proporciona con el JDK, es que Java dispone de
acceso inmediato a todas las fuentes posibles de bases de datos y no hay que
hacer ninguna configuración adicional aparte de la ya
existente. No obstante, tiene dos desventajas muy
importantes; por un lado, la mayoría de los drivers
ODBC a su vez convierten sus llamadas a llamadas a
una librería nativa del fabricante DBMS, con lo cual la
lentitud del driver JDBC-ODBC puede ser
exasperante, al llevar dos capas adicionales que no
añaden funcionalidad alguna; y por otra parte, el
puente JDBC-ODBC requiere una instalación ODBC ya existente y configurada. Lo
anterior implica que para distribuir con seguridad una aplicación Java que use
JDBC habría que limitarse en primer lugar a entornos Windows (donde está
definido ODBC) y en segundo lugar, proporcionar los drivers ODBC adecuados y
configurarlos correctamente. Esto hace que este tipo de drivers esté totalmente
descartado en el caso de aplicaciones comerciales, e incluso en cualquier otro
desarrollo, debe ser considerado como una solución transitoria, porque el
desarrollo de drivers totalmente en Java hará innecesario el uso de estos puentes.
Java/Binario
Este driver se salta la capa ODBC y habla directamente con la librería nativa del
fabricante del sistema DBMS (como pudiera ser DB-Library para Microsoft SQL
Server o CT-Lib para Sybase SQL Server). Este driver es un driver 100% Java
pero aún así necesita la existencia de un código binario (la librería DBMS) en la
máquina del cliente, con las limitaciones y problemas que esto implica.
UNIVERSIDAD PRIVADA TELESUP
80
100% Java/Protocolo Nativo
Es un driver realizado completamente en Java que se comunica
con el servidor DBMS utilizando el protocolo de red nativo del
servidor. De esta forma, el driver no necesita
intermediarios para hablar con el servidor y
convierte todas las peticiones JDBC en
peticiones de red contra el servidor. La ventaja
de este tipo de driver es que es una solución
100% Java y, por lo tanto, independiente de la
máquina en la que se va a ejecutar el programa.
Igualmente, dependiendo de la forma en que
esté programado el driver, puede no necesitar
ninguna clase de configuración por parte del
usuario. La única desventaja de este tipo de
drivers es que el cliente está ligado a un
servidor DBMS concreto, ya que el protocolo
de red que utiliza MS SQL Server por ejemplo
no tiene nada que ver con el utilizado por
DB2, PostGres u Oracle. La mayoría de los fabricantes de bases de datos han
incorporado a sus propios drivers JDBC del segundo o tercer tipo, con la ventaja
de que no suponen un coste adicional.
UNIVERSIDAD PRIVADA TELESUP
81
100% Java/Protocolo independiente
Esta es la opción más flexible, se trata de un
driver 100% Java / Protocolo independiente, que
requiere la presencia de un intermediario en el
servidor. En este caso, el driver JDBC hace las
peticiones de datos al intermediario en un
protocolo de red independiente del servidor
DBMS. El intermediario a su vez, que está ubicado en el lado del servidor,
convierte las peticiones JDBC en peticiones nativas del sistema DBMS. La ventaja
de este método es inmediata: el programa que se ejecuta en el cliente, y aparte de
las ventajas de los drivers 100% Java, también presenta la independencia
respecto al sistema de bases de datos que se encuentra en el servidor.
De esta forma, si una empresa distribuye una aplicación Java para que sus
usuarios puedan acceder a su servidor MS SQL y posteriormente decide cambiar
el servidor por Oracle, PostGres o DB2, no necesita volver a distribuir la
aplicación, sino que únicamente debe reconfigurar la aplicación residente en el
servidor que se encarga de transformar las peticiones de red en
peticiones nativas. La única desventaja de este tipo de drivers
es que la aplicación intermediaria es una aplicación
independiente que suele tener un coste adicional por
servidor físico, que hay que añadir al coste del servidor de
bases de datos.
UNIVERSIDAD PRIVADA TELESUP
82
En el Tutorial todos los ejemplos estarán referidos al puente JDBC-ODBC y a la
conectividad JDBC con servidores SQL comerciales Si el lector quiere seguir
experimentando sin necesidad de adquirir paquetes comerciales, en el caso de
Windows puede utilizar el conocido mSQL (mini SQL), un servidor SQL
escrito por David J. Hughes y que es de distribución shareware,
siendo gratuita para fines no comerciales y de investigación; y en el
caso de Linux, aunque también se puede utilizar mSQL, el autor
recomienda PostGres, que es un sistema de base de datos
relacional que une las estructuras clásicas con los
conceptos de programación orientada a objetos.
Lógicamente, el lector no debe esperar de mSQL una potencia, rendimiento o
compatibilidad con ANSI SQL como la que tienen los servidores SQL comerciales,
aunque en el caso de PostGres la funcionalidad es al menos igual a otras bases
de datos profesionales existentes en el mercado; y aunque, como casi todos los
productos Linux, carece de un interfaz cómodo
JDBC URL
Proporciona una forma de identificar una fuente de datos. Es particular para cada
tipo y fabricante de Driver. Pueden identificarse a través de servicios como DNS,
NIS, NIS+, etc.
Manejador Base de
Datos
URL
SQL Server jdbc:odbc:DSN
MySQL jdbc:mysql://localhost/bd
PostgreSQL jdbc:postgresql://localhost/bd
Oracle jdbc:oracle:thin:@localhost:1521:bd
UNIVERSIDAD PRIVADA TELESUP
83
Conexión con SQL Server:
Conexión con Oracle:
Conexión con MySQL
Conexión con Postgresql:
NOTA: Si la conexión fuera con SQL server el driver y la conexión sería el
siguiente: Class.forName("sun.jdbc.odbc.JdbcOdbcDriver").newInstance();
Connection cn=DriverManager.getConnection("jdbc:odbc:coneJSP");
Donde coneJSP es el nombre de la conexión ODBC que se tiene que crear en la
PC
UNIVERSIDAD PRIVADA TELESUP
84
ODBC
Es un tipo de arquitectura con la cual los datos existentes son independientes de
la plataforma o del formato.
Crear un Nuevo DSN (Data Source Name)
Para realizar la conexión a una base de datos ODBC
necesitaremos crear un perfil DSN desde el panel de
control y posteriormente accederemos a la base de
datos a partir del nombre del perfil. En el perfil DSN
lo que se hace es indicar el driver a utilizar, así como
el archivo o archivos del origen de datos. Estos son los pasos a llevar a cabo para
configurar un perfil DSN.
Pasos para Crear un Origen de Datos (Conexión ODBC):
Entrar a Inicio – Configuración – Panel de Control – Herramientas Administrativas
– Orígenes de datos ODBC.
Luego escogemos la pestaña DSN de Usuario y hacemos clic en agregar
Escogemos el proveedor
con el cual queremos
trabajar en este caso será
SQL Server
UNIVERSIDAD PRIVADA TELESUP
85
Ponemos un nombre a la conexión en este caso “ConeSQL” y escogemos el
servidor donde está la base de datos (Comúnmente es el mismo nombre de
la PC.)
UNIVERSIDAD PRIVADA TELESUP
86
Luego se debe de escoger la base de datos a la cual nos queremos conectar.
UNIVERSIDAD PRIVADA TELESUP
87
Y le damos finalizar para terminar el asistente.
NOTA:
Se podrá conectar a otra base de
datos si lo desea, escogiendo el
proveedor adecuado en la primera
parte del asistente.
UNIVERSIDAD PRIVADA TELESUP
88
TEMA 3
Implementar consultas a base de datos desde páginas web.
Competencia:
Dinámicas
en Páginas Consultas
UNIVERSIDAD PRIVADA TELESUP
89
Tema 03: Consultas en Páginas Dinámicas
INTRODUCCIÓN
En la presente unidad veremos cómo hacer diferentes consultas y mantenimientos
a través de las paginas JSP que se conectaran con una base de datos en MySQL.
Primero debemos crear el proyecto como ya está definido en la UNIDAD 1
Tenemos que agregar una librería para poder trabajar con MySQL, nos vamos a la
carpeta “Library” clic derecho “Add Library”
Y seleccionamos la librería que nos permita trabajar con MySQL
UNIVERSIDAD PRIVADA TELESUP
90
Al finalizar debe salir la librería agregada
Ahora si podemos empezar a trabajar.
Ejemplo 1: Listar los datos de la tabla Cargos en un combobox (idcargo de
tipo entero, y nomcargo de tipo varchar)
Primero se importa esta librería en la página para así poder utilizar las sentencias
SQL
<%@ page import="java.sql.*" %>
<html>
<body>
<% try{
//Aquí va el driver de conexión que en este caso será el Driver de MySQL
Class.forName("com.mysql.jdbc.Driver").newInstance();
/*Aquí se declara la conexión que se llama cn,
luego se dice que se conectara al servidor
local llamado “localhost”, el puerto por el cual
se entra a MySQL es 3306 por defecto, el
nombre de la base de datos es “northwind”.
Luego se establece el usuario del MySQL que
por defecto es “root” y de ahí se pone la
contraseña que está vacía*/
Connection cn;
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
;
UNIVERSIDAD PRIVADA TELESUP
91
/*Se prepara la sentencia SQL a ejecutar que en este caso será un select */
PreparedStatement da;
da = cn.prepareStatement("Select * from cargos");
/* Se llena en un resultset lo que ha ejecutado la variable “da” que es la que ha la
preparado la sentencia
El resultset es un conjunto de datos, será una matriz que tendrá filas y
Columnas*/
ResultSet tbl=da.executeQuery(); %>
<select name="combo1"> <!--Se crea un combo con HTML-->
<%while(tbl.next()){ // Recorremos el resultset mientras que se pueda leer
%>
<option
value="<%=tbl.getInt(“idcargo”)%>"><%=tbl.getString(“nomcargo”)%></option>
<%}%>
</select><!--Se cierra el combo con HTML-->
<%}catch(Exception e){
out.print(e);
}
%>
</body>
</html>
NOTA:
tbl.next() avanza y lee un registro dentro del resultset si pudo
leerlo esta función devolverá TRUE
tbl.getInt(“idcargo” ) recupera el código de cargo del resultset,
dependiendo en que fila está ubicada
Se pone getInt por que el campo es entero, si fuera getString
es porque el campo al cual se está accediendo es cadena
tbl.getString(“nomcargo”) recupera el nombre del cargo
UNIVERSIDAD PRIVADA TELESUP
92
Ejercicios Resueltos Base de Datos
Tomar en cuenta que el proveedor será MySQL y se cuenta con una base de
datos llamada NORTHWIND la cual tiene tablas, cargocontacto, clientes,
empleados, etc.
Llenar un combo con cargos y al escoger uno deben salir los clientes que
ocupan ese cargo.
Ejer11.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="Ejer12.jsp">
<% try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
;
PreparedStatement da = null;
da = cn.prepareStatement("Select Distinct CargoContacto from clientes");
ResultSet tbl=da.executeQuery();
String cargo="";%>
<select name="combo1">
<%while(tbl.next()){
cargo=; tbl.getString("Cargocontacto") %>
<option value="<%=cargo%>"><%=cargo%></option>
<%}%>
</select>
UNIVERSIDAD PRIVADA TELESUP
93
<%}catch(Exception e){
out.print(e);
}
%>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Ejer12.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<% try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
; PreparedStatement da = null;
String cargo="";
cargo=request.getParameter("combo1");
da = cn.prepareStatement("Select * from clientes where
cargocontacto=’”+cargo+”’");
ResultSet tbl=da.executeQuery();%>
<table border="1">
UNIVERSIDAD PRIVADA TELESUP
94
<%while(tbl.next()){%>
<tr>
<td><%=tbl.getString("IdCliente")%></td>
<td><%=tbl.getString("NombreCia")%></td>
<td><%=tbl.getString("Direccion")%></td>
</tr>
<%}%>
</table>
<%
}catch(Exception e){
out.print(e);
}
%>
</body>
</html>
Llenar un combo con empleados al escoger un empleado deber salir sus
pedidos en la misma pagina
Ejer21.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post"
action="Ejer21.jsp">
<% try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
UNIVERSIDAD PRIVADA TELESUP
95
Connection
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
;
PreparedStatement da = null;
da = cn.prepareStatement("Select IdEmpleado,Nombre + ' ' + Apellidos as
nombre from Empleados");
ResultSet tbl=da.executeQuery();
%>
<select name="combo1">
<%while(tbl.next()){%>
<option
value="<%=tbl.getInt("IdEmpleado")%>"><%=tbl.getString("nombre")%></option>
<%}
tbl.close();%>
</select>
<input type="submit" value="Enviar">
</form>
<%
if(request.getParameter("combo1")!=null){
int cod=Integer.parseInt(request.getParameter("combo1"));
da = cn.prepareStatement("Select * from PedidosCabe where
idempleado="+cod);
ResultSet tbl2=da.executeQuery();%>
<table border=1>
<%while(tbl2.next()){%>
<tr>
<td><%=tbl2.getInt("IdPedido")%></td>
<td><%=tbl2.getDate("FechaPedido")%></td>
<tr>
<%}
tbl2.close();
}
%>
UNIVERSIDAD PRIVADA TELESUP
96
<% da.close();
cn.close();
}catch(Exception e){
out.print(e);
}%>
</body>
</html>
Llenar un combo con clientes al escoger un cliente deberá de salir sus
pedidos
Ejer31.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="Ejer31.jsp">
<% try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
;
PreparedStatement da = null;
da = cn.prepareStatement("Select IdCliente,NombreCia from Clientes");
ResultSet tbl=da.executeQuery();
%>
<select name="combo1" onchange="form1.submit();">
<%
String cod="",nom="";
while(tbl.next()){
cod=tbl.getString("IdCliente");
UNIVERSIDAD PRIVADA TELESUP
97
nom=tbl.getString("NombreCia");%>
<%if(cod.equalsIgnoreCase(request.getParameter("combo1"))){%>
<option value="<%=cod%>" SELECTED><%=nom%></option>
<%}else{%>
<option value="<%=cod%>"><%=nom%></option>
<%}%>
<%}
tbl.close();%>
</select>
</form>
<%
if(request.getParameter("combo1")!=null){
String xcod=request.getParameter("combo1");
da = cn.prepareStatement("Select * from PedidosCabe where
idCliente=’”+xcod+”’");
ResultSet tbl2=da.executeQuery();%>
<table border=1>
<%while(tbl2.next()){%>
<tr>
<td><%=tbl2.getInt("IdPedido")%></td>
<td><%=tbl2.getDate("FechaPedido")%></td>
<tr>
<%}
tbl2.close();
}
%>
<% da.close();
cn.close();
}catch(Exception e){
out.print(e);
}%>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
98
Llenar un combo con categorías al
escoger una categoría deberá salir
en otro combo sus productos, al
escoger el producto deberá salir el
detalle de los pedidos (numero de
pedido, cantidad, etc.) donde se han
vendido esos productos
Ejer41.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="Ejer41.jsp">
<% try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/northwind”,”root”,”")
;
PreparedStatement da = null;
da = cn.prepareStatement("Select IdCategoria,NombreCategoria from
Categorias");
ResultSet tbl=da.executeQuery();
int codcat=0,codprod=0;
int cod=0;
String nom="";
%>
<select name="combo1" onchange="form1.submit();">
<%
if(request.getParameter("combo1")==null){
UNIVERSIDAD PRIVADA TELESUP
99
codcat=0;
}else{
codcat=Integer.parseInt(request.getParameter("combo1"));
}
while(tbl.next()){
cod=tbl.getInt("IdCategoria");
nom=tbl.getString("NombreCategoria");%>
<%if(cod==codcat){%>
<option value="<%=cod%>"
SELECTED><%=nom%></option>
<%}else{%>
<option value="<%=cod%>"><%=nom%></option>
<%}%>
<%}
tbl.close();%>
</select>
<%
if(request.getParameter("combo1")!=null){
da = cn.prepareStatement("Select IdProducto,NombreProducto from
Productos where IdCategoria=?");
da.setInt(1,codcat);
// Esto es otra forma de asignar una variable al
da sin concatenar
tbl=da.executeQuery();
%>
<select name="combo2"
onchange="form1.submit();">
<%
if(request.getParameter("combo2")==null){
codprod=0;
}else{
codprod=Integer.parseInt(request.getParameter("combo2"));
}
UNIVERSIDAD PRIVADA TELESUP
100
while(tbl.next()){
cod=tbl.getInt("IdProducto");
nom=tbl.getString("NombreProducto");%>
<%if(cod==codprod){%>
<option value="<%=cod%>" SELECTED><%=nom%></option>
<%}else{%>
<option value="<%=cod%>"><%=nom%></option>
<%}%>
<%}
tbl.close();%>
</select>
<%}%>
</form>
<%
if(request.getParameter("combo2")!=null){
da = cn.prepareStatement("Select * from PedidosDeta where
idProducto=?");
da.setInt(1,codprod);
tbl=da.executeQuery();%>
<table border=1>
<%while(tbl.next()){%>
<tr>
<td><%=tbl.getInt("IdPedido")%></td>
<td><%=tbl.getInt("Cantidad")%></td>
<tr>
<%}
tbl.close();
}
%>
<% da.close();
cn.close();
}catch(Exception e){
out.print(e);
}%>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
101
TEMA 4
Comprender el uso de sesiones de usuario.
Competencia:
Sesiones
UNIVERSIDAD PRIVADA TELESUP
102
Tema 04: Sesiones
INTRODUCCIÓN
Una sesión es una serie de comunicaciones entre
un cliente y un servidor en la que se realiza un
intercambio de información. Por medio de una
sesión se puede hacer un seguimiento de un
usuario a través de la aplicación.
El tiempo de vida de una sesión comienza cuando un usuario se conecta por
primera vez a un sitio web pero su finalización puede estar relacionada con tres
circunstancias:
- Cuando se abandona el sitio web.
- Cuando se alcanza un tiempo de inactividad que es previamente establecido, en
este caso la sesión es automáticamente eliminada. Si el usuario siguiera
navegando se crearía una nueva sesión.
- Se ha cerrado o reiniciado el servidor.
Una posible aplicación de las sesiones es en el comercio electrónico. En este caso
una sesión permite ir eligiendo una serie de productos e irlos añadiendo a nuestro
“carrito” y así hasta finalizar la compra. Sin el uso de sesiones no se podría hacer
porque al ir navegando de una página a otra se iría perdiendo toda la información.
También se utilizan para la identificación de usuarios, en la que se deben de
introducir un login y un password. Después de haber hecho esto el usuario tendrá
una serie de permisos sobre las páginas que va a visitar, de
tal forma que si un usuario intenta pasar a una
página si haberse identificado, el sistema
comprobará que no se ha identificado y sería re
direccionado a la página de identificación. Para
poder realizarse estas operaciones es necesario
almacenar en una sesión la información necesaria
para saber que el usuario se ha identificado
correctamente.
UNIVERSIDAD PRIVADA TELESUP
103
Para poder hacer uso de las sesiones en JSP hay que poner el atributo session de
la directiva page a true, de esta forma se notifica al contenedor que la página
interviene en un proceso que utiliza las sesiones del protocolo HTTP:
<%@page session=’true’%>
El manejo de las sesiones impide el
intercambio de datos entre ellas ya que se
trata información específica para cada
usuario e incluso si se trata del mismo
usuario.
En JSP las acciones que se pueden realizar
sobre las sesiones se llevan a cabo
mediante la interface HttpSession y los métodos que implementa. Esta interfaz
está incluida dentro del paquete javax.servlet.http y es utilizada por el
contenedor de páginas JSP para crear una sesión entre el servidor y el cliente.
Para obtener la sesión de un usuario se utiliza el método getSession() que
devuelve una interfaz de tipo HttpSession.
<%
HttpSession sesion=request.getSession();
%>
Una vez creado el objeto de tipo sesión es posible acceder a una serie de datos
sobre la
Misma. Uno de estos datos es idSession que devuelve
un identificador único asociado a una sesión:
Para guardar un objeto en una sesión se utiliza el
método setAttribute(), que ha sustituido al método
putValue(). Este método utiliza dos argumentos:
- El primero es el nombre que identificará a esa
variable.
- El segundo es el dato que se va a guardar.
SetAttribute(java.lang.String name, java.lang.Object value)
UNIVERSIDAD PRIVADA TELESUP
104
Un ejemplo de cómo guardar una cadena de texto en la sesión:
<%@page import=”java.util.*”
session=”true” %>
<%
HttpSession
sesion=request.getSession();
sesion.setAttribute(“trabajo”,”Paginas
de JSP”);
%>
Si se quiere pasar un parámetro que no sea un objeto es necesario realizar una
conversión:
<%@page import=”java.util.*” session=”true” %>
<%
HttpSession sesion=request.getSession();
Integer edad=new Integer(26);
sesion.setAttribute(“edad”,edad);
%>
Los datos que se guardan en la sesión permanecen ahí a la espera de ser
utilizados. Para ello es necesario realizar el proceso contrario a cuando se graban,
comenzando por la recuperación del objeto de la sesión para empezar a ser
tratado.
Para poder realizar este paso se utiliza el método getAttribute() (anteriormente se
utilizaba
El método getValue(), pero este método se encuentra en desuso), utilizando como
argumento el nombre que identifica al objeto que se quiere recuperar.
getAttribute(java.lang,String nombre)
Un ejemplo de recuperación de objetos
almacenados en la sesión:
<%
HttpSession sesion=request.getSession();
Sesion.getAttribute(“nombre”);
%>
UNIVERSIDAD PRIVADA TELESUP
105
Cuando este método devuelve el objeto no
establece en ningún momento de qué tipo de
objeto se trata (String, Vector...)
Por ello si se conoce previamente el tipo de
objeto que puede devolver tras ser recuperado
de la sesión es necesario realizar un casting,
para convertir el objeto de tipo genérico al objeto exacto que se va a usar. Para
realizar esta operación se añade el tipo de objeto al lado de tipo HttpSession que
utiliza el método getAttribute() para obtener el objeto que devuelve:
<%
HttpSession sesion=request.getSession();
String nombre=(String)sesion.getAttribute(“nombre”);
out.println(“Contenido de nombre: “+nombre);
%>
Si no existe ningún objeto almacenado en la sesión bajo el identificador que se
utiliza en el método getAttribute(), el valor devuelto será null. Por ello habrá que
prestar especial atención ya que si se realiza el casting de un valor null el
contenedor JSP devolverá un error. Lo mejor en estos casos es adelantarse a los
posibles errores que pueda haber.
<%
if(sesion.getAttribute(“nombre”)!=null)
{
String
nombre=(String)sesion.getAttribute(“nombre”);
out.println(“Contenido de nombre: “+nombre);
}
%>
UNIVERSIDAD PRIVADA TELESUP
106
Ejemplo 1: Llenar un vector con
nombres y guardarlos en una sesión,
luego al hacer click en el vínculo se
llamara a otra página donde se mostrara
lo guardado en la sesión, así como
también se agregara 2 datos más.
Código Pag1.jsp:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="true" %>
<%@ page import="java.util.Vector" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<%
Vector v=new Vector();
v.add("Juana");
v.add("Pedro");
v.add("Maria");
HttpSession s=request.getSession();
s.setAttribute("nombres",v);
%>
<a href="pag2.jsp">Ir a pagina 2</a>
</body>
</html>
Resultado Pag1.jsp:
UNIVERSIDAD PRIVADA TELESUP
107
Código Pag2.jsp:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-
8"%>
<%@ page session="true" %>
<%@ page import="java.util.Vector"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<%
HttpSession s=request.getSession();
Vector v;
v=(Vector)s.getAttribute("nombres");
for(int i=0;i<v.size();i++){
out.print("<br>"+v.get(i));
}
v.add("Otra vez Maria");
v.add("Otra vez Juana");
s.setAttribute("nombres",v);
%>
<a href="pag2.jsp">Clickea</A>
</body>
</html>
Resultado Pag2.jsp:
UNIVERSIDAD PRIVADA TELESUP
108
Si hacemos click en “Clickea” se observara lo siguiente
Ejemplo: Ingresar datos en una página (Pag3), al hacer click en un botón
enviar los datos a otra pagina donde se almacenaran en una sesión(Pag4),
además se tendrá un link que llamara a otra pagina donde se mostrara lo que
contiene la sesión (Pag5)
Código pag3.jsp
<%@page contentType="text/html"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" method="post" action="pag4.jsp">
<br>Ingrese Código : <input type="text"
name="txtcod">
<br>Ingrese Nombre : <input
type="text" name="txtnom">
<br>Ingrese Edad : <input type="text"
name="txtedad">
<BR><input type="submit"
value="Enviar">
</form>
<a href="pag5.jsp">Listar</a>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
109
Resultado pag3.jsp
Código pag4.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="true" %>
<%@ page import="java.util.Vector" %>
<%@ page import="Idat.Java.Beans.Alumno" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
<%
String xcod,xnom;
int xedad;
xcod =request.getParameter("txtcod");
xnom =request.getParameter("txtnom");
xedad=Integer.parseInt(request.getParameter("txtedad"));
Alumno a=new Alumno();
a.setCod(xcod);
a.setNom(xnom);
a.setEdad(xedad);
UNIVERSIDAD PRIVADA TELESUP
110
Vector v;
HttpSession s=request.getSession();
if(s.getAttribute("datos")==null){
v=new Vector();
}else{
v=(Vector)s.getAttribute("datos");
}
v.add(a);
s.setAttribute("datos",v);
%>
<br>Se grabaron los datos.
<br><a href="pag3.jsp">Regresar</a>
</body>
</html>
Código pag5.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="true" %>
<%@ page import="java.util.Vector" %>
<%@ page
import="Idat.Java.Beans.Alumno" %>
UNIVERSIDAD PRIVADA TELESUP
111
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<%
HttpSession s=request.getSession();
if(s.getAttribute("datos")==null){
out.print("No hay datos");
}else{
Vector v;
Alumno a;
v=(Vector)s.getAttribute("datos");
for(int i=0;i<v.size();i++){
a=(Alumno)v.get(i);
out.print("<br>" + a.getCod()+"-"+a.getNom()+"-"+a.getEdad());
}
}
%>
<br><a href="pag3.jsp">Regresar</a>
</body>
</html>
UNIVERSIDAD PRIVADA TELESUP
112
1. Ingresa al link “MySQL” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Con código SQL crear una tabla llamada cliente con los
campos (código, nombre, dirección crédito), además crear
los procedimientos almacenados para grabar, modificar,
eliminar y listar (todo es Mysql)
Desarrollar una página que muestre el listado de la tabla
creada.(Use sentencia SQL)
Desarrollar una página donde se pueda ingresar datos a la
tabla creada. (Use sentencia SQL)
Finalmente comprima sus archivos en un Winrar y envíelo
Lecturas Recomendadas
JSP CON MYSQL http://www.programacionfacil.com/java_jsp/start
SESIONES
http://nachxs.wordpress.com/2008/10/09/manejo-de-sesiones-con-servlets-en-netbeans-61/
Actividades y Ejercicios
UNIVERSIDAD PRIVADA TELESUP
113
Autoevaluación
1) ¿Qué es MySQL?
a. Lenguaje de programación.
b. Software para diseñar BD.
c. Editor de texto.
d. Editor HTML.
e. Editor JSP.
2) ¿Sentencia que permite modificar los datos en MySQL?
a. Update.
b. Delete.
c. Insert.
d. Drop.
e. Alter.
3) ¿Para hacer la conexión a la base de datos se necesita un objeto de tipo?
a. PreparedStatement.
b. ResultSet.
c. Connection.
d. CallableStatement.
e. Array.
4) ¿Se encarga de preparar la sentencia SQL?
a. PreparedStatement.
b. ResultSet.
c. Connection.
d. CallableStatement.
e. Array.
5) ¿Es una matriz que tendrá filas y columnas con los datos de un
preparedStatement?
a. PreparedStatement.
b. ResultSet.
c. Connection.
d. CallableStatement.
e. Array.
UNIVERSIDAD PRIVADA TELESUP
114
6) ¿En JSP sirve para recuperar un campo de tipo entero de un resultset?
a. GetString (“campo”).
b. GetInt (“campo”).
c. GetInteger (“campo”).
d. GetDate (“Campo”).
e. GetObject (“campo”).
7) ¿Qué librería se agrega al proyecto para que funcione la programación con
base de datos?
a. SQL.
b. MySQL.
c. JDBC.
d. MySQL Jdbc Driver.
e. Driver.
8) ¿Cuándo se quiere ejecutar una instrucción SELECT desde JSP la
sentencia es?
a. ExecuteQuery.
b. ExecuteUpdate.
c. PreparedStatement.
d. Resultset.
e. Execute.
9) ¿Para asignar un valor a una sesión la sentencia es?
a. SetAttribute.
b. GetAttribute.
c. Request.
d. Querystring.
e. Form.
10) ¿Para recuperar el valor de una sesión la sentencia es?
a. SetAttribute.
b. GetAttribute.
c. Request.
d. Querystring.
e. Form.
UNIVERSIDAD PRIVADA TELESUP
115
Resumen
UUNNIIDDAADD DDEE AAPPRREENNDDIIZZAAJJEE iiii::
MySQL es un gestor de base de datos sencillo de usar y increíblemente rápido.
También es uno de los motores de base de datos más usados en Internet, la principal
razón de esto es que es gratis para aplicaciones no comerciales.
MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario con
más de seis millones de instalaciones. Es muy utilizado en aplicaciones web, como
Drupal o phpBB, en plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python).
La capacidad para acceder a bases de datos desde Java la ofrece la API JDBC (Java
DataBase Conectivity). JDBC es un estándar para manejar bases de datos en Java.
Gracias a este API nosotros podemos conectarnos a diferentes proveedores de base
de datos tales como.
(Microsoft SQL Server, Oracle, MySQL, Interbase, Microsoft Access, IBM DB2,
PostgreSQL, etc.) Usando instrucciones SQL (Structured Query Language = Lenguaje
estructurado de consultas).
Las consultas en páginas dinámicas son muy importantes dentro de un sistema, ya
que estas nos permitirán observar los datos almacenados desde una perspectiva
específica la cual permitirá a su vez la toma de decisiones.
En todo sistema se debe tener un modulo de consultas y en este caso mostramos
como desarrollar una consulta en una página web utilizando la tecnología java.
Una sesión es una serie de comunicaciones entre un cliente y un servidor en la que se
realiza un intercambio de información. Por medio de una sesión se puede hacer un
seguimiento de un usuario a través de la aplicación.
El tiempo de vida de una sesión comienza cuando un usuario se conecta por primera
vez a un sitio web pero su finalización puede estar relacionada con tres
circunstancias:
Una posible aplicación de las sesiones es en el comercio electrónico.
UNIVERSIDAD PRIVADA TELESUP
116
UNIVERSIDAD PRIVADA TELESUP
117
Introducción
a) Presentación y contextualización
El contenido de esta unidad pretende explicar el uso de algunos complementos
a las páginas dinámicas como reportes, gráficos y además del uso de servlets.
Dando así al alumno los conocimientos para que se pueda desenvolver en el
aspecto laboral orientado a su carrera y también utilizándola para beneficios
personales y proyectos empresariales.
b) Competencia
Utiliza correctamente los diferentes utilitarios que tiene una página web.
c) Capacidades
1. Reconoce reportes para páginas web.
2. Implementa gráficos para páginas web.
3. Conoce scripts en las páginas web para una mejor presentación.
4. Analiza el uso de servlets.
d) Actitudes Toma interés en las características que usa el JSP.
Se interesa el desarrollo del comando jQuery en JSP.
Valora la utilización de los servlets.
e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:
La Unidad de Aprendizaje 03: Complementos en JSP, comprende el desarrollo
de los siguientes temas:
TEMA 01: Reportes en JSP.
TEMA 02: Gráficos en JSP.
TEMA 03: jQuery en JSP.
TEMA 04: Uso de Servlets.
UNIVERSIDAD PRIVADA TELESUP
118
TEMA 1
Reconocer reportes para páginas web.
Competencia:
JSP en
Reportes
UNIVERSIDAD PRIVADA TELESUP
119
Desarrollo de los Temas
Tema 01: Reportes en JSP
iREPORT
Es una herramienta visual que sirve para generar
ficheros XML (plantillas de informe) que se puedan
utilizar con la herramienta de generación de informes
JasperReports.
iReport inicialmente se ha desarrollado en J++ por lo
que su entorno de ejecución se limita a plataformas Microsoft. En sus últimas
versiones se ha publicado una versión 100% java con lo cual se limita la
restricción existente.
Para poder hacer los reportes necesitamos los siguientes archivos:
Donde “iReport-2.0.4-windows-installer” es el programa que nos permitirá hacer
los reportes, los demás archivos son librerías que necesita el “Netbeans” para
poder visualizar los reportes.
UNIVERSIDAD PRIVADA TELESUP
120
Instalación de iReport
Primero instalamos el “iReport”, Doble click al instalador y le damos siguiente
hasta finalizar.
Creación de Reporte en iReport
Una vez instalado el “iReport” crearemos nuestro reporte.
Nos vamos al menú File – New Document y creamos nuestro reporte.
UNIVERSIDAD PRIVADA TELESUP
121
De ahí nos pedirá poner un nombre y establecer los tamaños del reporte.
Finalmente el programa responderá con la siguiente pantalla.
UNIVERSIDAD PRIVADA TELESUP
122
Como podemos apreciar el reporte aparece con algunas secciones que
definiremos a continuación:
title. El título de nuestro reporte debe
escribirse en esta sección. Solo se
mostrará en la primera página del
reporte.
pageHeader. Aparece en la parte
superior de cada página. Puede contener
información adicional del reporte,
descripciones, etc.
columnHeader. En esta sección se muestran los nombres de los campos
que se van a presentar
detail. En esta sección se despliegan los valores correspondientes a los
nombres de los campos definidos en la sección anterior. Estos datos
pueden obtenerse mediante consultas SQL a una base de datos por
ejemplo.
columnFooter. Puede presentar información de totales para algunos de
los campos de la sección detail. Por ejemplo “Total de Empleados: 220”
pageFooter. Aparece en la parte inferior de cada página. Este parte puede
presentar, la fecha, número de página del reporte.
summary. Esta sección puede presentar totales de campos de la sección
detail. Si se desea incluir algún gráfico en el reporte, debe hacerse en esta
sección.
Si queremos agregar texto para eso tenemos los “static text”.
UNIVERSIDAD PRIVADA TELESUP
123
Arrastramos a la sección donde queremos poner el texto.
Para cambiar el contenido simplemente hacemos doble click. Y ponemos el texto
que deseamos.
Además contamos con una ventana de propiedades para poder cambiar la
apariencia del texto.
Origen de Datos del Reporte
Necesitamos establecer una conexión con la cual vamos a trabajar, para eso nos
vamos al menú “Data” – “Connections/DataSource”.
El sistema responderá con la siguiente pantalla.
UNIVERSIDAD PRIVADA TELESUP
124
A la cual tendremos que crear la conexión haciendo click en “new”
Se mostrara un asistente en el cual debemos escoger el tipo de conexión que se
desea.
De ahí damos “next” y escribimos los parámetros de la conexión.
UNIVERSIDAD PRIVADA TELESUP
125
En “name” ponemos un nombre que identifique la conexión, seleccionamos la
base de datos, usuario y password. Finalmente le damos “Save”.
Origen de Datos del Reporte
Ya establecida la conexión debemos escoger los datos a mostrar en el reporte,
para hacemos click en el icono “Database”.
El sistema mostrara una ventana donde debemos poner el select que mostrara los
datos para el reporte.
UNIVERSIDAD PRIVADA TELESUP
126
Aquí desmarcamos la opción “Automatically Retrieve Fields” para que nos deje
trabajar y no nos pida el password de conexión a cada momento.
De ahí escribimos la sentencia “select” con la cual vamos a jalar los datos, en este
caso se está mostrando los datos de los clientes, de ahí se marca la opción
“Automatically Retrieve Fields” y nos pedirá el password del MySQL que en este
caso es “123”.
De ahí jalaremos los campos a mostrar para eso al lado izquierdo tendremos una
ventana “Document Structure” la cual tendrá una carpeta “Fields”}.
En esa carpeta están los campos lo debemos arrastrar hasta la sesión de “details”
que es donde van los datos que se quiere mostrar.
UNIVERSIDAD PRIVADA TELESUP
127
Para ver cómo va quedando nuestro reporte nos vamos a “Build” – “Execute”.
El resultado será:
Parámetros en iReport
En algunos casos se quiere enviar datos al reporte para que se haga filtros, en
este caso debemos crear parámetros.
UNIVERSIDAD PRIVADA TELESUP
128
Nos vamos a la opción “Parameter” – Add – Parameter nos debe salir la siguiente
pantalla.
Hemos creado un parámetro el cual se llama código.
La idea sería que enviemos un código y salga en el reporte el cliente que tenga
ese código, hasta el momento el reporte muestra a todos los clientes.
Debemos modificar los datos del reporte , para eso hacemos click en el icono de
“database” y modificamos los datos el “select”.
UNIVERSIDAD PRIVADA TELESUP
129
Como se puede apreciar hemos puesto la clausula “where” y estamos
comparando el campo “cli_cod” con el parámetro “código” ($P{codigo}).
Ahora vamos a ver una vista previa del reporte.
Como el reporte ahora está con un parámetro nos lo pedirá, al hacer click en OK
se mostrara el resultado.
Implementación del Reporte en JSP
El reporte ya está terminado ahora debemos mostrarlo desde la pagina web.
Nos creamos un proyecto web y lo primero es importar las librerías, nos vamos a
la carpeta “Library” – Add Jar/Folder.
UNIVERSIDAD PRIVADA TELESUP
130
Y seleccionaremos las librerías a importar.
Las librerías son las siguientes:
Además debemos de agregar la librería de “MySQLDriver” (Véase UNIDAD 2).
El reporte que hemos creado en iReport debemos copiarlo dentro del
proyecto web, para eso nos vamos a la ruta física del proyecto web, ahí
encontraremos una carpeta llamada “web” y ahí debemos copiar el reporte,
preferiblemente si creamos una carpeta para guardar el reporte.
Ahora nos queda programar la página que mostrara el reporte.
UNIVERSIDAD PRIVADA TELESUP
131
NOTA: El programa “iReport” así como también las librerías la podemos descargar
de la pagina: http://www.jasperforge.org/, cabe mencionar que la versión de
“iReport” que se utilizó para el desarrollo de este tema es la 2.0.4.
UNIVERSIDAD PRIVADA TELESUP
132
Implementar gráficos para páginas web.
Competencia:
en
JSP
Gráficos TEMA 2
UNIVERSIDAD PRIVADA TELESUP
133
Tema 02: Gráficos en JSP
JFREECHART
El Proyecto JFreeChart que vio la luz
en el año 2000 es una librería de
código abierto (Open Source) para
Java, que permite crear diagramas de
forma práctica y sencilla. Con
JFreeChart podremos hacer diferentes
tipos de gráficos que van desde los
tipos comunes tales como gráficos
circulares , gráficos de barras , áreas , gráficos de línea , histogramas , diagramas
de Gantt y más específicos y menos frecuentemente utilizados como tipos
Candlestick , Viento y Wafer Map.
Configuración en NetBeans
Para poder trabajar con los gráficos que ofrece el JFreeChart necesitamos 2
librerías básicamente.
Nos creamos un proyecto web de ahí nos vamos a la carpeta library – add
Jar/Folder y agregamos esas librerías.
UNIVERSIDAD PRIVADA TELESUP
134
Implementación de Gráfico en JSP
Ahora nos vamos a la página JSP y programaremos.
Se necesita importar las librerías del JFreeChart para hacer el grafico.
<%@page import="org.jfree.data.general.*" %> En esta importación debemos de
poner la librería que se necesita según el tipo de reporte.
UNIVERSIDAD PRIVADA TELESUP
135
En el código fuente que observamos se aprecia que se está llenando 3 valores (3
categorías cada uno con un valor numérico y justamente ese valor definirá los
tamaños del grafico).
El resultado sería:
UNIVERSIDAD PRIVADA TELESUP
136
Ahora si queremos el mismo grafico pero en barras la programación seria:
UNIVERSIDAD PRIVADA TELESUP
137
Hay que notar que la programación es casi la misma.
El resultado sería:
Grafico con Base de datos
Si se quiere un grafico de barras pero con base de datos el único cambio que
deberíamos de hacer es el siguiente:
Lo cambiamos de la siguiente manera:
UNIVERSIDAD PRIVADA TELESUP
138
No debemos de olvidar de hacer una importación al SQL.
<%@page import="java.sql.*" %>, el resto del código fuente es el mismo.
El resultado sería el siguiente:
UNIVERSIDAD PRIVADA TELESUP
139
TEMA 3
Conocer scripts en las páginas web para una mejor presentación.
Competencia:
en
JSP
jQuery
UNIVERSIDAD PRIVADA TELESUP
140
Tema 03: jQuery en JSP
jQUERY
jQuery es un framework de javascript, que nos va a
permitir interactuar con los elementos HTML de una
manera muy cómoda y simplificando mucho nuestro
trabajo.
Además jQuery, tiene una implementación propia de la
tecnología AJAX, lo que nos va a servir para que la
comunicación entre JSP y jQuery sea mucho más
atractiva.
Comunicar JSP con jQuery, no nos supone ningún problema, es una acción
directa. El problema viene a la hora de tratar de comunicar jQuery con JSP. La
explicación es muy sencilla y reside en la diferencia sutil pero tremendamente
importante, que hay entre estas dos tecnologías.
jQuery es una tecnología que se ejecuta en el
lado del cliente, en su navegador y por tanto
cualquier variable que definamos con jQuery
va a pertenecer al ámbito del cliente y nuestro
servidor no tiene porqué conocerla. Sin
embargo, cualquier código que escribamos en
JSP, se va a ejecutar en el lado del servidor.
Por tanto, cuando el cliente solicite nuestra página JSP, nuestro contenedor
(Tomcat, JBoss,..) compilará el código JSP que nosotros hayamos incluido en la
página, creará el código HTML correspondiente y lo enviará al cliente.
UNIVERSIDAD PRIVADA TELESUP
141
Implementación de una Página JSP con jQuery
Primero necesitamos la librería JQuery que es una librería que está hecha en
JavaScript.
La bajamos de internet de esta dirección: http://jquery.com/
Una vez que hemos bajado el archivo lo descomprimimos y lo guardamos en una
carpeta, en este caso la carpeta se llamara “librería”,
UNIVERSIDAD PRIVADA TELESUP
142
Ahora nos creamos un proyecto web y copiamos esa carpeta “librería” en la
carpeta web.
Una vez que tenemos las librerías de JQuery desarrollaremos algunos
ejemplos:
Ejemplo 1: ThickBox
Se tendrá un pagina donde se mostrara un link al hacer click se mostrara
otra pagina encima poniendo de un color oscuro la pagina de atrás.
UNIVERSIDAD PRIVADA TELESUP
143
Se necesita importar las librerías:
<script type="text/javascript"
src="libreria/jquery.js"></script>
<script type="text/javascript"
src="libreria/ui/thickbox.js"></script>
Se necesita estas 2 librerías que la tenemos
en la carpeta “librerias”.
Notemos que cuando se hace el hipervínculo tenemos lo siguiente:
<a href="listado.jsp>" class="thickbox">
Esto hace que salga el efecto que queremos
El resultado sería:
Cuando se haga click en “ver datos” se llamara a otra pagina llamada “Listado”
UNIVERSIDAD PRIVADA TELESUP
144
Ejemplo 2: datepicker
Se tendrá una página donde se ingresara una fecha en una caja de texto y al
hacer click en la caja de texto se mostrara un calendario.
El resultado sería:
UNIVERSIDAD PRIVADA TELESUP
145
Ahora si queremos ver el calendario más atractivo podríamos ponerle un estilo
“css”.
Notemos la referencia:
<link type="text/css" href="libreria/themes/base/ui.all.css" rel="stylesheet"
/>
Además que se debería de crear un div
<div class="demo">
El resultado sería:
UNIVERSIDAD PRIVADA TELESUP
146
4
TEMA 4
Analizar el uso de servlets.
Competencia:
de
Servlets
Uso
UNIVERSIDAD PRIVADA TELESUP
147
Tema 04: Uso de Servlets
INTRODUCCIÓN A LOS SERVLETS
Los Servlets son módulos que extienden los servidores orientados a petición-
respuesta, como los servidores web compatibles con Java. Por ejemplo, un servlet
podría ser responsable de tomar los datos de un formulario de entrada de pedidos
en HTML y aplicarle la lógica de negocios utilizada para actualizar la base de
datos de pedidos de la compañía.
Los Servlets son para los servidores lo que los applets son para los navegadores.
Sin embargo, al contrario que los applets, los servlets no tienen interface gráfico
de usuario.
Los servlets pueden ser incluidos en muchos servidores diferentes porque el API
Servlet, el que se utiliza para escribir Servlets, no asume nada sobre el entorno o
protocolo del servidor.
Los servlets se están utilizando ampliamente
dentro de servidores HTTP; muchos
servidores Web soportan el API Servlet.
Utilizar Servlets en lugar de Scripts CGI!
UNIVERSIDAD PRIVADA TELESUP
148
Los Servlets son un reemplazo efectivo para los scripts
CGI. Proporcionan una forma de generar documentos
dinámicos que son fáciles de escribir y rápidos en
ejecutarse. Los Servlets también solucionan el problema
de hacer la programación del lado del servidor con APIs
específicos de la plataforma: están desarrollados con el
API Java Servlet, una extensión estándar de Java.
Por eso se utilizan los servlets para manejar peticiones de cliente HTTP. Por
ejemplo, tener un servlet procesando datos Posteados sobre HTTP utilizando un
formulario HTML, incluyendo datos del pedido o de la tarjeta de crédito. Un servlet
como este podría ser parte de un sistema de procesamiento de pedidos,
trabajando con bases de datos de productos e inventarios, y quizás un sistema de
pago on-line.
Otros Usos de los Servlets
Permitir la colaboración entre la gente. Un servlet puede
manejar múltiples peticiones concurrentes, y puede
sincronizarlas. Esto permite a los servlets soportar sistemas
como conferencias on-line.
Reenviar Peticiones: Los Servlets pueden reenviar peticiones a otros
servidores y servlets. Con esto los servlets pueden ser utilizados para cargar
balances desde varios servidores que reflejan el mismo contenido, y para
particional un único servicio lógico en varios servidores, de acuerdo con los tipos
de tareas o la organización compartida. Este artículo describirá como hacer un
servlet de manera sencilla desde el IDE NetBIOS.
UNIVERSIDAD PRIVADA TELESUP
149
Implementación de un Servlet
El primer paso es generar un nuevo proyecto, File-->New Project…
En la sección de categorías seleccionamos “Java Web” y en la sección de
proyectos seleccionamos “Web Application”.
Ahora hay que darle un nombre a nuestro poyecto, en este ejemplo le llamaremos
“JavaServlet”.
UNIVERSIDAD PRIVADA TELESUP
150
Ahora configuraremos el servidor web en el que se ejecutara nuestro servlet. Para
este ejemplo usaremos GlassFish.
Presionamos el botón Finish, para que sea creado nuestro proyecto con la
siguiente estructura:
UNIVERSIDAD PRIVADA TELESUP
151
Como observamos en la imagen anterior, nos crea un archivo llamado “index.jsp”,
en este archivo agregaremos un formulario que será el encargado de invocar
nuestro servlet.
Lo que aparece dentro del recuadro rojo es donde definimos nuestro formulario.
En el atributo action le indicamos que deberá llamar a un servlet llamado Servlet.
Por el momento hemos terminado en el archivo index.jsp, ahora crearemos el
servlet de la siguiente manera: click derecho sobre el proyecto, opción New,
Servlet…
UNIVERSIDAD PRIVADA TELESUP
152
Definimos un nombre para el servlet (En este ejemplo le llamaremos Servlet, ya
que fue el que definimos en el atributo action del formulario), presionamos el
botón finish y nos creara un archivo llamado Servlet.java.
Agregamos el código que aparece en el recuadro rojo, el cual se encarga de pintar
un html.
UNIVERSIDAD PRIVADA TELESUP
153
Como observamos en el código anterior la
instrucción request.getParameter(“nombre”)
obtiene de index.jsp el valor que se haya
introducido cuando se invoco al servlet.
Finalmente presionamos el botón de play que
aparece en la parte superior para ejecutar el
servlet.
El resultado es:
Ejemplo: Ingresar dos números y que un servlet muestre la suma de estos.
UNIVERSIDAD PRIVADA TELESUP
154
Lo primero es crear la pagina la cual llamara al servlet, aquí se tiene 2 cajas de
textos y un botón. Cuando se haga click en el botón se llamara al servlet
“SevletEjemplo”.
En el servlet de frente nos vamos al método doPost que es el evento que se
ejecutara cuando se llame al servlet. Ahí se aprecia que se recibe las 2 cajas de
textos se recupera en 2 variables y se llama al método processRequest. En el
método processRequest es el que imprime los resultados.
UNIVERSIDAD PRIVADA TELESUP
155
1. Ingresa al link “iReport” lee atentamente las indicaciones, desarróllalo y
envíalo por el mismo medio.
Crear una tabla llamada producto con los siguientes campos
(código, nombre, precio y marca) de ahí hacer un reporte de esos
productos. Al final visualizar el reporte desde una página web.
Tomar pantallazos al reporte en iReport, el código fuente de la
página y el resultado de la página, todo eso en un documento de
Word.
Luego con la misma tabla creada en la pregunta 1 hacer un
grafico estadístico en torta donde se muestre la cantidad de
productos que hay por marca. Por ejemplo Sony 5, LG 10,
Samsung 8 (Esto representado en un grafico)
Tomar pantallazos al grafico y al código fuente todo eso en un
documento de Word.
Finalmente comprime los archivos en un Winrar y envíalo.
Lecturas Recomendadas
JFREECHART
http://elespaciodejaime.wordpress.com/tag/jfreechart/
SERVLETS http://www.programacion.com/articulo/servlets_basico_108
Actividades y Ejercicios
UNIVERSIDAD PRIVADA TELESUP
156
Autoevaluación
1) ¿Es el programa que permite crear reportes en formato XML?
a. Crystal Report.
b. iReport.
c. JFreeChart.
d. JQuery.
e. DHTML.
2) ¿Es el programa que permite crear gráficos estadísticos?
a. Crystal Report.
b. iReport.
c. JFreeChart.
d. JQuery.
e. DHTML.
3) ¿Es el programa que permite crear efectos dentro de las páginas web?
a. Crystal Report.
b. iReport.
c. JFreeChart.
d. JQuery.
e. DHTML.
4) ¿En qué lenguaje esta desarrollado la librería JQuery?
a. MySQL.
b. HTML
c. Java.
d. JavaScript.
e. DHTML.
5) ¿El concepto correcto de servlet es?
a. Librería hecha en java.
b. Clases de Java que se ejecutan en el servidor.
c. Páginas web dinámicas.
d. Paginas con java.
e. Lenguaje de programación.
UNIVERSIDAD PRIVADA TELESUP
157
6) ¿Qué librerías se necesita para los gráficos en JSP?
a. JFreeChart y Common.
b. JFreeChart y JCommon.
c. JFreeChart /iReport.
d. JFreeChart.
e. JCommon.
7) ¿Cuál es la sección que va solo en la primera pagina de un reporte?
a. Details.
b. Title.
c. Report footer.
d. Page header.
e. Page footer.
8) ¿Cuál es la sección donde se pone los datos a mostrar en un reporte?
a. Details.
b. Report header.
c. Report footer.
d. Page header.
e. Page footer.
9) ¿Un servlet es?
a. Una base de datos.
b. Pagina estática.
c. Clase de java.
d. Imagen.
e. Librería.
10) ¿El efecto en jQuery que hace que se muestre una ventana encima y la
parte de atrás se oscurezca se llama?
a. ThickBox.
b. Acordeón.
c. DatePicker.
d. Alert.
e. Window.open.
UNIVERSIDAD PRIVADA TELESUP
158
Resumen
UUNNIIDDAADD DDEE AAPPRREENNDDIIZZAAJJEE IIIIII::
iReport es una herramienta visual que sirve para generar ficheros XML (plantillas de
informe) que se puedan utilizar con la herramienta de generación de informes
JasperReports.
iReport inicialmente se ha desarrollado en J++ por lo que su entorno de ejecución se
limita a plataformas Microsoft. En sus últimas versiones se ha publicado una versión
100% java con lo cual se limita la restricción existente.
El Proyecto JFreeChart que vio la luz en el año 2000 es una librería de código abierto
(Open Source) para Java, que permite crear diagramas de forma práctica y sencilla.
Con JFreeChart podremos hacer diferentes tipos de gráficos que van desde los tipos
comunes tales como gráficos circulares , gráficos de barras , áreas , gráficos de línea ,
histogramas , diagramas de Gantt y más específicos y menos frecuentemente
utilizados como tipos Candlestick , Viento y Wafer Map .
JQuery es un framework de javascript, que nos va a permitir interactuar con los
elementos HTML de una manera muy cómoda y simplificando mucho nuestro trabajo.
Además jQuery, tiene una implementación propia de la tecnología AJAX, lo que nos
va a servir para que la comunicación entre JSP y jQuery sea mucho más atractiva.
jQuery es una tecnología que se ejecuta en el lado del cliente, en su navegador y por
tanto cualquier variable que definamos con jQuery va a pertenecer al ámbito del
cliente y nuestro servidor no tiene porqué conocerla.
Los Servlets son módulos que extienden los servidores orientados a petición-
respuesta, como los servidores web compatibles con Java. Por ejemplo, un servlet
podría ser responsable de tomar los datos de un formulario de entrada de pedidos en
HTML y aplicarle la lógica de negocios utilizada para actualizar la base de datos de
pedidos de la compañía.
Los Servlets son para los servidores lo que los applets son para los navegadores.
UNIVERSIDAD PRIVADA TELESUP
159
UNIVERSIDAD PRIVADA TELESUP
160
Introducción
a) Presentación y contextualización
En esta unidad se desarrollara el manejo avanzado de las páginas dinámicas con
conexión a base de datos, estableciendo la programación en capas. Haciendo del
alumno un profesional preparado en la programación de DAO en JSP, programas
que en el mercado laboral exigen mayor demanda.
b) Competencia
Aprende como hacer una aplicación informática usando la metodología
DAO.
c) Capacidades
1. Identifica las capas de programación en web.
2. Implementa las capas de programación en web.
3. Conoce consultas con programación en capas.
4. Reconoce el mantenimiento usando programación en capas.
d) Actitudes Planificar, implementar y gestionar con la programación en capas y su
respectivo mantenimiento.
Aprecia las implementaciones con capas.
Tomar en cuenta los criterios las consultas con n capas.
e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:
La Unidad de Aprendizaje 04: Patrón de Diseño DAO en JSP, comprende el
desarrollo de los siguientes temas:
TEMA 01: Introducción a Programación en Capas.
TEMA 02: Implementación de Capas.
TEMA 03: Consultas con n- Capas.
TEMA 04: Mantenimientos con n-Capas.
UNIVERSIDAD PRIVADA TELESUP
161
TEMA 1
Identificar las capas de programación en web.
Competencia:
en Capas
a Programación
Introducción
UNIVERSIDAD PRIVADA TELESUP
162
Desarrollo de los Temas
Tema 01: Introducción a Programación en Capas
INTRODUCCIÓN
Como analistas y programadores vamos desarrollando a
diario nuestras habilidades para resolver problemas
usuales que se presentan en el desarrollo del software.
Por cada problema que se nos presenta pensamos
distintas formas de resolverlo, incluyendo soluciones
exitosas que ya hemos usado anteriormente en
problemas similares. Es así que a mayor experiencia que
tengamos, nuestro abanico de posibilidades para resolver un problema crece, pero al
final siempre habrá una sola solución que mejor se adapte a nuestra aplicación. Si
documentamos esta solución, podemos reutilizarla y compartir esa información que
hemos aprendido para resolver de la mejor manera un problema específico.
Los patrones del diseño tratan los problemas del diseño que se repiten y que se
presentan en situaciones particulares del diseño, con el fin de proponer soluciones a
ellas. Por lo tanto, los patrones de diseño son soluciones exitosas a problemas
comunes. Existen muchas formas de implementar patrones de diseño. Los detalles de
las implementaciones son llamadas estrategias.
Con la aparición del J2EE, todo un nuevo catálogo de patrones de diseño apareció.
Desde que J2EE es una arquitectura por si misma que involucra otras arquitecturas,
incluyendo servlets, JavaServer Pages, Enterprise JavaBeans, y más, merece su
propio conjunto de patrones específicos para diferentes aplicaciones empresariales.
De acuerdo al libro "J2EE PATTERNS Best Practices and Design Strategies", existen
5 capas en la arquitectura J2EE:
Cliente
Presentación
Negocios
Integración
Recurso
UNIVERSIDAD PRIVADA TELESUP
163
El libro explica 15 patrones J2EE que están divididos en 3 de las capas:
Presentación, negocios e integración.
Catálogo de patrones J2EE
CAPA DE PRESENTACIÓN
Decorating
Filter/
Intercepting
Filter
Un objeto que está entre el cliente y los componentes Web. Este
procesa las peticiones y las respuestas.
Front
Controller/
Front
Component
Un objeto que acepta todos los requerimientos de un cliente y los
direcciona a manejadores apropiados. El patrón Front Controller
podría dividir la funcionalidad en 2 diferentes objetos: el Front
Controller y el Dispatcher. En ese caso, El Front Controller acepta
todos los requerimientos de un cliente y realiza la autenticación, y el
Dispatcher direcciona los requerimientos a manejadores apropiada.
View Helper
Un objeto helper que encapsula la lógica de acceso a datos en
beneficio de los componentes de la presentación. Por ejemplo, los
JavaBeans pueden ser usados como patrón View Helper para las
páginas JSP.
Composite
view
Un objeto vista que está compuesto de otros objetos vista. Por
ejemplo, una página JSP que incluye otras páginas JSP y HTML
usando la directiva include o el action include es un patrón Composite
View.
Service
To Worker
Es como el patrón de diseño MVC con el Controlador actuando como
Front Controller pero con una cosa importante: aquí el Dispatcher (el
cual es parte del Front Controller) usa View Helpers a gran escala y
ayuda en el manejo de la vista.
Dispatcher
View
Es como el patrón de diseño MVC con el controlador actuando como
Front Controller pero con un asunto importante: aquí el Dispatcher (el
cual es parte del Front Controller) no usa View Helpers y realiza muy
poco trabajo en el manejo de la vista. El manejo de la vista es
manejado por los mismos componentes de la Vista.
UNIVERSIDAD PRIVADA TELESUP
164
CAPA DE NEGOCIOS
Business Delegate
Un objeto que reside en la capa de presentación y en beneficio de
los otros componentes de la capa de presentación llama a
métodos remotos en los objetos de la capa de negocios.
Value Object/ Data
Transfer Object/
Replicate Object
Un objeto serializable para la transferencia de datos sobre la red.
Session Façade/
Session Entity
Façade/ Distributed
Façade
El uso de un bean de sesion como una fachada (facade) para
encapsular la complejidad de las interacciones entre los objetos
de negocio y participantes en un flujo de trabajo. El Session
Façade maneja los objetos de negocio y proporciona un servicio
de acceso uniforme a los clientes.
Aggregate Entity Un bean entidad que es construido o es agregado a otros beans
de entidad.
Value Object
Assembler
Un objeto que reside en la capa de negocios y crea Value Objets
cuando es requerido.
Value List Handler/
Page-by-Page
Iterator/ Paged List
Es un objeto que maneja la ejecución de consultas SQL, caché y
procesamiento del resultado. Usualmente implementado como
beans de sesión.
Service Locator
Consiste en utilizar un objeto Service Locutor para abstraer toda la
utilización JNDI y para ocultar las complejidades de la creación del
contexto inicial, de búsqueda de objetos home EJB y recreación
de objetos EJB. Varios clientes pueden reutilizar el objeto Service
Locutor para reducir la complejidad del código, proporcionando un
punto de control.
UNIVERSIDAD PRIVADA TELESUP
165
CAPA DE INTEGRACIÓN
Data Access
Object Service
Activator
Consiste en utilizar un objeto de acceso a datos para
abstraer y encapsular todos los accesos a la fuente de
datos. El DAO maneja la conexión con la fuente de datos
para obtener y almacenar datos.
Service Activator
Se utiliza para recibir peticiones y mensajes asíncronos
de los clientes. Cuando se recibe un mensaje, el Service
Activator localiza e invoca a los métodos de los
componentes de negocio necesarios para cumplir la
petición de forma asíncrona.
UNIVERSIDAD PRIVADA TELESUP
166
TEMA 2
Implementar las capas de programación en web.
Competencia:
de
Capas
Implementación
UNIVERSIDAD PRIVADA TELESUP
167
Tema 02: Implementación de Capas
INTRODUCCIÓN
En el presente tema veremos cómo implementar un modelo de N- Capas usando el
programa “NetBeans”
Para eso creamos el proyecto web como ya sabemos hacerlo.
Lo primero que debemos hacer es Agregar la librería de “My Driver”, para poder
trabajar con la base de datos (Véase UNIDAD 2: Tema 02)
Implementación de Capa Datos:
Es donde vamos a hacer
el acceso a los datos
Seleccionamos el
proyecto click derecho –
add new java class.
Eso nos creara una clase en la cual tendremos que programar el acceso a los datos.
UNIVERSIDAD PRIVADA TELESUP
168
Le ponemos de nombre a la clase: “datos” y para tener una mejor organización lo
guardamos en un paquete al cual lo llamamos “telesup.com.capadatos”
El sistema responderá con la siguiente pantalla
Aquí comenzaremos a programar el acceso a los datos,
para lo cual vamos a crear 2 funciones: runQuery la cual
es para alterar los datos (insert, update y delete) y
dataQuery para mostrar los datos (select)
UNIVERSIDAD PRIVADA TELESUP
169
Bueno analicemos las funciones, ambas son iguales así que explicaremos cualquiera
de ellas en este caso dataQuery()
public String dataQuery(String nomsp,Object[] arreglo)
Aquí se puede apreciar que la función dataQuery recibe un parámetro llamado nomsp
el cual es el nombre del procedimiento almacenado a ejecutar y también recibe un
arreglo de Object que son los parámetros a enviar al procedimiento almacenado.
UNIVERSIDAD PRIVADA TELESUP
170
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection cn;
cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/telesup","root","
123");
Luego se tiene que poner el driver de conexión y también se establece la conexión.
Como se puede apreciar es una base de datos llamada “telesup”, el usuario es “root” y
el password es “123”
CallableStatement cmd;
cmd = cn.prepareCall(nomsp);
for(int i=0;i<arreglo.length;i++){
cmd.setObject( i+1 , arreglo[i] );
}
En la instrucción de arriba se declara una variable “CallableStatement” que es la que
nos permitirá ejecutar el procedimiento almacenado, el nombre del procedimiento
almacenado lo recibimos como parámetro “nomsp”.
El “for” tiene como finalidad recorrer todo lo que tiene el arreglo de objetos llamado
“arreglo” y cada valor de ese arreglo se envía el procedimiento almacenado.
Por ejemplo tenemos un procedimiento almacenado llamado “ListaCli” el cual recibe
como parámetro un país y una ciudad, entonces cuando llamemos a la función la
sintaxis seria así:
dataQuery("{call ListaCli(?,?)}",new Object[]{“PERU”;”LIMA”});
Primero va el nombre del procedimiento almacenado como se
aprecia hay 2 signos de interrogación eso significa que el
procedimiento almacenado recibe 2 parámetros, entonces hay
que enviar lo valores a esos 2 parámetros y se envía en el
arreglo como se aprecia se está enviando un arreglo de
objetos con los valores de “peru” y “Lima”
Cabe mencionar que cada signo de interrogación es un parámetro y tienen un índice
que empieza de 1
UNIVERSIDAD PRIVADA TELESUP
171
Por ejemplo cmd.setObject(1,arreglo[0]) ahí se está enviando al primer parámetro lo
que tiene el arreglo en la posición 0.
resultado = cmd.executeQuery();
Al final se ejecuta el procedimiento almacenado y los datos se guardaran en la variable
"resultado" que es un “Resultset”
Si comparamos con la otra función “runQuery” es lo mismo solo con la diferencia que
cmd.executeUpdate();
resultado = "Se realizaron los cambios.";
Resultado es un string que devolverá un mensaje si se pudo alterar los datos , se
ejecuta con “executeUpdate”
NOTA: Debemos de hacer una importación para poder trabajar con la base de
datos: import java.sql.*;
IMPLEMENTACIÓN DE CAPA ENTIDAD:
Es donde vamos a hacer las entidades de las tablas con las cual se va a trabajar, tiene
como finalidad transportar datos entre la presentación y el negocio, a esta capa
también se le conoce como los “beans”
Seleccionamos el proyecto click derecho – add new java class.
Eso nos creara una clase en la cual tendremos que definir los atributos de la clase
En este ejemplo se está creando la clase “encliente”
UNIVERSIDAD PRIVADA TELESUP
172
Aquí crearemos los atributos de la clase que deben ser los mismos campos de la tabla
con la cual se va trabajar
En este caso se va a trabajar con una tabla llamada “cliente”
Se crean los atributos y se encapsulan
UNIVERSIDAD PRIVADA TELESUP
173
IMPLEMENTACIÓN DE CAPA NEGOCIO:
Es donde vamos a hacer los procesos que tendrán las entidades es decir aquí
desarrollaremos la lógica para grabar, modifica, listar, etc.
Seleccionamos el proyecto click derecho – add new java class.
Eso nos creara una clase en la cual tendremos que definir los procesos que se quiere
tener.
Aquí programaremos algunas funciones
UNIVERSIDAD PRIVADA TELESUP
174
Aquí creamos una función llamada “Grabar”, como se puede apreciar :
datos objdatos=new datos();
Nos creamos un objeto datos (el cual ya creamos anteriormente : datos), esto con la
finalidad de llamar a las funciones creadas ahí (runQuery y dataQuery)
resultado=objdatos.runQuery("{call SPGRABA(?,?,?,?)}",
new
Object[]{obj.getCli_cod(),obj.getCli_nom(),obj.getCli_dir(),obj.getCli_cre()});
Luego llamamos a la función runQuery le enviamos el nombre del procedimiento
almacenado y los parámetros a enviar (son 4 parámetros)
Le enviamos lo que contiene el objeto obj que es un parámetro que hemos recibido
public String Grabar(encliente obj)
Quiere decir que cuando se llame a esta función “Grabar” se le enviara un objeto
(entidad) que tendrá todos los datos.
Y eso a su vez es lo que se enviara al procedimiento almacenado
UNIVERSIDAD PRIVADA TELESUP
175
El procedimiento almacenado deberá de ser el siguiente:
NOTA: Como se está utilizando la clase “encliente” que está en otro paquete hay que
importarlo, import telesup.com.capaentidad.encliente;
IMPLEMENTACIÓN DE CAPA PRESENTACIÓN:
Es la presentación final, lo que el usuario vera. En este caso la presentación serán las
páginas web (JSP)
Seleccionamos el proyecto click derecho – new – JSP
Aquí crearemos una entidad la
cual la llenaremos con los datos
a grabar, de ahí invocamos al
negocio para poder llamar a la
función grabar
Al final se visualizara el mensaje
que devuelva la función grabar
que a su vez es lo que devuelve
la función runQuery.
NOTA: Como se está utilizando
la entidad y el negocio que están
en otros paquete hay que
importarlo,
<%@page
import="telesup.com.capaentid
ad.*,telesup.com.capanegocio.
*" %>
UNIVERSIDAD PRIVADA TELESUP
176
TEMA 3
Conocer consultas con programación en capas.
Competencia:
n- con
Capas
Consultas
UNIVERSIDAD PRIVADA TELESUP
177
Tema 03: Consultas con n- Capas
INTRODUCCIÓN
Una vez implementadas las capas debemos de fijarnos más en la presentación que es
la interfaz del usuario.
En el siguiente ejemplo veremos cómo desarrollar un simple listado.
Ejemplo 1: Listar todos los clientes en una tabla HTML.
Lo primero que tenemos que hacer es crear el procedimiento Almacenado
UNIVERSIDAD PRIVADA TELESUP
178
Implementación de Datos, Entidad y Negocio
Nos vamos al proyecto web y debemos de crear la clase que accede a los datos
(capadatos), además de la entidad para transportar los datos (capaentidad). En este
caso ambas capas ya están creadas en el ejemplo del tema anterior (Tema 02)
Entonces debemos de crear el negocio (necliente) para listar a los clientes. Se supone
que esta capa ya esta creada y tiene una función llamada “Grabar” (ver: Tema02 de la
presente unidad)
Ahora solo hay que crear la función que se encargara de traer los datos.
public ArrayList<encliente> Listacli(){
Aquí se define una función llamada ListaCli que devuelve un ArrayList, al poner
<encliente> estamos diciendo que el arraylist es un arreglo de clientes (encliente es
una entidad de la tabla cliente)
NOTA: Cuando trabajemos con arraylist tenemos que importar una librería
import java.util.ArrayList;
y cuando se trabaje con ResultSet se importa
import java.sql.ResultSet;
ResultSet tabla=objdatos.dataQuery("{call SPLISTA()}",new Object[]{});
UNIVERSIDAD PRIVADA TELESUP
179
Después creamos un resultset el cual se llenara con los datos que retorne
objdatos.dataQuery() que es la función que está en la capa datos.
A la función dataQuery() se le envía 2 parámetros: el nombre del procedimiento
almacenado (En este caso no va ningún signo de interrogación por qué no lleva
parámetros) y un arreglo de parámetros que en este caso se envía un arreglo vacio
porque no hay nada a enviar)
encliente cli;
while(tabla.next()){
cli=new encliente();
cli.setCli_cod(tabla.getString("cli_cod"));
cli.setCli_nom(tabla.getString("cli_nom"));
lista.add(cli);
}
Luego creamos un objeto “encliente” llamado “cli” al cual le pondremos los datos que
leemos del resultset.
Una vez que el objeto tiene los datos del resultset se agrega al arraylist (lista.add(cli)). Esto se hará por cada registro que encuentre en el resultset Al final lo que se retorna es el arraylist
return lista;
UNIVERSIDAD PRIVADA TELESUP
180
IMPLEMENTACIÓN DE PRESENTACIÓN
Como se puede apreciar necesitamos un objeto “necliente” porque es ahí donde está
la función que lista los clientes. Se debe de crear un arraylist de clientes al cual lo
llamamos “lista”, esa lista será llenada con la función “listacli” del negocio.
Ahora lo que tenemos que hacer es recorrer ese arraylist para imprimir los datos
for(encliente x:lista){
En este caso el for se recorre toda la lista y por cada cliente que encuentre en la lista
lo guarda en “x”. Ya dentro del for se imprime todo lo que tiene x con los métodos get
UNIVERSIDAD PRIVADA TELESUP
181
Ahora si queremos cambiar la presentación y el listado lo queremos en un combo la
programación seria así:
El resultado sería:
UNIVERSIDAD PRIVADA TELESUP
182
Ejemplo 2: Listar todos los clientes en un combo y al hacer click en un botón
debe salir el año y el monto total de venta que hizo ese cliente x cada año
Ya tenemos el combo listo en el ejemplo 1 así que solo nos dedicaremos a la
implementación de las ventas
El resultado sería así:
Lo primero es el procedimiento almacenado
UNIVERSIDAD PRIVADA TELESUP
183
Ahora creamos la entidad
Solo necesitamos esos 2 atributos (Año y monto)
Ahora creamos el negocio
UNIVERSIDAD PRIVADA TELESUP
184
Como se puede apreciar en esta función recibimos un parámetro de tipo “encliente”, es
decir vamos a recibir a un cliente para así poder enviar el código del cliente al
procedimiento almacenado. El resto del proceso es el mismo que hicimos en el
negocio de cliente. Ahora nos vamos a programar en la presentación en la misma
página donde creamos el combo
Como la programación se está haciendo en la misma página hay que preguntar si
recibimos al combo. Para eso hacemos la siguiente sentencia
if(request.getParameter("combo1")!=null){
Si hemos recibido al combo nos creamos un objeto de tipo “nefac_cabe” donde está la
función que lista las ventas del cliente, también creamos una entidad “encliente” para
llenar el código del cliente ya que este código tiene que llegar al procedimiento
almacenado
objencli.setCli_cod(request.getParameter("combo1"));
lista2=objnecabe.listafacanio(objencli);
Llenamos el atributo “cod_cli” con lo recuperado del combo y llamamos a la función
“listafacanio” que es la que lista las ventas del cliente por año.
UNIVERSIDAD PRIVADA TELESUP
185
TEMA 4
Reconocer el mantenimiento usando programación en capas.
Competencia:
n- con
Capas
Mantenimientos
UNIVERSIDAD PRIVADA TELESUP
186
Tema 04: Mantenimientos con n-Capas
INTRODUCCIÓN
Cuando hacemos un sistema también debemos de implementar el modulo de
mantenimientos el cual permitirá agregar, modificar o eliminar datos a las tablas que
formen parte del sistema. En esta sección veremos cómo crear una pantalla que
permita grabar, eliminar o modificar datos de una tabla llamada “cliente”
IMPLEMENTACIÓN EN LA BASE DE DATOS
Primero debemos crear los procedimientos almacenados para “Grabar”, “Modificar”
y “Eliminar”
El procedimiento para grabar ya está definido en el Tema 02.
UNIVERSIDAD PRIVADA TELESUP
187
IMPLEMENTACIÓN EN NEGOCIO
Aquí al igual como hicimos en la función “Graba” creamos las funciones para modificar
y eliminar
NOTA: Se sobreentiende que ya está la capa entidad y la capa datos.
IMPLEMENTACIÓN EN PRESENTACIÓN
Aquí necesitamos ingresar los datos a grabar, modificar o eliminar.
Para eso diseñaremos un formulario web.
UNIVERSIDAD PRIVADA TELESUP
188
Se supone que la hacer click en el botón los datos viajan a la misma página entonces
debemos de programar para recibir esos datos y Grabarlos
Como se puede apreciar preguntamos si nos han enviado al botón “enviar” es decir si
se ha hecho click en el botón. Si es así debemos de recuperar todos los datos de las
cajas de texto para guardarlos en un objeto de tipo cliente (encliente). Llenamos el
objeto “encliente” con las cajas de texto y de ahí debemos grabar de eso se encarga el
negocio “necliente”.
Cuándo llamamos a la función grabar debemos enviarle el objeto que queremos
garbar que en este caso es “encliente” el cual ya se ha llenado con los datos. Para
modificar sería lo mismo, solo cambiamos el nombre de la función a llamar. Lo mismo
sucede con eliminar con la diferencia que debemos de enviar solo el código es decir
nos creamos el objeto “encliente” y solo llenamos el atributo codcli.
UNIVERSIDAD PRIVADA TELESUP
189
1. Ingresa al link “Tabla con Capas” lee atentamente las indicaciones,
desarróllalo y envíalo por el mismo medio.
Desarrollar un listado de una tabla llamada Artículos (código, nombre,
precio) En un documento de Word poner el código de lo siguiente:
Procedimientos Almacenados, CapaDatos, CapaNegocio, CapaEntidad,
JSP. Finalmente comprima sus archivos en un Winrar y envíelo.
2. Ingresa al link “Formulario con Capas” lee atentamente las
indicaciones, desarróllalo y envíalo por el mismo medio.
Desarrollar un formulario donde se ingrese un código de artículo y al
hacer click en un botón se elimine. En un documento de Word poner el
código de lo siguiente:
Procedimientos Almacenados, CapaDatos, CapaNegocio, CapaEntidad,
JSP. Finalmente comprima sus archivos en un Winrar y envíelo.
Lecturas Recomendadas
INTRODUCCIÓN A PROGRAMACIÓN EN CAPAS
http://www.inf-cr.uclm.es/www/mpolo/asig/0708/tutorJavaWeb.pdf
DAO EN JAVA
http://www.proactiva-calidad.com/java/patrones/DAO.html
Actividades y Ejercicios
UNIVERSIDAD PRIVADA TELESUP
190
Autoevaluación
1) ¿Tiene como finalidad transportar datos entre las capas, contiene
atributos?
a. CapaDatos.
b. CapaNegocio.
c. CapaPresentacion.
d. CapaEntidad.
e. Pagina web.
2) ¿Tiene como finalidad acceder a la base de datos?
a. CapaDatos.
b. CapaNegocio.
c. CapaPresentacion.
d. CapaEntidad.
e. Pagina web.
3) ¿Tiene como finalidad desarrollar la lógica del negocio?
a. CapaDatos.
b. CapaNegocio.
c. CapaPresentacion.
d. CapaEntidad.
e. Pagina web.
4) ¿De acuerdo al libro "J2EE PATTERNS Best Practices and Design
Strategies" existen?
a. 3 capas.
b. 4 capas.
c. 5 capas.
d. 6 capas.
e. 7 capas.
5) ¿Es una arquitectura que involucra a otras arquitecturas como servlets,
JavaServer Pages, Enterprise JavaBeans?
a. JME.
b. J2EE.
c. JSP.
d. JAVA.
e. JS.
UNIVERSIDAD PRIVADA TELESUP
191
6) ¿Según el libro a la hora de CONSULTAR DATOS en la capa negocio
creamos un objeto de tipo “Capadatos” con la finalidad de llamar a una
función que devuelva el listado de datos, esta función se llama?
a. runQuery
b. Execute
c. dataQuery
d. Call
e. exec
7) ¿Según el libro a la hora de CONSULTAR DATOS en la capa negocio se crea
una función para listar: public ArrayList<encliente> Listacli(), esto significa
que la función devolverá exactamente un ?
a. Arreglo.
b. Arreglo genérico.
c. Array.
d. Matriz.
e. Arreglo de cliente.
8) ¿Según el libro la sentencia para recorrer el listado de clientes(encliente) en
la página JSP es?
a. For(i=0;i<lista.length;i++)
b. for(encliente x:lista)
c. for(cliente x:lista)
d. while(tbl.next())
e. while(i<lista.length)
9) ¿Cuándo se hace un mantenimiento en la página JSP se necesita un objeto
de tipo?
a. Datos.
b. Negocio y datos.
c. Entidad.
d. Negocio.
e. Entidad y negocio.
10) ¿Cuándo se hace un mantenimiento en la página JSP se llena los datos de
las cajas de texto a un objeto de tipo?
a. Datos.
b. Presentación.
c. Entidad.
d. Negocio.
e. Entidad y negocio.
UNIVERSIDAD PRIVADA TELESUP
192
Resumen
UUNNIIDDAADD DDEE AAPPRREENNDDIIZZAAJJEE IIVV::
Como analistas y programadores vamos desarrollando a diario nuestras habilidades
para resolver problemas usuales que se presentan en el desarrollo del software. Por
cada problema que se nos presenta pensamos distintas formas de resolverlo,
incluyendo soluciones exitosas que ya hemos usado anteriormente en problemas
similares. Es así que a mayor experiencia que tengamos, nuestro abanico de
posibilidades para resolver un problema crece, pero al final siempre habrá una sola
solución que mejor se adapte a nuestra aplicación. Si documentamos esta solución,
podemos reutilizarla y compartir esa información que hemos aprendido para resolver
de la mejor manera un problema específico.
La implementación de capas en los sistemas de informática se está volviendo algo
muy común debido a que esto organiza de manera ordenada la programación que se
implementa en un sistema empresarial separando de esta forma la lógica del negocio
con la vista al cliente y el acceso a datos.
Donde conoceremos el funcionamiento de la capa Datos, capa Entidad, capa Negocio,
capa Presentación.
Las consultas forman parte fundamental de un sistema, es aquí donde se presentarán
los datos en una forma estratégica para que las autoridades de una empresa tomen
decisiones.
Las consultas desarrolladas en capas tienen la particularidad de ser flexibles, es decir
se podrá modificar una de sus capas sin alterar el resultado final que es lo que el
usuario vera como resultado.
Cuando hacemos un sistema también debemos de implementar el modulo de
mantenimientos el cual permitirá agregar, modificar o eliminar datos a las tablas que
formen parte del sistema.
Este modulo se encarga de manipular los datos de las tablas principales las cuales
alimentaran a todo el sistema.
Como Insertar, Modificar y Eliminar.
UNIVERSIDAD PRIVADA TELESUP
193
Glosario
ALGORITMO (ALGORITHM): Método que describe cómo se resuelve un problema
en término de las acciones que se ejecutan y especifica el orden en que se
ejecutan estas acciones. Los algoritmos ayudan al programador a planificar un
programa antes de su escritura en un lenguaje de programación.
ÁMBITO DE CLASE (SCOPECLASS): Las variables privadas definidas fuera de los
métodos internos a la clase tienen ámbito de clase. Son accesibles desde todos
los métodos del interior de la clase, con independencia del orden en que están
definidas. Los métodos privados también tienen ámbito de clase.
ASIGNACIÓN (ASSIGNMENT): Almacenamiento de un valor en una variable. La
sentencia de asignación es aquella que implementa la asignación y utiliza un
operador de asignación.
DAO: En software de computadores, un Data Access Object (DAO, Objeto de
Acceso a Datos) es un componente de software que suministra una interfaz
común entre la aplicación y uno o más dispositivos de almacenamiento de datos,
tales como una Base de datos o un archivo. El término se aplica frecuentemente
al Patrón de diseño Object.
JASPERREPORTS: JasperReports es una herramienta de creación de informes que
tiene la habilidad de entregar contenido enriquecido al monitor, a la impresora o a
ficheros PDF, HTML, XLS, CSV y XML.
JAVASCRIPT: JavaScript es un lenguaje de programación interpretado, dialecto
del estándar ECMAScript. Se define como orientado a objetos, basado en
prototipos, imperativo, débilmente tipado y dinámico.
JFREECHART: JFreeChart es un marco de software open source para el lenguaje
de programación Java, el cual permite la creación de gráficos complejos de forma
simple.
JSP: JavaServer Pages (JSP) es una tecnología Java que permite generar
contenido dinámico para web, en forma de documentos HTML, XML o de otro
tipo.
UNIVERSIDAD PRIVADA TELESUP
194
Fuentes de Información
BIBLIOGRÁFICAS:
ARIAS HIDALGO LUIS, PETERLIK AZABACHE IVAN, Manual De JSP, 2006.
URBANEJA FAN, JAVIER; JSP; Anaya Multimedia-Anaya Interactiva; 2009.
JON BYOUS, Java technology: The early years; Sun Developer Network; 2005.
JAMES GOSLING, A brief history of the Green project, Java.net, 2005.
ELECTRÓNICAS:
Lenguaje HTML.
http://www.desarrolloweb.com/articulos/711.php
Manual de Javascript.
http://www.manualdejavascript.com/
Gráficos con JFreeChart.
http://es.wikipedia.org/wiki/JFreeChart
Introducción a los Servlets.
http://www.programacion.com/articulo/servlets_basico_108
VIDEOS
Holamundo con Servlet.
http://www.youtube.com/watch?v=iyMkzCn9tV4
Javascript.
http://www.youtube.com/watch?v=N7SBmqVY5W8
Servlets.
http://www.youtube.com/watch?v=1Bz69lUDboI
UNIVERSIDAD PRIVADA TELESUP
195
1. C
2. C
3. C
4. B
5. A
6. D
7. D
8. C
9. B
10. A
1. B
2. A
3. C
4. A
5. B
6. B
7. D
8. A
9. A
10. B
1. B
2. C
3. D
4. D
5. B
6. B
7. B
8. A
9. C
10. A
1. D
2. A
3. B
4. C
5. B
6. C
7. E
8. B
9. E
10. C
Solucionario
top related