محمد أبو عواد

حسنا في الاصدار الخامس من بوتستراب يجب أن تغير الخصائص data-toggle و data-target و data-dismiss الى التالي
data-bs-dismiss data-bs-toggle data-bs-target ثم جرب الامر وأخبرنا بالنتيجة

يمكنك جعل الحقل country  من نوع enum ويأخذ القيم 1 او 2 او 3 , أما الحقل city كما هو واضح من الكود الخاص بك يمكننا جعله string وفارغا أيضا فيكون الكود في ملف التهجير كالتالي
$table->enum('country',[1,2,3]); $table->string('city')->nullable(); في ملف request يمكنك اعطاء الحقول بعض القواعد كالتالي
$request->validate([ 'country'=>['required','in:1,2,3'], 'city'=>['required_if:country,1,2,3'] ])  

حاول احاطتهما بحاوية لها تنسيق display وقيمته flex كالتالي
<td class="control"> <div style="display:flex"> ^^^^^^^^^^^^^^^^^^^^^^^ <button>عرض</button> <button>حذف</button> </div> ^^^^^^^^ </td> وأخبرنا بالنتيجة

هل تستخدم xampp ؟ اذا كنت تستحدم xampp يمكنك فعل ذلك من خلال ملف php.ini , يمكنك الوصول اليه كما هو واضح في الصورة التالية

ثم ابحث عن short_open_tag واجعل قيمتها On 
; short_open_tag ; Default Value: On  

من خلال ما هو واضح في كود ملف webpack.config فأنه لا يوجد أي كود لمعالجة ملفات html , أرجو منك التأكد انك تكتب كود معالجة ملفات html بهذا الشكل
{ test: /\.html$/, use: [ { loader: "html-loader", // options: { // minimize: true, // } } ] } ثم نفذ امر التجميع مرة أخرى

حاول تثبيت الاصدار الخامس من حزمة css-loader والاصدار الاول من حزمة html loader من خلال تنفيذ الاوامر التالية
npm i html-loader@1.3.2 npm i css-loader@5.0.0 ثم قم بحذف ملف dist وجرب تنفيذ الأمر مرة أخرى وأخبرنا بالنتيجة

يختلف الأمر باختلاف هدف الفريق , فاذا كان هدف الفريق التدريب وتشجيع أعضاء الفريق على التدريب وزيادة المهارة فما تحتاج اليه هو زيادة خبرتك في بناء الواجهات الامامية باستخدام react js والمهارات الأخرى اللازمة مثل html , css وأطر العمل المصاحبة لها , وزيادة خبرتك ومهارتك في بناء الواجهات الخلفية باستخدام node js , تحتاج أيضا لزيادة خبرتك في التعامل مع قواعد البيانات وكيفية كتابة الاستعلامات بدقة كبيرة ومعرفة ما البيانات التي أريدها والبيانات التي لا أريدها لأن ذلك من شأنه زيادة سرعة تحميل الموقع أو تقليله لذلك جودة الاستعلامات المكتوبة ضرورية جدا , أما اذا كان هدف الفريق هو بناء مواقع الانترنت كفريق عمل حر فلا انصحك بالانضمام لهذا الفريق اذا كانت مهارتك ليس كبيرة بعد , لأن ذلك سوف يحبطك , في البداية قم ببناء خبرتك ومهارتك بناء على أسس واضحة ومحددة ومفهومة ثم طبق الخطة ثم مارس أكثر وقم بعمل العديد من المواقع بنفسك ثم قم ببناء موقعك الشخصي أو معرض أعمالك ثم يمكنك بعد ذلك التقدم لفرق العمل الحر حيث تكون فرصتك أكبر في الانضمام

المشكلة في القسم serv الذي يسبق القسم team3 , والمشكلة بالتحديد العنصر الذي لديه الصنف banner-img , لقد قمت باعطائه التنسيقات التالية
section.team .serv .banner-img { float: right; ^^^^^^^^^^^^^^ width: 530px; height: 500px; transform: translateY(-320px); } بعد استخدام خاصية float يجب استخدام الخاصية clear للعنصر الأب أي العنصر overlay2 , هناك طريقة ابسط لفعل ذلك ولا داعي لاستخدام الخاصية float أو الخاصية transform, يمكنك أولا حذف الخاصيتين float و transform من العنصر banner-img واعطاءه هامش خارجي من جهة الشمال من خلال الخاصية margin كالتالي
section.team .serv .banner-img { width: 530px; height: 500px; margin-left: auto; } ويمكننا اعطاء الصنف overlay2 الخاصية display وقيمتها flex وبشكل تلقائي سوف تعرض العناصر بشكل افقي
section.team .overlay2 { background-color: rgba(40, 42, 42, .92); padding-left: 11.5%; padding-right: 14.5%; height: 430px; display: flex; } سوف تعرض العناصر بشكل أجمل بهذا الشكل ,وأيضا سوف تظهر الصورة الخاصة بالجوال بشكل كبير لأنك حددت عرض 99% لجميع الصور بداخل القسم team , لاحظ
section.team img { width: 99%; } يمكنك تحديد الصورة بشكل محدد لكي لا تطبق على جميع الصور

لديك حزمتين تقومان بمعالجة الصور لديك , الحزمة file-loader والحزمة html-loader , لمنع هذا التعارض تحتاج الى تثبيت اصدار 1 من حزمة html-loader من خلال الأمر التالي
npm i html-loader@1.3.2 ثم جرب تشغيل السيرفر مرة أخرى ولاحظ هل يتم عرض الصور أم لا وأخبرني بالنتيجة رجاء

بالنسبة للسطر الأول , سوف يتم طباعة SN       Item Name كما هي ثم سوف يتم طباعة مسافة 20 مرة , لاحظي الكود التالي
print(" "*20) معنى السطر السابق أن يتم طباعة مسافة ضرب 20 , أي سوف يتم طباعة المسافة 20 مرة , بالنسبة ل Price سوف يتم طباعتها كما هي ثم سوف يتم طباعة مسافة 6 مرات وهكذا الى نهاية السطر الأول
بالنسبة للسطر الثاني ,يتم تنفيذ خلاله أكثر من جملة, الكود المرفق ليس كاملا ولكن من الواح انه لديك مصفوفة اسمها item وتحتوي على عناصر , يبدأ تعداد العناصر في المصفوفات من العدد 0 , أي للوصول للعنصر الأول في المصفوفات يكون بالشكل التالي
array_name[0] بتعويض array_name باسم المصفوفة التي لديك يصبح item[0] , ثم هناك المعامل end والذي نحدد ما نريد طباعته في نهاية الجملة , هذا المعامل اختياري والوضع الافتراضي له هو 'n/' اي يطبع سطر جديد , ولكن هنا لا نريد طباعة سطر جديد لذلك استخدمناه ووضعنا قيمة مسافة لكي لا ينزل سطر جديد , ثم سوف نطبع العنصر الثاني في المصفوفة والذي رقمه 1 , ثم سوف نقوم باستخدام الدالة ljust والتي تقوم بمحاذاة النص من جهة اليسار , نستخدم المسافة التي نريدها لمحاذاة النص , وهكذا بالنسبة لباقي جمل الطباعة , في الجمل الثلاثة الأخيرة نستخدم الدالة rjust وهي مشابهة للدالة ljust ولكن من جهة اليمين , يمكنك ملاحظة شكل النتيجة لتفهمين وظيفتهما أكثر , ويمكنك تجربة الكود وتغيير القيم لتفهمي بشكل أوضح

يكفي أن تمرره مرة واحدة فقط الى ملف العرض وتستطيع استخدامه في جميع مكونات modal الخاصة بالتعديل والحذف ولا داعي لتمريره مرة أخرى الى ملف العرض في التوابع edit و store و show , مثلا بعد اجراء عملية التعديل وتنتهي منها بشكل صحيح تحتاج أن تعود الى الصفحة السابقة , يمكنك فعل ذلك كالتالي دون الحاجة لتمريره مرة أخرى
return redirect()->back(); أخشى أنني لم أفهم السؤال بشكل واضح , اذا لم تكن الاجابة كما تريد أرجو منك توضيح السؤال بشكل جيد أكثر
 

يوجد اضافة اسمها Auto Close Tag تقوم باغلاق الوسوم تلقائيا , هذه هي الصورة الخاصة بالاضافة

يمكنك البحث عن اسمها ومن ثم عمل install لها , بالنسبة للمسافات فأنت تحتاج لاضافة تقوم بعمل تنسيق لكامل الملف حسب اللغة الخاصة به , يوجد اضافة اسمها Beautify يمكنها فعل ذلك وهذه صورتها

هناك الكثير من الاضافات يمكنك البحث أكثر وتجرب ما تريده بالفعل

يوجد في بوتستراب المكون modal ,وهذا الكود الخاص به
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> تستطيع استبدال العنصر button بالعنصر a واستخدام الخاصية href وتكون قيمتها # , بهذا الشكل
<a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> ^^^^^^^^ Launch demo modal </a> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> تستطيع أن تستخدم اثنين من المكون modal وتتحكم في محتوى كل منهم كالتالي 
<a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1"> ^^^^^^^^ modal 1 </a> <a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2"> ^^^^^^^^ modal 2 </a> لدينا زرين , كل زر مرتبط ب modal معين باستخدام الخاصية data-target , الآن نقوم بإنشاء مكونين modal كل مكون لديه id بنفس اسم  data-target الخاص بالزرين , الكود بشكل مختصر كالتالي
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria- ^^^^^^^^^^^ hidden="true"> <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria- ^^^^^^^^^^^ hidden="true"> لاحظ مكونين modal , الأول لديه معرف modal1 والثاني modal2 , عند الضغط على الزر الذي اسمه modal 1 سوف يظهر المكون modal المرتبط به , يمكنك عرض البيانات التي تريدها بداخل المكون modal وذلك بكتابة الكود بداخل جسم المكون modal كما هو واضح في الكود التالي
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal 2</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> يمكنك كتابة الأكواد التي تريدها هنا وتستخدم أي بيانات قمت بجلبها من المتحكم أو عمل فورم </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>  

لديك مشكلة في الفورم , لم تقم باضافة الخاصية name لأي حقل , كيف سوف نقوم باستقبال البيانات في الواجهة الخلفية اذا لم تضع الخاصية name , لاحظ 
<input class="form-control @error ('first_name') is-invalid @enderror " id="first_name" type="text" value="{{ old('first_name') }}" placeholder="{{__('radix.Enter your first name')}}" required autocomplete="first_name" /> لا يوجد خاصية name , أرجو منك اضافتها كالتالي لكل حقل
<input class="form-control @error ('first_name') is-invalid @enderror " id="first_name" type="text" value="{{ old('first_name') }}" placeholder="{{__('radix.Enter your first name')}}" required autocomplete="first_name" name="first_name" ^^^^^^^^^^^^^^^^^ /> قم باعطاء كل حقل الاسم الخاص به , لتتعامل مع لبيانات المرسلة في الواجهة الخلفية, ثم تأكد من الكود الخاص بالتحقق من البيانات في المتحكم الخاص بتسجيل عضو جديد في المسار التالي
App\Http\Controllers\Auth\RegisterController; وجرب عملية التسجيل مرة أخرى

من الممنك أن تقوم باستخدام الخاصية data مع العنصر form , فمثلا أن يكون الاسم data-test كالتالي
<form data-test="<?php echo $thread['thread_id'] ;?>" class="test" action="javascript:added(); return false;" novalidate> ثم في كود jquery 
$('.test').on('click', function (event) { var id=$(this).data('test'); }); في كود jquery استخدمت الكائن event الذي يمتلك معلومات عن العنصر الذي تم الضغط عليه , من المعلومات حصلت على قيمة الخاصية data-test , قيمة الخاصية data-test تحتوي على id الخاص ب thread الذي تم الضغط عليه , وبناء عليه يمكنك القيام بالعمليات المختلفة لعنصر واحد فقط ,
هناك طريقة أخرى , نقوم بعمل حدث على العنصر form اسمه onClick ونقوم بتمرير معاملات لهذا الحدث كالتالي 
<form onclick="testFunction('<?php echo $thread['thread_id'] ;?>')" class="test" action="javascript:added(); return false;" novalidate> في الحدث onClick يقوم بتنفيذ الدالة التي اسمه testFunction ومررت الى الدالة معامل واحد وهو معرف id الخاص  ب thread , ثم في كود جافاسكربت يمكنك الحصول على المعرف id الذي مررته كالتالي
function testFunction(id) { console.log(id) } سوف يتم طباعة المعرف الذي تمريره , يمكنك القيام بأي عملية تريدها

العكس تماما, يوجد في الأكاديمية 6 دورات وهي كالتالي
دورة علوم الحاسوب دورة تطوير واجهات المستخدم دورة تطوير التطبيقات باستخدام JavaScript دورة تطوير تطبيقات الويب باستخدام لغة PHP دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب دورة تطوير تطبيقات الويب باستخدام لغة Ruby يوجد ثلاثة دورات في مجال الباك اند , وهي البرمجة باستخدام javascript والتي سوف تتعلم فيها أساسيات لغة JavaScript وأساسيات React.js أساسيات Node.js الي تستخدم في مجال الباك اند وهناك العديد من الاشياء الأخرى التي سوف تتعلمها من خلال الدورة
الدورة الثانية لباك اند هي دورة php التي سوف تتعلم خلالها أساسيات لغة PHP وأساسيات إطار العمل Laravel والعديد من التطبيقات على اطار العمل لارافيل , وأيضا سوف تتعلم تطوير قوالب WordPress من خلال هذه الدورة
الدورة الثالثة هي لغة Ruby التي سوف تتعلم من خلالها أساسيات لغة روبي و أساسيات إطار العمل Ruby on Rails وسوف تطبق باستخدامها العديد من التطبيقات 
هذه صورة للدورات الموجودة 

يمكنك استخدام احدى الطرق التالية لفعل ذلك
 
href="/#" أو الطريقة التالية
href="javascript:;" أو الطريقة التالية
href="javascript:void(0);" من المفترض أن ذلك سوف يخفي الخطأ

يقوم NextJS بالجلب المسبق (prefetch ) افتراضيا للمسارات المرتبطة. يمكنك تعطيله لتجنب تحميل صفحات أخرى من خلال وضع قيمة prefetch  false كالتالي
<Link href="path" prefetch={false} />  

يحدث وقت البناء عند إنشاء التطبيق للإنتاج -production -. يحدث وقت التشغيل عندما يكون التطبيق قيد الإنتاج
يعمل getInitialProps على كل من العميل والخادم أثناء وقت التشغيل لكل طلب صفحة. يعمل getServerSideProps  فقط على الخادم أثناء وقت التشغيل لكل طلب صفحة. لا يتم تشغيل getStaticProps إلا أثناء وقت البناء, وهو أمر رائع للمواقع التي لا يتم تحديث بياناتها وصفحاتها كثيرا يتم تشغيل getStaticPaths فقط أثناء وقت البناء, إنه أمر رائع للعرض المسبق للمسارات مثل /blog/:id والتي تتطلب بيانات ديناميكية لاستخدامها في وقت البناء

ربما تستخدم برنامج vscode studio, المشكلة فقط تكمن في إدخال vscode studio لمسافات حول الاستيراد 
import ('../vendorjs/jquery-3.3.1.min.js') ^^^ حاول تعديلها بدون مسافة كالتالي
import('../vendorjs/jquery-3.3.1.min.js')  

هذا يحدث عند استخدام axios في Service Worker الخاص بكروم,لا يمكنك استخدام axios في Service Worker , يحاول axios استخدام xhr و http عند الحصول على المحول,ولكن لا يمكنك استخدام كليهما في Service Worker, لذا استخدم fetch, لاستخدام fetch، ضع عنوان URL في host_permissions,إذا لم تستخدم host_permissions ، فستتلقى خطأ, يمكنك أن تجعل الكود كالتالي,
في ملف Manifest.json
"background": { "service_worker": "background.js" }, "host_permissions": ["https://sample.com/*"] في ملف background.js
const res = await fetch(baseUrl + word, { method: "GET", mode: "cors", }); const txt = await res.text();  

ليست هناك حاجة لاستيراد مثل هذه الملفات. يدعم Next.js وضع الملفات في المجلد العام (assets in public). قم بإزالة تكوين webpack المخصص الخاص بك ، ثم قم بفعل التالي
<audio controls src="/sounds/bighit.mp3" /> أيضًا ، الخطأ الذي كنت تحصل عليه كان خطأ TypeError ، لإصلاحه يمكنك محاولة:
declare module "*.mp3" { const content: string; export default content; }  

تأكد من أنك تستخدم الأمر build الصحيح في ملف package.json, تحتاج الى تغيير السطر التالي
"next build && next export" ليكون كالتالي
"build": "next build" يمكنك حذف الجزء 
&& next export أدى هذا إلى تعطيل ميزة التصدير الثابت والسماح باستخدام pages/api عند تشغيل الأمر
yarn start  

يبدو أنك تحاول وضع صورة باستخدام الخاصية background-image في ملف main.scss, وبالتالي عند معالجة ملف main.scss سوف يتم معالجة الصورة والتعامل معها كملف, أنت تستخدم حزمة file-loader لمعالجة الملفات, الخطأ لديك كالتالي 
Module not found: Error: Can't resolve 'file-loader' المشكلة أنك لم تقم بتثبيت الحزمة file-loader ولذلك يعطيك هذا الخطأ, هناك مشكلة أخرى أنك تحاول استخدام حزمة file-loader في webpack 5  ولكن في webpack 5 لست بحاجة لاستخدام محملات وحزم لمعالجة الملفات لأنها تأتي جاهزة لمعالجة الملفات, يمكنك الاكتفاء بكتابة الكود التالي
rules: [ { test: /\.(jpe?g|png|gif|svg)$/, type: 'asset/resource', }, ]  

اعتقد أنك تستحدم Webpack 5 وبالتالي أنت لست بحاجة الى استخدام أدوات تحميل مثل "url-loader" أو "file-loader" في Webpack 5 , لأن Webpack 5 يأتي بشكل جاهز لمعالجة الملفات, أنت قمت باستخدام محمل file-loader وبالتالي قام Webpack بانشاء صورتين , الصورة الأولى من محمل ويباك الجاهز والصورة الثانية من محمل file-loader, لحل المشكلة يمكنك استخدام التالي
rules: [ { test: /\.(jpe?g|png|gif|svg)$/, type: 'asset/resource', generator: { // إضافة تجزئة إلى اسم الملف filename: 'images/static/[name].[hash][ext]', }, }, ]