بناء تطبيق Todo List بلغة Laravel 5: دليل تفصيلي

في هذا الدليل الشامل، سنستكشف معًا عملية إنشاء تطبيق Todo List باستخدام إطار العمل Laravel 5. سنغوصل خطوة بخطوة من البداية حتى النهاية، مما يمكنك من فهم العمليات والمفاهيم المتورطة في تطوير تطبيق ويب بسيط ولكنه فعال.

الخطوة 1: تثبيت Laravel

أول خطوة هي تثبيت Laravel على نظام الخادم الخاص بك. يمكنك استخدام Laravel Installer لتحقيق ذلك بسهولة. ابدأ بفتح نافذة الطرفية واستخدم الأمر التالي:

bashCopy code
composer create-project --prefer-dist laravel/laravel todo-list

سيقوم هذا بتحميل Laravel وتثبيته في دليل جديد يسمى “todo-list”.

الخطوة 2: إعداد قاعدة البيانات

في الملف .env الذي يقع في مجلد تطبيق Laravel الخاص بك، قم بتكوين إعدادات قاعدة البيانات الخاصة بك، مثل اسم قاعدة البيانات واعتمادات الوصول.

envCopy code
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=اسم_قاعدة_البيانات
DB_USERNAME=اسم_المستخدم
DB_PASSWORD=كلمة_المرور

الخطوة 3: إنشاء نموذج Todo

قم بإنشاء نموذج Eloquent لتمثيل مهام Todo. في مجلد app، أنشئ ملفًا جديدًا بعنوان Todo.php. استخدم الأمثلة التالية كنقطة انطلاق:

phpCopy code


namespace App;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $fillable = ['task', 'completed'];
}

الخطوة 4: إنشاء وحدة تحكم TodoController

أنشئ وحدة تحكم جديدة باستخدام الأمر Artisan:

bashCopy code
php artisan make:controller TodoController

سينشئ هذا وحدة تحكم جديدة في app/Http/Controllers بعنوان TodoController.php.

الخطوة 5: تعريف الطرق في TodoController

افتح TodoController.php وقم بتعريف الطرق الأساسية التي سنحتاجها، مثل العرض والإضافة والتحديث والحذف.

الخطوة 6: إعداد العرض في العرض

قم بإعداد العرض في ملف resources/views/welcome.blade.php ليظهر قائمة Todo ونموذج إضافة Todo.

الخطوة 7: تكامل الطرق مع النموذج وقاعدة البيانات

اتصل بنموذج Todo واجعل الطرق تتفاعل مع قاعدة البيانات. يمكنك استخدام Eloquent لتسهيل هذه العملية.

الخطوة 8: تنسيق وتصميم الواجهة

استخدم CSS و JavaScript لتنسيق وتحسين واجهة المستخدم الخاصة بك. يمكنك استخدام Bootstrap أو أي إطار تصميم آخر حسب تفضيلك.

الخطوة 9: اختبار التطبيق

قم بتشغيل خادم التطوير المدمج في Laravel باستخدام الأمر:

bashCopy code
php artisan serve

وبعد ذلك، قم بفتح المتصفح وانتقل إلى http://localhost:8000 لرؤية تطبيق Todo List الخاص بك.

الخطوة 10: التحسينات والإضافات المستقبلية

في المستقبل، يمكنك استكمال التحسينات مثل إضافة تسجيل الدخول والتحقق من صحة البيانات. كما يمكنك بناء وظائف إضافية مثل تحديد المهام المكتملة وترتيبها.

بهذا، قد قمنا بتوجيهك خطوة بخطوة عبر عملية إنشاء تطبيق Todo List باستخدام Laravel 5. يمكنك الآن استكمال تحسيناتك وتكامل ميزات إضافية وتعديل التصميم وفقًا لاحتياجاتك.

بالتأكيد، سنوسع المعلومات حول عملية إنشاء تطبيق Todo List باستخدام Laravel 5 ونضيف بعض التفاصيل حول بعض الجوانب الهامة لهذا البرنامج.

الخطوة 5: تعريف الطرق في TodoController

قم بتحديد الطرق في TodoController.php باستخدام الأمثلة التالية:

phpCopy code
public function index()
{
    $todos = Todo::all();
    return view('todos.index', compact('todos'));
}

public function create()
{
    return view('todos.create');
}

public function store(Request $request)
{
    $validatedData = $request->validate([
        'task' => 'required|max:255',
    ]);

    Todo::create($validatedData);

    return redirect('/todos')->with('success', 'Task added successfully!');
}

public function edit(Todo $todo)
{
    return view('todos.edit', compact('todo'));
}

public function update(Request $request, Todo $todo)
{
    $validatedData = $request->validate([
        'task' => 'required|max:255',
        'completed' => 'boolean',
    ]);

    $todo->update($validatedData);

    return redirect('/todos')->with('success', 'Task updated successfully!');
}

public function destroy(Todo $todo)
{
    $todo->delete();

    return redirect('/todos')->with('success', 'Task deleted successfully!');
}

الخطوة 6: إعداد العرض في العرض

في resources/views/welcome.blade.php، قم بتحديد العرض كالتالي:

phpCopy code
@foreach($todos as $todo)
    

        
{{ $todo->task }}
        
"/todos/{{ $todo->id }}" method="POST">
            @csrf
            @method('DELETE')
            "submit">Delete
        
    
@endforeach

الخطوة 7: تكامل الطرق مع النموذج وقاعدة البيانات

تأكد من تكامل الطرق مع النموذج Todo والتفاعل مع قاعدة البيانات. ضمن هذا السياق، يمكنك استخدام طرق النموذج Eloquent للتفاعل مع البيانات بشكل فعال.

الخطوة 8: تنسيق وتصميم الواجهة

قم بتصميم وتنسيق واجهة المستخدم باستخدام CSS و JavaScript. يمكنك استخدام مكتبات مثل Bootstrap لجعل التصميم أكثر جاذبية واستجابة.

الخطوة 9: اختبار التطبيق

استخدم PHPUnit أو أي أداة اختبار تفضلها لضمان أن تطبيقك يعمل بشكل صحيح ولا يحتوي على أخطاء.

الخطوة 10: التحسينات والإضافات المستقبلية

يمكنك استمرار تحسين تطبيقك باستخدام Laravel Mix لإدارة الملفات الثابتة وتحسين الأداء. يمكنك أيضاً إضافة ميزات إضافية مثل فرز المهام وتسجيل الدخول للمستخدمين.

باختصار، إنشاء تطبيق Todo List باستخدام Laravel 5 يتضمن تكامل مكونات Laravel المختلفة بشكل فعّال وتصميم واجهة مستخدم تفاعلية لتحسين تجربة المستخدم. يمكنك دائمًا استكشاف المزيد من ميزات Laravel وتقنيات التطوير لتحسين وتوسيع تطبيقك.