Notificaciones al usuario con SweetAlert

SweetAlert

Siempre es importante dar respuestas a las acciones realizadas por el usuario y hay muchas formas de lanzar notificaciones o alertas en una web o sistema web. La idea es dejar de usar el famoso alert() de javascript que, aunque funciona no es estético por su diseño y animación antigua... Así que para esta solución tenemos Sweet Alert, con ella conseguimos dar notificaciones y alertas hermosas, estéticas y mucho mas funcional.


Con Sweet Alert se busca reemplazar el aburrido mensaje de alert o confirm nativo de javascript, luego de este artículo tendrás un resultado mucho más agradable, con muy pocas líneas de código.

Sin sweetalert

<script>
    alert("Oops, Algo salió mal!!");
</script>

Con sweetalert

<script>
    swal("Oops, Algo salió mal!!", "error");
</script>

Ejemplo real, estructura completa y fácil instalación usando CDN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sweetalert | Rimorsoft Online</title>
    </head>
    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script type="text/javascript">
            swal("Mensaje Simple!");
        </script>
    </body>
</html>

Así empezamos, es un mensaje muy sencillo, pero nos ayuda a ver en terminos generales la estructura e integración con el resto del proyecto... Con solo un poco de lógica puedes implementarlo en tus proyectos de inmediato. Al importar sweetalert.min.js en este caso desde un CDN vemos inmediatamente como funciona con estilo y animación.

Veamos más ejemplos:

Título y descripción

<script type="text/javascript">
    swal("Título", "Descripción");
</script>

Título, descripción, icono (info, warning, error y success)

<script type="text/javascript">
    swal("Título", "Descripción", "success");
    //Puedes colocar warning, error, success y por último info.
</script>

Con opciones

Es como me gusta usar la herramienta, de esta manera el control que tengo es mayor.

<script type="text/javascript">
    swal({
        title: "Título",
        text:  "Descripción",
        icon:  "success",
    });
</script>

Tenemos un repositorio en Github con ejemplos actualizados para que puedas descargarlos, copiar, pegar y lo que necesites para su comprensión. https://github.com/rimorsoft/Ejemplos-Sweet-Alert

Puedes hacer de todo con sweetalert, el resto de la información está en su página oficial https://sweetalert.js.org/docs

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...