Scribd
Cargar
76 vistas

GUIA DE APRENDIZAJE 01 - Proyecto Java Web

Este documento proporciona una guía en 3 videos para crear un sistema de información web con backend en Java. El video 1 cubre la instalación de software necesario como Netbeans y Glassfish. El video 2 explica cómo crear una base de datos, diseñar una pantalla de login usando MVC y vincular la librería MySQL. El video 3 detalla la autenticación del usuario con clases Usuario y UsuarioDAO para validar las credenciales en el servlet Validar.

Cargado por

sonaya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
76 vistas

GUIA DE APRENDIZAJE 01 - Proyecto Java Web

Este documento proporciona una guía en 3 videos para crear un sistema de información web con backend en Java. El video 1 cubre la instalación de software necesario como Netbeans y Glassfish. El video 2 explica cómo crear una base de datos, diseñar una pantalla de login usando MVC y vincular la librería MySQL. El video 3 detalla la autenticación del usuario con clases Usuario y UsuarioDAO para validar las credenciales en el servlet Validar.

Cargado por

sonaya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

GUIA DE APRENDIZAJE 01

SISTEMA DE INFORMACION WEB JAVA

A continuación, se describen una serie de pasos para crear un sistema de información web cuyo backend se
desarrolla en el lenguaje Java.

Video 1. Software necesario, instalación de Glasfish y creación del nuevo proyecto java web

Primero debemos descargar e instalar el Entorno de desarrollo Netbeans en su versión 12

Luego debemos descargar Glassfish y configurar el servidor para trabajar con NetBeans

Se descarga del sitio oficial https://javaee.github.io/glassfish/download y se va a la pestaña servicios, se selecciona la


opción servers clic derecho add server, se selecciona Glassfgish y se asigna la ruta de la carpeta descomprimida del
Glassfish que hemos descargado.

Nota: deben trabajar con JDK 1.8

Video 2. Creación de la base de datos, Diseño de la pantalla de login, estructura patron MVC, vincular librería
MySQL Conector

1. Se crea la base de datos


2. crear proyecto: New Project – Java Web – web Application
3. Reemplazar index.html por index.jsp
4. Se realiza el diseño de la ventana de login en index.jsp
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/
bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<div class="container center-block" >
<div class="row justify-content-center">
<div class="card" style="width: 18rem;">
<img src="logo.png" class="card-img-top" alt="...">
<div class="card-body">
<form method="POST" action="Validar">
<div class="form-group">
<label>No de Documento</label>
<input type="text" class="form-control" name="txtusuario">
<small id="emailHelp" class="form-text text-muted">Ingrese su documento sin
espacios ni puntos</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Contraseña</label>
<input type="password" class="form-
control" id="exampleInputPassword1" name="txtpassword">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Permanecer
loggeado</label>
</div>
<button type="submit" class="btn btn-
primary" name="accion" value="Ingresar">Ingresar</button>
</form>
</div>
</div>
</div>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/
popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" cr
ossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/
bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

Se debe garantizar que en el form se incluyan las propiedades action="Validar" method="post"

5. crear paquete controlador, modelo y config


6. Crear el servlet Controlador y el servlet Validar en el paquete controlador
7. Agregar la librería mysql connector clic derecho sobre libraries seleccionar ADD JAR y buscar la ubicación de
la libreria
8. Crear una clase conexión en el paquete config
9. Crear el método conexión que retorne un objeto de tipo Connection

public class Conexion {

Connection con;
String url="jdbc:mysql://localhost:3306/mibdventas";
String usuario = "root";
String clave = "";

public Connection Conexion(){

try {
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection(url,usuario,clave);
} catch (ClassNotFoundException ex) {
Logger.getLogger(Conexion.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
Logger.getLogger(Conexion.class.getName()).log(Level.SEVERE, null, ex);
}
return con;
}
}

Video 3. Sistema de autenticación con Java Web

1. Se crea la clase Usuario y UsuarioDAO


La clase empleado debe tener todas las variables de los elementos de la tabla empleado, con un constructor
vacío, un constructor con todos los elementos y los respectivos métodos get y set
public class Usuario {

int id;
int documento;
String nombre, correo, estado, password, rol;

public Usuario() {
}

public String getRol() {


return rol;
}

public void setRol(String rol) {


this.rol = rol;
}

public Usuario(int id, int documento, String nombre, String correo, String estado, String
password, String rol) {
this.id = id;
this.documento = documento;
this.nombre = nombre;
this.correo = correo;
this.estado = estado;
this.password = password;
this.rol = rol;
}

public int getId() {


return id;
}

public void setId(int id) {


this.id = id;
}

public int getDocumento() {


return documento;
}

public void setDocumento(int documento) {


this.documento = documento;
}

public String getNombre() {


return nombre;
}

public void setNombre(String nombre) {


this.nombre = nombre;
}

public String getCorreo() {


return correo;
}

public void setCorreo(String correo) {


this.correo = correo;
}

public String getEstado() {


return estado;
}

public void setEstado(String estado) {


this.estado = estado;
}

public String getPassword() {


return password;
}

public void setPassword(String password) {


this.password = password;
}
}

Archivo UsuarioDAO

public class UsuarioDAO {

Connection con;
PreparedStatement ps;
ResultSet rs;
Conexion cn = new Conexion();

public Usuario Validar(int documento, String password) {


Usuario usuario = new Usuario();
String consulta = "SELECT * FROM usuarios WHERE documento = ? AND password = ?";
con = cn.Conexion();
try {
ps = con.prepareStatement(consulta);
ps.setInt(1, documento);
ps.setString(2, password);
rs = ps.executeQuery();
rs.next();
do {
usuario.setId(rs.getInt("id"));
usuario.setDocumento(rs.getInt("documento"));
usuario.setNombre(rs.getString("nombre"));
usuario.setPassword(rs.getString("password"));
usuario.setCorreo(rs.getString("correo"));
usuario.setEstado(rs.getString("estado"));
usuario.setRol(rs.getString("rol"));
} while (rs.next());
} catch (SQLException ex) {
Logger.getLogger(UsuarioDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return usuario;

}
}

2. En el servlet Validar se captura los datos del formulario, esto lo hacemos en el método post
En el comienzo de la clase agregar los objetos usuario y usuarioDAO

Usuario usuario = new Usuario();


UsuarioDAO usuarioDAO = new UsuarioDAO();

Y en el método Do Post agregar el siguiente código

String accion = request.getParameter("accion");


if (accion.equalsIgnoreCase("Ingresar")) {
int documento = Integer.parseInt(request.getParameter("txtusuario"));
String pass = request.getParameter("txtpassword");
usuario = usuarioDAO.Validar(documento, pass);
if (usuario.getNombre() != null) {
request.setAttribute("usuario", usuario);
request.getRequestDispatcher("Controlador?menu=Principal").forward(request, response);
} else {
request.getRequestDispatcher("index.jsp").forward(request, response);
}

}else{
request.getRequestDispatcher("index.jsp").forward(request, response);
}

3. Se configura el servlet controlador para que redireccione a la página principal

String menu = request.getParameter("menu");

if(menu.equals("Principal")){
request.getRequestDispatcher("Principal.jsp").forward(request, response);
}

Video 4. Como configurar la vista principal del sistema

1. Agregar un navbar de Bootstrap incluir las opciones, home, producto, empleado, clientes, venta y un
dropdown para el nombre de usuario.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">


<a class="navbar-brand" href="#">Sistema de ventas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link">Empleados</a>
</li>
<li class="nav-item">
<a class="nav-link">Clientes</a>
</li>
<li class="nav-item">
<a class="nav-link">Ventas</a>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Nombre de usuario
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fas fa-user"></i></a>
<a class="dropdown-item" href="#">Documento</a>
<a class="dropdown-item" href="#">[email protected]</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" method="POST" action="Validar">
<button class="btn btn-danger center-block" type="submit"
name="accion" value="Salir">Cerrar Sesion</button>
</form>
</div>
</div>
</div>
</nav>

<div class="m-3" style="height:900px;">


<iframe name="miContenedor" style="height:100%; width:100%;"
frameBorder="1"></iframe>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

1. Se crea un archivo .jsp para cada vista

2. En el servlet validar se envían los datos del usuario a la vista


Usando la siguiente línea

request.setAttribute("usuario", usuario);

3. En principal.jsp se reemplazan los datos por

${usuario.getNom()}
${usuario.getUser()}
${usuario.getCorreo()}

4. Se modifica la opción salir del dropdown por un botón en un form con action =”Validar” y
method=”POST” y se agrega un botón con name=”accion” y value = “salir”
5. Se crea un iframe o contenedro después de la etiqueta de cierre nav

6. Se modifica el href de los enlaces del nav para que redireccione a controlador
<a class="nav-link" href="Controlador?menu=Ventas" target="miContenedor">Ventas </a>

7. Se modifica el controlador para que redireccione a las paginas según la opción seleccionada agragando
los casos respectivos

String accion = request.getParameter("accion");

String menu = request.getParameter("menu");

if(menu.equals("Principal")){
request.getRequestDispatcher("Principal.jsp").forward(request, response);
}
if(menu.equals("Productos")){
request.getRequestDispatcher("Productos.jsp").forward(request, response);
}
if(menu.equals("Empleados")){
request.getRequestDispatcher("Empleados.jsp").forward(request, response);
}
if(menu.equals("Clientes")){
request.getRequestDispatcher("Clientes.jsp").forward(request, response);
}
if(menu.equals("Ventas")){
request.getRequestDispatcher("Ventas.jsp").forward(request, response);
}

8. El archivo Principal.jsp al final quedaría así:


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">


<a class="navbar-brand" href="#">Sistema de ventas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Controlador?menu=Productos"
target="miContenedor">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Controlador?menu=Empleados"
target="miContenedor">Empleados</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Controlador?menu=Clientes"
target="miContenedor">Clientes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Controlador?menu=Ventas"
target="miContenedor">Ventas</a>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${usuario.getNombre()}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fas fa-user"></i></a>
<a class="dropdown-item" href="#">${usuario.getDocumento()}</a>
<a class="dropdown-item" href="#">${usuario.getCorreo()}</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" method="POST" action="Validar">
<button class="btn btn-danger center-block" type="submit" name="accion"
value="Salir">Cerrar Sesion</button>
</form>
</div>
</div>
</div>
</nav>

<div class="m-3" style="height:900px;">


<iframe name="miContenedor" style="height:100%; width:100%;" frameBorder="1"></iframe>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

Video 5: Creación de interfaz de módulo de administración de usuarios

1. Creamos el formulario con los datos requeridos por la tabla


2. Se crea la tabla de visualización de datos
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="card col-md-4">
<div class="card-body">
<h5 class="card-title">Empleados</h5>
<h6 class="card-subtitle mb-2 text-muted">En este panel podras gestionar los
datos de los usuarios empleados del sistema</h6>
<div>
<form action="Controlador?menu=Empleados" method="POST">
<div class="form-group">
<label>Documento</label>
<input type="number" class="form-control" name="txtdocumento">
<small class="form-text text-muted">Ingrese El No de documento sin
espacios ni caracteres especiales</small>
</div>
<div class="form-group">
<label>Nombre</label>
<input type="text" class="form-control" name="txtnombre"">
</div>
<div class="form-group">
<label>Correo</label>
<input type="text" class="form-control" name="txtcorreo">
</div>
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" name="txtpassword">
</div>
<div class="form-group">
<label>Rol</label>
<select class="form-control form-control-sm" name="txtrol">
<option>Empleado</option>
<option>Cliente</option>
</select>
</div>
<div class="form-group">
<label>Estado</label>
<select class="form-control form-control-sm" name="txtestado">
<option>Activo</option>
<option>Inactivo</option>
</select>
</div>

<input type="submit" class="btn btn-primary" name="accion"


value="Agregar" >
<input type="submit" class="btn btn-success" name="accion"
value="Actualizar" >
</form>
</div>
</div>
</div>

<div class="col-md-8">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">id</th>
<th scope="col">Documento</th>
<th scope="col">Nombres</th>
<th scope="col">Correo</th>
<th scope="col">Contraseña</th>
<th scope="col">Rol</th>
<th scope="col">Estado</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

3. Agregamos un switch case en la opción empleado para determinar las acciones de cada botón

if (menu.equals("Empleados")) {
switch (accion) {
case "listar":
break;
case "agregar":
break;
case "actualizar":
break;
case "eliminar":
break;
}
request.getRequestDispatcher("Empleados.jsp").forward(request, response);
}

4. En la clase usuarioDAO agregamos los métodos respectivos para el CRUD en este caso el método Listar
public List Listar() {
String consulta = "SELECT * FROM usuarios";
List<Usuario> lista = new ArrayList();

try {
con = cn.Conexion();
ps = con.prepareStatement(consulta);
rs = ps.executeQuery();
while (rs.next()) {
Usuario usuario = new Usuario();
usuario.setId(rs.getInt("id"));
usuario.setDocumento(rs.getInt("documento"));
usuario.setNombre(rs.getString("nombre"));
usuario.setCorreo(rs.getString("correo"));
usuario.setPassword(rs.getString("password"));
usuario.setEstado(rs.getString("estado"));
usuario.setRol(rs.getString("rol"));
lista.add(usuario);

}
} catch (SQLException ex) {
Logger.getLogger(UsuarioDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return lista;

5. En la clase controlador se crean objetos del tipo Usuario y UsuarioDAO

Usuario usuario = new Usuario();


UsuarioDAO usuarioDAO = new UsuarioDAO();

6. En la opción listar se crea una lista y se ejecuta la función listar de usuarioDAO y se envían los datos a la vista

case "listar":
List lista = usuarioDAO.Listar();
request.setAttribute("usuarios", lista);

break;

7. En empleados.JSP se hace un foreach en la tabla

<tbody>
<c:forEach var="usuario" items="${usuarios}">
<tr>
<th scope="row">${usuario.getId()}</th>
<td>${usuario.getDocumento()}</td>
<td>${usuario.getNombre()}</td>
<td>${usuario.getCorreo()}</td>
<td>${usuario.getPassword()}</td>
<td>${usuario.getRol()}</td>
<td>${usuario.getEstado()}</td>
<td><a>Editar</a><a>Eliminar</a></td>
</tr>
</c:forEach>

</tbody>

8. Agregamos la acción al enlace en principal jsp


<a class="nav-link" href="Controlador?menu=Empleados&accion=listar" target="miContenedor">Empleados</a>

Video 6: Insertar nuevo usuario, actualizar y eliminar

1. En el modelo, en el archivo usuarioDAO agregamos el método para agregar un nuevo usuario

public int Agregar(Usuario usuario) {

String sentencia = "INSERT INTO usuarios (documento,nombre,correo,password,rol,estado) VALUES


(?,?,?,?,?,?)";
try {
con = cn.Conexion();
ps = con.prepareStatement(sentencia);
ps.setInt(1, usuario.getDocumento());
ps.setString(2, usuario.getNombre());
ps.setString(3, usuario.getCorreo());
ps.setString(4, usuario.getPassword());
ps.setString(5, usuario.getRol());
ps.setString(6, usuario.getEstado());
ps.executeUpdate();
} catch (SQLException ex) {
Logger.getLogger(UsuarioDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return r;
}

2. En el controlador en el case Agrega capturamos los datos de cada uno de los elementos del formulario y los
enviamos a la función Agregar de la clase usuarioDAO, antes nos aseguramos que en el formulario tenga los
siguientes atributos

<form action="Controlador?menu=Empleados" method="POST">

case "Agregar":
int documento = Integer.parseInt(request.getParameter("txtdocumento"));
String nombre = request.getParameter("txtnombre");
String correo = request.getParameter("txtcorreo");
String password = request.getParameter("txtpassword");
String rol = request.getParameter("txtrol");
String estado = request.getParameter("txtestado");
usuario.setDocumento(documento);
usuario.setNombre(nombre);
usuario.setPassword(password);
usuario.setCorreo(correo);
usuario.setRol(rol);
usuario.setEstado(estado);
usuarioDAO.Agregar(usuario);
request.getRequestDispatcher("Controlador?
menu=Empleados&accion=Listar").forward(request, response);
break;

3. En modelos, UsuarioDAO se agrega la función listar por ID y la función Actualizar


public Usuario ListarPorId(int id){
Usuario usuario = new Usuario();
String consulta = "SELECT * FROM usuarios WHERE id="+id;
con = cn.Conexion();
try {
ps = con.prepareStatement(consulta);
rs = ps.executeQuery();
while(rs.next()){
usuario.setDocumento(rs.getInt(2));
usuario.setNombre(rs.getString(3));
usuario.setCorreo(rs.getString(4));
usuario.setPassword(rs.getString(5));
usuario.setRol(rs.getString(6));
usuario.setEstado(rs.getString(7));
}
} catch (SQLException ex) {
Logger.getLogger(UsuarioDAO.class.getName()).log(Level.SEVERE, null, ex);
}

return usuario;

public int Actualizar(Usuario usuario) {


String sentencia = "UPDATE usuarios set documento=?,nombre=?,correo=?,password=?,Rol=?,estado=?
WHERE id=?";
try {
con = cn.Conexion();
ps = con.prepareStatement(sentencia);
ps.setInt(1, usuario.getDocumento());
ps.setString(2, usuario.getNombre());
ps.setString(3, usuario.getCorreo());
ps.setString(4, usuario.getPassword());
ps.setString(5, usuario.getRol());
ps.setString(6, usuario.getEstado());
ps.setInt(7, usuario.getId());
ps.executeUpdate();

} catch (SQLException ex) {


Logger.getLogger(UsuarioDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return r;
}

4. Para editar un registro editamos los botones de editar y eliminar, referenciando el controlador, la acción y el
id según el registro seleccionado y el botón presionado

<td>
<a class="btn btn-warning" href="Controlador?menu=Empleados&accion=Cargar&id=$
{usuario.getId()}">Editar</a>
<a class="btn btn-danger" href="Controlador?menu=Empleados&accion=Eliminar&id=$
{usuario.getId()}">Eliminar</a>
</td>

5. Capturamos el id en el caso Cargar del controlador y se ejecuta la función listarporId de usuarioDAO y


enviamos el resultado de la consulta a la vista y cargamos de nuevo la lista de usuarios

case "Cargar":
idUsuario = Integer.parseInt(request.getParameter("id"));
Usuario usuario = usuarioDAO.ListarPorId(idUsuario);
request.setAttribute("usuarioSeleccionado", usuario);
request.getRequestDispatcher("Controlador?menu=Empleados&accion=Listar").forward(request, response);
break;

6. Agregamos la opción value a cada uno de los inputs del formulario de registro

<form action="Controlador?menu=Empleados" method="POST">


<div class="form-group">
<label>Documento</label>
<input type="number" class="form-control" name="txtdocumento" value="${usuarioSeleccionado.getDocumento()}">
<small class="form-text text-muted">Ingrese El No de documento sin espacios ni caracteres especiales</small>
</div>
<div class="form-group">
<label>Nombre</label>
<input type="text" class="form-control" name="txtnombre" value="${usuarioSeleccionado.getNombre()}">
</div>
<div class="form-group">
<label>Correo</label>
<input type="text" class="form-control" name="txtcorreo" value="${usuarioSeleccionado.getCorreo()}">
</div>
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" name="txtpassword" value="${usuarioSeleccionado.getPassword()}">
</div>
<div class="form-group">
<label>Rol</label>
<select class="form-control form-control-sm" name="txtrol" value="${usuarioSeleccionado.getRol()}">
<option>Empleado</option>
<option>Cliente</option>
</select>
</div>
<div class="form-group">
<label>Estado</label>
<select class="form-control form-control-sm" name="txtestado" value="${usuarioSeleccionado.getEstado()}">
<option>Activo</option>
<option>Inactivo</option>
</select>
</div>
<input type="submit" class="btn btn-primary" name="accion" value="Agregar" >
<input type="submit" class="btn btn-success" name="accion" value="Actualizar" >
</form>

7. Se crea un nuevo botón actualizar


<input type="submit" class="btn btn-success" name="accion" value="Actualizar" >

8. En el caso actualizar se captura el id y se crea un nuevo objeto usuario con los datos modificados, y se carga
la función actualizar de la clase UsuarioDAO y se vuelve a listar la tabla

case "Actualizar":
Usuario usuario1 = new Usuario();
int documentoUpdate = Integer.parseInt(request.getParameter("txtdocumento"));
String nombreUpdate = request.getParameter("txtnombre");
String correoUpdate = request.getParameter("txtcorreo");
String passwordUpdate = request.getParameter("txtpassword");
String rolUpdate = request.getParameter("txtrol");
String estadoUpdate = request.getParameter("txtestado");
usuario1.setDocumento(documentoUpdate);
usuario1.setNombre(nombreUpdate);
usuario1.setPassword(passwordUpdate);
usuario1.setCorreo(correoUpdate);
usuario1.setRol(rolUpdate);
usuario1.setEstado(estadoUpdate);
usuario1.setId(idUsuario);
usuarioDAO.Actualizar(usuario1);
request.getRequestDispatcher("Controlador?menu=Empleados&accion=Listar").forward(request, response);
break;

9. En el case eliminar en empleado Dao se ejecuta el método Eliminar de UsuarioDAO

case "Eliminar":
idUsuario = Integer.parseInt(request.getParameter("id"));
usuarioDAO.Eliminar(idUsuario);
request.getRequestDispatcher("Controlador?menu=Empleados&accion=Listar").forward(request, response);

break;

Video 7. Modulo de ventas, agregar productos, registrar venta e imprimir factura

1. Se realiza la interfaz de usuario en el archivo ventas.jsp, un formulario para consulta de cliente y producto y
una tabla para ver productos agregados

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<title>Sistema de ventas</title>
<style>
@media print{
.seccion1, .btn, .columna{
display:none;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-5 seccion1">
<div class="card">
<h5 class="card-header">Datos cliente</h5>
<div class="card-body">
<form method="post" action="Controlador?menu=Ventas">
<div class="row">
<div class="col-md-4 d-flex">
<input type="number" name="documentocliente" class="form-control"
placeholder="documento cliente">
<input type="submit" name="accion" value="BuscarCliente"
class="btn btn-outline-dark">
</div>
<div class="col-md-8 d-flex">
<input type="text" name="nombrecliente" class="form-control"
placeholder="Nombre cliente">
</div>
</div>
<div class="row"></div>

</form>
</div>
</div>
<div class="card">
<h5 class="card-header">Datos producto</h5>
<div class="card-body">
<form action="Controlador?menu=Ventas" method="post">
<div class="row">
<div class="col-md-4 d-flex form-group">
<input type="number" name="codigoproducto" class="form-control"
placeholder="Codigo Producto">
<input type="submit" name="accion" value="BuscarProducto"
class="btn btn-outline-dark">
</div>
<div class="col-md-8 d-flex form-group">
<input type="text" name="nombreproducto" class="form-control"
placeholder="Nombre Producto">
</div>
<div class="col-md-4 d-flex form-group">
<input type="text" name="precioproducto" class="form-control"
placeholder="$ 0000.00">
</div>
<div class="col-md-8 d-flex form-group">
<input type="number" value="1" name="cantidadproducto"
class="form-control" placeholder="Cantidad">
</div>
</div>
<input type="submit" name="accion" value="AgregarProducto" class="btn
btn-outline-primary col text-center">
<div class="row"></div>

</form>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card">
<div class="card-header">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Numero de factura</label>
<input class="form-control col-md-4" type="text" name="txtnumerofactura">
</div>

</div>
<div class="card-body">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Codigo</th>
<th scope="col">Producto</th>
<th scope="col">Precio</th>
<th scope="col">Cantidad</th>
<th scope="col">Total</th>
<th scope="col" class="columna">Acciones</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<div class="card-footer d-flex">
<div class="col-md-8 text-center">
<a class="btn btn-success" onclick="print()" href="Controlador?
menu=Ventas&accion=GenerarVenta">Generar Venta</a>
<a class="btn btn-danger" href="Controlador?
menu=Ventas&accion=NuevaVenta">Nueva Venta</a>

</div>
<div class="col-md-4">
<input type=text" name="txttotalapagar" class="form-control"
placeholder="$ 00.000.00" disabled="disabled">
</div>
</div>

</div>

</div>
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

<!-- Option 2: jQuery, Popper.js, and Bootstrap JS


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
-->
</body>
</html>

2. En usuarioDAO se crea el método BuscarCliente

public Usuario BuscarCliente(int documento){


Usuario usuario = new Usuario();
String consulta = "SELECT * FROM usuarios WHERE documento = ?";
con = cn.Conexion();
try {
ps = con.prepareStatement(consulta);
ps.setInt(1, documento);
rs = ps.executeQuery();
while(rs.next()){
usuario.setId(rs.getInt("id"));
usuario.setDocumento(rs.getInt("documento"));
usuario.setNombre(rs.getString("nombre"));
usuario.setCorreo(rs.getString("correo"));
usuario.setRol(rs.getString("rol"));
System.err.println(""+usuario.getNombre());
}
} catch (Exception e) {
}
return usuario;
}

3. En el archivo controlador en el case BuscarCLiente, se ejecuta el método Buscarcliente de usuarioDAO y se


envían los parámetros a la vista

case "BuscarCliente":
int documentoCliente =
Integer.parseInt(request.getParameter("documentocliente"));
usuario = usuarioDAO.BuscarCliente(documentoCliente);
request.setAttribute("cliente", usuario);
break;

4. En la vista en la propiedad value se coloca el nombre del cliente y el id del cliente


<input type="text" name="nombrecliente" class="form-control" placeholder="Nombre cliente" value="$
{cliente.getNombre()}">

<input type="number" name="documentocliente" class="form-control" placeholder="documento cliente"


value="${cliente.getDocumento()}">

5. Creamos el método ConsultaPorCodigo en productosDAO


public Producto ConsultaPorCodigo(int codigoProducto) {
Producto producto = new Producto();
con = cn.Conexion();
String consulta = "SELECT * FROM productos WHERE id = " + codigoProducto;

try {
ps = con.prepareStatement(consulta);
rs = ps.executeQuery();
while(rs.next()){
producto.setCodigo(rs.getInt("id"));
producto.setNombreProducto(rs.getString("nombreproducto"));
producto.setDescripcion(rs.getString("descripcionproducto"));
producto.setUnidad(rs.getString("unidad"));
producto.setPrecio(rs.getString("precio"));

}
} catch (SQLException ex) {
Logger.getLogger(ProductoDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return producto;
}

6. Para cargar el producto se debe en controlador en el case buscarproducto capturar el código del producto y
realizar la función consultarporcodigo con el respectivo método en productoDAO, y posteriormente se
envían los parámetros a la vista
case "BuscarProducto":
System.err.print("Ingreso");
int codigoProducto = Integer.parseInt(request.getParameter("codigoproducto"));
producto = productoDAO.ConsultaPorCodigo(codigoProducto);
System.out.print("" + producto.getNombreProducto());
request.setAttribute("productoseleccionado", producto);

break;

7. Se actualizan los value del formulario de manera que se vea el nombre del producto, el código y el valor

<div class="col-md-4 d-flex form-group">


<input type="number" name="codigoproducto" class="form-control"
placeholder="Codigo Producto" value="${productoseleccionado.getCodigo()}">
<input type="submit" name="accion" value="BuscarProducto"
class="btn btn-outline-dark">
</div>
<div class="col-md-8 d-flex form-group">
<input type="text" name="nombreproducto" class="form-control"
placeholder="Nombre Producto" value="${productoseleccionado.getNombreProducto()}">
</div>
<div class="col-md-4 d-flex form-group">
<input type="text" name="precioproducto" class="form-control"
placeholder="$ 0000.00" value="${productoseleccionado.getPrecio()}">
</div>

8. Se crea la clase ventas con todas las variables de la venta, se crea un constructor vacio y un constructor con
todos los elementos, se crean los métodos get y set

9. En controlador en el case AgregarProducto se capturan todos los datos del formulario y se agregan a un
objeto de tipo ventas y se agregan a un objeto List<Ventas> Nota: declarar las variables al inicio de la clase,
se calcula el subtotal y se envían los parametros

case "AgregarProducto":
totalapagar = 0;
venta = new Venta();
item++;
codProducto = Integer.parseInt(request.getParameter("codigoproducto"));
descripcion = request.getParameter("nombreproducto");
precio = Integer.parseInt(request.getParameter("precioproducto"));
cantidad = Integer.parseInt(request.getParameter("cantidadproducto"));
subtotal = precio * cantidad;
venta.setItem(item);
venta.setDescripcionProducto(descripcion);
venta.setCantidad(cantidad);
venta.setPrecio(precio);
venta.setSubtotal(subtotal);
venta.setIdProducto(codProducto);
listaVentas.add(venta);
request.setAttribute("listaventas", listaVentas);
for (int i = 0; i < listaVentas.size(); i++) {
totalapagar += listaVentas.get(i).getSubtotal();
}
NumberFormat formatoNumero1 = NumberFormat.getNumberInstance();
String total1 = formatoNumero1.format(totalapagar);
request.setAttribute("totalapagar", total1);
break;

10. Hacemos un foreach para visualizar los elementos

<c:forEach var="lista" items="${listaventas}">


<tr>
<th scope="row" style="width: 30px;">${lista.getItem()}</th>
<td style="width: 30px;">${lista.getIdProducto()}</td>
<td style="width: 350px;">${lista.getDescripcionProducto()}</td>
<td>$ ${lista.getPrecio()}</td>
<td style="width: 30px;">${lista.getCantidad()}</td>
<td>$ ${lista.getSubtotal()}</td>
<td class="columna">
<a class="btn btn-danger">Eliminar</a>
<a class="btn btn-warning">Editar</a>
</td>
</tr>
</c:forEach>

Video 8. Generar número de factura, registrar venta e imprimir factura

Para generar el número de factura se crea el modelo VentaDAO y allí se crea el método o la función
ObtenerNumeroDeFactura

public String ObtenerNumeroDeFactura() {


String numerodefactura ="";
String consulta = "SELECT MAX(numerofactura) FROM ventas";
con = cn.Conexion();

try {
ps = con.prepareStatement(consulta);
rs = ps.executeQuery();
while (rs.next()) {
numerodefactura = rs.getString(1);
System.err.println("numfac"+numerodefactura);
}
} catch (SQLException ex) {
Logger.getLogger(VentaDAO.class.getName()).log(Level.SEVERE, null, ex);
}

return numerodefactura;

En el controlador en el case default de la opción ventas hacemos lo siguiente

default:

String factura = ventaDAO.ObtenerNumeroDeFactura();


System.err.println("nume factura" + factura);
if (factura == null) {
factura = "1";
} else {
numfac = Integer.parseInt(factura) + 1;
}

request.setAttribute("numerofactura", numfac);

En ventas.jsp agregamos el value a el input de numero de factura

<input class="form-control col-md-4" type="text" name="txtnumerofactura" value="$


{numerofactura}">

Para generar la venta en ventaDAO se crea un método para obtener el máximo idVentas y el método para guardar
venta y el método guardar detalle ventas.

public int ObtenerMaximoIdVentas(){


int idVenta=0;
String consulta = "SELECT MAX(idVenta) FROM ventas";
con = cn.Conexion();
try {
ps = con.prepareStatement(consulta);
rs = ps.executeQuery();
while (rs.next()) {
idVenta=rs.getInt(1);
System.out.println("max"+idVenta);
}
} catch (SQLException ex) {
Logger.getLogger(VentaDAO.class.getName()).log(Level.SEVERE, null, ex);
}

return idVenta;
}
public void RegistrarVenta(Venta venta){
String sentencia = "INSERT INTO ventas
(idclienteventa,idempleadoventa,numerofactura,fechaventa,totalventa,estado)
VALUES(?,?,?,?,?,?)";
con = cn.Conexion();
try {
ps = con.prepareStatement(sentencia);
ps.setInt(1,venta.getIdCliente());
ps.setInt(2, venta.getIdEmpleado());
ps.setString(3, venta.getNumeroComprobante());
ps.setString(4, venta.getFecha());
ps.setDouble(5, venta.getMonto());
ps.setString(6, venta.getEstado());
ps.executeUpdate();

} catch (SQLException ex) {


Logger.getLogger(VentaDAO.class.getName()).log(Level.SEVERE, null, ex);
}

public void GuardarDetalleVenta(Venta venta){


String sentencia = "INSERT INTO detalleventa
(idventa,idproducto,cantidadproducto,precioventa) VALUES(?,?,?,?)";
con = cn.Conexion();
try {
ps = con.prepareStatement(sentencia);
ps.setInt(1,venta.getIdVenta());
ps.setInt(2, venta.getIdProducto());
ps.setInt(3, venta.getCantidad());
ps.setDouble(4, venta.getPrecio());

ps.executeUpdate();

} catch (SQLException ex) {


Logger.getLogger(VentaDAO.class.getName()).log(Level.SEVERE, null, ex);
}
}

En en el controlador en el caso GuardarVenta se envían a guardar la venta y el detalleventa de la siguiente manera

case "GenerarVenta":
venta.setIdCliente(usuario.getId());
venta.setIdEmpleado(1);
venta.setNumeroComprobante("" + numfac);
venta.setFecha("2020-10-21");
venta.setMonto(totalapagar);
venta.setEstado("1");
ventaDAO.RegistrarVenta(venta);
int idv = ventaDAO.ObtenerMaximoIdVentas();
for (int i = 0; i < listaVentas.size(); i++) {
venta = new Venta();
venta.setIdVenta(idv);
venta.setIdProducto(listaVentas.get(i).getIdProducto());
venta.setCantidad(listaVentas.get(i).getCantidad());
venta.setPrecio(listaVentas.get(i).getPrecio());
ventaDAO.GuardarDetalleVenta(venta);
}

break;

Se configuran los botones para que se acceda al controlador al caso RegisrarVenta

<div class="card-footer d-flex">


<div class="col-md-8 text-center">
<a class="btn btn-success" onclick="print()" href="Controlador?
menu=Ventas&accion=GenerarVenta">Generar Venta</a>
<a class="btn btn-danger" href="Controlador?
menu=Ventas&accion=NuevaVenta">Nueva Venta</a>

</div>
<div class="col-md-4">
<input type=text" name="txttotalapagar" class="form-control"
placeholder="$ 00.000.00" disabled="disabled" value="$ ${totalapagar}" >
</div>
</div>
Imprimir factura

Agregamos el atributo onclick=”print()” al botón generar venta.

Creamos en el encabezado de Ventas.jsp los siguiente

<style>
@media print{
.seccion1, .btn, .columna{
display:none;
}
}
</style>

Agregamos las clases a los elementos que no queremos que salgan en la impresión y listo

También podría gustarte