طريقة عمل تنبية اشعار للادمن عند تسجيل مستخدم جديد داخل مشاريع لارافيل باستخدام Mysql , ajax and Laravel
Laravel 9 Notifications With Database جدول المحتويات
متطلبات التثبيت
تثبيت خادم الويب XAMPP
لنظام Windows:
تحميل XAMPP: قم بتحميل XAMPP من موقعه الرسمي: https://www.apachefriends.org/index.html
تثبيت XAMPP:
- قم بتشغيل ملف التثبيت الذي قمت بتحميله.
- اتبع الخطوات المعروضة في المعالج لاختيار المكونات التي تريد تثبيتها (Apache و MySQL على الأقل).
- اختر مجلد لتثبيت XAMPP.
تشغيل Apache و MySQL:
- بعد التثبيت، قم بتشغيل XAMPP Control Panel.
- انقر فوق “Start” بجانب Apache و MySQL لتشغيل الخوادم.
تحقق من العمل:
- افتح متصفح الويب وقم بزيارة
http://localhostللتأكد من أن XAMPP تعمل بشكل صحيح.
- افتح متصفح الويب وقم بزيارة
لنظام macOS:
تحميل XAMPP: قم بتحميل XAMPP من الموقع الرسمي: https://www.apachefriends.org/index.html
تثبيت XAMPP:
- قم بفتح ملف التثبيت الذي قمت بتحميله.
- اتبع الإرشادات لتثبيت XAMPP.
تشغيل Apache و MySQL:
- بعد التثبيت، افتح XAMPP Control Panel.
- انقر فوق “Start” بجانب Apache و MySQL.
تحقق من العمل:
- افتح متصفح الويب واذهب إلى
http://localhostللتأكد من أن XAMPP تعمل.
- افتح متصفح الويب واذهب إلى
لنظام Linux:
- تحميل XAMPP: قم بتحميل XAMPP من موقعه الرسمي: https://www.apachefriends.org/index.html
- تثبيت XAMPP:
- انتقل إلى المجلد الذي قمت بتحميل XAMPP إليه.
- قم بفتح نافذة الطرفية وقم بتشغيل الأمر التالي لتثبيت XAMPP:
sudo ./xampp-linux-x64-<إصدار>.run
- (استبدل
<إصدار>بالإصدار الذي قمت بتحميله) - تشغيل Apache و MySQL:
- بعد التثبيت، افتح نافذة الطرفية وأدخل الأمر:
sudo /opt/lampp/lampp start
- تحقق من العمل:
افتح متصفح الويب واذهب إلى http://localhost للتحقق من أن XAMPP تعمل.
تثبيت Laravel 9
بعد التاكد من تثبيت composer علي الجهاز الخاص بك استخدم الكود التالي:
composer create-project --prefer-dist laravel/laravel notification-system-db "9.*"
بعد اكتمال التثبيت، انتقل إلى مجلد المشروع باستخدام:
cd notification-system-db
الاتصال بقاعدة البيانات Database
بعد تثبيت تطبيق Laravel 9، نحتاج أولاً إلى إنشاء اتصال بقاعدة بيانات MySQL. لذلك، يتعين علينا فتح ملف .env وتحت هذا الملف، نحتاج إلى إضافة تكوين قاعدة بيانات MySQL مثل اسم قاعدة بيانات laravel واسم مستخدم قاعدة بيانات MySQL وتفاصيل كلمة المرور. بمجرد تحديد هذه التفاصيل، سيتم إجراء اتصال بقاعدة بيانات MySQL في إطار عمل Laravel 9. يمكنك العثور أدناه على تفاصيل تكوين قاعدة بيانات MySQL.
env.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=notification-system-db
DB_USERNAME=root
DB_PASSWORD=
Laravel UI
لارافيل UI هو حزمة تساعد في تنشيط واجهة تطبيق لارافيل الأمامية باستخدام عروض وموارد مسبقة لإطارات العمل الأمامية الشهيرة مثل Bootstrap وVue.js و React. يبسط هذا الأمر عملية إعداد مكونات الواجهة الأمامية
composer require laravel/ui
Bootstrap & Auth
يستخدم لتثبيت حزمة Bootstrap وإنشاء هيكل مبدئي لنظام المصادقة (Authentication) في Laravel. هذا الأمر يقوم بإعداد الجوانب الأساسية لنظام المصادقة مثل تسجيل الدخول (Login) وتسجيل المستخدمين (Registration)
php artisan ui bootstrap --auth
Notifications DB Table
لكي تعمل الإشعارات، نحتاج إلى إنشاء جدول داخل قاعدة البيانات خاص بالاشعارات . قم بتشغيل هذا الأمر
php artisan notifications:table
بعد ذلك علينا التاكد من بيانات الجدول بهذا الشكل
Schema::create('notifications', function (Blueprint $table) {
$table->uuid('id')->primary();
$table->string('type');
$table->morphs('notifiable');
$table->text('data');
$table->timestamp('read_at')->nullable();
$table->timestamps();
});
كما ترون، فإنه يستخدم العلاقات متعددة الأشكال، وحقل uuid كمفتاح أساسي. أيضًا، سيكون حقل “البيانات” هو الذي سيخزن جميع معلومات الإشعارات،
استخدم الامر التالي لترحيل البيانات للداتا بيس
php artisan migrate
بذلك تم انشاء جدول notification في قاعدة البيانات وايضا جدول users
Notification Class
نستخدم الامر التالي لانشاء كلاس خاص بالاشعارات
php artisan make:notification NewUserNotification
ثم نتبع الرابط app/Notifications/NewUserNotification.php ونقوم بنسخ الكود التالي بداخل الصفحة
<?php
namespace App\Notifications;
use App\Models\User;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
class NewUserNotification extends Notification
{
use Queueable;
public $user;
public function __construct($user)
{
$this->user = $user;
}
public function via($notifiable)
{
return ['database'];
}
public function toArray($notifiable)
{
return [
'name' => $this->user->name,
'email' => $this->user->email,
];
}
}
كما موضح
– قمنا بإدخال مستخدم في المُنشئ لمعرفة المستخدم الذي تم تسجيله
– نحدد قاعدة البيانات كقناة إعلام، بطريقة via()
– ثم تشكيل مجموعة من البيانات للإشعار، بطريقة toArray() – لك الحرية في وضع أي بيانات تريدها هناك.
Calling the Notification
لكي نستطيع النداء علي الاشعار يجب تنفيذ الامر التالي
php artisan make:listener SendNewUserNotification
ثم نتبع الرابط app/Listeners/SendNewUserNotification.php ونقوم بنسخ الكود التالي بداخل الصفحة
<?php
namespace App\Listeners;
use App\Models\User;
use Illuminate\Support\Facades\Notification;
use App\Notifications\NewUserNotification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;
class SendNewUserNotification
{
public function __construct()
{
//
}
public function handle($event)
{
$admins = User::where('id',1)->get();
Notification::send($admins, new NewUserNotification($event->user));
}
}
هنا قمنا بجعل الادمن وهو من يملك id رقم 1 الوحيد الذي يصلة كل الاشعارات التي تقوم بالتنبية عن تسجيل مستخدم جديد يمكن اضافة اكثر من رقم id او يمكن اضافة coulmn خاص roles وجعل الصلاحيات لاكثر من ادمن لك الحرية في ذلك
HomeController
نتبع الرابط App\Http\Controllers \HomeControllerونقوم بنسخ الكود التالي بداخل الصفحة
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function index()
{
$notifications = auth()->user()->unreadNotifications;
return view('home', compact('notifications'));
}
public function markNotification(Request $request)
{
auth()->user()
->unreadNotifications
->when($request->input('id'), function ($query) use ($request) {
return $query->where('id', $request->input('id'));
})
->markAsRead();
return response()->noContent();
}
}
home.blade.php
والان يجب تعديل صفحة العرض بعد اتباع الرابط التالي resources/views/home.blade.php لتكون بهذا الشكل
@extends('layouts.app')
@section('content')
<center>
<div class="w-50" style="text-align: left;">
@if(auth()->user()->is_admin)
@foreach($notifications as $notification)
<div class="alert alert-success" role="alert">
[{{ $notification->created_at }}] User {{ $notification->data['name'] }} ({{ $notification->data['email'] }}) has just registered.
<a href="{{ url('/home') }}" class="float-right mark-as-read" data-id="{{ $notification->id }}">
Mark as read
</a>
</div>
@endforeach
@if ($notifications->count() > 0 )
<a href="{{ url('/home') }}" id="mark-all" class="btn btn-warning text-danger">
Mark all as read
</a>
@else
There are no new notifications
@endif
@endif
</div>
</center> <script type="litespeed/javascript">function sendMarkRequest(id=null){return $.ajax("{{ route('markNotification') }}",{method:'POST',data:{_token:'{{ csrf_token() }}',id}})}
$(function(){$('.mark-as-read').click(function(){let request=sendMarkRequest($(this).data('id'));request.done(()=>{$(this).parents('div.alert').remove()})});$('#mark-all').click(function(){let request=sendMarkRequest();request.done(()=>{$('div.alert').remove()})})})</script> @endsection
Model User
موديل المستخدمين في الرابط الاتي app/Models/User.php نذهب الية ونقوم بنسخ الكود التالي
<?php
namespace App\Models;
// use App\Models\role;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
protected $fillable = [
'name',
'email',
'password',
];
protected $hidden = [
'password',
'remember_token',
];
protected $casts = [
'email_verified_at' => 'datetime',
];
public function getIsAdminAttribute()
{
return $this->where('id', 1)->exists();
}
}
Routes/web.php
اضافة الكود التالي الي routes/web.php لتفعيل وظبفة mark-as-read في controller
Route::post('/mark-as-read', 'HomeController@markNotification')->name('markNotification');
لتكون بالشكل التالي
<?php
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\auth;
use App\Http\Controllers\HomeController;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::post('/mark-as-read', [HomeController::class,'markNotification'])->name('markNotification');
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
في حالة ظهور اي مشكلة اثناء التطبيق ساكون سعيد بحلها معكم . حظ سعيد
Sharing to
