شرف الدين حفني

المشكلة لديك أنك تقوم بوضع الشرط else داخل نفذ الحلقة التكرارية, وبالتالي عندما تمر أول لفة ولا يجد العنصر المطلوب يتم تنفيذ شرط else دون إنتظار المرور على باقي العناصر
الحل أن تضع متغير يتم تغييره قيمته إلى true أو false حسب إن تم إيجاد العنصر أم لا, وثم تضع شرط أن العنصر لم يتم إيجاده خارج الحلقة التكرارية لتصبح شفرتك البرمجية كالشكل التالي
var isFound = false; let action = document.getElementById("action"); action.addEventListener("click", function () { let input = document.getElementById("input").value, demo = document.getElementById("demo"); for (i = 0; i < fields.length; i++) { if(input == fields[i].field1){ let result = "<tr><td>" + fields[i].field1 + "</td>" + "<td>" + fields[i].field2 + "</td>" + "<td>" + fields[i].field3 + "</td>" + "<td>" + fields[i].field4 + "</td>" + "<td>" + fields[i].field5 + "</td></tr>"; demo.innerHTML = result; isFound = true; } } if(!isFound){ demo.innerHTML = "غير موجود"; } isFound = false; });  

أعتذر لم أنتبه إلى ملف الجافاسكريبت, المشكلة لديك في ملف الجافاسكريبت أنك تحاول إستخدام جيكويري على الرغم أنك لم تضعها في الملفات, فلو دخلت إلى المسار /assetستجده فارغًا ليس به جيكويري, برجاء تنزيلها أو وضع هذا الاسكريبت ومسح وسم الاسكريبت الذي يُشير إلى مكان الجيكويري في المسار asset/jquery
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> بالنسبة إلى تعويض عدم وجود media فيمكنك تعويضها بإستخدام التنسيقات وأصناف بوتستراب مثل الflex , على سبيل المثال يمكنك إستخدام تلك الأصناف لتعويض الصنف media 
<div class="col-md"> <div class="d-flex"> <div class="flex-shrink-0"> <img class="mr-3" src="test.png" width="50"/> </div> <div class="flex-grow-1 ms-3"> <h5 class="mt-0 text-left"> EASY CUSTOMIZATION </h5> <p class="mb-2 text-left"> Seamlessly restore client-focused potentialities rather than functional strategic theme areas. </p> </div> </div> حيث قمنا هنا بإستخدامم flex-box بغرض تقسيم المحتوى إلى قسمين, قسم للصورة وقسم للنصوص

الtransition لا يعمل إلا في القيم المطلقة
ماهي القيم المطلقة؟
هي القيم التي لها معنى واضح مثل 50 px أو 0px 
بينما القيم التي تكون مثل auto, inherit لا تعمل مع الtranstion
لذا برجاء تغيير قيمة الmargin:auto الموجودة للصنف parent إلى 0px

الTemplate engines مثل handlebars عادةً ما يتم إستخدامها لسهولتها في الصفحات البسيطة التي لا يكون فيها تلاعب كبير بDOM وهذا لأن طريقة كتابتها والتعامل معها تكون أسهل من التعامل مع أكواد الجافاسكريبت والAjax , وخاصة عندما يكون الذي يتعامل هنا مُصمم وليس مُبرمج فيكون من الأسهل للمُصممين التعامل مع الوسوم الخاصة بhandlebars أو الTemplate engines بوجهٍ عام بدلًا من التعامل مع أكواد الجافاسكريبت
ما الذي يجعلك تستخدم hbs
عندما يكون في الفريق بعض الأشخاص الذي ليس لديهم معرفة كبيرة في التعامل مع جافاسكريبت تُريد فقط إنشاء بعض الصفحات البسيطة التي لا تحتاج إلى تلاعب كبير في DOM لا تريد إستخدام أطر عمل مثل React, angular ما الذي يجعلك لا تستخدمها
عندما يكون التطبيق لديك يحتوي على تلاعب كثير بDOM عندما يكون هنالك تفاعل كبير بين المستخدم والموقع مما يجعلك تحتاج إلى كتابة javascript بشكلٍ كبير عندما تريد إستخدام أطر عمل مثل React.js, angular.js, vue.js 

المشكلة لديك في الخاصية pop حيث أنها لا تستقبل id وإنما تقوم بإستقبال قيمتين فقط إما -1 لتقوم بمسح أول عنصر في القائمة أو 1 لتقوم بمسح أخر عنصر في القائمة
إن كنت تريد أن تحذف بإستخدام الid يمكنك إستخدام $pull بدلًا منها 
$pull:_id  

في حالة عدم إجتياز الإمتحان سيتم إعطاؤك ملاحظات حول ما فعلته في الإختبار ويمكنك بعد ذلك الإمتحان في وقتٍ لاحق , ويمكنك الإستفسار بشكلٍ أكبر من خلال محادثة الدعم الفني

إن عملية serialization ليست مقتصرة على لغة c# أو على أي لغة بوجه عام وإنما هي تعني مفهوم في الحوسبة بوجهٍ عام
لتفهم معنى serialization دعنا نناقش المثال التالي:
نفترض أن لديك هيكل بيانات عبارة عن Linked-list أي عبارة عن مجموعة من العناصر كل عنصر يحمل معلومتين, أول معلومة هي قيمة العنصر نفسه والمعلومة الثانية هي عنوان العنصر التالي في الذاكرة
نفترض الأن أنك أردت إرسال تلك البيانات إلى خادم عبر الشبكة أو تخزينها في قاعدة بيانات أو تخزينها في القرص الصلب, ستقابلك مشكلة مهمة 
مشكلة الذاكرة
كما ذكرنا سابقًا فإن العناصر هنا تحمل بيانات عن أماكن العناصر الأخرى في الذاكرة, ولكن عندما تقوم بنقل تلك العناصر خارج الذاكرة(في القرص الصلب, قاعدة بيانات, عبر الشبكة) سيكون وقتها لا يوجد معنى لتلك البيانات لأنها ببساطة لم تصبح موجودة على الذاكرة, الحل هنا أن نقوم بتحويل تلك البيانات إلى صورة يمكن فهمها خارج الذاكرة على سبيل المثال تحويلها إلى بيانات json أو xml , وتلك العملية تُسمى serialization

أجل لابد من بناء الapi حتى تتمكن من ربط الواجهة  الأمامية المصنوعة بReact.js بالواجهة الخلفية المصنوع بlaravel

من المفترض أن تكون الcharset خاصية مضمنة للوسم meta وهي تحدد نوع الترميز الذي يتم قراءة الملف به من قِبل المتصفح , والترميز المستخدم هنا هو ترميز utf-8 وهو ترميز standard (معياري) مستخدم من قِبل جميع المتصفحات, ويكون كتابة الوسم على الشاكلة الاتية <meta charset="UTF-8">  
بالنسبة للخلفية تحتاج أن تعطيها التنسيقات التالية 
background-position: center; background-repeat: no-repeat; background-size: cover; التنسيق الأول يحدد أن تكون الصورة تظهر في المنتصف بمعنى أن لا تكون منحرف لليسار أو اليمين, التنسيق الثاني يحدد أن الصورة تظهر مرة واحدة لا يتم تكرارها, التنسيق الثالث يحدد أن الصورة يجب أن تغطي جميع أجزاء الصفحة

يتم إستخدام الindexes عند إستخدام الlike ولكن المشكلة الحقيقية تكمن عند إستخدام الwildcard وهي علامة النسبة المئوية % بداخل الlike وهذا لأنها تعني "أي شئ" بمعنى عند كتابة 
%ahmed تعني أيًا كانت النتيجة المهم يكون في أخرها كلمة أحمد وهذا يطابق mohamed ahmed, hossam, ahmed ahmed% وتلك كالأعلى ولكن المهم يكون بدايتها كلمة أحمد في تلك الجملة لن يتم إستخدام الindex في الحالة الأولى ولكن يتم إستخدامها في الحالة الثانية والسبب أن الindex تكون مخژنة على هيئة binary search tree فعند البحث في الحالة الأولى يضطر للبحث في جميع السجلات حتى يعثر على سجل يكون في نهايته أحمد بغض النظر عن بدايته
بينما في الحالة الثانية يقوم بالبحث بإستخدام خواص البحث والترتيب الخاصة ب binary search tree والتي تمكن بسهولة من الوصول إلى الحالة التي فيها كلمة أحمد فبالتالي يتم إستخدام الindex في حالة ما كانت علامة الwildcard على اليمين وليس على اليسار

يمكنك تنفيذ المطلوب عبر تغيير قيمة الinside ل false للكائن res كما بالشكل التالي 
res.inside = false ولكن ستقابلك مشكلة وهي أن الدالة order_by تقوم بإرجاع Query لا تقوم بإرجاع نتيجة
الحل أن نقوم بإرجاع نتيجة عبر مناداة الدالة first ليكون الشفرة البرمجية خاصتك على الهيئة التالية 
res = vehicles_schedule.query.filter_by(vehicle_id = result.vid).order_by('entrydate').first() ومن ثم سيتم تغيير القيمة عند مناداة الsession.commit()
بالتوفيق

ببساطة لا يمكنك الحصول عليه
لماذا لا يمكن الحصول عليه؟
فلنحكي القصة من بداية إرسال الطلب من قِبل العميل
يقوم العميل بإرسال الطلب إلى الخادم الخاص بك يتم إرسال الطلب من الجهاز على هيئة packet (مجموعة من البيانات تتضمن عنوان الشبكة الخاص بك والعنوان الخاص بالوجهة وبعض البيانات الأخرى من ضمنها الmac address الخاص بك) يقوم الموديم بإستقبال الpacket ويستخرج منها عنوان شبكتك وعنوان الوجهة وباقي المعلومات الأساسية ولكن يقوم بتبديل الmac address الخاص بك بالmac address  الخاص به بعد ذلك تقوم الpackets بالمرور على العديد من المحطات hobs قبل الوصول إلى الوجهة النهائية, وكل محطة منهم تقوم بإستبدال الmac address السابق بالmac address الخاص بها في النهاية عند وصول الطلب إلى الوجهة المطلوبة يكون الmac address الموجود في الpacket هو الخاص بأخر محطة قد مرت بها الpacket  فبالتالي لا يمكن الحصول على الmac address الخاص بالعميل لأنه يتم إستبداله عند مرور الpacket على كل محطة

بالإضافة إلى إجابة حسن يمكنك أيضًا تغيير المعمارية(archticture) التي تستخدمها في بناء الكود بمعنى أن تجعل الشفرة البرمجية أكثر تنظيمًا حتى لا تتشوش ويمكنك الوصول إلى ذلك عبر فعل التالي
إنشاء ملف خاص بالPersonContext حتى يتم فصل الطبقة الخاصة بالcontext عن الطبقة الخاصة بباقي التطبيق عمل  export لكلٍ من الPersonContext وال PersonProvider  حتى يصبح الشفرة البرمجية كالشكل التالي 
export const PersonContext= React.createContext() export const PersonContextProvider = ({children})=>{ const [people, setPeople] = useState() return ( <PersonContext.Provider value={[people, setPeople]}> {children} </PersonContext.Provider> ) }  ومن ثم يمكنك بسهولة عندما تريد إستخدام تلك الcontext في أي مكان أن تقوم فقط بعمل import للPersonContextProvider وتضع بداخله الcomponents التي ستستخدمه, وبداخل تلك ال components  تقوم بعمل import لل  PersonContext ومن ثم وضعه بداخل الخُطاف useContext والذي سيقوم بإرجاع نسخة من الstate وال setPeople كما بالشكل التالي
import {PersonContextProfider} from './context/PersonContext' import ChildComp from './childcomp' const Comp = ()=>( <PersonContextProvider> <ChildComp/> </PersonContextProvider> )  
وبداخل الcomponent التي تدعى ChildComp يمكنك فعل التالي 
import {PersonContext} from './context/personcontext' const ChildComp = ()=>{ const [people, setPeople] = useContext(PersonContext) }  

بالطبع يوجد عديد من المكتبات التي تدعمها الreact والتي يمكنها عمل animation 
أحد أشهر تلك المكتبات هي مكتبة framer والتي يمكنك زيارة موقعها عبر الضغط هنا
ومثال على تلك المكتبة : 
import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ scale: [1, 2, 2, 1, 1], rotate: [0, 0, 270, 270, 0], borderRadius: ["20%", "20%", "50%", "50%", "20%"], }} /> ) على سبيل المثال تلك الشفرة البرمجية تقوم بجعل مربع يتضاعف حجمه ثم يدور بزاوية 270 درجة ويتحول إلى دائرة ثم ينقص حجمه مرة أخرى ثم يدور إلى الخلف 270 درجة ثم يرجع إلى مربع مرة أخرى, ويمكنك تجربة ذلك المثال من خلال ذلك الرابط

يمكنك تنفيذ المطلوب عبر تمرير الدالة المسؤلة عن تغيير الحالة من المُكون الأب إلى المُكون الإبن, يمكنك فهم ذلك بشكلٍ أفضل عبر المثال التالي
const Parent = ()=>{ const [name, setName] = useState("") const changeName = (value)=>{ setName(value) } return( <Child changeName = {changeName}/> ) } const Child = ({changeName})=>{ return( <input type='text' onChange={e=>changeName(e.target.value)}/> ) } كما تلاحظ عند تغيير قيمة الinput في المكون الإبن يتم مناداة الدالة changeName التي بدورها تقوم بتغيير الstate الخاص بالمكون الأب

أجل بالطبع يمكنك ذلك حيث في نهاية المطاف الجي كويري والreact يظلان مجرد مكتبات للجافاسكريبت, فبالتالي يمكنك إستخدامهم سويًا ويكون بالشكل التالي:
خطوات تثبيت الجي كويري في تطبيق React.js
تثبيت الجيكويري عبر مدير الحزم npm عن طريق إستعمال الأمر  npm install jquery --save  
بعدها نقوم بعمل إستيراد للمعامل $ عبر الشفرة التالية 
import $ from 'jquery';  
ومن ثم يمكنك إستخدامها كما تفعل في تطبيقات الجافاسكريبت بشكلٍ إعتيادي 
$("button").click(function(){ $.get("demo_test.asp", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); });  
ولكن السؤال الحقيقي هل يجب عليك فعل هذا؟
عيوب إستخدام الجي كويري في الreact
مبدأيًا دعنا نتعرف على أحد مبادئ هندسة البرمجيات وهو مبدأ المسؤلية الواحدة (single responsbility) والذي ينص على أن في أي نظام يجب أن يكون كل قطعة في النظام مسؤلة عن أمر واحد فقط , وبالمثل كل أمر يكون مسؤل عنه قطعة واحدة فقط 
ما علاقة هذا بإستخدام الجيكويري؟  
حسنًا في الحقيقة أن الreact تقوم بعمليات معالجة الDOM ولكن عبر الخفاء بشكلٍ لا تراه نسبيًا, فكل ما عليك فعله فقط هو تعريف الstate ومن ثم تقوم الreact بمعالجة الDOM وفقًا لتغير ذلك الstate بشكلٍ تلقائي, بينما الجيكويري تقوم بمعالجة الDOM بشكلٍ يدوي حيث يجب عليك كتابة كل سطر من الشفرة البرمجية لتنفيذ أوامر المعالجة المطلوبة, المشكلة في ذلك أننا الأن أصبح لدينا قطعتين في النظام يقومون بنفس الوظيفة وبالتالي هذا يؤثر على الأداء بالإضافة إلى أنه يؤدي إلى نتائج غير متوقعة في كثيرٍ من الأحيان

هذا لأن عند استخدام الخطاف(hook ) الخاص بالدالة updateOne تكون this تشير إلى الإستعلامة وليس إلى الوثيقة, للحصول على الوثيقة يمكنك الإستعلام عنها بواسطة كائن الإستعلام الذي يتم تمريره كما في الشفرة التالية
userSchema.pre('updateOne',async function(){ const docToBeUpdated = await this.model.findOne(this.getQuery()); } حيث أن التابع model يُمثل الmodel الذي نحصل عليه بإستخدام mongoose.model ولكن بما أننا لا يمكننا إستخدام الmongoose.model قبل إنشاء الخطاف فبالتالي نقوم بالحصول عليه عبر الشفرة السابقة

يمكنك تحقيق ذلك عن طريق الأتي
يوجد بلغة sql كلمة order by التي تقوم بتحديد ترتيب البيانات في الشفرة خاصتك يتم ترتيب السجلات تصاعديًا بناءًا على قيمة الid  يمكننا عكس ذلك عبر إضافة تلك الشفرة في نهاية الsql حتى يتم ترتيب العناصر بالشكل المعاكس order by id desc   لتصبح في النهاية شفرة الsql كالتالي 
SELECT n.*, a.* FROM `news` as n inner join accounts as a WHERE a.id = n.writer_id AND a.admin_type ='".$admin_type."' order by id desc LIMIT $offset, $no_of_records_per_page  

تلك المشكلة تحدث بسبب أن المتصفح لديك يقوم بإعتبار الموقع أنه غير أمن, يمكنك حل المشكلة عبر فتح المتصفح في الهاتف والذهاب إلى الرابط التالي
chrome://flags/#unsafely-treat-insecure-origin-as-secure ومن ثم تقوم بكتابة رابط التطبيق في مربع الInsecure origins treated as esecure
ومن ثم الضغط على كلمة default  وتحويلها إلى enable ثم تقوم بإعادة تشغيل المتصفح ليعمل معك بسلام

يحدث ذلك غالبًا بسبب أنك تقوم بتعيين نفس الstate , فبالنسبة لreact فإن الstate مازال قيمتها تساوي items حتى وإن تم تغيير قيمة أحد عناصرها فإنها مازالت تشير إلى ذات المكان في الذاكرة, يمكنك التغلب على تلك المشكلة عبر تغيير الstate كما بالشكل التالي:
 
const addItem = (item) => { items[item.id] = item; setItems({...items, item.id:item}); } بهذه الطريقة أنت لا تقوم بإرجاع نفس الstate بعد إضافة عنصر جديد, وإنما تقوم بنسخ عناصر الstate القديمة إلى state أخرى مع إضافة العنصر الجديد, فتتعرف react على أن الstate تم تغييرها وتشير إلى مكان أخر في الذاكرة فيتم تنفيذ الre-render

يمكنك القيام بذلك عبر وضع التنسيق 
direction:rtl بالإضافة إلى الattribute المُسمى dir إلى rtl عند العنصر المُراد تغيير إتجاه عناصره
فمثلاً إن كنت تريد تغيير إتجاه العناصر في الصفحة كلها يمكنك تحديد الخاصية dir لدى وسم ال  html وجعلها ك rtl
<html dir="rtl"> </html> وإضافة التنسيق 
 
html{ direction:rtl }  

تلك التعليمة تستخدم لمناداة الEvent handler الخاص بالعنصر عندما ﻻ يتوفر دوال لهذا الحدث(event)   فمثلاً لو أردنا مناداة حدث الضغط (click event) يمكننا إستخدام كلا الطريقتين 
element.click() //او element.dispatchEvent(new Event("click"))  بالطبع الطريقة الأولى أسهل وأفضل ولكن ماذا لو تحدثنا عن حدث لا يوجد له دالة جاهزة في العنصر مثلاً كحدث قمنا نحن بإنشاؤه؟
فمثلاً لو قمنا بإنشاء حدث عندما يتم الضغط على الزر ثﻻث مرات بشكل متتالي , ففي ذلك الموقف ليس لنا دالة جاهزة في العنصر فنقوم إذا مناداة الevent handler عبر الطريقة الأخرى 
element.dispatchEvent(new Event("event name"))  

من الممكن أن تقوم بفتح نافذا الinspect عبر f12 ومن ثم إختيار نافذة profiler التي تدعمها الreact dev tools ومن ثم تقوم بإختيار الإعدادات والضغط على خاصية Record why each component rendered while profiling.
ومن ثم يمكنك أن تعرف لماذا كل component يتباطأ حتى تتمكن من معرفة مصدر البطئ وتصليحه
كما أنني أﻻحظ إستخدامك لدوال كثيرة وتمريرها عبر الcomponents , وذلك يجعل في كل مرة يتم تنفيذ دالة يحدث عملية re-render للcomponents , يمكنك معالجة ذلك عبر إستخدام الuseCallback h
const someFunction = useCallback((parameters) => { //نقوم بكتابة جسم الدالة }, [نقوم هنا بوضع المتغيرات التي تتغير تلك الدالة على اساسها]); بهذا الشكل عند تنفيذ الدالة لن يحدث re-render إلا عند تغيير أحد المتغيرات التي تم تمريرها
 

قانون مساحة الدائرة(المنطقة) هو عبارة عن حاصل ضرب المعامل بايpi في نصف القطر تربيع
إذا يكون المنطق التسلسلي للبرنامج بالشكل التالي
تقوم بأخذ قيمة نصف القطر من المستخدم عبر الدالة input ومن ثم تقوم بتعريف الثابت pi بقيمة 3.14 من ثم تقوم بالتأكد إن كانت قيمة نصف القطر التي أدخلها المستخدم تساوي صفر تقوم بطباعة كلمة خطأ إن لم تكن صفر فتقوم بطباعة حاصل ضرب نصف القطر تربيع في الثابت pi

كما اخبرك بلال يمكنك مراسلة الدعم الفني بالإضافة لذلك يمكنك السؤال عن أي جزأ غير واضح بالنسبة لك في التعليقات وسيقوم المدربين بشرحه لك وتبسيطه