Aplicación CRUD del Diario del Cazador del videojuego Hollow Knight.

Overview

Diario del Cazador de Hollow Knight

Aplicación CRUD del Diario del Cazador del videojuego Hollow Knight. Es una base de datos que alberga información de todos los enemigos de ese videojuego. En ella se podrán insertar, borrar o editar datos.


"Aventúrate en las profundidades de esta tierra y dale muerte a las bestias. Demuestra que eres digno de llevar la marca del cazador"



index


Lo primero que vemos al abrir la aplicación es esta página, un "login" en el que como usuarios podremos iniciar sesión. Probemos a darle al botón enviar sin rellenar el formulario de entrada.


envioformulariosindatos


Podemos ver como necesitamos rellenar el formulario para continuar si es que pulsamos el botón enviar. En todo el programa cada formulario con un asterisco será obligatorio de rellenar. Podemos crear un nuevo usuario con el botón "Registrarse" o entrar como invitado dándole al respectivo botón. Hagamos esto último.


paginaprincipalinvitado


Nos encontramos con la página principal. En ella podemos consultar los datos de los enemigos que ya se encuentran en la base de datos. Veamos cada uno de los elementos de ella.


En la parte superior tenemos una imagen de perfil genérica junto a dos enlaces, uno que nos enviará a la página de registro de usuarios y otra que nos devolverá al login del principio. Cuando entremos como usuario registrado veremos como cambia.


A continuación tenemos la tabla donde se encuentran los datos de los enemigos del juego. Por cada enemigo tenemos su nombre, una imagen suya, una descripción del mismo, su zona de apararición, si es un boss o no (Un boss o jefe es el enemigo final de una zona o simplemente un enemigo más poderoso que el resto), si lo es, pondrá "Sí", si no, "No".


Si dejamos el cursor sobre el nombre de una zona nos aparecerá en forma de tooltip la descripción de la misma.


descripcionzona


Después de la columna "Boss" tenemos dos columnas más, la columna "Editar" y la columna "Borrar". Cada una alberga un botón por cada enemigo que al pulsar ejecutará un evento distinto. Si pulsamos un botón verde como invitado aparecerá la página de registro de usuario, ya que a menos que estemos registrados no podemos modificar datos de enemigos.


registrodeusuarios


Si pulsamos un botón rojo como invitado en la página principal, nos aparecerá un modal indicando que necesitamos permisos de administrador para borrar los datos de un enemigo.


resultadointentoborrarinvitado


Ahora bajemos hasta el final de la página, nos encontraremos esto:


aniadirenemigoinvitado


Si pulsamos ese botón como invitado, al igual que con el botón de editar enemigo, iremos a la página de registro de usuario, y ya que nos encontramos en ella, registraremos un usuario.


registrandouser1


En este caso hemos seleccionado una foto de perfil pero podríamos perfectamente no poner una si no indicamos nada distinto a la opción seleccionada por defecto en el desplegable, y nuestro usuario tendrá asignada la misma foto de perfil que le aparece a un usuario invitado.


desplegablefotoperfil


El valor de la fecha de nacimiento originalmente era del tipo date en la base de datos, pero debido a que el formato del navegador es distinto al formato de phpadmin y genera conflicto al añadir los datos.


Cuando hemos rellenado todos los datos necesarios para registrar al usuario, le damos al botón "Registrarse". El botón "Cancelar" nos devolverá a la página de inicio. Al darle al botón "Registrarse" los datos se enviarán a la página insertausuario.jsp, que contiene la siguiente función para añadirla a la base de datos


insertarusuariofuncion


y nos aparecerá una página con el siguiente mensaje:


userregistradoconfirmacion


Pulsamos el botón, volvemos a la página de inicio, rellenamos el formulario con los datos del nuevo usuario y le damos a "Enviar".


iniciandosesion


Nos aparece la página principal, con neustro nombre de usuario y nuestra foto de perfil en la parte superior, junto con un "Cerrar Sesión". Ahora si podemos añadir o modificar enemigos.


principalusuarioregistrado


Bajemos hasta el fondo de la página y pulsemos en "Añadir enemigo". Nos aparecerá este formulario.


insertarenemigo

desplegablezonas

desplegablebosses


Añadiremos los siguiente datos:

  • Nombre: Hollow Knight

  • Descripción: Receptáculo adulto que encierra al corazón de la plaga en su cuerpo.

  • Zona: Cruces Olvidados

  • ¿Es Boss?: Sí


insertandoenemigo


Le damos a "Añadir" para añadir los datos del enemigo a la base de datos y "Cancelar" para volver a la página principal, al darle a "Añadir se enviarán los datos a la página insertar.jsp que contiene la siguiente función para añadirla a la base de datos.


insertarfuncion


y nos aparecerá una página con el siguiente mensaje:


enemigoaniadidoconfirmacion


Al volver a la página principal podemos ver al nuevo enemigo añadido.


enemigoaniadido


Ahora modifiquemos la descripción y añadamos la siguiente

  • Descripción: El antiguo Rey de Hallownest... llegó a tomar medidas desesperadas para salvar su pequeño mundo. Obligó a muchos a realizar tremendos sacrificios... y todo para nada.

modificarenemigo



desplegablezonasmodificar



desplegablebossesmodificar



modificandoenemigo


El botón "Modificar" modificará los datos del enemigo, y el botón "Cancelar" nos devolverá a la página principal, al darle a "Modifcar"r se enviarán los datos a la página editar.jsp que contiene la siguiente función para añadirla a la base de datos


editarfuncion


y nos aparecerá una página con el siguiente mensaje:


enemigomodificadoconfirmacion


Podemos ver al volver a la página principal los datos modificados.


enemigomodificado


Pero ahora si le damos a borrar enemigo, nos aparecerá el mismo mensaje que cuando entramos a la página como invitado.


resultadointentoborradoregistrado


Para borrar los datos del enemigo, necesitaremos iniciar sesión con un usuario administrador, por lo que le daremos a "Cerrar Sesión" y volveremos a la página de inicio. Para cerrar la sesión en index.jsp al principio declararemos todas las variables de sesión como null, y ya después en el formulario se enviarán los datos introducidos a comprobarusuario.jsp para comprobar si esos datos coinciden con los que haya en la base de datos, en caso contrario se volverá a index.jsp.

Código de index.jsp:


codigoindex


Código de comprobación en comprobarusuario.jsp:


comprobarfuncion


En la página de inicio ponemos el Usuario: admin y Contraseña: root y le damos a "Enviar".


iniciandosesioncomoadmin


principaladmin


Vemos que el usuario que es administrador tiene una estrella junto a su nombre. Busquemos el enemigo que antes no pudimos borrar y demósle al botón de borrado.


borradoenemigoadmin


Vemos que el mensaje cambia, ahora aparece el botón "Borrar" dentro del modal. Si le damos se enviará el id del enemigo (que está oculto) a borrar.jsp nos aparecerá el seguiente mensaje


confirmacionborrado


y se ejecutó la siguiente función:


borrarfuncion


Al volver a la página principal nos encontraremos con que el enemigo ya no aparece.


enemigoborrado



Nota: las imágenes de los enemigos aparecen gracias a que tienen el mismo nombre que los enemigos. La imagen de Hollow Knight aparece porque está guardada en los archivos de la aplicación. Si se intenta añadir otro enemigo no saldrá imagen.



Código Destacado


Consultas SQL de la página principal para mostrar los datos


principalqueries



Código de la navbar que cambia según si entra un usuario registrado o un invitado


navbar



Código de la tabla (sin columnas "Editar y "Borrar") donde se muestran los enemigos y sus datos


tabla



Código del botón "Añadir", en caso de usuario registrado y de invitado


codigobotonaniadir



Código del botón "Modificar", en ambos casos de sesión


codigobotonmodificar



ódigo del botón "Borrar" en ambos casos, admin y no admin


codigobotonborrado



Código de los modales que salen al pulsar el botón "Borrar" en ambos casos, admin y no admin


codigomodalesborrado



Codigo del formulario para añadir un enemigo


codigoformularioaniadirenemigo



Codigo del formulario para modificar un enemigo


codigoformulariomodificar

You might also like...

Uma API REST com funcionalidades de CRUD que simula um sistema de leilão 💰.

Uma API REST com funcionalidades de CRUD que simula um sistema de leilão 💰.

Leilão API REST Essa aplicação foi feita para ajudar aqueles que ainda estão com alguma dúvida, sobre o funcionamento de um API REST em Spring. Já que

Feb 23, 2022

LightAdmin - [PoC] Pluggable CRUD UI library for Java web applications

 LightAdmin - [PoC] Pluggable CRUD UI library for Java web applications

LightAdmin - [PoC] Pluggable CRUD UI library for Java web applications The primary goal of this PoC project is to speed up application development by

Dec 16, 2022

Automatic creation of simple CRUD API of Spring boot and JPA project.

fast-crud Automatic creation of simple CRUD API of Spring boot and JPA project.

Oct 23, 2022

Basic crud operations with json data, main focus is with tests

Spring Crud operations Basic crud operations with json data, main focus is with tests. For future reference Road Map Basic Crud on controllers (done)

Feb 1, 2022

SpringBoot CRUD Employee Management System

Employee-Management-Springboot SpringBoot CRUD Employee Management System Tech it uses Java SpringBoot Hibernate MySQL To Run Download the zip file an

Jan 31, 2022

CRUD about create, update and delete items like fish and fishbowl

CRUD about create, update and delete items like fish and fishbowl

CreacionPecesYPeceras Este repositorio contiene el código fuente y la base de datos (fichero .sql) que conforman una aplicación CRUD (Create, Read, Up

Mar 2, 2022

Spring JPA Many To Many example with Hibernate and Spring Boot CRUD Rest API - ManyToMany annotation

Spring JPA Many To Many example with Hibernate and Spring Boot CRUD Rest API - ManyToMany annotation

Dec 28, 2022

🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end

REST API with Spring Boot and Angular CRUD Angular + Spring demonstrating Has-Many relationship, with tests. 💻 Tecnologies Java 17 Spring Boot 3 JPA

Dec 28, 2022

Um sistema de hospital feito em Spring Boot, contendo alguns CRUD's, e utilizando algumas famosas dependências, como o Hibernate. Vale destacar a interface inspirada no jogo Minecraft.

Um sistema de hospital feito em Spring Boot, contendo alguns CRUD's, e utilizando algumas famosas dependências, como o Hibernate. Vale destacar a interface inspirada no jogo Minecraft.

Introdução ✏ Esse projeto é uma atividade da disciplina de Design, Arquitetura e Construção de Software [DACS]. O objetivo do projeto é simular um sis

Nov 6, 2022
Owner
Alberto Moreno González
Cross-Platform Applications Development at @IESCampanillas
Alberto Moreno González
UMS is a CRUD based management system which uses File Handling to manipulate data and perform the CRUD operations

UMS is a CRUD (Create, Read, Update, Delete) based management system which uses File Handling to manipulate data and perform the CRUD operations. It is a group project made using Java procedural programming having both User and Admin sides.

Daoud-Hussain 9 Dec 20, 2022
Crud sobre el mundo del cine, y listado de películas que un usuario puede tener en su casa.

FilmHome ?? ??️ Crud sobre el mundo del cine, y listado para gestionar las películas que un usuario puede tener como colección en su casa. ??️ VIDEO Y

Adrian Egea Hermoso 5 May 16, 2022
Bot de Telegram que informa del precio del combustible en las gasolineras más próximas a tu ubicación

Telegram BOT Bot de Telegram en JAVA y SQLite. Sirve para consultar los precios de las gasolineras más cercanas a tu ubicación. Los datos son proceden

null 6 Jan 12, 2022
Una aplicacion de Chat en Spring Boot

websockets-spring-boot-angular-sockjs-chatapp-bootstrap Una aplicacion de Chat en Spring Boot, Angular, Bootstrap y SockJS Puedes ver el video de la d

Jose David Briones Rosa 4 Dec 11, 2022
Programación - 03 Aplicación de Estructuras de Almacenamiento. 1DAM. Ejercicios realizados por el alumnado. Curso 2021-2022

Programacion-03-Ejercicios-2021-2022 Programación - 03 Aplicación de Estructuras de Almacenamiento. 1DAM. Ejercicios realizados por el alumnado. Curso

José Luis González Sánchez 15 Dec 27, 2022
Twiscord es una simple aplicación que permite conectar Twitter y Discord para poder publicar cosas en ambas plataformas a la vez.

Twiscord Twiscord es una simple aplicación que permite conectar Twitter y Discord para poder publicar en ambas plataformas a la vez dedicado a streame

null 2 Jan 10, 2022
Trabajo práctico de la materia Programación Orientada a Objetos. Grupo 1, equipo 8. Aplicación de gestión de restaurantes desarrollada en Java. UNAL sede Medellín, semestre 2022-1.

i-Lunch Materia: Programación Orientada a Objetos Profesor: Jaime Alberto Guzman Luna Institución: Universidad Nacional de Colombia sede Medellín Seme

null 4 Nov 12, 2022
Spring Boot JdbcTemplate example with SQL Server: CRUD Rest API using Spring Data JDBC, Spring Web MVC

Spring Boot JdbcTemplate example with SQL Server: Build CRUD Rest API Build a Spring Boot CRUD Rest API example that uses Spring Data Jdbc to make CRU

null 7 Dec 20, 2022
Springboot CRUD api using containerized mongoDB. ☕🍃📦

Javongo ☕ ?? Springboot CRUD api using containerized mongoDB. Feel free to use it as an example for your projects. Running Make sure ports 27017 & 808

Antonio Cituk 8 Mar 19, 2022
CRUD operation using java springboot microservice hosted in kubernetes env, data stored in mongodb

springboot-mongodb-k8s-parth Brief Introduction Hello Friends, I have created REST API using Springboot and Spring cloud application which performs CR

Parth Shah 1 Nov 11, 2021