سمير عبود

يُعتبر DevOps بمثابة زواج بين إدارتين متنافستين منذ الأزل: التطوير "Development" وإدارة العمليات/التنفيذ "Operations".
فمنذ عُرفت الإدارة بشكلها الحديث، عانت فرق التطوير وفرق التنفيذ من ضعف التواصل والتعاون، لما؟ لأن لدى كل منها هدف يتعارض مع هدف الأخرى: ففي حين ترغب فرق إدارة العمليات برؤية المنتج مكتملاً بأعلى جودة وبأقل قدر ممكن من الموارد، تُصرّ فرق التطوير على التأكد من إنجاز العمل بالكامل وبجودة عالية، بغض النظر عن الموارد اللازمة لتحقيق النجاح.
تكمن المفارقة في كون هذا التعارض لا يؤدي لتخصيص الموارد بشكل مناسب ولا لإنجاز العمل بالجودة المطلوبة! وهنا يأتي دور DevOps.
تُستخدَم كلمة DevOps (اختصارٌ للكلمتين Development و Operations) لوصف مجموعةٍ من أنشطة التكنولوجيا الحديثة التي تسعى إلى تقريب مطوري البرمجيات وموظفي العمليات من بعضهم بعضًا بشكلٍ أوثق بغية العمل بصورة أكثر تعاونية على نفس المشروع.
تهدف DevOps لخلق بيئة تطوير تدعم التكامل المتواصل والتسليم المستمر. وذلك من خلال أربعة مبادئ رئيسية تقوم عليها DevOps:
التكامل المتواصل (CI: Continuous integration): هو مصطلح خاص بهندسة البرمجيات يصف أسلوبًا في تطوير البرمجيات يتسم بتواصل عملية إعادة بناء تطبيق ما مصحوبة باختباره بصفة متكررة التسليم المتواصل (CD: Continuous delivery): هو منهج يعتمده مهندسو البرمجيات في تطوير البرامج ضمن دورات قصيرة، ويهدف إلى تسريع بناء واختبار وإطلاق البرامج  الاختبار المتواصل (Continuous Testing): هي عملية تنفيذ الاختبارات الآلية كجزء من خط أنابيب تسليم البرامج للحصول على تعليقات فورية حول مخاطر العمل المرتبطة بإصدار البرنامج
المراقبة المتواصلة (Continuous Monitoring): وهي العملية المسؤولة عن مراقبة البرنامج أو الميزة الجديدة بحثًا عن الأخطاء والأمان والتوافق.
بإمكانك الإطلاع على هذه المقالات للتوسع أكثر في مجال ال DevOps و أخذ فكرة شاملة عنه:
ما المقصود بـ DevOps؟ ما هي الغاية من DevOps؟ ثلاث خطوات لتأمين DevOps مفتوح المصدر أفضل 5 لغات برمجة لـ DevOps رحلة المطور عبر DevOps لماذا تعد DevOps الاستراتيجية التقنية الأكثر أهمية و هناك عدة مقالات أخرى في المجال يُمكنك الوصول لها من القائمة العُلوية تحت قسم :
دروس و مقالات > DevOps.

مرحباً محمد،
بإمكانك التواصل مع الدعم الفني من خلال مركز المساعدة للأكاديمية، و سيُرشدونك لطريقة دفع أخرى إن وجدت.

بفرض أن العُنصر الذي سبب إفتعال الحدث و العُنصر الذي تُريد الوصول إليه هما في نفس المُستوى بإمكانك إعطاء ذلك العُنصر الذي تريد الوصول له صنف تنسيقات مثلا code_img ثم تستخدم إما التابع siblings بهذا الشكل:
$(this).siblings(".code_img") أو تجلب الأب المشترك و الذي من خلاله تبحث عن العُنصر المطلوب بإستخدام التابع children او find على حسب هيكلية العناصر لديك.
ملاحظة لا تستخدم التوابع بكثرة إن كان لديك عُنصر تستخدمه أكثر من مرة من الأفضل تخزينه في متغير.

إسم القالب هو soledad و هو قالب متعدد الأغراض يُمكنك التحقق من إسم القالب و معرفة إسم القالب بإستخدام أحد الأدوات المتوفرة على الإنترنت مثلاً: scanwp تضع فقط رابط الموقع الذي تريد فحصه و سيعطيك بعض المعلومات عنه.
أيضاً هناك طريقة بسيطة تُمكنك من معرفة إسم القالب بإستخدام متصفحك الخاص فقط تم شرح الطريقة هنا: 
 

و عليكم السلام ورحمه الله وبركاته، 
بإشتراكك في أحد دورات أكاديمية حسوب سيتم منحك الوصول للمسارات الأولى من بقية الدورات و ليس كل محتوى الدورات الأخرى، لذلك فالأمر طبيعي و ليس خطأ، تأكد من هذا الأمر.
يتم فتح المسارات الأولى بهدف تعريف الطلاب بمحتوى بقية المجالات و لأهداف أخرى مفيدة كمثلا شخص اشترك بدورة تطوير واجهات المستخدم و لا يعرف شيء عن البرمجة و مجال علوم الحاسب ففي هذه الحالة سيكون من الأفضل له متابعة المسار الأول من دورة علوم الحاسب، و هكذا مثلا شخص آخر لا يعلم شيء عن لغات الويب الأساسية و اشترك في دورة php سيكون مفيد له متابعة اول مسار من دورة تطوير واجهات المستخدم.
إن كان هنالك خطأ فعلي اي ان كل مسارات بقية الدورات مفتوحة لك فيُرجى مراسلة الدعم الفني و اطلاعهم على الخطأ.

إذا لم تعد بحاجة إلى استخدام حزمة في التعليمات البرمجية الخاصة بك ، فيُمكنك إلغاء تثبيتها وإزالتها من تبعيات مشروعك عن طريق أحد الطرق التالية:
إلغاء تثبيت الحزم المحلية:
لإزالة حزمة من دليل node_modules الخاص بك ، في سطر الأوامر ، استخدم الأمر uninstall:
npm uninstall <package_name> مثال:
npm uninstall lodash لإزالة حزمة من التبعيات في package.json ، استخدم علامة save-- مع أمر إزالة التثبيت أما إن قمت بتثبيت الحزمة كـ devDependency فاستخدم علامة save-dev--
npm uninstall --save <package_name> npm uninstall --save-dev <package_name> إلغاء تثبيت الحزم العامة:
لإزالة الحزم العامة أي المثبتة بشكل global على الجهاز نُضيف العلامة g-  لأمر إزالة التثبيت:
npm uninstall -g <package_name> مثال:
npm uninstall -g webpack لإزالة تثبيت حزم متعددة يُمكن ذلك من خلال الأمر:
npm uninstall <package_name1> <package_name2> ... هناك إختصارات عديدة للأمر uninstall يُمكن إستخدامها: remove, rm, r, un, unlink.

مفهوم التجريد: تعني Abstraction في اللغة الإنجليزية, و هو أسلوب مهم جداً من أساليب البرمجة الغرضية التوجه OOP و يستخدم لتسهيل كتابة الأوامر على المبرمجين, فهو يجعلك قادراً على تنفيذ ما تريد دون الحاجة إلى معرفة كافة التفاصيل التي تم فيها تنفيذ ذلك. إذاً الـ Abstraction يجعلك تتعامل مع الأشياء بسطحية بدل أن تغوص في معرفة تفاصيل الكودات المعقدة. لتطبيق مفهوم الـ Abstraction نستخدم الكلمة abstract ضمن شروط محددة.
الكلاس المعرف كـ abstract يسمى Abstract Class. الكلاس العادي الغير معرف كـ abstract يسمى Concrete Class. الدالة المعرفة كـ abstract تسمى Abstract Method أو Abstract Function. نقاط مهمة حول الـ Abstract Class:
الكلاس العادي لا يمكنه أن يحتوي على دوال نوعها abstract.
الـ Abstract Class يمكنه أن يحتوي على دوال عادية, و يمكنه أن يحتوي على دوال نوعها abstract.
إذا قمت بتعريف الكلاس كـ abstract, فهذا يعني أن هذا الكلاس لا يمكن إنشاء كائنات منه.
بما أنه لا يمكن إنشاء كائنات من Abstract Class, فهذا يعني أنه للإستفادة من هذا الكلاس, يجب وراثته.
الكلاس الذي يرث من كلاس نوعه abstract, يجب أن يفعل Override لجميع الدوال المعرفة كـ abstract.
مثال لتعريف abstract class:
abstract class Shape { } نقاط مهمة حول الـ Abstract Method:
إذا وضعت الكلمة abstract قبل إسم الدالة, فهذا يعني أنها دالة من النوع abstract. الدالة التي نوعها abstract هي دالة لها إسم و نوع محدد, لكنها لا تحتوي على body (جسم), أي لا تملك أقواس بداية و نهاية { }. الدالة العادية تحتوي على أقواس البداية و النهاية { }. الـ Abstract Method يجب وضع فاصلة منقوطة ; في آخرها بدل أقواس البداية و النهاية. الكلاس الذي يرث من كلاس نوعه abstract, يجب أن يقوم بإعادة تعريف (Override) لجميع الدوال التي نوعها abstract, أي يجب أن يكتب الـ body لهذه الدوال. مثال عن abstract method:
public abstract void calculateArea(); يُمكنك الإطلاع على هذا المقال للإطلاع على المزيد:
مفهوم الواجهات (interfaces) في جافا:
في جافا لا يُمكن لكلاس ما أن يرث من أكثر من كلاس أي أن الوراثة المتعددة غير متاحة بعكس اللغات مثل ++c لذلك قام مطورو اللغة بإنشاء مفهوم الinterface و يُستخدم المفهوم كوسيط لتطوير البرامج و يُساعد كثيرا في عملية توسيع البرنامج و جعله قابلاً للتطوير بكل سهولة و لتجهيز أسلوب يُمكن السير عليه و إتباعه في ربط الكلاسات. و تساعد الواجهات كثيراً و تخدم أسلوب التعددية الشكلية polymorphism.
طريقة التعامل مع الواجهات تُشبه كثيراً طريقة التعامل مع الكلاسات المجردة
مثال لتعريف واجهة:
interface MyInterface { } و لتوسعة كلاس من خلال واجهة نستخدم الكلمة المحجوزة implements:
class A implements MyInterface { } شروط أساسية لإنشاء و التعامل مع الواجهات:
لا نستخدم أي Access Modifer عند تعريف الواجهة. لا نستخدم أي Access Modifer عند تعريف دالة بداخل الواجهة. بداخل الواجهة جميع الدوال يجب أن لا تملك body, و يمكن جعل الدالة ترمي إستثناء. لا يمكن للواجهة أن تملك دالة بانية لا يمكن إنشاء كائن من واجهة. لا يستطيع الكلاس أن يرث (extends) من واجهة بل يُمكنه تنفيذ (implements) واجهة أو أكثر الكلاس الذي يُنفذ واجهة ما عليه إعادة تعريف جميع دوال تلك الواجهة. يُمكن لواجهة أن ترث (extends) من واجهة أو أكثر. للحصول على معلومات أكثر يُمكنك الإطلاع على المقال التالي:
 

غالباً إن كان الموقع مبني على نظام ووردبريس و تم إستخدام قالب مشهور و لم يتم التعديل على إسمه يُمكنك إستخدام المتصفح الخاص بك فقط لمعرفة إسم القالب و هذا مثال بإستخدام متصفح كروم و أدوات المطورين:

يُمكنك إستخدام 
np.set_printoptions(suppress=True) لكنها تعمل على الأعداد التي تتكون من 8 خانات على الأكثر مثلاً:
import numpy as np np.set_printoptions(suppress=True) lst = [ [2.74, 462, 2366.64, 887558.86, 0.81], [8.55, 17, 1422.3, 3212.0, 0.97], [1.02, 768, 6004865.3, 1960.98, 1.21], [2.4, 2406, 3263822.3, 1087.9, 1.93], [0.5, 454, 44555062, 155062.72, 0.41], [4.5, 106, 168918, 741272.74, 3.25], [5.7, 787, 3011595.6, 219894.31, 2.18], [6.3, 117, 12511.4, 1291.0, 1.56], [5.51, 117, 47674230.76, 7181.0, 1.43], [0.85, 771, 1631.96, 2184.08, 0.64] ] lnp = np.array(lst) print(lnp) و سيكون الخرج بهذا الشكل:
[[ 2.74 462. 2366.64 887558.86 0.81] [ 8.55 17. 1422.3 3212. 0.97] [ 1.02 768. 6004865.3 1960.98 1.21] [ 2.4 2406. 3263822.3 1087.9 1.93] [ 0.5 454. 44555062. 155062.72 0.41] [ 4.5 106. 168918. 741272.74 3.25] [ 5.7 787. 3011595.6 219894.31 2.18] [ 6.3 117. 12511.4 1291. 1.56] [ 5.51 117. 47674230.76 7181. 1.43] [ 0.85 771. 1631.96 2184.08 0.64]] ومع ذلك ، إذا قمت بتمرير رقم أكبر من 8 خانات، فسيتم فرض الترميز الأسي مرة أخرى في هذه الحالة يُمكنك تمرير معامل ثاني formatter للدالة set_printoptions بهذا الشكل:
np.set_printoptions(suppress=True, formatter={'float_kind':'{:0.2f}'.format}) و بهذا الشكل حددنا أنه عند الطباعة الأرقام ستكون عشرية و حددنا عدد الأرقام بعد الفاصلة ب 2 مثال:
import numpy as np np.set_printoptions(suppress=True, formatter={'float_kind':'{:0.2f}'.format}) lst = [ [2.74, 462, 2366.64, 887558.86, 0.81], [8.55, 17, 1422.3, 3212.0, 0.97], [1.02, 768, 6004865.3, 1960.98, 1.21], [2.4, 2406, 3263822121.3, 1087.9, 1.93], [0.5, 454, 44555062, 155062.72, 0.41], [4.5, 106, 168918, 741272.74, 3.25], [5.7, 787, 3011595.6, 21989471.31, 2.18], [6.3, 117, 12511.4, 1291.0, 1.56], [5.51, 117, 47674230.76, 7181.0, 1.43], [0.85, 771, 1631.96, 2184.08, 0.64] ] lnp = np.array(lst) print(lnp) و سيكون الخرج:
[[2.74 462.00 2366.64 887558.86 0.81] [8.55 17.00 1422.30 3212.00 0.97] [1.02 768.00 6004865.30 1960.98 1.21] [2.40 2406.00 3263822121.30 1087.90 1.93] [0.50 454.00 44555062.00 155062.72 0.41] [4.50 106.00 168918.00 741272.74 3.25] [5.70 787.00 3011595.60 21989471.31 2.18] [6.30 117.00 12511.40 1291.00 1.56] [5.51 117.00 47674230.76 7181.00 1.43] [0.85 771.00 1631.96 2184.08 0.64]]

بإمكانك إستخدام التابع whereHas لتحقيق ما تريد. سأعطيك مثالاً لتقريب الفهم لنفترض أنه لدي نموذج Module و نموذج Permission حيث أن كل Permission ينتمي إلى Module و العلاقة في النموذج Permission بالشكل التالي:
public function module() { return $this->belongsTo(Module::class); } نريد جلب كافة الpermissions التي يكون الmodule الخاص بها مُفعل حيث يوجد حقل في جدول modules إسمه active يأخذ القيمة 0 أو 1 لذلك بالإمكان إستخدام whereHas بالشكل التالي:
<?php $permissions = Permission::whereHas('module', function($q) { $q->where('active', 1); })->get(); بمعنى إجلب كل الصلاحيات التي لها موديل و في نفس الوقت يكون هذا الموديل مفعل.
المثال الذي طرحته يُشبه تماماً ما تريد فقط تأكد من إنشائك للعلاقة student بشكل سليم .

يُمكنك إستخدام هذه الطريقة لتحويل عدد إلى محرف:
public class Main { public static void main(String []args){ System.out.println(String.valueOf((char)(1 + 'A' - 1))); // A System.out.println(String.valueOf((char)(2 + 'A' - 1))); // B System.out.println(String.valueOf((char)(3 + 'A' - 1))); // C System.out.println(String.valueOf((char)(26 + 'A' - 1))); // Z } } حيث نستخدم ترميز ASCII ف:
1 + 'A' - 1 = 65 لأن الرمز الموافق للمحرف A هو 65 و المحرف B هو 66 و هكذا. و لتحويل العدد من رمز ASCI إلى محرف نستخدم cast إلى char:
(char)65 = 'A' (char)66 = 'B' (char)67 = 'C' يُمكننا إنطلاقاً من هذه الطريقة إنشاء دالة تستقبل عدد و تقوم بالتحقق من أن العدد محصور بين 1 و 26 و عليه تُعيد المحرف الموافق له:
public class Main { public static void main(String []args){ System.out.println(getCharForNumber(1)); // A System.out.println(getCharForNumber(2)); // B System.out.println(getCharForNumber(26)); // Z System.out.println(getCharForNumber(27)); // null } public static String getCharForNumber(int i) { return i > 0 && i < 27 ? String.valueOf((char)(i + 'A' - 1)) : null; } } يُمكنك إضافة الدالة إلى البرنامج الخاص بك و إستعمالها في التحويل.

المشكلة أن السطر:
var colorSelect = $(".color_select option:selected").text(); يجلب كل الخيارات المحددة و يقوم بدمج النص الخاص بها في سلسلة نصية. لديك الآن قائمتين و تم تحديد أحمر و أزرق لذلك ناتج السطر أعلاه كان "أحمر أزرق" و هكذا حسب عدد القوائم فلو كانت ثلاثة و قمت بتحديد أحمر و أزرق و أصفر سيكون الناتج "أحمر أزرق أصفر" و هكذا أما حقول الإدخال من النوع number فالسطر:
var colorNumber = $(".colorNumber_input").val(); سيتم تخزين قيمة أول حقل يوافق التحديد و هذا ما يتبين من خلال حقول الإدخال تم تخزين القيم الأولى للزر الأول فقط لكل الأزرار.
يتوجب عليك تغيير المنطق الذي تعمل به فيجب عليك تخزين كل القيم في مصفوفات و إرسالها عبر طلب ajax مثلما تفعل مع الخاصية buttons بعد تخزين القيم في مصفوفات تقوم بإرسالها لصفحة php و على أساس هذه المصفوفات تقوم بإنشاء السجلات.

سأفترض أن الهيكلية الخاصة بالعناصر كالتالي:
<!-- Main Container --> <div class="main-container"> <!-- Select Box Container --> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <!-- Select Box Container Close --> </div> <!-- text Input Container --> <div> <input type="number" name="number-input1" class="number-input1" readonly> <!-- Close text Input Container --> </div> <!-- text Input Container --> <div> <input type="number" name="number-input2" class="number-input2" value="1"> <!-- Close text Input Container --> </div> <div> <input type="number" name="total" class="total-number" readonly> </div> </div> <!-- end main container --> <!-- Main Container --> <div class="main-container"> <!-- Select Box Container --> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <!-- Select Box Container Close --> </div> <!-- text Input Container --> <div> <input type="number" name="number-input1" class="number-input1" readonly> <!-- Close text Input Container --> </div> <div> <input type="number" name="number-input2" class="number-input2" value="1"> <!-- Close text Input Container --> </div> <div> <input type="number" name="total" class="total-number" readonly> </div> </div> <!-- end main container --> <!-- Main Container --> <div class="main-container"> <!-- Select Box Container --> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <!-- Select Box Container Close --> </div> <!-- text Input Container --> <div> <input type="number" name="number-input1" class="number-input" readonly> <!-- Close text Input Container --> </div> <div> <input type="number" name="number-input2" class="number-input2" value="1"> <!-- Close text Input Container --> </div> <div> <input type="number" name="total" class="total-number" readonly> </div> </div> <!-- end main container --> عليه يُمكنك حساب حاصل الضرب بالشكل التالي:
$(document).ready(function() { $(document).on('change', '.color-select', function() { var selectedVal = $(this).val(), $mainContEl = $(this).parents('div.main-container'), $numberInputEl1 = $mainContEl.children().find("input.number-input1"), $numberInputEl2 = $mainContEl.children().find("input.number-input2"), $totalInputEl = $mainContEl.children().find("input.total-number"); $numberInputEl1.val(selectedVal); $totalInputEl.val(selectedVal * $numberInputEl2.val()) }); $(document).on('change keyup', '.number-input2', function() { var currentVal = $(this).val(), $mainContEl = $(this).parents('div.main-container'), $numberInputEl1 = $mainContEl.children().find("input.number-input1"), $totalInputEl = $mainContEl.children().find("input.total-number"); $totalInputEl.val(currentVal * $numberInputEl1.val()) }); }); إستخدمت فقط دوال الإنتقال لتحديد العناصر المطلوبة ثم قمت بضرب القيم و تغيير قيمة حقل المجموع الموافقة. و استخدمت حدثي change و keyup 
يُمكنك تجربة المثال من هنا:
 

سبب المشكلة أنك تستخدم الخاصية id و هذه الخاصية يجب أن تكون فريدة أي لا يُمكن إعطاء نفس القيمة لعناصر مختلفة.
في مثل هذه الحالات يُمكنك عمل traversing إنطلاقاً من عنصر ما لتحديد عُنصر بجوار أو أب للعنصر الذي أطلق الحدث و بعد تحديد العُنصر المطلوب يُمكنك تغيير قيمته و تتم عملية الإنتقال لتحديد العُنصر حسب هيكلية العناصر لديك فالأمر نسبي سأعطيك مثال و في البداية سأعطي قائمة الألوان صنف التنسيقات color-select و سأعطي حقل العدد صنف التنسيقات number-input و سأفترض أن كل من القائمة و حقل العدد موجودان في نفس الأب و هذا مثال بسيط يُوضح العملية:
نفترض لدينا الهيكلية التالية:
<div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <input type="text" name="firstname" class="number-input"> </div> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <input type="text" name="firstname" class="number-input"> </div> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <input type="text" name="firstname" class="number-input"> </div> حيث حقل الإدخال يأتي مباشرة بعد القائمة لذلك يُمكن الإنتقال من القائمة إليه بإستخدام الدالة next كما هو موضح:
$(document).ready(function() { $(document).on('change', '.color-select', function() { $(this).next().val($(this).val()); }); }); حيث عند إختيار عنصر من أي قائمة سيتم الإنتقال للعنصر الذي يأتي بعد القائمة و تغيير قيمته إلى القيمة المختارة و هكذا أي تغير في قائمة لن يؤثر على بقية القوائم.
يُمكنك تجربة المثال من هنا:
لنفترض الآن أن القائمة و حقل الإدخال ليس لديهما نفس الأب المباشر مثلاً بهذا الشكل:
<div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <div> <input type="text" name="firstname" class="number-input"> </div> </div> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <div> <input type="text" name="firstname" class="number-input"> </div> </div> <div> <select name="name" class="color-select"> <option value="" disabled>Select option</option> <option value="1000">option 1</option> <option value="2000">option 2</option> <option value="3000">option 3</option> <option value="4000">option 4</option> </select> <div> <input type="text" name="firstname" class="number-input"> </div> </div> في هذه الحالة يُمكنك على سبيل المثال تحديد حقل العدد الموافق بهذه الطريقة:
$(document).ready(function() { $(document).on('change', '.color-select', function() { $(this).parent().children().find('input.number-input').val($(this).val()); }); }); تستطيع تجربة المثال من هنا:
و هنالك عدة دوال توفرها مكتبة جيكويري تُساعدك في الإنتقال يُمكنك إستخدامها على حسب هيكلية العناصر لديك: التنقل بين العناصر في jQuery على موسوعة حسوب.

يُمكنك حل المشكلة كالتالي:
.app-sidebar { /* ... */ overflow: auto; /* سيتم عرض شريط تمرير في حالة تجاوز المحتوى الأبعاد الخاصة بالعنصر */ /* ... */ padding-bottom: 60px; /* إضافة حشوة بمقدار 50 بيكسل من الأسفل */ /* ... */ }

يُمكنك كتابة أسطرك البرمجية و فصل الأسطر بإستخدام الأقواس بدون أية مشاكل مثلاً:
x = (1 + 2 + 3 + 4 + 5) print(x) # 15 أو يُمكنك فصل الخط بشكل صريح بإستخدام علامة \ في حالتك:
x = 1 + 2 + 3 + \ 4 + 5 print(x) # 15 إن كنت ستستخدم علامة \ في نهاية السطر يجب أن تكون الأخيرة و ليس بعدها مسافات فارغة او تابات فهذا سيُعطي خطأ:
SyntaxError: unexpected character after line continuation character

يُمكن للدالة range التعامل مع الأعداد الصحيحة فقط أي لا يُمكن تمرير معاملات بقيم بفاصلة عشرية و إنما يُمكن الوصول لما تريد بعدة طرق من بينها:
إستخدام list comprehension: print([x/10 for x in range(0, 10)]) # [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9] إستخدام دالة linspace من مكتبة numpy: import numpy as np print(np.linspace(0,1,10,endpoint=False)) # [0. 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9] إستخدام الدالة arange من مكتبة numpy تتيح لك تحديد الخطوة بالفاصلة العشرية: import numpy as np print(np.arange(0.0, 1.0, 0.1)) # [0. 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9] يُمكن إنطلاقاً من الطريقة الأولى إنشاء دالة لتوليد قائمة مع تمرير المعاملات: def seq(start, stop, step=1): n = int(round((stop - start)/float(step))) if n > 1: return([start + i / pow(step, -1) for i in range(n+1)]) elif n == 1: return([start]) else: return([]) print(seq(1, 2)) # [1] print(seq(10, 0, -2)) # [10, 8, 6, 4, 2, 0] print(seq(0, 5, -1)) # [] print(seq(0, 1, 0.1)) # [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]

ال polymorphism أو تعدد الأشكال هو أحد المبادئ الأربعة للبرمجة كائنية التوجه و هو لا يتعلق بلغة جافا بحد ذاتها و إنما يتعلق بالبرمجة كائنية التوجه كأسلوب، و أي لغة تعتمد هذا الأسلوب يُمكنها إستخدام هذا المبدأ. و ببساطة يعني أنه يُمكننا الوصول لعدة أشكال إنطلاقاً من شيء مُعين. و ينقسم إلى نوعين:
static polymorphism او Compile time Polymorphism يُعرف أيضًا باسم تعدد الأشكال الثابت. يتم تحقيق هذا النوع من تعدد الأشكال عن طريق التحميل الزائد للوظيفة (Method overloading) أو التحميل الزائد للعوامل (operator overloading) . لكن Java لا تدعم التحميل الزائد للعوامل.
Method Overloading: عندما تكون هناك وظائف متعددة بنفس الاسم ولكن مع وسائط مختلفة ، يُقال إن هذه الوظائف محملة بشكل زائد. يمكن زيادة تحميل الوظائف عن طريق التغيير في عدد الوسائط اوالتغيير في نوع الوسائط. مثال: بإستخدام نوع مختلف للوسائط
class MultiplyFun { // Method with 2 parametera type int static int multiply(int a, int b) { return a * b; } // Method with the same name but 2 double parameters static double multiply(double a, double b) { return a * b; } } class Main { public static void main(String[] args) { System.out.println(MultiplyFun.multiply(3, 2)); // 6 System.out.println(MultiplyFun.multiply(5.5, 6.3)); // 34.65 } } مثال بإستخدام عدد مختلف من الوسائط:
class MultiplyFun { // Method with 2 parameter static int multiply(int a, int b) { return a * b; } // Method with the same name but 3 parameter static int multiply(int a, int b, int c) { return a * b * c; } } class Main { public static void main(String[] args) { System.out.println(MultiplyFun.multiply(2, 4)); // 8 System.out.println(MultiplyFun.multiply(2, 3, 4)); // 24 } } لاحظ أنه في كل من المثالين وصلنا إلى أشكال مختلفة لكن من نفس الشيء و هو الوظيفة multiply. يُسمى هذا النوع ب  Compile time Polymorphism لانه في وقت الترجمة المُترجم يكون لديه القدرة على تحديد الوظيفة التي ستتنفذ.
Runtime polymorphism او يُعرف أيضًا باسم إرسال الوظيفة الديناميكية. وهي عملية يتم فيها حل استدعاء الدالة في وقت التشغيل. يتم تحقيق هذا النوع من تعدد الأشكال عن طريق إعادة تعريف الدوال (Method Overriding).
Method Overriding: يحدث عندما يكون للفئة المشتقة (derived class) تعريف لإحدى الوظائف في الفئة الأساسية (base class). يقال إن هذه الوظيفة الأساسية تمت إعادة تعريفها او تم تجاوزها: class Parent { void print() { System.out.println("Parent class"); } } class Child1 extends Parent { void print() { System.out.println("Child 1 class"); } } class Child2 extends Parent { void print() { System.out.println("Child 2 class"); } } class TestPolymorphism { public static void main(String[] args) { Parent a; a = new Child1(); a.print(); // Child 1 class a = new Child2(); a.print(); // Child 2 class } } لاحظ أن الوظيفة print تم إعادة تعريفها في الفئات الأبناء و الكائن a الذي أنشأناه هو كائن من النوع Parent و سيتم تحديد أي وظيفة print سيتم إستدعاؤها وقت التشغيل لذلك يُسمى هذا النوع ب Runtime polymorphism.
يُمكنك الإطلاع على هذا المقال للحصول على معلومات أكثر: الوراثة والتعددية الشكلية (Polymorphism) والأصناف المجردة (Abstract Classes) في جافا

أعتقد أنه لديك مُشكلة في الإستعلام الذي يتم تنفيذه يُمكنك عرض الأخطاء في حالة حدوثها بإستخدام:
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); في ملف الإتصال، حيث إذا أضفته و جربت إرسال البيانات سيعرض لك رسالة تُخبرك بوجود خطأ ما في الإستعلام.
سبب الخطأ هو وجود الكلمة group في الإستعلام حيث أن هذه الكلمة تُعتبر كلمة محجوزة في لغة sql لذلك في هذه الحالة يجب إحاطة الكلمة ب علامتي إقتباس مائلة `group` كما يُمكنك إحاطة كل الحقول بهذه العلامات ليُصبح الإستعلام بهذا الشكل:
$query = "INSERT INTO `messages_groups` (`sender_id`, `sender_name`, `picture`, `group`, `message`) VALUES ('".$sender_id."', '".$sender_name."','".$picture."','".$group."','".$message."')";

يبدو أنك أخطأت في شيء ما عند جلب البيانات من القاعدة سأرفق لك الملفين يعملان بشكل سليم:
index.php
response.php
أضفت جدول في أسفل الإستمارة سيحتوي على كافة البيانات و عند إضافة سجل جديد سيظهر صف آخر في الجدول دون الحاجة لتحديث الصفحة.

يُسمى هذا العامل عامل التفكيك أو عامل الإنتشار ( Spread Operator ) و هذه بعض الأمثلة التي يُستخدم فيها في جافاسكربت و كيف نستخدمه في بايثون:
عوامل دالة: ( Function Arguments )
جافاسكربت:
function multiply(a, b) { return a * b; } const numbers = [2, 5]; console.log(multiply(...numbers)); // 10 بايثون:
def multiply(a, b): return a * b numbers = [2, 5] print(multiply(*numbers)) # 10 تفكيك عناصر مصفوفة في مصفوفة أخرى: ( Array Literals )
جافاسكربت:
const numbers = [1, 2, 3]; const newNumbers = [0, ...numbers, 4] console.log(newNumbers); // [ 0, 1, 2, 3, 4 ] بايثون:
numbers = [1, 2, 3] new_numbers = [0, *numbers, 4] print(new_numbers) # [0, 1, 2, 3, 4] تفكيك كائن في كائن آخر: ( Object Literals )
جافاسكربت:
const testObj = { foo: 'bar' }; console.log({ ...testObj, foo2: 'bar2' }); // { foo: 'bar', foo2: 'bar2' } بايثون:
test_obj = { 'foo': 'bar' } print({ **test_obj, 'foo2': 'bar2' }) # {'foo': 'bar', 'foo2': 'bar2'} أسلوب rest parameters الذي يسمح بتمرير عدد غير محدد من العوامل لدالة ما:
جافاسكربت:
function sum(...numbers) { let t = 0; for(num of numbers) t += num; return t; } console.log(sum(1, 2, 3, 4, 5)) // 15 بايثون:
def sum(*numbers): t = 0; for num in numbers: t += num; return t; print(sum(1, 2, 3, 4, 5, 6)) # 21

هناك عدة طرق للقيام بالأمر:
إستخدام التعابير النمطية:
import re x = "hello, world! Hi! hello!" count = len(re.findall("hello", x)) print(count) # 2 طريقة أخرى بإستخدام التعابير النمطية:
import re x = "hello, world! Hi! hello!" word = "hello" count = sum(1 for _ in re.finditer(r'\b%s\b' % re.escape(word), x)) print(count) # 2 إستخدام split لتحويل النص إلى قائمة كلمات ثم إستخدام التابع count للقوائم:
import re x = "hello, world! Hi! hello!" word = "hello" count = re.split(r'\W', x).count(word) print(count) # 2

تستطيع إستخدام مكتبة mongoose أو mongodb نفسها للتحقق من أن المعرف id صالح.
استيراد ObjectId من حزم mongodb أو mongoose:
باستخدام Mongodb: const ObjectId = require('mongodb').ObjectId; // or const mongodb, {ObjectId} = require('mongodb'); باستخدام Mongoose: const ObjectId = require('mongoose').Types.ObjectId; ومع ذلك ، يقوم (id)ObjectId.isValid بإرجاع true حتى بالنسبة للسلاسل غير الصالحة ذات الطول 12.
لمنع مثل هذه الحالات ، يمكن إضافة فحص آخر بعد التحقق الافتراضي الذي سيعيد صواب أو خطأ بناءً على الشرط:
(String)(new ObjectId(id)) === id إنشاء دالة بهذا الشرط:
const mongoose = require('mongoose'), ObjectId = mongoose.Types.ObjectId; // Validator function function isValidId(id){ if(ObjectId.isValid(id)){ if((String)(new ObjectId(id)) === id) return true; return false; } return false; } console.log(ObjectId.isValid("barbarbarbar")) // true console.log(isValidId("barbarbarbar")) // false console.log(isValidId("594ced02ed345b2b049222c5")) // true أيضاً إبتداءً من Mongoose > 5.7.12 تم إضافة دالة تقوم بعمل نفس الشيء: isValidObjectId:
mongoose.isValidObjectId(string); /* true or false */

يدعم fileinput بالفعل التحرير الداخلي. و يقوم بإعادة توجيه stdout إلى الملف في هذه الحالة يُمكنك إستخدامه بهذا الشكل:
import fileinput with fileinput.FileInput("file.txt", inplace=True) as file: for line in file: print(line.replace("foo", "bar"), end='') لاحظ أننا حددنا المعامل inplace ب True حتى نستطيع التعديل.

إذا كنت تقصد أنه إنطلاقاً من قائمة تحتوي على مفاتيح:
["b", "y", "z"] تُريد الوصول إلى قيمة في القاموس المُعطى.
يُمكنك إنشاء دالة للمرور على القائمة و جلب القيمة في كل مرة بالشكل التالي:
dataDict = { "a":{ "x": 1, "y": 2, "z": 3 }, "b":{ "x": 1, "y": { "x": 1, "y": 2, "z": 3 }, "z": 3 } } def nested_get(dic, keys): for key in keys: dic = dic[key] return dic print(nested_get(dataDict, ["b", "y", "z"])) # 3 كما بالإمكان إستخدام functools.reduce بالشكل التالي:
from functools import reduce import operator def nested_get(dataDict, mapList): return reduce(operator.getitem, mapList, dataDict) dataDict = { "a":{ "x": 1, "y": 2, "z": 3 }, "b":{ "x": 1, "y": { "x": 1, "y": 2, "z": 3 }, "z": 3 } } print(nested_get(dataDict, ["b", "y", "z"])) # 3