قمت بتصميم موقع للتعامل مع المنتجات(CRUD Product Management System)

قمت بتصميم موقع للتعامل مع المنتجات (انشاء وتعديل وحذف وتحديث) CRUD Product Management System

CRUD PRODUCT MANAGEMENT SYSTEM. يمكن تقسيم الصفحة كما يلي:

1. شريط الإدخال العلوي (نموذج إضافة/تعديل المنتج)

• خانات إدخال: نلاحظ وجود خانات مثل:

• title لإدخال اسم المنتج.

• price وtaxes وads وdiscount لتحديد سعر المنتج والضرائب والإعلانات والخصم.

• count لعدد القطع المتاحة.

• category أو “categories” لتصنيف المنتج.

• total وهو حقل قد يظهر أو يُحدّث تلقائيًا بمجرد حساب السعر متضمّنًا الضرائب والإعلانات والخصم.

• أزرار تحكّم:

• create لإنشاء منتج جديد.

• delete all لحذف جميع السجلات دفعة واحدة.

• مساحة للبحث: جزآن للبحث؛ الأوّل يُمكّنك من search by title، والثاني للبحث search by category مما يسهّل الوصول إلى المنتج بسرعة.

2. جدول عرض البيانات (Products Table)

• يحتوي أعمدة مرتبة بوضوح:

1. ID: رقم تعريف المنتج أو التسلسل.

2. Title: اسم المنتج (مثل coffee, tea, water…).

3. Price وTaxes وAds وDiscount وTotal: قيم رقمية تساعد المستخدم على معرفة كافة تفاصيل التكاليف.

4. Category: التصنيف الذي أُدرج تحته المنتج.

5. Update وDelete: زران منفصلان بكل صف، لتحديث المنتج أو حذفه فورًا.

• الجدول ملوّن بأسلوب داكن (خلفية رمادية مائلة للأسود ونصوص وعناصر باللون الوردي/الفوشيا) ما يعطي طابعًا عصريًا وسهلًا للعين.

3. التصميم العام وأسلوب العرض

• التنسيق الأفقي: تجد الحقول والأزرار مُصطفّة في صفٍّ واحد أو صفين بشكل منظم يعكس سهولة الاستخدام.

• سهولة التعديل: فور الضغط على زر update بأي صف، يمكنك تعديل بيانات ذلك المنتج في الحقول العلوية. أمّا زر delete فيحذف المنتج من الجدول. زر delete all يُزيل كافة العناصر بضغطة واحدة.

• التخزين المحلي (local storage): بمجرد إدخال المنتجات وتحديثها أو حذفها، يتم حفظ المعلومات في المتصفح باستخدام تقنية local storage؛ ما يجعل المنظومة تعمل بسلاسة وبدون الحاجة إلى خادم خلفي والاحتفاظ بها ف الموقع عند العوده اليها.

لماذا هذا التصميم مميز؟

• تجربة مستخدم بسيطة: كل الأدوات الأساسية (الإضافة، الحذف، البحث، التحديث) متوفرة في واجهة واحدة بدون تشتيت.

• مظهر عصري: الألوان الداكنة مع تميّز اللون الوردي تعطي انطباعًا احترافيًا وحديثًا.

• عملي وقوي: الاعتماد على HTML + CSS + JS + local storage .