Manual basico

UNIVERSIDAD NACIONAL DE SAN CRISTOBAL DE HUAMANGA

ESCUELA DE FORMACION PROFESIONAL DE INGENIERIA DE SISTEMAS

Gimy A. Morales Urriburú [email protected]

MANUAL BASICO DE CREACION DE UNA APLICACIÓN WEB CON

ACCESO A BASE DE DATOS EN JSP

El gestor de base de datos que se utilizara para la creación de la base de

datos será el PostgresSql y el MySql para probar que la aplicación web es

independiente de la base de datos.

El proyecto que se creara a continuación contiene las operaciones básicas

que se puede realizar en toda aplicación, como son ingresar datos, visualizar

datos, eliminar datos, modificar datos y actualizar datos, para el cual

utilizaremos dos clases o entidades las cuales serán Usuario y Alumno.

La clase Usuario tendrá los atributos usuario y contraseña, mientras que la clase

Alumno tendrá los atributos necesarios que identifiquen las características

propias de un alumno los cuales serán código, nombre, apellidopaterno,

apellidomaterno, dni, serie y escuela.

Cabe resaltar de que estas clases no están modeladas, son para cuestiones

prácticas, pues si se requiere construir un sistema grande, primero se debería

de hacer el modelado de la base de datos.

Aclarado estos puntos se procederá la realización del manual.

ARQUITECTURA FÍSICA DE UNA APLICACIÓN WEB.

La primera capa consiste en la capa de presentación que incluye los clientes

que acceden al servidor web que es el responsable de dar a los datos un

formato adecuado.

La segunda capa está referida habitualmente a algún tipo de programa o

Script desplegado en un servidor de aplicaciones.

La tercera capa proporciona al segundo los datos necesarios para su

ejecución. Estos datos pueden ser cualquier fuente de información como una

base de datos o documentos XML.

3 c

ap

as fis

ica

s

Servidor BDServidor BD

Servidor Web Servidor Web

Aplicación WebAplicación Web

Cliente

xmlxlstxtServidor Aplicaciones

Servidor Aplicaciones

Figura. Arquitectura de tres capas.




FUNCIONAMIENTO DE UN CONTENEDOR.

FUNCIONAMIENTO DE LA APLICACIONES WEB.

MODEL VIEW CONTROLLER (MODELO VISTA CONTROLADOR)

• El patrón MVC se originó en la comunidad Smalltalk para implementar

interfaces de usuario en los que las responsabilidades están bien distribuidas

entre distintas partes (componentes) del diseño.

• El patrón MVC ofrece la posibilidad de construir aplicaciones web que sean

flexibles, esto con el objetivo de que cualquier modificación en la Vista,

Modelo de base de datos o la parte del controlador no se vea afectado, pues

son independientes, lo cual lo hace flexible.

Cliente

request

Servidor

Web Server Web Container

request

código java

servlet

request

<html>responseresponse

Figura. Aplicaciones web jsp

Figura. Función Del Contenedor




PROCESO DE INSTALACIÓN DEL GESTOR DE BASE DE DATOS PostgresSql.




Una vez instalado ejecutamos el programa insertamos la contraseña para

proceder a crear la base de datos.




La base de datos tendrá el nombre de ejemplo, el cual tendrá dos tablas

(usuario y alumno)

Se procederá a crear con detalle las tablas para las personas que no dominan

este gestor de base de datos, los que ya lo construyeron omitan este paso y

continúen con el Net Beans.

Para crear las tablas anteriormente mostradas se realiza lo siguiente.




Hay 3 consultas, se selecciona la consulta que se desea ejecutar.

Una vez creado la base de datos, procedemos a utilizar el NetBeans.




La primera impresión que se muestra será la siguiente:




AL INICIAR UN JSP.

Para realizar la codificacion en un jsp se debe de conocer las partes

importantes.

<html> Es el espacio es donde se realizara el codigo HTML. </html>

<head> Es la cabeza en conde se pondra nombre del jsp,etc. </head>

<body> Es el cuerpo en donde se realiza netamente los codigos HTML los

cuales se visualizaran en el navegador. </body>

EL METODO GET.

El atributo href: Este atributo especifica la posición de un recurso de Web, así

definiendo un vínculo entre el elemento actual (el ancla de la fuente) y el

ancla del destino definido por este atributo.

Tal concepto se realizaría al hacer clik en el link Principal para estar en el jsp

Principal.




EL METODO POST.

El método post envía los datos de un formulario completo.

LOS NIVELES DE ENCABEZAMIENTO

Hay seis niveles de encabezamientos de H1 (lo más importante)

Para H6 (lo menos importante)

Aunque para diseñar un Jsp se requiere bastante conocimiento del HTML, no

es necesario dominarlo pues las interfaces se pueden realizar con otro

programa. En este caso usaremos el DreamWeaver, porque en esencia lo que

cuenta son los parámetros que deseamos enviar a los Servlets por ejemplo.




A continuación se creara el siguiente esquema con el cual estaremos

trabajando.

En el paquete edu.unsch.efpis.bean , crearemos las clases BAlumno,BUsuario,

que contienen los atributos inicialmente mencionados.

En el paquete edu.unsch.efpis.dao, crearemos las clases

DAOAlumno,DAOUsuario, que contienen los códigos necesarios para la

consulta a la base de datos.

En el paquete edu.unsch.efpis.ds, crearemos la clase DSConexion, que

contiene el código necesario para llamar al contexto y establecer la conexión

a la base de datos.

En el paquete edu.unsch.efpis.Servlet, crearemos los Servlets que son la parte

de las clases control, se podría decir que en esta capa se realiza las

operaciones, funciones, etc.




Empezaremos con la parte de la codificación.

Primero crearemos los BEAN, que vienen a ser las clases con sus respectivos atributos, el

cual estaremos utilizando en el proyecto reiteradas veces; iniciamos con el BAlumno.

Para crear sus métodos accesores y mutadores (Get y Set), se procede a realizar un

refactor para luego encapsular los atributos, con ello estaremos creando los métodos

accesores y mutadores automáticamente.




Como se muestra a continuación.

Continuamos con el BUsuario, creando sus accesores y mutadores.




En el paquete edu.unsch.efpis.ds, insertamos el código siguiente:




Creamos el paquete en donde se encuentran las consultas SQL.

DAOAlumno:

Esta es una manera de ingresar datos, en el cual hacemos uso de los Bean creados

anteriormente pero para un principiante esta manera de ingresar datos es confusa

pues se diría ¿Dónde están las sentencias SQL? Y en realidad no se nota muy claro,

pero para los que ya están familiarizados es útil.

En realidad ambos métodos de ingresar datos es valido, inclusive hay más maneras de

hacerlo.

Lo que les mostrare son dos maneras; una que ya se vio y la otra que se encuentra en

la siguiente página.

En la segunda manera de ingresar datos se puede apreciar con más claridad las

sentencias SQL en donde los signos de interrogación son reemplazados en sus

siguientes líneas de código.




Continuando, ingresamos las consultas SQL para listar.

Se puede observar claramente que se está utilizando un ArrayList para que la consulta

sea más dinámica, aunque hay otras maneras para la visualización de datos, pero la

razón por la cual se utiliza el ArrayList es para trabajar con la posición que maneja

cada tupla.

La otra manera de visualizar datos es a través de un Servlet o un Jsp, el problema con

esta otra forma es que se requiere ingresar código Html en el Servlet y además llamar a

la base de datos insertando los parámetros; resulta redundante en pocas palabras y

requiere de mucho código.

Lo que se implementó en el Servlet también se puede implementar en el mismo Jsp;

pero ya no se estaría trabajando en la arquitectura de tres capas, con lo cual se




rompe el esquema pues a la hora de modificar algo se tiene que modificar muchas

cosas.

Como se puede apreciar esta manera de visualizar datos muchas veces no es lo

adecuado, es mejor la utilización del ArrayList, pero no quiere decir que no se pueda

utilizar, se puede utilizar cuando la aplicación es pequeña y los datos a visualizar sean

pequeños.




Continuando con la inserción de código en el DAOAlumno.

Con estas líneas de código finalizamos el DAOAlumno, como pueden apreciar para

una sola clase se ha introducido las operaciones básicas como son insertar datos,

visualizar datos, modificar datos, actualizar datos, eliminar datos; con este punto de

partida se puede realizar grandes aplicaciones, claro se debe de estar familiarizado

para implementar algo más complejo. Considero que es esta parte es lo más




importante; esto se pude mejorar si dominamos el Lenguaje de Consulta Estructurado

(SQL).

Procederemos a insertar las líneas de código del DAOUsuario.

En esta sección de código al realizar la consulta SQl estamos pidiendo que me retorne

un valor numérico si por lo menos hay una tupla llena si no hay la respuesta será “0”,

de lo contrario si hay 1,2 o tres usuarios, me mostrara la cantidad con lo cual poder

continuar y ejecutar la parte del algoritmo que se muestra a continuación.




Una vez culminado la parte de inserción de las consultas Sql, procedemos a la

inserción de códigos del Sevlet.

Estructura de un Servlet.

La parte de la lógica en donde se inserta el código es en el Try{ … } finally{...} como se

mostrara a continuación. Iniciamos con el Servlet_Usuario; la parte que esta

seleccionado de rojo, indica los parámetros que se está recibiendo del JSP, la sintaxis




que aquí se escribe debe ser igual al nombre del parámetro que se pone en el Jsp mas

no necesariamente a los parámetros de la base de datos. En la parte de Verde se

puede apreciar la utilización del método que se realizó en el Dao, otra observación

importante son los paquetes que importamos, pues se usa el Bean,Dao y DsConecion.




Continuamos con el Servlet_Alumno; sobre las partes seleccionadas, se podría decir lo

mismo pues son los valores que el JSP envía, este los recepciona, los valida, usas los

métodos necesarios y los envía a un JSP el resultado trabajado.




Continuamos con el Servlet_ListarAlumno, es esta parte se debe mencionar de que

para listar los datos de la base de datos no necesitamos los parámetros del JSP, por lo

tanto la lógica es diferente, ahora necesitamos sacar los datos de la base de datos

mediante el método del DAO, almacenarlo en una variable y mostrarlo recién en un

JSP.

La parte de amarillo no se explicó anteriormente, pero en esta parte simplemente se

está llamando al contexto en donde están el URL de conexión y el Driver, que son

elementos necesarios para la conexión a la base de datos; adicionalmente se está

usando los métodos de la clase DSConexion el cual del mismo modo llama al

contexto. La parte del contexto se estará detallando en la última parte pues aquí se

ingresara el gestor de base de datos con el que trabajaras.




Continuamos con el Servlet_Eliminar; la lógica es la misma que la del listado, utilizando

un ArrayList, con la finalidad de eliminar de acuerdo a la posición que corresponde;

una manera más dinámica.

Al extender esta

pestaña podemos

observar que aquí

se encuentran los

métodos gdoGet,

doPost, que no lo

usamos pues es una

manera distinta de

programar.




Continuamos con el Servlet_Modificar, en esta parte pediremos nuevamente los datos

del jsp pues estos datos modificados volveremos a insertarlo y reemplazarlo por el

método ya definido en el Dao. Extraeremos los datos en una variable para modificarlo

posteriormente.




Continuamos con el Servlet_Modif, en esta sección hace la modificación de los datos

una vez almacenado los datos de la base de datos en una variable.




Continuamos con el Servlet_Cuenta, en esta sección este Servlet tiene la funcionalidad

de validad los datos del usuario, si el usuario existe, entonces visualizara el jsp menú, de

lo contrario mostrara la misma página inicio el cual llama este Servlet, mostrando un

mensaje de error, como se muestra en la sección sombreada.




INTERFACES DE LOS JSP A CREAR.

JSP INICIO.

JSP MENU.




JSP USUARIO.

JSP ALUMNO




JSP LISTAR ALUMNO

JSP MODIFICAR




CODIGO DE LOS JSP CREADOS

JSP INICIO




JSP MENU




JSP ALUMNO




JSP LISTAR ALUMNOS




JSP USUARIO







JSP MODFIFICAR




IMÁGENES USADAS

Las imágenes usadas en el proyecto se encuentran en el mismo paquete WebPages.




CONFIGURACION DEL CONTEXTO.

FINISH.




Una vez creada el archivo XML, se procede a la configuración; en esta parte se

configura lo que es el contexto de la base de datos en donde se declara el Driver del

gestor de la base de datos con que se va a trabajar, el Url de la base de datos, el

nombre de administrador de la base de datos y la contraseña de la base de datos.

En la pestaña General se encuentra lo que es el contexto, como se muestra en la

figura se procederá al llenado adecuado de los datos.




AGREGAR LOS SERVLETS




AGREGAR LA PAGINA DE INICIO

MUESTRA EL MAPERO




GREGAMOS A LA LIBRERÍA, EL JAR DE POSTGRES SQL.

NOS UBICAMOS EN SERVICES.




El objetivo a donde se quiere llegar con este paso es probar que la base de datos se

puede conectar con nuestra aplicación, identificar el Url, Driver, NombreAdministrador,

Contraseña, estén correctamente llenado en el contexto, pues aquí se ingresa y se

obtiene esos datos de forma correcta. Aparate que se puede ejecutar consultas SQL

en este entorno de NetBeans.




Para realizar las consultas solo basta con activar la opción de ejecutar comandos

como se muestra en la figura.

Inicializar el servidor de aplicaciones.




Una vez terminado estos pasos procedemos a Compilar y ejecutar el proyecto.

La página que mostrara después de la ejecución es la página de inicio que pusimos

en el archivo XML, por tal nos mostrara esta página de inicio.




Como punto a parte procederemos a la creación de un backup de la base de datos,

este backup es importante pues nos da un resguardo de nuestra información, también

se puede llevar a otras máquina y simplemente restaurarlo para seguir trabajando,

pues ya no se tiene que crear la base de datos nuevamente.

Seleccionamos el lugar en donde vamos a guardas el backup o copia de seguridad.




Aceptar, ok y listo, cerramos la ventana.

Para restaurar la base de datos, necesitamos crear una base de datos con el mismo

nombre de la base de datos anterior para luego hacer la recuperación de la base de

datos, quiere decir restaurar la base de datos a través del backup.




La aplicación web creada está probada y los códigos introducidos son los que

pertenecen a este proyecto, no se omitió ningún detalle, así que si terminaron

de crear el proyecto y aun no ejecuta, simplemente se debe de realizar una

revisión al código.

Los errores más frecuentes ocurren en la parte del jsp, cuando los nombres de

las cajas de texto no coinciden con los que el servlet está trabajando, en las

consultas a las bases de datos o en el contexto para la conexión a la base de

datos.




PARA CONECTARSE CON ORACLE.

PARA CONECTARSE CON MySQL.

PARA CONECTARSE CON SQL SERVER.




CREACION DE UNA APLICACIÓN A PARTIR DE LA BASE DE DATOS EN JSF.

Para crear una aplicación web a través de una base de datos usando JSF,

tendremos que crear la base de datos en algún gestor de base de datos, en

este caso, crearemos en el SQL Server, tal como se ve en la siguiente gráfica.

Una vez creado la base de datos iniciaremos a crear el proyecto en Net

Beans.










CONTINUARA...

Espero que este manual sea de utilidad para aprender lo básico de JSP y profundizarlo para

poder hacer aplicaciones más profesionales.

“Me lo contaron y lo olvidé, lo vi y lo entendí, lo hice y lo aprendí.”

Education

Manual basico