Adnane Kadri

يحدث هذا لأنك أصلا تعيد كائن JSON من موجه Node في Show_Link تابع المتحكم linksController: exports.Show_Link = (req,res,next)=>{ const data = { short:req.params.id } Links.findOne(data).then(link =>{ if(!link){ res.status(404).send("ERROR") } else{ res.send({link:link.link}); ^^^^^^^^^^^^^^^^^^^^^^^^^ } }).catch(err =>{ res.status(400).send(err) console.log(err) }) } وهو الخرج الطبيعي ومن العادي ان يظهر رد كـ: فالخادم هو الأولى بعملية التوجيه، وان كان كل من الخادم والعميل يعيدان خرجا ما عن المسار id:/ فإنه سيتم اعتبار ذلك الخاص بالخادم بطبيعة الحال، لأن العميل لا يزال يحتاج حقن ملف التوجيه في المتصفح لتولي عملية التوجيه، ولحد قيامه ذلك سيحتاج من الخادم تصيير المكون الذي يتولى ذلك، فإن كان الخادم يعيد JSON فلا العميل ولا الخادم يتوصلان للصفحة الفرعية التي يصيرها العميل. وهو ما يحدث معك ببساطة. وذات المشكلة تحدث في كثير من المرات في تطبيقات SPA من مختلف التقنيات. لحل مثل هاته المشكلة،ينصح بفصل عمليتي التوجيه، ومن الأحسن تسبيق مسارات الخادم بسابقة ولتكن api/ فيكون في ملف app.js تطبيق express كـ: app.use('/api', linksRouter); ثم لنصلح المسارات المعنية في جزء العميل ولنعتبر اضافة هاته السابقة، اي في تطبيق React. في ملف Home.jsx: if(Link !=='' && Link.length > 3){ axios.post("/api/create" , data).then(links =>{ في ملف shortCut.jsx: axios.get(`/api/` + data.short) .then(links =>{ أعد البناء عن طريق تنفيذ npm run build وانقل مجلد build الى مجلد public في تطبيق express مرة أخرى. وكخطوة أخيرة تماما، سنحتاج اخبار موجه express ان يقوم بتوجيه اي طلب يختلف عن طلبيات ال api الى ملف index.html داخل مجلد public/build وذلك حتى يمكن لتطبيق react ان يحمل موجهه على المتصفح ويتولى عملية التوجيه بدلا عن express. ولفعل ذلك اضف السطر التالي في ملف app.js في تطبيق الخادم: app.use('/api', linksRouter); app.use(express.static(path.join(__dirname, '/public/build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname + '/public/build/index.html')); }); انتبه الى ترتيب تصريح الموجهات في هذا الملف، أعد تشغيل الامر npm run start على تطبيق الخادم وسيشتغل معك بشكل طبيعي.

بالطبع يمكنك البدء بتعلم PHP بعد تعلمك الأساسيات في كل من HTML، CSS وJavaScript. فهي لغة برمجة قوية وشائع استخدامها في تطوير تطبيقات الويب وتتكامل بشكل جيد مع HTML و CSS و JavaScript، ويمكن عن طريقها واضافة الى هاته الاخيرة بناء تطبيقات ويب متكاملة وشاملة.ولذلك فإذا كان هدفك الحصول على عمل في المجال، فإن تعلم PHP سيكون خطوة جيدة نحو ذلك. أما ان كنت تتسائل عن الأولى ما بين التعمق في مفاهيم الواجهة الأمامية والبدء في تعلم الواجهة الخلفية، فأرى أن الأمر لا يختلف كثيرا ويمكنك البدء بأي منهما بشكل مباشر وقد لا يكون لذلك علاقة بشكل وطيد الا في مراحل متقدمة. أما بخصوص الدورات التي تناسبك فذلك يعتمد على مستواك الحالي وأهدافك وما تريد تحقيقه من التعلم. ولكن كاقتراح، أرى أن دورتي تطوير التطبيقات باستخدام PHP ودورة تطوير التطبيقات باستخدام Javascript يتكاملان بشكل رائع في تنشئتك كمطور شامل ان كنت تركز على تحقيق ذلك كهدف. نصيحتي لك هي التركيز على تعلم المفاهيم الأساسية جيداً قبل الانتقال إلى مواضيع أكثر تعقيداً، هذا بجانب المحافظة على الممارسة العملية والتدريب المنتظم لتحسين مستواك في المجال. وأخيرا، تحلى بالصبر وبعد النظر اذ لا يوجد اصلا -لو تركز في ذاتك- ما يستوجب تسريع العملية.

مثلما أشار الزملاء فإن عملية التحقق من الادخالات على واجهة المستخدم وجهة العميل يحسن من تجربة الاستخدام بشكل عام، ويقلل من الطلبيات الفاشلة على الخادم وبدل احباطها كل مرة لسبب ما يتم ذلك دون اعادة تحديث الصفحة. ولذلك، فإنه لا يمكن فرض مقارنة بينهما وتفضيل أحدهما عن الآخر، فالمستحسن أن يكون كلاهما موجودا لتلافي حدوث اي مشكلة بمعالجة الادخالات سواءا على مستوى الواجهة الخلفية او على مستوى قاعدة البيانات، وتحسينا لتجربة استخدام المستخدم. وفي لارافيل على وجه الخصوص، وفي جزئية التحقق من البيانات على مستوى الخادم يفضل استعمال نماذج التحقق من الطلب Form Request validation لفصل منطق التحقق وتطبيق مبدأ فصل المهام، فبدل كتابة شيفرتك على نحو: /** * تخزين منشور جديد */ public function store(Request $request) { // جلب البيانات المتحقق منها $validated = $request->validate([ 'title' => 'required|min:8', 'content' => 'required|min:10' ]); // تخزين المنشور .. return redirect('/posts'); } يمكن كتابته وفق: /** * تخزين منشور جديد */ public function store(StorePostRequest $request) { // جلب البيانات المتحقق منها $validated = $request->validated(); // تخزين المنشور .. return redirect('/posts'); } اذ يكون الصنف StorePostRequest صنفا منفصلا تماما يحوي منطق التحقق على نحو: <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class StorePostRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title' => 'required|min:8', 'content' => 'required|min:10' ]; } }

لا يمكن استخدام خاصية flex-direction: column على عنصر flex عندما يصل عرض الشاشة إلى 991 بكسل أو أقل، لأن العرض يكون غير كافي لإظهار العناصر بشكل رأسي في حالتك. بدلاً من ذلك، يمكنك استخدام خاصية flex-wrap: wrap على عنصر flex الأب للسماح بانزلاق العناصر إلى أسفل الصفحة عندما يتم تصغير العرض. وبالنسبة لتصميم العرض في العرض الذي يساوي 991 بكسل، يمكنك تحديد قيم max-width للعناصر داخل الـflex لتجنب مشاكل العرض. فيما يلي مثال على كيفية تطبيق هذا الأمر: .flex-container { display: flex; flex-wrap: wrap; } .flex-item { max-width: 33%; } @media (max-width: 991px) { .flex-item { max-width: 50%; } } في هذا المثال، تم تقسيم الأصناف داخل عنصر flex إلى 3 عناصر، وتم تحديد max-width للعنصر flex-item إلى 33٪. عندما يصل عرض الشاشة إلى 991 بكسل، يتم تغيير قيمة max-width لتصبح 50٪ بدلاً من 33٪، وذلك لتجنب مشاكل العرض. جرب ذلك وأخبرنا ما ان حل ذلك مشكلتك.

أظنك تحاول تحريك المسار (path) بالاسم (wheel) باستخدام تحريك CSS، ولكن الطريقة الصحيحة لتحريك عناصر SVG هي باستخدام تحريكات (animations) SVG. اذ يمكنك استخدام العنصر <animateTransform> لتحريك المسار بشكل دائم. قم بإضافة العنصر <animateTransform> داخل العنصر <path> الخاص بـ wheel وحدد الخاصية التي تريد تحريكها (في هذه الحالة transform) والقيمة التي تريد تحريكها (في هذه الحالة translateY). على سبيل المثال: <path class="wheel" d="M123.359,79.775l0,72.843" style="fill:none;stroke:#000;stroke-width:20px;" id="wheel" > <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 72.843" dur="2s" repeatCount="indefinite" /> </path> يحب أن تحدد الخاصية attributeType كـتوصيف XML وليس CSS، والحد الأدنى الذي يجب تعيينه هو type (translate, scale, rotate أو skew). يمكنك تغيير القيمة to و dur حسب احتياجاتك. يمكنك تكرار العملية نفسها لتحريك المسار الآخر وتطبيق أي تحريكات أخرى على أي عناصر داخل الـ SVG.

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

من المستبعد استعمال كلا التقنيتين NodeJS و PHP معا في مشروع واحد، فكلاهما يتضمن تطوير نظم خلفية أو تطبيقات ويب شاملة ولا يمكن أن يشتغل احدهما مع الآخر إلا بتنسيق كبير. وعموما،يمكنك تطوير موقعك باستخدام العديد من التقنيات والأدوات المختلفة لتلبية احتياجات المستخدمين وتحسين تجربتهم على الموقع. هنا بعض الاقتراحات للاضافات التي تريد اضافتها: للبث المباشر والاتصال الصوتي: يمكنك استخدام واحدة من مكتبات الـ Web RTC أو Web Socket للقيام بالعملية، نذكر من بينها: Socket.io , PeerJS , Agora.io Wowza Streaming Engine أو Twilio أو Sinch الاستايلات: يمكنك تطبيق انماط CSS عادية لتنسيق جزئيات معينة من واجهة الموقع. الاستوري والقصة، التفاعلات على المنشورات ونشر الصور: وهي أفكار ستحتاج نمذجة وتطبيقها برمجيا. ان كنت من غير خلفية تقنية، فستحتاج الاستعانة بمتخصص للقيام بذلك. يمكنك استعمال موقع مستقل لذلك.

يمكن أن يحدث ذلك لأن بعض الفئات والأنماط في Bootstrap قد لا تكون متوفرة في الإصدار الذي تستخدمه. يجب التحقق من الإصدار الذي تستخدمه من Bootstrap والتأكد من توافق الأنماط والفئات التي تستخدمها مع هذا الإصدار. ان كنت تستعمل اي اصناف مخصصة يمكنك على كل حال استخدام أدوات المطور في المتصفح لتحديد أي توصيف CSS الذي يتم تحميله وما إذا كان يتم تطبيقه بشكل صحيح على العنصر المعني. ولكن أظنك تقصد الأصناف الأولية على نحو: bg-danger-subtle أو: bg-primary-subtle وهي أصناف بوتستراب تم اضافتها في بوتستراب 5.3 مؤخرا فقط، بحيث تعطي العناصر خلفية ذات دلالة معينة مخففة اللون او ثانوية. أمثلة: تأكد من تضمين ملف تنسيقات بوتستراب 5.3 للاستفادة منها.

نعم، لا يزال الاعتماد على روبي موجودا في كثير من أسواق العمل النشطة ولا تزال تقوم عليها الكثير من الأنظمة وأطر العمل التي تحتل حجما كبيرا من المجتمع البرمجي. خصوصا مع اطار عمل مثل Ruby on rails الذي زادها شعبية عن شعبية. وحسوب المالكة لأكاديمية حسوب نفسها تستخدمها في كثير من أنظمتها وتطبيقاتها على سبيل حسوب I/O. ولكن ان شئت المقارنة فإن لغات مثل PHP و جافاسكربت وجافا و Net. أكثر شيوعا وأكثر استقطابا للمطورين وأكثر طلبا في أسواق العمل. ان كنت لا تجد طريقك خلال المجال ككل، فسيكون من المفيد جدا الاطلاع على مقالات بهذا الخصوص من مثل:

يمكنك ايضا استخدام جافاسكربت لتحقيق ذات الغرض، يعرف العنصر بالمحدد input[type="button"] كل عنصر input من النوع button. لنضف التفاعلية: // تحديد كامل الازرار var buttons = document.querySelectorAll('input[type="button"]'); buttons.forEach(button => { // ضبط الهامش الجانبي ب 10 بكسل عند عمل هوفر button.addEventListener('mouseover', function() { button.style.marginLeft = '10px'; }); // ضبط الهامش الجانبي ب 0 بكسل عند ترك الهوفر button.addEventListener('mouseout', function() { button.style.marginLeft = '0px'; }); })

ترويسة رمز token من نوع Bearer تكون وفق السياق التالي: Bearer TOKEN_STRING_HERE انتبه الى وجود فراغ، يحتمل ان يكون ذلك ما يسبب المشكلة. يجب ايضا اضافة الرمز $ لحقن قيمة token في السلسلة النصية الموصوفة. "Authorization": `Bearer ${token }` أما ان كانت المشكلة تتعلق بـ csrf token فيجب عليك استثناء الطبقة الوسيطة التي يتم فيها فحصه من طلبية الـ API لأن هذا الأخير يعتمد بالفعل على JWT authentication وان كان يتم توزيع تطبيق لارافيل لديك كواجهة برمجية تحترم معايير REST فلا حاجة أصلا لحماية من هجمات CSRF بمعنى أنه لا حاجة أصلا من الطبقة الوسيطة المعنية. ولاستثناءها بشكل تلقائي قم بنقل تصريح المسار من ملف web.php الى ملف api.php

بجانب ما اقترح الزملاء، يمكنك استخدام واحدة من اطر عمل اختبار الواجهات الأمامية وأتمتة المتصفحات لأتمتة العملية والتحكم فيها وصيانتها بشكل أكثر نجاعة. فعملية ملئ استمارة أو ضغطة زر أو التوجيه والتأكد من كل سلوك على حدة يتم بشكل مؤتمت وعن طريق الكود. من بين أشهر الأطر على الساحة اطار JEST. فهو إطار اختبار يستخدم في تطوير البرمجيات بلغة جافاسكريبت. يُستخدم على نطاق واسع في اختبار الواجهات الأمامية لتطبيقات الويب والمكتبية مثل React و Vue.js و Angular. فهو يتيح العديد من الوظائف التي تساعد المطورين في اختبار تطبيقاتهم بشكل فعال. في ما يلي مثال بسيط: ان كانت الوظيفة sum موصوفة وفق: function sum(a, b) { return a + b; } فإننا نفترض أن حالة الاستخدام (جمع 1 + 2) سيكون خرجها هو 3. سيكون الاختبار الذي سيحمل توصيف هاته الحالة هو: describe('sum function', () => { test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3) }) }) وهذا كمثال بسيط فقط، يسع الاطار استعمال توابع أخرى أكثر تخصصية. يوجد أيضا في اطار عمل لارافيل آداة مدمجة باسم Laravel dusk تستخدم لذات الغرض، اذ تتيح للمطورين إنشاء اختبارات بسيطة ومنظمة للتحقق من سلوك تطبيقاتهم. يمكن استخدامها لاختبار العناصر الأساسية مثل النماذج والروابط والأزرار والقوائم المنسدلة وأكثر من ذلك. بالإضافة إلى أنه يمكن للمطورين اختبار العمليات العادية مثل تسجيل الدخول وإنشاء حساب جديد وغيرها. وهي آداة تتكامل بشكل رائع مع PHPunit، فإن كنت معتادا على استعماله فسيكون استعمال Laravel dusk ممتعا ومجزيا كثيرا. انظر المثال وكيف أنه يصف حالة استخدام لعنصر من الواجهة الأمامية فعليا: $browser->visit('/projects/create') ->type('title', 'هذا عنوان لمشروع يتم انشاءه الآن') ->type('description', 'هذا وصف لمشروع يتم انشاءه الآن') ->press('Submit') ->assertPathIs('/projects') ->assertSee('تم بنجاح'); أما ان كنت تقصد بمدى نجاح التصميم مدى جودته، فذلك يعتمد بدرجة أولى على معايير مرئية يفترض احترامها في طريقتك في التصميم، مثل توزيع المسافات البيضاء أو الفراغات أو التناظر وما الى ذلك.

بجانب ما اقترح الزملاء، يمكنك تصريح الخاصية hidden في وسم audio لعمل ذات الفكرة: <audio src="audio.mp3" controls hidden></audio> العنصر <audio> في HTML

لا يتم قبول تسجيله في قاعدة البيانات لأن القيود المفروضة على عنوان البريد الالكتروني واسم المستخدم تفترض أن يكونا فريدين unique وذلك بحسب توصيفك لها في ملف النموذج User.js، أما بالنسبة للمشكلة التي تحدث فجرب تخصيص أسماء الحقول في الكائن المسند لأنموذج User const newUser = new User({ username: newUsername, email: email, password: passwordHash, name: name }) يحتمل أن هنالك مشكلة من الأساس في تسجيل المستخدم أول مرة.

تحدث مثل هاته المشكلة في الغالب عند محاولة تشغيل التطبيق على جهاز أو محاك يحتوي بالفعل مشكلة في عملية توقيع الشهادة الرقمية للتطبيق. ولذلك حاول أولا إضافة مفتاح للتطبيق من خلال الأمر تنفيذ الأمر التالي في طرفية أندرويد استديو لديك: keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 انتبه الى تنفيذ هذا الامر يكون في مجلد bin في مسار تثبيت JDK الخاص بك وليس في أي مسار، فسيجب التنقل اليه أولا: cd ./android/app/ في حالة استمرار المشكلة، قم بالتحقق من: تفاصيل keystore المستخدم في مشروع الأندرويد، مثل اسم الملف وكلمة المرور واسم المفتاح، فإذا كان keystore غير موجود على سبيل المثال، فيجب انشاءه بطريقة الصحيحة. قم بإعادة بناء مشروع الأندرويد باستخدام أحدث إصدار من أدوات التطوير، أي حاول تحديث جميع المكتبات من خلال android studio وعمل flutter upgrade قم بتشغيل Android Studio كمسؤول (Run as Administrator)،ثم قم بإعادة بناء المشروع. قد يمكنك الاستفادة أيضا من هذا النقاش:

عن نفسي، أحب ضبط أحد البعدين دون الآخر : العرض أو الارتفاع، فيكون الآخر تلقائيا لأنه سيحترم تلقائيا معيار الأبعاد المتزنة aspect ration وهو بشكل مبسط نسبة أحد البعدين من الآخر. فإن كان ارتفاع في الصورة الأصلية يساوي 1000 بكسل وعرصها 500 بكسل فإن نسبة الطول من العرض هي 1/2 ولذلك فإن ضبط الارتفاع كـ 500 بكسل سينتج عنه تلقائيا تخفيض العرض الى 250 بكسل لأن حاصل ضرب 500 في 1/2 هو 250. 500 * 1/2 = 250 القيد الآخر الذي يمكنك فرضه هو بإستعمال الخاصية object-fit اذ يمكن تعيين قيمة "contain" للحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة والحفاظ على جودتها، أو اسناد القيمة "cover" لتعبئة العنصر بالكامل ولكن بدون تحويل نسبة العرض إلى الارتفاع، وكلاهما يحفظ الصورة من التشتت. استفد أكثر من الأجوبة على هاته الأسئلة: https://academy.hsoub.com/questions/12284-تنسيق-حجم-الصور/

بالطبع فإنه هذا يخضع بدرجة أولى لمسار حفظ هاته الصور في قرص التخزين الخاص بخادمك، فإن كنت تستخدم قرص التخزين المحلي في لارافيل فإنك ستحتاج أولا انشاء الوصلة الرمزية عن طريق تنفيذ الامر: php artisan storage:link ثم بعد ذلك، استعمال الوظيفة asset لتكوين رابط أصول كامل يشير الى مسار الصورة الكاملة. على سبيل: $path = asset($user->avatar); فإن كانت مسارات الصور تخزن في مجلد avatars في مجلد storage/app/public/ وفي قاعدة البيانات كـ: avatars/image_file_name_1.ext avatars/image_file_name_2.ext avatars/image_file_name_3.ext فإن طريق قراءة المسار ستكون وفق السابق: $path = asset($user->avatar); فإن كانت قيمة user->avatar توافق avatars/image_file_name_1.ext فإن المعاد عن الوظيفة asset سيكون السلسلة النصية: https://your_domain.co/avatars/image_file_name_1.ext وهكذا..

كفكرة لتحديد الأحداث حسب الأولوية، يمكنك إضافة حقل خاص بالأولوية في قاعدة البيانات وتعيين قيم لكل حدث بناءًا على أولويته، أو التعامل معها بشكل منفصل لتحديد أهميتها، بمنطق مشابه للعملية التي يتم اعتمادها في حساب نقاط السمعة في اكاديمية حسوب او المساهمات في github مثلا. فعلى سبيل المثال: زود أولوية أو اهمية الحدث في قاعدة البيانات كلما اضيفت 100 مشاهدة جديدة. زود أولولية او اهمية الحدث في قاعدة البيانات كلما اضيف تعليق جديد عنه. زود أولوية او اهمية الحدث في قاعدة البيانات كلما تم تسجيل اعجاب جديد به من طرف زوار الموقع. وهاته كأمثلة فقط، يمكنك التعامل مع التزويد او الانقاص بالقدر الذي تراه مناسبا، او يترجم اهمية هذا الحدث بالنسبة لنوع المحتوى الذي تعرضه أو تقوم بفلترته. ثم سيمكنك ببساطة في الأخير الاستعلام عن هاته الاحداث بحيث تكون مرتبة بناءًا على الأولوية أو وفق حقل الأولوية، حيث يظهر الحدث ذو الأولوية العالية في المقدمة وهكذا. SELECT * FROM events ORDER BY priority ASC أو : $orderedEvents = MyEvent::orderBy('priority' ,'asc')->get();

يحدث مثل هذا السلوك لأن النقرة الأولى يتم فيها تحديث حالة المتغير validMessage الى true كون البيانات صحيحة وبشكل متزامن يتم التحقق من قيمة المتغير validMessage التي هي أصلا false ولا يتم تنفيذ عبارة الشرط أصلا لهذا الأخير. ففي النقرة الثانية تكون قيمة validMessage هي قيمة بوليانية صحيحة ويتم التوجيه بشكل طبيعي. ولتوكيد هاته الجزئية، جرب في الضغطة الأولى ان تكون البيانات صحيحة، ثم قبل الضغطة الثانية اجعل البيانات غير صحيحة ولا تطابق المنطق المتحقق منه في دالة formValidation. ورغم ذلك سيتم التوجيه الى الصفحة الموصوفة. لتلافي مثل هاته المشكلة، ستحتاج التوجيه اما من داخل دالة التحقق او استعمال عائد الدالة في شرط التوجيه، أمثلة صحيحة: const formValidation = () => { const validate = [] if (!user_regex.test(values.username)) { validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!") } if (!email_regex.test(values.email)) { validate.push('Invalid email: The email should be like aaa@aa.aa') } if (!password_regex.test(values.password)) { validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!") } setValidate(validate) if (validate.length === 0) { setValidMessage(true) } return validMessage; } const handleClick = (e) => { e.preventDefault(); const isValid = formValidation() if (isValid) { setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500) } } أو: const formValidation = () => { const validate = [] if (!user_regex.test(values.username)) { validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!") } if (!email_regex.test(values.email)) { validate.push('Invalid email: The email should be like aaa@aa.aa') } if (!password_regex.test(values.password)) { validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!") } setValidate(validate) if (validate.length === 0) { setValidMessage(true) } if (validMessage) { setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500) } } const handleClick = (e) => { e.preventDefault(); formValidation() } وكل منهما صحيح.

يعد استعمال مكتبة jQuery عمليا جدا في كثير من الحالات التي نحتاج فيها اختصار الوقت أو التعامل مع تفاعليات بسيطة الى عادية بشكل مكرر او غزير في صفحات الويب أين يكون استعمال vanilla Javascript أكثر استهلاكا للوقت أو الموارد. ولكن بشكل عام، لا ينصح باستعمالها ان كان استعمالها في المشروع غير كثير، فطلب ملفها قد يأخذ بضع الوقت الذي يمكن استغلاله في طلب موارد أقل حجما وتقوم بتفس الشيء. فإن كنت تستطيع كتابة شيفراتك بشكل مخصص للتعامل مثلا مع فتح نافذة منبثقة أو اغلاق قائمة جانبية أو ما إلى ذلك. أما ان كنت تستعمل جزئيات أخرى منها مثل كائن طلبيات ال Ajax وما إلى ذلك فسيكون الاعتماد عليها خيارا جيدا. وبشأن الفرق بين تضمينها باستخدام رابط cdn او بطلبها كمورد خاص من الخادم الخاص بك فإن الطريقة الأولى هي الأفضل غالبا، وهذا لأن توزيع الموارد باستخدام cdn يعد أفضل من الطلبيات العادية من جهة، ومن جهة أخرى فإن أغلب متصفحات الويب خزنت بشكل مؤقت (في الكاش) محتوى ملف jquery عن طريق cdn في أثناء تصفحها أحد المواقع التي تستعمل مكتبة jQuery فهي مورد متكرر نسبيا بالنسبة لمتصفحات الويب وقد لا تعاود الطلب اساسا وهو الامر الذي سيسرع بطبيعة الحال من اداء الموقع.

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

يختلف سياق شيفرة التحقق من تسجيل الدخول وتوجيه المستخدم لصفحته الشخصية حسب لغة البرمجة التي تستخدمها ونوع قاعدة البيانات التي تستخدمها لتخزين بيانات المستخدمين ومعلومات تسجيل الدخول الخاصة بهم وما الى ذلك. ففي PHP مثلا سيكون الكود مشابها لـ: <?php session_start(); // بدء جلسة لتخزين معلومات تسجيل الدخول if(isset($_POST['login'])){ // التحقق من الضغط على زر تسجيل الدخول // اتصال بقاعدة البيانات والتحقق من تطابق بيانات تسجيل الدخول $username = $_POST['username']; $password = $_POST['password']; $query = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $result = mysqli_query($conn, $query); if(mysqli_num_rows($result) == 1){ // التحقق من توافق بيانات تسجيل الدخول $_SESSION['username'] = $username; // تخزين اسم المستخدم في الجلسة header('Location: profile.php'); // توجيه المستخدم لصفحته الشخصية } else{ echo "خطأ في اسم المستخدم أو كلمة المرور!"; } } ?> وهذا كعينة، سيمكن بالطبع تخصيص الشيفرة وفق ما لديك. انتبه ايضا الى أن المتغير conn الذي يتم استعماله في تنفيذ استعلام MySql هو متغير يفترض ان يعبر عن كائن الاتصال بقاعدة البيانات، يتم عادة تخزين هذا المتغير بملف منفصل يخص الاتصال بقاعدة البيانات واعداده.

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

بجانب ما اقترح المدربون، يمكنك نمذجة جزئيات هاته الفكرة الى جدولين بقاعدة البيانات: أولهما هو جدول المستخدمين وليحمل الحقول: اسم المستخدم - عنوان بريده الالكتروني - كلمة مروره. ثانيهما هو جدول الأدوار وليحمل الحقول: اسم الدور (طبيب - ممرض .. الخ), يجب أن يميز كل مستخدم يسجل في النظام بدور معين، ولذلك سنحتاج اضافة حقل يميز صفا من جدول الأدوار في جدول المستخدمين. وليكن الحقل او العمود role_id سيمكن بعد ذلك استعمال هاته البيانات في: فحص دور المستخدم المسجل دخوله تصيير الصفحات او التعامل مع التوجيه بشكل شرطي بناءا على هذا الدور فإن كان مثلا المستخدم A طبيبا وقد طلب صفحة البروفايل الشخصي تعرض صفحة doctor-profile.php مثلا وان كان المستخدم B ممرض وقد طلب صفحة البروفايل الشخصي تعرض صفحة nurse-profile.php وهكذا. بالطبع فإن هذا هو التوصيف الأبسط للعملية، قد يمكنك التعامل مع ذلك بشكل أكثر خصوصية، على سبيل اضافة اذونات وصلاحيات مختلفة أو ادارتها هي الأخرى. قد يسهل عليك التعلم والعمل على اطار عمل مثل PHP ذلك، خصوصا مع الكم الهائل للحزم والمكتبات الجاهزة التي تسهل التعامل مع مثل هكذا جزئيات.

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