بسم الله الرحمن الرحيم
والصلاة والسلام علي أشرف المرسلين سيدنا محمد عليه أفضل الصلاة والسلام
شرح (laravel-livewire)
التنصيب
لأنشاء مشروع جديد في لارافيل باستخدام الأمر
composer create-project laravel/laravel laravel8livewire
بعد ذلك توجة الي مجلد المشروع بأستخدام هذا الأمر
cd laravel8livewire
لتنصيب حزمة livewire أستخدام هذا الأمر
composer require livewire/livewire
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">
<title>Livewire Project</title>
{{-- أمر أستدعاء ملفات css الخاصة ب livewire --}}
@livewireStyles
</head>
<body>
{{-- لعمل rendring for classes or controllers حتي يمكن لك أستدعاء المتغيرات من المتحكمات --}}
{{$slot}}
{{-- أمر أستدعاء ملفات javascript الخاصة ب livewire --}}
@livewireScripts
</body>
</html>
الأوامر
//لأنشاء مشروع جديد في لارافيل composer create-project laravel/laravel laravel8livewire //تنصيب حزمة livewire composer require livewire/livewire // لأنشاء مكون جديد بالأسم post أو تستطيع انشاءه بالأسم الذي تريد php artisan make:livewire post //أنشاء مكون من النوع inline يكون بداخل محتوي blade php artisan make:livewire post --inline //لتشغيل التطبيق في المتصفح الخاص بك Php artisan serve //لتهجير قاعدة البيانات php artisan migrate //لأنشاء نموذج وملف تهجير لقاعدة البيانات php artisan make:model Post -m //لعمل بذر لقاعدة البيانات php artisan db:seed
المكونات
لانشاء مكون جديد يتم أستخدام الأمر التالي
php artisan make:livewire Post
عند أنشاء المكون الجديد يحتوي علي ملفين (class الأول )الصنف (view) والثاني ملف العرض
الأن توجة الي ملفResources\views\livewire\post.blade.php
: وضع بداخله الكود التالي مثلا
<h1>بسم الله الرحمن الرحيم</h1>
بعد ذلك توجة الي مجلد routesWeb.php وافتح الملف
وقم بأضافة مسار الرابط هكذا
Route::get(‘/post’,Post::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\Post;
مكون من نوع inline
لانشاء مكون من نوع inline يكون بداخلة ملف العرض
php artisan make:livewire User --inline
وضع بداخله الكود التالي مثلا :
<h1>بسم الله الرحمن الرحيم</h1>
Route::get('/user',User::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\User;
أهم خطوة هي التأكد من تضمين ملفات css و javascript في ملف التطبيق الرئيسي
هكذا
//الأول css في وسم ال head
@livewireStyles
//الثاني javascript في نهاية وسم ال body
@livewireScripts
<h1>بسم الله الرحمن الرحيم</h1>
Route::get('/user',User::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\User;
أهم خطوة هي التأكد من تضمين ملفات css و javascript في ملف التطبيق الرئيسي
هكذا
//الأول css في وسم ال head @livewireStyles //الثاني javascript في نهاية وسم ال body @livewireScripts
المسارات
عند بناء اي تطبيق لابد من كتابة المسارات الخاصة به ويتم ذلك بداخل الملف routes/Web.php
الأن سوف نبدأ التعرف علي كيفية بناء المسارات عن طريق بناء أول مكون بأستخدام الأمرphp artisan make:livewire Home
بعد ذلك لنفتح ملف العرض :
ونضيف الكود التالي
<h1>بسم الله الرحمن الرحيم</h1><hr>
<h1>الصفحة الرئيسية</h1>
: بعد ذلك قم بكتابة المسار التالي
Route::get('/home',Home::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\Home;
الأن لنتعرف علي تضمين ال parameters أو المحددات
Route::get('/home{name}',Home::class);
الخطوة الأولي وهي أضافة الخاصية الخاصة بهذا المحدد هكذا
public $name;
الخطوة الثانية وهي انشاء دالة خطاف
الطريقة أو ال method mount
mount : Runs once, immediately after the component is instantiated, but before render() is called. This is only called once on initial page load and never called again, even on component refreshes
mount : وحتي مع عمل تحديث للمكون تظل كما هي يتم تشغيلها أو أستدعائها مرة واحدة فقط قبل عمل render
//دالة خطاف
// mount lifecycle hook method
public function mount($name)
{
//هذه تعود علي خاصية داخل الصنف
// $this متغير زائف يتعامل مع خواص الصنف ببساطة
$this->name = $name;
}
الخطوة الثالثة لعرض المتغير في صفحة العرض هكذا
<h1> اهلا وسهلا : {{$name}}
</h1>
في حالة اردت استخدام المحدد parameter بقيمة فارغة أفتراضية يتم ذلك بهذه الطريقة يجب تعديل ملف الصنف هكذا
public function mount($name=null)
{
$this->name = $name;
}
ربط الخواص
Livewire Property Binding
الخطوة رقم 1
//أنشاء مكون جديد لاستماره php artisan make:livewire Form
الخطوة رقم 2
//أنشاء مسار جديد Route::get(‘/form’,Form::class);
الخطوة رقم 3
وضع الكود التالي بداخل ملف العرض
<div dir="rtl" style="text-align: right">
{{-- مكون للتعامل مع الاستمارات forms --}}
الأسم: <br>
<input type="text" wire:model.debounce.1000ms ="name" /><br>
الرسالة: <br>
<textarea wire:model='message'></textarea><br>
<br>
الحالة الأجتماعية :
أعزب <input type="radio" value="أعزب" wire:model='marital_state'>
متزوج <input type="radio" value="متزوج" wire:model='marital_state'>
vbr>
اللون المفضل:
أحمر <input type="checkbox" value="أحمر" wire:model='colors'>
أخضر <input type="checkbox" value="أخضر" wire:model='colors'>
أزرق <input type="checkbox" value="أزرق" wire:model='colors'>
<br>
الفاكهة المضلة :
<select wire:model='fruit'>
<option value="">أختر فاكهتك المفضلة :</option>
<option value="تفاح">تفاح</option>
<option value="فراولة">فراولة</option>
<option value="مانجا">مانجا</option>
</select>
<h1>يتم عرض نتيجة الفورم هنا </h1>
<hr>
الأسم: {{$name}}<br>
الرسالة: {{$message}}<br>
الحالة الأجتماعية: {{$marital_state}}
<br>
اللون المفضلة:
<br>
<ul>
@foreach ($colors as $color)
{{$color}}
@endforeach
</ul>
<br>
الفاكهة المفضلة: {{$fruit}}
</div>
الخطوة رقم 3
وضع الكود التالي بداخل الصنف
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Form extends Component
{
public $name;
public $message;
public $marital_state;
public $colors=[];
public $fruit;
public function render()
{
return view('livewire.form');
}
}
ملاحظة: اذا قمت بعمل تفتيش أو inspection لل network من خلال أدوات المطور في متصفح جوجل كروم او اي متصفح تستخدمه في كروم سوف اضغط علي ctrl+shift+i في لوحة المفاتيح لفتحة ثم أذهب الي network ثم أقوم بالتالي سوف تلاحظ انه عند كتابة اي شيء باي حقل داخل الاستماره السابقة يتم أرسال طلب الي السيرفر وهذا خطأ كبير جدا للتخلص من هذا الخطأ يجب تعديل حقول الفورم وأضافه الكود التالي
<input type="text" wire:model.debounce.1000ms="name" />
debounce.1000ms
1000ms it means 1 sec. 1000milli sec = 1 sec
1000 ملي ثانية تساوي ثانية واحدة فقط
الأفعال
قم بانشاء مكون جديد
php artisan make:livewire Action
: بعد ذلك قم بكتابة المسار التالي
Route::get('/action',Action::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\Action;
بداخل الصنف قم بأنشاء خاصية جديدة ودالة للجمع
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Action extends Component
{
public $sum;
public $num1;
public $num2;
public $message;
public function AddTwoNumbers($num1,$num2){
$this->sum = $num1 + $num2 ;
}
public function display_message($msg){
$this->message = $msg;
}
public function getsum(){
$this->sum = $this->num1 + $this->num2;
}
public function render()
{
return view('livewire.action');
}
}
توجة الي ملف العرض وقم باضافة الكود التالي
<div dir="rtl" style="text-align: center">
{{-- شرح الأفعال actions --}}
<button type="button" wire:click='AddTwoNumbers(32,100)'>
جمع
</button>
<br>
<textarea placeholder="رسالتك" wire:keydown.enter='display_message($event.target.value)'></textarea>
<br>
<form wire:submit.prevent='getsum'>
رقم 1 :<input type="text" name="num1" wire:model='num1'>
رقم 2 :<input type="text" name="num2" wire:model='num2'>
<button type="submit">أدخال</button>
</form>
<h1> المجموع : {{$sum}} </h1>
<br>
<h1>الرسالة : {{ $message }}</h1>
</div>
دورة حياة الخطافات
قم بانشاء مكون جديد
php artisan make:livewire Product
: بعد ذلك قم بكتابة المسار التالي
Route::get('/product',Product::class);
//نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا
use App\Http\Livewire\Product;
. بداخل الصنف قم بكتابة الكود التالي
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Product extends Component
{
public $name;
public $title;
public $infos=[];
public function mount(){
$this->infos[] ='Application is mounting.......';
}
public function hydrate(){
$this->infos[] ='Application is hydrating.......';
}
public function updating($name,$value){
$this->infos[] ='Application is updating.......';
}
public function updated($name,$value){
$this->infos[] ='Application is updated.......';
}
public function updatingName(){
$this->infos[] ='Application is updating Name Property.......';
}
public function updatedName(){
$this->infos[] ='Application is updated Name Property.......';
}
public function render()
{
return view('livewire.product');
}
}
توجة الي ملف العرض وقم باضافة الكود التالي
<div>
الأسم : <input type="text" wire:model='name'><br>
العنوان : <input type="text" wire:model='title'><br>
<h3>الأسم : {{$name}}</h3>
<br>
<h3>العنوان : {{$title}}</h3>
<br>
<h3>
طرق دورة حياة الخطفات
</h3>
@foreach($infos as $info)
<h4>{{$info}}</h4>
@endforeach
</div>
التحقق من الأستمارات
قم بانشاء مكون جديد
php artisan make:livewire Contact
: بعد ذلك قم بكتابة المسار التالي
Route::get(‘/contact’,Contact::class); //نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا use App\Http\Livewire\Contact;
توجة الي ملف العرض وقم باضافة الكود التالي
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Contact extends Component
{
public $name;
public $email;
public $phone;
public $message;
public function updated($fields){
$this->validateOnly($fields,[
'name' => 'required',
'email' => 'required|email',
'phone' => 'required|digits:12',
'message' => 'required|min:20',
]);
}
public function submitform(){
$this->validate([
'name' => 'required',
'email' => 'required|email',
'phone' => 'required|digits:12',
'message' => 'required|min:20',
]);
dd($this->name,$this->email,$this->phone,$this->message);
}
public function render()
{
return view('livewire.contact');
}
}
توجة الي ملف العرض وقم باضافة الكود التالي
<div>
{{-- رسائل التحقق --}}
<section dir="rtl" style="text-align: right">
<div class="container">
<div class="row">
<div class="col-m-6 offset-md-3">
<div class="card">
<div class="card-header">
<h3>نموذج التواصل</h3>
</div>
<div class="card-body">
<form wire:submit.prevent='submitform'>
@csrf
<div class="form-group">
<label for="name">الأسم</label>
<input type="text" name="name" class="form-control" wire:model='name'>
@error('name') <p class="text-danger">{{$message}}</p>@enderror
</div>
<div class="form-group">
<label for="email">البريد الألكتروني</label>
<input type="email" name="email" class="form-control" wire:model='email'>
@error('email') <p class="text-danger">{{$message}}</p>@enderror
</div>
<div class="form-group">
<label for="phone">رقم الموبايل</label>
<input type="text" name="phone" class="form-control" wire:model='phone'>
@error('phone') <p class="text-danger">{{$message}}</p>@enderror
</div>
<div class="form-group">
<label for="message">رسالتك</label>
<textarea name="message" class="form-control" wire:model='message'></textarea>
@error('message') <p class="text-danger">{{$message}}</p>@enderror
</div>
<button type="submit" class="btn btn-success" style="margin-top: 5px;">أرسال</button>
</form>
</div>
</div>
<div>
</div>
</div>
</section>
</div>
مع قواعد البيانات
قم بانشاء مكون جديد
php artisan make:livewire Users
: بعد ذلك قم بكتابة المسار التالي
Route::get(‘/users’,Users::class); //نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا use App\Http\Livewire\Users;
توجة الي ملف DatabaseSeeder.php وقم باضافة الكود التالي
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
\App\Models\User::factory(10)->create();
}
}
قم بعمل بذر لقاعدة البيانات
php artisan db:seed
توجة الي ملف الصنف وقم باضافة الكود التالي
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
class Users extends Component
{
public $users;
public function render()
{
$this->users = User::all();
return view('livewire.user-component', ['users'=> $users] );
}
}
توجة الي ملف العرض وقم باضافة الكود التالي
<div>
<style>
nav svg{
max-height:20px;
}
</style>
{{-- المستخدمين --}}
<section dir="rtl" style="text-align: right">
<div class="container">
<div class="row">
<div class="col-m-6 offset-md-3">
<div class="card">
<div class="card-header">
<h3>المستخدمين</h3>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>الأسم</th>
<th>البريد الالكتروني</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
توجة الي ملف الصنف وقم بتعديل الكود كما يلي
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
class Users extends Component
{
use WithPagination;
public $users;
public function render()
{
$this->users = User::paginate(12);
return view('livewire.user-component',['users' => $users]);
}
}
توجة الي ملف العرض وقم بتعديل الكود كما يلي
<div>
<style>
nav svg{
max-height:20px;
}
</style>
{{-- المستخدمين --}}
<section dir="rtl" style="text-align: right">
<div class="container">
<div class="row">
<div class="col-m-6 offset-md-3">
<div class="card">
<div class="card-header">
<h3>المستخدمين</h3>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>الأسم</th>
<th>البريد الالكتروني</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
CRUD
CRUD ترمز الي عمليات أنشاء وعرض تحديث أو تعديل وحذف
قم بأنشاء نموذج و ملف تهجير جديد
php artisan make:model Student –m
بعد ذلك قم بأضافة الكود التالي
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateStudentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('firstname');
$table->string('lastname');
$table->string('email');
$table->string('phone');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('students');
}
}
قم بعمل تهجير لقاعدة البيانات من خلال الأمر
php artisan migrate
قم بأنشاء مصنع بيانات جديد
php artisan make:factory Student
<?php
namespace Database\Factories;
use App\Models\Student;
use Illuminate\Database\Eloquent\Factories\Factory;
class StudentFactory extends Factory
{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = Student::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition()
{
return [
'firstname' => $this->faker->firstName,
'lastname' => $this->faker->lastName,
'email' => $this->faker->email,
'phone' => $this->faker->phoneNumber
];
}
}
قم بانشاء مكون جديد
php artisan make:livewire Students
: بعد ذلك قم بكتابة المسار التالي
Route::get(‘/students’,Students::class); //نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا use App\Http\Livewire\Students;
قم بأنشاء مصنع بيانات جديد للنموذج Student
توجة الي ملف DatabaseSeeder.php وقم باضافة الكود التالي
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
\App\Models\User::factory(10)->create();
\App\Models\Student::factory(10)->create();
}
}
قم بعمل بذر لقاعدة البيانات
php artisan db:seed
توجة الي ملف الصنف وقم باضافة الكود التالي
<?php
namespace App\Http\Livewire;
use App\Models\Student;
use Livewire\Component;
use Livewire\WithPagination;
class Students extends Component
{
use WithPagination;
public $firstname;
public $lastname;
public $email;
public $phone;
public $sid;
public $searchTerm;
public function resetInputFields()
{
$this->firstname = '';
$this->lastname = '';
$this->email = '';
$this->phone = '';
}
public function store()
{
$validatedData = $this->validate([
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required|email',
'phone' => 'required'
]);
Student::create($validatedData);
session()->flash('message','تم أنشاء التلميذ بنجاح !');
$this->resetInputFields();
$this->emit('studentAdded');
}
public function edit($id)
{
$this->updateMode = true;
$student = Student::find($id);
$this->firstname = $student->firstname;
$this->lastname = $student->lastname;
$this->email = $student->email;
$this->phone = $student->phone;
$this->sid = $student->id;
}
public function update()
{
$this->validate([
'firstname' => 'required',
'lastname' => 'required',
'email' => 'required|email',
'phone' => 'required'
]);
if($this->sid){
$student = Student::find($this->sid);
$student->update([
'firstname' => $this->firstname,
'lastname' => $this->lastname,
'email' => $this->email,
'phone' => $this->phone
]);
$this->updateMode = false;
session()->flash('message','تم تحديث بيانات التلميذ بنجاح !');
$this->resetInputFields();
$this->emit('studentUpdated');
}
}
public function delete($id)
{
if($id)
{
Student::find($id)->delete();
session()->flash('message','تم حذف التلميذ بنجاح !');
}
}
public function render()
{
$search = '%' . $this->searchTerm. '%';
$students = Student::where('firstname','LIKE',$search)
->orWhere('lastname','LIKE',$search)
->orWhere('email','LIKE',$search)
->orWhere('phone','LIKE',$search)
->orderBy('id','DESC')->paginate(12);
return view('livewire.students',['students'=>$students]);
}
}
يجب أضافة الكود التالي بداخل ملف العرض الرئيسي layouts.app
والذي يتضمن cdn bootstrap و سكربت جافا للتعامل مع bootstrap modal
<!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">
<title>Livewire Project</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
@livewireStyles
</head>
<body>
{{$slot}}
@livewireScripts
<script type="text/javascript">
window.livewire.on('studentAdded',()=>{
$('#addStudentModal').modal('hide');
});
window.livewire.on('studentUpdated',()=>{
$('#updateStudentModal').modal('hide');
});
</script>
</body>
</html>
توجة الي ملف العرض وقم باضافة الكود التالي
<div dir="rtl" style="text-align: right;">
<style>
nav svg{
max-height:20px;
}
</style>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row" style="margin-top:10px;">
<div class="col-md-2 pull-right" style="margin-top: 5px;">
كل التلاميذ
</div>
<div class="col-md-2 " style="margin-top: 5px;">
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#addStudentModal">أضافة تلميذ جديد</button>
</div>
<div class="col-md-2">
<div class="form-outline">
<input type="search" id="form1" class="form-control" wire:model='searchTerm' placeholder="بحث ..." />
</div>
</div>
</div>
</div>
<div class="card-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<table class="table table-striped">
<thead>
<tr>
<td>الأسم الأول</td>
<td>الأسم الأخير</td>
<td>البريد الألكتروني</td>
<td>الموبايل</td>
<td>أجراء</td>
</tr>
</thead>
<tbody>
@foreach($students as $student)
<tr>
<td>{{$student->firstname}}</td>
<td>{{$student->lastname}}</td>
<td>{{$student->email}}</td>
<td>{{$student->phone}}</td>
<td>
<button wire:click="edit({{$student->id}})" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#updateStudentModal">تعديل</button>
<button wire:click="delete({{$student->id}})" class="btn btn-danger btn-sm">حذف</button>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$students->links()}}
</div>
<div wire:ignore.self class="modal fade" id="updateStudentModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
تحديث تلميذ
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true close-btn">x</span>
</button>
</div>
<div class="modal-body">
<form >
@csrf
<div class="form-group">
<label for="firstname">الأسم الأول</label>
<input type="text" name="firstname" class="form-control" wire:model="firstname" />
@error('firstname') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="lastname">الأسم الأخير </label>
<input type="text" name="lastname" class="form-control" wire:model="lastname" />
@error('lastname') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="email">البريد الألكتروني</label>
<input type="text" name="email" class="form-control" wire:model="email" />
@error('email') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="phone">رقم الموبايل
<input type="text" name="phone" class="form-control" wire:model="phone" />
@error('phone') <span class="text-danger error">{{$message}}</span> @enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">أغلاق</button>
<button type="button" wire:click.prevent="update()" class="btn btn-primary">حفظ التعديلات</button>
</div>
</div>
</div>
</div>
<div wire:ignore.self class="modal fade" id="addStudentModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
أضافة تلميذ جديد
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true close-btn">x</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-group">
<label for="firstname">الأسم الأول</label>
<input type="text" name="firstname" class="form-control" wire:model="firstname" />
@error('firstname') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="lastname">الأسم الأخير</label>
<input type="text" name="lastname" class="form-control" wire:model="lastname" />
@error('lastname') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="email">البريد الألكتروني</label>
<input type="text" name="email" class="form-control" wire:model="email" />
@error('email') <span class="text-danger error">{{$message}}</span> @enderror
</div>
<div class="form-group">
<label for="phone">الموبايل
<input type="text" name="phone" class="form-control" wire:model="phone" />
@error('phone') <span class="text-danger error">{{$message}}</span> @enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">أغلاق</button>
<button type="button" wire:click.prevent="store()" class="btn btn-primary">حفظ التعديلات</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
شرح كيف يعمل البحث
بداخل المكون السابق لعمليات CRUD
يتم تنفيذ البحث في خطوتين الأولي بداخل الصنف
public function render()
{
$search = '%' . $this->searchTerm. '%';
$students = Student::where('firstname','LIKE',$search)
->orWhere('lastname','LIKE',$search)
->orWhere('email','LIKE',$search)
->orWhere('phone','LIKE',$search)
->orderBy('id','DESC')->paginate(12);
return view('livewire.students',['students'=>$students]);
}
الثانية بداخل ملف العرض سوف تجد الكود هكذا
<div class="col-md-2"> <div class="form-outline"> // عمل Property_binding //للبحث بداخل الفورم <input type="search" id="form1" class="form-control" wire:model='searchTerm' placeholder="بحث ..." /> </div> </div>
رفع ملف
الخطوة رقم 1
// قم بانشاء ملف تهجير ونموذج جديد من خلال هذا الأمر
php artisan make:model Upload -m
// هذا هو كود ومحتوي الجدول
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUploadsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('uploads', function (Blueprint $table) {
//المعرف
$table->id();
//عنوان الملف المرفوع
$table->string('title');
//أسم الملف المرفوع
$table->string('filename');
// الطابع أو الختم الزمني للجدول
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('uploads');
}
}
// بعد ذلك توجة الي النموذج وقم بأضافة الكود التالي بداخلة
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Upload extends Model
{
use HasFactory;
//[ protected: يمكن الوصول الي الخاصية أو الطريقة داخل الصنف أو الصنف الذي يرثه ] هي نوع من أنواع الحماية
protected $fillable = ['title','filename'];
}
الخطوة رقم 2
//لتهجير قاعدة البيانات أستخدم هذه الأمر php artisan migrate // بعد ذلك قم بأنشاء مكون جديد بالأسم uploads php artisan make:livewire Uploads //قم بأنشاء مسار جديد بداخل ملف المسارات الموجود في routes/web.php Route::get(‘/upload’,Uploads::class); // لا تنسي أستيراد الأسم جيدا use App\Http\Livewire\Uploads;
الخطوة رقم 3
<?php
namespace App\Http\Livewire;
use App\Models\Upload;
use Livewire\Component;
use Livewire\WithFileUploads;
class Uploads extends Component
{
use WithFileUploads;
public $title;
public $filename;
public function updated($fields)
{
$this->validateOnly($fields,[
'title' => 'required',
'filename' => 'required'
]);
}
public function fileUpload()
{
$validatedData = $this->validate([
'title' => 'required',
'filename' => 'required'
]);
$filename = $this->filename->store('files','public');
$validatedData['filename'] = $filename;
Upload::create($validatedData);
session()->flash('message','File successfully uploaded');
$this->emit('fileUploaded');
}
}
الخطوة رقم 4
<div>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<div class="card">
<div class="card-header">
File Upload
</div>
<div class="card-body">
<form id="form-upload" wire:submit.prevent="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<lable for="title">Ttile</lable>
<input type="text" name="title" class="form-control" wire:model="title" />
@error('title') <p class="text-danger">{{$message}}</p> @enderror
</div>
<div class="form-group">
<lable for="filename">File</lable>
<input type="file" name="filename" class="form-control" wire:model="filename" />
@error('filename') <p class="text-danger">{{$message}} @enderror
</div>
<button type="submit" class="btn btn-success">Upload</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</section>
</div>
//توجة الي مجلد LAYOUTS app.blade.php وقم بأضافة الكود التالي
<script>
window.livewire.on('fileUploaded',()=>{
$('#form-upload')[0].reset();
});
</script>
رفع الصور
قم بأنشاء ملف تهجير ونموذج
php artisan make:model Image –m
بداخلة سوف يكون هناك الكود التالي
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('filename');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}
توجة الي النموذج وقم باضافه الكود التالي لجعل الحقل قابل للملئ fillable
protected $fillable = ['filename'];
للتعرف علي معدلات الوصول من خلال هذا الرابط
لتهجير قاعدة البيانات من خلال الأمر التالي
php artisan migrate
: بعد ذلك قم بكتابة المسار التالي
قم بانشاء مكون جديد
php artisan make:livewire Images
: بعد ذلك قم بكتابة المسار التالي
Route::get(‘/upload-images’,Images::class); //نأكد من تضمين أسم أو أستخدام أسم المسار جيدا هكذا use App\Http\Livewire\Images;
توجة الي ملف الصنف وقم باضافة الكود التالي
<?php
namespace App\Http\Livewire;
use App\Models\Image;
use Livewire\Component;
use Livewire\WithFileUploads;
class Images extends Component
{
use WithFileUploads;
public $images = [];
public function uploadimages(){
foreach($this->images as $key=>$image){
$this->images[$key] = $image->store('images','public');
}
$this->images = json_encode($this->images);
Image::create(['file_name'=>$this->images]);
session()->flash('message','! تم رفع الصور بنجاح');
$this->emit('imagesuploaded');
}
public function render()
{
return view('livewire.images');
}
}
توجة الي ملف العرض وقم باضافة الكود التالي
<div>
{{-- رفع الصور --}}
<section dir="rtl" style="text-align: right">
<div class="container">
<div class="row">
<div class="col-m-6 offset-md-3">
<div class="card">
<div class="card-header">
<h3>رفع الصور</h3>
</div>
@if(Session()->has('message'))
<div class="alert alert-success">{{ Session('message') }}</div>
@endif
<div class="card-body">
<form wire:submit.prevent='uploadimages' id="imagesuploaded" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="images">أختيار الصور</label>
<input type="file" name="images" class="form-control" wire:model='images' multiple >
@error('images')
<p class="text-danger">{{$message}}</p>
@enderror
</div>
<button type="submit" class="btn btn-success" style="margin-top: 5px;">أرسال</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>