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


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 [
     ...