[ENG][ESP] Building an application with jsp and servlet (java)🖥️👨‍💻 - login

logeando.png

121212.png

I have at least two months specializing in the java language, is it old-fashioned, maybe, but as I see it, it is still quite required today, I will not compare it with other technologies, but it seems to me highly functional and still has a lot to give. To be specific I have focused on building web applications using jsp and servlet, I am a computer engineer and all my career I focused most of the time to the frontend, I feel that is what I do best so this backend theme is a challenge for me.

Tengo al menos dos meses especializandome en el lenguaje de java, ¿algo anticuado?, quizas, pero por como yo lo veo es bastante requerido aún a día de hoy, no lo voy a comparar con otras tecnologias, pero me parece sumamente funcional y aún tiene mucho para dar. Para ser especificos me he centrado en la construcción de aplicaciones web utilizando jsp y servlet, soy ingeniero en informatica y toda mi carrera me concentre en la mayor parte del tiempo al fronted, siento que es lo que mejor se me da así que este tema de backend es todo un reto para mi.

I have finished some courses in udemy and everything else I have reinforced on youtube and programming forums, we all know that anything we want to search is already in google and even for years, there is nothing dumber than not knowing how to take advantage of your resources and optimize your work time if you ask me. Anyway, in these courses I got to do final projects, including a fully functional customer control, after that I decided to do a small project for a store near home, this as a way to add experience and make real practices, develop an application that is actually used.

He terminado algunos cursos en udemy y todo lo demás lo he reforzado en youtube y foros de programación, todos sabemos que cualquier cosa que queramos buscar ya esta en google e incluso desde hace años, no hay nada más tonto que no saber aprovechar tus recursos y optimizar tu tiempo de trabajo si me lo preguntan. En fin, en estos cursos llegue a hacer proyectos finales, entre ellos un control de clientes completamente funcional, después de ello decidí hacer un pequeño proyecto para una tienda cerca de casa, esto como una manera de sumar experiencia y hacer practicas reales, desarrollar una aplicación que de verdad sea utilizada.

121212.png

image.png

image.png

121212.png

It must be responsive because in fact the priority is to be used on mobile devices by employees of the store, it is something simple, with my application employees can record sales and keep the inventory of products in the store, this through two user roles: Administrator and employee, each with different functions, logically the first will have a higher hierarchy and most importantly, will have the ability to create, edit and delete employee type users, this way the business owner will not need a programmer when he wants to do this task ... Of course, at some point it will have to be maintained, but that is a future problem.

Debe ser responsive pues de hecho la prioridad es que sea utilizada en dispositivos moviles por los empleados del local, es algo sencillo, con mi aplicación los empleados podran registrar las ventas y llevar el inventario de productos de la tienda, esto mediante dos roles de usuarios: Administrador y empleado, cada uno de ellos con funciones diferentes, logicamente el primero tendrá una mayor jerarquia y lo más importante, tendrá la capacidad de crear, editar y eliminar usuarios de tipo empleado, de esta forma el dueño del negocio no va a necesitar de un programador cuando quiera hacer esta tarea... Claro, en algún punto deberá tener mantenimiento, pero ese es un problema a futuro.

I'm not sure how long it will take me to finish this application, I'm still relating tables in the database which is probably the most difficult issue for me, I decided to move forward in terms of user views, something I like when working is to always perform the best practices, optimize the program and use as few lines of code as possible, so I use the jsp function of "include", those who ever did php systems will be familiar with this method, I would like to hear your opinion about it.

No estoy seguro de cuanto tiempo me va a tomar terminar esta aplicación, aún estoy relacionando tablas en la base de datos que es probablemente el tema que más de me dificulta, decidí ir avanzando en cuanto a las vistas de usuario, algo que me gusta al momento de trabajar es realizar siempre las mejores practicas, optimizar el programa y emplear la menor cantidad de lineas de codigo posible, por lo que utilizo la funcion de jsp de "include", los que alguna vez hicieron sistemas en php van a estar familiarizados con este metodo, me gustaría escuchar su opinion al respecto.

121212.png

image.png

image.png

121212.png

I made the login view, using the bootstrap framework because this way I save a lot of work, I have good results and also it will be automatically responsive all the elements inside my .jsp document, it didn't take me more than a couple of hours to finish it, I must admit I forgot how to work the bootstrap styles, and I didn't use sass for absolutely nothing, that will be a matter for a couple of days because I hope to make the other views this way.... Or maybe not, I really like the result of my login, by the way, I must emphasize that this view will be common, so both user roles will be able to access from there using a role id and validations to identify which environment is performing the login.

Hice la vista de login, utilizando el framework de bootstrap pues de esta forma me ahorro un montón de trabajo, tengo buenos resultados y además automaticamente sera responsive todos los elementos dentro de mi documento .jsp, no me tomo más que un par de horas terminarlo, debo admitir que olvide como trabajar los estilos de bootstrap, y no utilice sass para absolutamente nada, ese va a ser un asunto para un par de días pues espero hacer las demás vistas de esta forma... O quizá no, realmente me gusto el resultado de mi login, por cierto, debo recalcar que esta vista sera común, por lo cual ambos roles de usuario podran acceder desde allí utilizando un id rol y validaciones para identificar que entorno esta realizando el inicio de sesion.

121212.png


Index.jsp


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        (html comment removed:  Bootstrap CSS )
        <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/68bd6542c8.js" crossorigin="anonymous"></script>

        <title>Inicio de sesion</title>
    </head>
    <body>

        (html comment removed:  Cabecero )

        <jsp:include page="WEB-INF/paginas/comunes/header.jsp"/>

        (html comment removed:  Form de login )
        
        <jsp:include page="WEB-INF/paginas/comunes/loginForm.jsp"/>

        (html comment removed: Footer)

        <jsp:include page="WEB-INF/paginas/comunes/piePagina.jsp"/>

        (html comment removed: - js y otros)

        <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>


Header.jsp


<header id="main-header" class="py-1 bg-dark text-white">
            <div class="container">
                <div class="text-center">
                    <div class="row">
                        <div class="col-md-12">
                            <h1><i class="fas fa-solid fa-shop"></i>Riquero</h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

LoginForm.jsp


<br>
        <div class="container text-center">
            <div class="row">
                <div class="col-md-4 mx-auto">
                    <div class="card">
                        <div class="card-header">
                            <h4>Ingresa tu usuario</h4>
                        </div>
                        <div class="card-body">
                            <form class="was-validated">
                                <img src="img/avatar.svg" width="150" height="auto">
                                <hr>
                                <div class="form-group">
                                    <label for="usuario"><h5><i class="fas fa-user" style="margin-right: 10px;"></i>Usuario</h5></label>
                                    <input type="text" class="form-control" name="usuario" placeholder="Escribe tu usuario..." required/>
                                </div>
                                <div class="form-group">
                                    <label for="password"><h5><i class="fas fa-solid fa-key" style="margin-right: 10px"></i>Contraseña</h5></label>
                                    <input type="password" class="form-control" name="password" placeholder="Escribe tu contraseña..." required/>
                                </div>
                               
                                <a href="#" type="submit" class="btn btn-success btn-block">Ingresar</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


piePagina.jsp (footer)

      <footer id="pie-pagina" class="bg-secondary text-white p-2 mt-2">
            <div class="container">
                <div class="col">
                    <p class="lead text-center">
                        Edmanuel Vera &copy Derechos reservados
                    </p>
                </div>
            </div>
        </footer>

Sort:  
Thank you for sharing this post on HIVE!

Your content got selected by our fellow curator tibfox & you received a little thank you upvote from our non-profit curation initiative. Your post will be featured in one of our recurring curation compilations which is aiming to offer you a stage to widen your audience within the DIY scene of Hive.

Next time make sure to post / cross-post your creation within the DIYHub community on HIVE and you will receive a higher upvote!

Stay creative & hive on!

Congratulations @edmanuelwild! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You got more than 1750 replies.
Your next target is to reach 2000 replies.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Support the HiveBuzz project. Vote for our proposal!