Abeer__Mustafa

تستطيع ذلك باستخدام jQuery

لإخفاء عنصر html من ال DOM:

$("#a").hide();

لإزالة العنصر تماماً

 $("#a").remove();

لاستخدام الزمن الحقيقي تستطيع ذلك باستخدام Laravel WebSockets

WebSocket هو بروتوكول اتصالات يختلف عن ال HTTP، فبدلاً من سحب التغييرات من السيرفر إلى المستخدم الذي قام بطلب هذه البيانات، يسمح ال WebSocket بإرسال التغييرات من السيرفر إلى عدة مستخدمين بدون طلبها

تحميل الحزمة

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

تعديل ملف ال env

PUSHER_APP_ID=laravel_rdb
PUSHER_APP_KEY=laravel_rdb
PUSHER_APP_SECRET=laravel_rdb
PUSHER_APP_CLUSTER=mt1
BROADCAST_DRIVER=pusher

 config/broadcasting.php

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

إنشاء ال Event

php artisan make:event MessageEvent

// app/Events/MessageEvent
class MessageEvent implements ShouldBroadcast
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $to;
    public function __construct($data)
    {
       $this->to= $data;
    }
    public function broadcastOn()
    {
        return new Channel('MessageSent');
    }
}

ال real-time يعمل كالتالي:

1. يقوم الارافل بلاستماع listen إلى الحدث المسجل MessagEvent
2. عند إرسال رسالة إلى مستخدم ما سنقوم بعمل fire ل event

عند إرسال الرسالة نقوم بكتابة الشيفرة التالية التي تقوم بعملfire ل MessagEvent :

event(new App\Events\MessageEvent($to));

لاستقبال البيانات

npm install --save laravel-echo pusher-js

// resources/js/bootstrap.js
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true
});

داخل الصفحة التي نريد عرض الرسائل الواردة:

<div id="user_id" data="{{ auth()->user->id }}"></div>
<script src='./js/app.js'></script>
<script>
 window.Echo.channel('MessageSent')
  .listen('MessageEvent', (e) => {
  if(e.to == $('#user_id').attr('data')){
    // update inbox 
  }  
})
</script>

يجب إنشاء علاقات بين الجداول من نوع one to many ثم استخدام تقنيات الزمن الحقيقي لتحقيق المطلوب.

قم بتقسيم المهمة إلى 6مراحل فرعية:

1. إنشاء جدول مستخدمين users يحوي الحقول التالية id - name - email
2. إنشاء جدول للرسائل messages يحوي الحقول التالية: id - from - content - to
3. بناء one to many relationship داخل ال models: User, Message
4. إنشاء ال form الخاص بكتابة الرسالة وتحديد المرسل إليه
5. إنشاء div لعرض محتوى الرسائل الواردة
6. استخدام الزمن الحقيقي real-time لاستقبال الرسالة في نفس اللحظة التي تم الإرسال بها دون الحاجة للقيام بتحديث الصفحة

لماذا نحتاج علاقة من نوع one to many ؟

لأن المستخدم يستطيع إرسال الرسائل لأكثر من مستخدم، تستطيع الاطلاع على التوثيق الرسمي للارافل من هنا:

User

php artisan make:model User -m

// User Model
public function from(){
   return $this->hasMany(Message::class, 'from');
}
public function to(){
   return $this->hasMany(Message::class, 'to');
}

// users migration
Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->string('password')->nullable();
    $table->rememberToken();
    $table->timestamps();
});

Message

php artisan make:model Message -m

// Message Model
public function user(){
   return $this->belongsTo(User::class, 'from');
}

// messages migration
Schema::create('messages ', function (Blueprint $table) {
      $table->bigIncrements('id');
      $table->string('content');
      $table->unsignedBigInteger('from');
      $table->foreign('from')->references('id')->on('users');
      $table->unsignedBigInteger('to');
      $table->foreign('to')->references('id')->on('users');
      $table->timestamps();
});

إرسال رسالة:

$to = 2; // المعرف الخاص بالشخص المرسل إليه 
$content= 'test message';
Message::create([
   'from' => auth()->user()->id,
   'content' => $content,
   'to' => $to,
]);

استقبال الرسالة:

$user = User::whereId(auth()->user()->id)->first();
$sent_messages = $user->to;
$names = [];
   foreach ($sent_messages as $message) {
      array_push($names, $message->from->name );
   }
dd($sent_messages);

تعديل جدول المستخدمين:

$table->string('national_number');

تعديل LoginController

if (User::where('national_number', request()->national_number)->exists()) {
  $user = User::where('national_number', request()->national_number)->first();
  Auth::login($user, true);
}

أسهل طريقة لإنشاء قاعدة بيانات متعددة اللغات، هي إنشاء column للقيمة المراد ترجمتها لكل لغة، مثلاً نريد اللغتين العربية والإنكليزية، ونريد ترجمة الحقل title فننشئ حقلين title_ar, title_en

داخل ال Model نكتب الميثود التي تقوم بالترجمة تلقائياً:

public function getTitleAttribute(){
    $locale = App::getLocale();
    $column = "title_" . $locale;
    return $this->{$column};
} 

وبالتالي عند كتابة:

Post::find($id)->title

سنحصل على القيمة باللغة الحالية