47 INSTALANDO SWEETALERT2 en nuestra página de películas con (LARAVEL y MYSQL)FULLSTACK
Duración: 12 minDescripción
🔔 Lección 47: Instalando SweetAlert2 para Mensajes Dinámicos
Esta lección avanzada tiene como objetivo mejorar la experiencia del usuario (UX) y la estética del sistema, reemplazando los alerts predeterminados del navegador y los mensajes de Bootstrap por la librería SweetAlert2. Esto proporciona feedback visualmente atractivo para todas las operaciones del CRUD (registro, actualización y eliminación).
1. 🚀 Integración de la Librería SweetAlert2 [00:54]
SweetAlert2 es una librería que ofrece cuadros de diálogo modernos, personalizables y más agradables que los alerts nativos del navegador.
- Instalación (CDN): Para incorporar SweetAlert2 al proyecto, se utiliza su CDN (Content Delivery Network). El enlace del script debe copiarse y pegarse en la plantilla principal (admin.blade.php o similar) para que esté disponible en todas las vistas de administración [06:20].
2. 📨 Envío de Mensajes desde el Controlador (Sesiones Flash) [01:49]
Para mostrar el alert después de una acción (como registrar o actualizar), el mensaje debe ser enviado desde el backend y estar disponible solo para la siguiente petición HTTP.
- Método with(): Después de que una acción del CRUD se completa (ej. store, update, destroy), se utiliza el método with() en el retorno de la vista o redirección para crear una sesión flash [02:18].
Sintaxis de Envío:
PHP
return redirect()->route('peliculas.index')->with('mensaje', 'Se registró la película de manera correcta');
- Aplicación en el CRUD: El mensaje se aplica a:
3. 🖥️ Implementación y Renderización en la Vista Blade [03:34]
En la vista de listado (index.blade.php), se utiliza la sintaxis de Blade y JavaScript para detectar la sesión flash y ejecutar el SweetAlert.
Condición de Existencia: Se verifica si la sesión con la clave mensaje existe [03:40]:
HTML
@if(Session::has('mensaje')) // ... Lógica de alerta @endif
Recuperación del Mensaje: Dentro de la condición, se recupera el texto de la sesión en una variable de PHP [04:03].
PHP
$message = Session::get('mensaje');
Ejecución de SweetAlert: Se utiliza una etiqueta <script> para inyectar y ejecutar la función de SweetAlert2 con el texto dinámico [06:55].
HTML
<script> Swal.fire({ icon: 'success', title: 'Éxito', // Texto estático text: "{{ $message }}" // Texto dinámico de la sesión }); </script>
- Resultado: Al completar cualquier operación de CRUD, el usuario ve una notificación de éxito con el mensaje específico de la acción realizada [07:53].
📝 Nota Adicional: Refactorización del Campo Categoría [10:38]
Se menciona una refactorización previa en la vista de creación (create.blade.php) donde el input simple de texto para Categoría fue reemplazado por un select option. Este cambio se realiza para asegurar que la entrada de datos de categorías sea consistente y se base en valores predefinidos, mejorando la integridad de los datos.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
