Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

↑ Me gusta (1)

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito! para esto implementaremos el sistema de notificaciones Toastr y Jquery en nuestro proyecto de Laravel y Vue. Repasando un poco lo visto en el video anterior.. recordemos que hicimos toda la configuración necesaria para que el botón eliminar a través de axios se conecte al Api que fue creada en videos anteriores y poder realizar la acción de borrar el registro de la base de datos.

Ahora, como es de conocimiento, siempre es importante hacerle saber al usuario que la acción solicitada ha sido ejecutada correctamente, es decir presentar un mensaje con algo como "Se ha eliminado correctamente el registro" y poder así confirmarle al usuario lo realizado.

Para esto vamos a utilizar algunas tecnologías conocidas como Bootstrap para las mejoras del diseño y Jquery para el dinamismo, otra tecnología que posiblemente sea nueva para ti es Toastr.

Toastr: es un sistema básico de javascript dedicado única y exclusivamente al tema de las notificaciones, toastr depende de jquery con lo cual podremos darnos cuenta si jquery puede trabajar junto a vue.

Añadir archivos al proyecto

Primero que nada, tenemos que agregar de forma local a nuestro proyecto ordenadamente todas estas tecnologías de la siguiente manera:

  1. De la página oficial de bootstrap (enlace) realizamos un guardar como, del código de su .js y guardamos el nuevo archivo en la ruta resources\assets\js\bootstrap.js de nuestro proyecto.
  2. De la misma manera lo hacemos con su archivo .css (enlace) lo guardamos en la siguiente ruta resources\assets\css\bootstrap.css.
  3. En la página de Jquery (enlace) guardamos su código de la misma manera, en la siguiente ruta resources\assets\js\jquery.js.
  4. Para descargarnos el sistema de notificaciones nos dirigimos a la página de Toastr (enlace) y guardamos el archivo en la siguiente ruta resources\assets\js\toastr.js.
  5. Así mismo realizamos el proceso de guardar su archivo de estilos (enlace) pero en cambio lo guardamos en esta ruta resources\assets\css\toastr.css.

Una vez que hayamos terminado de agregar todos estos archivos, tenemos que dirigirnos al webpack.min.js para registrarlos y compilarlos en solo dos archivos, como lo indicamos en el video 1 de esta serie. Esto nos quedaría de la siguiente forma.

<script>
    mix.scripts([
        'resources/assets/js/jquery.js',
        'resources/assets/js/bootstrap.js',
        'resources/assets/js/toastr.js',
        'resources/assets/js/vue.js',
        'resources/assets/js/axios.js',
        'resources/assets/js/app.js',
    ], 'public/js/app.js').styles([
        resources/assets/css/bootstrap.css',
        'resources/assets/css/toastr.css',
    ], 'public/css/app.css');
</script>

No debemos olvidar que cuando modifiquemos el archivo webpack.min.js, hay que realizar por consola una nueva compilación del mismo con el siguiente comando npm run dev.

Configuración del mensaje

Para proceder con la implementación del mensaje tenemos previamente que modificar nuestro archivo o vista plantilla resources\views\app.blade.php al cual tenemos que agregarle las referencias a los archivos creados con la compilación del webpack.

Dentro de las etiquetas <head></head> añadimos la línea de referencia al archivo compilado de estilos.

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Además, dentro de las etiquetas <body></body> añadimos la línea de referencia al archivo compilado de scripts.

<script src="{{ asset('js/app.js') }}"></script>

Finalmente, en el anterior video habíamos creado con código vue el método deleteKeep() dentro del archivo resources\assets\js\app.js, pues aquí es donde sucederá la magia de esta práctica.

El método se conectaba por axios a una ruta de nuestra Api, luego realizaba la eliminación del registro con el id indicado y terminaba con la llamada al método getKeeps() para volver a listar o actualizar de nuevo los registros.

Después de listar los registros es donde vamos a implementar un mensaje con Toastr, de la siguiente manera:

<script>
deleteKeep: function(keep) {
    var url = 'tasks/' + keep.id;
    axios.delete(url).then(response => { //eliminamos
        this.getKeeps(); //listamos
        toastr.success('Eliminado correctamente'); //mensaje
    });
}
</script>

Con esto ya podríamos dirigirnos al navegador para probar el mensaje de confirmación al eliminar un registro dándonos cuenta lo vistoso y dinámico de su presentación.

Como podemos apreciar, el uso o la implementación de estos mensajes es sencillamente fácil, simplemente necesitamos de agregar los archivos necesarios al proyecto ya sea localmente o vía cdn, luego agregar sus referencias a la vista en la que deseemos usarlas, configurar su sintaxis y listo! Ya contamos con un sistema más amigable al usuario.

  • Mauricio España

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer