لوحة المتصدرين

يُبنى أي سكربت PHP من سلسلةٍ من التعليمات البرمجية، التي تكون عمليات إسناد، أو استدعاء لدوال، أو حلقات، أو جملًا شرطية. تنتهي التعلميات عادةً بفاصلة منقوطة، ويمكن تجميع التعليمات ضمن مجموعة عبر وضعها ضمن أقواس معقوفة (أي {}). سنفصِّل في هذا الدرس الجمل الشرطية (التي هي عبارات if-else، وعبارة switch). حيث تُستعمَل هذه العبارات لاتخاذ القرارات وتنفيذ إجراءات اعتمادًا على تحقيق شرطٍ معيّن وهي من أهم التعابير البرمجية التي علينا تعلمها؛ لننظر إلى مثالٍ أولًا. ليكن لدينا متغيرٌ اسمه ‎$a، ونريد أن نُظهِر الكلمة "hsoub" إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub"؛ ستبدو الشيفرة كالآتي: <?php $a = 'hsoub'; //تهيئة المتغير // التحقق من قيمة المتغير if ($a == 'hsoub') { //إذا كانت قيمة المتغير مساويةً للكلمة 'hsoub' فستُطبَع الكلمة hsoub echo 'hsoub'; } ?> يمكنك ملاحظة أننا استعملنا عبارة if للتحقق إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub" أم لا؛ ركِّز على البنية العامة: if( expr ) { statements } ستُنفَّذ العبارات داخل حلقة if إن كانت قيمة الشرط هي true أو قيمة غير صفرية (non-zero) أو قيمة غير فارغة (non-empty)؛ هذا شرحٌ للكلمات الثلاث السابقة: القيمة true: معنى هذا القيمة واضحٌ وجلي؛ ففي المثال السابق استعملنا معامل المقارنة "==" لنتحقق إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub" أم لا. إن كانت مساويةً فسيعيد المعاملُ القيمةَ true وخلا ذلك سيعيد القيمة false. قيمة غير صفرية: يمكننا تجربتها بوضع 0 أو أعداد أخرى ليست مساوية للصفر في مكان الشرط... في الحقيقة، تعتبر الصفر مساويةً للقيمة false ويعتبر أي شيء عداها قيمته true. قيمة غير فارغة: جميع المتغيرات الفارغة أو غير الموجودة (null) تعتبر false، وبقية القيم أو المتغيرات تعتبر true. لاحظ أنَّ القيم الفارغة لا تعني أن تترك مكان الشرطِ فارغًا في عبارة if، وإنما تعني السلاسل النصية أو المتغيرات الفارغة أو غير الموجودة. حاول تجربة الأنواع الثلاثة آنفة الذكر لإيضاح ما سبق تمامًا. عبارة else تستعمل هذه العبارة عندما نحتاج إلى اختيار أحد احتمالين؛ فنريد مثلًا أن نُصنِّف طلاب الصف بناءً على درجاتهم، إذ يعتبر الطلاب الذين يحصلون على درجةٍ أقل من 33 راسبين، وسيعتبرون عدا ذلك ناجحين. سيبدو السكربت كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } else { echo 'you have passed!'; } // الشيفرة السابقة تكافئ الشيفرة الآتية // لاحظ كيف عطلناها بوضعها في تعليق /* if ($marks < 33) { echo 'you have failed'; } if ($marks >= 33) { echo 'you have passed!'; } */ ?> من الواضح أنَّه سينفَّذ إما ما هو موجودٌ داخل عبارة if، أو ما هو موجودٌ داخل عبارة else؛ وذلك بعد التحقق من قيمة المتغير ‎$marks، إذ ينفَّذ ما هو موجودٌ في else إن لم يتحقق شرط if. التشعب في العبارات الشرطية يمكنك إنشاء عبارة شرطية داخل عبارة شرطية أخرى، فمثلًا لو أردنا أن نتحقق إن أخذ الطالب الدرجة ‎A+‎ أم لا، فسنعدِّل السكربت ليبدو كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } else { // نكتب جملة شرطية داخل عبارة else if ($marks > 90) { echo 'you have passed and got A+ grade'; } else{ echo 'you have passed but not got A+ grade'; } } ?> عبارات elseif إن كان لدينا أكثر من خيارين فعلينا وقتها استعمال عبارة elseif، وهي شبيهةٌ بالعبارات المتشعبة؛ فيمكننا مثلًا إعادة كتابة السكربت السابق ليبدو كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } elseif ($marks > 90) { echo 'you have passed and got A+ grade'; } else { echo 'you have passed but not got A+ grade'; } ?> إن لم يتحقق الشرط الأول (الدرجة >= 33)، فستتحقق العبارة elseif من الشرط المتعلق بها (الدرجة > 90) فإن لم يتحقق هذا الشرط أيضًا فستنفَّذ عبارة else. يمكنك كتابة عبارات elseif لأي عدد من المرات، فمثلًا، لو كان لديك أربعة خيارات (بدلًا من ثلاثة) فعليك وقتها استعمال عبارة elseif مرتين. تمرين: حاول أن تُعدِّل السكربت السابق لكي يعطي التقديرات الآتية للطلاب: عبارة switch إن جرَّبت إعادة كتابة المثال السابق لتضمين جميع التقديرات الممكنة للدرجات، فستجد أنَّ عليك كتابة الشروط مرارًا وتكرارًا؛ وما سبق مجرد مثالٍ بسيط، فما بالك بمثالٍ ضخمٍ بلائحةٍ ضخمة؟ لنتحدث الآن عن طريقةٍ جديدةٍ للجمل الشرطية تسمى "عبارة switch"؛ التي هي شبيهةٌ بسلسلةٍ من جمل if الشرطية. لنلقِ نظرةً على هذه الشيفرة أولًا: <?php $name = 'hsoub'; switch($name) { case 'variable': echo "it is a variable"; break; case 'hsoub': echo "best academy ever!"; break; default: echo 'this is necessary default case'; break; // هذه العبارة ليست ضرورية } ?> لنحاول فهم ما جرى في السكربت السابق: نبدأ السكربت بتعريف متغير اسمه "name". ثم نمرِّر ذاك المتغير إلى عبارة switch. ستأخذ العبارة swtich المتغير وتحاول مطابقة قيمته مع الحالات (cases) المُعرَّفة داخلها، فإن طابقت تلك القيمة أيّة حالةٍ فسينفَّذ ما يليها إلى أن نصل إلى عبارة break. سينتهي تنفيذ الحلقة (أي "سنخرج" منها) بعد تنفيذ أوّل عبارة break. يجب أن يكون في كل عبارة switch حالة افتراضية (default case) التي تنفَّذ إن لم تُطابِق المدخلات أيّة حالةٍ من الحالات. ليس من الضروري وجود عبارة break بعد الحالة الافتراضية، يمكنك ألّا تضيفها. أي بكلامٍ آخر، عبارة switch هي مجموعة من عبارات if-else. وتبدأ تنفيذها عند مطابقة حالة من الحالات المُعرَّفة (أو الحالة الافتراضية)، وتنتهي عند عبارة break أو قوس الإغلاق "‎}‎". ميزة استعمال switch هي أنها ستقلل من طول الشيفرة المكتوب. لنعد الآن إلى مثالنا السابق عن تقديرات الطلاب ونحاول حلّ المشكلة عبر عبارة switch: <?php $marks = 0; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة // ندور العلامات إلى عدد بخانة واحدة $m = ($marks - 1)/10; // الدالة intval تعيد الجزء الصحيح من العدد // مثلًا 3.2 تصبح 3 و 3.8 تصبح 3 switch (intval($m)) { case 0: case 1: case 2: echo "F"; break; case 3: echo "D"; break; case 4: echo "C"; break; case 5: echo "C+"; break; case 6: echo "B"; break; case 7: echo "B+"; break; case 8: echo "A"; break; case 9: echo "A+"; break; default: // الحالة الافتراضية إن لم تُطابَق أيّة حالة echo "wrong input for marks"; break; } ?> من الواضح أننا لم نكتب شيفراتٍ كثيرة كما في السابق؛ لنشرح ما حدث في السكربت السابق: بدأنا السكربت بإنقاص الدرجات بمقدار 1 لكي يكون أول رقم (العشرات) من كل تقدير متساويًا (ما عدا التقدير F)، أي مثلًا 50 ستصبح 49 و100 ستصبح 99 ثم قسمنا الدرجات على 10 لجعلها تتراوح بين ‎-0.1 و9.9؛ أي أنَّ 10 ستصبح 0.1 و67 ستصبح 6.7. الدالة intval هي دالة موجودة في لغة PHP مهمتها إعادة الجزء الصحيح من العدد؛ أي أنها -مثلًا- ستعيد الرقم 3 إن كان العدد المُمرَّر إليها هو 3.4 أو 3.5 أو 3.8. باختصار، سنمرِّر الجزء الصحيح من العدد إلى العبارة switch. ثم سنحاول مطابقة ذاك الرقم مع الحالات داخل عبارة switch؛ وكما ذكرنا سابقًا، سيستمر تنفيذ الشيفرات التي تلي سطر مطابقة الحالي إلى أن نصادف عبارة break، فلذا ستُشير الحالات 0 و 1 و 2 إلى نفس الأسطر البرمجية (تلك التي ستطبع F) لعدم وجود عبارة break بينها. المعامل الثلاثي "‎?:‎" يُمثِّل هذا المعامل صيغةً مختصرةً لجملة if-else الشرطية، شكل العام كالآتي: (expr1) ? (expr2) : (expr3) سيتم التحقق أولًا من القيمة المنطقية للتعبير expr1، فإن كانت TRUE فسيُنفَّذ expr2، أما لو كانت FALSE فسينفَّذ expr3. هذا مثالٌ عنه: <?php $marks = 23; echo $marks < 33? 'you have failed' : 'you have passed!'; // السطر السابق يكافئ ما يلي if ($marks < 33) { echo 'you have failed'; } else { echo 'you have passed!'; } ?> تمرين حاول أن تعدِّل الأمثلة السابقة. اكتب برنامجًا فيه متغيرين هما x و y، يمثلان الإحداثيات الديكارتية لنقطة، واستعمل الجمل الشرطية لمعرفة إن كانت تلك النقطة في الربع الأول أو الثاني أو الثالث أو الرابع. [مصدر الصورة: ويكيبيديا] فكِّر بمشاكل أخرى تتطلب "اتخاذًا للقرارات" وجربها باستخدام عبارة if أو switch، واسأل في التعليقات إن واجهتك أيّة صعوبات. المصادر المقال Conditional statements in php لصاحبه Harish Kumar. صفحات if و else و else-if في دليل PHP وغيرها. تعلم لغة PHP

قمنا مؤخرًا بتحديث تصميم صفحة "?Why Should You Attend" التي كانت ماتزال تحتفظ بالتصميم القديم للموقع وقد احتجنا إلى أن نوائمها مع باقي الموقع. وعندما بدأنا العمل عليها قررنا أن نحسّن تصميم هذه الصفحة بأحدث التقنيات المستخدمة في التصميم حاليًا ألا وهي: الأشكال العائمة غير المستطيلة non-rectangular float shapes وميزة الكشف المباشر من قبل المتصفح عن قدرته على تطبيق تعليمات css وهذا مايعرف بـ feature queries. ولكن ليكن واضحًا بأننا لم نقم ببناء هذا المثال المتطور من دون أن يزودنا Mike Pick صاحب Monkey Do بالتصميم حيث أدركنا بأن رؤيته تتوافق بشكل جميل مع ميزات CSS الحديثة وقد كنا سعداء جدًا بالنتائج التي حصلنا عليها من خلال هذه التقنيات الحديثة لذلك أردنا مشاركتها معكم. تصميم الفقاعات styling bubbles هنا يوجد بعض المقتطفات من تصميمنا الأولي (التصميم النهائي لم يتم إنشاؤه كبطاقة صور لذلك لايمكنني عرض الشكل النهائي ولكن هذا الشكل قريب جدًا). مايهمني في هذا المثال هو طريقة استخدام الصور الدائرية، التي كنا نشير إليها باسم "الكُوّة portholes" ولكن بعد التفكير أفضل تسميتها بـ "الفقاعات". عندما بدأت التحضير لتنفيذها من خلال التعليمات البرمجية عدت بالتفكير إلى ما قالته جين سيمون عن الاتجاه الفني الحقيقي في الويب. وبالتحديد كنت أفكر حول الأشكال في CSS وكيف يمكن أن أكون قادرًا على استخدامهم بحيث تكون أسطر الكتابة مرتبة حول محيط الدائرة بشكل انسيابي. تقوم طريقة بناء هذا التنسيق على دمج مجموعة من التقنيات المستخدمة في التعامل مع الأشكال في CSS وهي Ragged Float وفكرتها تقسيم الصورة المنحنية إلى مجموعة من الشرائط مستطيلة الشكل ثم عرضها بالتسلسل لتظهر الشكل النهائي المنحني. و Sliced Sandbags التي تقوم على مبدأ بسيط هو بناء مجموعة من div التي تتوضع فوق الصورة الأساسية وبالتالي هذه الأقسام لاتكون الصورة الحقيقية التي سيتوضع النص حولها وإنما عبارة عن مجموعة من تعليمات php. الآن نمتلك الأشكال العائمة float shapes حيث يمكننا أن نعرّف دائرة أو مضلع ثم نقوم بتوصيف كيفية انسياب النص حول الشكل. أعلم ستقول بأنك لم تسمع أبدًا عن دعم هذه الأشكال في المتصفحات، بالتأكيد هذا صحيح حيث أن المتصفحات التي تدعمها إلى الآن هي WebKit/Blink family—Chrome, Safari, and Opera ولكن ذلك لايشكل عائقًا أمام هذه التقنية لأن المتصفحات التي لاتدعم الأشكال العائمة float shapes ستنفذ الطريقة القديمة boxy float في التعامل مع هذه الأشكال وذلك من خلال عرضها كألبوم صور. من أجل إضافة فقاعة سيكون الشكل الأساسي لتعليمات CSS هو: img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px); } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px); } وبالمناسبة هذه الصور الفقاعة هي عبارة عن صور مربعة أبعادها 260px سوف يتم عرضها على سطح المكتب بهذا الحجم ولكن عند تصغير العرض إلى مساحات أصغر سيتم تحجيمها بنسبة 30% لتتناسب مع العرض الجديد. طريقة توضع الشكل لنفهم طريقة إعداد شكل الفقاعة النهائي سنقوم بحساب عدد بكسلات توضع الصورة، أولًا أبعاد الصورة الفقاعة هو 260×260 بكسل ونقوم بإضافة 40 بكسل عند الهامش الأيمن للصورة وبالتالي يتشكل لدينا مربع يحوي الصورة وأبعاده هي 300 بكسل بالعرض و 260 بكسل بالطول وتشغل الصورة الأساسية القسم اليساري من هذا المربع. إذًا وعند القيام بحساب بسيط نجد مركز الدائرة هو عند النقطة 130px 130px ونصف قطر الصورة الدائرية الفقاعة هو 130 بكسل ونمدد المحيط الخارجي للفقاعة 20 بكسل فيصبح نصف قطر الدائرة النهائي هو 150 بكسل. وبنفس الطريقة نبني الفقاعات الموجودة على الجانب الأيمن، حيث تنزاح نقطة المركز إلى 170px 130px لأننا أضفنا 40 بكسل كهامش أيسر للصورة، وستشرح الصورة كيفية توضع مركز كل دائرة من أجل كل صورة سنلاحظ مايلي: الصندوق الأزرق الفاتح يُظهِر العنصر نفسه المعرف بالصف img. المربع البرتقالي الفاتح هو منطقة الهامش الأساسية وعرضها 40 بكسل. الدائرة البنفسجية والتي تمّ تعريفها في تعليمات css بالمعرف shape-outside. بالإمكان ملاحظة كيفية انسياب النص إلى المنطقة البرتقالية حيث يصل إلى أعلى الدائرة البنفسجية وهذا هو تأثير خاصية shape-outside. المناطق خارج هامش الشكل يكون طريقة عرض النص فيها عادي. نلاحظ أن الدائرة البنفسجية تمتد خارج منطقة الهامش وذلك لأنه باستخدام خاصية shape-outside يتم قص الدائرة بحسب الأبعاد المعطاة بغض النظر عن مربع الهامش، لذلك فإنه إذا قمنا بزيادة نصف قطر الدائرة مثلًا 400 بكسل فهذا يعني أن الصورة ستغطي نصف الصفحة مع أن التصميم الأساسي للنص سيبقى حول حواف هامش الصورة العائمة كما لو أنه لايوجد أي شكل على الإطلاق. استجابة الأشكال Being Responsive حتى الآن طريقة التصميم جيدة فالنص ينساب حول الشكل العائم بطريقة سلسلة في متصفحات chrome /safari / opera ويتعامل مع الأشكال كما لو أنها مربع شكل عادي في Firefox /Edge وستبقى هذه طريقة تعامل المتصفحات مع الأشكال جيدة طالما أنه لم يتم تصغيير نافذة المتصفح وتتسبب في التفاف النص بين الفقاعات ولكن بالطبع يمكن حدوث ذلك في هذه الحالة بالنسبة للصور العائمة على اليمين لن يكون الوضع سيئًا على عكس الصور اليسارية التي لن يكون الأمر جميلًا بالنسبة لها. ففي بعض الحالات سيكون الالتفاف مقبولًا كما شاهدنا في الصورة السابقة وذلك في حالة كون النص عبارة عن عدة أسطر، أما في حالة كان النص فقط كلمة أو كلمتين وعند حدوث الالتفاف لهما سيكون شكلهما غير مقبول قليلًا ولذلك من الأفضل تغيير طريقة إعداد الهوامش في النصوص بحيث لايتم الالتفاف حول الفقاعات المرافقة للنص. على سبيل المثال: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } أي أنه من كل الكتل div الأبناء زوجية الأرقام (وليست الابن الأخير) نضيف 20% كهامش على المحتوى ونقوم بنفس الأمر من أجل الكتل الأبناء أصحاب الأرقام الفردية. بإضافة هذه التعليمات الجديدة سيظهر شكل النصوص عند تصغيير نافذة المتصفح بشكل جيد في Chrome حيث سيتم التفاف النص على طول الفقاعة وسيتم إدخال النصوص إلى داخل هوامش الصورة بقيم معقولة ولكن في متصفح firefox الذي لايزال يمتلك النظام القديم boxy float في التعامل مع الصور لن يكون هناك التفاف في النص ودفع إلى الداخل وإنما سيتم إظهار شريط التمرير على طول الصفحة ومن جهة أخرى فإن زيادة قيمة الهامش من أجل اصطفاف السطور كما في firefox (الهامش كان بنسبة 33%) لامعنى له في الأشكال العائمة float shape في chrome وذلك لأن النص لن يصل أبداً حتى النصف السفلي من الدوائر. دعم ميزة Querying feature تشغيل ميزة feature query يتم من خلال إضافة سطر supports@ إلى التعليمات حيث نستطيع من خلال هذه الطريقة معرفة المتصفحات التي لاتدعم الأشكال العائمة التي أضفناها فتقوم تعليمة support@ بتعديل الهوامش إلى 33% كما أنها تقلل هذه الهوامش في حال كانت المتصفحات تستطيع التعامل مع هذه الأشكال، ويتم هذا من خلال إضافة تعليمات: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 33%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 33%; } @supports (shape-outside: circle()) { .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } } وبهذا سيظهر تصميم العناصر بشكل جيد في جميع المتصفحات، بالرغم من وجود بعض الأشياء الصغيرة جدًا التي يمكن إضافتها. ولكن بشكل عام طريقة العرض في جميع الحالات التي تدعم الأشكال العائمة أو لا تبعث على السرور في الفيديو الأول طريقة العرض في متصفح chrome تحميل الفيديو الأول والفيديو الثاني يظهر طريقة العرض في متصفح firefox الذي لايدعم الأشكال العائمة تحميل الفيديو الثاني بالأخير إنها نعمة وجود ميزة مثل feature queries تسمح للمتصفحات مثل firefox و MS Edge الحصول على دعم لإظهار الأشكال العائمة. ومع أنه لايوجد تحسينات قريبة للمتصفحات ولكن يتم العمل بشكل دائم على إدخال التحسينات على CSS نفسها بحيث سيصبح شعارها قريبًا "صمم وانسى"، كما يمكن القول بأن التعديل الأساسي في CSS هو طريقة التعامل مع الأشكال وتحسين عمليه استجابتها من دول وجود الدعم الكافي في المتصفحات لها. ترجمة –وبتصرّف- للمقال A Redesign with CSS Shapes لصاحبه Eric Meyer