martes, marzo 01, 2011

Java - Aplicación Web, Carrito de Compras Parte IV - Creación de la Vista


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"

1. Entorno


  • MySQL 5.1.
  • NetBeans IDE 6.9.1
  • Apache Tomcat
  • JDK 1.6.0 - 21

2. Introducción


La vista sirve para interactuar con el usuario, toma datos del usuario para registrar en la base de datos o mostrar los datos resultantes de una consultas.

2.1. JSP

JavaServer Pages (JSP) es una tecnología Java que permite generar contenido dinámico para web, en forma de documentos HTML, XML o de otro tipo. Esta tecnología es un desarrollo de la compañía Sun Microsystems. La Especificación JSP 1.2 fue la primera que se liberó y en la actualidad está disponible la Especificación JSP 2.1. Las JSP's permiten la utilización de código Java mediante scripts. Además, es posible utilizar algunas acciones JSP predefinidas mediante etiquetas. Estas etiquetas pueden ser enriquecidas mediante la utilización de Bibliotecas de Etiquetas (TagLibs o Tag Libraries) externas e incluso personalizadas.

3. Desarrollo


3.1. Crear los JSP

Primero lo que debemos de hacer es crear los JSP, que será la parte con la cual el usuario interactuara con el sistema. Para eso hacemos clic derecho en la carpeta que dice Web Pages de ahí nos vamos New y luego JSP.

















Y creamos siete JSP:


  • index --> Que nos mostrara un listado de todos los productos que tenemos y que deseamos modificar
  • registrarProducto --> Registrar un producto nuevo al sistema
  • actualizarProducto --> Sirve para modificar un producto del sistema
  • anadirCarrito --> Añade un detalle al carrito de compras
  • registrarVenta --> Registrar la venta
  • verVentas --> Reporte de las ventas
  • mensaje --> Muestra los mensajes de realización exitosa o fallo




















3.2. index.jsp

El diseño del index.jsp, seria el siguiente

















Y su código fuente seria el siguiente:


<%-- Importaciones que son necesarias para que se muestre el JSP --%>
<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.*" %>
<%@page import="java.util.*" %>

<%@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">
        <title>.:Programando con Café - Carrito de Compras - Ing. Henry Wong</title>
    </head>
    <body>
        <h1>Programando con Café<br>Ing. Henry Joe Wong Urquiza</h1>
        <div>
            <%-- Menu de opciones --%>
            <a href="index.jsp">Inicio</a> |
            <a href="registrarProducto.jsp">Registrar Producto</a> |
            <a href="registrarVenta.jsp">Registrar Venta</a> |
            <a href="verVentas.jsp">Consultar Ventas</a> |
            <a href="Reporte">Reporte Producto</a>
        </div>
        <br >
        <div>
            <table border="1">
                <tr style="background-color: chocolate">
                    <td colspan="4">Lista de Productos</td>

                </tr>
                <tr style="background-color: chocolate">
                    <td>Codigo</td>
                    <td>Nombre</td>
                    <td>Precio</td>
                    <td>Proceso</td>
                </tr>
                <%-- Lista de todos los productos --%>
                <%
                            ArrayList<Producto> lista = ProductoBD.obtenerProducto();
                            for (Producto p : lista) {
                %>
                <tr>
                    <td><%= p.getCodigoProducto()%></td>
                    <td><%= p.getNombre()%></td>
                    <td><%= p.getPrecio()%></td>
                    <%-- Enlaces a las paginas de actualizar o anadir al carrito --%>
                    <td><a href="actualizarProducto.jsp?id=<%= p.getCodigoProducto()%>">Modificar</a> |
                        <a href="anadirCarrito.jsp?id=<%= p.getCodigoProducto()%>">Añadir</a>
                    </td>
                </tr>
                <%
                            }
                %>

            </table>
        </div>


    </body>
</html>



3.3. registrarProducto.jsp

El diseño seria el siguiente


















Su código fuente seria el siguiente:


<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.*" %>
<%@page import="java.util.*" %>

<%@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">
        <title>.:Programando con Café - Carrito de Compras - Ing. Henry Wong</title>
    </head>
    <body>
        <h1>Programando con Café<br>Ing. Henry Joe Wong Urquiza</h1>
        <div>
            <a href="index.jsp">Inicio</a> |
            <a href="registrarProducto.jsp">Registrar Producto</a> |
            <a href="registrarVenta.jsp">Registrar Venta</a> |
            <a href="verVentas.jsp">Consultar Ventas</a> |
            <a href="Reporte">Reporte Producto</a>
        </div>
        <br >
        <%-- En el action del formulario le decimos que llama al Controlador --%>
        <form method="post" action="Controlador">
            <div>
                <input type="hidden" name="accion" value="RegistrarProducto" />
                <table border="1">
                    <tr>
                        <td>Nombre</td>
                        <td><input type="text" name="txtNombre" value="" /></td>
                    </tr>
                    <tr>
                        <td>Precio</td>
                        <td><input type="text" name="txtPrecio" value="0" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="Registrar" name="btnRegistrar" /></td>
                    </tr>
                </table>
            </div>
        </form>

    </body>
</html>


3.4. actualizarProducto.jsp

Este formulario recibe por petición GET el código del producto seleccionado desde la pagina index.jsp y muestra su información para luego actualizar. Su diseño del formulario seria el siguiente.

















Su código fuente seria el siguiente:


<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.*" %>
<%@page import="java.util.*" %>

<%@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">
<%-- Obtenemos el id o el codigo del producto que deseamos modificar o actualizar --%>
<%
    Producto p=ProductoBD.obtenerProducto(Integer.parseInt(request.getParameter("id")));
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>.:Programando con Café - Carrito de Compras - Ing. Henry Wong</title>
    </head>
    <body>
        <h1>Programando con Café<br>Ing. Henry Joe Wong Urquiza</h1>
        <div>
            <a href="index.jsp">Inicio</a> |
            <a href="registrarProducto.jsp">Registrar Producto</a> |
            <a href="registrarVenta.jsp">Registrar Venta</a> |
            <a href="verVentas.jsp">Consultar Ventas</a> |
            <a href="Reporte">Reporte Producto</a>
        </div>
        <br >
        <%-- En el action del formulario le decimos que llama al Controlador --%>
        <form method="post" action="Controlador">
            <div>
                <%-- Indica al controlador que vamos hacer una modificacion --%>
                <input type="hidden" name="accion" value="ModificarProducto" />
                <table border="1">
                    <tr>
                        <td>Codigo</td>
                        <%-- Escribimos el codigo del producto a modificar --%>
                        <td><input type="text" name="txtCodigo" value="<%= p.getCodigoProducto()%>" readonly /></td>
                    </tr>
                    <tr>
                        <td>Nombre</td>
                        <%-- Escribimos el nombre del producto a modificar --%>
                        <td><input type="text" name="txtNombre" value="<%= p.getNombre()%>" /></td>
                    </tr>
                    <tr>
                        <td>Precio</td>
                        <%-- Escribimos el precio del producto a modificar --%>
                        <td><input type="text" name="txtPrecio" value="<%= p.getPrecio()%>" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="Actualizar" name="btnActualizar" /></td>
                    </tr>
                </table>
            </div>
        </form>

    </body>
</html>



3.5. anadirCarrito.jsp

Este formulario nos sirve para añadir un elemento al carrito de compras que tenemos en sesion. Su diseño seria el siguiente:


<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.*" %>
<%@page import="java.util.*" %>

<%@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">
<%-- Obtenemos el id o el codigo del producto que deseamos añadir al carrito --%>
<%
    Producto p=ProductoBD.obtenerProducto(Integer.parseInt(request.getParameter("id")));
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>.:Programando con Café - Carrito de Compras - Ing. Henry Wong</title>
    </head>
    <body>
        <h1>Programando con Café<br>Ing. Henry Joe Wong Urquiza</h1>
        <div>
            <a href="index.jsp">Inicio</a> |
            <a href="registrarProducto.jsp">Registrar Producto</a> |
            <a href="registrarVenta.jsp">Registrar Venta</a> |
            <a href="verVentas.jsp">Consultar Ventas</a> |
            <a href="Reporte">Reporte Producto</a>
        </div>
        <br >
        <form method="post" action="Controlador">
            <div>
                <input type="hidden" name="accion" value="AnadirCarrito" />
                <table border="1">
                    <tr>
                        <td>Codigo</td>
                        <td><input type="text" name="txtCodigo" value="<%= p.getCodigoProducto()%>" readonly /></td>
                    </tr>
                    <tr>
                        <td>Nombre</td>
                        <td><input type="text" name="txtNombre" value="<%= p.getNombre()%>" readonly /></td>
                    </tr>
                    <tr>
                        <td>Precio</td>
                        <td><input type="text" name="txtPrecio" value="<%= p.getPrecio()%>" readonly /></td>
                    </tr>
                    <tr>
                        <td>Cantidad Pedir</td>
                        <td><input type="text" name="txtCantidad" value="0" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="Añadir" name="btnAnadir" /></td>
                    </tr>
                </table>
            </div>
        </form>

    </body>
</html>


3.6. registrarVenta.jsp

Este formulario es el encargado de llamar los métodos que registraran todos los productos guardados en la sesión a la base de datos. Su diseño del formulario es el siguiente

















Su codigo fuente seria:


<%@page import="java.util.ArrayList"%>
<%@page import="Modelo.*" %>
<%@page import="java.util.*" %>

<%@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">
        <title>.:Programando con Café - Carrito de Compras - Ing. Henry Wong</title>
    </head>
    <body>
        <h1>Programando con Café<br>Ing. Henry Joe Wong Urquiza</h1>
        <div>
            <a href="index.jsp">Inicio</a> |
            <a href="registrarProducto.jsp">Registrar Producto</a> |
            <a href="registrarVenta.jsp">Registrar Venta</a> |
            <a href="verVentas.jsp">Consultar Ventas</a> |
            <a href="Reporte">Reporte Producto</a>
        </div>
        <br >
        <div>
            <form method="post" action="Controlador">
                <%-- Llamamos a la accion Registrar Venta --%>
                <input type="hidden" name="accion" value="RegistrarVenta" />
                <table border="1">
                        <tr style="background-color: chocolate">
                            <td colspan="5">Carrito de Compras</td>
                        </tr>
                        <tr style="background-color: chocolate">
                            <td>Cliente:</td>
                            <td colspan="4"><input type="text" name="txtCliente" value="" /></td>
                        </tr>
                        <tr style="background-color: chocolate">
                            <td>Nombre</td>
                            <td>Precio</td>
                            <td>Cantidad</td>
                            <td>Descuento</td>
                            <td>Sub. Total</td>
                        </tr>
                        <%-- Los productos que tenemos en la sesion que se llama carrito --%>
                        <%
                                    ArrayList<DetalleVenta> lista = (ArrayList<DetalleVenta>)session.getAttribute("carrito");
                                    if(lista!=null){
                                        for (DetalleVenta d : lista) {
                        %>
                                        <tr>
                                            <td><%= d.getProducto()%></td>
                                            <td><%= d.getProducto().getPrecio()%></td>
                                            <td><%= d.getCantidad()%></td>
                                            <td><%= d.getDescuento()%></td>
                                            <td><%= (d.getProducto().getPrecio() * d.getCantidad())-d.getDescuento()%></td>
                                        </tr>
                        <%
                                        }
                                    }
                        %>
                        <tr >
                            <td colspan="5"><input type="submit" value="Registrar Venta" name="btnVenta" /></td>
                        </tr>
                    </table>
                </form>
        </div>


    </body>
</html>


4. Ejemplo de la Aplicación


16 comentarios:

Geniales sus tutoriales!
Felicitaciones!
son de mucha ayuda!

Gracias a uds por seguirnos :)

Hola ya corri el programa pero al momento de ingresar un producto me envia el siguiente mensaje :

Estado HTTP 404 - /CarritoComprasJSP/Controlador

type Informe de estado

mensaje /CarritoComprasJSP/Controlador

descripción El recurso requerido (/CarritoComprasJSP/Controlador) no está disponible.
Apache Tomcat/6.0.32

porque estoy hcieno algo mal¡??:(

Ese es un error que no esta desplegado el apache.

chevere el tutorial, pero creo q olvidastes mostrar que es lo q hay dentro de los packages Modelo y Controlador =/

Hola

No encuentro el jsp
verVentas

Me podrias ayudar

saludos

El proyecto completo se encuentra en el resumen del proyecto ... ahí lo podrías encontrar.

Ahi tb pueden encontrar el paquete modelo y controlador ... Toda su codificacion

Hola, una pregunta donde puedo encontrar el resumen del proyecto

gracias

ME AN SALVADO LA VIDA ES PRECISAMENTE LO QUE ESTOY DESARROLLANDO COMO PROYECTO ESCOLAR Y AL PARECER ESTO ME SALVA LA VIDA,, si lo pudieran mejorar con jquery y ajax es algo que les agradecire mucho,,,

gracias ing. sus aportes son de garn ayuda suerte atte armando pechitoo

execelente aporte ing. ojala le siga agregando cosas nuevas como JMesa y ajax saludos atte armando pechito

Mas claro no se pudo haber encontrado. Muchisimas gracias por el aporte...

excelente tutorial, pero habra alguna forma de que nos compartas el codigo fuente.

Si se encuentra en el resumen