محاضرة حول تنفيذ موقع التجارة الإلكترونية بدون أطر أو مكتبات

مقدمة

• تنفيذ موقع التجارة الإلكترونية بدون أطر أو مكتبات.
• التركيز على استخدام المهارات الأساسية: JavaScript، HTML، CSS، PHP، و MySQL.
• عرض مشروع عملي بمستوى احترافي.

الميزات الرئيسية للمشروع

1. موقع RESTful: تعلم استهلاك وبناء خدمات تستخدم REST APIs.
2. تطبيق صفحة واحدة (SPA): كفء وسريع، يطلب فقط الموارد اللازمة، دون إعادة تحميل الصفحة بالكامل.
3. تصميم الكود للصيانة: فصل كود الوجهة الأمامية عن الخلفية لجعل الصيانة واستكشاف الأخطاء وإصلاحها أسهل.
4. معالجة مشاكل مشاركة الموارد عبر الأصول (CORS): تعلم معالجة مشاكل CORS في كل من الوجهة الأمامية والخلفية.

الإعداد الأولي

• مجلد المشروع الجذري: shop_online
  • يتضمن مجلد images الوحيد مع مجلدات فرعية متنوعة: women, baby, banner, boy, men, logo, إلخ.
  • ملف CSS (style.css) وملف JS (global.js) مرتبطان في ملف index.html.
• إنشاء ملف HTML: index.html مع هيكل أساسي يحتوي على الأقسام الرئيسية، مثل الرأس، والجزء الرئيسي، والقدم.

تنفيذ شريط التنقل

• إنشاء شريط تنقل مع الفئات التي يتم جلبها ديناميكياً من الخلفية.
• طفلان لقسم الرأس: heading (يحتوي على الشعار وأيقونات المصادقة) و navigation (يحتوي على روابط الفئات).
• تقسيمات منفصلة (left-heading و right-heading) للشعار/شريط البحث والمصادقة/سلة التسوق على التوالي.
• التصميم: استخدام الـ Flexbox للتخطيط وضمان تصميم متجاوب مع خصائص CSS مثل display: flex، justify-content، و align-items.

قسم القدم

• يتضمن القدم قسمين رئيسيين: social-share و general-info (يحتوي على معلومات المساعدة، المواقع، والمعلومات القانونية).
• يحتوي كل طفل على تصميم مرن مع عناصر مرتبة أفقياً.
• نفس المنطق التصميمي كما في شريط التنقل مع خصائص Flexbox.

جلب المحتوى الديناميكي

• جلب البيانات الديناميكية من الخلفية باستخدام fetch API في JavaScript.
• ضمان معالجة الأخطاء القوية وتكوين سياسات CORS في الخلفية باستخدام PHP.
• طلبات جلب منفصلة للفئات، لافتات الإعلانات، المنتجات المميزة، إلخ.

إنشاء قاعدة البيانات والجداول

• MySQL: نمذجة الجداول المطلوبة مثل categories، banners، products، inventory، orders، order items، إلخ.
• معرفات تتزايد تلقائياً ومفاتيح خارجية لضمان التكامل وإنشاء العلاقات.
• مثال: جدول categories يحتوي على أعمدة مثل ID، Name، Status.

منطق PHP الخلفي

• الاتصال بـ MySQL وجلب البيانات المطلوبة باستخدام دوال mysqli.
• معالجة طلبات GET وإرجاع البيانات المشفرة بـ JSON للواجهة الأمامية.
• تضمين عبارات محضّرة للتفاعلات الآمنة مع قاعدة البيانات.
• استخدام الجلسات للحفاظ على حالات المستخدم وترويسات CORS للطلبات عبر المجالات المختلفة.

تنفيذ منطق تطبيق صفحة واحدة (SPA)

• المنطق الأمامي: تحديث محتوى الصفحة ديناميكياً دون إعادة تحميل الصفحة بالكامل، يتم تنفيذه باستخدام مستمعات الأحداث في JavaScript ومعالجة DOM.
• اتصال الخلفية: جلب بيانات الخلفية باستخدام FETCH API وتحديث الأقسام المطلوبة ديناميكياً.

تنفيذ سلة التسوق

• المستخدمون الضيوف: سلة التسوق معتمدة على الجلسة، ومخزنة في جلسات PHP.
• المستخدمون المسجلون: سلة التسوق مخزنة في قاعدة بيانات MySQL، تسهيل الاستمرارية والإدارة في مرات تسجيل الدخول/الطلبات اللاحقة.
• إضافة وإزالة العناصر، تحديث الكميات، عملية الدفع - كل ذلك يتم تنفيذه بطريقة صديقة للمستخدم.

عملية الدفع

• المستخدمون الضيوف والمستخدمون المسجلون: تدفقات مختلفة لعملية الدفع عند دفع مستخدم ضيف أو مستخدم مسجل.
• التكامل مع بوابة الدفع Stripe لمعالجة مدفوعات العملاء في بيئة حية.
• تنفيذ جداول الطلبات لتسجيل تفاصيل الدفع مثل معلومات المستخدم (إذا كان ضيفاً) أو معرف المستخدم (إذا كان مسجلاً)، تفاصيل المنتجات، الكميات، وحالات الدفع.

الخاتمة

• موقع تجارة إلكترونية كامل، معياري، ذو مستوى احترافي مبني من الصفر باستخدام تقنيات الويب الأساسية.
• تعلم عملي للعديد من المهارات الاحترافية الحيوية بما في ذلك REST APIs، SPAs، إدارة قواعد البيانات، وتكامل بوابات الدفع الخارجية.

الموارد والمزيد من القراءة

• الوثائق الرسمية: Stripe API، fetch API في PHP، وثائق MySQL لنمذجة قواعد البيانات.
• أمثلة عملية على الكود: مقدمة طوال السلسلة لفهم أفضل وممارسة التشفير.

رمز تعبيري: 🛍️