محمد عاطف17

هذا الكود بعد التعديل $(document).on("click", ".show-image-modal", function(){ if ($(this).data('type_media') === "video") { $("#video_src").attr("src", $(this).data('video_url')); $("#image_src").hide(); $("#view_media_card_footer").show(); } else { $("#view_media_card_footer").hide(); $("#image_src").show(); $("#image_src").attr("src", $(this).data('image_url')); } $("#image_modal").modal("show"); });

اذا الكود الخاص بالصورة يصبح كالتالى $(document).on("click", ".show-image-modal", function(){ if (item.dataset.type_media === "video") { $("#video_src").attr("src", item.dataset.video_url); $("#image_src").hide(); $("#view_media_card_footer").show(); } else { $("#view_media_card_footer").hide(); $("#image_src").show(); $("#image_src").attr("src", item.dataset.image_url); } $("#image_modal").modal("show"); }); والكود الخاص بالخريطة يصبح كالتالى $(document).on("click", ".show-map-modal", function(){ var location = $(this).data('location'); // الحصول على قيمة اسم الموقع var lat = parseFloat($(this).data('latitude')); // الحصول على قيمة خط العرض var long = parseFloat($(this).data('longitude')); // الحصول على قيمة خط الطول function showMap(lat, long){ var coord = { lat:lat, lng:long}; map = new google.maps.Map(document.getElementById("map"), { center: coord, zoom: 12, scrollwheel: true, }); // Create an info window to share between markers. const infoWindow = new google.maps.InfoWindow(); const marker = new google.maps.Marker({ position: coord, title: location, map, optimized: false, }); marker.addListener("click", () => { infoWindow.setContent(marker.getTitle()); infoWindow.open(marker.getMap(), marker); }); $('#location').val(location); } showMap(lat, long); $("#map_modal").modal("show"); });

هل يمكنك ارسال الكود الخاص بفتح ال modal . اعتقد انك تقوم باستخدام event Listener على ال class show-map-modal وعند الضغظ عليه تقوم بفتح ال modal . اذا كان هذا ما تقوم به فانك عندما تقوم باضافة بيانات جديدة او حتى التنقل بين الصفحات فان livewire يقوم بحذف جميع العناصر واعادة بنائها مرة اخرى وبذلك يتم حذف ال event Listener وهناك حلين لهذه المشكلة . اولا الا تضع ال event Listener على العنصر ولكن على ال document وبذلك اذا حدث اى event click سوف يتم فتح ال modal اذا كان العنصر الذى تم الضغط على يحتوى class show-map-modal $(document).on("click", ".show-map-modal", function(){ // هنا نقوم بتنفيذ شيفرة فتح ال modal }); والطريقة الثانية هى استخدام wire:click وتنفيذ الدالة التى تقوم بفتح ال modal

مرحبا . نعم ان المقال لا يزال يتوافق حتى الان الى اصدار لارافيل 10 حيث انه يقوم بشرح طريقة التعامل مع الصور وحفظها فاذا قمت فقط بفهم الطريقة فستستطيع تنفيذها على اى اصدار لارافيل . ولكن يجب ان تحذر من عدة نقاط . اولا ان بعض الحزم قد تم هجرها ومن الممكن الا تعمل على بعض اصدارات لارافيل مثل laravelcollective/html و patricktalmadge/bootstrapper فمن الافضل الا تقوم بثبيتهم وقم بانشاء ملفات الواجهة الامامية فقط بعناصر html دون استخدام عناصر هذه الحزم ايضا حزمة intervention/image من الافضل تثبيتها عن طريق هذا الامر ولا تستعمل الذى فى المقال لانه يقوم بتثبيت الحزمة التى تتوافق مع اصدار لارافيل 5 . composer require intervention/image وايضا حاول الالتزام باوامر وطريقة كتابة شيفرة لارافيل حيث تم تعديل معظم المصطلحات من لارافيل 5 وصولا الى لارافيل 10 مثل هذا الكود Route::resource('marketingimage', 'MarketingImageController'); // laravel 5 Route::resource('marketingimage', MarketingImageController::class); // laravel 10 ستجد الفرق بين الاثنين من طريقة الكتابة وهذا السطر يعمل جيدا اذا لم تقم بتعديله ولكن من الافضل تعديله ليتوافق مع لارافيل 10. ومن الافضل لك حتى تتعلم طريقة التعامل مع الصور هو فقط فهم الشرح و كتابة الشيفرة بمعرفتك انت ولا بئس اذا حاولت نسخ بعض الاكواد من المقال ولكن الافضل ان تحاول بنفسك شكرا لك

هل يمكنك ارسال جزء الكود الخاص ب lightgallery وايضا الجزء الخاص بالحدث refreshComponentx

نعم هناك طريقة فى لارافيل تستطيع ان تضيف بيانات جديدة فى جملة واحده فقط دون الحاجة الى حلقة مكررة. اولا فى كود ال html يمكنك اضافة inputs لها نفس الاسم وتنتهى باقواس المصفوفة مثل هذا الكود <input type="text" name="city[0][name]"> <input type="text" name="city[0][code]"> <input type="text" name="city[1][name]"> <input type="text" name="city[1][code]"> <input type="text" name="city[2][name]"> <input type="text" name="city[2][code]"> هنا ستجد اننى قمت بكتابة 6 مدخلات لنشرح الكود معا. فى جميع المدخلات ستجد انى قمت بتسميتهم ب city[index][attribute] ستجد ان ال index هو رقم العنصر فى المصفوف وال attribute هو الخاصية لهذا العنصر لنفرض ان المدينة لها اسم و كود مختصر لها . اذا كما فى الكود المرفق اول عنصرين هما لاول مدينة و هو الاسم لها و الكود الخاص بها. وهكذا اذا اردت اضافة اكثر من مدينة ساقوم باضافة عنصرين اخرين مع التاكد من تغير ال index لها . هكذا قمنا بالانتهاء من الواجهة الامامية. لنبدا بجزء الواجهة الخلفية . فى ال controller الخاص بلارافيل فى ال request سنجد انه يوجد مصفوفة اسمها city قد تم ارسالها من الواجهة الامامية ولنرى محتوى هذه المصفوفة معا. $city = $request->city; /* [ ['name'=>'مدينة 1', 'code'=> 'c1'], ['name'=>'مدينة 2', 'code'=> 'c2'], ['name'=>'مدينة 3', 'code'=> 'c3'], ] */ ستجد انها تتكون من مصفوفة رئيسية بداخلها عدة مصفوفات بعدد المدخلات التى قمت بادخالها فى الواجهة الامامية . لناتى لطريقة ادخالها فى قاعدة البيانات . يمكنك استخدام دالة insert لاضافة جميع هذه البيانات بطريقتين سواء كنت تستخدم Eloquent او Query Builder كما فى المثال التالى. City::insert($city); // Eloquent DB::table('cities')->insert($city); // Query Builder

لا شكر على واجب. واياكم اللهم آمين

هناك خطأين لديك فى الكود . اولا فى ملف ال script.js حين تغير ال layout الى ال flex يجب ان يتم استدعاء AOS.refresh() حيث ان ال flex يكون غير مرئى فى بداية تحميل الصفحة ولذلك لا يتم تحميل ال animation حيث يجب ان يكون ظاهر فى الصفحة حتى يعمل جيدا . ثانيا فى ملف ال style.css انت تضع ال opacity ب 0 فى ال flex layout للصور لذلك ال animation لا يعمل جيدا يجب ان تحذف ال opacity وتجعلها فقط ب 0 اذا لم يكن قد حدث اى animation . فى سطر 83 فى ملف ال Script.js قم بتبديل الدالة بهذا الكود //add active class to the layout style const layouts=document.querySelectorAll('.layout span') layouts.forEach(layout=>{ layout.addEventListener('click',function(){ if (this.classList.contains('active')) { return; } const dataLayout=this.dataset.layout; //add active for layout btns layouts.forEach(layout =>{ layout.classList.remove('active'); }) layout.classList.add('active'); // Hide all layout containers const layoutContainers = document.querySelectorAll('.masonry-gallery'); layoutContainers.forEach(container => { container.classList.remove('active'); }); //Remove the animation class from the images,videos (media) mediaElements.forEach(function (media) { media.classList.remove('fade-in-up'); }) // Show the layout container with the corresponding layout attribute const activeContainer = document.querySelector(`.masonry-gallery[data-layout="${dataLayout}"]`); activeContainer.classList.add('active'); //Get the images, vidoes of the active layout const images = activeContainer.querySelectorAll('.masonry-image'); images.forEach(function(img){ // img.classList.add('fade-in-up'); // setTimeout(function(){ // img.classList.remove('fade-in-up'); // // img.classList.add('show') // },1000) }) if(activeContainer.classList.contains('grid')){ masonry.layout(); } else{ AOS.refresh(); } }) }) وفى ملف ال style.css سطر 426 قم بتبديله بهذا الكود .gallery-items .flex.masonry-gallery .masonry-image{ /* width: 18rem; */ width: 100%; height: 25rem; margin-right: 0.85rem; /* transition: all 0.3s ease-out; */ /* animation: fadeInUp 1s ease-out forwards ; */ } .gallery-items .flex.masonry-gallery .masonry-image:not(.aos-animate) { opacity: 0; } وقد قمت برفع الملفات لتستخدمها اذا اردت. ولكنك ستجد مشكلة اخرى وهى انه يحدث delay فى ال animation وهذا سببه عدة اخطاء فى الكود من ال style و ال js ولكن حاليا ال animation تعمل جيدا. واذا كان هناك اى شئ اخر فلتخبرنى script.js style.css

الخطأ هنا <input type="radio" id="starter" name="plan" value="starter"> حتى يعمل ال radio input كما تريد يجب ان يكون لديهم نفس الاسم (name) ويبدو هنا انك قد اخطات فى كتابة الاسم حيث الاثنين الاخرين لديهم اسم palan يجب على الثلاثة ان يكون لديهم نفس الاسم . لذلك قم بتوحيد الاسماء الثلاثة وسيعمل جيدا

نعم بالفعل كلمة not تقوم بتبديل القيمة الحالية من True الى False والعكس

ان السؤال المطلوب انه اذا كان العنصر يساوى flick فيجب ان تغير القيمة الحالة التى تقوم بارجاعها . يخبرك انه فى بداية البرنامج يجب ان تقوم بارجاع true واذا ظهرت كلمة flick يجب ان تبدل true ب false اذا ظهرت كلمة flick مرة اخرى يجب انت تبدل false ب true مرة اخرى . ما تقوم به انت هو انك تبدل true ب false مرة واحدة فقط واذا ظهرت كلمة flick مرة ثانية لا تقوم بتبديل false ب true boo = True for row in range(len(arr)): if 'flick' in arr[row]: boo = not boo arr[row] = boo else: arr[row] = boo print(arr) لذلك نقوم باستخدام هذا السطر boo = not boo وهذا السطر يقوم بتبديل قيمة boo الحالية فان كانت boo تساوى True سيقوم بتبديلها ب False و العكس اذا كانت ب False فسيقوم بتبديلها ب True

نعم ان عنصر ال br ليس مهم هو فقط يفصل بين العناصر او النصوص ويقوك بعمل سطر جديد. و يمكنك استبداله بخاصية ال margin فى ال css مثل هذا الكود هنا نقوم .class { margin:20px 0; // هنا قمنا باضافة فواصل بين العناصر من الاعلى والاسفل بقيمة 20 بيكسل } ويمكنك اضافة هذا ال class للعنصر الذى تريد اضافة فواصل له . يمكنك ايضا استخدام خاصية ال display و هى تسمح لك بتغير طريقة عرض العنصر وان العناصر ذات الخاصية display : inline فهى لا تضيف اسطر جديدة وتجعل جميع العناصر فى سطر واحد ولتغير ذلك تستخدم display: block هكذا <input type="text" style="display: block"> هنا قمنا باضافة ال display لهذا العنصر وبذلك سيفصل بينه وبين العناصر التى قبله والتى تليه بسطر جديد. اما اهمية ال form فهى مهمة جدا لارسال البيانات الى الخادم (server) وحفظها فى قاعدة البيانات حيث لا يوجد اى موقع حاليا لا يحتوى على ال form مثلا صفحات تسجيل الدخول والاشتراك هذه عبارة عن form فبدون هذه ال form لن تسطيع ان ترسل هذه البيانات الى ال server

لم يظهر ال user name لانك فى اول عنصر label لم تضع بينه النص التى تريده ان يظهر ولكن وضعته بين الاقواس وقد اعتبر انه خاصية وليس نص وهذا هو الحل <label for="user name">user name</label>

بالاضافة للحل السابق اذا قمت بتغير اسم الجدول و قمت بتبديل اسم العمود الخاص بالايميل او الباسورد فسيقابلك مشكلتان. اولا اذا قمت بتغير اسم الجدول فيجب ان تنشأ model جديد ليمثل الجدول الجديد . يمكنك انشاء ال model عن طريق هذا الامر , لنفرض ان الجدول الجديد يسمى students . php artisan make:model Student او يمكنك استخدام الملف الخاص بلارافيل User اذا لم تكن تريد ان تنشأ ملف جديد . ويمكنك كتابة هذا السطر فى الملف وسيتعامل ملف ال User مع الجدول الجديد protected $table = 'students'; اذا كنت تستخدم laravel Authentication وقمت بتغير الحقل email فسيجب ان تقوم بتغيرات فى دوال ال login و ال register ليستخدمو الحقل الجديد

اولا اذا قمت بعمل comment لسطر ال return فى الدالة minpositive فان الكود لن يعمل وسيظهر لك خطأ لانك قد قمت بتعريف الدالة minpositive انها تقوم بارجاع رقم int و فى داخل الدالة لا تقوم بارجاع اى قيمة لذا سيظهر لك خطأ . ثانيا لتقوم بارجاع القيمة بطريقة dynamic لتقم باستخدام هذا الكود int minpositive(int nums[], int size) { int check = nums[0]; for (int i = 0; i < size; i++) { if (nums[i] > 0 && abs(check) > nums[i]) { check = nums[i]; } } if (check < 0) return 0; return check; } اولا نقم بتعريف المتغير check باول قيمة فى المصفوفة (array) لانك اذا لم تقم بذلك سيحدث خطأ لنفترض انك قمت بتعريف check لياخذ قيمة 1 و ان ال array لا تحتوى على عنصر رقم 1 وان اصغر قيمة هى مثلا 5 كما فى المثال الخاص بكم ستجد ان القيمة التى سيتم ارجاعها من هذه الدالة هى 1 وهذا خطأ لذلك قمنا باخذ اول قيمة فى المصفوفة ثانيا ستجد انى قمت باضافة abs(check) بدلا من check لان اول قيمة فى المصفوفة من الممكن ان تكون سالبة لذلك ستكون اصغر من اى قيمة موجبة اخرى ولن يتحقق الشرط لذلك قمنا باضافة ذلك. اخيرا ستجدنى قمت باضافة هذا السطر if (check < 0) return 0; لانه فى حالة ان المصفوفة كانت جميعها ارقام سالبة فيجب ان يقوم بارجاع 0

وعليكم السلام ورحمة الله وبركاته يبدو انه لديك إضافة (extension) تقوم بتشغيل الاختبار تلقائيا عند الحفظ . هل يمكنك ارسال صورة بالاضافات لديك واخبارى بلغة المشروع الذى تعمل عليه . اذا كنت لا تريد ان تقوم بتشغيل الاختبار حاليا يمكنك ايقاف هذه الخاصية كالتالى :- اذهب الى الاعدادات (settings) 2. قم بكتابة كلمة openTesting فى شريط البحث ثم قم باختيار neverOpen من القائمة وهكذا لن تظهر مرة اخرى

ان مطور ال full stack من الممكن ان يكون لديه خلفية بسيطة عن css و التنسيقات ولا يجب ان يكون محترف او متمكن فيهما حيث ان التصميم يقوم بعمله ال UI/UX Designer وهى وظيفة مختلفه تماما عن ال full stack وال html وال css ايضا لهم مبرمج خاص بهم فيجب على مطول ال full stack ان تكون لديه خلفية بسيطه حيث انك ستقوم بربط الصفحات الثابته static بالرياكت والباك اند فلعمل هذه الوظيفة ينبغى ان تكون لديك خلفيه بسيطه وليس ان تكون متمكن فيهما. انا مثلا اعمل ك full statck و عملى هو ان اقوم فقط بتركيب القالب على المشروع الخاص بى حيث يقوم اولا ال UI/UX فى الشركة بالتصميم ثم يقوم بارسالها للمبرمج الخاص بال html و css وعند الانتهاء يعطينى القالب واقوم بتركيبه سواء على رياكت او انجيولار وانا اقوم بربط الباك بالفرونت وهذه هى وظيفة ال full stack . واما اذا كنت تريد ان تتعمق فى ال css والتصميم فلا مشكلة حيث ان هذه هى خبرات اضافيه لل full stack وبالطبع ستعطيك افضلية فى الوظائف

عند استخدام الحقول الخاصة لرفع الملفات فى livewire فانه يتعامل معها باختلاف عن الحقول النصية . حيث يقوم livewire برفع الملفات تلقائيا عن اختيار الملف فى مجلد مؤقت ويقوم ايضا بعمل validation عليه للتاكد من انه تم ادخال ملفات صحيحة كما قمت بتعريفها فى القواعد (rules) ويوفر livewire لك ايضا دالة تستخدمها لتعرض للمستخدم الصورة التى تم رفعها ويمكنك استخدامها كالتالى . @if ($contract) <img src="{{ $contract->temporaryUrl() }}"> @endif ولحل هذه المشكلة لديك يمكنك استخدام wire:ignore على العنصر الخاص بالخريطة مثل الكود التالى . <div wire:ignore> {{-- هنا العناصر الخاصة بالخريطة --}} </div> وسيعمل معك جيدا ان شاء الله حيث يقوم wire:ignore بتجاهل هذا العنصر ولا يقوم بتحديثه مع تحديث ال component

ان ال html و ال css هى ليست لغات برمجة هى عبارة عن لغة توصيف (markup language) . تستخدم ال html في انشاء هيكل الصفحة فقط من عناصر و نصوص . أما ال css تستخدم فقط لتعديل تصميم وشكل واماكن العناصر اللتى تم انشائها باستخدام ال html استخدام ال html و ال css فقط لا يفيد حاليا الا اذا اردت ان تنشئ موقع ثابت (static) غير متغير من شخص الى اخر وهو غير مطلوب كثيرا. اما ال javascript فهى لا غنى عنها حاليا حيث تمكنك من التلاعب بالعناصر فى الصفحة وجعل الموقع اكثر ديناميكية من حذف وتعديل واضافه عناصر و نصوص حتى بعد تحميل الصفحة . فيجب عليك استخدام الثلاثة اذا اردت ان تكون مطور واجهات امامية (front end) . اما اذا لم تكن تريد ان تتعامل مع ال html وال css فيمكنك من ان تصبح مطور واجهات خلفية (back end) تتعامل من السيرفرات وقواعد البيانات فيمكنك مذاكرة لغة برمجة php و اى اطار عمل خاص بها سواء ووردبريس او لارافيل

لا للاسف لا يوجد بيانات مجمعة لمراكز المدن . يمكنك البحث عن المراكز الخاصة بالدولة التى تريدها منفصلة و لكنك ستجد صعوبة فى العثور عليها

نعم يوجد لكنها ليست package هى عبارة عن ملف sql خاص بقاعدة البيانات يمكنك تشغليه على السيرفر الخاص بك ويصبح لديك جدول خاص بالدول وجدول خاص بالمدن وهى تدعم اللغه العربية والانجليزية والفرنسية https://github.com/arabnewscms/countries-and-cities-list-with-three-language/tree/master يمكنك تحميل ملف countries_db.sql ورفعه على السيرفر الخاص بك او يمكنك تحميل مجلد laravel_version وهو يحتوى على ملفات ال migrations و ال seeders و تشغيلهم عن طريق ال command الخاص بال artisan php artisan migrate php artisan db:seed --class=CitySeeder php artisan db:seed --class=CountrySeeder

وعليكم السلام ورحمة الله وبركاته. إن ال csrf token هو token مخصص للعنواين التى تقوم باضافة او تعديل او حذف بيانات (POST,PUT,PATCH,DELETE) لكن العناوين الخاصة باحضار الصفحات او البيانات (GET) لا تحتاج الى csrf token . حيث أن ال csrf token هو مخصص للتاكد من الشخص الذى قام بارسال هذا الطلب هو من على موقعك وليس من اى مكان اخر للحفاظ على امان البيانات . لذلك يجب عليك ان تجعل كل الroutes الخاصة بال datatable هى من نوع GET وليس POST. وهل يمكنك ارسال ال route الخاص بال datatable وايضا كود ال ajax كاملا

بعد تفعيل Geocoding API يمكنك استخدام هذه الدالة للحصول على اسم العنوان function geocodeLatLng(lat, lng) { var latlngObj = { lat: lat, lng: lng }; geocoder.geocode({ 'location': latlngObj }, function (results, status) { if (status === 'OK') { if (results[0]) { return results[0].formatted_address; } else { console.log('No results found'); } } else { console.log('Geocoder failed due to: ' + status); } }); } ليصبح ملف الجافا سكريبت كالكود هذا let map; function initMap() { function geocodeLatLng(lat, lng) { var latlngObj = { lat: lat, lng: lng }; geocoder.geocode({ 'location': latlngObj }, function (results, status) { if (status === 'OK') { if (results[0]) { return results[0].formatted_address; } else { console.log('No results found'); } } else { console.log('Geocoder failed due to: ' + status); } }); } map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, scrollwheel: true, }); let geocoder = new google.maps.Geocoder(); const uluru = { lat: -34.397, lng: 150.644 }; let marker = new google.maps.Marker({ position: uluru, map: map, draggable: true }); google.maps.event.addListener(marker, 'position_changed', function (e) { let lat = marker.position.lat() let lng = marker.position.lng() let locationName = geocodeLatLng(lat, lng); $('#latitude').val(lat) $('#longitude').val(lng) document.getElementById('latitude').dispatchEvent(new Event('input')) document.getElementById('longitude').dispatchEvent(new Event('input')) }) google.maps.event.addListener(map, 'click', function (event) { pos = event.latLng marker.setPosition(pos) }) } هل قمت بتفعيل ال Billing فى المشروع الخاص بك فى جوجل ؟ حيث لن يعمل دون تفعيل ال billing account

هل قمت بتفعيل Geocoding API فى console cloud الخاص بجوجل ؟

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