APLICACIÓN MODELO PARA
LOS PROYECTOS PPI GRADO 10
Y GRADO 11
ITM
Juan Carlos Zuluaga
Medellín
2012
OBJETIVO
Mostrar como desarrollar una aplicación que tenga un
ingreso al sistema y dos CRUD completos en aplicación de
escritorio y en aplicación WEB.
Estas servirán de modelo para construir los proyectos PPI de
grado 10 y grado 11.
Utilizaremos (todos estos programas son libres y se pueden
descargar de la WEB, si requiere alguno de estos me lo
puede solicitar y con gusto se lo compartire):
NetBeans (recomiento 7.1.2)
JDK (recomiendo 1.7)
MySQL (recomiendo instalar el AppServer que viene con el
phpMyAdmin que también es requerido)
GlassFish 3
CREACIÓN DE LA BASE DE
DATOS
En MySQL
PRIMERO DEBEMOS DE CREAR LA BASE
DE DATOS
Se debe tener instalado el AppServ que viene con el motor de MySQL y el
administrador del motor phpMyAdmin (se instala con el programa: appserv-
win32-2.5.10) Nota: en la instalación del MySQL se coloca la clave de
usuario root, esta debe ser recordada, más adelante la utilizaremos
Para verificar ejecutamos en el browser: localhost y debe aparecer una
ventana como esta:
Luego ingresemos por “phpMyAdmin Database
Manager Version 2.10.3”
Y deberás ver una pantalla como esta:
Creemos una nueva base de datos llamada Aplicacion
Podemos crear las tablas manualmente o importar un
script para crear nuestras tablas. Para este ejemplo
importaremos el script “Aplicación.sql” y de esta manera
ganar tiempo.
Deben quedar dos tablas en la base de datos, llamadas
cliente y usuario. Con ambas tablas trabajaremos en las
aplicaciones de ejemplo.
APLICACIÓN DE ESCRITORIO
PPI GRADO 10
AL FINAL TENDREMOS UNA
APLICACIÓN SIMILAR A ESTA:
Creamos un proyecto en NetBeans llamada: Aplicacion
Creemos el formulario de Login de nuestra aplicación
(coloque nombres a todos los objetos)
txtUsuario
txtClave
cmdCancelar
cmdAceptar
Adicionemos el siguiente código al programa principal y
probemos hasta el momento:
Ejecuta el proyecto y mira como vamos!
Ahora creemos la clase Datos que manejara nuestros
datos y por el momento implementemos el constructor
(que se conecta a la BD) el método validarUsuario (que
valida el usuario)
El constructor se
Colocar usuario y
conecta a la base de
contraseña de la
datos
usuario de la base
de datos que se
coloco en la
instalación del
MySQL
Copie y pegue este código para evitar errores de digitación:
• Class.forName("com.mysql.jdbc.Driver");
• String db = "jdbc:mysql://localhost/Aplicacion";
Adicione el siguiente código al botón Cancelar del formulario
Login:
Cree un nuevo formulario Principal para la ventana principal
Se crean dos opciones en
el menú: Usuarios y
Clientes
Adicione el siguiente código al botón Aceptar del
formulario Login
Colocar esto entre las
líneas public class y
public Login()
Adicione el método setDatos a la clase Login
Modifique el código del main por lo siguiente:
Ya podemos probar lo que llevamos. Al ejecutar la
aplicación debe pedir un usuario y contraseña (ingrese
con usuario: zulu y clave: 123). Si te conecta a la BD
vamos muy bien!
Creemos los 2 formularios que son llamados desde la
pantalla principal:
Formulario Usuarios:
Coloque nombres a los objetos (txtUsuario, txtNombres,
cmdConsultar, ETC)
Cambie la propiedad: defaultCloseOperation a
DISPOSE, esto para evitar que al cerrar este formulario
se nos cierre toda la aplicación.
Formulario Clientes:
Coloque nombres a los objetos (txtUsuario, txtNombres,
cmdConsultar, ETC)
Coloque la propiedad: defaultCloseOperation en
DISPOSE, esto para evitar que al cerrar este formulario
se nos cierre toda la aplicación.
Coloque el siguiente código a las opciones del menú del
formulario principal para que abra los dos formularios
del CRUD:
Pruebe la aplicación y verifique que los dos formularios
sean llamados correctamente.
Ahora creemos las clases Cliente y Usuario que nos
servirán para empaquetar los datos de estas entidades
Antes de implementar los botones del mantenimiento de usuarios
adicionemos los siguientes métodos a la clase Datos
Ahora si, empecemos a implementar el código de los
botones de usuarios. Empecemos por el botón consultar:
Probemos!
Botón Limpiar:
Probemos!
Botón Nuevo:
Probemos!
Botón Actualizar:
Probemos!
Botón Borrar:
Probemos!
Les queda de tarea hacer lo
mismo pero para la tabla
clientes.
Solución de la tarea:
En la clase Datos
Botón consultar de Cliente
Botón nuevo de Cliente
Botón actualizar de Cliente
Botón borrar de Cliente
Botón limpiar de Cliente
Probemos
Taran!!!!!! Acabamos…. ¿Les gusto?... Mejóremelo un
poco.
Coloquemos las tablas que despliegan los registros a los
formularios clientes y usuarios. Modifique los
formularios y agregue un jTable a cada uno:
jTable, cambiele el
nombre a tblTabla y
luego dele clic derecho y
bórrele las definiciones
de campos (por table
contens…)
Agregue la siguiente línea:
Agregue el método getUsuarios a la clase Datos
Agregar el método llenarTabla al formulario Usuarios
Adicionamos el evento de formulario windowOpened para que
llame el método llenarTabla
Y probamos! Hacemos casi lo mismo para implementar la
tabla en el formulario clientes.
APLICACIÓN WEB – PRIMERA
PARTE - CRUDS
PPI GRADO 11
AL FINAL TENDREMOS UNA
APLICACIÓN SIMILAR A ESTA:
Utilizaremos las mismas clases Datos, Usuario y Cliente (con
unos pequeños cambios). Nos concentraremos a cambiar la
GUI para que sea una aplicación WEB.
Creemos un nuevo proyecto WEB llamado AplicacionWEB,
utilizaremos GlassFish como servidor de aplicaciones y no
adicionaremos ningún Framework.
Utilizaremos las mismas clases Datos, Usuario y Cliente
(con unos pequeños cambios). Nos concentraremos a
cambiar la GUI para que sea una aplicación WEB.
Creemos un nuevo proyecto WEB llamado
AplicacionWEB, utilizaremos GlassFish como servidor
de aplicaciones y no adicionaremos ningún Framework.
Luego de crear la aplicación ejecútela y debe aparecer en
el browser un Hello World! Ahora empecemos a
modificar este hola mundo por lo que realmente
queremos.
Edite el index.jsp y coloque el siguiente código:
Probemos!
Copiemos la clases Datos, Usuario y Cliente de la aplicación de
escritorio. Con la tecla Ctrl presionada se arrastran las clases de
la aplicación de escritorio a la aplicación WEB y las sueltan en
el default package:
Y hacen click en Refactor
De la clase Datos reemplazar:
JOptionPane.showMessageDialog(null, ex);
por
Logger.getLogger(Datos.class.getName()).log(Level.SEVERE, null, ex);
esto porque no se puede usar el JOptionPane en aplicaciones WEB
Y hacen click en Refactor.
Adicione el driver para conexión a BD MySQl.
Modifiquemos el Servlet ValidarUsuario para que valide el
usuario y pinte la ventana principal.
Probemos con un usuario correcto y con otro incorrecto
Incorrecto:
Correcto:
Creemos los JSP, Principal.jsp, Usuario.jsp y Cliente.jsp
Usuario.jsp:
Cliente.jsp:
Principal.jsp:
Pruebe la navegación de la aplicación.
Luego agreguemos los Servlet de “AdministrarUsuarios” y
“AdministrarClientes”. Y modifiquemos los Servlet de la
siguiente manera:
Servlet AdministrarUsuarios:
Servlet AdministrarClientes:
Probemos, ya la aplicación es 100% funcional!
Ahora colóquemela bonita aplicando un CSS.
Agreguemos un nuevo CSS llamado style.
}
Copie el siguiente td {
código al final del }
padding: 10px;
bloque root: a:link {
color: #be7429;
body { font-weight: normal;
font-family: Verdana, Arial, sans-serif; text-decoration: none;
font-size: smaller; }
padding: 50px;
color: #555; a:link:hover {
background-image: url(Gato.jpg); color: #be7429;
background-repeat: no-repeat; font-weight: normal;
} text-decoration: underline;
}
h1 {
text-align: left;
letter-spacing: 6px;
Agregue el archivo Gato
font-size: 1.4em;
color: #be7429;
font-weight: normal;
al estilo (se adjunta el
}
width: 450px;
archivo Gato.jpg).
table {
width: 580px;
padding: 10px;
background-color: #c5e7e0;
}
th {
text-align: left;
border-bottom: 1px solid;
Agregue la siguiente línea antes de la línea Title en todos las
páginas de la aplicación:
<link rel="stylesheet" type="text/css" href="style.css">
Es decir, en los JSP (todos):
En los Servlets (todos):
Probemos!
Taran!!!! Les gusto?
APLICACIÓN WEB – SEGUNDA
PARTE - MOVIMIENTOS
PPI GRADO 11
OBJETIVO - REDEFINICIÓN
Ya que tenemos construida la aplicación con la autenticación
de usuarios y dos CRUD ya estamos preparados para crear
un movimiento y un listado.
El nuevo objetivo es crear una pantalla donde se puedan
generar facturas. Para esto involucramos un nuevo CRUD de
productos y en el modelo de datos tomaremos las tablas:
Factura: encabezado de las facturas.
Detalle factura: detalle de los productos comprados en la factura.
Detalle factura temporal: tabla temporal donde se va
almacenando la factura antes que el usuario confirme su ingreso.
Para tener las nuevas tablas debemos de correr nuevamente
el Script de creación de las nuevas tablas. Importe
nuevamente el Aplicación.sql que contiene las nuevas tablas.
LO NUEVO DE LA APLICACIÓN
Primero creemos los nuevos botones en el menú principal en el
Principal.jsp:
Y en el Servlet ValidarUsuario.
Adicione el Producto.jsp con este código:
Adicione los Servlets: AdministrarProductos, NuevaFactura y
ReporteFacturas (por el momento dejelos sin cambios) y pruebe
la navegación del sistema.
Cree la nueva clase Producto con el siguiente código:
Implementen los métodos: getProducto, getProductos,
newProducto, updateProducto y deleteProducto en la clase
datos. Implemente el siguiente código:
Coloque el siguiente código al Servlet AdministrarProductos:
Creemos la nueva clase DetalleFacturaTmp con el siguiente
código:
Implementen los métodos: getDetalleFacturaTmp,
getDetallesFacturaTmp, newDetalleFacturaTmp,
sumaCantidadDetalleFacturaTmp,
sumaValorDetalleFacturaTmp, grabarFactura, y numeroFactura.
Implemente el siguiente código:
Cree la nueva clase Utilidades con el siguiente código:
Coloque el siguiente código al Servlet NuevaFactura:
Probemos como funciona la creación de facturas en el sistema!
Por último implementemos la opción del reporte de facturas.
Primero implementemos el método getReporteFacturas de la
clase Datos con el siguiente código:
Modifiquemos el Servlet ReporteFacturas con el siguiente
código:
Eso es todo! Probemos la aplicación completa.
GRACIAS
ITM
Juan Carlos Zuluaga
