محمد_عاطف

وعليكم السلام ورحمة الله وبركاته . ان ال HTTP response status code 500 تعنى انه يوجد خطأ فى الخادم اى انه حدث مشكلة لديك فى تنفيذ الكود على الخادم . لذلك تاكد من ارسال البيانات بشكل صحيح و ان تكون الشيفرة الخاصة بحفظ البيانات صحيحة . واذا ما زالت المشكلة موجوده فيجب توفير الكود الخاص بحفظ البيانات لنرى اين توجد المشكلة ونستطيع ان نساعدك

ليس تماما فان وظيقة مصمم البرمجيات مختلفة عن مطور البرمجيات فهو لا يكتب اى شيفرات هو فقط ملم بعلم التصميم مهما كانت لغة البرمجة وليست لغه معينه . ولذلك اذا لم تكن تريد ان تكون مصمم برمجيات فلا يجب تعلم المجال بشكل موسع بل يكفى تعلم الاساسيات و النظريات التى تساعدك على فى مهنة تطوير البرمجيات مثل : قواعد البيانات هياكل بيانات "Data Structure" نماذج التصميم "Design Patterns" الخوارزميات "algotherms" OOP. ولكن مع الخبرة ستجد نفسك مع الوقت ملم اكثر بتفاصيل التصميم و انشاء المعماريات ولكن فى بداية مسيرتك المهنية انصحك بعدم الغوص عميقا فى تلك المفاهيم حيث من الممكن ان تسبب لك الاحباط و الملل بل يجب ان تاخذ مسيرتك تدريجيا

توجد عدة اسباب لتلك المشكلة و لنتابع الخطوات معا لنرى اين توجد المشكلة . اولا يجب اغلاق xampp تمام حيث نضغط على زر Quit فى اقصى اليمين اسفل القائمة . والان لنحاول فتح البرنامج مرة اخرى كمسؤول run as administrator ولنحاول مرة اخرى تشغيل mysql . واذا لم يعمل فمن الممكن ان المنفذ (port) 3306 مستعمل من قبل برنامج اخر . لذلك لنحاول تغير المنفذ عن طريق فتح ملف my.ini والبحث عن السطر التالى port = 3306 ونقوم بتغيره الى 3360 مثلا port = 3360 ونقوم باعادة تشغيل الخدمة مرة اخرى . ويمكنك التاكد من ان المنفذ مستعمل ام لا عن طريق الضغط على زر Netstat فى xampp وسيقوم بفتح ناقذة للمنافذ المستخدمة والتاكد من عدم استخدام المنفذ الحالى 3306 واذا لم تعمل فهل يمكنك ارسال ملف تقارير الاخطاء لنرى اين تكم المشكلة

وعليكم السلام ورحمة الله وبركاته . ليس المقصود بتصميم البرمجيات هو تصميم الواجهة الامامية باستخدام html و css وjs بل هو علم كامل يقوم على عملية تحديد متطلبات البرنامج، وتخطيط هيكله من تصميم قاعدة البيانات او حتى هيكل الشيفرات ، وتصميم واجهته الرسومية، وتطوير الخوارزميات والمنطق البرمجي، بالإضافة إلى اختباره وصيانته . وان تصميم البرمجيات ليست فقط حكرا على تطبيقات الويب بل هى تشمل ايضا تطبيقات سطح المكتب او تطبيقات الهاتف وايضا الانظمة المدمجة embded systems او نظام قائم على البرمجة عموما . ووظيفة مصمم البرمجيات هى من اصعب الوظائف و تطلب مستوى متقدما فى معظم العلوم . حيث انه مطالب اولا بتحديد متطلبات العمل و انشاء خطة لتنفيذ العمل و اختباره و ايضا تصميم هيكل المشروع كاملا من بدايته الى نهايته والتاكد من ان التصميم قابل للتنفيذ وايضا للتطوير و يكون اقل تكلفة . وايضا يقوم بمتابعة سير العمل للتاكد من كل فريق يقوم بتنفيذ ما هو مطلوب

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

يبدو انك تستعمل powerShell بدلا من cmd وهذه مشكلة شائعه فى powerShell. يمكنك استخدام cmd لتفعيل البيئة الافتراضية او اتباع الخطوات التالية لحل المشكلة. اولا قم بفتح ال powerShell كمسؤل ثم ثم بكتابة الامر التالى . Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser واذا ما ظهرت لك اى رسالة قم بكتابة Y ثم اضغط enter . والان يمكنك تفعيل البيئة الافتراضية عن طريق الامر التالى .\venv\Scripts\activate واذا اردت منع تنفيذ ال scripts كما كان سابقا واعادة كل شئ كما كان يمكنك تنفيذ الامر التالى . Set-ExecutionPolicy Restricted

اولا ان ال vs code او اى IDE لا يقوم بتنفيذ الكود بل هو فقط محرر للاكواد وما يقوم بتنفيذ الكود هو ال compiler الخاص باللغه نفسها . ثانيا ان ال escaping characters تبدا دائما بالرمز "\" backslash وليس "/" ويبدوا انك قد اخطات بكتابة "n\" لذلك الصحيح هو استبدال "n/" الى "n\" وسيعمل معك . وتاكد من حفظ الملف بعد التعديل حيث من الصورة المرفقة يبدو انك لم تقم بحفظ الملف . ويمكنك الحفظ عن طريق الضغط على CRTL + S .

وعليكم السلام ورحمة الله وبركاته . لا يمكن قول أن إطار العمل django أقوى او أفضل من express.js بشكل عام، لأن لكل منهما ميزاته واستخداماته الخاصة. إطار العمل django مكتوب بلغة python ومصمم لتطوير تطبيقات الويب الشاملة بشكل سريع وفعال، مع توفير الكثير من الميزات المدمجة مثل نظام إدارة قواعد البيانات ونظام التحقق من الهوية والتوثيق. اما express.js هو إطار عمل لغة جافاسكريبت يعمل على بيئة تطوير node.js ويسمح ببناء تطبيقات الويب والخوادم بسهولة باستخدام جافاسكريبت على جانب الخادم. يتميز express.js بمرونة كبيرة وبساطة في الاستخدام، مما يجعله شائعًا لتطوير تطبيقات الويب الخفيفة والمتوسطة الحجم. ان اطار عمل django ياتى مدمجا بكثير من المميزات والخصائص مثل نظام إدارة قواعد البيانات ORM ونظام إدارة المستخدمين والتوثيق ونظام الإدارة الإدارية للموقع ويوفر الامان والحماية ضد هجمات XSS وCSRF و SQL injection. اما express.js مرن ويسمح للمطورين ببناء تطبيقات مختلفة بسهولة وسرعة حيث يتمتع بقدرته على التوسع بسهولة لمعالجة أعباء عالية من خلال نموذج غير تقليدي للمدخلات والمخرجات (non-blocking I/O) حيث لا يقوم بحجز الموارد لاشخاص فى انتظار مهمة اخرى للانتهاء بل يقوم بالانتقال لمعالجة طلب اخر وايضا توجد العديد من المكتبات التى تحتاجها وسوف تجدها متاحه وايضا لديه مجتمع كبير من المطورين.

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

قم باستبدال الدالتين handleSubmit و handleImageChange ولا اعرف لماذا تقوم برفع الصورة مرتين حاول فقط رفعها مرة واحده باستخدام api واحد فقط const handleImageChange = (e) => { const file = e.target.files[0]; setimage(file); }; const handleSubmit = async (e) => { e.preventDefault() try { const formData = new FormData(); formData.append('name',name); formData.append('pathname',pathname); formData.append('image',image); await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{ headers: { "Content-Type": "multipart/form-data", }, }) await axios.post('https://api.wesamelnagah.com/api/uplode',formData, { headers: { "Content-Type": "multipart/form-data", }, }) setname('') setimage(null) setpath('') } catch (error) { console.log(error) } } والان من المفترض ان يتم حفظ الصورة على الخادم وفى قاعدة البيانات بشكل صحيح

الخطأ هنا لديك فى كود الواجهة الامامية . قم باسبتدال الكود السابق بهذا الكود . const formData = new FormData(); formData.append('name',name); formData.append('pathname',pathname); formData.append('image',image); await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{ headers: { "Content-Type": "multipart/form-data", }, }) وتاكد من انه يتم رفع الصورة بشكل صحيح ثم اعد كتابة السطر الذى حذفته فى الخادم

قم بارجاع السطر السابق كما كان سابقا هكذا. const programmes = MainCategory({name,pathname,title, image, desc}); وقم بمحاولة رفع الصورة واخبرنى هل يتم رفعها الى الخادم ام لا فى مسار public/images/ فاذا لم يتم رفعها الى الخادم فيبدو انه توجد مشكلة لديك فى الخادم .

هذا السطر خطأ يجب ان يكون image:req.file.filename هكذا كما اخبرتك . قم بالذهاب الى public/images/ لديك على الخادم وتاكد من انه تم رفع الصورة بنجاح فاذا لم يتم رفع الصورة فان الكود السابق لن يعمل ويبدو انه يوجد خطأ يمنع رفع الصور مثل عدم وجود المسار السابق او خطأ اخر . لذلك المهم الان هو التاكد من ان الصورة يتم رفعها بشكل صحيح ام لا على الخادم

هل تم رفع الصورة فى المسار الصحيح ؟ حيث ان المكتبة multer بعد الرفع تقوم بوضع بيانات الصورة فى req.file . وهذا الخطأ يخبرك بانه لا يوجد req.file لذلك يبدو انه لا يتم رفع الصورة .

لاحظ انك فى ملف maincategoryController.js فى الدالة create حين انشاء النموذج فانت تقوم بارسال المتغير image وهو المتغير الذى يحمل الصورة وهذا خطأ حيث انك تريد حفظ مسار الصورة . ولذلك الحل هو استبدال سطر رقم 13 بالسطر التالى . const programmes = MainCategory({name,pathname,title, image:req.file.filename, desc}); حيث ان ال req.file.filename تقوم بارجاع اسم الصور الذى تم حفظه على الخادم . والان قم بتنفيذ الكود والتاكد من انه تم رفع الصورة جيدا على الخادم ومن ثم تاكد بان اسم الصورة تم حفظه فى قاعدة البيانات بشكل صحيح .

كان يجب ان تقوم بتغير اول معامل فقط هكذا formData.append("image", file); وقم بطباعة ال body فى الخادم وتاكد من ارسال الصورة بشكل صحيح

عند ارسال ملف عن طريق axios يجب وضع الملف فى formData حتى يتم رفعه الى الخادم بشكل صحيح ووضع "Content-Type": "multipart/form-data" فى ال headers . لذلك قم بتغير الدالة handleImageChange هكذا حتى يتم وضع formData . const handleImageChange = (e) => { const file = e.target.files[0]; const formData = new FormData(); formData.append("file", file); setimage(formData); console.log(file.type); }; ولكن قم باستبدال كلمة file باسم الحقل الذى تقوم باستقباله فى الخادم. وقم بتغير هذا السطر ايضا. الى الكود التالى . await axios.post('https://api.wesamelnagah.com/api/uplode',image, { headers: { "Content-Type": "multipart/form-data", }, }) والان من المفترض ان يتم تحميل الصورة جيدا على الخادم.

ان امتداد vsdx هو امتداد خاص ب Microsoft Visio وهو عبارة عن برنامج لرسم xmd و diagrams . يمكنك فتح الملف عن طريق البحث على جوجل عن diagram online و فتح اول موقع لديكى ثم وضع الملف فى الموقع وسيتم فتحه . وهذه صورة لمحتوى الملف

يجب اولا انشاء New bucket جديد على amazon s3 و الحصول على ACCESS_KEY_ID و SECRET_ACCESS_KEY لاستخدامهم فى مشروع الواجهة الخلفية . الان نذهب الى مشروع nodejs ونقوم بتثبيت هذه المكتبات . npm install @aws-sdk/client-s3 multer multer-s3 والان فى ملف app.js نقوم باضافة الاسطر التالية . const multer = require('multer'); const multerS3 = require('multer-s3'); const { S3Client } = require('@aws-sdk/client-s3'); const s3Client = new S3Client({ region: 'us-east-1', // هنا نقوم باضافة المنطفة التى قمنا بختيارها وقت انشاء bucket credentials: { accessKeyId: 'YOUR_ACCESS_KEY_ID', // هنا نقوم بكتابة key id الخاص بال bucket الذى انشأناه secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',// هنا نقوم بكتابة secret key الخاص بال bucket الذى انشأناه }, }); const upload = multer({ storage: multerS3({ s3: s3Client, bucket: 's3-bucket-name', // هنا نقوم بكتابة اسم ال bucket acl: 'public-read', //هنا نقوم بجعل الملف مرئى للجميع key: function (req, file, cb) { cb(null, Date.now().toString() + '-' + file.originalname); // هنا نقوم باضافة رقم مميز لاسم الصورة حتى لا يحدث مشاكل اذا كانت توجد صورة بنفس الاسم }, }), }); app.post('/upload', upload.single('image'), (req, res) => { let image_url = req.files[0].location; res.json({ message: 'Image uploaded successfully', "url":image_url }); }); ستلاحظ هنا فى هذا السطر let image_url = req.files[0].location فانه بعد رفع الملف بنجاح فانه يقوم بتعديل المصفوفة الخاصة بالملفات واضافة ال location الذى تم رفع الصورة فيه على aws . ولاحظ انه يقوم بارجاعه على هيئة مصفوفة لذلك استخدمنا [0] . وبعد ذلك يمكنك استخدام image_url وحفظه فى النموذج الخاص به فى mongodb وسوف يتم الحفظ على هيئة سلسلة نصية تحوى عنوان الصورة . والان فى مشروع react نضع ال form كالتالى . <form action="/upload-image" method="POST" enctype="multipart/form-data"> <input type="file" name="image"> <button type="submit">Upload</button> </form>

المشروع يعمل جيدا دون اى مشاكل ولتشغيله يجب تنفيذ الخطوات التالية . قم اولا بفتح منفذ الاوامر فى مجلد المشروع الرئيسى قم بتنفيذ هذا الامر فى ال cmd Scripts\activate ستجد الان ان البيئة الافتراضية تعمل جيدا قم بتنفيذ هذا الامر للذهاب الى مجلد المشروع cd project الان قم بتنفيذ هذا الامر لتشغيل المشروع python manage.py runserver والان من المفترض ان يعمل كل شئ جيدا . اذا ما واجهتك اى مشكلة او ظهر لك خطأ من فضلك ارفق صورة للخطأ . واذا كان هذا السؤال يخص دورة من الدورات فمن فضلك قم بكتابة سؤالك فى القسم الخاص بالتعليقات اسفل الدرس وذلك لمساعدتك بشكل افضل.

يمكنك الذهاب الى مجلد htdocs بداخل مكان تثبيت برنامج xampp وهو بشكل افتراضى يتم تثبيته على ال C لديكى على الجهاز . والتاكد من وجود مجلد المشروع regestration لديكى بداخل مجلد htdocs . واذا كان المجلد موجود كما اعتقد . فاذا المشكلة لديكى فى الكود لذلك تاكدى من انشاء قاعدة البيانات الخاصة بالمشروع وتثبيت الحزم اللازمة لتشغيل المشروع عن طريق تنفيذ الامر التالى فى منفذ الاوامر فى مجلد المشروع . composer install واذا حدث لديكى اى خطأ فى منفذ الاوامر او فى المشروع نفسه ففضلا ارفاق صورة خاصة للمشكلة حتى نستطيع مساعدتك بشكل افضل.

اذا كنت تعمل على برنامج vs code يمكنك تفعيل خاصية الخفظ التلقائى . قم بالضغط على قائمة file ثم قم باختيار auto save هكذا

هل يمكنك ارسال صورة لتنفيذ الامرين والناتج عن كل امر منهما ؟ وايضا محتوى ملف python . حيث انه من المفترض ان يعمل الملف مهما كان اسمه ولكن يجب ان يكون بامتداد py. لذلك تاكد اولا ان الملف ينتهى ب py.

ما هو الخطأ الذى يظهر لكى عند الربط ؟ هل يتم ارسال البيانات الى السيرفر ام لا ؟ اعتقد ان الخطأ لديكى فى عنصر form حيث لم تقومى بكتابة الخاصية action و method الخاصة بال form حتى يتم ارسال البيانات الى العنوان الصحيح فى السيرفر . <form class="mx-1 mx-md-4" method="post" action="/register.php"> حيث انه من المفترض حين انشاء مستخدم ان تكون طريقة الإرسال هى post و حين لا يتم كتابة ال method فانها تاخذ القيمة الافتراضية get. وخاصية ال action هى العنوان على السيرفر الذى سيتم توجيه الطلب له . لذلك تاكدى اولا من كتابة هاتين الخاصيتين بشكل صحيح واذا حدث اى خطأ من فضلى ارسلى لى صورة الخطأ.

يمكنك كتابة عنوان الملف على السيرفر او اذا كان مرفوع على github فقم بنسخ العنوان الخاص به وتاكد عند الذهاب لهذا العنوان انه يوقم بارجاع البيانات على هيئة json