Laravel hỗ trợ nhiều kênh gửi thông báo, bao gồm email, SMS và Slack. Ngoài ra, thông báo cũng có thể được lưu trữ trong cơ sở dữ liệu và hiển thị trên giao diện Web của bạn. Dưới đây là một số điều bạn sẽ tìm hiểu trong hướng dẫn này:
- Thông báo là gì?
- Các kênh thông báo được hỗ trợ bởi Laravel.
- Cách sử dụng thông báo trực tiếp từ cơ sở dữ liệu trong Laravel.
- Cách sử dụng thông báo qua email trong Laravel.
- Các kênh gửi thông báo khác được hỗ trợ bởi Laravel.
Thông báo trong Laravel
Thông báo có thể được coi là những tin nhắn ngắn, trực tiếp được gửi đến người dùng để thông báo cho họ về thông tin và sự kiện quan trọng hoặc yêu cầu phản hồi trong ứng dụng. Lý tưởng nhất, chúng giữ cho người dùng được cập nhật và tăng cường sự tương tác của người dùng. Laravel cung cấp hỗ trợ gửi thông báo qua nhiều kênh khác nhau. Mặc định, nó bao gồm các kênh mail, Slack, database, broadcast và Vonage.
Bằng cách sử dụng lệnh Laravel Artisan, bạn có thể nhanh chóng tạo thông báo. Bạn cũng có thể tùy chỉnh chi tiết của thông báo.
Các Kênh Thông báo trong Laravel
Laravel cho phép bạn chọn từ nhiều kênh thông báo để gửi thông báo trong ứng dụng của bạn. Bạn có thể sử dụng nhiều kênh hơn một.
Mail — Những thông báo này được gửi dưới dạng email đến người dùng.
SMS — Người dùng nhận các thông báo SMS này trên điện thoại di động của họ.
Database — Những thông báo này được lưu trữ trong cơ sở dữ liệu, và bạn có thể hiển thị chúng cho người dùng với giao diện người dùng tùy chỉnh.
Slack — Những thông báo này được gửi đến các kênh Slack.
Thông báo do cộng đồng đóng góp
Hãy kiểm tra trang web Laravel Notification Channels do cộng đồng đóng góp nếu bạn muốn sử dụng các kênh khác như Telegram.
Bạn cũng có thể quyết định tạo các driver để gửi thông báo qua các kênh khác.
Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng Laravel gửi thông báo qua các kênh email và database. Mã nguồn cho ứng dụng cuối cùng có sẵn trên GitHub.
Cách Gửi Thông báo qua Database
Khi gửi thông báo qua kênh database, các thông báo được lưu trữ trong một bảng cơ sở dữ liệu. Loại thông báo và dữ liệu JSON xác định thông báo đều được bao gồm trong bảng này.
Tạo Một Dự án Laravel Mới
Bạn có thể tạo một dự án Laravel mới thông qua lệnh Composer hoặc trình cài đặt Laravel:
laravel new project_name
//Or
composer create-project laravel/laravel project_name
Điều này sẽ tạo ra một ứng dụng Laravel mới trong một thư mục mới mang tên project_name.
Kết nối với Cơ sở dữ liệu của bạn
Dưới đây là một bài viết tôi đã viết giải thích cách kết nối một Ứng dụng Laravel với cơ sở dữ liệu MySQL. Nếu bạn có một cơ sở dữ liệu khác, hãy đảm bảo kết nối nó một cách phù hợp.
Thiết lập một Scaffold Xác thực Mặc định
Laravel Auth cung cấp một giao diện xác thực và chức năng được xây dựng sẵn để tương tác với. Cài đặt gói Laravel UI với lệnh sau:
composer require laravel/ui
Sau đó, tạo một bootstrap auth scaffold. Một bootstrap authentication scaffold cung cấp một giao diện người dùng mặc định và xác thực cơ bản cho việc đăng ký và đăng nhập trong Laravel. Bạn có thể cài đặt nó bằng lệnh Artisan sau:
php artisan ui bootstrap --auth
Tiếp theo, cài đặt các gói npm để tạo các tệp css và js và chạy môi trường.
npm install
npm run dev
Cuối cùng, chạy các migration để tạo các bảng cơ sở dữ liệu của bạn bằng lệnh sau:
php artisan migrate
Chạy ứng dụng
Chạy lệnh Artisan sau để chạy dự án:
php artisan serve
Ứng dụng được phục vụ trên cổng 8000 theo mặc định, và nếu bạn truy cập http://localhost:8000/ trên trình duyệt của bạn, bạn sẽ thấy trang chào mừng này với các tùy chọn đăng nhập và đăng ký ở góc trên bên phải.
Sau khi đăng ký hoặc đăng nhập thành công, bạn có thể xem bảng điều khiển của mình. Tất cả các quy trình xác thực cơ bản và giao diện người dùng này được xử lý bởi gói laravel/ui đã được cài đặt trước đó.
Tạo một bảng Thông báo
Bạn cần tạo một bảng cơ sở dữ liệu để chứa tất cả các thông báo của bạn. Bảng này có thể được truy vấn bất kỳ lúc nào để hiển thị thông báo trên giao diện người dùng. Để tạo một migration với schema bảng thông báo phù hợp, bạn có thể sử dụng lệnh Artisan sau:
php artisan notifications:table
Điều này tạo ra một tệp create_notifications_table.php trong thư mục database/migrations, nó xác định schema của bảng notifications. Bây giờ bạn có thể di chuyển (migrate) vào cơ sở dữ liệu của bạn bằng cách chạy lệnh sau:
php artisan migrate
Mỗi thông báo trong Laravel được biểu diễn bởi một lớp đơn, thường được lưu trữ trong thư mục app/Notifications. Nó sẽ được tạo ra khi bạn chạy lệnh Artisan make:notification:
php artisan make:notification DepositSuccessful
Điều này tạo ra một tệp DepositSuccessful.php có một lớp thông báo mới trong thư mục app/Notifications. Lớp này bao gồm một phương thức via() xác định kênh và các phương thức xây dựng nội dung thông báo để hỗ trợ định dạng dữ liệu thông báo cho kênh đã chọn.
Lớp thông báo nên có một hàm toDatabase hoặc toArray được xác định. Phương thức này nên trả về một mảng PHP đơn giản sau khi nhận một đối tượng $notifiable. Mảng trả về sẽ được lưu trữ trong cột dữ liệu (data) của bảng thông báo của bạn sau khi được mã hóa thành JSON.
Định dạng Thông báo của Cơ sở dữ liệu
Bạn muốn thông báo cho người dùng mỗi khi họ thực hiện một khoản nạp tiền thành công trong ứng dụng với số tiền họ đã nạp.
Cập nhật phương thức __construct() trong tệp DepositSuccessful.php để khớp với ví dụ sau:
protected $amount;
public function __construct($amount)
{
$this->amount=$amount;
}
Bây giờ số tiền nạp đã được truyền vào phương thức construct(), vì vậy nó có thể được sử dụng trong việc tạo các tin nhắn email.
Bây giờ, bạn cần chỉ định kênh thông báo để sử dụng bằng cách cập nhật phương thức via():
public function via($notifiable)
{
return ['database'];
}
Tiếp theo, cập nhật phương thức toArray() hoặc toDatabase() với các chi tiết của thông báo.
Bạn phải xác định một trong hai phương thức toDatabase() hoặc toArray(), và nó nên trả về một mảng PHP đơn giản được lưu trữ trong cột dữ liệu (data) của bảng thông báo.
public function toArray($notifiable)
{
return [
'data' =>' Your deposit of '. $this->amount.' was successful'
];
}
Phương thức toArray() được sử dụng bởi cả kênh phát sóng và kênh cơ sở dữ liệu. Nếu bạn muốn sử dụng cả hai kênh trong ứng dụng với các biểu diễn mảng khác nhau, bạn nên xác định cả toDatabase() và toArray(). Tuy nhiên, toArray() là mặc định.
Thêm Trait Notifiable
Laravel notification cung cấp hai phương thức để gửi thông báo. Nó bao gồm Trait Notifiable hoặc Facade Notification. Trong hướng dẫn này, chúng ta sẽ tập trung vào Trait Notifiable.
Mặc định, Laravel đã bao gồm Trait Notifiable trong mô hình app/Models/User. Nó nên khớp với ví dụ sau:
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
.
.//Other model definitions
.
}
Thiết lập Mô hình và Migration cho Khoản nạp
Trước tiên, tạo mô hình và migration cơ sở dữ liệu cùng một lúc bằng cách chạy lệnh sau:
php artisan make:model Deposit -m
Điều này tạo ra một tệp Model có tên Deposit.php trong thư mục app/Models và một tệp Migration có tên create_deposits_table.php trong thư mục database/migrations.
Cập nhật tệp Deposit.php bằng cách thêm mã sau vào đầu tệp, cho phép gán đại diện cho Model (mass assignment).
protected $guarded = [];
Tiếp theo, cập nhật phương thức up() trong tệp migration create_deposits_table.php với các chi tiết về khoản nạp tiền cần được lưu trữ, như ví dụ dưới đây:
public function up()
{
Schema::create('deposits', function (Blueprint $table) {
$table->id();
$table->string('amount');
$table->foreignId('user_id')->references('id')->on('users')->constrained()->onDelete('cascade')->onUpdate('cascade');
$table->timestamps();
});
}
Sau đó, chạy lại các migration của bạn vào cơ sở dữ liệu.
php artisan migrate
Thiết lập Controller
Bạn nên xác định logic để thực hiện một khoản nạp tiền và gửi thông báo sau khi nạp tiền thành công trong controller.
Để tạo ra controller, chạy lệnh Artisan sau:
php artisan make:controller DepositController
Một tệp mới DepositController.php đã được tạo trong thư mục app/Http/Controllers.
Với tệp đã được tạo, thêm các câu lệnh import dưới đây để nhập các lớp mà controller sẽ sử dụng:
use App\Models\Deposit;
use App\Models\User;
use App\Notifications\DepositSuccessful;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
Thêm phương thức __construct() để khai báo middleware auth, cho phép chỉ người dùng đã xác thực mới có thể thực hiện một khoản nạp tiền.
public function __construct()
{
$this->middleware('auth');
}
Xác định phương thức deposit() để bao gồm logic cho việc thực hiện một khoản nạp tiền và gửi thông báo nạp tiền thành công.
public function deposit(Request $request){
$deposit = Deposit::create([
'user_id' =>Auth::user()->id,
'amount' => $request->amount
]);
User::find(Auth::user()->id)->notify(new DepositSuccessful($deposit->amount));
return redirect()->back()->with('status','Your deposit was successful!');
}
Thông báo được gửi bằng cách sử dụng phương thức notify() từ Trait Notifiable hoặc Facade Notification. Facade rất hữu ích khi gửi thông báo cho nhiều thực thể, chẳng hạn như một tập hợp người dùng. Mặc dù chúng tôi sử dụng notify() cho hướng dẫn này, dưới đây là một ví dụ về việc sử dụng Facade Notification.
$users = User::all();
Notification::send($users, new DepositSuccessful($deposit->amount));
Lưu ý: Trait Notifiable đã được nhập vào mô hình User. Bạn có thể nhập nó vào bất kỳ mô hình nào bạn cần gửi thông báo.
Thiết lập Routes
Bạn sẽ thêm một route mới trong routes/web.php.
Route::post('/deposit', [App\Http\Controllers\DepositController::class,'deposit'])->name('deposit');
Chỉnh sửa Giao diện
Thêm một biểu mẫu cơ bản vào trang chủ để người dùng có thể thực hiện khoản nạp tài nguyên trong thư mục resources\views\home.blade.php.
<form method="POST" action="route('deposit')">
@csrf
<h5 class="text-center mb-3">Make A Deposit</h5>
<div class="row mb-3">
<label for="amount" class="col-md-4 col-form-label text-md-end"> __('Amount') </label>
<div class="col-md-6">
<input id="amount" type="number" class="form-control @error('amount') is-invalid
@enderror" name="amount" value="old('amount') " required autocomplete="amount" autofocus>
@error('amount')
<span class="invalid-feedback" role="alert">
<strong> $message </strong>
</span>
@enderror
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
__('Deposit')
</button>
</div>
</div>
</form>
Việc tuyệt vời! 👍 Hãy làm cho mọi thứ thú vị hơn bằng cách bao gồm một biểu tượng chuông thông báo trên thanh điều hướng hiển thị số lượng thông báo chưa đọc. Bạn cũng có thể hiển thị cả thông báo đã đọc và chưa đọc.
Trait Notifiable trong Laravel cung cấp một tính năng tuyệt vời khác có thể giúp bạn theo dõi cả thông báo đã đọc và chưa đọc. Bạn cũng có thể đánh dấu một thông báo là đã đọc hoặc xóa một thông báo hoàn toàn.
Cập nhật Controller, Route và View với tính năng MarkasRead
Xác định một phương thức mới, markAsRead(), trong tệp DepositController.php để đánh dấu tất cả các thông báo chưa đọc là đã đọc.
public function markAsRead(){
Auth::user()->unreadNotifications->markAsRead();
return redirect()->back();
}
Bây giờ, thêm route tương ứng vào routes/web.php.
Route::get('/mark-as-read', [App\Http\Controllers\DepositController::class,'markAsRead'])->name('mark-as-read');
Bạn sẽ cập nhật tệp resources\views\layouts\app.blade.php với một số thay đổi cho tính năng này.
Đầu tiên, hãy bao gồm liên kết CDN này đến Font Awesome trong tệp blade để bạn có thể sử dụng biểu tượng chuông.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Bây giờ, hãy thêm ví dụ này trước phần tên đầy đủ và thả xuống đăng xuất ngay sau câu lệnh else.
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link " href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fa fa-bell"></i>
<span class="badge badge-light bg-success badge-xs">auth()->user()->unreadNotifications->count()</span>
</a>
<ul class="dropdown-menu">
@if (auth()->user()->unreadNotifications)
<li class="d-flex justify-content-end mx-1 my-2">
<a href="route('mark-as-read')" class="btn btn-success btn-sm">Mark All as Read</a>
</li>
@endif
@foreach (auth()->user()->unreadNotifications as $notification)
<a href="#" class="text-success"><li class="p-1 text-success"> $notification->data['data']</li></a>
@endforeach
@foreach (auth()->user()->readNotifications as $notification)
<a href="#" class="text-secondary"><li class="p-1 text-secondary"> $notification->data['data']</li></a>
@endforeach
</ul>
</li>
Điều này sẽ dẫn đến một biểu tượng chuông có số lượng thông báo chưa đọc được hiển thị bên trước phần tên đầy đủ và dropdown đăng xuất trên bảng điều khiển. Nó cũng có một dropdown của tất cả các thông báo, với những thông báo chưa đọc ở đầu danh sách. Dropdown cũng có một tùy chọn để đánh dấu tất cả các thông báo là đã đọc để số lượng badge trở về 0 (nghĩa là không có thông báo chưa đọc).
Công việc tuyệt vời! 🤩 Ở điểm này, bạn có thể tiếp tục kiểm thử bằng cách thực hiện một khoản nạp để xem cách thông báo của bạn hiển thị trên bảng điều khiển sau khi nạp tiền thành công.
Cách gửi thông báo qua email
Tuy nhiên, hãy đi một chút xa hơn và bao gồm cả thông báo qua email. Khi một khoản nạp được thực hiện, chúng ta muốn hiển thị thông báo trên bảng điều khiển và gửi một email cho người dùng.
Cập nhật cấu hình Mail trong .env
Bạn cần cập nhật các biến môi trường này với thông tin chứng thực mailer hợp lệ mà ứng dụng của bạn sẽ cần để gửi email cho người dùng.
MAIL_MAILER=
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME="${APP_NAME}"
Trong lớp DepositSuccessful notification mà bạn đã tạo trước đó, cập nhật phương thức via() để bao gồm email.
public function via($notifiable)
{
return ['mail','database'];
}
Sau đó, xác định phương thức toMail() với các thông điệp email. Phương thức này nên trả về một instance của lớp Illuminate/Notifications/Messages/MailMessage sau khi nhận được một thực thể $notifiable.
Bây giờ bạn có thể xây dựng các thông điệp email với sự trợ giúp của một số phương thức đơn giản do lớp MailMessage cung cấp. Một "lời kêu gọi hành động" và các dòng văn bản đều có thể có trong các thông điệp email.
public function toMail($notifiable)
{
$url = url('/home');
return (new MailMessage)
->greeting('Hello,')
->line('Your deposit of '. $this->amount. ' was successful.')
->action('View dashboard', url('/home'))
->line('Thank you for using our application!');
}
Các email giao dịch nhỏ có thể được định dạng nhanh chóng và dễ dàng bằng cách sử dụng các phương thức được cung cấp bởi đối tượng MailMessage. Một mẫu email HTML đẹp và đáp ứng, đi kèm với một phiên bản văn bản thuần, sẽ được tạo ra từ các thành phần thông điệp bởi kênh gửi email. Trong ví dụ này, chúng tôi cung cấp một lời kêu gọi hành động (nút), một dòng văn bản và một lời chào.
Kiểm thử
Nếu bạn thực hiện một khoản nạp thành công, bạn sẽ nhận được một thông báo trên bảng điều khiển của bạn nhìn như sau:
Lưu ý rằng số trên badge chỉ đếm số lượng thông báo chưa đọc. Tuy nhiên, dropdown liệt kê tất cả các thông báo, bắt đầu từ những thông báo chưa đọc. Nếu bạn quyết định đánh dấu tất cả là đã đọc, nó sẽ làm tươi lại và số lượng badge thông báo của bạn trở về 0 vì bạn đã đọc tất cả các thông báo hiện tại.
Bạn cũng sẽ nhận được một thông báo qua email nhìn như sau:
Lưu ý rằng lời chào, dòng văn bản và lời kêu gọi hành động (nút) đã được định dạng theo một mẫu email đáp ứng.
