Cómo agregar mensajes flash

Los mensajes flash son una excelente manera de agregar algunas notificaciones simples a los usuarios de su sitio web o aplicación sobre eventos importantes que pueden haber ocurrido. HTTP es un protocolo sin estado, por lo que para mostrar un mensaje después de que se haya producido una solicitud en particular, podemos hacer uso de sesiones que mantienen el estado de una solicitud a la siguiente. Los mensajes flash utilizan un tipo especial de sesión que solo se mantiene el tiempo suficiente para que un mensaje se muestre una y solo una vez. Tan pronto como el usuario navega a otra página, el mensaje flash desaparece. Veamos cómo podemos agregar algunos mensajes flash a nuestra aplicación de juegos aquí.

¿Dónde le gustaría mostrar el mensaje?

El lugar más fácil y destacado para mostrar mensajes de interacción del usuario a sus usuarios probablemente sea justo debajo del área de navegación del sitio web. Como estamos familiarizados con los archivos de vista parcial y los beneficios que brindan, usaremos un archivo de vista parcial para ayudarnos con nuestra mensajería flash.

En nuestro directorio de parciales que se puede encontrar en resources / views / partials agregaremos el archivo flash.blade.php así:

1
2
3
@if($message = session('message'))
    <div class="alert alert-{{ session('type') }}">{!! $message !!}</div>
@endif

Hacemos uso de una ifdeclaración condicional simple en Blade para mostrar o no mostrar el div que contiene un mensaje. Si hay un mensaje en la sesión, de hecho lo mostraremos. También puede notar que estamos incluyendo una sesión de typeen el marcado. Esto se debe a que, según el tipo de acción que se lleve a cabo, nos gustaría poder mostrar un mensaje flash que indique el éxito o el fracaso, o tal vez solo un mensaje informativo.

Con nuestro archivo de vista parcial creado, podemos incluirlo en nuestro diseño maestro como vemos aquí:

1
2
3
4
5
6
7
8
9
10
11
12
13
@include('partials.headcontent')
 
<body class="pb-2">
 
@include('partials.navbar')
 
@include('partials.flash')
 
<div class="container" style="margin-top:10px;">
    @yield('content')
</div>
 
@include('partials.footercontent')

Mensajes flash de inicio y cierre de sesión

Tenemos un marcado básico para mostrar un mensaje flash. Ahora todo lo que tenemos que hacer es decidir dónde nos gustaría que aparezcan los mensajes flash. Probablemente, el escenario más común para esto es simplemente para las funciones de inicio y cierre de sesión. Si un usuario inicia sesión, deberíamos mostrar un pequeño mensaje flash de éxito que lo indique. De manera similar, también deberíamos proporcionar un mensaje al usuario de que se ha desconectado cuando, de hecho, lo hace. Primero, abordemos el mensaje flash de inicio de sesión.

Iniciar sesión en mensaje flash

La acción de inicio de sesión se maneja a través del método store () en nuestro controlador de sesiones. Sigamos adelante y hagamos uso del método session () -> flash () para ayudarnos aquí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class SessionsController extends Controller
{
    public function __construct()
    {
        $this->middleware('guest')->except('destroy');
    }
    
    public function create()
    {
        return view('sessions.create');
    }
    
    public function store()
    {
        if (auth()->attempt(request(['email', 'password'])) == false) {
            return back()->withErrors([
                'message' => 'The email or password is incorrect, please try again'
            ]);
        }
        
        session()->flash('message', '<b>Nice!</b> You are now logged in');
        session()->flash('type', 'success');
        
        return redirect()->to('/games');
    }
    
    public function destroy()
    {
        auth()->logout();
        
        return redirect()->to('/games');
    }
}

El método session () -> flash () sigue adelante y llena la sesión con datos para la siguiente solicitud. Entonces, en el fragmento de arriba, llamamos a este método dos veces. Primero configuramos una tecla de messagepara mantener el texto real que queremos mostrar al usuario. Además, estamos incrustando algunas marcas html en la cadena que se mostrará en nuestro archivo flash.blade.php gracias al uso de {!! !!}llaves. Esto genera html sin escapar de él. Cuando se utilizan las {{ }}llaves, la salida se escapa.

La segunda llamada al método session () -> flash () establece a type. Hacemos esto para que podamos asignar colores al mensaje flash como mejor nos parezca. Como esto indica un inicio de sesión exitoso, configuramos el tipo como exitoso. ¡Probémoslo! mensaje flash para iniciar sesión en el sitio

Mensaje flash de cierre de sesión

Parece que el mensaje flash de inicio de sesión funciona bien. Incluso lleva algún formato de texto en negrita como hablamos. Ahora agreguemos también un mensaje flash que el usuario verá cuando cierre la sesión. De manera similar al ejemplo anterior, configuraremos tanto un mensaje como una clave de tipo. Estableceremos el tipo de este en info para que sea más un mensaje informativo simple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class SessionsController extends Controller
{
    public function __construct()
    {
        $this->middleware('guest')->except('destroy');
    }
    
    public function create()
    {
        return view('sessions.create');
    }
    
    public function store()
    {
        if (auth()->attempt(request(['email', 'password'])) == false) {
            return back()->withErrors([
                'message' => 'The email or password is incorrect, please try again'
            ]);
        }
        
        session()->flash('message', '<b>Nice!</b> You are now logged in');
        session()->flash('type', 'success');
        
        return redirect()->to('/games');
    }
    
    public function destroy()
    {
        auth()->logout();
        
        session()->flash('message', 'You are now <b>logged out</b>');
        session()->flash('type', 'info');
        
        return redirect()->to('/games');
    }
}

Probemos ahora la función de mensaje flash de cierre de sesión.
cerrar sesión mensaje flash

¡Esto luce bien! Esta vez, cambiamos el tipo a info para que podamos ver que el mensaje flash es más de un color azul.

¿Dónde más agregar mensajes flash?

¿Dónde más deberíamos agregar mensajes flash? Bueno, los mensajes flash son bastante buenos y es posible que tenga la tentación de comenzar a agregarlos para cada acción que realice el usuario. Sin embargo, probablemente este no sea un gran pensamiento. Los mensajes flash son algo así como especias y efectos de JavaScript frontales. Ambos son agradables, pero si se excede, se convierte en una mala situación. Podríamos agregar mensajes flash para el registro de usuarios, envío de juegos, reseñas de juegos y más. Agreguemos los mensajes flash solo para el registro de un nuevo usuario y la presentación de un nuevo juego y luego terminemos el día.

Mensaje flash de registro de nuevo usuario

Lo bueno de los mensajes flash es que, dado que ese parcial ya está configurado para nosotros, es realmente tan simple como encontrar el método del controlador en el que desea actualizar la sesión y agregar esa llamada a session () -> flash (). Entonces, para el nuevo escenario de registro de usuario, esto está en el método store () de nuestro controlador de registro.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\User;
 
class RegistrationController extends Controller
{
    public function __construct()
    {
        $this->middleware('guest');
    }
    
    public function create()
    {
        return view('registration.create');
    }
    
    public function store()
    {
        $this->validate(request(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|confirmed'
        ]);
        
        $user = User::create(request(['name', 'email', 'password']));
        
        auth()->login($user);
        
        session()->flash('message', '<b>Hi there!</b> Thanks for signing up!');
        session()->flash('type', 'success');
        
        return redirect()->to('/games');
    }
}

Con solo esas dos líneas de código agregadas, podemos ver que tenemos éxito. mensaje flash de registro de nuevo usuario

Mensaje Flash de envío de nuevos juegos

¡Este es el segundo sombrero para nosotros en este momento! Sigamos adelante y agreguemos un par de líneas de código al método store () en nuestro controlador de juegos. Observe que configuramos la sesión flash justo antes de que la aplicación realice una redirección.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Game;
use App\User;
 
class GamesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth')->except(['index', 'show']);
    }
    
    public function index()
    {
        $games = Game::latest()->get();
        
        return view('games.index', ['games' => $games]);
    }
    
    public function show(Game $game)
    {
        return view('games.show', ['game' => $game]);
    }
    
    public function create()
    {
        return view('games.create');
    }
    
    public function store()
    {
        $this->validate(request(), [
            'title' => 'required|unique:games',
            'publisher' => 'required',
            'releasedate' => 'required',
            'image' => 'required',
        ]);
        
        $game = new Game;
        
        $game->title = request('title');
        $game->publisher = request('publisher');
        $game->releasedate = request('releasedate');
        $game->image = request()->file('image')->store('public/images');
        $game->user_id = auth()->id();
        $game->save();
        
        session()->flash('message', 'Nice Game Submission!');
        session()->flash('type', 'success');
        
        return redirect('/games');
    }
}

¡Este nuevo mensaje flash de envío de juegos también funciona muy bien! Nuestro nuevo usuario también se agrega directamente a nuestro widget de remitentes de juegos activos, muy bueno.

mensaje flash de envío de nuevo juego

Header Ads Widget

Cómo agregar mensajes flash

¿Dónde le gustaría mostrar el mensaje?

Mensajes flash de inicio y cierre de sesión

Iniciar sesión en mensaje flash

Mensaje flash de cierre de sesión

¿Dónde más agregar mensajes flash?

Mensaje flash de registro de nuevo usuario

Mensaje Flash de envío de nuevos juegos

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget