Trong phần này, chúng ta sẽ tìm hiểu cửa sổ bật lên thông báo tin nhắn. Chúng ta sẽ sử dụng toastr JS plugin và Laravel để làm việc này. Toast là một loại thư viện JavaScript, được sử dụng để hiển thị các hộp bật lên không bị chặn và không phô trương để gửi thông báo thông tin đến người dùng web hoặc thiết bị di động của chúng tôi. Nếu chúng tôi chỉ định một khoảng thời gian nào đó cho thông báo toastr, sau khoảng thời gian đó, nó sẽ tự động loại bỏ. Khi chúng tôi thực hiện một số hành động, chúng tôi luôn cần nhận được cảnh báo thông báo, chẳng hạn như nếu chúng tôi xóa các mục khỏi bất kỳ trang web hoặc biểu mẫu nào hoặc bất kỳ nơi nào, một thông báo sẽ mở ra, thông báo này sẽ hiển thị một thông báo như "Đã xóa mục thành công". Cảnh báo thông báo rất quan trọng đối với người dùng cuối để họ có thể dễ dàng hiểu điều gì đang xảy ra và nó cũng cung cấp cho họ khả năng đọc dễ hiểu hơn. Để thêm cảnh báo thông báo, chúng tôi có nhiều phiên bản Laravel khác nhau như Laravel 5, 6, 7 và 8
Bây giờ chúng tôi có thể hiển thị cửa sổ bật lên thông báo bằng cách thêm plugin toastr js. Plugin này được sử dụng để cung cấp thông báo về thông báo cảnh báo, thông báo thông tin, thông báo lỗi, thông báo thành công, v.v. Sử dụng điều này, chúng tôi có thể thêm thông báo với bố cục ấn tượng. Để hiển thị thông báo, Laravel cũng có rất nhiều gói, nhưng trong ứng dụng dưới đây của chúng tôi, chúng tôi sẽ sử dụng plugin toastr JS. Để hiện thông báo ta thêm code toastr jQuery. Sau đó, chúng tôi có thể quản lý nó bằng phiên. Việc triển khai và sử dụng plugin toastr JS được mô tả trong ví dụ bên dưới và nó rất dễ sử dụng. Để thêm thông báo, chúng tôi phải làm theo một số bước, được mô tả như sau
Bước 1
Trong bước này, chúng tôi sẽ tạo tuyến đường mới. Tuyến mới này sẽ được sử dụng để kiểm tra thông báo toastr như thế này
ứng dụng/Http/tuyến. php
Bước 2
Trong bước này, chúng ta sẽ thêm phương thức Trình điều khiển. Chúng tôi sẽ tạo HomeController làm bộ điều khiển mới. Sau này, chúng tôi sẽ thêm đoạn mã sau vào nó như thế này
ứng dụng/Http/Bộ điều khiển/HomeController. php
Bước 3
Trong bước này, chúng ta sẽ Tạo tệp Thông báo cho Bố cục. Chúng tôi sẽ tạo kiểm tra thông báo. lưỡi. php dưới dạng tệp mới để bố trí. Bây giờ chúng tôi sẽ sử dụng thư mục tài nguyên của mình để tạo tệp này
tài nguyên/lượt xem/kiểm tra thông báo. lưỡi. php
Bước 4
Trong bước này, chúng ta sẽ Hiển thị toastr. thông báo js. Đối với điều này, chúng tôi sẽ tạo một tệp có tên thông báo. lưỡi. php, sẽ hữu ích để hiển thị toastr. thông báo js. Chúng tôi sẽ thêm tệp này vào tệp mặc định của chúng tôi để chúng tôi không cần phải viết cùng một mã ở mọi nơi. Đối với điều này, chúng tôi sẽ sử dụng thông báo. lưỡi. tập tin php. Vì vậy, chúng tôi sẽ thêm đoạn mã sau vào nó như thế này
tài nguyên/lượt xem/thông báo. lưỡi. php
Bây giờ mã trên của chúng tôi đã sẵn sàng để chạy. Khi chúng tôi chạy mã này, bất kỳ cửa sổ bật lên thông báo nào sau đây sẽ được tạo dưới dạng đầu ra trên cơ sở hành động của chúng tôi
Trong bài đăng này, tôi muốn chỉ cho bạn cách thêm cửa sổ bật lên thông báo plugin toastr js trong laravel 6, laravel 7, laravel 8 và laravel 9 từ đầu. plugin toastr cung cấp cho chúng tôi thông báo tin nhắn thành công, thông báo tin nhắn thông tin, thông báo tin nhắn cảnh báo, thông báo tin nhắn lỗi theo cách đó chúng ta có thể thêm thông báo với bố cục tốt
Laravel cũng có một số gói để thông báo nhưng tôi sử dụng plugin toastr js, cung cấp bố cục đẹp và khá thú vị
Chúng tôi yêu cầu thêm mã jquery toastr một lần để thông báo, sau đó chúng tôi có thể quản lý bằng phiên. Trong ví dụ này, bạn có thể dễ dàng hiểu cách triển khai và sử dụng
Trước tiên, chúng tôi sẽ thêm tuyến đường mới để kiểm tra thông báo toastr như dưới đây
ứng dụng/Http/tuyến. php
Route::get['notification', 'HomeController@notification'];
Ok, bây giờ chúng tôi yêu cầu thêm phương thức điều khiển, vì vậy nếu bạn chưa có HomeController thì hãy tạo HomeController mới và thêm mã như dưới đây
ứng dụng/Http/Bộ điều khiển/HomeController. php
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function notification[]
{
session[]->set['success','Item created successfully.'];
return view['notification-check'];
}
}
Tiếp theo, chúng tôi yêu cầu tạo kiểm tra thông báo. lưỡi. php để bố trí, vì vậy hãy tạo kiểm tra thông báo mới. lưỡi. tệp php trong thư mục tài nguyên
tài nguyên/lượt xem/kiểm tra thông báo. lưỡi. php
Check For Notification toastr
@include['notification']
Dashboard
Check for notification
Cuối cùng, chúng tôi yêu cầu tạo thông báo. lưỡi. tệp php để hiển thị toastr. thông báo js. tệp này chúng tôi có thể đưa vào tệp mặc định của mình theo cách đó chúng tôi không yêu cầu viết cùng một mã ở mọi nơi