- Bootstrap
- Jquery
- Servlet
- Ajax
- Sesiones
Creacion del usuario.html:
<html lang="es">
<head>
<meta charset="utf-8">
<title>Proyecto Sitemas de Informacion II.</title>
//sirve para comprovar el navegador para desertar errores.
<!—[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">
<style>
body { padding-top: 60px; }
//archivo bootstrap previamente descargado de la pagina oficial
</style>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<div class="container">
<h1>Ingrese sus datos para ingresar al sistema de compras</h1>
<p>Por el momento!!
Usuario=pp, pass=123</p>
</div> <!— /container —>
<div class="tabla">
<form action="login"method="post">
<table>
<tr>
<td>Usuario</td>
<td><input type ="text" name="txtUsuario"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type ="password" name="txtPass"/></td>
</tr>
<tr>
<td colspan="2" >
<button class="btn btn-info" type="submit" value="login">Login</button>
</td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Programacion del servlet login.class
package ups.edu.ec;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Login
*/
@WebServlet("/login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Login() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String user = request.getParameter("txtUsuario");
String pass = request.getParameter("txtPass");
if(logear(user,pass)){
//guardar nombre de usuario en la seccion
request.getSession().setAttribute("username", "Bryan Molina");
//redirecciona la respuesta (response) a otra pagina jsp
response.sendRedirect("menu.jsp");
}else{
String strr="<!DOCTYPE html>"+
"<html lang=\"es\">"+
"<head>"+
" <meta charset=\"utf-8\">"+
"<title>Nuevo proyecto con Bootstrap 2.0</title>"+
"<!—[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\">"+
"<style>"+
"body { padding-top: 60px; }"+
"</style>"+
"<link href=\"bootstrap/css/bootstrap-responsive.min.css\" rel=\"stylesheet\">"+
"</head>"+
"<body>"+
"<div class=\"container\">"+
"<h1>Error de identificacion.</h1>"+
"<p>El usuario "+user+" no esta registrado."+
"<br><a class=\"btn btn-primary\" href=\"usuario.html\">Regresar</a></p>"+
"</div> "+
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></script>"+
"<script src=\"bootstrap/js/bootstrap.min.js\"></script>"+
"</body>"+
"</html>";
PrintWriter out =response.getWriter();
out.print(strr);
}
}
private boolean logear(String u, String p){
if(u.equals("pp")&&p.equals("123"))
return true;
return false;
}
}
Programacion de menu.jsp
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Catalgo.</title>
<!—[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">
<style>
body { padding-top: 60px; }
</style>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Bienvenido usted esta identificado como:
<%
String usuario=(String) session.getAttribute("username");
out.print(usuario);
%></a>
</div>
</div>
</div>
<div id="catalogo"></div>
<div id="desp"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" >
//var usuario=(String) ;
$(document).ready(function(){
// alert("pagina cargada");
// console.debug("pagina cargada");
$.ajax({
type : "POST",
url : "data/catalogo.json",
data : "{}",
dataType : "json",
success : exitoso
});
});
function exitoso(result){
var mi_texto ='<h2>Seleccione la categoria: </h2><br><select id="Productos"><option value=""></option>';
for(var i = 0; i < result.length;i++){
console.debug(result[i].nombre);
//alert(result[i].nombre);
mi_texto += '<option value="' + result[i].id + '">' + result[i].nombre + '</option>';
}
mi_texto += '</select>';
console.debug(mi_texto);
$('#catalogo').html(mi_texto);
$("#Productos").change(function() {
var mivalor = $("#Productos").val();
//alert(mivalor);
if (mivalor==1) {
$.ajax({
type : "POST",
url : "data/tele.json",
data : "{}",
dataType : "json",
success :deste
}); }
else
if (mivalor==2) {
$.ajax({
type : "POST",
url : "data/laptop.json",
data : "{}",
dataType : "json",
success :desla
}); }
else
if (mivalor==3) {
$.ajax({
type : "POST",
url : "data/mueble.json",
data : "{}",
dataType : "json",
success :desmu
}); }
});
}
function deste(result){
var mi_tabla='<FORM id="f1" METHOD=POST ACTION="tele"><h3>Catalogo de televisiones: </h3><br><table border=\"10\" align=\"center\">'+
'<caption align=\"right\" valign=\"top\"><tr>'+
'<tr> <td>Imagen </td><td width="60%">Descripcion </td></tr>';
for(var i = 0; i < result.length;i++){
mi_tabla += '<tr><td><IMG src="img/tele'+i+'.jpeg"></td><td><h3>Codigo: <input name="id'+i+'" type="text" value="'+result[i].id+'" readonly="true" size="2" maxlength="2"></h3>'+
'<h3>Marca: <input name="marca'+i+'" type="text" value="'+result[i].marca+'" readonly="true" readonly="true" size="15" maxlength="15"></h3><h3>Modelo: <input name="modelo'+i+'" type="text" value="'+result[i].modelo+'" readonly="true" size="15" maxlength="15"></h3><h3>Valor: <input name="valor'+i+'" type="text" value="'+result[i].valor+'" readonly="true" size="15" maxlength="15"></h3></td></tr> '+
'<tr><td>Cantidad: <input name="cant'+i+'" type="text" placeholder="ingrese la cantidad" size="2" maxlength="2"></td><td>Comprar: <input name="comp'+i+'" type="checkbox" value="si" ></td></tr> '
}
mi_tabla += '</table><CENTER><button class="btn btn-info" type="submit" value="tele">Guardar.</button></CENTER></FORM>';
console.debug(mi_tabla);
$('#desp').html(mi_tabla);
}
function desla(result){
var mi_tabla='<FORM id="f2" METHOD=POST ACTION="laptop"><h3>Catalogo Laptops: </h3><br><table border=\"10\" align=\"center\">'+
'<caption align=\"right\" valign=\"top\"><tr>'+
'<tr> <td>Imagen </td><td width="60%">Descripcion </td></tr>';
for(var i = 0; i < result.length;i++){
mi_tabla += '<tr><td><IMG src="img/lap'+i+'.jpeg"></td><td><h3>Codigo: <input name="id'+i+'" type="text" value="'+result[i].id+'" readonly="true" size="2" maxlength="2"></h3>'+
'<h3>Marca: <input name="marca'+i+'" type="text" value="'+result[i].marca+'" readonly="true" readonly="true" size="15" maxlength="15"></h3><h3>Modelo: <input name="modelo'+i+'" type="text" value="'+result[i].modelo+'" readonly="true" size="15" maxlength="15"></h3><h3>Valor: <input name="valor'+i+'" type="text" value="'+result[i].valor+'" readonly="true" size="15" maxlength="15"></h3></td></tr> '+
'<tr><td>Cantidad: <input name="cant'+i+'" type="text" placeholder="ingrese la cantidad" size="2" maxlength="2"></td><td>Comprar: <input name="comp'+i+'" type="checkbox" value="si" ></td></tr> '
}
mi_tabla += '</table><CENTER><button class="btn btn-info" type="submit" value="laptop">Guardar.</button></CENTER></FORM>';
console.debug(mi_tabla);
$('#desp').html(mi_tabla);
}
function desmu(result){
var mi_tabla='<FORM id="f3" METHOD=POST ACTION="mueble"><h3>Catalogo de muebles: </h3><br><table border=\"10\" align=\"center\">'+
'<caption align=\"right\" valign=\"top\"><tr>'+
'<tr> <td>Imagen </td><td width="60%">Descripcion </td></tr>';
for(var i = 0; i < result.length;i++){
mi_tabla += '<tr><td><IMG src="img/mue'+i+'.jpeg"></td><td><h3>Codigo: <input name="id'+i+'" type="text" value="'+result[i].id+'" readonly="true" size="2" maxlength="2"></h3>'+
'<h3>Marca: <input name="marca'+i+'" type="text" value="'+result[i].marca+'" readonly="true" readonly="true" size="15" maxlength="15"></h3><h3>Modelo: <input name="modelo'+i+'" type="text" value="'+result[i].modelo+'" readonly="true" size="15" maxlength="15"></h3><h3>Valor: <input name="valor'+i+'" type="text" value="'+result[i].valor+'" readonly="true" size="15" maxlength="15"></h3></td></tr> '+
'<tr><td>Cantidad: <input name="cant'+i+'" type="text" placeholder="ingrese la cantidad" size="2" maxlength="2"></td><td>Comprar: <input name="comp'+i+'" type="checkbox" value="si" ></td></tr> '
}
mi_tabla += '</table><CENTER><button class="btn btn-info" type="submit" value="mueble">Guardar.</button></CENTER></FORM>';
console.debug(mi_tabla);
$('#desp').html(mi_tabla);
}
</script>
</body>
</html>
Programacion servlet de compra
laptop.class
package ups.edu.ec;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/laptop")
public class laptop extends HttpServlet {
private static final long serialVersionUID = 1L;
String verifica="<!DOCTYPE html>"+
"<html lang=\"es\">"+
"<head>"+
" <meta charset=\"utf-8\">"+
"<title>Nuevo proyecto con Bootstrap 2.0</title>"+
"<!—[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\">"+
"<style>"+
"body { padding-top: 60px; }"+
"</style>"+
"<link href=\"bootstrap/css/bootstrap-responsive.min.css\" rel=\"stylesheet\">"+
"</head>"+
"<body>"+
"<div class=\"navbar navbar-fixed-top\">"+
"<div class=\"navbar-inner\">"+
"<div class=\"container\">"+
"<a class=\"brand\" href=\"#\">Compra a nombre de Bryan Molina: "+
"</a>"+
"</div>"+
"</div>"+
"</div>"+
"<h3>Verificacion de compra de laptops: </h3><br><table class=\"table table-striped\" width=\"50%\" border=\"4\" align=\"center\">" +
"<caption align=\"right\" valign=\"top\"><tr>" +
"<tr><td>cantidad</td><td>Descripcion</td><td>valor</td></tr>";
public laptop() {
super();
// TODO Auto-generated constructor stub
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String comp0=request.getParameter("comp0");
if (comp0 !=null){
int c = Integer.parseInt(request.getParameter("cant0"));
int v= Integer.parseInt(request.getParameter("valor0"));
int total=c*v;
verifica += "<tr><td>"+request.getParameter("cant0")+"</td><td>"+request.getParameter("modelo0")+"</td><td>"+total+"</td></tr>";
// out.print(verifica);
}
String comp1=request.getParameter("comp1");
if (comp1 !=null){
int c = Integer.parseInt(request.getParameter("cant1"));
int v= Integer.parseInt(request.getParameter("valor1"));
int total=c*v;
verifica += "<tr><td>"+request.getParameter("cant1")+"</td><td>"+request.getParameter("modelo1")+"</td><td>"+total+"</td></tr>";
//out.print(verifica);
}
String comp2=request.getParameter("comp2");
if (comp2 !=null){
int c = Integer.parseInt(request.getParameter("cant2"));
int v= Integer.parseInt(request.getParameter("valor2"));
int total=c*v;
verifica += "<tr><td>"+request.getParameter("cant2")+"</td><td>"+request.getParameter("modelo2")+"</td><td>"+total+"</td></tr>";
//out.print(verifica);
}
String comp3=request.getParameter("comp3");
if (comp3 !=null){
int c = Integer.parseInt(request.getParameter("cant3"));
int v= Integer.parseInt(request.getParameter("valor3"));
int total=c*v;
verifica += "<tr><td>"+request.getParameter("cant3")+"</td><td>"+request.getParameter("modelo3")+"</td><td>"+total+"</td></tr>";
}
verifica +="</table>" +
"<br><a class=\"btn btn-primary\" href=\"menu.jsp\">Regresar a menu</a></p>"+
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></script>"+
"<script src=\"bootstrap/js/bootstrap.min.js\"></script>"+
"</body>"+
"</html>";
out.print(verifica);
}
}
