BUSCADOR

Crea un buscador de productos que permita buscar por: Precio y

marca de productos. Enva tu archivo a travs de este medio.
DESARROLLO
Listado de registros con paginacin y procedimientos
almacenados utilizando
JSP -SQL SERVER JQUERY CSS

En primer lugar lo que vamos a hacer es crear nuestra base de datos en SQL
server 2008, preferible utilizando autenticacin SQL server; as 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 Costeo 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 tendr la siguiente estructura los
resaltado

con

amarillo,

son

los

directorios

archivos que debemos crear, como sabemos en

netbeans , el resto de archivos se crea por defecto
as que para crear el proyecto en Net Beans nos
vamos a la ficha archivo, clic en Proyecto nuevo, en categoras seleccionamos
Java Web y Proyectos seleccionamos Web Aplicacin, 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 as vamos
creando las carpetas hasta tener la estructura de la imagen anterior, luego en
la carpeta css hacemos clic derecho y elegimos la opcin 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 versin distinta a la que yo utilice solo tienen
que cambiar la referencia en el ndex por la versin que Uds. hayan
descargado, hasta hoy la ultima versin es jquery-1.7.2.min.js, entonces ese
archivo lo descargamos y copiamos a la carpeta js de nuestro proyecto.
Asimismo tambin 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 estn los mtodos de
consulta a la Base de datos , as como tambin el driver necesario para
conectarme a SQL SERVER 2008, podemos descargarlo aqui, descargamos y
descomprimimos las 2 carpetas en la carpeta raz de nuestro proyecto

en el explorador de Windows copiamos las dos carpetas driver SQL y jdbc y

debe ver as

5.- Ahora en el Net Beans nos

vamos a

abrir proyecto

seleccionamos 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

parmetros necesarios para conectarnos: el primer parmetro driver, es la
regla del driver que utilizaremos para conectarnos que lo agregaremos
despus, el segundo la cadena de conexin que para este caso ser mediante
un DSN que crearemos luego de nombre dsnProductos, lo siguiente es el
usuario de SQL y luego su contrasea.
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 pequeos y

luego elegimos la opcin Herramientas Administrativas

Luego elegimos la opcin Orgenes 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 descripcin y el servidor, para este caso
local y clic en siguiente

escribimos nuestro usuario de SQL server y la contrasea 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 estuvo 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 librera
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 modificacin de conexin y que

est 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 est dentro de la carpeta driver SQL en la

carpeta raz de nuestro proyecto tutorialJSP y le damos clic en Agregar archivo
JAR/Carpeta

clic en Aceptar

como se cre la librera de nombre mssql_conect, ahora hacemos clic en aadir

biblioteca

clic en aceptar

si desplegamos la carpeta libraries de nuestro proyecto vemos las libreras que

acabamos de agregar
8.- Ahora que ya tenemos nuestras libreras 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 procederemos 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-300300.jpg>
</div>
</body>
</html>

10.- Ahora procedemos a codificar el cdigo de la funcin listar Productos 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 mtodo 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+);//no
s 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 aparecer el listado en el div contenedor con su
respectiva paginacin y nos mostrara 4 registros por pagina cuando hacemos
clic en los nmeros de pginas (si queremos que nos muestre ms registros por
pagina cambiamos el valor de la variable Registros Amostrar en la
pagina listado.jsp) y se mostrar de la siguiente manera

Primera pgina del paginador

Segunda y ltima pagina del paginador