BUSCADOR Crea un buscador de productos que permita buscar por: Precio y marca de productos. Envía tu archivo a través de este medio. Listado de registros con paginación y procedimientos almacenados utilizando JSP -SQL SERVER – JQUERY – CSS 1.- En primer lugar lo que vamos a hacer es crear nuestra base de datos en SQL server 2008, preferible utilizando autenticación 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), Alumno : Oscar Jaime Gonzales Guzman 1
Transcript
BUSCADORCrea un buscador de productos que permita buscar por: Precio y marca de productos. Envía tu archivo a través de este medio.
Listado de registros con paginación y procedimientos almacenados utilizando
JSP -SQL SERVER – JQUERY – CSS
1.- En primer lugar lo que vamos a hacer es crear nuestra base de datos en SQL server 2008, preferible utilizando autenticación SQL server; así que escribimos en el analizador de consultas lo siguiente:
create database tutorialgouse tutorialgo
–creamos la tabla CategoriaProductos
create table CategoriaProductos(CodigoCategoriaProductos int not null identity(1,1),DescripcionCategoriaProductos varchar(50) not null,EstadoCategoriaProductos intconstraint clavecategoria primary key (CodigoCategoriaProductos))go
Alumno : Oscar Jaime Gonzales Guzman 1
— 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 intconstraint 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 CategoriaProductosgo
Alumno : Oscar Jaime Gonzales Guzman 2
– 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 ingresarselect * from Productos
Ahora procedemos a crear el Procedimiento almacenado que me lista los Productos
create procedure sp_gen_s_productos@RegistrosAMostrar int,@RegistrosAEmpezar intasSELECT 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 numfrom Productos pinner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos)AS aWHERE num > @RegistrosAEmpezar
y para probar lo ejecutamos
exec sp_gen_s_productos 3,0
Alumno : Oscar Jaime Gonzales Guzman 3
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 y 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 categorías seleccionamos Java Web y Proyectos seleccionamos Web Aplicación, 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 opción 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 versión distinta a la que yo utilice solo tienen que cambiar la referencia en el índex por la versión que Uds. hayan descargado, hasta hoy la ultima versión es jquery-1.7.2.min.js, entonces ese archivo lo descargamos y copiamos a la carpeta js de nuestro proyecto. Asimismo también 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 están los métodos de consulta a la Base de datos , así como también el driver necesario para conectarme a SQL SERVER 2008, podemos
descargarlo aqui, descargamos y descomprimimos las 2 carpetas en la carpeta raíz 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 y 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 parámetros necesarios para conectarnos: el primer parámetro driver, es la regla del driver que utilizaremos para conectarnos que lo agregaremos después, el segundo la cadena de conexión que para este caso será 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 opción Herramientas Administrativas
Luego elegimos la opción Orígenes de Datos ODBC
Alumno : Oscar Jaime Gonzales Guzman 6
Y se abre la siguiente pantalla
damos clic en agregar
Alumno : Oscar Jaime Gonzales Guzman 7
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
Alumno : Oscar Jaime Gonzales Guzman 8
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
Alumno : Oscar Jaime Gonzales Guzman 9
clic en probar origen de datos
si todo estuvo bien sale esta imagen, clic en aceptar
Alumno : Oscar Jaime Gonzales Guzman 10
Como vemos nuestro DSN de usuario (dsnProductos) ha sido creado
7.- Lo siguiente que vamos a hacer es agregar el proyecto jdbc y la librería para conectarnos a SQL server a nuestro proyecto turorialJSP, entonces clic derecho en el nombre del proyecto y elegimos propiedades
clic en libraries
Alumno : Oscar Jaime Gonzales Guzman 11
clic en add Project para agregar el proyecto jdbc
seleccionamos el proyecto jdbc que hicimos las modificación de conexión 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
Alumno : Oscar Jaime Gonzales Guzman 12
clic en crear
le ponemos en nombre mssql_conect y hacemos clic en aceptar
clic en agregar archivo JAR/Carpeta
Alumno : Oscar Jaime Gonzales Guzman 13
Buscamos el archivo sqljdbc4 que está dentro de la carpeta driver SQL en la carpeta raíz de nuestro proyecto tutorialJSP y le damos clic en Agregar archivo JAR/Carpeta
clic en Aceptar
Alumno : Oscar Jaime Gonzales Guzman 14
como se creó la librería de nombre mssql_conect, ahora hacemos clic en añadir biblioteca
clic en aceptar
si desplegamos la carpeta libraries de nuestro proyecto vemos las librerías que acabamos de agregar
8.- Ahora que ya tenemos nuestras librerías 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 paginaestilo.cssbody {background-color:#F2F2F2;font-family: verdana,arial;font-size: 14px;}a{color:#DF7401;text-decoration: none;}a:hover{color:#FFFF00;}#bienvenida{
{/* 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”><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>
Alumno : Oscar Jaime Gonzales Guzman 18
10.- Ahora procedemos a codificar el código de la función listar Productos en el archivo funciones.js que se encuentra en la carpeta js de nuestro proyectofunciones.jsfunction 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 método post en jquery, este archivo se encuentra en la carpeta lib de nuestro proyecto
listado.jsp<%–Document : listadoCreated on : 31/03/2012, 02:28:29 PMAuthor : 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>”);
Alumno : Oscar Jaime Gonzales Guzman 19
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 paginacionfor (int fils = 1; fils < productos.size(); ++fils) { //recorre el vector productos con los resultados del metodo Sql.consultaString[] 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 actualesint PagAnt=PagAct-1;int PagSig=PagAct+1;double PagUlt=Integer.valueOf(NroRegistros).intValue()/RegistrosAMostrar; //calculo cuantas paginas tendra mi paginacionint Res=Integer.valueOf(NroRegistros).intValue()%RegistrosAMostrar;if(Res>0){PagUlt=Math.floor(PagUlt)+1;}out.println(“</tbody>”);out.println(“</table><br />”);//principio del paginadorout.println(“<div style=’width:300px; float:right’>”);if(PagAct>(PaginasIntervalo+1)) {out.println(“<a onclick=listaproductos(‘1′); class=’paginador’><< Primero</a>”);out.println(“ ”);}for ( int i = (PagAct-PaginasIntervalo) ; i <= (PagAct-1) ; i ++) {if(i>=1) {out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);
Alumno : Oscar Jaime Gonzales Guzman 20
out.println(“ ”);}}out.println(“<span class=’paginadoractivo’>”+PagAct+”</span>”);out.println(“ ”);for ( int i = (PagAct+1) ; i <= (PagAct+PaginasIntervalo) ; i ++) {if(i<=PagUlt) {out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);out.println(“ ”);}}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 paginación y nos mostrara 4 registros por pagina cuando hacemos clic en los números de páginas (si queremos que nos muestre más registros por pagina cambiamos el valor de la variable Registros Amostrar en la pagina listado.jsp) y se mostrar de la siguiente manera
