في هذا السياق، سنقوم بمناقشة كيفية إنشاء قوائم منسدلة باستخدام إطار العمل Laravel ومكتبة jQuery، وكيف يمكن دمجهما بشكل سهل وفعّال لتحقيق تفاعل ديناميكي في واجهة المستخدم.
للبداية، يجب أولاً تحميل Laravel وتكوين المشروع. يمكنك استخدام Composer لتثبيت Laravel بسهولة. بعد تكوين المشروع، ستحتاج إلى إنشاء نموذج (Model) وتحديثه بالمعلومات الخاصة بالقوائم المنسدلة.
phpphp artisan make:model Category php artisan make:model Subcategory
سيقوم ذلك بإنشاء ملفين داخل مجلد app/Models لكل من Category و Subcategory.
ثم، قم بتعديل ملف النموذج Category.php ليحتوي على العلاقة مع Subcategory:
php// app/Models/Category.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
public function subcategories()
{
return $this->hasMany(Subcategory::class);
}
}
بعد ذلك، يجب عليك تنفيذ عمليات التهيئة والتحديث لقاعدة البيانات باستخدام مهام التهيئة:
bashphp artisan migrate
الآن، دعنا نقوم بتحديث ملف التوجيه (routes) للحصول على بيانات الفئات والفئات الفرعية:
php// routes/web.php
use App\Models\Category;
use App\Models\Subcategory;
Route::get('/', function () {
$categories = Category::with('subcategories')->get();
return view('welcome', compact('categories'));
});
ثم يمكنك إنشاء عرض (View) لعرض البيانات في واجهة المستخدم:
html
html>
<html>
<head>
<title>Laravel Dropdown Liststitle>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
<label for="category">Category:label>
<select id="category">
<option value="">Select Categoryoption>
@foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}option>
@endforeach
select>
<br>
<label for="subcategory">Subcategory:label>
<select id="subcategory">
<option value="">Select Subcategoryoption>
select>
<script>
$(document).ready(function(){
$('#category').change(function(){
var category_id = $(this).val();
$.ajax({
url: '/get-subcategories/'+category_id,
type: 'get',
dataType: 'json',
success: function(response){
$('#subcategory').empty();
$.each(response, function(index, subcategory){
$('#subcategory').append('+'">'+subcategory.name+'');
});
}
});
});
});
script>
body>
html>
سيقوم الكود أعلاه بإنشاء قائمتين منسدلتين، إحداها تعرض الفئات والأخرى تعرض الفئات الفرعية المرتبطة بالفئة المحددة. يتم استخدام jQuery لتنفيذ طلب AJAX لاسترجاع الفئات الفرعية بناءً على الفئة المحددة.
المزيد من المعلومات
بالطبع، دعنا نستكمل بمزيد من المعلومات حول كيفية تنفيذ هذا النظام باستخدام Laravel و jQuery.
أولاً وقبل كل شيء، يجب عليك تحديد مسار لاسترجاع الفئات الفرعية بناءً على الفئة المحددة. يمكننا القيام بذلك من خلال إنشاء وحدة تحكم (Controller) لهذا الغرض. استخدم الأمر التالي لإنشاء وحدة التحكم:
bashphp artisan make:controller SubcategoryController
بعد ذلك، قم بتحديث ملف وحدة التحكم SubcategoryController.php ليحتوي على الطريقة (Method) التي ستقوم بإرجاع الفئات الفرعية:
php// app/Http/Controllers/SubcategoryController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Category;
class SubcategoryController extends Controller
{
public function getSubcategories($id)
{
$category = Category::find($id);
$subcategories = $category->subcategories;
return response()->json($subcategories);
}
}
ثم، قم بتحديث ملف التوجيه لتوجيه الطلبات إلى وحدة التحكم المناسبة:
php// routes/web.php
use App\Http\Controllers\SubcategoryController;
Route::get('/get-subcategories/{id}', [SubcategoryController::class, 'getSubcategories']);
هنا، يتم تحديد مسار '/get-subcategories/{id}' الذي سيستخدم لاسترجاع الفئات الفرعية بناءً على الهوية المميزة للفئة الرئيسية المحددة.
آخذًا في اعتبارك، يمكنك أيضاً تحسين الطريقة التي يتم بها تحميل الفئات والفئات الفرعية لتحسين أداء تطبيقك. يمكنك استخدام نموذج (Eager Loading) مسبق التحميل لتحميل البيانات ذات الصلة مسبقًا بدلاً من القيام بعمليات استعلام فرعية.
هذه الخطوات تقدم لك أساسًا قويًا لإنشاء قوائم منسدلة ديناميكية باستخدام Laravel و jQuery. يمكنك تكامل هذه الطريقة مع تصميم الواجهة الخاصة بك وتحسينها وفقًا لاحتياجات تطبيقك المحدد.
