Pruebas de Funcionalidad de Etiquetas en Laravel desde el Navegador

¿Cómo probamos nuestro sistema desde el navegador?

Hoy exploraremos cómo probar un sistema previamente desarrollado y respaldado por pruebas automatizadas, ahora desde el navegador. Esta práctica es esencial para asegurar que todo el código funciona como se espera cuando se interactúa con él en un entorno real. Comenzaremos revisando que las pruebas hayan sido exitosas y pasaremos a configurar el entorno necesario para observar el funcionamiento correcto de nuestra aplicación desde el navegador.

¿Cómo configurar la base de datos con Laravel?

Para asegurarnos de que todo funcione perfectamente al revisar nuestra web, es crucial tener una base de datos configurada. Vamos a detallarte este procedimiento:

1. Crear la base de datos:

   • Accede a tu gestor de bases de datos y crea una nueva base llamada tag.
   • Asegúrate de que Laravel sepa que esta base de datos existe, editando el archivo .env para que la variable DB_DATABASE sea tag.

2. Ejecutar las migraciones:

   • Utiliza el comando de Laravel php artisan migrate para crear las tablas necesarias en tu base de datos.
   • Confirma que las tablas se generaron correctamente observando las estructuras en tu gestor de bases de datos.

¿Cómo implementar formularios en HTML para añadir y eliminar etiquetas?

Para visualizar y manipular nuestras etiquetas desde el navegador, necesitamos formularios HTML. Aquí te mostramos cómo configurarlos:

1. Formulario de creación de etiqueta:

   • Ruta: Define la ruta hacia donde enviará la información el formulario, generalmente será tags.
   • Método: Usa POST cuando quieras enviar datos, como una nueva etiqueta.
   • Token CSRF: No olvides incluir el token @csrf para proteger contra ataques CSRF.
   • Campos del formulario: Incluye un input de tipo text para el nombre de la etiqueta y un botón de envío.

   <form action="/tags" method="POST">
      @csrf
      <input type="text" name="name">
      <input type="submit" value="Agregar">
   </form>
   

2. Formulario para eliminar etiqueta:

   • Ruta dinámica: Aquí la ruta debe incluir el ID de la etiqueta a eliminar.
   • Método DELETE: Aunque HTML no soporta este método directamente, Laravel ofrece una forma de simularlo.
   • Token CSRF y método: No olvides incluir ambos.

   <form action="/tags/{{ $tag->id }}" method="POST">
      @csrf
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" value="Eliminar">
   </form>
   

¿Qué sucede al probar el sistema en el navegador?

Una vez configurados los formularios y la base datos, actualiza el navegador. Deberías poder ver:

• Listado de etiquetas: Si no hay etiquetas, un mensaje lo indicará.
• Agregar etiquetas: Al enviar el formulario, deberías visualizar la nueva etiqueta en el listado.
• Eliminar etiquetas: Al hacerlo, la etiqueta debería desaparecer del listado.

Este proceso demuestra que el sistema no solo está preparado para manejar los datos correctamente, sino que también refleja los resultados esperados en un entorno gráfico. Esta propuesta te invita a repetir estos pasos en tus propios proyectos, apoyándote siempre en pruebas sólidas y precisas. Sigue experimentando y aprendiendo, ¡el éxito está un paso más cerca!