المتصدرون - أكاديمية حسوب

ما هو الـ Dom في JavaScript

السلام عليكم ما هو ال DOM

11 مارس 2023

2 نقاط

استخدامات innerText و innerHtml ؟؟

اريد توضيح اخوتي بخصوص innerText و innerHtml الفرق بينهم و متي يمكنني استخدام كلا منهما

11 مارس 2023

2 نقاط

استخدام الـ grid في css

هذا يومي السابع او الثامن في css هل كودي جيد وهل استخدامي للgrid جيد او اي نصائح شكرا

11 مارس 2023

2 نقاط

اريد ان اعرف بعض الاشياء المهمه في العمل الحر

اريد ان اعرف ما هي الاساسيات والقواعد التي يجب ان اتبعها في اي عمل استلمو في مواقع العمل الحر مثال طريقه تسليم الموقع واسضافه الموقع بتكون علي مين الخ ....

12 مارس 2023

1 نقطة

مشكلة عدم تنصيب microsoft office 2016

ربما المشكلة تتعلق ببقايا من إصدار Office 2010 السابق الذي حذفته. يجب عليك محاولة حذف جميع بقايا Office 2010 ومحاولة تثبيت Office 2016 مرة أخرى. يمكنك استخدام أداة إزالة Office من Microsoft للقيام بذلك. يمكنك تنزيل أداة إزالة Office من الرابط التالي: https://aka.ms/SaRA-officeUninstallFromPC بعد تنزيل الأداة، يمكنك تشغيلها واتباع الخطوات الموجودة لإزالة جميع بقايا Office 2010 من جهاز الكمبيوتر الخاص بك. أيضًا تأكد من حذف مجلد microsoft office في قرص الـ C في مجلد program files أو program files x86. أغلق برنامج الحماية لديك عن طريق عمل disable له من الإعدادات الخاصة به. قم بإعادة تشغيل الحاسوب. الآن يمكنك محاولة تثبيت Office 2016 مرة أخرى والتأكد من تشغيل عملية التثبيت كمسؤول أي الضغط بزر الفأرة الأيمن على ملف التثبيت ثم إختيار run as administrator. إذا لم تنجح محاولات التثبيت، يمكنك محاولة تنفيذ بعض الإجراءات المختلفة، مثل تثبيت جميع التحديثات الهامة لنظام التشغيل. إذا لم ينجح ذلك، فمن الممكن أن يكون لديك مشكلة في النظام أو القرص الصلب.

11 مارس 2023

1 نقطة

استفسار عن تنفيذ تطبيق

أود التواصل معك ❤️ @ishaaf7 عزيزي الوضع لا يعتمد على الاحتمالات سأخبرك ب التفاصيل

11 مارس 2023

1 نقطة

استخدام الـ grid في css

الكود الخاص بك جيبد ولكن ليس منظم بشكل جيد, غير أنك لا تحتاج إلى استخدام الخاصية grid-template-areas. أنظر إلي هذا الكود وقارن بينه وبين الكود الخاص بك وسوف تتعلم الكثير. HTML <!DOCTYPE html> <html lang="en" style="font-family: Arial, Helvetica, sans-serif"> <head> <meta charset="UTF-8" /> <title>CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="layout"> <div class="grid"> <div class="item-a"> <p class="name">Osama Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. </p> <span>″</span> </div> <div class="item-b"> <p class="name">Ahemd Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Duis ullamcorper rutrum posuere. Mauris a dolor sed tortor consequat laoreet. Sed condimentum, erat porta sagittis blandit. </p> <p> Suspendisse consequat a justo quis vulputate. Quisque pharetra neque tempus augue consectetur pharetra. Curabitur lobortis aliquet turpis eget blandit. Fusce vel vulputate libero. </p> <span>″</span> </div> <div class="item-c"> <p class="name">Shady Nabil</p> <p class="job">Full-Stack Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. Suspendisse vehicula accumsan libero, ac lobortis risus vehicula a. Nam eget orci nunc. Aliquam facilisis, urna vitae molestie dapibus, ante nisl efficitur quam, et efficitur sem elit vitae sem. Cras egestas malesuada metus sit amet sollicitudin. </p> <p> Sed ut viverra augue, vel tincidunt metus. Phasellus ac suscipit odio. Aliquam vehicula augue sed euismod vehicula. Curabitur luctus neque a enim commodo, ut posuere orci viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque id elementum mi. Fusce metus lectus, iaculis et est quis, condimentum ornare urna. </p> <span>″</span> </div> <div class="item-d"> <p class="name">Mohamed Ibrahim</p> <p class="job">.Net Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. </p> <p> Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta sit amet a urna. Sed ex sapien, finibus sed erat a, sodales tristique mauris. Phasellus vel finibus ligula. Nunc at magna non sem finibus accumsan eget eu dui. Nam ac enim quis elit dignissim dictum. In et laoreet diam, at dignissim mi. Ut iaculis nisi libero, tempor tincidunt libero rhoncus ac. </p> <span>″</span> </div> <div class="item-e"> <p class="name">Mahmoud Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>″</span> </div> <div class="item-f"> <p class="name">Ezz Eldin</p> <p class="job">Front-End Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>″</span> </div> <div class="item-g"> <p class="name">Mohamed Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Ut porttitor tincidunt erat, id facilisis purus hendrerit eget. Duis id dolor sit amet enim dapibus ornare. </p> <p> Nulla ut magna a nibh congue pulvinar. Morbi id augue arcu. Integer eu bibendum tortor. </p> <span>″</span> </div> <div class="item-h"> <p class="name">Ibrahim Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>″</span> </div> <div class="item-i"> <p class="name">Gamal Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. </p> <span>″</span> </div> <div class="item-J"> <p class="name">Eman Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>″</span> </div> </div> </div> </body> </html> CSS * { box-sizing: border-box; padding: 0; margin: 0; } .layout { background-color: #eeeeee; padding: 40px; font-family: Arial, Helvetica, sans-serif; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; } .grid div { background-color: #ffffff; padding: 30px 20px; border-bottom: 3px solid #f54e1f; position: relative; } .grid div span { font-size: 60px; position: absolute; bottom: -25px; right: 10px; color: gray; } div p { line-height: 1.5; } .name { font-weight: bold; margin-bottom: 2px; font-size: 20px; } .job { color: gray; font-weight: bold; margin-bottom: 15px; } .about { font-weight: bold; margin-bottom: 15px; font-size: 18px; } .item-c, .item-e, .item-h { background-color: black !important; color: #ffffff !important; } .item-a { grid-column: 1 / span 2; grid-row: 1 / 2; } .item-e { grid-column: 2 / span 2; grid-row: 2 / 3; } .item-f { grid-column: 2 / span 2; grid-row: 3 / 4; } .item-d { grid-column: 1 / 2; grid-row: 2 / span 2; } .item-c { grid-column: 4 / 5; grid-row: 1 / span 3; }

11 مارس 2023

1 نقطة

استخدام الـ grid في css

الكود جيد جداً، واستخدام الـ grid جيد كذلك، جرب اضافة التنسيق التالي : * { box-sizing: border-box; } وتعديل التنسيقات التي تعطيها للـ div كالتالي : div { width: 100%; height: 200vh; background-color: #eee; padding: 50px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 2fr) 1.5fr; grid-template-areas: "osama osama ahmed shady" "moh-i moh-moh moh-moh shady" "moh-i ezz ezz shady" "moh-s ibra gamal eman"; gap: 5px; } لجعل ال grid على مقاس الشاشة. سيكون من الجميل ان تقوم بعمل dynamic grid بحيث يقوم بإنشاء صفوف بشكل تلقائي وذلك إن اردت التدرب بشكل اعمق على الـ grid.

11 مارس 2023

1 نقطة

استخدام الـ grid في css

style.cssindex.html

11 مارس 2023

1 نقطة

استخدام الـ grid في css

يبدو انك لم تقم بمشاركة الكود الخاص بك

11 مارس 2023

1 نقطة

توضيح بعض الأخطاء لموقع قمت برفعه على Netlify

السلام عليكم. قمت بعمل المشروع التالي: https://react-find-meals.netlify.app/ الرجاء توضيح بعض الأخطاء (حسب إعتقادي بسبب useEffect hook) 1. لما أريد البحث عن طريق إسم الوجبة مثلا في البداية أكتب "pizza" يقع عرض الأكلة صحيح لكن إذا قمت بفسخها و كتابة مثلا "p" فلا شيء يحدث 2. عندما تظهر الوجبات و أريد أن أختار حسب النوع في القائمة الجانبية يظهر فقط نوع الوجبة الذي قمت بتحديده و لا تظهر بقية الأنواع. الشيفرة البرمجية: function App() { const [searchMeal, setSearchMeal] = useState("") const [meals, setMeals] = useState([]) const [showMeals, setShowMeals] = useState(false) // Fetch Meals API const getMeals = async () => { const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s') const data = await response.json() const findMeals = data.meals.map(meal => ( { id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, } )) setMeals(findMeals) } useEffect(() => { getMeals() }, []) // Display Searched Meals const getSearchedMeals = (e) => { e.preventDefault() if(searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase())) setMeals(searched) } setSearchMeal("") setShowMeals(true) } // filter by category const [selected, setSelected] = useState([]) const categories = meals.map(meal => meal.category) .reduce((acc,item) => (acc.includes(item) ? acc : [...acc,item]) ,[]) const handleCheck = (e) => { const {value, checked} = e.target; if (checked === true) { setSelected(pre=>[...pre,value]) }else { setSelected(pre=> [...pre.filter(item => item !== value)]) } } useEffect(() => { const filtered = meals.filter(item => selected.includes(item.category)) setMeals(filtered); }, [selected]); // Filter By Rate return ( <div className="container"> <Search searchMeal = {searchMeal} setSearchMeal = {setSearchMeal} getSearchedMeals = {getSearchedMeals} /> <div className="main"> { showMeals && <FilterMeal categories = {categories} handleCheck = {handleCheck} /> } { showMeals && <Meals meals = {meals} searchMeal = {searchMeal} /> } </div> </div> ); } export default App; شكرا لكم.

11 مارس 2023

1 نقطة

توضيح بعض الأخطاء لموقع قمت برفعه على Netlify

مشكلة البحث: الخطأ في عرض البحث بحيث يعمل البحث فقط إذا تم إدخال الكلمة بالكامل. على سبيل المثال، عند الكتابة "p"، لا يعرض أي شيء. هذا الخطأ يحدث لأن استخدام الدالة setMeals() في الدالة getSearchedMeals() يعيد قائمة الوجبات إلى حالتها الأصلية، مما يعني أن العرض الحالي للوجبات سيتم إزالته. يجب استخدام حالة جديدة تتضمن النتائج المصفاة دون تغيير الحالة الأصلية لقائمة الوجبات. لإصلاح هذا الخطأ، يمكن تعديل الدالة getSearchedMeals() على النحو التالي: const getSearchedMeals = (e) => { e.preventDefault(); if (searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase()) ); setShowMeals(true); setMeals(searched); } else { setShowMeals(false); } setSearchMeal(""); }; مشكلة تصفية النوع: تحدث هذه المشكلة لأنه في كل مرة تقوم فيها بتحديد الفئة، تقوم الدالة setMeals() بتعيين القائمة المفلترة إلى قائمة من الوجبات التي تحتوي فقط على النوع الذي تم تحديده. لحل هذه المشكلة، يمكنك استخدام مصفوفة أخرى لتخزين القائمة الأصلية من الوجبات وتقوم بتصفيتها بناءً على النوع وتعيين القائمة المعروضة إلى النتيجة. يمكنك تعديل الكود كالتالي: function App() { const [searchMeal, setSearchMeal] = useState(""); const [meals, setMeals] = useState([]); const [showMeals, setShowMeals] = useState(false); const [originalMeals, setOriginalMeals] = useState([]); // إضافة قائمة الوجبات الأصلية // Fetch Meals API const getMeals = async () => { const response = await fetch( "https://www.themealdb.com/api/json/v1/1/search.php?s" ); const data = await response.json(); const findMeals = data.meals.map((meal) => ({ id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, })); setMeals(findMeals); }; useEffect(() => { getMeals(); }, []); // Display Searched Meals const getSearchedMeals = (e) => { e.preventDefault(); if (searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase()) ); setShowMeals(true); setMeals(searched); } else { setShowMeals(false); } setSearchMeal(""); }; // filter by category const [selected, setSelected] = useState([]); const categories = meals .map((meal) => meal.category) .reduce((acc, item) => (acc.includes(item) ? acc : [...acc, item]), []); const handleCheck = (e) => { const { value, checked } = e.target; if (checked === true) { setSelected((pre) => [...pre, value]); } else { setSelected((pre) => [...pre.filter((item) => item !== value)]); } }; useEffect(() => { const filtered = meals.filter((item) => selected.includes(item.category) ); setMeals(filtered); }, [selected]); // Filter By Rate return ( <div className="container"> <Search searchMeal={searchMeal} setSearchMeal={setSearchMeal} getSearchedMeals={getSearchedMeals} /> <div className="main"> {showMeals && ( <FilterMeal categories={categories} handleCheck={handleCheck} /> )} {showMeals && <Meals meals={meals} searchMeal={searchMeal} />} </div> </div> ); } export default App;

11 مارس 2023

1 نقطة

ما هو الـ Dom في JavaScript

بشكل أكثر تفصيلاً، يمكن القول أن DOM في JavaScript يشير إلى مجموعة من الكائنات (Objects) التي تمثل مستند HTML الذي تتم إنشاؤه من قبل المستعرض (Browser)، وتتيح للمطورين التفاعل مع عناصر المستند بشكل ديناميكي عن طريق البرمجة. ويعد DOM بمثابة جسر بين المستند HTML وJavaScript، حيث يمكن الوصول إلى العناصر الموجودة في المستند والتلاعب بها باستخدام JavaScript. DOM يعمل على مبدأ التسلسل الهرمي (Hierarchical structure)، حيث يتم تمثيل المستند HTML كشجرة تحتوي على عناصر HTML وكل عنصر يحتوي على أطفال (Children) وأشقاء (Siblings). ويتم تمثيل العناصر باستخدام كائنات JavaScript يمكن الوصول إليها باستخدام مجموعة من الخصائص والأساليب. عندما يتم تحميل صفحة ويب، يقوم المستعرض بإنشاء DOM، ونستطيع الوصول إلى عناصر المستند HTML باستخدام الأساليب والخصائص المتاحة في جافاسكريبت مثل getElementById() و getElementsByClassName() وغيرها. الأساليب والخصائص المتاحة في DOM تختلف من عنصر إلى آخر، ولكن بشكل عام يمكن استخدام DOM لتعديل محتويات الصفحة والأحداث المرتبطة بها، وذلك باستخدام JavaScript. على سبيل المثال، يمكن استخدام DOM لتغيير نص عنصر HTML، عن طريق الوصول إلى العنصر باستخدام الأسلوب getElementById() ثم تعيين قيمة جديدة لخاصية innerHTML: <p id="myPara">Hello World!</p> const myPara = document.getElementById("myPara"); myPara.innerHTML = "Goodbye World!"; كما يمكن استخدام DOM لإضافة عناصر HTML جديدة إلى المستند، عن طريق إنشاء العنصر باستخدام createElement() ثم إضافته إلى المستند باستخدام append. على سبيل المثال، إذا كنت تريد إنشاء عنصر div جديد وإضافته إلى صفحتك، يمكنك استخدام الكود التالي: // إنشاء عنصر div جديد const newDiv = document.createElement("div"); // تعيين نص داخل العنصر const divText = document.createTextNode("Hello, World!"); // إضافة النص إلى العنصر newDiv.appendChild(divText); // تعيين بعض الخصائص للعنصر newDiv.style.backgroundColor = "blue"; newDiv.style.color = "white"; newDiv.style.padding = "10px"; // إضافة العنصر الجديد إلى الصفحة document.body.appendChild(newDiv); يمكن أيضًا استخدام DOM لإزالة عناصر HTML، عن طريق استخدام removeChild(). على سبيل المثال، إذا كنت تريد إزالة عنصر div بناءً على معرفه، يمكنك استخدام الكود التالي: // الحصول على العنصر المراد إزالته باستخدام معرفه const divToRemove = document.getElementById("myDiv"); // إزالة العنصر من المستند divToRemove.parentNode.removeChild(divToRemove); وباستخدام DOM ، يمكنك أيضًا تغيير خصائص عناصر HTML موجودة، مثل قيمة النص أو الخلفية أو الحجم والألوان والخطوط والأحداث وغيرها الكثير. على سبيل المثال، إذا كنت تريد تغيير خلفية عنصر div عند تحميل الصفحة، يمكنك استخدام الكود التالي: <div id="myDiv">Hello, World!</div> <script> // الحصول على العنصر المراد تعديله باستخدام معرفه const myDiv = document.getElementById("myDiv"); // تغيير خلفية العنصر myDiv.style.backgroundColor = "blue"; myDiv.style.color = "white"; myDiv.style.padding = "10px"; </script> في النهاية، تتيح لك DOM إمكانية التفاعل مع صفحات الويب وتغييرها بطريقة ديناميكية وباستخدام لغة JavaScript.

11 مارس 2023

1 نقطة

ما هو الـ Dom في JavaScript

ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً. مثال عليها document.getElementById("p1").innerHTML = "New text!"; اطلع اكثر عن الـ dom من خلال هذه المقالة :

11 مارس 2023

1 نقطة

ما هو الـ Dom في JavaScript

DOM هو اختصار لـ Document Object Model وهو عبارة عن مجموعة من الأدوات والتقنيات التي تسمح للمطورين بالتفاعل مع صفحات الويب وتغيير محتواها وخصائصها باستخدام جافا سكربت. يمثل DOM هيكلية الصفحة كشجرة تحتوي على عناصر HTML وCSS وJavaScript، حيث يمكن للمطور استخدام DOM للوصول إلى هذه العناصر والتلاعب بها بشكل ديناميكي ويمكنك تصفح هذه المقالة لتفصيل أكثر.

11 مارس 2023

1 نقطة

laravel

لتخزين الصور في Laravel ومن ثم تخزينها في قاعدة البيانات، ستحتاجين إلى اتباع الخطوات التالية: 1- إنشاء جدول في قاعدة البيانات لتخزين الصور: قم بإنشاء جدول جديد في قاعدة البيانات لتخزين الصور. يجب أن يتضمن هذا الجدول حقولًا مثل اسم الصورة ومسار الصورة وأي حقول إضافية تحتاج إليها لتتمكن من تخزين واسترداد الصور. Schema::create('photos', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('path'); $table->timestamps(); }); 2- إنشاء نموذج Model للصورة: يجب إنشاء نموذج Model للصورة لتتمكن من الوصول إلى جدول الصور في قاعدة البيانات. سيتم استخدام هذا النموذج لإنشاء سجلات صور جديدة وتحديثها وحذفها. namespace App\Models; use Illuminate\Database\Eloquent\Model; class Photo extends Model { protected $fillable = [ 'name', 'path' ]; } 3- إضافة حقل لتحميل الصور في النموذج: يجب إضافة حقل لتحميل الصور في النموذج. يمكن استخدام الحقل "file" لهذا الغرض. <input type="file" name="photo"> 4- تخزين الصورة في الخادم: قبل تخزين الصورة في قاعدة البيانات، يجب تخزينها في الخادم. يمكن استخدام وظيفة "store" للقيام بذلك. سيتم حفظ الصورة في المسار المحدد في الدالة "store". $path = $request->file('photo')->store('public/photos'); 5- إنشاء سجل الصورة في قاعدة البيانات: بعد حفظ الصورة في الخادم، يمكنك إنشاء سجل للصورة في قاعدة البيانات باستخدام النموذج Model. use App\Models\Photo; $photo = new Photo; $photo->name = $request->file('photo')->getClientOriginalName(); $photo->path = $path; $photo->save(); 6- استرداد الصورة من قاعدة البيانات: يمكنك استرداد الصورة من قاعدة البيانات باستخدام النموذج Model. يجب البحث عن سجل الصورة باستخدام معرف الصورة واسترداد المسار الذي تم تخزين الصورة به في الخادم. use App\Models\Photo; $photo = Photo::findOrFail($id); $path = $photo->path; 7- عرض الصورة في الواجهة: يمكنك عرض الصورة في الواجهة باستخدام العنوان URL للصورة. يمكن الحصول على العنوان URL باستخدام دالة "asset". <img src="{{ asset($photo->path) }}" alt="{{ $photo->name }}"> 8- حذف الصورة: يمكن حذف الصورة من الخادم وقاعدة البيانات باستخدام النموذج Model. use App\Models\Photo; $photo = Photo::findOrFail($id); Storage::delete($photo->path); $photo->delete(); بهذا الشكل، يمكنك تخزين الصور في Laravel ومن ثم تخزينها في قاعدة البيانات واستردادها وحذفها عند الحاجة.

11 مارس 2023

1 نقطة

الفلترة المتعدد بواسطة ريآكت

يحدث هذا الخطأ عندما يتم إعادة تقديم الصفحة مرارًا وتكرارًا بسبب تحديث الحالة في كل مرة. في حالة مشروعك أنت، عند تحديث حالة meals في setMeals(filtered) ، فيتم إعادة تقديم الصفحة وإعادة تنفيذ الكود بالكامل. هذا يعني أنه يتم إعادة استدعاء الدالة getMeals() في useEffect() وإعادة جلب البيانات مرة أخرى، ثم تحديث meals وإعادة التقديم مرة أخرى وهكذا. لحل هذه المشكلة، يمكنك وضع استدعاء getMeals() في حالة مستقلة عن حالة selected. يمكنك إنشاء دالة فرعية في مكان آخر، على سبيل المثال في الأعلى من المكون، واستخدامها لجلب البيانات. يمكنك أيضًا إضافة شرط للتحقق مما إذا كانت selected فارغة أو لا لتحديث meals بشكل صحيح عند الحاجة فقط. على سبيل المثال: const [meals, setMeals] = useState([]); const [selected, setSelected] = useState([]); const fetchMeals = async () => { const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s') const data = await response.json() const findMeals = data.meals.map(meal => ( { id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, } )) setMeals(findMeals) } const handleCheck = (e) => { const {value, checked} = e.target; if (checked === true) { setSelected(pre=>[...pre,value]) } else { setSelected(pre=> [...pre.filter(item => item !== value)]) } } useEffect(() => { fetchMeals(); }, []); useEffect(() => { const filtered = meals.filter(item => selected.includes(item.category)) setMeals(filtered); }, [selected]); ملاحظة: يمكنك أيضًا استخدام useCallback() لتجنب إعادة تحديث دالة fetchMeals() عند إعادة تقديم الصفحة Re-render. قواعد استعمال الخطافات في React الأسئلة الشائعة حول الخطافات في React

10 مارس 2023

1 نقطة

مشكلة عدم تحديث الملف الصوتي رغم تحديث الرابط في لارافل لايفوير laravel livewire

السلام عليكم , اتعبتكم معي المعذرة رجاءا للأسف لم تحل المشكلة بعد’ المشكلة على ما أعتقد سببها أنه لا يتم تنفيد شيفرة جافاسكريبت إلا مرة واحدة فقط لأنه لا يتم تحديث صفحة عرض <<Livewire>> فيديو صغير يوضح المشكلة : Screen Recording (3-10-2023 10-06-03 PM).wmv

10 مارس 2023

1 نقطة

الفرق بين ReactDOM.render() و ReactDOM.createRoot()

إذا قمت بالترقية إلى الإصدار 18 وما زلت تستخدم ReactDOM.render لإنشاء تطبيق ، فستتلقى تنبيه يخبرك بأن ال ReactDOM.render لم تعد مدعومه وبإختصار فإن التمييز الأساسي بين createRoot و ReactDOM.render هو أن createRoot يولد حاوية جذر جديدة لتصيير المكونات ، بينما يعرض ReactDOM.render المكونات مباشرة إلى عنصر DOM محدد وهذا هو الفرق بينهما ولكن هناك بعد التحفظات عند استخدام ال createRoot إذا كان تطبيقك server-rendered ، فإن استخدام createRoot () غير مدعوم. استخدم hydrateRoot () بدلاً من ذلك. عندما تريد عرض جزء من JSX في جزء مختلف من شجرة DOM ليس تابعًا لمكونك (على سبيل المثال ، modal أو tooltip) ، استخدم createPortal بدلاً من createRoot يمكنك الإطلاع على المزيد من المعلومات من خلال التوثيق الرسمي ل react من هذا الرابط

6 مارس 2023

1 نقطة

اواجه صعوبة في فهم الكود التالي (JavaScript)

في السطر رقم 2 تم تعريف دالة (count) ووظيفتها إيجاد عدد عناصر المصفوفة التي وردت والراجعة من فلترة المصفوفة الأصلية ومن خلال مقارنة عناصرها مع قيمة معينة. أما في السطر رقم 5 فهو يتألف من جزئين , الأول إستدعاء الدالة (count) التي تم تعريفها في السطر رقم 2 للحصول على عدد عناصر المصفوفة الناتجة من مقارنة العدد الحالي من الدورة الحالية داخل حلقة التكرار (loop) التي تتم على مصفوفة الأعداد الأصلية , وهنا يأتي الجزء الثاني من هذا السطر والذي فيه يتم إيجاد باقي القسمة لنتيجة إستدعاء الدالة (count) والتي تمثل عدد المرات التي تكرر فيها العدد قيد المقارنة, فإذا كان باقي القسمة أكبر من صفر يدل على أن العدد فردي (لا يقبل القسمة على 2 بدون باقي).

2 مارس 2023

1 نقطة

أريد أفكار مواقع ويب وتطبيقات ويب مميزه ؟

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