بناء تطبيق Todo List بلغة Laravel 5: دليل تفصيلي
في هذا الدليل الشامل، سنستكشف معًا عملية إنشاء تطبيق Todo List باستخدام إطار العمل Laravel 5. سنغوصل خطوة بخطوة من البداية حتى النهاية، مما يمكنك من فهم العمليات والمفاهيم المتورطة في تطوير تطبيق ويب بسيط ولكنه فعال.
الخطوة 1: تثبيت Laravel
أول خطوة هي تثبيت Laravel على نظام الخادم الخاص بك. يمكنك استخدام Laravel Installer لتحقيق ذلك بسهولة. ابدأ بفتح نافذة الطرفية واستخدم الأمر التالي:
bashcomposer create-project --prefer-dist laravel/laravel todo-list
سيقوم هذا بتحميل Laravel وتثبيته في دليل جديد يسمى “todo-list”.
الخطوة 2: إعداد قاعدة البيانات
في الملف .env
الذي يقع في مجلد تطبيق Laravel الخاص بك، قم بتكوين إعدادات قاعدة البيانات الخاصة بك، مثل اسم قاعدة البيانات واعتمادات الوصول.
envDB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=اسم_قاعدة_البيانات DB_USERNAME=اسم_المستخدم DB_PASSWORD=كلمة_المرور
الخطوة 3: إنشاء نموذج Todo
قم بإنشاء نموذج Eloquent لتمثيل مهام Todo. في مجلد app
، أنشئ ملفًا جديدًا بعنوان Todo.php
. استخدم الأمثلة التالية كنقطة انطلاق:
php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
protected $fillable = ['task', 'completed'];
}
الخطوة 4: إنشاء وحدة تحكم TodoController
أنشئ وحدة تحكم جديدة باستخدام الأمر Artisan:
bashphp 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 باستخدام الأمر:
bashphp artisan serve
وبعد ذلك، قم بفتح المتصفح وانتقل إلى http://localhost:8000
لرؤية تطبيق Todo List الخاص بك.
الخطوة 10: التحسينات والإضافات المستقبلية
في المستقبل، يمكنك استكمال التحسينات مثل إضافة تسجيل الدخول والتحقق من صحة البيانات. كما يمكنك بناء وظائف إضافية مثل تحديد المهام المكتملة وترتيبها.
بهذا، قد قمنا بتوجيهك خطوة بخطوة عبر عملية إنشاء تطبيق Todo List باستخدام Laravel 5. يمكنك الآن استكمال تحسيناتك وتكامل ميزات إضافية وتعديل التصميم وفقًا لاحتياجاتك.
المزيد من المعلومات
بالتأكيد، سنوسع المعلومات حول عملية إنشاء تطبيق Todo List باستخدام Laravel 5 ونضيف بعض التفاصيل حول بعض الجوانب الهامة لهذا البرنامج.
الخطوة 5: تعريف الطرق في TodoController
قم بتحديد الطرق في TodoController.php
باستخدام الأمثلة التالية:
phppublic 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
، قم بتحديد العرض كالتالي:
php@foreach($todos as $todo)
{{ $todo->task }}
@endforeach
الخطوة 7: تكامل الطرق مع النموذج وقاعدة البيانات
تأكد من تكامل الطرق مع النموذج Todo والتفاعل مع قاعدة البيانات. ضمن هذا السياق، يمكنك استخدام طرق النموذج Eloquent للتفاعل مع البيانات بشكل فعال.
الخطوة 8: تنسيق وتصميم الواجهة
قم بتصميم وتنسيق واجهة المستخدم باستخدام CSS و JavaScript. يمكنك استخدام مكتبات مثل Bootstrap لجعل التصميم أكثر جاذبية واستجابة.
الخطوة 9: اختبار التطبيق
استخدم PHPUnit أو أي أداة اختبار تفضلها لضمان أن تطبيقك يعمل بشكل صحيح ولا يحتوي على أخطاء.
الخطوة 10: التحسينات والإضافات المستقبلية
يمكنك استمرار تحسين تطبيقك باستخدام Laravel Mix لإدارة الملفات الثابتة وتحسين الأداء. يمكنك أيضاً إضافة ميزات إضافية مثل فرز المهام وتسجيل الدخول للمستخدمين.
باختصار، إنشاء تطبيق Todo List باستخدام Laravel 5 يتضمن تكامل مكونات Laravel المختلفة بشكل فعّال وتصميم واجهة مستخدم تفاعلية لتحسين تجربة المستخدم. يمكنك دائمًا استكشاف المزيد من ميزات Laravel وتقنيات التطوير لتحسين وتوسيع تطبيقك.