post-image

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

Tổng quan

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');
Code language: PHP (php)

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');
Code language: PHP (php)

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!');
Code language: PHP (php)

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'); }
Code language: PHP (php)

Ở đâ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>
Code language: HTML, XML (xml)

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'); }
Code language: PHP (php)

Cảm ơn các bạn đã đọc.

Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Tham khảo: https://topdev.vn/blog/todo-list-hien-thi-thong-bao-trong-ung-dung-laravel/

Leave a Reply

Your email address will not be published. Required fields are marked *