07 Como INSTALAR SWEETALERT para mandar MENSAJES en el Sistema de Ventas con (PHP y MySql) FullStack

Duración: 16 min
Módulo: 🚀 Preparación, Login y Sesiones Seguras Lección 8 de 9

Descripción

💬 Lección 07: Instalación e Implementación de SweetAlert2

✨ Mensajes Dinámicos y Atractivos para tu Sistema de Ventas

Esta lección cubre la integración de la librería SweetAlert2, una herramienta que mejora drásticamente la experiencia del usuario al reemplazar las alertas nativas del navegador con mensajes más estéticos, personalizables y llamativos.

Contenido Esencial que Cubre la Lección:

  • 🛠️ Instalación mediante CDN: Se explica cómo integrar rápidamente SweetAlert2 en el proyecto simplemente copiando el script del CDN (Content Delivery Network) oficial y pegándolo en el <head> del archivo HTML (index.php) [01:47].
  • 📬 Mensaje de Bienvenida (index.php):
    • Se utiliza SweetAlert2 para mostrar un mensaje de bienvenida llamativo al ingresar al dashboard principal [04:03].
    • Se personaliza el mensaje, concatenando la sesión de correo electrónico ($_SESSION['sesion_email']) para saludar al usuario por su email [04:42].
    • Se configura la duración del mensaje para que desaparezca automáticamente (por ejemplo, después de 5 segundos) [06:06].
  • 🚨 Mensaje de Error de Login (login/index.php):
    • Envío de Sesión de Error: En el controlador de login (ingreso.php), si la validación falla, se crea una sesión temporal llamada $_SESSION['mensaje'] que contiene el texto del error (ej. "Error datos incorrectos") [07:04].
    • Recepción y Muestra: En la vista de login (login/index.php), se utiliza PHP para verificar si existe esta sesión de error. Si existe, se ejecuta un script de SweetAlert2 que muestra el mensaje y el ícono de error [14:13].
    • Lectura del Mensaje: El contenido de la sesión de error se imprime dentro de la alerta de SweetAlert2, asegurando que el mensaje dinámico sea visible [12:22].

¡Al finalizar, tu sistema tendrá mensajes de alerta modernos y personalizados que mejorarán significativamente la interacción del usuario!