SweetAlert en Laravel 5.5

SweetAlert en Laravel 5.5

En un post anterior hablamos de SweetAlert como librería e hicimos un par de ejercicios, aquí tienes el enlace Notificaciones al usuario con SweetAlert. Allí hacemos énfasis en que 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. Aquí veremos cómo usar SweetAlert en Laravel 5.5


Esta integración es genial, veremos un par de ejercicios muy útiles para que desde ya empieces a usar esta función en proyectos... En resumen o para aclarar ¿Qué estamos haciendo? Respuesta: Usando SweetAlert desde PHP

El objetivo es claro, aprenderemos a implementar esta librería JavaScript en Laravel 5.5. El paquete que vamos a usar se llama uxweb/sweet-alert Lo interesante es que se adapta a cualquier versión de Laravel y también (con su respectivo ajuste) en proyecto PHP. Podemos usar esta tecnología para generar hermosos mensaje de alerta, mensajes de confirmación antes de borrar y así usarlo ante cualquier necesidad de tu proyecto.

Vamos a usar un controlador llamado SweetController.php para probar los diferentes tipos como: basic, message, success, info, warning y error.

Paso 1

Vamos a instalar Laravel 5.5 usando el comando composer create-project --prefer-dist laravel/laravel sweetalert

Paso 2

Nos dirigimos a la carpeta del proyecto e instalamos el paquete usando el comando composer require uxweb/sweet-alert y hacemos su respectiva configuración trabajo de rutina.

Vamos al archivo config/app.php y agregamos el acceso al Service Provider y creamos un Alias.

'providers' => [
    //
    UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];
'aliases' => [
    //
    'Alert' => UxWeb\SweetAlert\SweetAlert::class,
];

Paso 3

Trabajemos en el controlador, vista y las rutas, para crearlo usamos en comando php artisan make:controller SweetController, para las rutas vamos al archivo routes/web.php.

Archivo de rutas config/web.php

Route::get('/', function () {
    return view('home');
})->name('home');

Route::get('tipo/{type}', 'SweetController@notification');

Controlador app/Http/Controllers/SweetController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SweetController extends Controller
{
    public function notification($type)
    {
        switch ($type) {
            case 'message':
                alert()->message('Notificación solo con mensaje');
                break;
            case 'basic':
                alert()->basic('Notificación Básica, mensaje y título', 'Título');
                break;
            case 'info':
                alert()->info('Notificación tipo Información');
                break;
            case 'success':
                alert()->success('Notificación de Éxito.','Título')->autoclose(3000);
                break;
            case 'error':
                alert()->error('Notificación de Error');
                break;
            case 'warning':
                alert()->warning('Notificación de Advertencia');
                break;
        }

        return redirect()->route('home');
    }
}

Vista resources/views/home.blade.php

<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
        <title>SweetAlert en Laravel 5.5 | Rimorsoft Online</title>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center">SweetAlert en Laravel 5.5</h1>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
        @include('sweet::alert')
    </body>
</html>

En la vista toma en cuenta que debemos incluir el CSS de Bootstrap (No obligatorio, solo que yo usé las clases container y text-center) y de SweetAlert, ademas de incluir el JS de SweetAlert... Importante: Incluir @include('sweet::alert') que es quien se encarga de preparar el mensaje con la estructura adecuada..

Ampliando @include('sweet::alert')

Con esta línea conseguimos generar la estructura del mensaje y gracias a eso se dispara correctamente la notificación.

<script> 
    swal({
        "timer":1800,
        "title":"Título",
        "text":"Notificación Básica",
        "showConfirmButton":false
    });
</script>

El código como siempre está en nuestro perfil en Github https://github.com/rimorsoft/SweetAlert-con-Laravel-5.5

Para probar el sistema solo debes...

Ir al navegador y escribir (depende de tu configuración, localhost, dominio, ip, etc):

  • http://dominio/tipo/success
  • http://dominio/tipo/error
  • y así con cada tipo de mensaje

Así culminamos este post ...y sobre esto ¿qué opinas?

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


Spatie/Laravel Permission ¿Cómo agregar campos en la tabla "roles"?

Hola, mi consulta es la siguiente:

Relacioné la tabla "roles" con mi tabla** "empresa**", es decir, en la tabla "roles", tengo el campo "id_empresa", en la vista, están los campos necesarios y el select de la empresa pero al querer guardar los datos, me arroja el siguiente error: ** "The given role or permission should use guard web instead of Empresas. "** No ...

SOFTWARE PARA CONSULTORIOS MEDICOS

Hola Amigos. soy nuevo en el grupo.. me gustaria saber si alguien tiene o tuvo algun proyecto basado en laravel, para consultorios medicos? ...

sincronización de componentes hermanos

un gran saludo a la comunidad rimorsorf... espero de su valiosa ayuda para mi problema que es el siguiente:

tengo dos componentes en el mismo nivel, el primero crea una tabla con una lista de procesos por tramitar y el segundo componente lista en una tabla los procesos que se han asignado para tramitar; cuando en la primera tabla se asigna el proceso este debe desaparecer de...

plantilla blade y vuejs2

buenas noches comunidad, por casualidad alguien sabrá si se puede integrar la plantilla de laravel blade en vuejs2 component??, gracias dee antemano...