Lenguaje de Programación III

UNIVERSIDAD PRIVADA TELESUP

1


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


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.


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


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.


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


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.


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


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.


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


5

<


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.


7

TEMA 1

Reconocer la importancia del uso de la programación en páginas web.

Competencia:

HTML a

Introducción


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.


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:[email protected]">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>


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>


</tr>

<tr>



</tr>

</table>


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:


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.


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>


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?


15

Ejemplos de páginas web:

Página con Hipervínculos y viñetas

Código Fuente:

Resultado:


16

Página con Tablas HTML

Código Fuente:

Resultado:


17

Formulario Web

Código Fuente:

Resultado:


18

TEMA 2

Identificar la importancia del envió de datos entre páginas web.

Competencia:

JSP a

Introducción


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


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)


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).


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:


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:


24

Ejemplo 2: Mostrar en una tabla (TABLE) 10 números aleatorios y al costado

debe salir si es par o impar.

Código:



<html>

<head>



</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:


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:



<html>

<head>


</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:

http://www.google.com.pe/imgres?imgurl=http://lilianamayagoitia.com/wp-content/uploads/2011/06/cambiandomentalidad.jpg&imgrefurl=http://lilianamayagoitia.com/category/desarrollo/&usg=__y2R_A8lxVrT1PaSFT5sDp5iHE7g=&h=180&w=179&sz=21&hl=es&start=32&zoom=1&tbnid=1rmmqm4aFMwLxM:&tbnh=101&tbnw=100&ei=9yALT_DFOoStgQf3rNG2Ag&prev=/search?q=analizar&tbnh=143&tbnw=129&um=1&hl=es&gbv=2&sig=103722426853586294849&biw=983&bih=544&tbs=simg:CAESHwlr23LmUDVhKBoLCxCo1NgEGgIIFwwhEBwiDPBfoxE&tbm=isch&um=1&itbs=1


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


27

Luego escogemos el servidor web con el cual se va a trabajar (Podemos seleccionar el

que sale por defecto)


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


29

TEMA 3

Implementar los códigos necesarios de lado del cliente.

Competencia:

Datos Entre de Envío

Páginas


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.



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.


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)


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


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


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"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


<title>Resultado</title>

</head>

<body>


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;

}


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>


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="submit" value="Enviar Informacion">

</form>

</center>

</body>

</html>


39

Resultado Pagina3.html:

Código Pagina3.jsp: <%@page contentType="text/html"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


<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;

}

}


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:


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)


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


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.


44

TEMA 4

Insertar los códigos necesarios de lado del servidor.

Competencia:

JavaScript


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>


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>



<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>


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>





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";


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>


50

<td><input type="text" name="txtdni" maxlength="8"

onkeypress="validarnum();"></td>

</tr>

<tr>

<td>Nacionalidad</td>

<td>


<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="button" value="Enviar Consulta" onclick="validartodo();">

</form>

</body>


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>



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;


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>

<td><input type="button" value=" " name="boton"

onclick="poner(this)"/></td>

</tr>

<tr>


/></td>


53


/></td>



</tr>

<tr>


/></td>


/></td>



</tr>

<tr>


/></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


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>


</head>

<body>


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


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í:


56

El código seria así: <body>


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

}


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>






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>

</html>


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,


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


http://www.manualdejavascript.com/


60

3. Ingresa al link “Alumnos JSP II” lee atentamente las indicaciones,


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:


4. Ingresa al link “Javascript” lee atentamente las indicaciones,


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:



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


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.


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.


64


65

Introducció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.


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.


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

http://images.google.com.pe/imgres?imgurl=http://www.u-telesup.com/file.php/1/img/logo_circular_11.jpg&imgrefurl=http://www.u-telesup.com/&usg=__IZ_CCta55cSHkx6FUZKOmCOnhXA=&h=350&w=350&sz=47&hl=es&start=9&tbnid=CpAg0PRBS42UjM:&tbnh=120&tbnw=120&prev=/images?q=telesup&gbv=2&hl=es&sa=G


67


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;

http://www.google.com.pe/imgres?q=programas+informaticos&hl=es&sa=X&rlz=1W1ADFA_es&biw=820&bih=567&tbm=isch&prmd=ivns&tbnid=lzcbUeihJ1FClM:&imgrefurl=http://destinopedagogico.blogspot.com/2010/04/blog-post_22.html&docid=WuWsEpudC85npM&w=325&h=318&ei=WQgqTqCgONORgQfNq4msCw&zoom=1


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')


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:


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


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


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.


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;


call eliminar("A0001")

Procedimiento “Listar”

create procedure listar()

select * from producto;


call listar()

http://www.google.com.pe/imgres?q=base+de+datos+estaticas&hl=es&sa=X&rlz=1T4ADFA_esPE408&biw=1024&bih=586&tbm=isch&tbnid=eP_q3wYLXULIaM:&imgrefurl=http://yaadiira.blogspot.com/2010/11/base-de-datos.html&docid=MyJZEO6Q7xtquM&w=376&h=254&ei=8sIuTuWJC-jz0gHz78TZAQ&zoom=1


74

TEMA 2

Desarrollar páginas dinámicas con acceso a base de datos.

Competencia:

a

Java: JDBC

Base Introducción

desde de

Datos


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

.

http://www.google.com.pe/imgres?q=base+de+datos+estaticas&hl=es&sa=X&rlz=1T4ADFA_esPE408&biw=1024&bih=586&tbm=isch&tbnid=e5_6-H26ts9LEM:&imgrefurl=http://bases-de-datos-is118.blogspot.com/2010/07/bases-de-datos.html&docid=ZHRgEkZb6quplM&w=320&h=209&ei=h8QuTsajI8Xi0QHZ7_m3AQ&zoom=1


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.


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í:


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.


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.


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.

http://www.google.com.pe/imgres?q=ingeniero+de+sistemas&hl=es&rlz=1T4ADFA_esPE408&biw=897&bih=567&tbm=isch&tbnid=I1oU80PiBaFw6M:&imgrefurl=http://www.ingenieroperu.com/ingeniero-de-sistemas/&docid=eUyDnh2OPbHb7M&w=229&h=200&ei=kZwtTueRCJO3tgeq_sDXAg&zoom=1


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.

http://www.google.com.pe/imgres?q=sistemas+informaticos&hl=es&rlz=1T4ADFA_esPE408&biw=897&bih=567&tbm=isch&tbnid=GkLvDfhJQedN4M:&imgrefurl=http://huespag.blogspot.com/2010/05/sistema-informatico.html&docid=YxKbHtVInrmy_M&w=456&h=296&ei=na4tTsLQFoagtwfJ5ZjYAg&zoom=1


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


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

http://www.google.com.pe/imgres?q=digitador&hl=es&rlz=1T4ADFA_esPE408&tbm=isch&tbnid=j4MO9UQr1sMSnM:&imgrefurl=http://abc-melilu.blogspot.com/&docid=4csA_8QC0WT1UM&w=251&h=201&ei=ZPgtTvD-J7K00AHpkrjkDg&zoom=1&iact=hc&vpx=741&vpy=245&dur=2213&hovh=160&hovw=200&tx=164&ty=150&page=10&tbnh=141&tbnw=193&start=128&ndsp=15&ved=1t:429,r:4,s:128&biw=1024&bih=586


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

http://www.monografias.com/trabajos6/arma/arma.shtml


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.)


86

Luego se debe de escoger la base de datos a la cual nos queremos conectar.


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.


88

TEMA 3

Implementar consultas a base de datos desde páginas web.

Competencia:

Dinámicas

en Páginas Consultas


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


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”,”")

;

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"> 

<%while(tbl.next()){ // Recorremos el resultset mientras que se pueda leer

%>

<option

value="<%=tbl.getInt(“idcargo”)%>"><%=tbl.getString(“nomcargo”)%></option>

<%}%>

</select>

<%}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


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




<html>

<head>



</head>

<body>

<form name="form1" method="post" action="Ejer12.jsp">

<% try{


Connection


;

PreparedStatement da = null;

da = cn.prepareStatement("Select Distinct CargoContacto from clientes");

ResultSet tbl=da.executeQuery();

String cargo="";%>


<%while(tbl.next()){

cargo=; tbl.getString("Cargocontacto") %>

<option value="<%=cargo%>"><%=cargo%></option>

<%}%>

</select>


93

<%}catch(Exception e){

out.print(e);

}

%>

<input type="submit" value="Enviar">

</form>

</body>

</html>

Ejer12.jsp




<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=UTF-8">


</head>

<body>

<% try{


Connection


; 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">


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




<html>

<head>



</head>

<body>

<form name="form1" method="post"

action="Ejer21.jsp">

<% try{



95

Connection


;


da = cn.prepareStatement("Select IdEmpleado,Nombre + ' ' + Apellidos as

nombre from Empleados");


%>



<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();

}

%>


96

<% da.close();

cn.close();


out.print(e);

}%>

</body>

</html>

Llenar un combo con clientes al escoger un cliente deberá de salir sus

pedidos

Ejer31.jsp




<html>

<head>



</head>

<body>


<% try{


Connection


;


da = cn.prepareStatement("Select IdCliente,NombreCia from Clientes");


%>

<select name="combo1" onchange="form1.submit();">

<%

String cod="",nom="";

while(tbl.next()){

cod=tbl.getString("IdCliente");


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>

<%


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();


out.print(e);

}%>

</body>

</html>


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




<html>

<head>



</head>

<body>


<% try{


Connection


;


da = cn.prepareStatement("Select IdCategoria,NombreCategoria from

Categorias");


int codcat=0,codprod=0;

int cod=0;

String nom="";

%>

<select name="combo1" onchange="form1.submit();">

<%

if(request.getParameter("combo1")==null){


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{%>


<%}%>

<%}

tbl.close();%>

</select>

<%


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"));

}


100

while(tbl.next()){

cod=tbl.getInt("IdProducto");

nom=tbl.getString("NombreProducto");%>

<%if(cod==codprod){%>

<option value="<%=cod%>" SELECTED><%=nom%></option>

<%}else{%>


<%}%>

<%}

tbl.close();%>

</select>

<%}%>

</form>

<%


da = cn.prepareStatement("Select * from PedidosDeta where

idProducto=?");

da.setInt(1,codprod);

tbl=da.executeQuery();%>

<table border=1>


<tr>

<td><%=tbl.getInt("IdPedido")%></td>

<td><%=tbl.getInt("Cantidad")%></td>

<tr>

<%}

tbl.close();

}

%>

<% da.close();

cn.close();


out.print(e);

}%>

</body>

</html>


101

TEMA 4

Comprender el uso de sesiones de usuario.

Competencia:

Sesiones


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.


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)


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” %>

<%


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:

<%


Sesion.getAttribute(“nombre”);

%>


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:

<%


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);

}

%>


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 session="true" %>

<%@ page import="java.util.Vector" %>

<html>

<head>


</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:


107

Código Pag2.jsp:


<%@page pageEncoding="UTF-

8"%>


<%@ page import="java.util.Vector"

%>

<html>

<head>


</head>

<body>

<%


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:


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


<html>

<head>


</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>


109

Resultado pag3.jsp

Código pag4.jsp





<%@ 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);


110

Vector v;


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

import="Idat.Java.Beans.Alumno" %>


111

<html>

<head>


</head>

<body>

<%


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>


112

1. Ingresa al link “MySQL” lee atentamente las indicaciones,


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


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/





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?


b. ResultSet.

c. Connection.


e. Array.

5) ¿Es una matriz que tendrá filas y columnas con los datos de un

preparedStatement?


b. ResultSet.

c. Connection.


e. Array.


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.


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.

http://es.wikipedia.org/wiki/Modelo_relacional

http://es.wikipedia.org/wiki/Multiusuario

http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web

http://es.wikipedia.org/wiki/Drupal

http://es.wikipedia.org/wiki/PhpBB


116


117

Introducció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.


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.


118

TEMA 1

Reconocer reportes para páginas web.

Competencia:

JSP en

Reportes



119


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.


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.


121

De ahí nos pedirá poner un nombre y establecer los tamaños del reporte.

Finalmente el programa responderá con la siguiente pantalla.


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”.


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.


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.


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.


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.


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.


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”.


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.


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.


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.

http://www.jasperforge.org/


132

Implementar gráficos para páginas web.

Competencia:

en

JSP

Gráficos TEMA 2


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.


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.


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:


136

Ahora si queremos el mismo grafico pero en barras la programación seria:


137

Hay que notar que la programación es casi la misma.


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:


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:


139

TEMA 3

Conocer scripts en las páginas web para una mejor presentación.

Competencia:

en

JSP

jQuery


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.


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”,

http://jquery.com/


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.


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


Cuando se haga click en “ver datos” se llamara a otra pagina llamada “Listado”


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.



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">



146

4

TEMA 4

Analizar el uso de servlets.

Competencia:

de

Servlets

Uso



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!


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.


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”.


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:


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…


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.


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.


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.


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.


JFREECHART

http://elespaciodejaime.wordpress.com/tag/jfreechart/

SERVLETS http://www.programacion.com/articulo/servlets_basico_108


http://elespaciodejaime.wordpress.com/tag/jfreechart/


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.


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.


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.


159


160

Introducció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.


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.


161

TEMA 1

Identificar las capas de programación en web.

Competencia:

en Capas

a Programación

Introducción



162


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


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.


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.


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.


166

TEMA 2

Implementar las capas de programación en web.

Competencia:

de

Capas

Implementación



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.


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)



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.


170


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


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”


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


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


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


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.

*" %>


176

TEMA 3

Conocer consultas con programación en capas.

Competencia:

n- con

Capas

Consultas


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


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[]{});


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;


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


181

Ahora si queremos cambiar la presentación y el listado lo queremos en un combo la

programación seria así:



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


183

Ahora creamos la entidad

Solo necesitamos esos 2 atributos (Año y monto)

Ahora creamos el negocio


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


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.


185

TEMA 4

Reconocer el mantenimiento usando programación en capas.

Competencia:

n- con

Capas

Mantenimientos


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.


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.


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.


189

1. Ingresa al link “Tabla con Capas” lee atentamente las indicaciones,


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.


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



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.


d. CapaEntidad.

e. Pagina web.

3) ¿Tiene como finalidad desarrollar la lógica del negocio?

a. CapaDatos.

b. CapaNegocio.


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.


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.


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.


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.


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.


Manual de Javascript.


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



http://es.wikipedia.org/wiki/JFreeChart

http://www.programacion.com/articulo/servlets_basico_108

http://www.youtube.com/watch?v=iyMkzCn9tV4

http://www.youtube.com/watch?v=N7SBmqVY5W8

http://www.youtube.com/watch?v=1Bz69lUDboI


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

Lenguaje de Programación III

Documents

Transcript of Lenguaje de Programación III