Listado de registros con paginación y procedimientos almacenados utilizando JSP -SQL SERVER – JQUERY – CSS

Hola ah todos, hoy traigo un tutorial básico de un listado de registros de una Base de Datos en Sql Server 2008 utilizando jsp, jquery y css, el listado se hace mediante procedimientos almacenados, asi que veremos en primer lugar como podemos conectarnos a sql server 2008 desde jsp y como invocar a un procedimiento almacenado con parametros desde jsp, y mostraremos los resultados utilizando la tecnología AJAX( Jquery) y modificaremos el estilo para darle una mejor apareiencia utilizando css3… así que manos a la obra 🙂

1.- En primer lugar lo que vamos a hacer es crear nuestra base de datos en sql server 2008, preferible utilizando authenticacion sql server ; asi que escribimos en el analizador de consultas lo siguiente:

create database tutorial
go
use tutorial
go

–creamos la tabla CategoriaProductos

create table CategoriaProductos
(
CodigoCategoriaProductos int not null identity(1,1),
DescripcionCategoriaProductos varchar(50) not null,
EstadoCategoriaProductos int

constraint clavecategoria primary key (CodigoCategoriaProductos)

)
go

— creamos la tabla Productos con referencia a la tabla CategoriaProductos

create table Productos
(
CodigoProductos int not null identity(1,1),
CodigoCategoriaProductos int ,
DescripcionProductos varchar(50) not null,
PrecioProductos decimal(9,2),
SotckProductos int,
EstadoCProductos int

constraint claveproductos primary key (CodigoProductos),
constraint claveforaneaproductos foreign key (CodigoCategoriaProductos)
references CategoriaProductos(CodigoCategoriaProductos)
)
go

 

Y DEBERIA QUEDARNOS DE ESTA MANERA

Una vez que hemos creado nuestras tablas , procedemos a llenarlas de algunos registros

— insertamos algunos registros en la tabla CategoriaProductos

insert into CategoriaProductos values(‘Bebidas’,1)
insert into CategoriaProductos values(‘Lacteos’,1)
insert into CategoriaProductos values(‘Cereales’,1)

—-para ver los registros que acabamos de insertar en la tabla CategoriaProductos

select * from CategoriaProductos
go

— ahora insertamos algunos registros en la tabla Productos

insert into Productos values(1, ‘Inka Kola 2 Lts’,3.5, 200,1)
insert into Productos values(1, ‘Pepsi 1 Lt.’,3, 100,1)
insert into Productos values(2, ‘Leche Pura Vida’,2.5, 400,1)
insert into Productos values(2, ‘Leche Anchor’,2, 200,1)
insert into Productos values(2, ‘Leche Gloria deslactozada’,3, 100,1)
insert into Productos values(3, ‘Arroz Paisana 1 Kg.’,3.5, 50,1)
insert into Productos values(3, ‘Arroz Costeño 1Kg.’,3, 50,1)
insert into Productos values(3, ‘Cereales Angel 1Kg.’,4, 50,1)

— Ahora vemos los registros que acabamos de ingresar
select * from Productos

Ahora procedemos a crear el Procedimiento almacenado que me lista los Productos

create procedure sp_gen_s_productos
@RegistrosAMostrar int,
@RegistrosAEmpezar int
as

SELECT TOP (@RegistrosAMostrar)* FROM
(
select p.CodigoProductos as codigo, p.DescripcionProductos as descripcion,cp.DescripcionCategoriaProductos as categoria,
p.PrecioProductos as precio,p.SotckProductos as stock,
ROW_NUMBER() OVER (ORDER BY p.CodigoProductos ) AS num

from Productos p
inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos

)
AS a
WHERE num > @RegistrosAEmpezar

y para probar lo ejecutamos

exec sp_gen_s_productos 3,0

y nos debe salir lo siguiente

2.- Bueno como entonces ya creamos nuestra base de datos con las tablas correspondientes para el ejemplo ahora procedemos a crear un proyecto jsp en la IDE que utilizaremos para este ejemplo , que es Net Beans , ud pueden utilizar la que gusten pero el proyecto tendra la siguiente estructura

los resaltado con amarillo, son los directorios y archivos que debemos crear, como sabemos en netbeans , el resto de archivos se crea por defecto asi que para crear el proyecto en Net Beans nos vamos a la ficha archivo, clic en Proyecto nuevo, en categorias seleccionamos Java Web y Proyectos seleccionamos Web Application, clic en siguiente y colocamos un nombre a nuestro proyecto y lo guardamos en la ruta que deseemos, clic en siguiente y luego en terminar.

3. Para empezar a crear nuestros directorios damos clic derecho sobre la carpeta Web Pages, luego clic en nuevo y luego en carpeta y asi vamos creando las carpetas hasta tener la estructura de la imagen anterior, luego en la carpeta css hacemos clic drecho y elegimos la opcion nuevo y luego elegimos Hoja de estilo en cascada (CSS)y le ponemos de nombre estilo.

Una vez que hemos hecho esto el siguiente paso es descargarnos el archivo de jquery  aqui, ojo si descargan una vserion distinta a la que yo utilice solo tienen que cambiar la referencia en el index por la version que uds hayan descargado, hasta hoy la ultima version es jquery-1.7.2.min.js, entonces ese archivo lo descargamos y copiamos a la carpeta js de nuestro proyecto. Asimismo tambien damos clic derecho en la carpeta js y elegimos nuevo , luego elegimos archivos de Java Script y lo llamamos funciones para tener todo la estructura lista y empezar con el proceso descargamos la siguiente imagen y la copiamos en la carpeta images

4.- Una vez que hemos hecho todo lo anterior procedemos a descargar el proyecto que necesitamos para conectarnos y donde estan los metodos de consulta a la Base de datos , asi como tambien el driver necesario para conectarme a SQL SERVER 2008, podemos descargarlo aqui, descargamos y descomprimimos las 2 carpetas en la carpeta raiz de nuestro proyecto

en el explorador de windows copiamos las dos carpetas driver sql y jdbc y debe ver asi

5.- Ahora en el Net Beans nos vamos a abrir proyecto y selecionamos el archivo jdbc de la carpeta de nuestro proyecto

y hacemos clic en abrir proyecto

doble clic en el archivo ConectaDB.java del proyecto jdbc y cambiamos los parametros necesarios para conectarnos: el primer parametro driver, es la regla del driver que utilizaremos para conectarnos que lo agregaremos despues, el segundo la cadena de conexion que para este caso sera mediante un dsn que crearemos luego de nombre dsnProductos, lo siguiente es el usuario de sql y luego su contraseña.

Una vez que hemos modificado estos valores hacemos clic derecho en el proyecto jdbc y elegimos limpiar y construir

6.- Ahora vamos a crear el dsn de usuario que nos permitirá conectarnos a la base de datos, para esto nos vamos a panel de control

En el panel de control donde dice ver por, seleccionamos iconos pequeños y luego elegimos la opcion Herramientas Administrativas

Luego elegimos la opcion Origenes de Datos ODBC

Y se abre la siguiente pantalla

damos clic en agregar

seleccionamos sql server y clic en finalizar

escribimos en nombre del dsn , una descripción y el servidor , para este caso local y clic en siguiente

escribimos nuestro usuario de sql server y la contraseña y clic en siguiente

seleccionamos la bd a la cual nos queremos conectar y clic en siguiente

clic en finalizar

clic en probar origen de datos

si todo estubo bien sale esta imagen , clic en aceptar

Como vemos nuestro DSN de usuario(dsnProductos) ha sido creado

7.- Lo siguiente que vamos a hacer  es agregar el proyecto jdbc y la libreria para conectarnos a sql server a nuestro proyecto turorialJSP, entonces clic derecho en el nombre del proyecto y elegimos propiedades

clic en libraries

clic en add project para agregar el proyecto jdbc

seleccionamos el proyecto jdbc que hicimos las modificacion de conexion y que esta dentro de nuestro proyecto tutorialJSP y le damos clic en Agregar al proyecto archivos JAR

Aqui ya aparece el proyecto jdbc agregado ahora hacemos clic en add library

clic en crear

le ponemos en nombre mssql_conect y hacemos clic en aceptar

clic en agregar archivo JAR/Carpeta

Buscamos el archivo sqljdbc4 que esta dentro de la carpeta driver sql en la carpeta raiz de nuestro proyecto tutorialJSP  y le damos clic en Agregar archivo JAR/Carpeta

clic en Aceptar

como se creo la libreria de nombre mssql_conect, ahora hacemos clic en añadir biblioteca

clic en aceptar

si desplegamos la carpeta libraries de nuestro proyecto vemos las librerias que acabamos de agregar

8.- Ahora que ya tenemos nuestras librerias necesarias ya agregadas, procedemos a programar cada uno de los archivos, empezaremos programando el archivo estilo.css de la carpeta css que nos va a permitir mejorar la apariencia de nuestra pagina

estilo.css

body {
background-color:#F2F2F2;
font-family: verdana,arial;
font-size: 14px;
}

a{
color:#DF7401;
text-decoration: none;
}
a:hover{
color:#FFFF00;
}

#bienvenida
{
background-color: #F5F6CE;
border: 1px solid #FFBF00;
border-radius:5px;
color:#FF8000;
margin: 0px auto;
padding:10px 0 0 0;
text-align: center;

}

#menu{
background: #00BFFF;
border:1px solid #01A9DB;
border-radius: 5px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
height: 50px;
margin:0 auto;
width:50%;
-webkit-border-radius: 5px;
-webkit-border-bottom-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 100px;

}

li{
color:#fff;
cursor:pointer;
font-size:15px;
float:left;
list-style: none;
margin-left: 40px;

}
li:hover {
color:#F4FA58;
font-weight: bold;

}
#contenedor{
background-color:#fff;
border:1px solid #BDBDBD;
margin: 20px auto;
min-height: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 70%;

text-align: center;

}
.paginadoractivo{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#F5DAA0;
color:#000000;
border:0.5px solid #000000;
cursor:pointer;
}
.paginador{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color: #E7F7FF;
color:#000000;
border:0.5px solid #333333;
cursor:pointer;

}
.paginador:hover{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#73ADD6;
color: white ;
border:0.5px solid #333333;
cursor:pointer;
}
.tablita
{
font-size: 12px;
width:90%;
text-align: left;
margin:0 auto;
border: 1px solid #E6E6E6;
border-collapse: collapse;
font-family: “Trebuchet MS”, Arial, sans-serif;
color: #ffffff;
}
.tablita caption
{
font-size: 16px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(‘../images/fon_perfil.gif’) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tablita th
{
font-size: 13px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(‘../images/fon_perfil.gif’) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
}
.tablita td
{
padding: 4px;
color: #086A87;

}
.tablita tfoot tr td
{
font-size: 12px;
color: #ffffff;
}
.tablita tbody tr:hover td
{
/* background: #FCFDFE; */
color:saddlebrown;
background: #E0F8F7;
}

9. Ahora procedremos a codificar nuestro archivo Index

index.jsp


<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”&gt;

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” href=”css/estilo.css” media=”all”>
<script type=”text/javascript” src=”js/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”js/funciones.js”></script>
<title>JSP Page</title>
</head>
<body>
<div id=”bienvenida”>
<h2>Bienvenidos a este tutorial JSP- MSSQL SERVER 2008 – JQUERY -CSS</h2>
</div>

<div id=”menu”>
<ul>
<li>Inicio</li>
<li onclick=”listaproductos()”>Listado</li>
<li>Registro</li>
</ul>
</div>
<div id=”contenedor” >

<h3>Aqui se mostrara el listado de productos</h3>
<img src=”images/admiracion-300×300.jpg”>
</div>
</body>
</html>

10.- Ahora procedemos a codificar el codigo de la funcion listarProductos en el archivo funciones.js que se encuentra en la carpeta js de nuestro proyecto

funciones.js

function listaproductos(pagina){
var rnd = Math.random()*11;

$.post(“lib/listado.jsp”,{
rnd:rnd,
pagina:pagina
},function(data){
$(“#contenedor”).html(data);
});
}

11.- Por ultimo codificamos el archivo jsp que nos realiza el listado y el que recibe las variable pagina por el metodo post en jquery, este archivo se encuentra en la carpeta lib de nuestro proyecto

listado.jsp

<%–

Document : listado
Created on : 31/03/2012, 02:28:29 PM
Author : Jose Garcia
–%>

<%@ page import=”java.util.Vector, jdbc.*” %><!– Nos permite utilizar metodos del proyecto jdbc con la clase sql.java –>
<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<%

out.println(“<br><br>”);

out.println(“<table class=’tablita’>”);
out.println(“<caption>LISTADO DE PRODUCTOS</caption>”);
out.println(“<tr>”);
out.println(“<th>Codigo</th>”);
out.println(“<th>Producto</th>”);
out.println(“<th>Categoria</th>”);
out.println(“<th>Precio</th>”);
out.println(“<th>Stock</th>”);

out.println(“</tr>”);
out.println(“<tbody>”);
int RegistrosAMostrar=4;
int PaginasIntervalo=3;
int RegistrosAEmpezar=0;
int PagAct = 1;
String pag = request.getParameter(“pagina”);
if (pag==null || pag==””){
RegistrosAEmpezar=0;
PagAct=1;
}else{
RegistrosAEmpezar=(Integer.valueOf(pag).intValue()-1)* RegistrosAMostrar;
PagAct=Integer.valueOf(pag).intValue();
}
%>
<%
Vector productos = Sql.consulta(“exec [sp_gen_s_productos] @RegistrosAMostrar='”+RegistrosAMostrar+”‘,@RegistrosAEmpezar='”+RegistrosAEmpezar+”‘”);//nos permite ejecutar un sp con parametros para la paginacion
for (int fils = 1; fils < productos.size(); ++fils) { //recorre el vector productos con los resultados del metodo Sql.consulta
String[] unaFila = (String[]) productos.get(fils);
%>
<tr id=”grid”>

<!– voy imprimiendo los resultados en la tabla–>
<td id=”formnuevo”><%=unaFila[0]%></td>
<td id=”formnuevo”><%=unaFila[1]%></td>
<td id=”formnuevo”><%=unaFila[2]%></td>
<td id=”formnuevo”><%=unaFila[3]%></td>
<td id=”formnuevo”><%=unaFila[4]%></td>

</tr>

<%

} %>
<%
String NroRegistros = Sql.getCampo(“select count(*) from Productos p ”
+ ” inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos”);// obtengo la cantidad de registros actuales
int PagAnt=PagAct-1;
int PagSig=PagAct+1;

double PagUlt=Integer.valueOf(NroRegistros).intValue()/RegistrosAMostrar; //calculo cuantas paginas tendra mi paginacion
int Res=Integer.valueOf(NroRegistros).intValue()%RegistrosAMostrar;
if(Res>0){
PagUlt=Math.floor(PagUlt)+1;
}

out.println(“</tbody>”);
out.println(“</table><br />”);
//principio del paginador
out.println(“<div style=’width:300px; float:right’>”);

if(PagAct>(PaginasIntervalo+1)) {
out.println(“<a onclick=listaproductos(‘1′); class=’paginador’><< Primero</a>”);
out.println(“&nbsp;”);
}
for ( int i = (PagAct-PaginasIntervalo) ; i <= (PagAct-1) ; i ++) {
if(i>=1) {
out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);
out.println(“&nbsp;”);
}
}
out.println(“<span class=’paginadoractivo’>”+PagAct+”</span>”);
out.println(“&nbsp;”);
for ( int i = (PagAct+1) ; i <= (PagAct+PaginasIntervalo) ; i ++) {
if(i<=PagUlt) {
out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);
out.println(“&nbsp;”);
}
}
if(PagAct<(PagUlt-PaginasIntervalo)) {
out.println(“<a onclick=\”listaproductos(‘”+PagUlt+”‘)\” class=’paginador’>Ultimo >></a>”);
}
out.println(“</div>”);
//fin del paginador
%>

Si hemos hecho todo bien cuando hacemos clic en listado de la pagina index.jsp  nos aparecera el listado en el div contenedor con su respectiva paginacion y nos mostrara 4 registros por pagina cuando hacemos clic en los numeros de paginas(si queremos que nos muestre ma sregistros por pagina cambiamos el valor de la variable RegistrosAMostrar en la pagina listado.jsp) y se mostrar de la siguiente manera

primera pagina del paginador

segunda y ultima pagina del paginador

Espero que este tutorial les haya sido de gran ayuda

gracias por la atención brindada ..hasta otra oportunidad 🙂

2 comentarios el “Listado de registros con paginación y procedimientos almacenados utilizando JSP -SQL SERVER – JQUERY – CSS

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