[ESP][ENG] I made this CRUD of people in jsp, servlet (java) based on MVC 👨‍💻💻

I think the best practice to develop more knowledge about the backend is to perform the famous CRUD, which consists of methods that allow you: Add, modify and delete elements of tables, carrying out systems or exercises of this type you will have much clearer the issue of database connections and best practices to save hours of effort and lines of code, for a few months I try to do everything as professional as possible, using the MVC and DAO method for each web application I do using the Java programming language.

Pienso que la mejor practica para desarrollar mayor conocimiento en cuanto al backend es realizar el famoso CRUD, que consiste en metodos que te permitan: Agregar, modificar y eliminar elementos de tablas, llevando a cabado sistemas o ejercicios de este tipo tendras mucho más claro el tema de conexiones a base de datos y las mejores praticas para ahorranos horas de esfuerzo y lineas de codigo, desde hace unos meses intento hacer todo tan profesional como me es posible, uilizando el metodo MVC y DAO para cada aplicación web que hago mediante el lenguaje de programación de Java.

Currently I have focused on doing everything with jsp and servlets, because for web development with java seems to me the most successful and in turn required, a few days ago I showed a small customer control for a company or venture of telephony, although of course, it still lacked a world because I only left made the base, yes, very solid and safe because I left hours there making sure that no failure occurred .... Each request sent by the user is correctly processed by the Servlet Controller as it is also in this new CRUD made by me.

Actualmente me he centrado en hacer todo con jsp y servlets, pues para el desarrollo web con java me parece lo más acertado y a su vez requerido, hace unos días enseñé un pequeño control de clientes para una compañia o emprendimiento de telefonia, aunque claro, le faltaba un mundo aún ya que solo deje hecha la base, eso si, muy solida y segura pues deje horas allí asegurandome de que no ocurriera ningún fallo... Cada petición enviada por el usuario es correctamente procesada por el Servlet Controlador como lo es también en este nuevo CRUD hecho por mi.

This small system is made in order to carry a list of people together with specific information of the same, just add the document number and full name but the process is basically the same if your form contains more fields, be sure to declare them correctly in my house both are String variables and only is an integer the id of the people who enter the table, this value is autoincrementable so we will not modify it at all, we will only edit the String fields.

Este pequeño sistema esta hecho con el fin de llevar un listado de personas conjunto a información especifica de la misma, apenas agregue el número de documento y nombre completo pero el proceso es basicamente el mismo si tu formulario contiene más campos, asegurate de declararlos correctamente en mi casa ambos son variables de tipo String y unicamente es un entero la id de las personas que ingresan a la tabla, este valor es autoincrementable por lo cual no vamos a modificarlo en lo absoluto, unicamente vamos a editar los campos String.

Due to time issues I prefer to use bootstrap for this kind of exercises, besides, I think it is quite attractive and best of all it makes it easy to make responsive an application, page or any other thing made in jsp or html. Yes, this little Crud is completely adaptable to any device, although I must admit that I could have done a better job with the buttons, but the truth is that I am allocating all my hours of the day (well, most of them) to a bigger project, for that I have something well thought that I will show you here soon.

Por cuestiones de tiempo prefiero utilizar bootstrap para este tipo de ejercicios, además, me parece que es bastante atractivo y lo mejor de todo facilita la tarea de hacer responsive una aplicación, pagina o cualquier otra cosa hecha en jsp o html. Si, este pequeño Crud es completamente adaptable a cualquier dispositivo, aunque debo admitir que pude haber hecho un mejor trabajo con los botones, pero lo cierto es que estoy destinando todas mis horas del dia (Bueno, la mayoria) a un proyecto más grande, para ese tengo algo bien pensado que les mostrare aquí pronto.

Index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Inicio</title>
    </head>
    <body>
        <div>
            <a href="ServletControlador?accion=listar">Listar</a>
        </div>
    </body>
</html>

listar.jsp

<%@page import="java.util.Iterator"%>
<%@page import="Modelo.Persona"%>
<%@page import="java.util.List"%>
<%@page import="ModeloDAO.PersonaDAO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>

        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://kit.fontawesome.com/f90d3bf50d.js" crossorigin="anonymous"></script>


        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Listar</title>
    </head>

    
    <body>

        <header id="main-header" class="py-2 bg-secondary text-white">
            <div class="container">
                <div class="text-center">
                    <div class="row">
                        <div class="col-md-6">
                            <h1>
                                <i class="fas fa-solid fa-people-arrows">&nbsp;</i>Control de personash1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        

        <div class="container">
            <br>

            <a class="btn btn-success" href="ServletControlador?accion=add">Agregar nuevo</a>


            <table class="table table-bordered">
                <thead class="thead-dark">
                    <tr>
                        <th>Id</th>
                        <th>Dni</th>
                        <th>Nombres</th>
                        <th>Acciones</th>
                    </tr>
                </thead>

                <%

                    PersonaDAO dao = new PersonaDAO();
                    List<Persona> list = dao.listar();
                    Iterator<Persona> iter = list.iterator();
                    Persona per = null;
                    while (iter.hasNext()) {
                        per = iter.next();


                %>
                <tbody>
                    <tr>
                        <td><%= per.getId()%></td>
                        <td><%= per.getDni()%></td>
                        <td><%= per.getNombre()%></td>
                        <td class="text-center">

                            <a class="btn btn-info" href="ServletControlador?accion=editar&id=<%= per.getId()%>">Editar</a>
                            <a class="btn btn-danger" href="ServletControlador?accion=eliminar&id=<%= per.getId()%>">Eliminar</a>

                        </td>
                    </tr>
                    <%
                        }
                    %>
                </tbody>
            </table>
        </div>
         
        <footer id="pie-pagina" class="bg-secondary text-white mt-3 p-3">
            <div class="container">
                <div class="col">
                    <p class="lead text-center">
                        Copyright &copy; Edmanuel Vera
                    </p>
                </div>
            </div>
        </footer>

        

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    </body>
</html>



edit.jsp


<%@page import="Modelo.Persona"%>
<%@page import="ModeloDAO.PersonaDAO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://kit.fontawesome.com/f90d3bf50d.js" crossorigin="anonymous"></script>
        <title>Editar</title>
    </head>
    <body>
        <%
        
            PersonaDAO dao = new  PersonaDAO();
            int id = Integer.parseInt((String)request.getAttribute("idPer"));
            Persona p = (Persona)dao.list(id);
        
        %>
        <div class="container text-center">
        <div class="border m-4" style="height: 600px">
            <div class="card-header">
        <h2>Modificar personas</h2>
            </div>
            <div class="card-body m-4 d-flex justify-content-center align-items-center">
        <form>
            DNI <br><br>
            <input type="text" name="txtDni" value="<%= p.getDni()%>"><br><br>
            NOMBRE<br><br>
            <input type="text" name="txtNombre" value="<%= p.getNombre()%>"><br><br>
            <input type="hidden" name="txtId" value="<%= id %>"><br><br>
            <input class="btn btn-success" type="submit" name="accion" value="actualizado">
            <a class="btn btn-info" href="ServletControlador?accion=listar">Regresar</a>
        </form>
            </div>
        </div>
        </div>
    </body>
</html>



add.jsp


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://kit.fontawesome.com/f90d3bf50d.js" crossorigin="anonymous"></script>
        <title>Agregar</title>
    </head>
    <body>
        <div class="container text-center">
            <div class="border m-4" style="height: 600px">
            <div class="card-header">
                <h2>Añadir nueva persona</h2>
                </div>
                <div class="card-body m-4 d-flex justify-content-center align-items-center">
        <form>
            DNI <br><br>
            <input type="text" name="txtDni"><br><br>
            NOMBRE<br><br>
            <input type="text" name="txtNombre"><br><br>
            <br><br>
            <input class="btn btn-success" type="submit" name="accion" value="Agregar">
            <a class="btn btn-info" href="ServletControlador?accion=listar">Regresar</a>
        </form>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>



The packages are distributed in the most organized way possible, one for the data layer, another for the requests and finally the results after a request in the user's view. I will also leave the Servlet codes that I used to fulfill the requests and also the DAO's that were in charge of making the connection to my database and also to make the sql sentences.


Los paquetes estan distribuidos de la forma más organizada posible, unos destinados a la capa de datos, otro al de las peticiones y finalmente los resultados luego de una petición en la vista del usuario. Dejare también los codigos del Servlet que utilice para cumplir con las peticiones y así mismo los DAO que se encargaron de realizar la conexión a mi base de datos y así mismo a hacer las sentencias sql.





ServletControlador


package Controlador;

import Modelo.Persona;
import ModeloDAO.PersonaDAO;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.*;
import javax.servlet.http.*;


public class ServletControlador extends HttpServlet {
    
    String listar ="vistas/listar.jsp";
    String add = "vistas/add.jsp";
    String edit = "vistas/edit.jsp";
    int id;
    
    Persona p = new Persona();
    PersonaDAO dao = new PersonaDAO();
    
    
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try ( PrintWriter out = response.getWriter()) {
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String acceso = "";
        String action = request.getParameter("accion");
        if(action.equalsIgnoreCase("listar")){
            acceso = listar;
            
        }else if(action.equalsIgnoreCase("add")){
            acceso= add;
        }else if(action.equalsIgnoreCase("Agregar")){
            String dni = request.getParameter("txtDni");
            String nombre = request.getParameter("txtNombre");
            p.setDni(dni);
            p.setNombre(nombre);
            dao.add(p);
            acceso = listar;
        }else if(action.equalsIgnoreCase("editar")){
            request.setAttribute("idPer", request.getParameter("id"));
            acceso = edit;
        }else if(action.equalsIgnoreCase("actualizado")){
            id=Integer.parseInt(request.getParameter("txtId"));
            String dni = request.getParameter("txtDni");
            String nombre = request.getParameter("txtNombre");
            p.setId(id);
            p.setDni(dni);
            p.setNombre(nombre);
            dao.editar(p);
            acceso = listar;
        }else if(action.equalsIgnoreCase("eliminar")){
            id= Integer.parseInt(request.getParameter("id"));
            p.setId(id);
            dao.eliminar(id);
            acceso = listar;
        }
        RequestDispatcher vista = request.getRequestDispatcher(acceso);
        vista.forward(request, response);
    }


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    public String getServletInfo() {
        return "Short description";
    }

}



Conexion.java


package config;

import java.sql.*;

public class Conexion {

    Connection con;

    public Conexion() {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/crud", "root", "");
        } catch (Exception e) {
            System.err.println("Error" + e);
        }
    }

    public Connection getConnection() {
        return con;
    }
}



CRUD.java


package Modelo;

public class Persona {
    int id;
    String dni;
    String nombre;

    public Persona() {
    }

    public Persona(int id, String dni, String nombre) {
        this.id = id;
        this.dni = dni;
        this.nombre = nombre;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getDni() {
        return dni;
    }

    public void setDni(String dni) {
        this.dni = dni;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
    
    
}



Persona.java


package Modelo;

public class Persona {
    int id;
    String dni;
    String nombre;

    public Persona() {
    }

    public Persona(int id, String dni, String nombre) {
        this.id = id;
        this.dni = dni;
        this.nombre = nombre;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getDni() {
        return dni;
    }

    public void setDni(String dni) {
        this.dni = dni;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
    
    
}




PersonaDAO


package ModeloDAO;

import Interfaces.CRUD;
import Modelo.Persona;
import config.Conexion;
import java.sql.*;
import java.util.*;
import java.util.List;

public class PersonaDAO implements CRUD{
    Conexion cn = new Conexion();
    Connection con;
    PreparedStatement stmt;
    ResultSet rs;
    Persona p = new Persona();

    @Override
    public List listar() {
        ArrayList<Persona> list = new ArrayList<>();
        String sql = "select * from persona";
        try {
            con = cn.getConnection();
            stmt = con.prepareStatement(sql);
            rs = stmt.executeQuery();
            while(rs.next()){
                Persona per = new Persona();
                per.setId(rs.getInt("id"));
                per.setDni(rs.getString("dni"));
                per.setNombre(rs.getString("nombre"));
                list.add(per);
            }
        } catch (Exception e) {
        }
        return list;
    }

    @Override
    public Persona list(int id) {
         ArrayList<Persona> list = new ArrayList<>();
        String sql = "select * from persona where id=" + id;
        try {
            con = cn.getConnection();
            stmt = con.prepareStatement(sql);
            rs = stmt.executeQuery();
            while(rs.next()){
                Persona per = new Persona();
                p.setId(rs.getInt("id"));
                p.setDni(rs.getString("dni"));
                p.setNombre(rs.getString("nombre"));
            }
        } catch (Exception e) {
        }
        return p;
    }

    @Override
    public boolean add(Persona per) {
        String sql = "insert into persona(dni, nombre) values('"+per.getDni() + "' , '"+per.getNombre()+"')";
        try {
            con = cn.getConnection();
            stmt = con.prepareStatement(sql);
            stmt.executeUpdate();
        } catch (Exception e) {
        }
        return false;
    }

    @Override
    public boolean editar(Persona per) {
         String sql = "update persona set dni = '"+per.getDni() + "' , nombre = '"+per.getNombre()+"'where id="+per.getId();
         try {
            con = cn.getConnection();
            stmt = con.prepareStatement(sql);
            stmt.executeUpdate();
        } catch (Exception e) {
        }
         return false;
    }

    @Override
    public boolean eliminar(int id) {
        String sql = "delete from persona where id =" + id;
        try {
            con = cn.getConnection();
            stmt = con.prepareStatement(sql);
            stmt.executeUpdate();
        } catch (Exception e) {
        }
            return false;
    }

}