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


الدرس: نقل البيانات مع النماذج


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

إنشاء النموذج


في HTML ، لإدراج نموذج ، نستخدم العلامة 
. يتم استخدامه على النحو التالي:

<form method="post" action="cible.php">
 
<p>
    سنقوم هنا بإدراج عناصر نموذجنا.
</p>
 
</form>
سنكتب محتوى نموذجنا بين العلامات  و  . إذا كنت قد قرأت دورة HTML / CSS الخاصة بي ، فسترى أن جزءًا لا بأس به من هذا الفصل سيتألف فقط من رسائل تذكير لأنني سأشرح لك كيف نٌدرج حقول النموذج في الصفحة. ومع ذلك ، وستكون جديدة ، سنكتشف أيضًا كيفية معالجة البيانات التي أرسلها الزائر في PHP .
أريد أن ألفت انتباهكم إلى السطر الأول من هذا الكود. هناك سمتان مهمتان للغاية يجب معرفتهما عن العلامة 
 : الأسلوب (method) والهدف( action)   . من الضروري أن تفهم ما تستخدمه.
الطريقة
تجدر الإشارة إلى أن هناك عدة طرق لإرسال بيانات النموذج (عدة "طرق"). يمكنك استخدام اثنين.
  • get  : سوف تمر البيانات عبر عنوان URL كما تم تعلمه مسبقًا. يمكننا استعادتها بفضل الصفيف $_GET . لا يتم استخدام هذه الطريقة كثيرًا لأنه لا يمكننا إرسال الكثير من المعلومات في عنوان URL (أخبرتك في الفصل السابق أنه من الأفضل ألا تتجاوز 256 حرفًا) .
  • post  : لن تمر البيانات عبر عنوان URL ، فلن يراها المستخدمون تمر في شريط العناوين. تسمح لك هذه الطريقة بإرسال أكبر قدر تريده من البيانات ، بحيث نٌفضلها كثيرًا. ومع ذلك ، فإن البيانات ليست أكثر أمانًا من الطريقة GET، وسيكون من الضروري دائمًا التحقق مما إذا كانت جميع المٌدخلات موجودة وصحيحة ، كما حدث في الفصل السابق. يجب عدم الوثوق في النماذج أكثر من عناوين URL  .
الأمر متروك لك لاختيار الطريقة التي تريد إرسال بيانات النموذج بها. إذا كنت تتردد ، فأعلم أنه في 99٪ من الحالات ، الطريقة التي نستخدمها هي post، لذلك نكتب method="post" كما فعلت.
الهدف
يتم  استخدام السمة action لتعريف الصفحة التي يستدعيها النموذج. ستتلقى هذه الصفحة البيانات من النموذج وستكون مسؤولة عن معالجتها.
تخيل الرسم البياني الشكل التالي.
web dynamique php
استدعاء الصفحة الهدف من خلال النموذج
في هذا المثال ، يكون النموذج في الصفحة formulaire.php . لا تقدم هذه الصفحة أي معاملة خاصة ، ولكن بمجرد إرسال النموذج (عند النقر فوق الزر "التحقق من صحة") ، يتم إعادة توجيه الزائر إلى الصفحة cible.php التي تتلقى البيانات من النموذج ، كما هو موضح في الشكل التالي.
web dynamique php
كيف يعمل النموذج
يتم تعريف اسم الصفحة الهدف بواسطة السمة action .
لا يجب تسمية الصفحة المستهدفة cible.php . أستخدم هذا الاسم في الأمثلة الخاصة بي فقط لكي تفهم أن الصفحة هي التي وقع استدعائها. لاحظ أنه من الناحية النظرية ، لا يوجد ما يمنع النموذج من استدعاء نفسه. سيكون كافيا لكتابة action="formulaire.php" . في هذه الحالة ، يجب أن تكون صفحة النموذج قادرة على عرض النموذج وكذلك معالجة البيانات. من الممكن القيام بذلك ولكن حتى لا نعقد الأمور بسرعة كبيرة ، سنتجنب القيام بذلك هنا. ؛
تذكر أنك تعمل عادة على صفحتين مختلفتين: الصفحة التي تحتوي على النموذج (  formulaire.php في مثالنا) ، والصفحة التي تتلقى البيانات من النموذج إلى العملية ( cible.php) .

عناصر النموذج


في نموذج ، كما تعلمون بالفعل ، يمكننا إدراج العديد من العناصر المختلفة: مربعات النص ، والأزرار ، وخانات الاختيار ، وما إلى ذلك.
سأذكرهم جميعًا هنا وأريكم كيفية استخدام كل منهم في الصفحة cible.php التي ستقوم بالعلاج. سترى ، الأمر بسيط للغاية: فبدلاً من تلقي صفيف $_GET، ستتلقى صفيفًا $_POST يحتوي على بيانات النموذج!
مربعات النص الصغيرة
يشبه مربع النص الشكل التالي.
web dynamique php
مربع النص
في HTML ، يتم إدراجه ببساطة مع العلامة:

<input type="text" />
لكلمات المرور التي يمكنك استخدامها  type="password" ، والتي ستخفي النص الذي أدخله الزائر. بصرف النظر عن هذه التفاصيل ، تبقى العملية كما هي.
هناك صفتان يجب معرفتهما يمكن إضافتهما إلى هذه العلامة.
  • Name (مطلوب): هذا هو اسم مربع النص. اختره جيدًا لأنه هو الذي سينتج متغيرًا. على سبيل المثال:
    
                <input type="text" name="pseudo" />
            
  • Value (اختياري): هذا هو ما يحتوي عليه مربع النص الأولي. بشكل تلقائي ، يكون مربع النص فارغًا ولكن قد يكون مناسبًا لملء الحقل مسبقًا. مثال:
    
                <input type="text" name="pseudo" value="M@teo21" />
            
نعم ، أعلم أنك بدأت تقلق لأنك لم تر PHP بعد ، لكن لا تخف. العملية بسيطة. النص الذي أدخله الزائر سيكون متاحًا في  cible.php شكل متغير يسمى $_POST['pseudo'] .
على سبيل المثال ، أقترح عليك إنشاء نموذج يسأل عن الاسم الأول للزائر ثم يعرضه بفخر على الصفحة cible.php . لذلك ، سنميز بين كودين مصدرين: كود صفحة النموذج وكود الصفحة الهدف.
هنا هو كود الصفحة formulaire.php  :

<p>
    تحتوي هذه الصفحة على HTML فقط.<br />
    الرجاء إدخال اسمك الأول:
</p>

<form action="cible.php" method="post">
<p>
    <input type="text" name="prenom" />
    <input type="submit" value="Valider" />
</p>
</form>
تذكير HTML : يتم  استخدام الحقل لإنشاء زر التحقق من صحة النموذج الذي يقوم بإرسال البيانات ، وبالتالي إعادة توجيه الزائر إلى الصفحة المستهدفة.
الآن ، أقترح عليك إنشاء الصفحة cible.php . ستتلقى هذه الصفحة الاسم الأول في متغير مسمى $_POST['prenom'] .

<p>صباح الخير !</p>

<p> أنا أعرف ما اسمك ، مهلا ، مهلا. أنت تسمى <?php echo $_POST['prenom']; ?> !</p>

<p> إذا كنت تريد تغيير اسمك, <a href="formulaire.php">اضغط هنا</a> للعودة إلى الصفحة formulaire.php.</p>
يفتح كود الويب التالي الصفحة formulaire.php لتختبرها.
في cible.php ذلك تم عرض متغير $_POST['prenom'] يحتوي على ما أدخله المستخدم في النموذج.
مربعات النص الكبيرة
يشبه مربع النص الكبير (يُطلق عليه أيضًا "مربع الإدخال متعدد الأسطر") الشكل التالي.
web dynamique php
مربع نص كبير
يمكنك كتابة العديد من الأسطر كما تريد. إنه أكثر ملاءمة إذا كان على الزائر كتابة رسالة طويلة ، على سبيل المثال.
سنستخدم كود HTML التالي لإدراج مربع النص هذا:

<textarea name="message" rows="8" cols="45">
message ….
</textarea>
مرة أخرى ، لدينا سمة name ستحدد اسم المتغير الذي سيتم إنشاؤه في cible.php . في حالتنا ، سيكون المتغير $_POST['message'] .
ستلاحظ أنه لا يوجد سمة value . في الواقع ، يتم كتابة النص التلقائي هنا بين <textarea>و </textarea>. إذا كنت لا تريد وضع أي شيء تلقائيا ، فلا تكتب أي شيء بين <textarea>و </textarea> .
سمات rows و cols تسمح لك بتحديد حجم ارتفاع مربع النص والعرض على التوالي.
القائمة المنسدلة
الشكل التالي هو قائمة منسدلة.
web dynamique php
قائمة منسدلة
نستخدم شفرة HTML التالية لإنشاء قائمة منسدلة:

<select name="choix">
    <option value="choix1">Choix 1</option>
    <option value="choix2">Choix 2</option>
    <option value="choix3">Choix 3</option>
    <option value="choix4">Choix 4</option>
</select>
بكل بساطة ، نستخدم العلامة <select> التي نطلق عليها اسم (هنا: "choix"). نكتب بعد ذلك الخيارات المختلفة المتاحة ... ثم نغلق العلامة </select> .
هنا ، $_POST['choix'] سيتم إنشاء متغير ، وسوف يحتوي على الاختيار الذي قام به المستخدم. إذا اختارت "Choix 3 " ، $_POST['choix'] فسيكون المتغير مساوياً  للـ value المناسب له ، وهذا يعني choix3 .
يمكنك أيضًا ضبط الاختيار التلقائي للقائمة. عادةً ما تكون هذه هي الأولى ، ولكن إذا أضفت السمة selected="selected" إلى علامة  <option> ، فسيكون هذا هو الخيار التلقائي. على سبيل المثال ، يمكننا أن نكتب:

<option value="choix3" selected="selected">Choix 3</option>
خانات الاختيار CHECKBOX
يوضح الشكل التالي سلسلة من مربعات الاختيار.
web dynamique php
سنستخدم الكود التالي لعرض مربعات الاختيار:

<input type="checkbox" name="case" id="case" /> <label for="case">خانات الاختيار</label>
استخدام العلامة <label> ليس إلزاميًا لكني أوصي به بشدة. يسمح لك بربط التسمية بخانة الاختيار التي لها نفس id السمة الخاصة بها for، والتي تتيح لك النقر فوق التسمية لوضع علامة في المربع.
مرة أخرى ، نعطي اسمًا لمربع الاختيار عبر السمة name ( هنا: "case") . سيقوم هذا الاسم بإنشاء متغير في الصفحة الهدف ، على سبيل المثال $_POST['case'] .
  • إذا تم تحديد المربع ، فستكون قيمة $_POST['case'] هي "on" .
  • إذا لم يتم تحديد المربع فلن يكون موجودًا. $_POST['case'] يمكنك إجراء اختبار isset($_POST['case']) للتحقق مما إذا كان المربع قد تم تحديده أم لا.
إذا كنت تريد تحديد المربع تلقائيا ، فستحتاج إلى إضافة السمة checked="checked" .

<input type="checkbox" name="case" checked="checked" />
أزرار الخيار
تعمل أزرار الاختيار في مجموعات من اثنين أو أكثر. ستجد مثال في الشكل التالي.
web dynamique php
رمز هذا المثال هو:

هل تحب البطاطس المقلية؟
<input type="radio" name="frites" value="oui" id="oui" checked="checked" /> <label for="oui">نعم</label>
<input type="radio" name="frites" value="non" id="non" /> <label for="non">لا</label>
كما ترون ، فإن كلا الخيارين لهما نفس الاسم ("frites"). هذا مهم للغاية لأنهم يعملون في مجموعات: يجب أن يكون لجميع أزرار الخيارات في نفس المجموعة نفس الاسم. يسمح هذا للمتصفح بمعرفة أي منها سيتم تعطيله عند تنشيط زر آخر في المجموعة. سيكون من الغباء حقًا أن تكون قادرًا على تحديد "نعم" و "لا".
للتحقق المسبق من أحد هذه الأزرار ، قم بما يلي بالنسبة لخانات الاختيار: أضف سمة checked="checked" . هنا ، كما ترون ، يتم تحديد "نعم" تلقائيا.
في الصفحة المستهدفة ، $_POST['frites'] سيتم إنشاء متغير . سيكون له قيمة زر الخيار الذي اختاره الزائر ، الناتج عن السمة value . إذا أحببنا البطاطس المقلية ، فسنحصل على $_POST['frites']  مساوية ل'نعم' .
يجب أن نتذكر ملء سمة  value زر الخيار لأنه هو الذي سيحدد قيمة المتغير.
الحقول المخفية
الحقول المخفية هي نوع منفصل من الحقول. فيما نحتاجها؟ هذا كود في النموذج الخاص بك ولن يظهر للزائر ، ولكن سينشئ متغيرًا ذا قيمة. يمكن استخدامه لنقل المعلومات الثابتة.
اسمحوا لي أن أشرح: لنفترض أنك بحاجة إلى "تذكر" أن لقب الزائر هو "Mateo21". سوف تكتب هذا الكود:

<input type="hidden" name="pseudo" value="Mateo21" />
على الشاشة ، على صفحة الويب لن نرى أي شيء. ولكن في الصفحة الهدف ، $_POST['pseudo'] سيتم إنشاء متغير ، وسيكون له القيمة "Mateo21" !
يبدو أنها غير مجدية ، لكنك ستحتاج إليها أحيانًا.
ويعتقد عن طريق الخطأ أنه بسبب إخفاء هذه الحقول ، لا يمكن للزائر رؤيتها. هذا خطأ! في الواقع ، يمكن لأي زائر عرض التعليمات البرمجية المصدر للصفحة ومعرفة أن هناك حقول مخفية من خلال قراءة كود HTML . أفضل من ذلك ، يمكنه حتى تعديل قيمة الحقل المخفي إذا كان لديه الأدوات المناسبة. ما يجب تذكره ليس لأن الحقل مخفي ، فيجب أن تعتبره محمياً. يمكن لأي زائر (ذكي قليلاً) قراءته وتغيير قيمته وحتى حذفه. لا تثق في البيانات المرسلة من قبل الزائر! تذكر هذه القاعدة التي أخبرتك عنها في الفصل السابق؟ هو أكثر أهمية من أي وقت مضى.

لا تثق أبدًا في البيانات المستلمة: ثغرة XSS


هل تتذكر التحذيرات التي وجهتها لك في الفصل السابق؟ هي لا تهم فقط المٌدخلات التي تمر عبر URL : كل هذا ينطبق أيضًا على النماذج!
لكن ... بقدر ما أرى كيف يمكننا تعديل عنوان URL ، فأنا لا أفهم كثيرًا كيف يمكن للزائر تعديل شكل موقعي وتداول البيانات!
نميل إلى الاعتقاد بأن الزائرين لا يستطيعون "اختراق" النموذج ولكنه غير صحيح. سأوضح لك أولاً لماذا النماذج ليست أكثر أمانًا من عناوين URL ، ثم سأخبرك عن خطر مهم آخر: مشكلة عدم حصانة XSS . مع ذلك ، سنكون قد تخطينا حقًا ما تحتاج إلى معرفته لتكون هادئًا بعد ذلك!
لماذا النماذج ليست آمنة
كل ما تعلمناه في الفصل السابق حول عناوين URL يبقى صالحًا هنا. يجب التعامل مع جميع المعلومات التي تأتي من المستخدم ، أي البيانات الواردة من $_GET و $_POST ، بأقصى درجات الشك.
لا يمكنك افتراض أنك ستتلقى ما تتوقعه.
هذه القاعدة بسيطة للغاية ، لكنني أقترح مثالًا ملموسًا لتصور المشكلة. تخيل أن تطلب من زوار موقعك إدخال حقل تاريخ بتنسيق DD / MM / YYYY . هل سيحترم هذا التنسيق؟ هل سيخطئون عن حسن نية؟ أضمن لك أنه من بين جميع زوار موقعك ، بينما تنتظر شيئًا مثل "04/10/1987" ، ستجد شخصًا سيكتب: "لقد ولدت في 4 أكتوبر 1987". هذا مثال متطرف للغاية ولكنه سيحدث لك بالتأكيد. لذلك ، عند القيام بمعالجة التاريخ في PHP ، سيكون من الضروري التحقق من أنه يحترم التنسيق الذي أشرت إليه.
للتحقق مما إذا كانت السلسلة النصية تتطابق مع تنسيق معين ، مثل "DD / MM / YYYY" ، يمكنك استخدام التحقق من التعبير العادي . ستكون التعبيرات المعتادة موضوع فصلين في نهاية هذه الدورة لأنها موضوع معقد إلى حد ما.
بنفس الطريقة ، كما في الفصل السابق ، حتى لو طلبت الرقم بين 1 و 100 ، سيكون هناك شخص سيقوم بكتابة "48451254523". لذا كن حذرًا ولا تثق أبدًا بما يأتي من المستخدم ، أي بيانات المصفوفات $_GET و $_POST .
باستخدام النماذج ، لا يمكنك أيضًا افتراض أننا سنرسل لك جميع الحقول التي تتوقعها. قد يستمتع الزائر بحذف حقل النص ، وفي هذه الحالة cible.php لن تتلقى صفحتك النص الذي كانت تنتظره أبدًا! سيكون من الضروري أن تتحقق من أن جميع البيانات التي كانت تنتظرها موجودة هناك قبل إجراء أي عملية.
نظرًا لأن صفحة النموذج على موقعي ، فكيف يمكن للزائر تعديل صفحة الويب الخاصة بي؟ يمكن أن يرى المصادر لكن لا يعدلها!
في الواقع ، لا يمكن للزائرين تعديل صفحات الويب الخاصة بك على الخادم ... ولكن يمكنهم استعادتها وتعديلها في أي مكان آخر.
تذكر الرسم في الشكل التالي:
web dynamique php
تحتوي الصفحة formulaire.php على النموذج cible.php وتعالج البيانات المرسلة إليه. نظرًا لأن كود PHP لا يمكن رؤيته أبدًا للزائرين ، باعتباره كود HTML الخاص بالنموذج ، يمكن أن يراه الجميع.
من هناك ، ما الذي يمنع أي شخص من إنشاء نسخة معدلة قليلاً من النموذج وتخزينه على خادمه ، مثل الشكل التالي؟
web dynamique php
النموذج المعدل
في الشكل التوضيحي التالي ، قام "الشرير" (سنطلق عليه هذا الاسم ، لأنه يناسبه جيدًا ؛-)) أخذ كود HTML الخاص بنموذجك ، وقام بتعديله وحفظه في خادمه (أو حتى على جهاز الكمبيوتر الخاص به) .  تم تعديل السمة Action للإشارة إلى العنوان المطلق (وبالتالي المكتمل) لصفحتك المستهدفة:

<form method="post" action="http://www.monsite.com/cible.php">
يمكن للشرير الآن تعديل النموذج الخاص بك ، إضافة حقول ، إزالتها ، وباختصار فعل ما يريد في صفحتك   cible.php
هذه التفسيرات هي تقنية تماما. في الواقع ، يتم حجزها عادة للأشخاص ذوي الخبرة أكثر من المبتدئين. ومع ذلك ، أردت أن أبين لك كيف يكون ذلك ممكنًا. حتى لو لم يكن كل شيء واضحًا تمامًا في رأسك ، لديك فكرة وضع التشغيل على الأقل .
إذا كان هناك شيء واحد يجب تذكره هنا ، فهو أن النماذج قابلة للتعديل من قبل جميع الزائرين خلافًا لما قد يفكر فيه المرء. لذلك ، cible.php يجب أن تكون صفحتك متيقظة كما كنا في الفصل السابق وألا تثق في بيانات المستخدم (المبرمجون لديهم الحد الأقصى: "  لا تثق أبدًا في إدخال المستخدم  " ، مما يعني "لا تثق في بيانات المستخدم" ) .
هناك طريقة أسهل لتحرير شكل موقعك دون الوصول إلى الخادم الخاص بك. يتضمن Internet Explorer 8 و Google Chrome "أدوات المطور" التي تتيح لك تعديل كود HTML للصفحة التي تزورها في الوقت الفعلي. يمكن لمتصفح فايرفوكس أن يفعل نفس الشيء من خلال البرنامج المساعد الشهير Firebug .
ثغرة XSS : انتبه إلى كود HTML الذي تتلقاه!
لا يزال لدينا نقطة مهمة أخيرة لنراها سوية وبعد ذلك ، سأتوقف عن إخافتك ، أعدك!
ثغرة XSS (cross-site scripting)   قديم قدم العالم (أه ، مثل الويب) وما زلنا نجده في العديد من المواقع ، حتى تلك المواقع المحترفة! هذه هي التقنية التي تتضمن حقن تعليمات HTML البرمجية التي تحتوي على جافا سكريبت في صفحاتك لجعلها تعمل للزائرين.
دعنا نعود إلى الصفحة التي تعرض الاسم الأول الذي تم إرساله إليه. على وجه الخصوص ، يحتوي على الكود التالي:

<p> أنا أعرف ما اسمك ، يا مهلا. اسمك هو <?php echo $_POST['prenom']; ?> !</p>
إذا قرر الزائر كتابة HTML بدلاً من الاسم الأول ، فسيعمل بشكل جيد جدًا! على سبيل المثال، دعه يكتب في مدونة "اسم" : <strong>Badaboum</strong> . شفرة مصدر HTML التي سيتم إنشاؤها بواسطة PHP ستكون كما يلي:

<p> أنا أعرف ما اسمك ، يا مهلا. اسمك هو <strong>Badaboum</strong> !</p>
ثم؟ إذا كان يريد وضع اسمه بالخط العريض ، فهذه مشكلته ، أليس كذلك؟
إلى جانب حقيقة أنه يمكن إدراج أي كود HTML (وجعل صفحتك غير صالحة) ، وهي ليست الأكثر خطورة ، فإنه يمكن أيضًا فتح علامات الكتابة <script> لتنفيذ شفرة JavaScript للزائر الذي سيقوم بتصور الصفحة !

<p> أنا أعرف ما اسمك ، يا مهلا. اسمك هو <script type="text/javascript">alert('Badaboum')</script> !</p>
سيشاهد جميع الزوار الذين يصلون إلى هذه الصفحة مربع حوار JavaScript . بالأحرى محرجة. انظر الشكل التالي.
web dynamique php
تشغيل JavaScript باستخدام خطأ XSS
تصبح الأمور بالغة الأهمية إذا كان الزائر ذكيًا بما يكفي لاستعادة ملفات تعريف الارتباط الخاصة بك بهذه الطريقة. تقوم ملفات تعريف الارتباط بتخزين معلومات حول جلستك وفي بعض الأحيان معلومات أكثر سرية ، مثل اسم المستخدم وكلمة المرور الخاصة بك على الموقع! من الممكن إجبار الزائر الذي سيقرأ كود JavaScript على إرسال جميع ملفات تعريف الارتباط التي سجلها لموقع الويب الخاص بك ، مما قد يؤدي إلى سرقة حسابه على هذا الموقع. لن أخوض في تفاصيل هذه الطريقة لأننا سنبتعد كثيرا عن الموضوع ، لكننا نعلم أنه من الممكن وبالتالي يجبان لا يستطيع الزائر من ضخ أي كود JavaScript في صفحاتك بأي ثمن .
إصلاح المشكلة سهل: قم بحماية كود HTML عن طريق الهروب منه ، أي عن طريق عرض العلامات (أو إزالتها) بدلاً من تشغيلها بواسطة المتصفح ، كما في الشكل التالي.
web dynamique php
تجنب ثغرة XSS من خلال الهروب من HTML
للهروب من كود HTML ، فقط استخدم الوظيفة htmlspecialchars التي ستحول علامات HTML متعرجة <>إلى &lt;و &gt;على التوالي. سيؤدي ذلك إلى عرض العلامة بدلاً من تنفيذها.

<p> أنا أعرف ما اسمك ، يا مهلا. اسمك هو <?php echo htmlspecialchars($_POST['prenom']); ?> !</p>
ستكون HTML الناتجة نظيفة ومحمية لأن علامات HTML التي أدخلها الزائر ستكون قد نجت:

<p> أنا أعرف ما اسمك ، يا مهلا. اسمك هو 
<strong>Badaboum</strong> !</p>
يجب تذكر استخدام هذه الوظيفة في جميع النصوص المرسلة من قبل المستخدم والتي من المحتمل أن يتم عرضها على صفحة ويب. في أحد المنتديات ، على سبيل المثال ، يجب عليك التفكير في الهروب من الرسائل التي ينشرها أعضاؤك ، وأيضًا في نكاتهم (يمكنهم الاستمتاع بوضع HTML ! ) وتوقيعاتهم. باختصار ، كل ما يتم عرضه والذي يأتي من طرف الزائر ، يجب أن تفكر في حمايته htmlspecialchars .
إذا كنت تفضل إزالة علامات HTML التي حاول الزائر إرسالها بدلاً من عرضها ، فاستخدم الوظيفة strip_tags .

إرسال الملفات


هل تعلم أنه يمكننا أيضًا إرسال الملفات من خلال النماذج؟ ستحتاج إلى قراءة هذا القسم إذا كنت تريد أن يقوم زوارك بتحميل (upload) صور أو برامج أو أي نوع آخر من الملفات إلى موقعك.
هذا القسم أكثر تعقيدًا قليلاً من بقية الفصل. إن قراءتها ليست إلزامية لفهم استمرار الدورة.
لذلك ، لا تتردد في العودة لقراءتها لاحقًا ، متى ستحتاج إليها ، إذا كنت لا ترغب في دراسة جزء "صعب" مرة واحدة.
مرة أخرى ، يحدث ذلك على مرحلتين.
  1. يصل الزائر في النموذج ويملأه (يشير إلى الملف المراد إرساله) . صفحة HTML بسيطة تكفي لإنشاء النموذج.
  2. يتلقى PHP البيانات من النموذج ، وإذا كان هناك ملفات فيه ، فإنه "يحفظها" في أحد مجلدات الخادم.
تحذير: قد يكون إرسال الملف طويلًا إذا كان كبيرًا. سيكون من الضروري أن نقول للزائر عليك الانتظار أثناء الإرسال.
سنبدأ بإنشاء النموذج لإرسال ملف (صفحة HTML بسيطة) .
سنرى بعد ذلك كيفية التعامل مع إرسال الملف من جانب الخادم باستخدام PHP .
نموذج إرسال ملف
في اللحظة التي يقدم فيها النموذج للزائرين إرسال ملف ، يجب إضافة السمة enctype="multipart/form-data" إلى العلامة  .

<form action="cible_envoi.php" method="post" enctype="multipart/form-data">
    <p> نموذج إرسال ملف</p>
</form>
بفضل enctype يعرف متصفح الزائر أنه على وشك إرسال الملفات.
الآن وقد انتهى الأمر ، يمكننا إضافة علامة داخل النموذج لإرسال ملف. انها علامة نوع بسيط جدا <input type="file" /> . يجب أن نفكر دائمًا في إعطاء اسم لحقل النموذج هذا (بفضل السمة name ) حتى يتمكن PHP من التعرف على الحقل بعد ذلك.

<form action="cible_envoi.php" method="post" enctype="multipart/form-data">
        <p>
                نموذج إرسال ملف:<br />
                <input type="file" name="monfichier" /><br />
                <input type="submit" value="إرسال الملف" />
        </p>
</form>
هذا كافي
يمكنك إضافة المزيد من الحقول الكلاسيكية إلى النموذج (حقل النص ، خانات الاختيار). يمكنك أيضًا اقتراح إرسال عدة ملفات في نفس الوقت.
هنا ، سنكون راضين عن حقل واحد (إرسال ملف) لإبقائه بسيطًا.
معالجة الإرسال في PHP
كما لاحظت ، يشير النموذج إلى صفحة PHP تسمى cible_envoi.php . سيتم إعادة توجيه الزائر إلى هذه الصفحة بعد إرسال النموذج.
الآن أصبح الأمر مهمًا. يجب أن نكتب كود الصفحة cible_envoi.php لمعالجة إرسال الملف.
"عملية إرسال الملف"؟ هذا هو القول؟ إذا تم إرسال الملف إلى الخادم فهذا جيد ، أليس كذلك؟ ما الذي يجب أن يفعله PHP ؟
في الواقع ، في الوقت الذي يتم فيه تشغيل صفحة PHP ، تم إرسال الملف إلى الخادم ولكن يتم تخزينه في مجلد مؤقت .
الأمر متروك لك ما إذا كنت تقبل الملف بالتأكيد أم لا. على سبيل المثال ، يمكنك التحقق مما إذا كان الملف يحتوي على الامتداد الصحيح (إذا طلبت صورة وتم إرسال ".txt" ، فسيتعين عليك رفض الملف) .
إذا كان الملف جيدًا ، فستقبله بفضل الوظيفة move_uploaded_file، وهذا بطريقة نهائية.
ولكن كيف أعرف ما إذا كان "الملف جيدًا"؟
لكل ملف يتم إرساله ، $_FILES['nom_du_champ'] يتم إنشاء متغير . في حالتنا ، سيتم استدعاء المتغير $_FILES['monfichier'] .
هذا المتغير عبارة عن صفيف يحتوي على العديد من المعلومات حول الملف:
متغير معنى
$_FILES['monfichier']['name'] يحتوي على اسم الملف الذي أرسله الزائر.
$_FILES['monfichier']['type'] يشير إلى نوع الملف المرسل. إذا كانت صورة gif على سبيل المثال ، فستكون الكتابة image/gif .
$_FILES['monfichier']['size'] يشير إلى حجم الملف المرسل. تحذير : هذا الحجم بالبايت. يستغرق حوالي 1000 بايت لإنشاء 1 كيلو بايت ، و 1،000،000 بايت لإنشاء 1 ميغابايت. تحذير : حجم البريد محدود بواسطة PHP. بشكل افتراضي ، لا يمكنك تحميل ملفات أكبر من 8 ميغابايت.
$_FILES['monfichier']['tmp_name'] فقط بعد الإرسال ، يتم وضع الملف في دليل مؤقت على الخادم في انتظار البرنامج النصي PHP الخاص بك لتحديد ما إذا كان يوافق على تخزينه للأبد أم لا . يحتوي هذا المتغير على الموقع المؤقت للملف (وهو PHP الذي يدير هذا).
$_FILES['monfichier']['error'] يحتوي على رمز خطأ لمعرفة ما إذا كانت الشحنة ناجحة أو إذا كانت هناك مشكلة وإذا كان الأمر كذلك ، فما هي المشكلة. و المتغير هو 0 إذا كان هناك أي خطأ.
إذا وضعت حقل إرسال ملفًا ثانيًا في النموذج الخاص بك ، فسيتم انشاء متغير آخر $_FILES['nom_de_votre_autre_champ'] كما في الجدول الذي رأيناه للتو هنا. $_FILES['nom_de_votre_autre_champ']['size'] سوف يحتوي على حجم الملف الثاني ، وهلم جرا. أقترح إجراء الفحوصات التالية لتحديد ما إذا كنا نقبل الملف أم لا.
  1. تحقق أولاً مما إذا كان الزائر قد أرسل ملفًا (عن طريق اختبار المتغير $_FILES['monfichier'] مع isset() ) وإذا لم يكن هناك خطأ في الإرسال ( بفضل المتغير $_FILES['monfichier']['error'] ) .
  2. تحقق مما إذا كان حجم الملف لا يتجاوز 1 ميغابايت على سبيل المثال (حوالي 1،000،000 بايت) بفضل $_FILES['monfichier']['size'] .
  3. تحقق مما إذا كان امتداد الملف مسموحًا به (يجب أن نحظر بأي شكل من الأشكال أنه يمكن للأشخاص إرسال ملفات PHP ، وإلا يمكنهم تشغيل البرامج النصية على الخادم الخاص بك) . في حالتنا ، سنسمح فقط بالصور (ملفات .png و jpg و. jpeg و. Gif ) . سوف نحلل لذلك المتغير $_FILES['monfichier']['name'] .
لذلك سوف نقوم بسلسلة من الاختبارات في صفحتنا cible_envoi.php .
1 / اختبار إذا تم إرسال الملف
نبدأ بالتحقق من إرسال الملف. لذلك ، سنختبر إذا كان المتغير $_FILES['monfichier'] موجودًا isset() . في الوقت نفسه ، نتحقق من عدم وجود خطأ في الإرسال.

<?php
// دعنا نختبر إذا تم إرسال الملف وإذا لم يكن هناك خطأ
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
 
}
?>
2 / التحقق من حجم الملف
نريد أن نمنع أن يتجاوز حجم الملف 1 ميغابايت ، أو حوالي 000 1000 بايت. لذلك يجب علينا اختبار $_FILES['monfichier']['size'] :

<?php
// دعنا نختبر إذا تم إرسال الملف وإذا لم يكن هناك خطأ
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
        // دعنا نختبر ما إذا كان الملف ليس كبيرًا جدًا
        if ($_FILES['monfichier']['size'] <= 1000000)
        {
 
        }
}
?>
3 / تحقق من امتداد الملف
يمكننا استرداد امتداد الملف في متغير بفضل هذا الكود:

<?php
$infosfichier = pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
?>
تقوم الدالة pathinfo بإرجاع صفيف يحتوي ، من بين أشياء أخرى ، على امتداد الملف $infosfichier['extension'] . نحن نقوم بتخزين ذلك في متغير $extension_upload .
بمجرد استرداد الامتداد ، يمكن مقارنته بمجموعة من الملحقات المسموح بها (صفيف) ونتحقق مما إذا كان الامتداد المسترجع هو جزء من الامتدادات المسموح بها باستخدام الوظيفة in_array() .
أوووووف ! نحصل على هذا الكود في النهاية:

<?php
// دعنا نختبر إذا تم إرسال الملف وإذا لم يكن هناك خطأ
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
        // دعنا نختبر ما إذا كان الملف ليس كبيرًا جدًا
        if ($_FILES['monfichier']['size'] <= 1000000)
        {
                // دعونا نختبر ما إذا كان الامتداد مسموح به
                $infosfichier = pathinfo($_FILES['monfichier']['name']);
                $extension_upload = $infosfichier['extension'];
                $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
                if (in_array($extension_upload, $extensions_autorisees))
                {
                
                }
        }
}
?>
4 / التحقق من صحة تحميل الملف
إذا كان كل شيء جيدًا ، فنحن نقبل الملف عن طريق الاتصال move_uploaded_file() . هذه الوظيفة تأخذ مٌدخلين:
  • الاسم المؤقت للملف ( لدينا مع $_FILES['monfichier']['tmp_name'] ) ؛
  • المسار الذي هو الاسم الذي سيتم تخزين الملف بموجبه بشكل دائم. يمكنك استخدام الاسم الأصلي للملف  $_FILES['monfichier']['name'] أو إنشاء اسم بشكل عشوائي.
أقترح وضع الملف في مجلد فرعي " " uploads سنحتفظ بنفس اسم الملف مثل الاسم الأصلي. نظرًا لأنه $_FILES['monfichier']['name'] يحتوي على المسار الكامل للملف الأصلي ( C:\dossier\fichier.png على سبيل المثال) ، سنحتاج إلى استخراج اسم الملف. يمكننا استخدام هذه الوظيفة basename التي ستعود فقط "file.png" .

<?php
// دعنا نختبر إذا تم إرسال الملف وإذا لم يكن هناك خطأ
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
        // دعنا نختبر ما إذا كان الملف ليس كبيرًا جدًا
        if ($_FILES['monfichier']['size'] <= 1000000)
        {
                // دعونا اختبار ما إذا كان التمديد مصرح به
                $infosfichier = pathinfo($_FILES['monfichier']['name']);
                $extension_upload = $infosfichier['extension'];
                $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
                if (in_array($extension_upload, $extensions_autorisees))
                {
                        // يمكننا التحقق من صحة الملف وتخزينه بشكل دائم
                        move_uploaded_file($_FILES['monfichier']['tmp_name'], 'uploads/' . basename($_FILES['monfichier']['name']));
                        echo "لقد تم الارسال بشكل جيد !";
                }
        }
}
?>
عند وضع البرنامج النصي على الإنترنت باستخدام برنامج FTP ، تحقق من وجود مجلد " uploads" على الخادم وأنه يحتوي على حقوق الكتابة. للقيام بذلك ، ضمن FileZilla على سبيل المثال ، انقر بزر الماوس الأيمن فوق المجلد واختر Attributs ""
سيسمح لك ذلك بتعديل حقوق الملف (نحن نتحدث عن CHMOD  ) . اضبط الحقوق على 733 ، بحيث يستطيع PHP وضع الملفات التي تم تحميلها في هذا المجلد.
هذا البرنامج النصي هو بداية ، لكن من الناحية العملية ، ربما ستظل بحاجة إلى تحسينه. على سبيل المثال ، إذا كان اسم الملف يحتوي على مسافات أو لهجات ، فستكون مشكلة بمجرد إرساله إلى الويب. من ناحية أخرى ، إذا أرسل شخص ما ملفًا له نفس اسم شخص آخر ، فسيتم الكتابة فوق الملف القديم!
عادة ما يكون الحل هو "اختيار" اسم الملف المخزن على الخادم بأنفسنا بدلاً من استخدام الاسم الأصلي. يمكنك عمل عداد يتزايد: 1.png ، 2.png ، 3.jpg ، إلخ.
كن دائمًا متيقظًا جدًا بشأن الأمان ، يجب أن تتجنب قيام شخص ما بإرسال ملفات PHP إلى الخادم الخاص بك.
قراءة ممتعة

في الخلاصة


  • النماذج هي الطريقة الأكثر ملاءمة للزائر لنقل المعلومات إلى موقعك. PHP قادر على استعادة البيانات التي أدخلها زوار موقعك ومعالجتها.
  • يتم العثور على البيانات المرسلة عبر نموذج في صفيف $_POST .
  • بنفس الطريقة بالنسبة لعناوين URL ، لا تثق في البيانات المرسلة من قبل المستخدم. قد لا يملأ كل الحقول أو يفسد كود HTML للصفحة لحذف الحقول أو إضافتها. تعامل مع البيانات بحذر.
  • سواء بالنسبة لبيانات عنوان URL ( $_GET) أو نموذج ( $_POST) ، يجب علينا التأكد من عدم احتواء أي نص تم إرساله إليك على HTML إذا كان من المفترض أن يتم عرضه على الصفحة . خلاف ذلك ، يمكنك فتح ثغرة أمنية تسمى XSS يمكن أن تكون ضارة بأمن موقعك.
  • لتجنب ثغرة XSS ، قم فقط بتطبيق الوظيفة htmlspecialchars على جميع النصوص التي يرسلها زائروك والتي ستقوم بعرضها.
  • النماذج تسمح لك بإرسال الملفات. نجد المعلومات على الملفات المرسلة في صفيف $_FILES . ومع ذلك ، فإن علاجهم أكثر تعقيدًا.