crud system – تطبيق ويب لإدارة المنتجات

هذا النظام هو تطبيق ويب بسيط لإدارة المنتجات يعتمد على JavaScript وHTML مع استخدام Bootstrap للتنسيق. يقوم النظام بتنفيذ عمليات CRUD الأساسية:

1. الإضافة (Create)

- يمكن للمستخدم إدخال اسم المنتج، سعره، فئته ووصفه

- يتم التحقق من صحة اسم المنتج باستخدام التعبيرات النمطية (Regex)

- يجب أن يبدأ الاسم بحرف كبير ويتكون من 3-10 أحرف صغيرة

- عند النقر على زر "Add product" يتم إضافة المنتج إلى القائمة

2. العرض (Read)

- تُعرض جميع المنتجات في جدول يتضمن معرف المنتج، اسمه، سعره، فئته، وصفه وأزرار التحكم

- بيانات المنتجات مخزنة في local Storage لضمان استمرارية البيانات عند إعادة تشغيل المتصفح

3. التحديث (Update)

- يمكن تحديث بيانات أي منتج بالنقر على زر "up date"

- عند النقر على هذا الزر، تُعبأ بيانات المنتج في حقول الإدخال للتعديل عليها

- لكن يبدو أن وظيفة حفظ التعديلات غير مكتملة في الكود الحالي

4. الحذف (Delete)

- يمكن حذف أي منتج من القائمة بالنقر على زر "Delete"

- يتم حذف المنتج فوراً من القائمة ومن local Storage

5. البحث

- يمكن البحث عن المنتجات من خلال حقل البحث أعلى الجدول

- البحث يتم بناءً على اسم المنتج بشكل تلقائي أثناء الكتابة

- البحث يعمل بغض النظر عن حالة الأحرف (كبيرة أو صغيرة)

يستخدم النظام local Storage كقاعدة بيانات بسيطة لتخزين مصفوفة من كائنات المنتجات واسترجاعها، مما يتيح استمرارية البيانات بين جلسات استخدام المتصفح.