Manual JSP Odbc SqlServer 1

Manual de JSP – Docente: Daniel Fernando Loza Santa Cruz
Búsqueda y Actualización De Datos Con Servlets

Objetivo:
El alumno será capaz de desarrollar aplicaciones de: búsqueda y actualización de
datos, utilizando las instrucciones Transact SQL Server con los Servlets en JSP.
Herramientas:
 Apache Tomcat
 Odbc
 SQL Server 2008
 Dreamweaver (Cs4 o Superior)
 Eclipse Helios
Procedimiento:
Parte 1.- Configuración del Tomcat
1. Inicio / Ejecutar
2. Se visualiza la siguiente pantalla:
Digitar:
Services.msc
Clic en: Aceptar
Doble Clic en: Apache Tomcat 6
Correo: dlozas@hotmail.com Página 1

Clic en la opción: Deshabilitado
Clic en el botón: Detener
Clic en los botones: Aplicar y Aceptar

Parte 2.- Creación De La Base De Datos
1. Activar el SQL Server 2008
Inicio de Sesión: sa
Contraseña: Cepea
Clic en: Conectar
2. Seleccionar el botón:
3. Se Genera una base de Datos:

4. Se realiza un listado de datos con la siguiente instrucción:
5. Grabar el código con el nombre: Script03 hacia la carpeta: TrabajoJsp3

Parte 3.- Creación Del ODBC
1. Clic en: Inicio
Clic en: Panel de Control

Doble Clic en: Herramientas Administrativas
3. Doble clic en el icono: Orígenes de datos(ODBC)
Clic en: Agregar
Clic en: SQL Server
Clic en: Finalizar
Nombre del ODBC: Demo03
Descripción: Búsqueda Y Actualización
Clic en: Siguiente

Seleccionar la bdd: demoactualiza
Clic en: Siguiente
Clic en: Siguiente
Seleccionar el idioma: Spanish
Clic en: Finalizar Clic en: Probar Origen de Datos
Clic en: Aceptar (Por Cada Ventana)

Parte 4.- Generar La Pagina JSP
1. Doble clic en el icono: Eclipse Helios
Carpeta de Trabajo: TrabajoJsp3
Clic en: Ok

Clic en: X
6. De la barra de menús, seleccionar la opción: Window
Clic en: Add…
Clic en: Preferences
Clic en: Server
Clic en: Runtime Environments

Clic en: Apache Tomcat v6.0
Clic en: Finish
Apacha Tomcat Configurado
Clic en: Ok

9. De la barra de menús, Clic en: File
Clic en: New
Clic en: Web
Clic en: Dynamic Web Project
Clic en: Next

Clic en: Other
10. Se Visualiza la siguiente pantalla:
Nombre del Proyecto: Ingactualiza
Clic en: Finish

Clic en: Yes
12. En el Project Explorer (Explorador de Proyectos), clic derecho en Ingactualiza:
Clic en: New
Clic en: JSP File

Carpeta Seleccionada: WebContent
Nombre del Archivo: index.jsp
Clic en: Finish
Modificar el titulo por: Búsqueda Y Actualización De Datos

15. Para activar el cuadro de herramientas, de la barra de menús, seleccionar la opción:
Window.
Clic en: Show View
Clic en: Other
Clic en: General
Clic en: Pallete
Clic en: Ok
17. Insertar un Formulario dentro de las etiquetas <body> </body>
Clic y Arrastre en el icono Form (Formulario), dentro de las etiquetas <body> </body>

En Action digitar el nombre del servlet: Búsqueda
En Method, seleccionar el método de envío: Post
Clic en: Finish
Formulario Insertado
Parte 5.- Generando El Diseño De La Búsqueda en el Dreamweaver

1. Se activa el programa DreamWeaver
Clic en: Adobe DreamWeaver CS4

Clic en la carpeta: Más…
Clic en: Ninguno
Clic en: JSP

La opción por defecto
Clic en: Crear

Clic en el icono: Diseño
6. Se inserta un objeto Formulario:
En el cuadro de herramientas, en el icono: Formulario,

clic y arrastre hacia la zona de trabajo

7. Ubicar al cursor dentro del formulario
8. De la barra de menús, seleccionar la opción: Insertar
Clic en la opción: Tabla
Filas: 3 Columnas: 2
Clic en: Aceptar
10. Se visualiza la siguiente tabla:

11. Seleccionar las celdas de la primera fila de la tabla:
Celdas Seleccionadas
12. En la parte inferior de la pantalla (Paleta de Propiedades), se visualiza lo siguiente:
Clic en el icono: combinar Celdas
13. Digitar los siguientes textos en las celdas:
Seleccionar las celdas de la última fila de la tabla
15. Insertar un objeto Botón dentro de la tabla:
Clic y arrastre en el icono: Botón en la última fila de la tabla

Clic en: Aceptar
Id: b1
17. Seleccionar todas las celdas de la tabla, En el cuadro de propiedades:
Clic en Vertical: Medio
Clic en Horizontal: Centro
18. Insertar un cuadro de Texto en la siguiente celda:
Clic y arrastre en el campo de texto hacia la celda

Id: tcodigo
Clic en: Aceptar

20. Se visualiza el siguiente diseño:
21. Seleccionar el texto de la primera fila de la tabla:
Clic en: Encabezado 1
23. Seleccionar el texto: Codigo

25. Clic en el botón: Código
Seleccionar el código a partir de las etiquetas: <table></table> y copiar
27. En el editor del eclipse (index.jsp), ubicar el cursor debajo de la etiqueta <form> y
pegar el código:

28. Grabar los cambios en el eclipse helios
29. Seleccionar el botón de comando:
Cambiar el texto del value por: Buscar
30. En el DreamWeaver, grabar el archivo con el nombre: Diseño01, hacia la carpeta:

TrabajoJsp3
Parte 6.- Agregar Un Servlet Al Proyecto
1. En el explorador de proyectos, clic derecho en: Ingactualiza, se visualiza la siguiente
pantalla:
Clic en: New
Clic en: Package

Nombre del Paquete: Paquete01
Clic en: Finish
3. Clic derecho en: Paquete01
Clic en: New
Clic en: Servlet

Nombre del ServletBúsqueda
Clic en: Finish
Parte 7.- Generando El Diseño Del Servlet En El DreamWeaver

1. En la barra de menús, clic en: Archivo
Clic en: Cerrar Todos

Clic en la carpeta: Más…
Clic en: Ninguno
Clic en: JSP

La opción por defecto
Clic en: Crear

Clic en el icono: Diseño
6. Se inserta un objeto Formulario:
En el cuadro de herramientas, en el icono: Formulario,

clic y arrastre hacia la zona de trabajo

7. Ubicar al cursor dentro del formulario
8. De la barra de menús, seleccionar la opción: Insertar
Clic en la opción: Tabla

Filas: 6 Columnas: 2
Clic en: Aceptar
10. Seleccionar las celdas de la primera fila:

12. Digitar los siguientes textos en las celdas:
13. Insertar un botón en una de las celdas:
Clic y arrastre en el icono: Botón en la última celda de la tabla
Id: b2
Clic en: Aceptar

15. Seleccionar todas las celdas de la tabla:
16. En el cuadro de propiedades:
Clic en Vertical: Medio
Clic en Horizontal: Centro
17. Seleccionar el texto de la primera celda de la tabla:

19. Seleccionar las siguientes celdas
Celdas Seleccionadas
21. Se visualiza el siguiente diseño de la tabla:

22. Se inserta los cuadros de textos (Campo de Texto), en las celdas:
Clic y arrastre en el campo de texto hacia la celda
Clic en: Aceptar
Id tcodact
24. En la ventana de propiedades( Parte inferior de la pantalla):
Para el cuadro: tcodact, activar la opción: Solo lectura

25. Diseño Final De La Tabla:
Id: tcodact
Id: tdescact
Id: tprecact
Id: tstockact
26. Clic en el botón: Código

Seleccionar el código a partir de las etiquetas: <html></html> y copiar
Parte 8.- Codificando en el Servlet: Busqueda.java

1. En la sección import:
 La primera clase es para la conexión a la base de datos del SQL Server
 La segunda clase es para la configuración del servlet (Init)
 La tercera clase es para imprimir datos/Textos (out.Println)

2. Se declaran los siguientes objetos:
3. Se genera el método de conexión a la base de datos:
4. Se genera el método de cerrar la base de datos:
5. En el método doPost:
 Se almacena el código encontrado en vcod por

medio del método: getParameter
 Se genera un objeto Statement con st
 Se genera la consulta con el objeto ResultSet: rs

6. Se pega el código del diseño del formulario y tabla que se genero en el DreamWeaver
y utilizar el método: out.println (Como se visualiza en la siguiente imagen)

7. Agregar las variables por medio del value:
8. En el código:
Reemplazar a por:

<a href=http://localhost:8080/Ingactualiza/index.jsp>Retornar</a>
Nota: Se genera un vinculo de Retorno a la página web: Index.jsp
9. Se visualiza el código como en la siguiente imagen:

10. En el código del servlet:
Agregar al action el
servlet: Modificar
Parte 9.- Se Agrega Un Servlet: Modificar (Actualización de Datos)

1. En El explorador de proyectos, clic derecho en: paquete01
Clic en: New
Clic en: Servlet

Nombre del Servlet: Modificar
Clic en: Finish

4. En la sección import:  La primera clase es para la conexión a la base de datos del SQL Server
 La segunda clase es para la configuración del servlet (Init)
 La tercera clase es para imprimir datos/Textos (out.Println)
5. Se declaran los siguiente objetos:
6. Se generan los métodos de abrir y cerrar la conexión a la base de datos:

7. En el método: doPost, se genera la siguiente instrucción:
8. Grabar y Ejecutar, clic derecho en: Index.jsp
Clic en: Run On Server

Clic en: Run As

Clic en: Finish
 Digitar un código
 Clic en el botón: Buscar
 Se Modifican los datos

 Clic en el botón: Actualizar

13. Clic en el vinculo: Retornar
Practica Calificada
1. Se tiene una base de datos con el nombre: Librería
2. Se tiene una tabla con el nombre: Libros cuya estructura es el siguiente:
Campo Tipo
Cod_Libro Char (7)
Nom_Libro Varchar(40)
Precio_Libro Decimal(10,2)
Stock_Libro Int
Numpag_Libro Int
Edición Varchar(60)
Imprenta Varchar(60)
3. Insertar 10 registros, utilizando el Insert
4. Desarrollar una aplicación web con servlet, que nos permita buscar por el código del
libro y actualizar los datos del libro.

Manual JSP Odbc SqlServer 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual JSP Odbc SqlServer 1

Cargado por

Copyright:

Formatos disponibles

Manual de JSP – Docente: Daniel Fernando Loza Santa Cruz

Búsqueda y Actualización De Datos Con Servlets

Clic en: Aceptar

3. Se visualiza la siguiente pantalla:

Doble Clic en: Apache Tomcat 6

Correo: dlozas@hotmail.com Página 1

Clic en la opción: Deshabilitado

Clic en el botón: Detener

5. Se visualiza la siguiente pantalla:

Clic en los botones: Aplicar y Aceptar

Correo: dlozas@hotmail.com Página 2

Clic en: Conectar

3. Se Genera una base de Datos:

Correo: dlozas@hotmail.com Página 3

5. Grabar el código con el nombre: Script03 hacia la carpeta: TrabajoJsp3

Clic en: Panel de Control

Correo: dlozas@hotmail.com Página 4

Doble Clic en: Herramientas Administrativas

3. Doble clic en el icono: Orígenes de datos(ODBC)

4. Se visualiza la siguiente pantalla:

Clic en: Agregar

Clic en: SQL Server

Clic en: Finalizar

Nombre del ODBC: Demo03

Descripción: Búsqueda Y Actualización

Clic en: Siguiente

Correo: dlozas@hotmail.com Página 5

Seleccionar la bdd: demoactualiza

Clic en: Siguiente

Clic en: Siguiente

Seleccionar el idioma: Spanish

Clic en: Finalizar Clic en: Probar Origen de Datos

6. Se visualiza la siguiente pantalla:

Clic en: Aceptar (Por Cada Ventana)

Correo: dlozas@hotmail.com Página 6

2. Se visualiza la siguiente pantalla:

3. Se visualiza la siguiente pantalla:

Carpeta de Trabajo: TrabajoJsp3

4. Se visualiza la siguiente pantalla:

Correo: dlozas@hotmail.com Página 7

6. De la barra de menús, seleccionar la opción: Window

Clic en: Add…

Clic en: Preferences

Clic en: Server

Clic en: Runtime Environments

Correo: dlozas@hotmail.com Página 8

Clic en: Apache Tomcat v6.0

Clic en: Finish

8. Se visualiza la siguiente pantalla:

Apacha Tomcat Configurado

Correo: dlozas@hotmail.com Página 9

Clic en: New

Clic en: Web

Clic en: Dynamic Web Project

Clic en: Next

10. Se Visualiza la siguiente pantalla:

Nombre del Proyecto: Ingactualiza

Clic en: Finish

Correo: dlozas@hotmail.com Página 10

Clic en: Yes

12. En el Project Explorer (Explorador de Proyectos), clic derecho en Ingactualiza:

Clic en: New

Clic en: JSP File