29 Como instalar SWEETALERT2 sin morir en el intento de LARAVEL 10 -Sistema de control de asistencia

Duración: 10 min
Módulo: Notificaciones y Mensajes Personalizados 🎉 Lección 3 de 3
Anterior
28 Cambiar el idioma de los mensajes en el curso de LARAVEL 10 - Sistema de control de asistencia
Siguiente
30 Función SHOW para mostrar datos de un registro con de LARAVEL 10-Sistema de control de asistencia

Descripción

🎬 Lección 29: 🔔 Integración de SweetAlert2 para Mensajes Dinámicos

Enlace del Video: https://youtu.be/XSw27Dxj3CA

💡 Objetivo:

Instalar la librería SweetAlert2 y configurar el backend y el frontend para mostrar un mensaje de éxito atractivo y temporal (tipo flash message) después de que un registro se haya guardado correctamente.

1️⃣ Instalación Sencilla de SweetAlert2 📦

La librería se integra al proyecto de forma rápida utilizando el método de CDN (Content Delivery Network):

  • Se copia la etiqueta <script> del CDN de SweetAlert2.
  • Se inserta el script en el archivo principal de la plantilla (layout/admin.blade.php) [01:07]. Con esto, la librería queda disponible en todas las vistas que utilicen este layout.

2️⃣ Lógica del Controlador (Backend) 💾

Se ajusta la función store() del controlador para manejar la redirección y el mensaje de éxito una vez que el proceso de guardado ($miembro->save()) finaliza correctamente:

  • Redirección: En lugar de dejar una página en blanco, el controlador ahora utiliza return redirect() para enviar al usuario de vuelta al listado principal de miembros (miembros.index) [04:06].
  • Mensaje Temporal: Se encadena el método ->with('mensaje', '...') a la redirección [05:27]. Este método crea una "sesión flash", guardando el mensaje de éxito ("Se registró al miembro de la manera correcta") temporalmente para que solo esté disponible en la siguiente solicitud (la de la página de destino).

3️⃣ Renderizado del Mensaje (Frontend) 🖥️

En la vista de listado (index.blade.php), se añade la lógica para detectar y mostrar el mensaje SweetAlert:

  • Comprobación de Sesión: Se utiliza una estructura condicional de Blade para preguntar si existe la variable 'mensaje' en la sesión [06:53].

    PHP

    @if(Session::has('mensaje'))   

     // Código del SweetAlert

    @endif

  • Activación del SweetAlert: Dentro de esta condición, se inserta el código JavaScript de SweetAlert, utilizando la variable de sesión para inyectar el texto dinámicamente [07:30]:
    • Se muestra un mensaje con el título "Buen Trabajo" y el texto contenido en la variable de sesión.
  • Resultado: El usuario ve un elegante mensaje emergente confirmando el registro, y al recargar o navegar, el mensaje desaparece, ya que se trataba de una sesión temporal [08:30].
$0.00
Iniciar sesión para inscribirse

Lecciones

Inicio Rápido y Configuración del Proyecto 🚀
Lección 1. 01 Presentación al curso de LARAVEL 10 - Sistema de control de asistencia 9 min
Lección 2. 02 Hola mundo en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 3. 03 Autenticación LOGIN/REGISTRO en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 4. 04 Migración de tablas a la BASE de DATOS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 5. 05 Como INSTALAR ADMINLTE dashboard en el curso de LARAVEL 10 Sistema de control de asistencia 11 min
Lección 6. 06 Como RESTRINGIR REGISTER en dashboard en el curso de LARAVEL 10 Sistema de control de asistencia 10 min
Lección 7. 07 Personalizar el PANEL DASHBOARD en el curso de LARAVEL 10 Sistema de control de asistencia 16 min
Lección 8. 08 PLANTILLAS BLADE en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 9. 09 Vistas con las plantillas de BLADE en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 10. 10 Respondiendo preguntas en el curso de LARAVEL 10 - Sistema de control de asistencia 9 min
Arquitectura MVC y Gestión de Modelos 🏗️
Lección 1. 11 Creación de tabla y migración en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 2. 12 Creación del MODELO MVC en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 3. 13 Revertir migración con ROLLBACK en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 4. 14 CONTROLADORES en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Sembrado de Datos y Visualización Básica 🗄️
Lección 1. 15 CRUD - Read lectura de datos en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 2. 16 Correr SEEDER para sembrar DATOS en el curso de LARAVEL 10 - Sistema de control de asistencia 14 min
Lección 3. 17 Correr FACTORY para crear DATOS en el curso de LARAVEL 10 - Sistema de control de asistencia 11 min
Lección 4. 18 Cargar DATOS de la TABLA en la vista en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Tablas Dinámicas y Experiencia de Usuario 📊
Lección 1. 19 Utilizar DataTables en el curso de LARAVEL 10 - Sistema de control de asistencia 18 min
Lección 2. 20 Poner DATATABLES en español en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Formulario de Creación y Seguridad de Datos 🛡️
Lección 1. 21 FORMULARIO para registrar datos en el curso de LARAVEL 10 - Sistema de control de asistencia 14 min
Lección 2. 22 Respondiendo comentarios en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 3. 23 Validando el formulario en el curso de LARAVEL 10 - Sistema de control de asistencia 13 min
Lección 4. 24 Request Store del formulario en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 5. 25 CRUD Create guardar datos en la tabla enel curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 6. 26 Validación de datos desde el Backend en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Notificaciones y Mensajes Personalizados 🎉
Lección 1. 27 Mostrar los ERRORES en pantalla en el curso de LARAVEL 10 - Sistema de control de asistencia 11 min
Lección 2. 28 Cambiar el idioma de los mensajes en el curso de LARAVEL 10 - Sistema de control de asistencia 13 min
Lección 3. 29 Como instalar SWEETALERT2 sin morir en el intento de LARAVEL 10 -Sistema de control de asistencia 10 min
Consulta de Detalles y Gestión de Archivos 🖼️
Lección 1. 30 Función SHOW para mostrar datos de un registro con de LARAVEL 10-Sistema de control de asistencia 9 min
Lección 2. 31 Buscar registro de la tabla de la base de datos con LARAVEL 10-Sistema de control de asistencia 11 min
Lección 3. 32 Cargar datos de la tabla de la base de datos con LARAVEL 10-Sistema de control de asistencia 9 min
Lección 4. 33 Cargar fotografia del registro de la base de datos conLARAVEL 10-Sistema de control de asistencia 13 min
Actualización y Eliminación (Update & Delete) 🔄
Lección 1. 34 Función EDITAR datos con LARAVEL 10-Sistema de control de asistencia 10 min
Lección 2. 35 Función OLD para no perder los datos del formulario enLARAVEL 10-Sistema de control de asistencia 9 min
Lección 3. 36 Cargar datos en el formulario para UPDATE en LARAVEL 10-Sistema de control de asistencia 13 min
Lección 4. 37 Controller UPDATE en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 5. 38 Controller DELETE en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 6. 39 Usar FAKE para generar datos reales en curso de LARAVEL 10 Sistema de control de asistencia 11 min
Módulos Secundarios y Funcionalidad Clave 🧩
Lección 1. 40 Módulos ministerios en el curso de LARAVEL 10 Sistema de control de asistencia 49 min
Lección 2. 41 CRUD completo de los ministerios en el curso de LARAVEL 10 Sistema de control de asistencia 35 min
Lección 3. 42 Modificando el DASHBOARD en el curso de LARAVEL 10 Sistema de control de asistencia 22 min
Lección 4. 43 Módulo USUARIOS en el curso de LARAVEL 10 Sistema de control de asistencia 26 min
Lección 5. 44 CRUD completo de los USUARIOS en el curso de LARAVEL 10 Sistema de control de asistencia 52 min
Lección 6. 45 Relacionar TABLAS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 7. 46 Generar CRUD completo de ASISTENCIAS en el curso de LARAVEL 10 Sistema de control de asistencia 14 min
Lección 8. 47 AJUSTES del CRUD ASISTENCIAS en el curso de LARAVEL 10 Sistema de control de asistencia 25 min
Reportes Profesionales, Roles y Despliegue Final 🛡️
Lección 1. 48 REPORTES con DOMPDF en el curso de LARAVEL 10 Sistema de control de asistencia 39 min
Lección 2. 49 REPORTE entre 2 FECHAS en el curso de LARAVEL 10 Sistema de control de asistencia 23 min
Lección 3. 50 ROLES Y PERMISOS en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 4. 51 SEEDER roles y permisos en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 5. 52 Asignar PERMISOS a las RUTAS en el curso de LARAVEL 10 Sistema de control de asistencia 18 min
Lección 6. 53 NAVEGANDO CON LOS ROLES Y PERMISOS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 7. 54 SEEDER USUARIOS por defecto en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 8. 55 COMPARTIENDO el CÓDIGO FUENTE del curso de LARAVEL 10 Sistema de control de asistencia 15 min
Lección 9. 56 DESCARGAR e INSTALAR el PROYECTO del curso de LARAVEL 10 Sistema de control de asistencia 21 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso