إعداد الخوادم المحلية والوصول إلى محتوى صفحات مواقع وصفحات الويب
تعلّم كيفية إعداد خادم محلي يُعدّ من أهم المهارات التي يحتاجها مطوّرو الويب، وطلاب تكنولوجيا المعلومات، وروّاد الأعمال الرقميون. سواء كنت تختبر موقعك الإلكتروني قبل نشره على الإنترنت، أو تتعلّم أساسيات عمل الويب، فإن تشغيل خادم محلي يساعدك على محاكاة بيئة العمل الحقيقية بأمان وكفاءة.
في هذا الدليل، ستتعلّم خطوة بخطوة كيفية تثبيت وتكوين وتشغيل خادم ويب محلي باستخدام XAMPP أو إضافات VSCode، بالإضافة إلى كيفية الوصول إلى ملفات HTML الخاصة بك عبر localhost باستخدام بروتوكولات HTTP. في النهاية، ستفهم كيف يمكنك تحويل حاسوبك إلى بيئة استضافة مصغّرة لمواقع الويب.
لماذا يجب أن تتعلّم إعداد خادم محلي؟
- التجربة بأمان: اختبر المواقع والتطبيقات الجديدة دون التأثير على الخوادم الحقيقية.
- فهم أساسيات الويب: تعرّف على كيفية تواصل المتصفحات مع الخوادم عبر بروتوكول HTTP.
- توفير المال: لست بحاجة إلى شراء استضافة حتى يصبح مشروعك جاهزًا للنشر.
- التطوير دون اتصال: يمكنك كتابة الكود واختباره ومعاينته بدون الحاجة للإنترنت.
- تسريع التعلّم: تدرب على ربط قواعد البيانات، وإدارة الملفات، ونشر المواقع محليًا.
الخطوة 1: تثبيت XAMPP لإعداد الخادم المحلي
XAMPP هو حزمة برمجية مجانية ومفتوحة المصدر تحتوي على Apache (خادم ويب)، وMySQL (قاعدة بيانات)، وPHP (لغة برمجة). يتيح لك تشغيل تطبيقات الويب على جهازك كما لو كانت على خادم حقيقي.
خطوات التثبيت:
- قم بزيارة Apache Friends - XAMPP وحمّل النسخة المناسبة لنظام التشغيل لديك (Windows أو macOS أو Linux).
- شغّل المثبّت واتبع خطوات المعالج. استخدم الإعدادات الافتراضية ما لم يكن لديك تفضيلات خاصة.
- بعد التثبيت، افتح لوحة تحكم XAMPP وابدأ خدمة Apache.
- تحقق من عمل الخادم المحلي بزيارة
http://localhostفي متصفحك.
إذا ظهرت صفحة الترحيب الخاصة بـ XAMPP، فتهانينا — لقد أصبح خادمك المحلي جاهزًا للعمل!
الخطوة 2: إعداد مجلد المشروع
الآن بعد أن أصبح الخادم يعمل، حان الوقت لإنشاء مساحة عمل لموقعك.
- انتقل إلى مجلد htdocs داخل مجلد تثبيت XAMPP (عادةً في
C:\xampp\htdocsعلى نظام Windows). - أنشئ مجلدًا جديدًا، مثل
my_website. - داخل هذا المجلد، أنشئ ملفًا جديدًا باسم
index.html. - أضف الكود HTML البسيط التالي:
<!DOCTYPE html> <html> <head> <title>موقعي المحلي</title> </head> <body> <h1>مرحبًا بك في خادمي المحلي!</h1> <p>تعمل هذه الصفحة من جهازك المحلي باستخدام XAMPP.</p> </body> </html> احفظ الملف، ثم افتح http://localhost/my_website/ في المتصفح لترى صفحتك قيد التشغيل.
الخطوة 3: فهم الفرق بين بروتوكولات HTTP و File
عندما تفتح ملف HTML مباشرة (مثل file:///C:/my_website/index.html)، فإن المتصفح يقرأه كملف محلي. لكن عندما تزوره عبر http://localhost/my_website/، فإن خادم Apache يقدّمه من خلال بروتوكول HTTP — تمامًا كما يحدث في المواقع الحقيقية على الإنترنت.
هذا الفرق أساسي، لأن العديد من ميزات الويب (مثل النماذج، والجلسات، وقواعد البيانات) لا تعمل إلا عبر HTTP. لهذا السبب، استخدام خادم محلي ضروري لتطوير الويب الحقيقي.
الخطوة 4: استخدام إضافة Live Server في VSCode
إذا كنت تفضّل البساطة، يمكنك تجاوز XAMPP واستخدام إضافة Live Server في محرر Visual Studio Code.
- افتح VSCode وثبّت إضافة “Live Server” من السوق (Marketplace).
- افتح ملف HTML الخاص بك واضغط على “Go Live” أسفل المحرر.
- ستُفتح صفحتك تلقائيًا في المتصفح باستخدام خادم محلي مؤقت (مثل
http://127.0.0.1:5500).
هذه الطريقة مثالية للمبتدئين أو لمطوري الواجهة الأمامية.
الخطوة 5: اختبار اتصال الخادم
للتأكد من أن اتصالك بالشبكة المحلية يعمل بشكل صحيح، جرّب الأمر التالي:
ping localhostإذا ظهرت ردود من 127.0.0.1، فهذا يعني أن الشبكة المحلية لديك تعمل بشكل سليم.
المشكلات الشائعة وحلولها
- المنفذ 80 مشغول: قد يكون هناك تطبيق آخر مثل Skype يستخدم نفس المنفذ. غيّر منفذ Apache في إعدادات XAMPP.
- صفحة فارغة: تأكد من أن اسم الملف هو
index.htmlوأنه داخل المجلد الصحيح. - تم رفض الوصول: شغّل XAMPP كمسؤول في Windows أو استخدم
sudoفي Linux.
تطبيقات واقعية
إليك كيف يُستخدم الخادم المحلي في الحياة العملية:
- الطلاب: تدريب عملي على بناء المشاريع في تخصصات تكنولوجيا المعلومات أو علوم الحاسوب.
- المستقلون: إنشاء ومعاينة مواقع العملاء قبل نشرها على الإنترنت.
- المدرّسون: توضيح كيفية تعامل الخوادم مع الطلبات والاستجابات أثناء الدروس.
- الشركات الصغيرة: اختبار تحديثات مواقعهم قبل نشرها للعامة.
الخاتمة
إعداد الخادم المحلي هو الأساس في تطوير الويب. فهو يتيح لك الاختبار والتعلّم والبناء بثقة ودون مخاطرة. سواء استخدمت XAMPP للتحكم الكامل أو إضافة Live Server للبساطة، فإن إتقان هذه المهارة سيساعدك على فهم كيفية عمل المواقع من الأساس.
ومع الممارسة، ستصبح جاهزًا لنقل مشاريعك من localhost إلى الإنترنت — مع فهم شامل لكيفية ترابط كل شيء خلف الكواليس.
أساسيات تعلم الشبكات وخوادم استضافة ويب سايت