سمير عبود

هذا هو منطق البرنامج (إستبدال أو إعتبار المدخلات أو الأعداد السالبة صفراً) فالبرنامج يتأكد أو يفحص قيمة العدد المدخل من المستخدم إن كان سالباً إستبدله بالقيمة صفر ثم يطبع الرسالة الموضحة: Negative changed to zero بما أنك أدخلت 16- فالشرط تحقق لذلك تم تغيير القيمة المخزنة في x و تم طباعة الرسالة، حاول أيضاً طباعة قيمة x ستجده عرض لك 0. جرب أيضاً إدخال قيم موجبة ستجد أن الشرط لم يتحقق بالتالي القيمة لن تتغير إلى 0 ولن يطبع لك الرسالة السابقة.

المشكلة الأولى تتعلق بعدم تواجد جدول sessions في قاعدة البيانات الخاصة بك، و هذا الجدول ضروري للتعامل مع الجلسات، في السابق كانت الجلسات تستخدم الملفات كـ driver إفتراضي، أما الأن الإفتراضي هو database. ويتم التحكم بهذا الأمر من خلال الإعدادات. أنت بحاجة إلى التأكد من تواجد الجدول، يمكنك القيام بعملية الترحيل: php artisan migrate أو يفضل الهدم وإعادة الترحيل، إذا كانت القاعدة تحتوي على جداول مسبقة: php artisan migrate:fresh بخصوص المشكلة الثانية فهي تتعلق بـ Jetstream المشروع لديك يستخدم حزمة Jetstream للإستيثاق، وهي توفر بعض المكونات التي من الممكن أن تستخدمها، بعض الملفات تضمن هذه المكونات لكنها غير موجودة لديك. الأصح بعد تضمين الحزمة في المشروع عبر الأمر: composer require laravel/jetstream أن تثبت الحزمة وتختار الـ stack المناسب لك إما livewire او inertia عبر تنفيذ الأمر: php artisan jetstream:install livewire // أو php artisan jetstream:install inertia وهذا حسب الخيار الذي اعتمدته. الأمر سيقوم بالتثبيت وتضمين بعض المكونات و الملفات الخاصة بالحزمة في مشروعك. يفضل قراءة التوثيق الخاص بالحزمة عند إستعمالها، حتى توافق ما لديك.

الفكرة ليست في معرفة التقنية أو الخاصيات المستخدمة في التقنية، يمكنك تحصيل هذا الشيء من أي مصدر أو محتوى ترتاح له، التحدي الأكبر يكمن في إكتسابك لمهارة توظيف تلك الخصائص معاً او تلك التقنية في تحقيق أهداف معينة. لنأخذ على سبيل الصندوق المرن (Flex Box) هو أسلوب يمكن إستعماله حالياً لتنفيذ تخطيطات معقدة بشكل بسيط. (تلك التصاميم والتخطيطات كان تنفيذها معقد وصعب في السابق). سأرشح لك المقالات التالية لأخذ الأفكار الأساسية حول هذه المواضيع: مدخل إلى تخطيط صفحات الويب باستخدام CSS الأساليب القديمة في تخطيط صفحات الويب تخطيط الصندوق المرن Flexbox في صفحات الويب تخطيط صفحات ويب باستخدام تخطيط الشبكة Grid في CSS أو يمكنك أخذ أساسيات هذه المواضيع من خلال المقاطع على يوتيوب، الأمر راجع لك في اختيار ما يناسبك. بعدها يأتي التحدي الأكبر وهو محاولة تطبيق تخطيطات معينة سواء من خيالك أو من خلال الإنترنت (فقط عدد معين من الأفكار ومع الممارسة أكثر سيترسخ الفهم لديك) إليك بعض الأفكار البسيطة: شبكة صور بسيطة (معرض صور) قسم خدمات الشركة في صفحات الهبوط الخطط والأسعار فريقنا (بطاقات لفريق العمل في الشركة) قسم تفاصيل المنتج (القسم الذي نراه في المتاجر الإلكترونية - صور المنتج في جهة متوزعة بشكل منظم و تفاصيل المنتج في جهة { العنوان، الوصف، السعر وما إلى ذلك }) يمكنك الحصول على أفكار أخرى مختلفة من خلال الإنترنت وتصفح المواقع المشهورة بعد تطبيقك وتنفيذك لهذه الأفكار ستلمس بشكل أكبر أهمية هذه التقنيات والهدف منها وستتعلمها بعمق. بالتوفيق.

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

الأمر يعتمد عليك في النهاية، Laravel UI يأتي مهيأ بشكل إفتراضي مع إطار العمل Bootstrap بعكس Laravel Breeze الذي يأتي مهيأ مع TailwindCSS. عند تنفيذ: composer require laravel/ui php artisan ui bootstrap --auth ستحصل على ملفات Blade مبنية على Bootstrap مباشرة. فلا تحتاج إلى تعديلات كبيرة على الـ CSS أو الهيكلة. أما لو اخترت Laravel Breeze و أردت إستخدام Bootstrap معه ستضطر إلى: إزالة او تعطيل إعدادات Tailwind. تثبيت Bootstrap وإعادة كتابة الـ views أو تعديل الـ Blade components لتتناسب مع Bootstrap. هذا يعني وقتًا إضافيًا وجهدًا أكبر للبدأ في الكتابة او العمل على متطلبات المشروع الأساسية. في السابق كانت توجد حزم لتقديم Breeze مع Bootstrap فهي توفر ذلك الوقت الذي كنت ستقضيه في تعديل الملفات والـ views لتناسب Bootstrap في الوقت الحالي لا أدري وضعها. لكن الأمر ليس بذلك التعقيد يمكنك القيام به بشكل يدوي. يوجد أيضاً خيار Laravel Jetstream فهو مثل Breeze لكنه يوفر خصائص وميزات أكبر. ويوجد أيضاً خيار Laravel Fortify لوحده فهو يوفر المتحكمات و جانب الـ Backend لعمليات المصادقة وتسجيل الدخول وهو مستخدم بشكل إفتراضي مع كل من Breeze و Jetstream لكنه لا يوفر الـ Frontend و ملفات العروض و الإعدادات الخاصة بهذا الجانب، الأمر متروك للمطور لإختيار وإستخدام ما يشاء. لكل من هذه الخيارات حالات إستخدام معينة والأمر في الأخير يرجع للمطور. خلاصة الأمر إذا كنت مبتدئ وتريد أسرع طريقة مع Bootstrap إستخدم Laravel UI، إذا كنت تملك الوقت ولا تمانع في بذل جهد للتخصيص اليدوي يمكنك إختيار Breeze وتخصيص الواجهات لتعمل مع Bootstrap. إذا كنت ترغب في تخصيص من الصفر للواجهات والأدوات يمكنك الذهاب مع خيار Fortify ثم إضافة ما يناسبك. إذا كنت تحتاج إلى الميزات التي يقدمها Jetstream و القصد هنا جلسات المتصفح والمصادقة الثنائية، إدارة الفريق ... فالخيار هو Jetstream. في Laravel 12 تم تقديم مجموعات بدء (Starter Kits) جديدة، هذه المجموعات مُصمّمة لتسهيل بدء المشاريع مع واجهة + مصادقة + إعدادات جاهزة، وتركّب التقنية الأمامية التي تفضّلها، وجميع هذه المجموعات الجديدة تستخدم Tailwind CSS كمكتبة CSS افتراضية.

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

لا يوجد ماهو أفضل في المجمل وبشكل عام بين Django و Flask. ذلك يعتمد على حالات الإستخدام وعلى التفضيلات الشخصية. فلكل إطار مميزات و عيوب وفي الأخير أنت من يحدد المناسب لك وللمشروع الذي تعمل عليه. بداية دعنا نعرف كل إطار و نبرز مميزات و عيوب كل منهما حتى يتسنى لك الإختيار وفق ما يتناسب مع حاجتك: Django: إطار عمل كامل مبني على بايثون، يوفّر لك كل شيء تقريبًا من البداية: نظام إدارة المستخدمين، ORM لربط قاعدة البيانات، لوحة تحكم جاهزة، حماية أمنية، قوالب HTML، إلخ. Flask: إطار عمل صغير (Microframework) وخفيف، يوفّر الأساسيات فقط (Routing، Request/Response)، وتضيف أنت باقي المكونات (قواعد البيانات، التوثيق، إلخ) عبر مكتبات خارجية حسب حاجتك. المميزات والعيوب: مميزات Django: يوفّر أدوات كثيرة جاهزة لتطوير سريع. نظام إدارة (Admin Panel) جاهز وقوي. ORM قوي للتعامل مع قواعد البيانات بسهولة. أمان عالي (CSRF, SQL Injection, XSS protection). مجتمع كبير ودعم واسع. عيوب Django: كبير الحجم وقد يكون زائدًا عن حاجتك إذا كان المشروع صغير. أقل مرونة إذا أردت الخروج عن "طريقة Django" في العمل. مميزات Flask: خفيف وسهل الفهم للمبتدئين. مرونة عالية حيث تختار الأدوات التي تناسبك. مناسب للمشاريع الصغيرة أو التي تحتاج تصميم مخصص جدًا. عيوب Flask: تحتاج إلى إضافة كافة المزايا الإضافية والتي لا يتيحها الإطار بنفسك قد تحتاج وقت أطول للبناء إذا كان المشروع كبير. متى تستخدم كل إطار؟ تستخدم Django إذا كنت تريد إنجاز مشروع كبير أو متوسط وبسرعة، أو إذا كنت ترغب بلوحة تحكم جاهزة وتنظيم محكم للكود. بينما تستخدم Flask إذا كنت تريد إنجاز مشروع صغير أو API خفيف، أو كنت تريد حرية كاملة ومرونة في إختيار المكونات بنفسك. في الأخير لا يوجد ماهو أفضل بشكل مطلق عندما نتحدث عن الأدوات البرمجية سواء لغات أو أطر عمل أو مكتبات فالأمر كما قلت في البداية راجع لحالات الإستخدام، نسبة تعقيد المشروع، متطلبات صاحب المشروع أو الشركة التي تعمل لديها، تفضيلات شخصية وما إلى ذلك من معايير وتحديدات.

إن كنت تريد مزامنة الملفات بين عدة أجهزة يُمكنك إستخدام برنامج syncthing وهو برنامج مفتوح المصدر يستخدم لمزامنة الملفات والمجلدات بين أجهزة متعددة بشكل آمن وسهل. يتيح لك البرنامج الحفاظ على نسخ متزامنة من الملفات عبر الأجهزة المختلفة، سواء كانت أجهزة كمبيوتر، خوادم، أو حتى أجهزة محمولة. من بين أهم المميزات أنه بسيط وسهل الإستعمال بالإضافة لأنه متعدد المنصات يعمل على معظم أنظمة التشغيل بما في ذلك Windows، macOS، Linux، و Android، تستطيع إستكشاف البرنامج وما يقدمه من مميزات من خلال يوتيوب يوجد عدة مقاطع تشرح ذلك. مستودع البرنامج على github : مستودع syncthing

تحتاج إلى إضافة الحقل لإستمارة التسجيل: <div class="mt-4"> <x-label for="photo" value="{{ __('Photo') }}" /> <x-input id="photo" class="block mt-1 w-full" type="file" name="photo" /> </div> تحتاج التعديل على عُنصر الإستمارة بإضافة: <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ بعدها تحتاج إلى التعديل على التابع المسؤول عن إضافة السجل: بإضافة التحقق: Validator::make($input, [ 'name' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'password' => $this->passwordRules(), 'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '', 'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'], // إضافة التحقق ])->validate(); ثم بعد إنشاء المستخدم تقوم بتعديل الصورة في حالة ما إذا كان الطلب به ملف صورة: $user = User::create([ 'name' => $input['name'], 'email' => $input['email'], 'password' => Hash::make($input['password']), ]); if (isset($input['photo'])) { $user->updateProfilePhoto($input['photo']); } return $user; تستطيع حفظ الصورة بنفسك قبل حفظ المستخدم، لكن بإمكانك أيضاً إستخدام نفس الخاصية الموجودة في التعديل، أي التابع updateProfilePhoto كما هو موضح أعلاه، التابع سيقوم بحفظ الصورة في المجلد storage و يُعدل على حقل الصورة في قاعدة البيانات أيضاً.

خاصية تعديل الصورة الشخصية للمستخدمين متاحة كخاصية إفتراضية في Jetstream، لا تحتاج إلى إنشائها من الصفر فقط عليك تفعيلها من خلال ملف الإعدادات: config/jetstream.php ستجد بداخل المفتاح features السطر التالي: Features::profilePhotos(), مُعلق قم بإزالة التعليق. ثم ستتمكن من التعديل على الصورة الشخصية من خلال صفحة ال profile، إن أردت شيء مغاير يُمكنك الإشارة.

يُمكنك إستخدام الدالة unlink في php لحذف أي ملف، وتمرير مسار الملف الذي تريد حذفه كوسيط أول للدالة.

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

إذا كان قصدك الخاصية alt و القيمة التي وضعتها فهي قيمة إختيارية فقط، أما الخاصية فهي تعني النص البديل وهذا النص يظهر في حالة تعذر الوصول إلى الصورة.

لا يمكنك وضع الصورة من خلال حقل file عليك وضعها من خلال عُنصر الصورة (img) أي أن كود php ستضعه من خلال الخاصية src في عُنصر الصورة (img)، يعني ستقوم بتعديل التالي: <img width="180" height="150" src="https://placehold.co/180x150" alt="image preview" id="preview"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ بوضع مسار الصورة عن طريق php: <img width="180" height="150" src="<?php echo 'مسار الصورة' ?>" alt="image preview" id="preview"> أنا لا أعلم إسم الحقل الذي تخزن فيه مسار الصورة ولا كيف تقوم بتخزينها لكن أنت ملم بهذه المعطيات، فقط ستُعدل على ال 'مسار الصورة' بما يوافقها بعد جلبك للبيانات.

لا يُمكنك وضع القيمة من خلال حقل الإدخال (input file) مباشرةً، تحتاج إلى إضافة عُنصر صورة (img) تحت الحقل file تعرض به الصورة من خلال المسار الخاص بها، ثم من خلال جافاسكربت يُمكنك إذا قام المستخدم بتغيير الصورة إلتقاط الحدث و التغيير على الصورة بحيث تظهر الجديدة التي اختارها، بعد ذلك إذا تم الضغط على زر التعديل ترسل الإستمارة إلى الخادم وتحفظ الصورة الجديدة: هنا شرح بسيط للعملية: <form action="" enctype="multipart/form-data"> <input type="file" id="file" name="file" accept="image/*" onchange="loadImage(event)"> <br><br> <img width="180" height="150" src="https://placehold.co/180x150" alt="image preview" id="preview"> </form> لاحظ العُنصر img (هو الذي نستخدمه لعرض الصورة، يُمكنك التعديل على الخاصية src بوضع مسار الصورة الخاصة بالسجل الذي تقوم بالتعديل عليه) أيضاً لاحظ عُنصر الإدخال استخدمنا الخاصية onchange لإلتقاط حدث التغيير وتنفيذ الدالة loadImage التي سنقوم بإنشائها عبر JavaScript: const loadImage = (event) => { const output = document.getElementById('preview'); output.src = URL.createObjectURL(event.target.files[0]); output.onload = function() { URL.revokeObjectURL(output.src) } } فقط نقوم بتحديد عُنصر الصورة من DOM ثم نُغير على الخاصية src بوضع الصورة الجديدة. المثال موجود على CodePen من هنا، هذه الفكرة بإختصار يُمكنك التعديل عليها حسب الحالة وإضافة التنسيقات المناسبة لك.