لوحة المتصدرين

السلام عليكم في المشروع الذي إنشأه واجهتني مشكلة وهي عدم ظهور الصور في المتصفح!!! وقمت بالتأكد من تثبيت الحزم وشيفرات ملف (web pack) وجميع الشيفرات وكل شيء على ما يرام وأيضاً حاولت البحث عن حل لهذه المشكلة ولكن لم أجد !! ما هي إحتمالات عدم ظهور الصور في المتصفح؟؟؟ وشكراً.

السلام عليكم اذ كان ملف التنسيقات (style.CSS) الموجود في المسار (src/CSS) في مجلد المشروع لا يعمل !! والحزم مثبتة وملف (web pack) بشكل صحيح ولكن لا تظهر التنسيقات !!! مع العلم أنا التنسيقات في ملف (style.scss) الموجودة في المسار (src/sass) تعمل بشكل طبيعي. فكيف يمكنني معرفة هذ المشكلة؟؟؟

السلام عليكم ورحمة الله وبركاته تحيه طيبه للجميع لدي كود يعمل بشكل جميل لختيار مجموعة من الصور من الهاتف وعرضهم للمستخدم . لكني محتاج مساعده لطريقة ربطه وجعله يقوم بتحميل هذا الصور الى قاعدة بيانات mysql من خلال مكتبة http من فلاتر import 'dart:io'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; void main() => runApp(new SingleImageUpload()); class SingleImageUpload extends StatefulWidget { @override _SingleImageUploadState createState() { return _SingleImageUploadState(); } } class _SingleImageUploadState extends State<SingleImageUpload> { List<Object> images = List<Object>(); Future<File> _imageFile; @override void initState() { // TODO: implement initState super.initState(); setState(() { images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); images.add("Add Image"); }); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( centerTitle: true, title: const Text('Plugin example app'), ), body: Column( children: <Widget>[ Expanded( child: buildGridView(), ), ], ), ), ); } Widget buildGridView() { return GridView.count( shrinkWrap: true, crossAxisCount: 3, childAspectRatio: 1, children: List.generate(images.length, (index) { if (images[index] is ImageUploadModel) { ImageUploadModel uploadModel = images[index]; return Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[ Image.file( uploadModel.imageFile, width: 300, height: 300, ), Positioned( right: 5, top: 5, child: InkWell( child: Icon( Icons.remove_circle, size: 20, color: Colors.red, ), onTap: () { setState(() { images.replaceRange(index, index + 1, ['Add Image']); }); }, ), ), ], ), ); } else { return Card( child: IconButton( icon: Icon(Icons.add), onPressed: () { _onAddImageClick(index); }, ), ); } }), ); } Future _onAddImageClick(int index) async { setState(() { _imageFile = ImagePicker.pickImage(source: ImageSource.gallery); getFileImage(index); }); } void getFileImage(int index) async { // var dir = await path_provider.getTemporaryDirectory(); _imageFile.then((file) async { setState(() { ImageUploadModel imageUpload = new ImageUploadModel(); imageUpload.isUploaded = false; imageUpload.uploading = false; imageUpload.imageFile = file; imageUpload.imageUrl = ''; images.replaceRange(index, index + 1, [imageUpload]); }); }); } } class ImageUploadModel { bool isUploaded; bool uploading; File imageFile; String imageUrl; ImageUploadModel({ this.isUploaded, this.uploading, this.imageFile, this.imageUrl, }); }

من الطبيعي أن يقابلك قليل من الدروس التي تستصعبها في البداية وذلك يحدث مع الجميع سواء في تعلم البرمجة أو أي شئ آخر لذلك قم بطرح السؤال في الدرس الخاص به فمثلاً لو هناك خاصية مصطلح أو مفهوم معين يمكنك طرح السؤال وسيجيب عليك أحد من المدربين حتى تستطيع فهم الدرس جيداً فقط قم بطرح السؤال في الدرس الخاص به فمثلاً بالنسبة لتعلم لغة برمجة لأول مرة مثل javascript كما في الدورة ستواجهك بعض المفاهيم والمصطلحات التي يظهر لك أنها معقدة ولكن هي في نهاية الأمر سهلة جداً ومع الوقت ستجد أن المصطلحات الجديدة يمكنك معرفة وظيفتها من خلال ترجمة المصطلح ولكن المطلوب فقط فهم الدرس وإن لم تفهمه بنسبة 100% ستجد أنه مع التطبيق أنك بدأت تستوعب ما كنت تستصعبه قديماً

يظهر من الصورة أنك تقومين بفتح مشروع الـ webpack عن طريق ملف الـ index بداخل مجلد dist . و هذا في الغالب سيؤدي بكل مسارات الملفات من الشكل main.css/ التي قد قمت بتضمينها تظهر على هذا النحو بعد البناء : file:///main.css و بالتالي فهي غير قابلة للوصول من الأساس و لو قمت بفتح الـ console ستجدين خطأ يخبرك أن الملفات غير موجودة . فالحل هو فتح المشروع عن طريق طباعة الأمر : npm run serve الذي سيقوم بدوره بطباعة التالي : Project is running at http://localhost:9000/ webpack output is served from / Content not from webpack is served from /path/to/some/path/project/dist wait until bundle finished: / Compiled successfully. بعد البناء بنجاح يمكنك التصفح إلى المسار الموصوف على هذا النحو : http://localhost:9000/ و سيتم إظهار كل الملفات شاملة ملفات التنسيق و السكربتات بشكل صحيح . ملاحظات : في حالة ما لم يعمل الأمر بشكل صحيح و قمت بمواجهة خطأ من هذا النوع : missing script: serve فتأكدي أن تقومي بتسجيل الأمر و إضافته إلى كائن scripts بملف package.json على هذا النحو : "scripts": { "serve": "webpack serve --mode development" }, و الان يمكنك طباعة الأمر و التصفح إلى المسار الموصوف بعد نجاح البناء , و إستعراض مشروعك بشكل عادي .

مجال تصميم صفحات الويب مختلف عن تطبيقات الجوال لذلك ستحتاج لدورتين فمثلاً يمكنك أخذ دورة تطوير واجهات المستخدم لتعلم تصميم صفحات الويب عن طريق ال html css و مكتبات ال javascript والعديد من التقنيات الأخرى التي تزيد من مستواك ك front-end developer اي مطور واجهات المستخدم أما بالنسبة لتطوير تطبيقات الجوال فيمكنك أخذ دورة تطوير التطبيقات باستخدام الجافاسكربت حيث في هذه الدورة ستتعمق في تعلم الجافاسكربت وتعلم أطر العمل المشهورة حالياً لجافاسكربت و تعلم تطوير تطبيقات الجوال باستخدام react native وتعلم ال back-end ايضاً ولمزيد من التفاصيل يمكنك الدخول لكل دورة لمعرفة الأهداف من كل دورة لتحديد الدورة المناسبة لك

مرحبا عطاف المشكلة كما هو واضح في الصورة التي أرفقتيها أن بوتستراب غير مثبتة أو انها مثبتة ولكن غير مضمنة بشكل صحيح ثانيا تثبيت كل الحزم غير كافي لعمل المشروع بشكل جيد, يجب أن تكتبي جميع الأكواد اللازمة لمعالجة كافة الملفات في ملف webpack.config.js , وأيضا تأكدي بانك تضمنين كافة الملفات في ملف index.js وتأكدي بأنك تضمنين ملف index.js بطريقة صحيحة في ملف index.html شكرا لك

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

int arrayConvert(int inputArray[], const char outputArray[], int size) { bool validity = true; for (int i = 0; i< size; i++){ if ((inputArray >= 0) && (inputArray < 128)) outputArray[i] = (char)inputArray[i]; else{ validity = false; for (int i = 0; i< size; i++) outputArray[i] = '.'; break; } } if (validity) return "Valid"; return outputArray[]; else return "Invalid"; return outputArray[]; }

بعد إرجاع الصور من الباك أند تقوم بإضافتهن إلى List images مثل ما هو موجود في الكود الخاص بك. هل ممكن ترفق جزء الإستعلام عن البيانات من الباك اند في flutter ؟

في حالة ارغب بتحميل مجموعة صور عددهم 4 صور ولكن كل هذيله الصور لموضوع واحد مثل التطبيقات التجاريه وتطبيقات نشر المواضيع كيف تكون الفكره ؟ بحيث كل الصور تكون لموضوع واحد؟ ايضا كيف ممكن نطبقها في flutter +mysql db

كل الشكر لك اخي على الافاده قمت بعمل جدول منفصل وربط الصور مع المواضيع من خلال id والامر ناجح اهلا بك اخي كل الشكر على الافاده والمقترح قمت بعمل جدول منفصل وربط الصور مع المواضيع من خلال id

يمكننا إستغلال ميزة قواعد البيانات العلائقية لتحقيق الغرض بمنطق مشابه للتالي : لنقم بإنشاء جدول للمواضيع بقاعدة البيانات و ليكن topics . نقوم بإنشاء جدول للصور و ليحتوي على مفتاح أجنبي كعمود : topic_id , يمثل عمود الـ id بجدول المواضيع . فتكون العلاقة بين جدول المواضيع و الصور one to many . طباعة وتنفيذ إستعلام لجلب الصور ذات موضوع محدد على هذا النحو : SELECT * FROM PHOTOS WHERE topic_id = 'YOUR_TOPIC_ID_HERE'; و سيسهل عرضها مباشرة عن طريق الفلاتر .

في لغة جافا، لا يمكن إعادة أكثر من قيمة من دالة (مثلا لديك تعيد سلسلة نصية و مصفوفة) يجب أن تعيد متغير واحد. والمتغير الذي تعيده دالة يجب أن يكون من نفس نمطها حيث لديك دالة تعيد متغير int و أنت تحاول إعادة سلسلة نصية أو مصفوفة وهذا لا يمكن. كما أن إعادة مصفوفة بكون بذكر اسمها بدون أقواس. لكي تعيد مصفوفة أرقام صحيحة عدل تعريف الدالة للتالي: int[] arrayConvert(.....) بإضافة الأقواس المربعة بعد int. ثم إعادة القيمة تكون: if (validity) return outputArray; كما أنه لتنفيذ تعليمتين بعد تحقيق شرط يتوجب كتابة أقواس مجعدة لتعليمة if : if (true) { do(); do2(); ... } لحل مشكلة valid أقترح حاليا طباعتها لل console: System.out.print لتصبح الشيفرة: int[] arrayConvert(int inputArray[], const char outputArray[], int size) { bool validity = true; for (int i = 0; i< size; i++){ if ((inputArray >= 0) && (inputArray < 128)) outputArray[i] = (char)inputArray[i]; else{ validity = false; for (int i = 0; i< size; i++) outputArray[i] = '.'; break; } } if (validity) System.out.println("Valid"); else System.out.println("Invalid"); return outputArray; } اقتصرت على تعليمة return واحدة و تعليمتي طباعة كأبسط حل للمشكلة. لكي تعيد قيمتين يجب أن يكون نوع الدالة مثلا: Map<String, Number> أو أن تتعلم Tuple وهذا ليس ضروري حاليا.

لتجميع عدة أسطر من جدول في قاعدة البيانات والاستعلام عنها سويا، يمكننا وضع حقل جديد للجدول باسم Topic مثلا ونضعه بنفس القيمة لكل الأسطر التي تنتي له بحيث تأخذ قيمته نص أو رقم .. وعند الاستعلام عن المجموعة نمرر في عبارة SELECT هذا الحقل مع القيمة المناسبة ل Topic ليعيد لنا الأسطر التي نريدها. SELECT * form PHOTOS where topic = 'e-commerce'; بفرض لديك 4 صرور لموضوع التجارة الالكترونية سيقوم هذا الاستعلام بجلبهم. بعد جلب روابط الصور، يمكنك تحميلهم بأي طريقة ترغب ضمن Flutter.

كيف يمكنني ان انشئ رقم مميز يبدأ من 1 لكل صف في الجدول ويتغير مع التغيير في الجدول؟ فمثلا اذا كان لدي ثلاثه صفوف 1 2 3 وحذفت الصف الثاني فيصبح الصف الثالث هو رقم 2 كنت استخدم الاي دي كرقم الصف ولكن الايدي بعد الحذف لا يبدأ من 1 مجددا php , ms sql server

مرحبا علاء هناك العديد من المشاكل التي من الممكن أن تسبب في ذلك المشكلة الأولى تعارض حزمتي file-loader و html-loader ,لحل هذه المشكلة تأكد من انك تستخدم الاصدار 1.3.2 من حزمة html-loader, يمكنك تثبيتها من خلال الخطوات التالية في ملف package.json استبدل اصدار html-loader بهذا الاصدار "html-loader": "^1.3.2", ثم قم بالامر npm i المشكلة الثانية ربما لديك مشاكل في كتابة الكود الخاص بمعالجة الصور, حاول أن يكون مثل الكود التالي { test: /\.(png|svg|jpe?g|gif)$/, use: [ { loader: "file-loader", options: { name: '[name].[ext]', outputPath: "images", } } ] }, المشكلة الثالثة تأكد من وجود الصورة في المسار الذي حددته اذا لم ينجح الامر أرجو منك ارفاق ملفات المشروع لنساعدك في حل المشكلة شكرا لك

توجد العديد من المشاكل التي يمكن لها تسبب هذا الخطأ منها عدم تثبيت ال loaders ال file-loader استخدام ال file-loader مع إصدار 2 من ال html-loader ولكن أتوقع أنك تستخدم الإصدار الثاني من ال html-loader لأن هذا الإصدار يتعارض مع عمل ال file-loader لذلك تأكد من ملف ال package.json أنك تستخدم الإصدار الأول وإن كنت تستخدم الإصدار الثاني قم بتنفيذ هذا الأمر npm i html-loader@1-D ثم بعد ذلك جرب تشغيل webpack

يمكنك إما حذف , إخفاء , تعطيل أو حتى إزالة التفاعلية من الزر بعد إستيفاء الغرض منه ( عرض الفيديو ) لتجنب المشكل من الأساس . يمكنك ذلك عن طريق التعديل إلى أحد الأكواد : <!-- حذف الزر --> <button onclick="launchVideo();$(this).remove();">افتح الفيديو</button> <!-- إخفاء الزر --> <button onclick="launchVideo();$(this).hide();">افتح الفيديو</button> <!-- تعطيل الزر --> <button onclick="launchVideo();$(this).attr('disabled', true);">افتح الفيديو</button> <!-- إلغاء تفاعلية الزر --> <button onclick="launchVideo();$(this).attr('onclick', '');">افتح الفيديو</button>

إن كنت تقصد تطبيق طريقة الكود الأول في طريقة وضع الفيديو من الكود الثاني (أي إظهار الفيديو بعد الضغط على الزر في كلتا الحالتين , الأولى و الثانية ) فيمكنك ذلك عن طريق : إنشاء الزر و إضافة حدث عند الضغط عليه : <button onclick="launchVideo();">افتح الفيديو</button> إنشاء عنصر الفيديو و تضمينه بالصفحة : <div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"></div></div></div> تعريف الدالة المسؤولة عن بدء الفيديو على هذا النحو : function launchVideo() { $(".video-youtube") .each(function(){ var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>'; $(this).replaceWith(iframe); }); } فيكون الكود كاملا على هذا النحو : <button onclick="launchVideo();">افتح الفيديو</button> <div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"> </div> </div> </div> <script> function launchVideo() { $(".video-youtube") .each(function(){ var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>'; $(this).replaceWith(iframe); }); } </script> هذا سيقوم بتضمين الفيديو بعد الضغط على الزر فقط . بنفس الطريقة فم بإضافة الزر المسؤول عن ملئ الشاشة أسفل عنصر الفيديو : <div id="demo-element"> <button id="go-button" style="background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; display: inline-block; font: 25px calibri, Tajawal, sans-serif; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap;">افتح الفيديو في كامل الشاشة</button> </div> ثم قم بإضافة التفاعلية الخاصة بالزر بعد الضغط على تشغيل الفيديو (الموصوفة في التعليق السابق) . ربما قد تحتاج بعض التنسيقات الإضافية . فيكون الكود كاملا مشابها للتالي : <style> #go-button{ background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; display: inline-block; font: 25px calibri, Tajawal, sans-serif; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap; } </style> <button onclick="launchVideo();">افتح الفيديو</button> <div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"> </div> </div> </div> <div id="demo-element"> <button id="go-button">افتح الفيديو في كامل الشاشة</button> </div> <script> // قم ببدء الفيديو function launchVideo() { $(".video-youtube") .each(function(){ var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>'; $(this).replaceWith(iframe); }); // إضافة تفاعلية لزر ملئ الشاشة setEventForGoButton(); // إضافة تفاعلية لنص الزر handleFullScreen(); } function handleFullScreen() { $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() { if(IsFullScreenCurrently()) { $("#demo-element span").text('opn'); $("#go-button").text('bak'); } else { $("#demo-element span").text('bak'); $("#go-button").text('opn'); } }); } function setEventForGoButton() { $("#go-button").on('click', function() { if(IsFullScreenCurrently()) GoOutFullscreen(); else GoInFullscreen($("#demo-element").get(0)); }); } function GoInFullscreen(element) { if(element.requestFullscreen) element.requestFullscreen(); else if(element.mozRequestFullScreen) element.mozRequestFullScreen(); else if(element.webkitRequestFullscreen) element.webkitRequestFullscreen(); else if(element.msRequestFullscreen) element.msRequestFullscreen(); } function GoOutFullscreen() { if(document.exitFullscreen) document.exitFullscreen(); else if(document.mozCancelFullScreen) document.mozCancelFullScreen(); else if(document.webkitExitFullscreen) document.webkitExitFullscreen(); else if(document.msExitFullscreen) document.msExitFullscreen(); } function IsFullScreenCurrently() { var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null; if(full_screen_element === null) return false; else return true; } </script>