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


الدرس: تضمين أجزاء الصفحة


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

المبدا


عادة ما يتم قطع معظم مواقع الويب وفقا للمخطط التالي.
web dynamique php
القطع المعتاد لصفحة الويب
المشكلة
حتى الآن ، تم الحكم عليك بالنسخ على كل صفحة متطابقة:
  • الرأس
  • القائمة ؛
  • تذييل الصفحة.
هذا يعطي كودا ثقيلا و متكررا في كل صفحة!
انظر إلى مثال التعليمة البرمجية أدناه الذي يمثل صفحة ويب ( دعنا نسميها index.php ) مع الرأس والقائمة وتذييل الصفحة:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon super site</title>
    </head>
    <body>
    <!-- L'en-tête -->
    <header>
    </header>
    <!-- Le menu -->
    <nav id="menu">        
        <div class="element_menu">
            <h3>Titre menu</h3>
            <ul>
                <li><a href="page1.html">Lien</a></li>
                <li><a href="page2.html">Lien</a></li>
                <li><a href="page3.html">Lien</a></li>
            </ul>
        </div>    
    </nav>
    <!-- Le corps -->
    <div id="corps">
        <h1>Mon super site</h1>
        <p>
            Bienvenue sur mon super site !<br />
            Vous allez adorer ici, c'est un site génial qui va parler de... euh... Je cherche encore un peu le thème de mon site. :-D
        </p>
    </div>
    <!-- Le pied de page -->
    <footer id="pied_de_page">
        <p>Copyright moi, tous droits réservés</p>
    </footer>
    </body>
</html>
من صفحة إلى أخرى ، سيحتوي هذا الموقع دائمًا على نفس الكود للرأس والقائمة وتذييل الصفحة! في الواقع ، فقط محتوى الجسم يتغير في الوقت الطبيعي.
الحل
في PHP ، يمكننا بسهولة إدراج صفحات أخرى (يمكننا أيضًا إدراج أجزاء فقط من الصفحات) داخل الصفحة.
مبدأ التشغيل من الادراج في PHP هو بسيط الفهم نوعا ما. لديك موقع على شبكة الانترنت يتكون من عشرون صفحة. في كل صفحة ، هناك قائمة ، دائما نفس الشيء. لماذا لا تكتب هذه القائمة (وهي فقط) مرة واحدة فقط في الصفحة menus.php ؟
في PHP ، ستتمكن من تضمين قائمتك في جميع صفحاتك. عندما تريد تعديل القائمة الخاصة بك ، سيكون عليك فقط تعديل menus.php وسيتم تحديث جميع صفحات موقع الويب الخاص بك تلقائيًا!

الممارسة


كما قلت ، أقترح إنشاء ملف PHP جديد وإدراج كود HTML المطابق لقائمتك فقط ، مثل هذا:

<nav id="menu">        
    <div class="element_menu">
        <h3>Titre menu</h3>
        <ul>
            <li><a href="page1.html">Lien</a></li>
            <li><a href="page2.html">Lien</a></li>
            <li><a href="page3.html">Lien</a></li>
        </ul>
    </div>    
</nav>
افعل نفس الشيء مع صفحة entete.php وصفحة  pied_de_page.php وفقًا لاحتياجات موقعك.
لكن ...  menus.php لن تحتوي الصفحة على أي كود PHP ... هل هذا طبيعي؟
صفحة .php قد لا تحتوي على كود   PHP (رغم أنها نادرة إلى حد ما) . في هذه الحالة ، تصبح صفحة HTML كلاسيكية لا يتم تعديلها قبل الإرسال.
من الناحية النظرية، يمكن لك جيدا جدا حفظ الصفحة الخاصة بك مع التمديد .html  : menus.html . ومع ذلك ، من أجل تجنب خلط الصفحات .php و .html على موقعك ، أوصي بأن تعمل فقط مع الامتداد .php من الآن فصاعدًا.
الآن بعد أن أصبحت "أجزاء الصفحات" جاهزة ، خذ مرة أخرى صفحات موقعك ، على سبيل المثال الصفحة الرئيسية المسماة index.php . استبدل القائمة بكود PHP التالي:

<?php
include("menus.php"); 
?>
هذه الإرشادات تأمر الكمبيوتر: "   أدخل محتوى الصفحة menus.php هنا   ".
ستلاحظ ، على عكس echo ، لقد وضعت هنا أقواس حول علامات الاقتباس. يجب أن يقال إن echo كانت استثناءًا قليلاً. من الآن فصاعدا سترى الأقواس في كثير من الأحيان .  include هو في الواقع بنية لغوية معينة ، مثل  echo، وبالتالي يمكن استخدامها مع أو بدون أقواس.
في اللحظة التي نبدأ فيها ، سنكون راضين عن فعل ذلك دون الخوض في الكثير من التفاصيل حتى لا نحرق أجنحتنا. ؛-)
إذا أخذنا الكود الذي رأيناه سابقًا واستبدلنا بكل كود متكرر بكود واحد include (الأسطر 10 و 12 و 27) ، فهذا يعطي الكود المصدري التالي:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon super site</title>
    </head>
 
    <body>
 
    <?php include("entete.php"); ?>
    
    <?php include("menus.php"); ?>
    
    <!-- Le corps -->
    
    <div id="corps">
        <h1>Mon super site</h1>
        
        <p>
            Bienvenue sur mon super site !<br />
            Vous allez adorer ici, c'est un site génial qui va parler de... euh... Je cherche encore un peu le thème de mon site. :-D
        </p>
    </div>
    
    <!-- Le pied de page -->
    
    <?php include("pied_de_page.php"); ?>
    
    </body>
</html>
يفترض هذا الكود أن صفحتك index.php وتلك المدرجة ( مثل menus.php ) موجودة في نفس المجلد. إذا كانت القائمة في مجلد فرعي يسمى includes، فكان من الضروري أن تكتب:

<?php
include("includes/menus.php"); 
?>
هذا هو نفس مبدأ الارتباطات النسبية ، والتي تعرفها بالفعل في HTML .
لقد رأينا أنه تم إنشاء صفحة PHP ، لذا فإن السؤال الذي يجب عليك طرحه هو: ما الذي يحصل عليه الزائر؟ حسنًا ، إنه يحصل على نفس الكود كما كان من قبل!
سيساعدك المخطط التالي في فهم كيفية تضمين الصفحات.
web dynamique php
ويشمل في الممارسة العملية
الصفحة الأخيرة التي يتلقاها الزائر مماثلة للصفحة التي عرضتها عليك في بداية الفصل ... لكنك اكتسبت الكثير من المرونة حيث لم يعد يتم نسخ الكود 150 مرة دون داع.
عدد include الصفحات في كل صفحة غير محدود ، لذلك يمكنك قص الكود في أكبر عدد تريده من الأقسام الفرعية!

في الخلاصة


  • يمكن أن تتضمن صفحة PHP صفحة أخرى (أو جزء من الصفحة) بفضل التعليمات include .
  • سيتم استبدال التعليمات Include بمحتوى الصفحة المطلوبة.
  • هذه التقنية ، سهلة الإعداد للغاية ، تسمح على سبيل المثال بوضع قوائم موقعه في ملف menus.php سيتم تضمينه في جميع الصفحات. هذا يجعل من الممكن مركزية كود القوائم في حين كان واحدًا ملزمًا بنسخه في كل صفحة على مواقعنا الثابتة في HTML و CSS !