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


الدرس: TP: صفحة محمية بكلمة مرور


الصفحة السابقة
مرحبًا بك في تطبيقك الأول!
ما يلي ليس فصلاً كأي فصل آخر ، فلن تتعلم أي شيء جديد. لكن لأول مرة ، سوف تتدرب بشكل جيد وتصنع أول سيناريو PHP !
الهدف من كل تطبيق هو عرض ما يمكنك التعلم منه. عندما تقرأ فصلاً ، فأنت في الظلام أحيانًا ، فأنت تقول لنفسك: "حسنًا ، فهمت ما تريد أن تقوله لي ، لكنني حقًا لا أرى من أين أتيت: كيف يمكنني إنشاء موقع على شبكة الإنترنت مع كل هذا؟ ". الآن نفسح الطريق للأساس!
و- مفاجأة جيدة - لديك بالفعل مستوى لحماية محتوى الصفحة بكلمة مرور! هذا هو ما سأعلمك فعله في هذا الفصل.
نظرًا لأن هذا هو أول برنامج TP خاص بك ، فمن المحتمل أن تتعطل بشكل تعسفي (كما ترى ، لا أخفي أي شيء منك) سترغب في تعليق نفسك أو رمي نفسك من النافذة ، فهذا أمر طبيعي تمامًا .
أعرف عددًا قليلًا من الأشخاص الذين يمكنهم التباهي بنجاحهم لأول مرة في كتابة نص PHP الخاص بهم. لذلك لا تشعر بالإحباط ، حاول متابعة وفهم كيفية عمل هذا التطبيق ، وسوف يتحسن في المرة القادمة :

تعليمات لعمل التطبيق


الشروط
كقاعدة عامة ، يجب أن تقرأ جميع الفصول السابقة للعمل . إليك قائمة المعرفة التي ستحتاج إليها لإكمال هذا التمرين:
  • عرض النص مع echo  .
  • استخدام المتغيرات (الواجب ، العرض ، إلخ) ؛
  • نقل المتغيرات عبر مساحة نصية من النموذج ؛
  • استخدام شروط بسيطة (  if ، else ).
إذا كانت إحدى هذه النقاط غامضة بعض الشيء بالنسبة لك (ربما تكون قد نسيت) ، فلا تتردد في إعادة قراءة الفصل المقابل ، فستحتاج إليه للتعامل بشكل صحيح مع TP . سترى ، لن يطلب منك القيام بأشياء معقدة. الهدف ببساطة هو جمع كل ما لديك من معلومات للإجابة على مشكلة محددة.
هدفك
فيما يلي السيناريو: تريد وضع صفحة ويب على الإنترنت لإعطاء معلومات سرية لأشخاص معينين. ومع ذلك ، لتقييد الوصول إلى هذه الصفحة ، ستحتاج إلى معرفة كلمة المرور.
في حالتنا ، ستكون البيانات السرية هي رموز الوصول إلى خادم ناسا المركزي (لنكن مجنونين!). ستكون كلمة المرور لعرض رموز الوصول kangourou .
هل ستكون قادرًا على إنشاء صفحة تعرض هذه الرموز السرية فقط إذا قمت بإدخال كلمة المرور الصحيحة؟
كيفية المضي قدما؟
للبرمجة بشكل صحيح ، أوصي دائمًا بالعمل على المسودة أولاً (كما تعلم ، بقلم وورقة!). قد يبدو غالبًا مضيعة للوقت ، لكنه عكس ذلك تمامًا. إذا بدأت في كتابة سطور من التعليمات البرمجية أثناء العمل ، فستكون فوضى. على العكس من ذلك ، إذا كنت تأخذ خمس دقائق للتفكير في الأمر أمام ورقة ، فسوف يتم تنظيم التعليمات البرمجية الخاصة بك بشكل أفضل وستتجنب العديد من الأخطاء (التي تجعلها تضيع الوقت).
ما الذي يجب أن نفكر فيه في مسودتنا؟
  1. 1. المشكلة التي تسأل نفسك (ماذا أريد أن أفعل؟).
  2. 2. في الرسم البياني للكود ، يعني أنك ستبدأ في تقطيعها إلى عدة قطع ، نفسها مقطعة إلى قطع صغيرة (من السهل بلعها).
  3. 3. وظائف ومعرفة PHP ستحتاج (للتأكد من استخدامها بشكل صحيح).
ولإظهار المثال ، سوف نتبع هذه القائمة لمختبرنا.
المشكلة المطروحة
يجب حماية الوصول إلى الصفحة بكلمة مرور. يجب ألا يتم عرض الصفحة إذا لم يكن لديك كلمة المرور.
مخطط الكود
أسهل طريقة للمستخدم لإدخال كلمة المرور هي إنشاء نموذج. سيؤدي هذا إلى استدعاء الصفحة المحمية وإرسالها كلمة المرور. يظهر مثال على هذا النوع من الصفحات في الشكل التالي.
لن يتم السماح بالوصول إلى محتوى الصفحة إلا إذا كانت كلمة المرور التي قدمها المستخدم kangourou .
web dynamique php
كلمة السر المحمية الصفحة
لذلك يجب عليك إنشاء صفحتين على الويب:
  1. form.php   : يحتوي على نموذج بسيط كما تعلم كيفية القيام بذلك ؛
  2. secret.php   : يحتوي على "رموز سرية" ولكن يعرضها فقط إذا أعطيت كلمة المرور.
المعرفة المطلوبة
لقد قمنا بتفصيل المعرفة المطلوبة في بداية هذا الفصل. سترى أن هذا التطبيق هو مجرد تطبيق عملي لما تعرفه بالفعل ، ولكنه سيكون فرصة جيدة للتدرب. 
دوركم الآن !
أعددنا الأرض معًا ؛ الآن أنت تعرف كل ما تحتاجه لإعداد البرنامج النصي!
عادة ما تكون قادرًا على العثور على الأكواد التي تكتبها بنفسك ، وهذا ما أدعوك للقيام به. ربما لن ينجح ذلك في المرة الأولى ، لكن لا تقلق: إنه لن ينجح أبدًا في المرة الأولى!
كود جيد!

تصحيح


الآن دعونا نصلحه!
يجب عليك قراءة هذا القسم فقط إذا كنت قد أنهيت عملك (لمقارنته بعملي) ، أو إذا كنت عالقًا تمامًا. إذا واجهتك مشكلة ، فلا تشاهد الإصلاح بالكامل مرة واحدة. انظر فقط إلى القسم الذي تواجه مشكلة فيه وحاول المتابعة دون تصحيح.
كما تعلمون ، هناك صفحتان للإنشاء. لنبدأ بالأبسط formulaire.php  :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> صفحة محمية بكلمة مرور </title>
    </head>
    <body>
        <p> يرجى إدخال كلمة المرور للحصول على رموز الوصول إلى خادم ناسا المركزي:</p>
        <form action="secret.php" method="post">
            <p>
            <input type="password" name="mot_de_passe" />
            <input type="submit" value="Valider" />
            </p>
        </form>
        <p> هذه الصفحة مخصصة لموظفي ناسا فقط. إذا كنت لا تعمل في ناسا ، فلا داعي للإصرار على أنك لن تجد كلمة المرور أبدًا! ;-)</p>
    </body>
</html>
إذا كنت قد تابعت الفصل في النماذج بشكل صحيح ، يجب ألا تواجه مشكلة في ملء هذا النموذج. اخترت حقل كتابة password لأنه كلمة مرور. بخلاف ذلك ، لا شيء خاص.
الآن دعونا نلقي نظرة على الصفحة secret.php التي يستدعيها النموذج.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>رموز الوصول الي الخادم المركزي لناسا  </title>
    </head>
    <body>
    
        <?php
    if (isset($_POST['mot_de_passe']) AND $_POST['mot_de_passe'] ==  "kangourou") // Si le mot de passe est bon
    {
    // On affiche les codes
    ?>
        <h1>هذه رموز الوصول :</h1>
        <p><strong>CRD5-GTFT-CK65-JOPM-V29N-24G1-HH28-LLFV</strong></p>   
        
        <p>
        هذه الصفحة مخصصة لموظفي ناسا فقط. لا تنسَ زيارته بانتظام لأن رموز الوصول تتغير كل أسبوع.<br />
        ناسا شكرا لزيارتكم.
        </p>
        <?php
    }
    else // خلاف ذلك ، يتم عرض رسالة خطأ
    {
        echo '<p>كلمة المرور خاطئة</p>';
    }
    ?>
    
        
    </body>
</html>
في الصفحة السرية ، نتحقق أولاً مما إذا كنا قد أرسلنا كلمة مرور ( مع isset ) وإذا كانت كلمة المرور هذه مطابقة لتلك التي توقعناها ( kangourou) . في حالة استيفاء هذين الشرطين ، يتم عرض رموز الوصول.
كما ترى ، لم أدرج أيًا  echo لعرض كل هذا النص. عندما يكون هناك الكثير من النص الذي سيتم عرضه ، فمن الأفضل إغلاق علامات PHP بعد if، وهو أسهل وأكثر قابلية للقراءة.
ومع ذلك ، بالنسبة إلى else ، نظرًا لوجود جملة صغيرة واحدة لعرضها ، فقد اخترت عرضها بعلامة  echo .
بغض النظر عن مقدار نظرك ، لا يمكننا عرض الصفحة المخفية حتى يتم إدخال كلمة المرور الصحيحة. عليك فقط تحدي صديق أو أحد أفراد عائلتك ، يمكنه البحث عن ساعات لكنه لن يرى الصفحة المخفية إذا لم يكن لديه كلمة المرور الصحيحة!
هل هذه الحماية فعالة حقًا؟
نعم بصراحة هو كذلك. على الأقل ، تكون فعالة إذا وضعت كلمة مرور معقدة (وليس فقط " kangourou").
بالنسبة لي ، كلمة مرور جيدة طويلة ، مع الكثير من الأحرف الغريبة والأحرف الكبيرة والصغيرة والأرقام وما إلى ذلك. على سبيل المثال ، k7hYTe40Lm8Mfكلمة مرور جيدة من غير المحتمل العثور عليها "بالصدفة".

إذهب أبعد من ذلك


إذا كنت ترغب في ذلك ، فاعلم أنه من الممكن تنفيذ TP في صفحة واحدة بدلاً من صفحتين.
تخيل أن النموذج على الصفحة formulaire.php يدعو نفسه. من الواضح أن سمة  النموذج action ستكون action="formulaire.php" . هذا يعني أنه سيتم إرسال البيانات في نفس الصفحة ، كما في الشكل التالي.
web dynamique php
الصفحة تعيد البيانات
في وضع التشغيل هذا ، formulaire.php ستحتوي الصفحة على كل من النموذج والرسالة السرية.
كيف يمكننا أن نفعل ذلك؟ أليس خطير؟ لن تكون آمنة للغاية ، أليس كذلك؟
يمكننا القيام بذلك بطريقة آمنة تمامًا ، إن الصعوبة فقط في مجرد تخيّلٌها .
يجب عليك إنشاء كود صفحتك formulaire.php في جزأين كبيرين:
  • إذا لم يتم إرسال كلمة مرور (أو إذا كانت خاطئة): قم بعرض النموذج ؛
  • إذا تم إرسال كلمة المرور وكانت صحيحة: قم بعرض الرموز السرية.
وبالتالي سيتم بناء صفحة PHP بأكملها حول صفحة كبيرة if قد تبدو مثل هذا:

<?php
// لم يتم إرسال كلمة المرور أو أنها غير صحيحة
if (!isset($_POST['mot_de_passe']) OR $_POST['mot_de_passe'] != "kangourou")
{
    // عرض نموذج إدخال كلمة المرور
}
// تم إرسال كلمة المرور وهي جيدة
else
{
    // إظهار الرموز السرية
}

?>
هذا في الخطوط العريضة كيف سنفعل. في كل مرة formulaire.php يتم فيها استدعاء الصفحة ، تحدد (بفضل if ) ما إذا كانت تسمى لعرض الجزء السري أو ما إذا كانت تسمى لعرض النموذج لإدخال كلمة المرور.
هنا ما سيحدث:
  1. 1. في المرة الأولى التي يقوم فيها الزائر بتحميل الصفحة formulaire.php، لن يتم إرسال أية بيانات POST  إلى الصفحة. لذلك يتم عرض النموذج.
  2. 2. بمجرد إرسال النموذج ، formulaire.php يتم إعادة تحميل الصفحة وتتلقى هذه المرة البيانات  POST التي أرسلناها للتو. يمكن لذلك تحليلها ، وإذا كانت كلمة المرور صحيحة ، فإنها تعرض الرموز السرية.
هل يمكنك إعادة هذا TP في صفحة واحدة بناءً على ارشاداتي؟ جربه! سيكون تمرين جيد جدا!
وإذا واجهت أي صعوبات ، فلا تتردد في طلب المساعدة.
يمكنك أن تخطو خطوة أبعد من ذلك ، لأنه في مخطط الكود السابق ، لم أتوقع أن تعرض إحدى الحالات "كلمة مرور غير صحيحة". يمكن القيام بذلك بسهولة عن طريق قص صفحتك إلى ثلاثة باستخدام elseif  : نموذج ، كلمة مرور غير صحيحة ، رموز سرية.