cruds
تفاصيل العمل
نوع العمل:
هذا المشروع هو تطبيق ويب لنظام إدارة المنتجات يعتمد على تقنيات:
HTML لبنية الصفحة
CSS للتنسيقات والتزيين
JavaScript للوظائف والتفاعل
localStorage لتخزين البيانات محليًا في المتصفح
الميزات الرئيسية:
وظائف CRUD الأساسية:
إنشاء منتجات جديدة (Create)
قراءة وعرض المنتجات (Read)
تحديث المنتجات الحالية (Update)
حذف المنتجات (Delete)
ميزات إضافية:
حساب المجموع الكلي للسعر بعد الضرائب والإعلانات والخصومات
إمكانية إضافة عدة نسخ من نفس المنتج مرة واحدة
البحث عن المنتجات حسب العنوان أو الفئة
واجهة مستخدم جذابة وتفاعلية
تخزين البيانات محليًا في المتصفح (localStorage)
تصميم متجاوب يعمل على مختلف أحجام الشاشات
واجهة المستخدم:
ألوان داكنة مريحة للعين
تأثيرات حركية عند التركيز على الحقول
أزرار واضحة ومحددة الوظائف
طريقة التنفيذ:
الهيكل الأساسي (HTML):
نموذج إدخال بيانات المنتج (العنوان، السعر، الضرائب، الإعلانات، الخصم، الكمية، الفئة)
منطقة عرض البيانات في شكل جدول
أدوات البحث والتصفية
التنسيقات (CSS):
استخدام ألوان متناسقة مع خلفية داكنة
تأثيرات حركية عند التفاعل مع العناصر
تصميم متجاوب يعمل على الشاشات الصغيرة
الوظائف (JavaScript):
حفظ البيانات في localStorage
معالجة عمليات CRUD
حساب المجموع الكلي تلقائيًا
تنفيذ عمليات البحث والتصفية
إدارة حالات التطبيق (وضع الإنشاء أو التحديث)
كيفية الاستخدام:
لإضافة منتج جديد:
املأ حقول البيانات
اضغط على زر "Create"
لتحديث منتج موجود:
اضغط على زر "Update" بجوار المنتج
عدل البيانات في النموذج
اضغط على زر "Update One"
لحذف منتج:
اضغط على زر "Delete" بجوار المنتج
للبحث عن منتجات:
اختر نوع البحث (حسب العنوان أو الفئة)
ابدأ الكتابة في حقل البحث
لحذف جميع المنتجات:
اضغط على زر "Delete All"
هذا النظام مناسب لإدارة المخزون البسيط أو المنتجات الشخصية دون الحاجة إلى خادم أو قاعدة بيانات خارجية، حيث يتم تخزين كل البيانات محليًا في متصفح المستخدم.