تصميم موقع الويب الخاص بك مع PHP و MySQL


الدرس: إعداد بيئة العمل الخاصة بك


الصفحة السابقة
نحن نعلم الآن أن PHP يعمل على الخادم وأن دوره هو إنشاء صفحات الويب. ومع ذلك ، لا يمكن قراءته الا عن طريق خادم PHP ؛ لكن جهاز الكمبيوتر الخاص بك ليس خادم. كيف ستتمكن على وجه الأرض من إنشاء موقع ديناميكي إذا كان PHP لا يعمل في المنزل؟
لا يهم ، سنقوم بتحويل جهاز الكمبيوتر الخاص بك مؤقتًا إلى خادم حتى تتمكن من تشغيل PHP والعمل على موقعك. ستكون جاهزًا للبرنامج بعد قراءة هذا الفصل!

ما هي البرامج المطلوبة؟


اعتمادًا على ما إذا كنت تنشئ موقعًا ثابتًا أو موقعًا ديناميكيًا ، فأنت بحاجة إلى برامج مختلفة. في الواقع ، يتطلب إنشاء موقع ديناميكي ، للأسف ، بعض البرامج الإضافية!
مع موقع ثابت
محظوظو مشرفي المواقع الذين ينشئون مواقع ثابتة باستخدام HTML و CSS ، وعادة ما يكون لديهم جميع البرامج التي يحتاجونها.
  • محرر نصوص : من الناحية النظرية ، يكفي برنامج مثل Notepad الذي يتم تسليمه مع Windows ، على الرغم من أنه يوصى باستخدام أداة أكثر تطوراً قليلاً مثل Notepad ++. سنتحدث مرة أخرى عن اختيار المحرر في نهاية هذا الفصل.
  • متصفح ويب : يسمح باختبار صفحة الويب. يمكنك على سبيل المثال استخدام Mozilla Firefox أو Internet Explorer أو Google Chrome أو Opera أو Safari أو أي متصفح آخر اعتدت على الانتقال إليه على الويب. يُنصح باختبار موقعك بانتظام على متصفحات مختلفة.
web dynamique php
ومع ذلك ، بالنسبة لأولئك الذين يعملون على مواقع ديناميكية ، فإن هذه الأدوات ليست كافية. من الضروري تثبيت برامج إضافية.
مع موقع ديناميكي
لكي يقرأ حاسوبك PHP ، يجب أن يتصرف مثل الخادم. كن مطمئنًا ، لست بحاجة إلى شراء جهاز خاص لهذا: فقط قم بتثبيت نفس البرامج الموجودة على الخوادم التي توفر مواقع الويب للمستخدمين.
ما هي البرامج التي سنحتاجها ، ما هي؟
  • Apache : وهذا ما يسمى خادم الويب. هذا هو أهم البرنامج ، لأنه المسؤول عن تسليم صفحات الويب للزائرين. ومع ذلك ، فإن Apache يدير مواقع الويب الثابتة فقط (يمكنه فقط معالجة صفحات HTML ) . يجب أن تستكمل مع البرامج الأخرى.
  • PHP : إنه مكون إضافي لـ Apache يجعله قادرًا على معالجة صفحات الويب الديناميكية في PHP . بوضوح ، من خلال الجمع بين Apache و PHP ، سيكون جهاز الكمبيوتر الخاص بنا قادراً على قراءة صفحات الويب في PHP .
  • MySQL : إنه برنامج إدارة قواعد البيانات الذي تحدثت عنه في المقدمة. يسمح لك بحفظ البيانات بطريقة منظمة (مثل قائمة أعضاء موقعك). لن نحتاجها على الفور ، ولكن بمجرد تثبيتها.
    web dynamique php
كل هذه العناصر التي ستساعدنا في إنشاء موقعنا الديناميكي مجانيا. بينما هناك آخرون (يدفعون في بعض الأحيان) ، إلا أن مجموعة Apache + PHP + MySQL هي الأكثر شيوعًا على خوادم الويب ، لدرجة أننا أنشأنا حزم جاهزة تحتوي على كل هذه العناصر. من الممكن تثبيتها واحدًا تلو الآخر ، لكن الأمر سيستغرق مزيدًا من الوقت ولن تكسب أي شيء (إلا إذا كنت مسؤول خادم ، وهو ما لا ينبغي أن تكون حالتك ) .
في بقية هذا الفصل ، سنرى كيفية تثبيت "الحزمة" المناسبة وفقًا لنظام التشغيل الخاص بك.

في WINDOWS : WAMP


هناك عدة حزم جاهزة لنظام التشغيل Windows . أقترح عليك استخدام خادم WAMP الذي يتمتع بميزة التحديث والتحديث بشكل منتظم.
ابدأ بتنزيل WAMP هنا
تحقق من أنك تأخذ نسخة من WAMP بحد أدنى PHP 5.4. تتغير ميزات PHP من إصدار إلى آخر وتستند هذه الدورة إلى إصدارات PHP> = 5.4. يفضل أن تعتمد الآن على PHP 7 .
بمجرد التنزيل ، قم بتثبيته مع ترك جميع الخيارات التلقائية. يجب تثبيت في دليل مثل C:\wamp وإنشاء اختصار في قائمة start .
عند بدء تشغيل WAMP ، يجب أن يظهر رمز في أسفل يمين شريط المهام ، بجوار الساعة ، كما هو موضح في الشكل التالي.
web dynamique php
رمز WAMP
إذا ظهرت نافذة للإشارة إلى أن جدار الحماية يحظر Apache ، فانقر فوق السماح بالوصول (انظر الشكل التالي). ليس لديك ما يدعو للقلق ، إنه أمر طبيعي تمامًا.
web dynamique php
إذا لم يبدأ WAMP بشكل صحيح ، فتحقق من عدم فتح Skype في نفس الوقت. لا يمكن تشغيل كلا البرنامجين بشكل متوازٍ (يستخدمان نفس منافذ الاتصال (port)على جهازك). في هذه الحالة ، أغلق Skype أثناء استخدام WAMP .
بشكل افتراضي ، WAMP باللغة الإنجليزية. يمكنك تغيير اللغة بسهولة بالنقر بزر الماوس الأيمن على أيقونة WAMP في شريط المهام ، ثم الانتقال إلى قائمة اللغة (الصورة التالية).
web dynamique php
تغيير اللغة
يمكنك بعد ذلك تشغيل الصفحة الرئيسية لـ WAMP . انقر بزر الفأرة الأيسر على أيقونة WAMP ( كن حذرًا ، قلت بنقرة يسرى هذه المرة) ، ثم انقر فوق localhost ، كما هو موضح في الشكل التالي.
web dynamique php
المضيف المحلي القائمة
يجب أن تفتح صفحة ويب مشابهة لشاشة الصورة التالية في متصفحك المفضل (Firefox ، على سبيل المثال). إذا ظهرت الصفحة home ، فهذا يعني أن Apache يعمل.
web dynamique php
WAMP الصفحة الرئيسية
تم إرسال صفحة الويب التي تراها على الشاشة بواسطة خادم Apache الخاص بك الذي قمت بتثبيته مع WAMP . أنت تحاكي تشغيل خادم الويب على جهازك الخاص. في الوقت الحالي ، أنت مستخدم الإنترنت الوحيد القادر على الوصول إليه. نقول أننا نعمل "محليا ". لاحظ أن عنوان URL المعروض بواسطة المستعرض في شريط العناوين هو http://localhost/، مما يعني أنك تتصفح موقع ويب موجود على جهاز الكمبيوتر الخاص بك.
يجب أن يذكر قسم "مشاريعك" بالصفحة الرئيسية لـ WAMP أنه لا توجد مشاريع في الوقت الحالي. اعتبر أن كل موقع تتعهد القيام به هو مشروع جديد.
سننشئ مشروع اختبار سنسميه tests . للقيام بذلك ، افتح مستكشف Windows وانتقل إلى المجلد حيث تم تثبيت WAMP ثم إلى المجلد الفرعي الذي يحمل العنوان www . على سبيل المثال : C:\wamp\www
بمجرد الدخول إلى هذا المجلد ، قم بإنشاء مجلد فرعي جديد ستقوم بتسميته tests، كما تشير الصورة التالية.
web dynamique php
تم إنشاء المجلد لـ WAMP
ارجع إلى الصفحة الرئيسية لـ WAMP وقم بتحديثها ( يمكنك الضغط على المفتاح F5) . يجب أن يعرض قسم "مشاريعك" الآن "اختبارات" لأن WAMP اكتشف أنك قمت بإنشاء مجلد جديد (الشكل التالي).
web dynamique php
مشاريع في WAMP
ستقوم بإنشاء صفحات الويب الأولى الخاصة بك في PHP .
ومع ذلك ، إذا قمت بالنقر فوق هذا الرابط "الاختبارات" ، فسيتم عرض خطأ ... لن أخوض في تفاصيل كيف (السبب ) ، سأطلب منك بدلاً من ذلك إدخال العنوان التالي في الشريط عنوان متصفحك وكل شيء سيكون على ما يرام:
HTTP: //localhost/tests/
يجب أن تشاهد صفحة فارغة كما في الشكل التالي.
web dynamique php
المحتوى فارغ حاليًا
إذا كان لديك نفس النتيجة ، فهذا يعني أن كل شيء يعمل. تهانينا ، لقد قمت بتثبيت WAMP وهو يعمل بشكل صحيح. أنت مستعد للبرمجة بـ PHP !
يمكنك تخطي الأقسام التالية التي تنطبق فقط على مستخدمي Mac OS X و Linux .

في نظام التشغيل MAC OS X: MAMP


بالنسبة لأولئك الذين لديهم Mac على Mac OS X ، أوصي بالبرنامج MAMP ( Mac Apache MySQL PHP ) . انها حقا بسيطة جدا لتثبيت واستخدام. يمكنك تنزيله من هنا .
تحقق من أنك تأخذ نسخة من MAMP بحد أدنى PHP 5.4. تتغير ميزات PHP من إصدار إلى آخر وتستند هذه الدورة إلى إصدارات PHP> = 5.4. إصدار PHP 7 هو الأحدث: استخدمه قدر الإمكان ، إنه أسرع وسيكون متوافقًا مع الدورة التدريبية.
عادة ، هذا هو الحال إذا اتبعت رابط التنزيل المقترح.
يجب أن تكون قد قمت بتنزيل أرشيف مثبّت .pkg . فقط دع نفسك تسترشد:
web dynamique php
تثبيت MAMP
عليك ببساطة سحب مجلد MAMP في أسفل اليسار إلى مجلد "التطبيقات" أعلاه.
MAMP مثبت الآن. ستجده في مجلد "التطبيقات". تشير نافذة MAMP الرئيسية إلى أن خوادم Apache و MySQL قد بدأت بنجاح. يجب التحقق من مربعات الخوادم في أعلى اليمين كما في الشكل التالي:
web dynamique php
النافذة الرئيسية لـ MAMP
أدعوك لتهيئة الدليل الذي سيبحث فيه Apache عن ملفات PHP على موقع الويب الخاص بك. للقيام بذلك ، انقر على زر "preferences" في النافذة الرئيسية. يفتح مربع حوار التكوين (الشكل التالي). انقر فوق علامة تبويب خادم الويب في الأعلى.
web dynamique php
انقر على أيقونة "..." لتحديد المجلد الذي ستضع فيه ملفات موقع الويب الخاص بك. في نظام Mac OS ، تم إنشاء مجلد بالفعل: هذه "sites" في الدليل الرئيسي (انظر الصفحة التالية).
web dynamique php
مجلد مواقع Mac OS X
حدد هذا الدليل ، الذي يجب أن يكون من النموذج /Users/pseudo/Sites . لاحظ أن هذا ليس التزامًا: يمكنك استخدام أي دليل آخر إذا كنت ترغب في ذلك.
تحقق من صحة التغييرات والعودة إلى النافذة الرئيسية لـ MAMP . هناك ، انقر فوق WebStart يجب أن يفتح متصفحك (Firefox أو Safari ، على سبيل المثال) صفحة ويب وتعرضها.
للتحضير للمستقبل ، أدعوك لإنشاء مجلد "tests" في مجلد " "sitesسنضع اختبارنا الأول داخل ملفات PHP .
إذا تم إنشاء مجلد "tests" بشكل صحيح ، يمكنك عرض محتوياته بالانتقال إلى العنوان http://localhost:8888/tests/.
إذا سارت الأمور على ما يرام ، يجب أن تظهر صفحة فارغة (الشكل التالي).
web dynamique php
يظهر مجلد فارغ في المستعرض باستخدام MAMP
تم تثبيت MAMP وتهيئته بشكل صحيح. أنت الآن جاهز للعمل في PHP للفصل التالي!

على نظام LINUX : XAMPP


على نظام Linux ، من الشائع تثبيت Apache و PHP و MySQL بشكل منفصل. ومع ذلك ، هناك أيضًا حزم جاهزة مثل XAMPP (Apache MySQL Perl PHP X) ، المعروفة سابقًا باسم LAMPP .
هذه الحزمة مكتملة أكثر من WAMP for Windows أو MAMP لنظام التشغيل Mac OS X . ومع ذلك ، فإننا سوف نستخدم فقط بعض العناصر المثبتة.
تحقق من أنك تأخذ نسخة من XAMPP بحد أدنى PHP 5.4. تتغير ميزات PHP من إصدار إلى آخر وتستند هذه الدورة إلى إصدارات PHP> = 5.4.
يجب أن يكون هذا هو الحال إذا كنت تأخذ أحدث إصدار متاح على الموقع.
على موقع XAMPP الرسمي ، ابحث عن رابط XAMPP لنظام Linux .
web dynamique php
تنزيل XAMPP لنظام التشغيل Linux
XAMPP متاح أيضًا لنظامي التشغيل Windows و Mac OS X كما ترون على الموقع. طريقة التثبيت مختلفة بشكل ملحوظ ، ولكن يمكنك تجربتها إذا كنت قد اختبرت بالفعل WAMP (لنظام التشغيل Windows) أو MAMP (لنظام التشغيل Mac OS X) ولا تناسبك.
بمجرد اكتمال التنزيل ، افتح وحدة التحكم. إن تثبيت وإطلاق XAMPP هما وحدة تحكم فقط (دعنا نذهب ، بدون زخرفة ، لن تجعلني ابتلع أن هذه هي المرة الأولى التي تفتح فيها وحدة التحكم!).
انتقل إلى المجلد الذي قمت بتنزيل XAMPP به. على سبيل المثال ، في حالتي ، الملف موجود على سطح المكتب:

    cd  /Desktop
يجب عليك المرور root لتثبيت XAMPP وتشغيله.
root هو حساب المسؤول للجهاز الذي لديه الحق في تثبيت البرامج. عادة ، فقط اكتب su وأدخل كلمة المرور root . تحت Ubuntu ، سيتعين عليك كتابة sudo suكلمة المرور المعتادة وكتابتها.
إذا كنت مثلي تستخدم أوبونتو ، فاكتب:

    sudo su
امنح حقوق التنفيذ للملف الذي قمت بتنزيله للتو:

    chmod 755 xampp-linux - * - install.run
ثم ابدأ برنامج التثبيت:

    ./xampp-linux-*-installer.run
تذكر استبدال النجمة في الأمر برقم إصدار الملف الذي تم تنزيله. وهذا كل شيء! تم تثبيت XAMPP الآن. لبدء XAMPP (وبالتالي Apache و PHP و MySQL) ، اكتب الأمر التالي:

    / opt / lampp / lampp start
إذا أردت لاحقًا إيقاف XAMPP ، فاكتب:

    / opt / lampp / lampp stop
تذكر أنه يجب أن تكون root عند بدء أو إيقاف XAMPP .
هذا ليس معقدًا ، كما ترون!
يمكنك الآن اختبار XAMPP عن طريق فتح متصفح المفضل لديك وكتابة العنوان التالي: http://localhost .
يجب أن تشاهد صفحة اختيار لغة XAMPP . انقر فوق "اللغة التي تريد" ، حيث يطالبك الشكل التالي.
web dynamique php
اختيار اللغة في XAMPP
ثم يتم عرض صفحة تكوين XAMPP الرئيسية. إنه أكثر اكتمالًا من نظرائه WAMP و MAMP ، خاصة وأن XAMPP يحتوي على المزيد من البرامج وبالتالي يوفر المزيد من الميزات (أكثر من ذلك بكثير).
يمكنك التحقق من أن كل شيء يعمل بشكل صحيح من خلال الانتقال إلى القائمة Statut، كما في الشكل التالي.
web dynamique php
حالة مكونات XAMPP
كحد أدنى ، يجب أن تكون وحدات MySQL و PHP باللون الأخضر. أما بالنسبة للآخرين ، فلن نستخدمها ، لذلك لا يهم. ؛-)
يجب وضع ملفات PHP في الدليل /opt/lampp/htdocs . يمكنك إنشاء دليل فرعي tests لاختباراتك الأولى.

    cd / opt / lampp / htdocs
    mkdir tests    
حالما يتم إنشاء مجلد، يمكنك الوصول إليه من المستعرض الخاص بك في العنوان التالي: http://localhost/tests .
يجب أن تشاهد صفحة مشابهة للشكل التالي.
web dynamique php
مجلد الاختبارات فارغ حاليًا في XAMPP
أنت مستعد للعمل في PHP!

استخدام محرر جيد


كما يجب أن تعرف ، لتحرير شفرة صفحة الويب لديك عدة حلول:
  • استخدم محرر نصوص بسيط لديك بالفعل ، مثل bloc notes . لفتحه ، افعل ذلك Démarrer / Programmes / Accessoires / Bloc-notes. عادةً ما يكون هذا البرنامج كافياً لكتابة صفحات الويب بتنسيق HTML وحتى في PHP ، ولكن ...
  • الأفضل هو استخدام البرامج المتخصصة التي تلون الكود الخاص بك (عملي جدًا) وترقم خطوطك (عملي جدًا أيضًا).هناك المئات والمئات من البرامج المجانية المصممة للمطورين مثلك. سأقدم ثلاثة هنا:
    • VS Code (مجاني)
    • sublime text (مجاني )
    • PHPStorm عليك شراءه
  • أقترح عليك تثبيت برنامج يسمح لك بتحرير ملفاتك بفعالية. ربما تكون قد قمت بالفعل بتثبيت واحد إذا كنت قد تعلمت البرمجة في HTML / CSS ، ولكن نظرًا لأنك لم تكن حريصًا أبدًا ، سأقدم بعضًا منها بسرعة وفقًا لنظام التشغيل الخاص بك.
  • إليك كود HTML الذي سنستخدمه للبدء. انسخ هذا الرمز والصقه في محرر النصوص الذي سأقوم بتثبيته:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ceci est une page HTML de test</title>
    </head>
    <body>
        <h2>Page de test</h2>
        
        <p>
            Cette page contient <strong>uniquement</strong> du code HTML.<br />
            Voici quelques petits tests :
        </p>
        
        <ul>
        <li style="color: blue;">Texte en bleu</li>
        <li style="color: red;">Texte en rouge</li>
        <li style="color: green;">Texte en vert</li>
        </ul>
    </body>
</html>
لا يوجد PHP في الوقت الحالي للبدء بسلاسة. سنحاول ببساطة حفظ ملف HTML مع هذا الرمز لتسخيننا.
VS CODE (مجاني)
سواء كنت تعمل على نظام Windows أو Mac أو Linux ، فإنني أوصيك بأن تبدأ باستخدام محرر VS CODE الذي يكون خفيفًا وبسيطًا بدرجة كافية لكي نبدأ:
web dynamique php
لا تنخدع ببساطته الواضحة: VS Code هو في الواقع سريع وبسيط في الأساس ، ولكن من الممكن تمديد ميزاته مع اضافات لا تعد ولا تحصى!
VS Code هو محرر جيد جدًا ، يستخدمه العديد من المطورين (بما في ذلك المحترفين).
PHPSTORM ( يجب شراءه)
PHPStorm يشبه إلى حد بعيد "آلة الحرب". ولسبب وجيه: إنها بيئة تطوير متكاملة ، بيئة عمل للمطورين. يتم استخدامه من قبل العديد من مطوري PHP المهنيين على حد علمي.
web dynamique php
PHPS ، الذي يستخدمه العديد من المهنيين
PHPStorm هو كبير الحجم . يستغرق تحميله وقتًا أطول من VS Code و Sublime Text ، ويمكن أن يحتوي على العديد من الميزات المتقدمة من خلال ملحقاته ... علاوة على ذلك ، فإن PHPStorm ليس مجانيا .
لا يجوز لك البدء فورًا باستخدام PHPStorm ، ولكن احتفظ به على الرادار الخاص بك لأنه أداة مستخدمة للغاية وستجربه بالتأكيد يومًا ما.

في الخلاصة


  • لإنشاء مواقع ويب ديناميكية ، نحتاج إلى تثبيت الأدوات التي ستحول جهاز الكمبيوتر الخاص بنا إلى خادم حتى نتمكن من اختبار موقعنا.
  • الأدوات الرئيسية التي نحتاجها هي:
    • Apache: خادم الويب ؛
    • PHP : البرنامج الذي يسمح لخادم الويب بتشغيل صفحات PHP ؛
    • MySQL : برنامج إدارة قواعد البيانات.
  • على الرغم من أنه من الممكن تثبيت هذه الأدوات بشكل منفصل ، إلا أنه من الأسهل بالنسبة لنا تثبيت حزمة جاهزة: WAMP على Windows ، MAMP على Mac OS X أو XAMPP على Linux.
  • يُنصح باستخدام محرر نصوص يقوم بتلوين الكود مثل VS Code او Sublime Text لبرمجة لغة PHP بشكل صحيح. للأشخاص الأكثر خبرة الذين يعملون في مشاريع كبيرة ، أوصي بـ PHPStorm.