Lab04-DAW - JSP - Acceso a Base de Datos Yonela Carbajal PDF

Preview

Summary

Diseño de Software eIntegración de SistemasDESARROLLO DE APLICACIONES WEBLABORATORIO N° 04JSP y Acceso a Base de DatosAlumno(s): Yonela Carbajal Valdivia NotaGrupo: C24-B Ciclo: IIICriterio de Evaluación Excelente (4pts)Bueno (3pts)Requiere mejora (2pts)No acept. (0pts)Puntaje LogradoAccede a inform...

Description

Diseño de Software e Integración de Sistemas

DESARROLLO DE APLICACIONES WEB LABORATORIO N° 04

JSP y Acceso a Base de Datos

Alumno(s):

Yonela Carbajal Valdivia

Grupo:

C24-B Criterio de Evaluación

Accede a información almacenada en bases de datos relacionales desde una aplicación web en Java Maneja adecuadamente el uso de variables de sesión Desarrolla adecuadamente los ejercicios propuestos Realiza observaciones y conclusiones que aporten un opinión crítica y técnica Es puntual y redacta el informe adecuadamente sin copias de otros autores

Nota Ciclo: III Excelente (4pts)

Bueno (3pts)

Requiere mejora (2pts)

No acept. (0pts)

Puntaje Logrado 3

3 8 3 3

Desarrollo de Aplicaciones Web

Laboratorio 4: JSP y Acceso a Base de Datos Objetivos: Al finalizar el laboratorio el estudiante será capaz de: • Implementar aplicaciones Web en Java • Implementar código Java en Aplicaciones Web en Java •

Seguridad: • • •

Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio. No ingresar con líquidos, ni comida al aula de Laboratorio. Al culminar la sesión de laboratorio apagar correctamente la computadora y la pantalla, y ordenar las sillas utilizadas.

Equipos y Materiales: •

Una computadora con: • Windows 7 o superior • VMware Workstation 10+ o VMware Player 7+ • Conexión a la red del laboratorio

•

Máquinas virtuales: • Windows 8.1 Pro 64bits Español - Plantilla

•

Instaladores: • MySQL • Driver Java para MySQL

Procedimiento: Lab Setup 1. Inicio del equipo virtual (Opcional) 1.1. Encender el equipo 1.2. Acceder empleando la cuenta de usuario: Tecsup, contraseña: _______________ 1.3. Iniciar el Software VMWare. 1.4. Abrir el clon del equipo virtual C15-DAW creado la sesión anterior 1.5. Iniciar el equipo virtual C15-BDAV 1.6. Identifíquese con la cuenta de usuario: Redes. Contraseña: RCDTecsup2 1.7. Iniciar el IDE Netbeans

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 2

Desarrollo de Aplicaciones Web Creación de Proyecto 2. Cree un nuevo proyecto denominado 2.1. Inicie el programa Apache Netbeans 2.1.1.Elija la opción: File → New Project y luego elija las siguientes opciones: • Categories: Java with Maven • Projects: Web Application • Clic Next 2.1.2.En la siguiente ventana complete los siguientes datos: • Project Name: WebJava04 • Project Location: Crear la carpeta C:\Aplicaciones\Netbeans • Project Folder: Dejar por defecto • Artifact Id: Dejar por defecto • Group Id: com.miempresa • Version: 1.0-SNAPSHOT • Package: com.miempresa.webjava04 • Clic Next 2.1.3.En la siguiente ventana verifique los siguientes datos: • Server: Apache Tomcat or TomEE • Java EE Versión: Java EE 7 Web • Clic Finish 2.2. Agrege el soporte de BootStrap a su proyecto Acceso a una Base de datos Relacional 3. Instalación de MySQL 3.1. Descarge MySQL desde su sitio oficial o ingrese al DRIVE mostrado 3.2. https://drive.google.com/drive/folders/0B0VPkO9ee2sHNFRuRnQyUjgxa2c?usp=sharing 3.3. Instale el archivo mysql-installer-web-community-8.0.12.0. Fijese en el puerto en que se esta instalando la aplicacion. Verifique que se instale tambien mysql-workbenchcommunity-8.0.17 ya que necesitamos un entorno visual para acceder a la base de datos. 3.4. Asigne al usuario root la contraseña “tecsup” 3.5. OJO: Si desea un entorno mas ligero al de Workbench puede instalar mysql-gui-tools-5.0r17-win32 4. Creación de base de datos 4.1. Crear una base de datos de nombre test 4.2. En la base de datos “test”. Crear una tabla de nombre areas con el siguiente comando create table areas ( cod int primary key auto_increment, nom varchar(30), est varchar(1) ); 4.3. Adicione algunos registros a la tabla anterior (mínimo 5 registros). Adjunte una imagen de la tabla creada

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 3

Desarrollo de Aplicaciones Web 5. Acceder a MySQL desde la aplicación Web 5.1. Adicionar a la aplicación Web el driver JDBC para acceder a la base de datos MySQL 5.1.1. Dirijase a la pagina oficial de maven repository y busque bajo la palabra mysql 5.1.2. Clic en sugerencia de la primera busqueda : MySQL Connector/J

5.1.3.

Elija la ultima version mostrada: 8.0.26

Copie la referencia mostrada en maven a su archivo pom.xml

mysql mysql-connector-java 8.0.26

5.1.5. Verifique que haya aparecido la librería de mysql-conenctor en su carpeta de “Dependencies” 5.2. Adicionar a la aplicación Web un nuevo documento JSP de nombre: áreas 5.1.4.

5.3. Adicione al documento index.html un enlace que permita cargar el documento areas.jsp. Adjunte el código html del enlace adicionado

5.4. Adicione el siguiente scriptlet al inicio del documento areas.jsp (agrege antes de la etiqueta )

Nota: Sera necesario importar las clases Connection, DriverManager, Statement y ResultSet en el documento, todas del paquete java.sql.* 5.5. Importe en el archivo areas.jsp la referencia a la librería BootStrap 5.6. Adicione el siguiente scriptlet en el body del documento areas.jsp

Listado de Areas

CODIGO NOMBRE ESTADO





5.7. Haga clic derecho en el archivo areas.jsp→ → Run file 5.8. Verifique que se listan todos los registros de la tabla áreas de la base de datos test.

5.9. Adjunte la imagen que muestre su salida correspondiente

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 5

Desarrollo de Aplicaciones Web

EJERCICIO DE APLICACIÓN – LOGIN EN JSP 6. CREACION DE LA BASE DE DATOS 6.1. En MySQL crear una tabla denominada: ”t_usuarios” en la base de datos test con la siguiente estructura: CAMPO

TIPO DE DATO

CODIGO

VARCHAR(5)

NOMBRE

VARCHAR(30)

CLAVE

VARCHAR(30)

ESTADO

VARCHAR(1)

6.2. Agregue un registro a la tabla datos con los siguientes datos: INSERT INTO t_usuarios VALUES (‘0’,’dapaza’,’123456’,’A’);

VALIDACIÓN DE USUARIO 6.3. En el nodo Web Pages. Adicione un nuevo archivo denominado login.jsp y modifique el contenido de como se indica a continuación:



Usuario

Password

Ingresar Cancelar

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 6

Desarrollo de Aplicaciones Web

6.4. Adicione al documento index.html un enlace que permita cargar el documento login.jsp. Adjunte el código html del enlace adicionado:

6.5. Dirijase al nodo Source Pa ckages clic derecho New→ → Java Package. Cree un nuevo package denominado Modelos. Dentro de este package creado, cree una clase Java denominada cBaseDatos con el siguiente contenido:: package Modelos; import java.sql.*; import java.util.*; public class cBaseDatos { String driver = "com.mysql.cj.jdbc.Driver"; String url="jdbc:mysql://localhost:3306/test?useSSL=false&serverTimezone=UTC"; String usuario = "root"; String clave = "12345678"; private Connection Conectar() { try { Class.forName(driver); Connection xcon = DriverManager.getConnection(url,usuario,clave); return xcon; } catch(Exception e) { System.out.println(e.toString()); } return null; } public boolean validarUsuario(String xnom, String xcla) { try { Connection xcon = this.Conectar(); String sql = "select count(*) from t_usuarios where nombre=? AND clave=?"; PreparedStatement ps=xcon.prepareStatement(sql); ps.setString(1, xnom ); ps.setString(2, xcla ); Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 7

Desarrollo de Aplicaciones Web ResultSet rs = ps.executeQuery(); rs.next(); String cantidad = rs.getString(1); int xcant = Integer.parseInt( cantidad ); if ( xcant > 0 ) return true; xcon.close(); return false; } catch (Exception ex ) { System.out.println(ex.toString()); } return false; } } 6.6. Dirijase al nodo Source Packages clic derecho New→ → Java Package. Cree un nuevo package denominado Controladores. Crear un nuevo Servlet en el paquete Controladores denominado ServletVerifica: Modifique la función processRequest() como se indica a continuación: protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String xnom = request.getParameter("xnom"); String xcla = request.getParameter("xcla"); cBaseDatos objDB = new cBaseDatos(); if (objDB.validarUsuario(xnom, xcla)){ HttpSession misession= request.getSession(true); misession.setAttribute("usuario",xnom.toUpperCase()); response.sendRedirect("/WebJava04/areas.jsp"); }else response.sendRedirect("/WebJava04/index.html"); } finally { out.close(); } } NOTA: Importe las clases necesarias según lo requiera la aplicación (cBaseDatos, HttpSession) 6.7. Modifique el contenido del archivo áreas.jsp. Agrege en la parte inicial antes de las lineas de llamado de conexión a la base de datos,el codigo que se muestra:

6.8. Ejecute su archivo áreas.jsp. Verifique que no se puede tener acceso Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 8

Desarrollo de Aplicaciones Web

6.9. Haga clic en Ir a pagina de acceso. Ingrese con el usuario: dapaza y clave: 123456. (o puede probar autenticarse con su usuario propio de usted)

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 9

Desarrollo de Aplicaciones Web

6.10.

Verifique que puede ver el contenido de la página áreas.jsp.

6.11.

Agregaremos la funcionalidad para cerrar la sesion activa

6.12. Crear un nuevo Servlet en el paquete Controladores denominado ServletSesion: Modifique la función processRequest() como se indica a continuación: protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); try { HttpSession misession= (HttpSession) request.getSession(); misession.removeAttribute("usuario");

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 10

Desarrollo de Aplicaciones Web misession.invalidate(); response.sendRedirect("/WebJava04/index.html"); }finally{} }

6.13. En el archivo areas.jsp antes de la etiqueta de titulo Listado de Areas, agrege las siguientes etiquetas para mostrar el usuario logeado y un boton de cerrar sesión Usuario Logeado: Cerrar Sesion 6.14.

Ingrese al sistema y verifique que en el archivo areas.jsp se muestra lo programado

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 11

Desarrollo de Aplicaciones Web

Ejercicio propuesto 7. Tabla cargos 7.1. Crear en la base de datos “test” una nueva tabla denominada “cargos” con los campos: (cod, nom, cargo, est).

7.2. Adicione algunos registros a la tabla (mínimo 5)

7.3. Adicionar un nuevo documento “cargos.jsp” para que se visualicen los registros de la tabla “cargos”

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 12

Desarrollo de Aplicaciones Web

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 13

Desarrollo de Aplicaciones Web 7.4. Agregue el documento creado a index.html.

7.5. Modifique el programa para que le permita ver el nombre del usuario logeado y su estado(Activo, No Activo) Se creo una nueva página u_logueado.jsp a la que se dirigirá el usuario cuando haya ingresado correctamente sus datos.

7.6. Modifique el programa para que al momento de loguearse le permita mostrar dos enlaces: uno para ver el contenido de la tabla áreas y el otro para la tabla cargos.

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 14

Desarrollo de Aplicaciones Web

7.7. Si se intenta acceder directamente a las tablas sin antes haberse logueado, se debe mostrar un mensaje indicando que primero debe estar identificado para poder ver el contenido, y debe mostrar un enlace para que le dirija a la pantalla de logeo.

7.8. Modifique el programa para que al momento de cerrar sesión le muestre un mensaje, indicando que se cerró sesión correctamente, y debe mostrar un enlace para dirigir otra vez al documento index.html

7.9. Modifique el diseño para que al momento de listar las tablas mencionadas, pueda asignar un color de fondo a las filas pares, y otro color a las filas impares. Se agrego la etiqueta style, en áreas y cargos.

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 15

Desarrollo de Aplicaciones Web

7.10. Adjunte imágenes de todo el proceso realizado.

Estructura Final:

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 16

Desarrollo de Aplicaciones Web

Ejecución:

Pagina Principal

Pagina Login

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 17

Desarrollo de Aplicaciones Web

Página de usuario logueado

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 18

Desarrollo de Aplicaciones Web

Paginas de listado de áreas

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 19

Desarrollo de Aplicaciones Web

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 20

Desarrollo de Aplicaciones Web

Pagina de listado de cargos

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 21

Desarrollo de Aplicaciones Web

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 22

Desarrollo de Aplicaciones Web

Pagina de termino de sesión

Pagina al no estar logueado e ingresar a la pagina de cargos o áreas.

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 23

Desarrollo de Aplicaciones Web

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 24

Desarrollo de Aplicaciones Web OBSERVACIONES (5 mínimo): • Para realizar el laboratorio se utilizo un equipo con conexión a internet. • Para realizar el laboratorio se reviso el material de teoría. • Tuve dificultades al realizar el ejercicio propuesto. • Al realizar el laboratorio tuve dificultades para conectar a la base de datos, ya que el puerto que había configurado era distinto. • Se creo la clase cBaseDatos para la conexión a la base de datos test. CONCLUSIONES (5 mínimo): • • • • •

Al realizar el laboratorio se aplicaron los conocimientos adquiridos en la sesión de teoría. Se implemento una aplicación web haciendo uso de una base de datos. Se hizo uso de una base de datos sql. Se implementaron tablas en html para mostrar el contenido de las tablas cargos y áreas. La base de datos nos permitió gestionar información de manera mas dinámica, obteniendo los datos mediante SELECT.

Guía de Laboratorio No 4

Prof. Dennis A.

Pág. 25...