14
May
10

Tests gráfica en JSP

Leyendo los datos de la BD

Integrar gráficas de barra en las paginas jsp, es algo realmente sencillo lo hemos hecho en ejemplos anteriores 1 con servlet y otro escribiendo una imagen, pero esta vez lo haremos con más datos en la pagina, siguiendo un ejercicio propuesto anteriormente.

Tenemos una base de datos con una tabla llamada empleados, los empleados tienen un sueldo y un auxilio de transporte en base a eso calcularemos cuanto se gasta cada departamento en nomina y le daremos esos datos a nuestra aplicación para que dibuje una gráfica.

El programa se divide en 3 partes importantes (las dos primeras partes han sido explicadas anteriormente):
1) registrar empleados.
2) Listar empleados.
3) Graficar costo de nomina por departamento.

La estructura del proyecto sería algo así

Utilizando la siguiente base de datos
ejercicios

# --------------------------------------------------------
# Host:                         localhost
# Database:                     ejercicios
# Server version:               5.1.36-community-log
# Server OS:                    Win32
# HeidiSQL version:             5.0.0.3222
# Date/time:                    2010-05-14 20:26:11
# --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
# Dumping database structure for ejercicios
CREATE DATABASE IF NOT EXISTS `ejercicios` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `ejercicios`;

# Dumping structure for table ejercicios.empleado
CREATE TABLE IF NOT EXISTS `empleado` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(100) NOT NULL DEFAULT '',
  `apellido` varchar(100) NOT NULL DEFAULT '',
  `identificacion` int(20) NOT NULL DEFAULT '0',
  `departamento` varchar(100) NOT NULL DEFAULT '',
  `sueldo` double NOT NULL DEFAULT '0',
  `transporte` double NOT NULL DEFAULT '0',
  `fdn` date NOT NULL DEFAULT '2010-01-01',
  `foto` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

# Dumping data for table ejercicios.empleado: 6 rows
/*!40000 ALTER TABLE `empleado` DISABLE KEYS */;
INSERT INTO `empleado` (`id`, `nombre`, `apellido`, `identificacion`, `departamento`, `sueldo`, `transporte`, `fdn`, `foto`) VALUES (1, 'Mauro Cesar', 'Gomez Mejia', 1011124545, '1', 850000, 50000, '1986-07-12', '1273120244484avartaryahoo.bmp'), (2, 'Sandra Patricia', 'Pinedo Florez', 1562153142, '2', 850000, 50000, '1983-03-02', '1273120579281Dibujo.bmp'), (3, 'Cesar Augusto', 'Anaya Boorguez', 1225456345, '4', 850000, 50000, '1975-08-21', '1273121305343images.jpg'), (4, 'Javier Andres', 'Ibarra Lopez', 1045124563, '1', 950000, 50000, '1979-09-17', '1273206286625F200811201452292577871692.jpg'), (5, 'Esther Patricia', 'Molina Ordoñez', 1234542154, '3', 650000, 50000, '1978-11-30', '1273247967593conserje-scrubs.png'), (6, 'David Eduardo', 'Palomino Castro', 1201212542, '5', 650000, 50000, '1986-06-06', '127334048328125299_381812654054_667059054_3891187_3653774_n.jpg');
/*!40000 ALTER TABLE `empleado` ENABLE KEYS */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

Tenemos la página inicial; en esta página se le conecta a la base de datos y se llaman a las demás páginas.

Index.jsp

<%@ page import="org.Model"%>
<html>
	<head>
		<title>TEST 01</title>
		<style type="text/css"><%@ include file="estilo.css"%></style>
		<!--En este ejercicio repasaremos por todas las funciones vistas anteriormente -->
	</head>
	<%
	Model model= (Model)application.getAttribute("model");
	if(model==null){
		model= new Model();
		model.setDriver("com.mysql.jdbc.Driver");
		model.setUrl("jdbc:mysql://localhost:3306/ejercicios");
		model.setNombre("root");
		model.setClave("");

		model.conectar();
		application.setAttribute("model",model);
	}
	%>
	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="5">
			<tr>
    			<td colspan="2" valign="top" align="right">
				  <div id="titulo" align="right"><img src="wallpaper.png" width="282" height="95"></div>
			    </td>
		  	</tr>
  			<tr>
    			<td valign="top">
					<jsp:include page="registro_empleado.jsp"/>
				</td>
    			<td>
					<div style="height:650px; overflow:scroll;">
						<jsp:include page="listar_empleado.jsp"/>
					</div>
				</td>
  			</tr>
			<tr>
    			<td valign="top" align="center" colspan="2">
					DIAGRAMA DE GASTOS POR DEPARTAMENTOS<br>
					<jsp:include page="grafica.jsp"/>
				</td>
  			</tr>
		</table>
	</body>
</html>

Tenemos una página para registrar los empleados en ella únicamente está el formulario, recuerden que estamos subiendo una foto del empleado para ello necesitamos que el enctype del formulario sea igual a multipart/mixed o multipart/form-data:

registro_empleado.jsp

<form action="proceso.jsp" method="post" enctype="multipart/mixed">
	<table id="registro" width="110" border="0" cellspacing="0" cellpadding="5">
		<tr align="center">
			<td colspan="2" align="center">DATOS EMPLEADO</td>
		</tr>
		<tr>
			<td>Nombre</td>
			<td><input name="nombre" type="text"> </td>
		</tr>
		<tr>
			<td>Apellido</td>
			<td><input name="apellido" type="text"></td>
		</tr>
		<tr>
			<td>Identificacion</td>
			<td><input name="identificacion" type="text"></td>
		</tr>
		<tr>
			<td>Fecha de nacimiento</td>
    		<td><input name="fdn" type="text" value="dd/MM/yyyy"></td>
  		</tr>
  		<tr>
    		<td valign="top">Departamento</td>
    		<td>
				<input type="radio" name="departamento" value="1">Sitemas<br>
    			<input type="radio" name="departamento" value="2">Contabilidad<br>
				<input type="radio" name="departamento" value="3">Recursos humanos<br>
				<input type="radio" name="departamento" value="4">Administracion<br>
				<input type="radio" name="departamento" value="5">Servicios generales
	    	</td>
  		</tr>
  		<tr>
    		<td>Sueldo</td>
    		<td><input name="sueldo" type="text"></td>
  		</tr>
  		<tr>
    		<td>Auxilio de transporte</td>
    		<td><input name="transporte" type="text"></td>
  		</tr>
  		<tr>
    		<td>Foto</td>
    		<td><input name="foto" type="file"></td>
  		</tr>
  		<tr align="center">
    		<td colspan="2" align="center"><input type="submit" value="Guargar"></td>
  		</tr>
	</table>
</form>

Tenemos 2 páginas que en conjunto se utilizan para listar los empleados.

La primera (listar_empleado.jsp) de estas se encarga de pedir la lista de empleados en la base de datos y recorrerla, en medio del recorrido va llamando a la otra pagina (ver_empleado.jsp) la cual se encarga específicamente de mostrar un empleado en formato html

listar_empleado.jsp

<%@ page import="java.util.List"%>
<%@ page import="org.Empleado"%>
<%@ page import="org.Model"%>
	<%
		Model model=(Model)application.getAttribute("model");
		List lista_empleado=model.listaEmpleado();
		Double total_sueldo=0.0;
		Double total_auxili=0.0;
	 %>
		<table border="1" cellspacing="0" cellpadding="5">
			<tr><td colspan="2" align="center" >DATOS NOMINA </td></tr>
  				<%for(int i=0;i<lista_empleado.size();i++){
					Empleado empleado=(Empleado)lista_empleado.get(i);

					total_sueldo=total_sueldo+empleado.getSueldo();
					total_auxili=total_auxili+empleado.getTransporte();
					session.setAttribute("empleado",empleado);
			%>
			<tr>
				<jsp:include page="ver_empleado.jsp"/>
			</tr>
		<%}%>
			<tr><td>TOTAL SUELDO</td> <td><%=total_sueldo%></td> </tr>
			<tr><td>TOTAL AUXILIO</td> <td><%=total_auxili%></td> </tr>
			<tr><td>TOTAL NOMINA</td> <td><%=total_sueldo+total_auxili%></td> </tr>
		</table>
	</body>
</html>

ver_empleado.jsp

<%@ page import="org.Empleado"%>
<%@ page import="java.util.Date"%>

<%
Empleado empleado=(Empleado)session.getAttribute("empleado");
int edad= new Date().getYear() - empleado.getFdn().getYear();
String departamento="";
if(empleado.getDepartamento().matches("1")){departamento="Sitemas";}
if(empleado.getDepartamento().matches("2")){departamento="Contabilidad";}
if(empleado.getDepartamento().matches("3")){departamento="Recursos humanos";}
if(empleado.getDepartamento().matches("4")){departamento="Administracion";}
if(empleado.getDepartamento().matches("5")){departamento="Servicios generales";}
%>
<td>
	<img  width="150" height="200" src="subidos/<%=empleado.getFoto()%>"/>
</td>
<td>
	<table width="100%" border="0" cellspacing="0" cellpadding="1">
		<tr><td>ID</td><td><%=empleado.getId()%></td></tr>
		<tr>
  			<td>NOMBRE</td><td><%=empleado.getNombre()+" "+empleado.getApellido()%></td>
		</tr>
		<tr>
  			<td>IDENTIFICACION</td><td><%=empleado.getIdentificacion()%></td>
		</tr>
		<tr>
   			<td>DEPARTAMENTO</td><td><%=departamento%></td>
		</tr>
		<tr>
    		<td>SUELDO</td><td><%=empleado.getSueldo()%></td>
  		</tr>
		<tr>
    		<td>AUXILIO</td><td><%=empleado.getTransporte()%></td>
  		</tr>
		<tr>
    		<td>TOTAL DEVENGADO</td><td><%=empleado.getTransporte()+empleado.getSueldo()%></td>
  		</tr>
	</table>
</td>

Esta página se encarga de tomar los datos del formulario y enviarlos a la bd, recuerden que estamos subiendo un archivo así que el tratamiento para los datos es diferente.

proceso.jsp

<%@ page import="java.util.List"%>
<%@ page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="java.io.File" %>

<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Date"%>
<%@ page import="java.text.DateFormat"%>
<%@ page import="java.text.SimpleDateFormat"%>

<%@ page import="org.Empleado"%>
<%@ page import="org.Model"%>

<%
   	/*FileItemFactory es una interfaz para crear FileItem*/
    FileItemFactory file_factory = new DiskFileItemFactory();

	/*ServletFileUpload esta clase convierte los input file a FileItem*/
    ServletFileUpload servlet_up = new ServletFileUpload(file_factory);
	/*sacando los FileItem del ServletFileUpload en una lista */
    List items = servlet_up.parseRequest(request);

	/*declaramos un hashmap donde guardaremos los parametros*/
	HashMap<String,String> parametros=new HashMap<String,String>();
    for(int i=0;i<items.size();i++){
		/*FileItem representa un archivo en memoria que puede ser pasado al disco duro*/
        FileItem item = (FileItem) items.get(i);
		/*item.isFormField() false=input file; true=text field*/
		String valor="";
        if (item.isFormField()){
			valor=item.getString();
        }else{
			/*creamos un nombre, para que no se sobbre-escriban archivos*/
			valor=(new Date().getTime())+item.getName();
			/*cual sera la ruta al archivo en el servidor*/
			File archivo_server = new File("c:/Archivos de programa/Apache Software Foundation/Apache Tomcat 6.0.24(stand)/webapps/ejercicio11/subidos/"+valor);
			/*y lo escribimos en el servido*/
			item.write(archivo_server);
		}
		/*guardamos los parametros dentro del hashmap*/
		parametros.put(item.getFieldName().toLowerCase(),valor);
	}
%>
<!--A este punto hemos copiado los archivos al disco duro del servidor -->
<!--y hemos guardado todos los parametros en el hashmap llamado parametros -->
<!--ahora sacaremos los datos para guardarlos en un objeto -->
<%
	DateFormat formato_fecha = new SimpleDateFormat("dd/MM/yyyy");
	/*utilizamos la DateFormat para convertir un string a Date*/
	Empleado empleado = new Empleado();
	empleado.setNombre(parametros.get("nombre"));
	empleado.setApellido(parametros.get("apellido"));
	empleado.setIdentificacion(Integer.parseInt(parametros.get("identificacion")));
	empleado.setDepartamento(parametros.get("departamento"));
	empleado.setSueldo(Double.parseDouble(parametros.get("sueldo")) );
	empleado.setTransporte(Double.parseDouble(parametros.get("transporte")));
	empleado.setFdn(formato_fecha.parse(parametros.get("fdn")));
	empleado.setFoto(parametros.get("foto"));
	Model model=(Model)application.getAttribute("model");
	model.agregarEmpleado(empleado);
%>
<!--La parte del hasmap lo quise poner de esa forma, pero cada quien es libre de -->
<!--hacerlo como mas le gusta mas adelante lo verán de forma bastante diferente -->
<jsp:forward page="index.jsp"/>

Y finalmente la parte importante del código, la gráfica implementada en una aplicación, esto es lo mismo que hicimos anteriormente pero esta vez la veremos junto con todo lo demás.

grafica.jsp

<%@ page import="org.Model"%>
<%@ page import="org.Empleado"%>

<%@ page import="java.util.List"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.ArrayList"%>

<%@ page import="java.io.File"%>
<%@ page import="java.io.OutputStream"%>

<%@ page import="org.jfree.chart.ChartFactory"%>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.category.DefaultCategoryDataset"%>

<%
	/*model para buscar los datos en la bd*/
	Model model=(Model)application.getAttribute("model");
	/*traemos toda la lista de empleados*/
	List<Empleado> lista_empleado=model.listaEmpleado();
	/*DefaultCategoryDataset aqui guardaremos los datos para que quien se encarga de dibujar el grafico los entienda*/
	DefaultCategoryDataset dataset = new DefaultCategoryDataset();
	/*un mapa para ordenar los datos*/
	HashMap mapa= new HashMap();
 	int i = 0;
 	/*un ciclo for para recorrer la lista e ir guardando los valores en el mapa*/
 	for (i = 0; i<lista_empleado.size();i++){
 		/*sacamos el empleado que este en la pocicion i de la lista*/
		Empleado e=lista_empleado.get(i);
		/*sacamos el acumulado del departamento en el mapa */
		Double valor=(Double)mapa.get(e.getDepartamento() );
		/*si no se ha guardado ningun valor decimos que es 0.0*/
		if(valor==null){valor=0.0;}
		/*valor es igual al acumulado mas el gasto en sueldo y el gasto en auxilio de transporte*/
		valor=valor+e.getSueldo()+e.getTransporte();
		/*y guardamos el nuevo valor en el mapa*/
		mapa.put(e.getDepartamento(),valor);
 	}
 	/* sacamos todas las llaves del mapa */
	List lista_llaves=new ArrayList(mapa.keySet());
	/*recorremos la lista de las llaves (dichas llaves son los codigos de los departamentos) */
	for (i = 0; i<lista_llaves.size();i++){
		/*sacamos el codigo que este en la posicion i de la lista*/
		String llave=lista_llaves.get(i)+"";
		String departamento="";
		/*dependiendo de cual sea el valor el nombre tomara uno diferente*/
		if(llave.matches("1")){departamento="Sitemas";}
		if(llave.matches("2")){departamento="Contabilidad";}
		if(llave.matches("3")){departamento="Recursos humanos";}
		if(llave.matches("4")){departamento="Administracion";}
		if(llave.matches("5")){departamento="Servicios generales";}
		/*sacamos el acumulado que esta en el mapa y lo guardamos en el dataset (valor,nombre de valor, nombre del departamento)*/
		dataset.addValue( (Double)mapa.get(llave) , "Costo en nomina", departamento);
 	}
 	/*creamos el diagrama ("titulo","barra inferior","barra lateral",datos,orientacion[vertical/horizontal], legend, tooltips, urls)*/
 	JFreeChart chart = ChartFactory.createBarChart("Nomina por departamento", "Departamento", "Costo nomina", dataset, PlotOrientation.VERTICAL, true, true, true);
 	/*lo guardamos en el disco duro(direccion,grafico,ancho, alto)*/
 	ChartUtilities.saveChartAsPNG(new File("c:/Archivos de programa/Apache Software Foundation/Apache Tomcat 6.0.24(stand)/webapps/ejercicio11/grafica.png"), chart, 700, 400);
%>
<img src="grafica.png"/>

Utilizamos este estilo
estilo.css

*{color:#CC0000;}
body{background-color: #F0F0F0;}
table#registro{font-weight:bold;}
div#titulo{
	background-color: #B00000;
	color: #B00000;
	background:#B00000;

}

recursos usados:
commons.fileupload

commons.io

conector-mysql


4 Responses to “Tests gráfica en JSP”


  1. octubre 11, 2011 a las 7:24 pm

    necesito coloboracion con un ejercio de java con jsp

    de una nomina

    • octubre 12, 2011 a las 8:00 am

      Si estuve viendo tu correo, pero no entendí específicamente en que te puedo colaborar

  2. 3 ricardo
    mayo 7, 2014 a las 9:43 am

    como puedo guardar un archivo pdf en base de datos y luego moztrarlo en el web utilizo jcp en eclipse y mysql


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


I+Ds

Dudas consultas
Facebook
Twiter
Google +

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevas publicaciones por correo.

Únete a otros 348 seguidores

Ingenio DS en Facebook

Redes Sociales y Archivos

Entradas

mayo 2010
L M X J V S D
« Abr   Jun »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

IngenioDS en twiter


A %d blogueros les gusta esto: