Todo List: Hiển thị thông báo trong ứng dụng Laravel

Bài viết được sự cho phép của tác giả Kien Dang Chung

Video trong bài viết

Trong bài Kiểm tra dữ liệu, chúng ta đã hiển thị các thông báo về lỗi nhập liệu đến người dùng, các thông báo này rất cần thiết để người dùng biết được trạng thái nhập liệu. Ngoài những thông báo lỗi, chúng ta còn những thông báo cần thiết khác, ví dụ như khi đã thực hiện xong một công việc nào đó.

API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth

Bộ cài đặt Laravel Installer đã hỗ trợ tích hợp Jetstream

Laravel Session lưu dữ liệu dùng chung trong phiên

Như các bạn đã biết, HTTP là giao thức stateless tức là giao thức không trạng thái, các lần truy cập khác nhau sẽ không liên quan và lưu trữ trạng thái của nhau. Chính vì vậy, để lưu trữ thông tin qua các lần truy cập khác nhau, chúng ta có Laravel Session.

Session trong Laravel có thể lưu trữ ở các dạng như file, database, cookie và cả memcache… Để lưu trữ thông tin giữa các lần truy cập rất đơn giản sử dụng cú pháp như sau:

$request->session()->put('key', 'value');

Thông tin lưu trữ ở dạng cặp (key, value), muốn lấy thông tin này thì sử dụng:

$request->session()->get('key');

Lưu trữ dữ liệu nhanh

Đôi khi chúng ta chỉ muốn lưu trữ các thông tin cho đến request tiếp theo, ví dụ khi thao tác dữ liệu ở request hiện tại, trong request tiếp theo chúng ta muốn hiển thị trạng thái là đã thao tác thành công. Các dữ liệu này ở những request kế tiếp đó sẽ bị xóa đi. Để lưu trữ các dữ liệu nhanh này chúng ta sử dụng cú pháp:

$request->session()->flash('success', 'Create todo successful!');

Hiển thị thông báo

Trong các bài học trước, chúng ta mới chỉ hiển thị lỗi khi kiểm tra dữ liệu, trong bài này chúng ta sẽ sử dụng Laravel Session để lưu trữ thông tin giữa các request và hiển thị thông báo khi các thao tác với bản ghi Todo hoàn thành.

Đầu tiên, chúng ta sẽ thực hiện hiển thị thông báo khi lưu trữ Todo thành công, việc lưu trữ này do phương thức store() trong TodosController đảm nhận, sau khi thực hiện save dữ liệu chúng ta sẽ lưu thông tin trạng thái vào Session và trong request tiếp theo sẽ hiển thị nó lên:

public function store()
{
    $this->validate(request(), [
        'name' => 'required|min:6|max:12',
        'description' => 'required'
    ]);

    $data = request()->all();

    $todo = new Todo();
    $todo->name = $data['name'];
    $todo->description = $data['description'];
    $todo->completed = false;
    $todo->save();

    session()->flash('success', 'Todo created successfully.');

    return redirect('/todos');
}

Ở đây sau khi lưu dữ liệu xuống database, chúng ta lưu thông tin (‘success’, ‘Todo created successfully.’) vào Session. Trong request tiếp theo chính là redirect(‘/todos’) là trang danh sách todos, chúng ta hiển thị thông báo này. Chú ý là thông báo này sẽ hiển thị ở các trang khác nhau, do đó sẽ đưa phần hiển thị vào file bố cục resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  <title>
    @yield('title')
  </title>
</head>
  <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">Todos App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/todos">todos <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="/new-todos">Create todos <span class="sr-only">(current)</span></a>
            </li>
          </ul>
        </div>
      </nav>
    <div class="container">
      @if(session()->has('success'))
        <div class="alert alert-success">
          {{ session()->get('success') }}
        </div>
      @endif
      @yield('content')
    </div>
  </body>
</html>

Thử tạo mới một Todo chúng ta sẽ có thông báo “Todo created successfully!” khi hoàn thành.

Hiển thị thông báo khi tạo Todo

Tương tự với trường hợp cập nhật và xóa dữ liệu chúng ta cập nhật các phương thức update() và destroy() trong TodosController như sau:

public function update(Todo $todo)
{
    $this->validate(request(), [
        'name' => 'required|min:6|max:12',
        'description' => 'required'
    ]);

    $data = request()->all();

    $todo->name = $data['name'];
    $todo->description = $data['description'];
    $todo->save();

    session()->flash('success', 'Todo updated successfully.');

    return redirect('/todos');
}

public function destroy(Todo $todo)
{
    $todo->delete();

    session()->flash('success', 'Todo deleted successfully.');

    return redirect('/todos');
}

Source code: Bài 16 – Hiển thị thông báo thông qua Laravel Session

Bài viết gốc được đăng tải tại allaravel.com

Có thể bạn quan tâm:

Xem thêm tuyển lập trình Laravel hấp dẫn trên TopDev