Manejo de Librerías
En primera instancia definiremos a que se refiere el manejo de librerias y cuales son las adecuadas para iniciar un nuevo proyecto
web. Para ello deben considerar que el diseño debe adaptarse a los distintos navegadores. Entre ellos tenemos los siguientes:
Qué es Bootstrap?
Bootstrap
es un frameworks desarrollado por Twitter que simplifica el proceso de creación de diseños
web. Esta ofrece una serie de plantillas CSS y ficheros JavaScripts. De la misma forma este framework permite usar estilos y plugins integrados icon Jquery.
Descarga y ejemplos
Considere a Bootstrap como un proyecto de código abierto que podemos descargar desde el sitio Github.
En esta página podrán descargar una carpeta en la cual contendrán varios archivos
.css, imágenes y .js.
Qué es jQuery?
El jQuery es una librería de JavaScript para
acceder a los objetos del DOM de un modo simplificado, donde se incorporan efectos visuales. De la misma forma que Bootstrap tiene un gran manejo en cuanto a compatibilidad de navegadores.
Descarga y ejemplos
Descarga y ejemplos
Para la descarga de la librería acceda al siguiente al sitio Jquery donde podrá descargar el archivo para implementar los proyectos.
Para utilizar la librería la descargaremos del sitio oficial y en cada página que requiera usar Jquery solo debe agregar la siguiente linea:
<script type="text/javascript"
src="jquery.js"></script>
Implementacion de Librerias en un proyecto WEB
Una vez definido la funcionalidad de estas dos librerias pondremos en práctica cada una de ellas, para lo cual nos crearemos un proyecto web. Nuestro proyecto Web se denominara COMPRAS, tendrá las siguientes caracteristicas:
- La aplicación debera permitir acceder al sitio mediante una pantalla de Logeo de Usuarios, la cual deberá validar la existencia del usuario ingresado.
- Al ingresar al sitio con el usuario requerido, deberá acceder a una nueva página, en la cual permitirá realizar las compras mediante un listado por cada tipo de articulo.
- Con el catálogo de articulos dispobibles podrá ir registrando la compra mediante un selección por cada articulo.
- Una vez seleccionados los articulos, deberá presentar un resumen de las selecciones realizadas, unidades y costo total.
- Desde esta nueva página tambien podrá regresar a la pantalla de Compras y actualizar la selección de los articulos.
- Una vez definido los articulos de la compra,podra acceder a la facturacion respectiva.
- Tome en cuenta que al crearse varias paginas WEB, deberá validar que para acceder a cada una de ellas, deberá estar logeado previamente.
FASE 1: Creación del Proyecto
Para implementar nuestro proyecto,
tome en cuenta lo siguiente:
- Crearemos nuestro proyecto WEB en la herramienta Eclipse JUNO.
- Al abrir la aplicación definiremos la ruta donde se alojará nuestro proyecto como se muestra en la siguiente figura:
- Una vez abierta a la aplicación , nos crearemos un Proyecto denominado Web Dynamic Proyect como se muestra en la siguiente figura:
- Al seleccionar el tipo de proyecto, iniciara un Wizard para la elaboración de proyecto, donde deberá registrar el nombre de proyecto, fíjese en la siguiente figura:
- Pulse en Finalizar y se crear nuestro nuevo proyecto y se observará de la siguiente manera en la seccion Proyect Explorer:
- Para iniciar con la implementación de nuestra página Web, nos crearemos un archivo .HTML, a este archivo los denominaremos Index.html como se muestra a continuación:
- Este archivo se creará dentro de la carpeta WebContent, como se muestra a continuación:
- En esta plantilla html, será donde utilizaremos las librerías de Bootstrap para generar un página web de primera.
FASE 2: Carga de Librerias
BOOTSTRAP
- Para subir nuestra librerías, nos descargaremos desde las páginas indicadas anteriormente. Las librerías descargadas estarán compuestas por una carpeta denominada bootstrap y dentro de ella se encontraran tres nuevas carpetas: css, js, img. Estas carpetas contienen las librerías para la implementación de las páginas web de acuerdo a las múltiples necesidades que pueden requerirse.
- Vamos a nuestro proyecto y sobre la carpeta WebContent damos clic derecho y seleccionaremos la opción Import, como se muestra a continuación:
- Al seleccionar aparecerá la ventana de selección de archivos a importar como se muestra continuación:
- En la opción General, seleccione File System y pulse en Next. En la siguiente pantalla ubique la carpeta de Boostrap desde el browser proporcionado como se muestra a continuación:
- Localizamos nuestra carpeta y pulsamos en Aceptar, podremos visualizar que aparecerá cargado la carpeta en el panel, seleccionaremos la carpeta requerida como se muestra a continuación:
- Ya seleccionado se habilitará el boton Finish.
- Nuestra carpeta de la librería de Boostrap podrá observarla en la carpeta WebContent como se muestra en la siguiente figura:
JQUERY
- Vamos a nuestro proyecto y accedemos a la carpeta js que se encuentra dentro de WebContent dando clic derecho sobre esta y seleccionaremos la opción Import, como se muestra a continuación:
- Al seleccionar aparecerá la ventana de selección de archivos a importar como se muestra continuación:
- En la opción General, seleccione File System y pulse en Next. En la siguiente pantalla ubique la carpeta de j-Query desde el browser proporcionado como se muestra a continuación:
- Localizamos nuestra carpeta y pulsamos en Aceptar y aparecerá cargado la carpeta en el panel, ahora seleccionaremos la carpeta requerida como se muestra a continuación:
- Ya seleccionado pulse en Finish. Nuestra carpeta de la librería de J-Query podrá observarla en la carpeta WebContent como se muestra en la siguiente figura:
- Con las librerías cargadas podremos iniciar a elaborar nuestra página web, en este caso se diseñara sobre el archivo Index.html especificado anteriormente.
FASE 3: Definición de las librearias en el archivo Index.html
Ya cargado nuestra librearias, empezaremos con la programación del archivo Index.html, aunque tambien se puede crear de tipo .jsp. En este archivo vamos espcificar las librerias que valos usar para ello incorporaremos las siguientes lineas de codigo como se muestra a continuación:
Librearias BOOTSTRAP
Considere que al espcificar las librearias, debera colocar el path completo donde se alojan cada una de las librerias que se usaran tal como se presenta a continuación:
<meta charset="utf-8">
<!—[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/estilo.css" type="text/css"/>
<script src="bootstrap/js/bootstrap.min.js"></script>
Librearias JQUERY
En el caso de JQUERY, solo debera agregar la siguiente linea de codigo en cada pagina WEB que use dicha libreria:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
FASE 4: Creación del Logeo de Usuario
Teniendo en cuenta que el archivo Index.html es el principal, prograremos el acceso de usuarios o Login desde este archivo de inicio, para ello tome en cuenta lo siguiente:
<div class="navbar navbar-fixed-center">
<div class="navbar-inner">
<div class="container">->Especifica el contenido
<center>
<form action="Login" method="post">->Envio de Datos
<h1>Login de Usuario</h1>->Titulo de la Pantalla
<table>
<tr>
<td>Usuario</td>
<td><input type="text" name="txtUsuario" /></td>->Ingresar el Nombre del Usuario
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="txtPassword" /></td>->Ingresar el Password del usuario </tr>
<tr>
<td><button class="btn btn-large btn-primary" type="submit" value= "Login" name="Login">Login</button></td>
->Envio de Datos Ingresados
</tr>
</table>
</div>
</form>
</center>
</div>
</div>
En esta parte tendremos ya el diseño de la siguiente manera:
Ahora para la validacion de ingreso de usuarios vamos a crear un servlet, para ello tome en cuenta lo siguiente:
Vamos al carpeta del prpyecto denominada JavaResource y dentro de ella seleccionar la carpeta src, dar clic derecho como se muestra en la siguiente figura:
Seleccione NUEVO y luego en Servlet. Se desplegara una nueva pantalla donde vamos a ingresar el nombre de nuestro paquete y del Servlet como se muestra a continuación:
Pulsamos en Finish y este aparecerá en la sección de JavaResource.
En el servlet Login creado para administrar el logeo de usuarios, se crearan los eventos doPOST y doGET.
En el evento doPost programaremos el siguiente codigo para enviar los datos, como se describe a continuación:
->Evento
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
->declaramos las cajas de texto del index html creados para el ingreso de usuario y password
String user = request.getParameter("txtUsuario");
String pass = request.getParameter("txtPassword");
if(logear(user, pass))
{
->Guardar nombre del usuario en la secion
request.getSession().setAttribute("UserName", "Pepito Perez");
->Redireccionar la respuesta (response) a otra pagina jsp en caso de que el usuario sea correcto
response.sendRedirect("SeleccionProducto2.jsp");
}else{
->Mensaje de error en caso de que el usuario no sea el correcto y habilitacion de la pantalla de login
String str = "<html> <head> " +
"<title>Error de login</title></head>" +
"<body><h1>Error de login</h1>" +
"<p> EL Usuario "+user+" no esta registrado </p>" +
" <a href=\"index1.jsp\">Regresar</a></body>"+
"</html>";
PrintWriter out = response.getWriter();
out.println(str);
}
}
Para validar el usuario programaremos los siguiente:
private boolean logear(String u, String p)
{-> Usuario y Password Permitido
if(u.equals("pperez") && p.equals("123"))
return true;
return false;
}
Una aplicacion WEB debe contener seguridades en cuanto a acceso de usuarios no permitidos a paginas sin logeo, para ello debe agregar el siguiente codigo en cada una de las paginas WEB del Proyecto. Este codigo permitira redireccionar cualquier acceso a paginas desde el explorador a la pagina principal del logeo.
<%
->Validar si el usuario ingresado existeString usuario = (String) session.getAttribute("UserName");
if (usuario != null) {
out.print("<right><h2>USUARIO: " + usuario+"</h2></right>");
} else {
%>
->Redireccionar a la página inicial del logeo
<script type="text/javascript">
window.location = "index1.jsp";
</script>
<%
}
%>
FASE 5: Lectura de Archivos JSON
Los archivos JSON permiten alojar información para ser leida, estos archivos seran cargados en una nueva carpeta creada llamada DATOS, dentro de la carpeta principal WebContent. Basta con copiar desde donde se encuentren dichos archivos y pegar sobre la carpera nueva creada DATOS.
Para la lectura de archivos JSON deberá diseñar el formato adecuado según la sintásix definida en dicho archivo, como se observa a continuación:
COMBO.json
[
{ "id":"1",
"nombre":"TELEVISORES",
"extencion":"100"
},
{ "id":"2",
"nombre":"COMPUTADORES",
"extencion":"101"
},
{ "id":"3",
"nombre":"MUEBLES",
"extencion":"102"
}
]
PRODUCTOS.json
[
{ "id":"1",
"nombre":"S01",
"modelo":"SMART TV SONY LED 42'",
"valor":560,
"img":"tv1.jpg"
},
{ "id":"1",
"nombre":"Lg078",
"modelo":"LG TV LED 45'",
"valor":800,
"img":"tv2.jpg"
},
{ "id":"1",
"nombre":"P891",
"modelo":"PANASONIC TV PLASMA",
"valor":450,
"img":"tv3.jpg"
},
{ "id":"1",
"nombre":"Sam0987",
"modelo":"SAMSUNG TV LED 52'",
"valor":"1230",
"img":"tv4.jpg"
},
{ "id":"2",
"nombre":"HP213",
"modelo":"HP I3 RAM 2GB DISCO DURO 320GB",
"valor":600,
"img":"lap1.jpg"
},
{ "id":"2",
"nombre":"D234",
"modelo":"DELL CORE 2 DUO RAM 4GB DISCO DURO 1TB",
"valor":750,
"img":"lap2.jpg"
},
{ "id":"3",
"nombre":"MS045",
"modelo":"SALA",
"valor":260,
"img":"m1.jpg"
},
{ "id":"3",
"nombre":"MC987",
"modelo":"COMEDOR",
"valor":530,
"img":"m2.jpg"
},
{ "id":"3",
"nombre":"MCC394",
"modelo":"COMODA",
"valor":300,
"img":"m3.jpg"
}
]
Para realizar la lectura de los archivos crearemos un nuevo archivo .html, denominado SeleccionProducto.html en este programaremos la lectura como se describe a continuación:
->obtenemos la informacion de nuestro archivo, tome en cuenta que debe contener el path completo
var p=0;
$(document).ready(function(){
$.ajax({
url:"Datos/Combo.json",
data:"{}",
datatype:"json",
->Invoco la funcion para la lectura
success: exitoso
});
});
var n=0;
function exitoso(result){
var mitexto ='<h3>Seleccione una categoria</h3>';
mitexto +='<select id="selArticulos" name="articulos">';
mitexto +='<option>Elija un Producto</option>';
for (var i=0; i<result.length; i++){
console.debug(result[i].nombre);
mitexto+='<option value="'+result[i].id+'">'+result[i].nombre+'</option>';
}
->al seleccionar el cmbo debera cargar los productos que tengan el mismo ID
mitexto +='</select >';
console.debug(mitexto);
$('#articulos').append(mitexto);
$('#selArticulos').change(function() {
n=$(this).val();
$(document).ready(function(){
$.ajax({
url:"Datos/productos.json",
data:"{}",
datatype:"json",
success: exitoso2
});
});
});
}
De acuerdo a la opcion selccionada, haremos que se presente el detalle con gráficos en una tabla mediante el siguiente codigo:
function exitoso2(result){
var mitexto = '<FORM ACTION="Detalle" METHOD="POST">';
for (var i=0; i<result.length; i++){
p+=1;
-> formaremos la tabla con los valores que conincida con el id del combo seleccionado
if(n==result[i].id){mitexto += '<table border="1" style="float:left;" >';
mitexto += '<tr><th>';
->incorporación de la libreria bootstrap
mitexto += '<IMG SRC="bootstrap/img/'+result[i].img+'" width=\'250\' height=\'250\' ></th></tr>';
mitexto += '<tr><th>'+result[i].nombre+'</th></tr>';
mitexto += '<tr><td>Modelo:'+result[i].modelo+'</td></tr>';
mitexto += '<tr><td>Valor: $'+result[i].valor+'</td></tr> ';
mitexto +='<tr><td>Comprar <input type="checkbox" name="'+result[i].nombre+'" value="'+result[i].valor+'" ></td></tr>';
}
}
itexto +='</table><brr><br><input title="boton comprar" width=\'150\' height=\'40\' alt=" AGREGAR " src="imagenes/compras2.gif" type="image" /></br></br>';
mitexto +='.</form>';
$('#todos').html(mitexto);
console.debug(mitexto);
}
FASE 6: Presentación en pantalla
La ejecucion de este codigo se presentará de la siguiente manera:
Cargar del Combo de Tipos de Productos
Articulos segun el Tipo de Producto
FASE 7: Gestión de Pre-Compra
Para la administracion de los articulos crearemos un nuevo servlet al que le llamaremos DETALLE, en el cual programaremos lo siguiente.
En el metodo doPost ingresaremos el siguiente codigo para ira agregando los articulos del detalle e enviar para la compra
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {->Definiremos el diseño html para presentar los arcticulos seleccionado
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String docType =
"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " +
"Transitional//EN\">\n";
String title = "Pre-factura";
->Tomamos los productos seleccionados
int ac=0;
Enumeration<String> paramNames = request.getParameterNames();
while(paramNames.hasMoreElements()) {
String paramName = paramNames.nextElement();
String[] paramValues =request.getParameterValues(paramName);
String paramValue = paramValues[0];
if (paramName.equals("x")||paramName.equals("y")) {
}else{
String precio=paramValue.toString();
String nombre=paramName.toString()+ac;
out.print("<br><CENTER><h1>PRODUCTOS SELECCIONADOS</h1></CENTER><br><CENTER><b>CODIGO PRODUCTO:</b> " + nombre + " <b>PRECIO: </b>"+precio+"</CENTER>");
Cookie cookie=new Cookie(nombre,precio);
response.addCookie(cookie);
}
}
->Imprimimos los productos seleccionados a manera de detalle
out.println( "<?xml version = \"1.0\"?>" );
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD" + "XHTML 1.0 Strict//EN\" \"http://www.w3.org" + "/TR/xhtml1/DTD/xhtml1-strict.dtd\">");
out.println( "<head>");
out.println( "<title>PRODCUTOS SELECCIONADOS</title>" );
->Definición de librerias
out.println( " <link href=\"bootstrap/css/bootstrap.css\" rel=\"stylesheet\">");
out.println( " <link href=\"bootstrap/css/bootstrap-responsive.min.css\" rel=\"stylesheet\">");
out.println( " <link rel=\"stylesheet\" href=\"bootstrap/css/estilo.css\" type=\"text/css\"/>");out.println( "</head>" );
out.println("<CENTER><title><h1>AMAZON.COM<h1/></title></CENTER>");
out.println( "<body>" );
out.println("<div class=\"navbar navbar-fixed-top\">");
out.println("<div class=\"navbar-inner\">");
out.println("<h1>Productos Seleccionados</h1>");
out.println("</div>");
out.println("</div>");
out.println( "<center>Que desea realizar</center>" );->Hacemos la llamada al JSP que permite la seleccion de nuevos articulos de productos
out.println("<CENTER><a class=\"btn btn-success\" href=\"SeleccionProducto2.jsp\"
->Botones para regresar al pagina de seleccion de articulos o para comprar los productos seleccionados
INPUT TYPE=\"submit\"> <iclass=\"icon-ok icon-white\"></i> REGRESAR</a>")out.println("<a class=\"btn btn-success\" href=\"Detalle\" INPUT TYPE=\"submit\"> <iclass=\"icon-ok icon-white\"></i>COMPRAR</a></CENTER>");
out.println( "</body>" );
out.println( "</html>" );
}
}
Para tomar los registros de las compras y generar la compra, emitiendo la factura
->metodo doGet
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
->Declaracion de variables
Double sum = 0.0;
Double iva = 0.0;
Double total = 0.0;
response.setContentType( "text/html" );
PrintWriter out = response.getWriter();
out.println( "<?xml version = \"1.0\"?>" );
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD" +"XHTML 1.0 Strict//EN\" \"http://www.w3.org" + "/TR/xhtml1/DTD/xhtml1-strict.dtd\">");
out.println("<html xmlns = \"http://www.w3.org/1999/xhtml\">");
out.println( "<head>");
out.println( "<title>CARRITO DE COMPRAS</title>" );
>Definición de librerias
out.println( " <link href=\"bootstrap/css/bootstrap.css\" rel=\"stylesheet\">");
out.println( " <link rel=\"stylesheet\" href=\"bootstrap/css/estilo.css\" type=\"text/css\"/>");
out.println( "</head>" );
out.println( "<body>" );
Cookie[] cookies = request.getCookies();
-> Diseño de la Tabla
if ( cookies != null && cookies.length != 0 )
{ out.println( "<h1 align=center>FACTURA</h1>" );
out.println( "<p>" );
out.println("<div class=centrar_tabla><table class=tabla_centrada border = \"1\">");
out.println("<tr>");
out.println("<th><b>Descripcion</b></th><th><b>Precio</b></th>");
out.println("</tr>");
out.println("<form ACTION=\"Detalle\">");
for ( int i = 0; i < cookies.length; i++ ){
if (cookies[i].getName().equals("JSESSIONID")||cookies[i].getValue().equals(0)) {
}else{{
out.println("<tr>")
out.println("<td>"+cookies[i].getName()+" </td><td>"+cookies[i].getValue());
out.println("</tr>");
sum = sum + Double.parseDouble(cookies[i].getValue());
}}}
iva=sum*0.12;
total =sum+ + iva;
out.println("</form>");
out.println("<br><td><h3>subtotal</h3></td><td>"+sum+"</td><tr>");
out.println("<br><td><h3>iva</h3></td><td>"+iva+"</td><tr>");
out.println("<td><h3>total</h3></td><td>"+ total+ "</td><tr>");
out.println("</table>");
}
else
{ out.println("<H1>Error </H1>");
out.println("<p>Ud no ha realizado compras</p>");
}
out.println("</body>");
out.println("</html>");
out.close();
}
FASE 8: Ejecuccion de la aplicacion WEB
Para la ejecucion debe hacerlo desde la pagina principal, es decir desde el Index.html, dando clik derecho y seleccionado la opcion Run As como se presenta a continuación:
Tener en cuenta que el servicio del TOMCAT debera estar Detenido. Para detener dicho servicio acceda al programas y en la carpeta de Apache Tomcat 7.0, seleccione la opcion Monitor Tomcat mediante clic derecho y ejecutando como adminstrador y aparecerá la siguiente imagen:
Si no aparece esta imagen debera acceder a ella desde el icono que se presenta en la barra de herramientas como se observa continuación:
