Manual basico

UNIVERSIDAD NACIONAL DE SAN CRISTOBAL DE HUAMANGA
ESCUELA DE FORMACION PROFESIONAL DE INGENIERIA DE SISTEMAS

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.
3 capas fisicas

Servidor Web
Aplicación Web Servidor Web
Aplicación Web Servidor BD
Cliente Servidor BD

Servidor Aplicaciones txt xls xml
Servidor Aplicaciones

Figura. Arquitectura de tres capas.

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.

Gimy A. Morales Urriburú gimorales31@hotmail.com


FUNCIONAMIENTO DE UN CONTENEDOR.

Servidor

request request request

servlet
Web Server Web Container
Cliente

response <html> código java
response

Figura. Función Del Contenedor

FUNCIONAMIENTO DE LA APLICACIONES WEB.

Figura. Aplicaciones web jsp

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.



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


Manual basico

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Similar a Manual basico

Similar a Manual basico (20)

Último

Último (20)

Manual basico