2- الفرق بين الـ Front-End و الـ Back-End – مقدمة في HTML – المستوى الأول: الأساسيات
📌 الفرق بين الـ Front-End و الـ Back-End
🔹 1. ما هو الـ Front-End؟
-
الـ Front-End هو الجزء الظاهر للمستخدم (User Interface).
-
هو كل ما تراه وتتعامل معه في الموقع أو التطبيق:
-
النصوص
-
الأزرار
-
الصور
-
القوائم
-
الألوان والتنسيقات
-
🔧 الأدوات والتقنيات الأساسية في الـ Front-End:
-
HTML → لإنشاء هيكل الصفحة (النصوص، الصور، الجداول).
-
CSS → لتنسيق الصفحة (ألوان، خطوط، ترتيب العناصر).
-
JavaScript → لإضافة التفاعلية (القوائم المنسدلة، السلايدر، النماذج الديناميكية).
📌 أحيانًا يستخدم المبرمج مكتبات أو أُطر عمل (Frameworks) مثل:
-
React.js
-
Angular
-
Vue.js
🔹 2. ما هو الـ Back-End؟
-
الـ Back-End هو الجزء الخلفي غير المرئي للمستخدم، لكنه مسؤول عن تشغيل الموقع من الداخل.
-
هو الجزء الذي يتعامل مع الخادم (Server) و قاعدة البيانات (Database).
-
يحدد كيف تصل البيانات من المستخدم وتُعالج ثم تُرجع له.
🔧 الأدوات والتقنيات الأساسية في الـ Back-End:
-
لغات البرمجة:
-
PHP
-
Python (Django, Flask)
-
Node.js (JavaScript في السيرفر)
-
Ruby, Java, C# .NET
-
-
قواعد البيانات:
-
MySQL
-
PostgreSQL
-
MongoDB
-
Oracle
-
-
السيرفرات:
-
Apache
-
Nginx
-
📌 مسؤوليات الـ Back-End تشمل:
-
تسجيل الدخول / تسجيل الخروج
-
تخزين بيانات المستخدمين
-
معالجة الطلبات (Requests)
-
التعامل مع الدفع أونلاين
-
الحماية والأمان
🔹 3. مثال عملي (موقع تسوق إلكتروني)
🖥️ Front-End (ما تراه):
-
صفحة المنتج (صور + سعر + وصف)
-
زر “إضافة إلى السلة”
-
زر “شراء الآن”
-
نموذج تسجيل الدخول
⚙️ Back-End (ما يحدث خلف الكواليس):
-
لما تضغط “إضافة إلى السلة” → يتم إرسال طلب للسيرفر لحفظ المنتج في حسابك.
-
لما تعمل “تسجيل الدخول” → يتم التأكد من اسم المستخدم وكلمة المرور من قاعدة البيانات.
-
لما تدفع → السيرفر يتواصل مع بوابة الدفع (Payment Gateway) ويتأكد من نجاح العملية.
🔹 4. تشبيه مبسط
-
تخيل أنك رايح مطعم 🍽️
➡️ Front-End:
-
الطاولة، الكراسي، قائمة الطعام (المنيو)، شكل الديكور، الأكل المعروض أمامك.
➡️ Back-End:
-
المطبخ، الطباخين، تخزين المكونات، تجهيز الأكل.
👉 المستخدم يتعامل مع “المنيو” والأكل (Front-End)، لكنه ما يشوفش المطبخ (Back-End).
🔹 5. Full-Stack Developer
-
المبرمج اللي يعرف يشتغل على Front-End و Back-End مع بعض اسمه:
👉 Full-Stack Developer