Aproximación teórica para editar un contenido en frontend

Autor: | Última modificación: 29 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Sabes cómo editar un contenido en frontend? A la hora de escribir líneas de código, es importante tener claro el camino que se va a recorrer para ejecutar una acción. Por ello, pensar en nuestros proyectos de manera teórica es una gran ayuda para tener claridad antes de escribir. En este post, te enseñaremos nuestra aproximación teórica para editar un contenido en frontend usando la etiqueta form de HTML.

¿Cómo aproximarnos a editar un contenido en frontend?

Cuando hablamos de pensar en una aproximación teórica para editar contenido en frontend, nos referimos a pensar en el código que deberíamos ejecutar para que un usuario pueda editar su contenido en nuestra aplicación, así como se puede editar un tweet o un mensaje en Slack. Sin embargo, en vez de ejecutar este código, a continuación nos dedicaremos a pensar los pasos de manera teórica.

La edición de un contenido en frontend puede imaginarse de manera similar a la eliminación de un contenido. Es decir, puede ejecutarse con un botón que puede aparecer en el detalle del contenido cuando el usuario hace clic sobre él.

Entonces, podemos aproximarnos teóricamente a editar un contenido en frontend con los mismos pasos de la eliminación. Primero, deberemos ejecutar una validación de usuario para confirmar que el usuario actual es el mismo que ha creado el contenido, ya que no todo usuario debe ser capaz de editar todo contenido.

Al ser procesos fundamentalmente similares, te recomendamos leer nuestros artículos sobre crear un botón para borrar contenido en frontend y sobre el método para borrar contenido en frontend.

Tras la comprobación del JWT con el id del usuario creador del contenido, podremos mostrarle el botón de edición al usuario. En este botón, deberemos crear un evento (que podría hacerse usando el comando addEventListener) para programar la reacción al clic del botón.

Al programar la reacción al clic del botón, normalmente representado con un lápiz, debemos pensar en qué es lo que puede editar el usuario exactamente. En general, lo que las aplicaciones web permiten editar es el texto de un contenido. El usuario no debería poder cambiar propiedades como la fecha, los likes, el id, etc.

Una vez hayamos decidido qué elementos del contenido podemos editar, podremos programar una lógica en la que convertimos el contenido en un formulario con estos elementos como campos con posibilidad de edición. En este sentido, para editar un contenido en frontend deberemos hacer un proceso mucho más fuerte en HTML que en JavaScript.

¿Qué sigue?

Ahora que conoces nuestra aproximación teórica para editar un contenido en frontend, ¡ha llegado el momento de ejecutarla con tus propias líneas de código! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una formación en la que aprenderás la teoría y la práctica de este mundo a la par que desarrollas tus propios proyectos web. ¡No te lo pierdas y solicita información!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!