Header Ads Widget

Ticker

6/recent/ticker-posts

Configurar formulario y botón para una solicitud de publicación

En este tutorial, agregaremos un botón anidado dentro de un elemento de formulario para que un usuario pueda hacer clic en ese botón y enviar una solicitud de publicación a un punto final específico en el servidor. En el último tutorial, se completó todo el trabajo preliminar para configurar ese punto final. Ahora, es solo una cuestión de configurar el lado de la interfaz de usuario con un formulario html y un elemento de botón. Veremos cómo determinar cuáles deben ser los valores de atributo de método y acción del formulario. Además, nos tomaremos un poco de tiempo probando cosas desde el navegador mismo en lugar de phpunit solo para ver cómo funcionan las cosas.


Editar la respuesta parcial

Podemos abrir la vista parcial reply.blade.php que ya habíamos creado durante esta serie de tutoriales. En él, modifiquemos el marcado html para que se parezca a lo que tenemos en este fragmento de código que se muestra a continuación. Esto debería darnos un botón html de aspecto decente que podemos usar para enviar una solicitud POST para activar la función favorita.

botón html renderizado con bootstrap


Cómo determinar el atributo de acción de formulario

El atributo del método ya está establecido. Esto determina qué tipo de verbo http se utiliza para enviar la solicitud. El verbo POST http ya ha sido seleccionado. Necesitamos completar ese atributo de acción también. El atributo de acción es lo que determina a dónde se enviará la solicitud. En nuestro caso queremos enviar esa solicitud a esta ruta definida en el archivo de rutas.

Por tanto, la cadena contenida en el atributo de acción será la siguiente:


Incluya siempre un campo CSRF

Lo último que queremos asegurarnos de incluir en el botón y en el marcado del formulario es una llamada a la función auxiliar csrf_field (). Esto hará que el formulario sea más seguro y lo protegerá contra ataques de falsificación de solicitudes entre sitios. El marcado final para nuestra vista parcial con el csrf_field resaltado se muestra aquí:


Cómo redireccionar hacia atrás

Cuando un formulario html envía una solicitud, no queremos que el flujo de la página se detenga una vez que se completa. Debemos realizar un redireccionamiento para el usuario, para darle una mejor experiencia. Laravel proporciona la conveniente función auxiliar back () para permitir esto. Haremos una llamada a esa función auxiliar en el controlador de la siguiente manera:


Prueba del botón Enviar formulario

Para crear un favorito en una respuesta, debemos hacer clic en el botón para enviar la solicitud de publicación. Probemos eso ahora.
Auth middleware está funcionando
En este momento, el usuario es redirigido de inmediato a la página de inicio de sesión. En realidad, esto es perfecto y nos dice que el middleware de autenticación que habíamos configurado anteriormente funciona perfectamente. No queremos que los invitados del sitio puedan crear un favorito. Solo los usuarios autenticados deberían poder completar esta tarea. Ahora iniciaremos la sesión del usuario y probaremos ese envío favorito una vez más.
ejemplo de envío de publicación exitosa
Ahora el usuario puede enviar la solicitud de publicación al servidor y registrar un favorito. El usuario también es redirigido a la misma página desde la que se envió la solicitud de publicación. En el ejemplo anterior, ese proceso ocurre tan rápido que casi ni siquiera se da cuenta de que algo acaba de suceder. Sin embargo, podemos verificar nuestra base de datos, y parece que de hecho se creó un nuevo favorito en la base de datos. ¡Muy genial!
nuevo registro insertado en la base de datos


Cómo mostrar el recuento de favoritos a los usuarios

El usuario del sitio definitivamente debería poder ver el número de favoritos asignados a cada respuesta. Tendremos que modificar el archivo de vista para mostrarlo al usuario. En reply.blade.php, podemos hacer una llamada a las relaciones que hemos definido en nuestro Modelo para mostrar el recuento de favoritos. Una vez más podemos hacer uso de esa muy útil función auxiliar str_plural ().

Al ver la misma página que antes, la respuesta en la que se hizo clic ahora se muestra con 1 favorito. La otra respuesta en la página en la que no hicimos clic todavía tiene 0 Favoritos. Muy genial.
cómo mostrar el recuento de favoritos


Un usuario solo puede enviar un favorito una vez

En el tutorial anterior, hicimos mucho trabajo para configurar una prueba y el código de soporte para asegurarnos de que un usuario solo pudiera enviar un favorito como respuesta una vez. Esto se hizo tanto a nivel de base de datos como a nivel de PHP. Con nuestro ejemplo de usuario registrado, podemos hacer clic como un loco, pero puede ver que el recuento de favoritos no aumenta. Esto es muy bueno.
evitar el juego de favoritos


Gran caso de uso de Bootstrap Disable

Bootstrap proporciona una buena clase para deshabilitar un botón en la interfaz de usuario. ¿Por qué no utilizar esta función aquí? Tiene perfecto sentido. Si un usuario ya envió un favorito para una respuesta en particular, entonces podemos aplicar la clase .disabled al botón. De esa manera, el usuario ni siquiera puede intentar seguir haciendo clic varias veces. Para hacer esto, necesitaremos configurar un nuevo método al que podamos llamar para verificar y ver si la respuesta ya tiene un favorito. Así es como queremos que funcione la API, luego podemos agregar el código en el Modelo para facilitar esto.

Ahora necesitamos agregar el método al modelo de respuesta.

Cuando el usuario ve la página ahora, podemos ver que la respuesta que ya estaba marcada como favorita ahora tiene un botón deshabilitado. El usuario ni siquiera puede hacer clic en ese botón si lo intenta. Sin embargo, la respuesta que no fue marcada como favorita tiene un botón que está listo para hacer clic si el usuario desea aplicar un favorito a esa respuesta.
ejemplo de botón de arranque deshabilitado


Configurar formulario y botón para un resumen de solicitud posterior

Parece que obtuvimos ese formulario y botón funcionando para enviar la solicitud de publicación al punto final, que de hecho era nuestro objetivo. Usamos una solicitud de publicación, ya que nuestro objetivo es modificar algo en el servidor. Las reglas de http dictan esto. También dirigimos el formulario para que apunte directamente al punto final que ya habíamos configurado. Por lo tanto, cuando enviamos nuestra solicitud de publicación a ese punto final, debería aparecer un nuevo registro en la base de datos. Esto es exactamente lo que pasó tan buen trabajo.


Publicar un comentario

0 Comentarios