سمير عبود

بداية تحتاج كتابة كل الأشياء التي تتعلق بإستفسارك، ضع محاولتك، ضع شيء في السؤال يُمكن لأي مدرب أو من سيُجيب على سؤالك البدأ منه. يُمكن تقسيم سؤالك إلى 3 أجزاء: كتابة دالة تقوم بجلب سلسلة نصية تُمثل لون عشوائي، من خلال البحث في النت يمكن الوصول لهذه الدالة: function randColor() { return "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase(); } console.log(randColor()) // #AF4229 كل مرة يتم إستدعاء الدالة تقوم بإرجاع لون جديد. بناء نقطة البدأ من تجهيز عُنصر div و إعطائه بعض التنسيقات المبدئية، تحديد العُنصر من خلال جافاسكربت و التسمع لحدث click لمُعالجته: Html: <div class="original"> </div> Css: div.original{ background-color: pink; height: 50px; border: 1px solid #333; margin-bottom: 10px; } JS: var originalDiv = document.getElementsByClassName('original')[0]; // تحديد العُنصر الاصلي originalDiv.addEventListener("click", cloneDiv); // التسمع لحدث الضغط على العُنصر /* دالة مُعالجة الحدث */ function cloneDiv() { console.log('cloned'); } الآن إذا ضغطت على العُنصر في كل مرة ستجد في القنصل عبارة cloned، المفروض هذا الجزء أنت من يقوم به، و ترفقه مع السؤال. كتابة منطق الدالة cloneDiv لمُعالجة حدث الضغط على الdiv الأصلي، سنستخدم التابع cloneNode لنسخ العُنصر، و الدالة randColor التي أنشأناها في الخطوة الأولى لتغيير اللون، و في الأخير نضيف العُنصر المنسوخ إلى ال body بإستخدام التابع appendChild : function cloneDiv() { let clonedDiv = originalDiv.cloneNode(true); // نسخ العُنصر الأصلي و الإحتفاظ به في متغير محلي clonedDiv.style.backgroundColor = randColor(); // تغيير لون الخلفية للعُنصر المنسوخ document.body.appendChild(clonedDiv); // إضافته لجسم الصفحة } يُمكنك تجربة المثال من خلال codepen على الرابط التالي:

المقالة أسفله: شاملة و ستوضح لك الرؤية و تضعك على خط البداية لتعلم البرمجة، إطلع عليها بتمعن قبل أن تبدأ أي شيء، حدد هدفك من تعلم البرمجة وسوق العمل الذي تريد دخوله، ستجيبك المقالة على كافة إستفساراتك و تساؤلاتك. هناك العديد من الدورات و المقالات التي توفرها الأكاديمية، و كل دورة موجهة لمجال معين. ففي حال كنت مبتدئًا في مجال البرمجة والحاسوب بشكل عام فدورة علوم الحاسوب هي أفضل اختيار لك، ستعرفك بشكل شامل على كافة المجالات والمصطلحات لتصبح بعدها مُلمًا بما يتعلق بهذا المجال وقادر على فهمه. أما إن كنت تريد أن تُصبح مطور واجهات أمامية لمواقع الويب (Front End Developer) فدورة تطوير واجهات المستخدم ستكون مناسبة لك و هكذا بالنسبة لبقية الدورات، كل دورة تخدم مجال معين.

لديك مُشكلة في جلب القيم من المصفوفة POST_$، هي عبارة عن مصفوفة ترابطية، المفاتيح عبارة عن سلاسل نصية، و هي نفس الأسماء التي نضعها في حقول الإستمارة أي إذا أردت الوصول للقيمة المُدخلة في حقل username أكتب: $_POST['username'] و نفس الأمر بخصوص بقية الحقول. أي أن الخطأ لديك هنا: $username =@$_POST[$username]; $pass =@$_POST[$pass]; $email =@$_POST[$email]; و الصواب هو: $username = @$_POST['username']; $pass = @$_POST['pass']; $email = @$_POST['email'];

بإمكانك التواصل مع الدعم الفني من خلال مركز المساعدة و إطلاعهم على الأمر و سيعملون على حل مشكلتك في أقرب وقت

في الإصدارات الأخيرة (> v9.7.0) تم إضافة إعدادات من خلالها تتمكن من التحكم في ميزة التخزين المؤقت لصفحات العرض ببساطة و ذلك من خلال ملف الإعدادات الخاص بالعُروض config/view.php 'cache' => App::environment('local') ? false : true يُمكنك الإطلاع على رابط إضافة الميزة في الإطار على github من خلال Add option to disable cached view في الإصدارات الأقدم يُمكنك إيقاف الميزة من خلال: في ملف env. إضافة: CACHE_DRIVER=none في ملف config\cache.php إضافة التالي إلى مصفوفة stores: 'none' => [ 'driver' => 'null', ], ثم في ملف AppServiceProvider.php بالتابع boot تقوم بإضافة: Cache::extend( 'none', function( $app ) { return Cache::repository( new NullStore ); }); مع تضمين الكلاسات في الأعلى: use Illuminate\Cache\NullStore; use Cache;

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

يُرجى الإطلاع على صفحة إرشادات الاستخدام - إرشادات طرح الأسئلة و إعطاء كافة المعلومات اللازمة حول الإستفسار أو المشكلة، حتى يتمكن من يريد المساعدة من مدربين في الأكاديمية أو زوار من تقديمها بشكل أفضل بعد التمكن من فهم المشكلة.

مرحباً سفيان، إذا كان إستفسارك متعلق بدرس من دورة مشترك فيها يُرجى طرحه أسفل الدرس هناك صندوق للتعليقات، مع إرفاق كافة الملفات اللازمة و شرح المشكلة و سيُتابع معك المدربون هناك. هذا القسم مُتعلق بالأسئلة العامة

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

أعتقد أنك تريد فعل شيء ما عندما يقوم المستخدم بالتركيز على حقل الإدخال بإمكانك إستخدام الأحداث و التقاط الحدث focus على الحقل و الحدث blur عندما يبتعد المستخدم عن حقل الإدخال هنا مثال بسيط: <input type="text" id="myInput"> جافاسكربت: document.getElementById("myInput").addEventListener('focus', function(e) { console.log('user focus on input') }) document.getElementById("myInput").addEventListener('blur', function(e) { console.log('user leave the input') }) المثال موجود على codepen من: هنا

الفكرة هي بإعطاء المكان (العنصر) الذي تريد الذهاب إليه id محدد ثم في الخاصية href لعنصر a تضع قيمة ذلك id مسبوقاً برمز # مثال: نضع للعُنصر الذي نريد التوجه له id: <p id="target_paragraph"> content </p> ثم في العُنصر a نضع: <a href="#target_paragraph">Go To Paragraph</a> و في الرابط التالي يُمكنك التجربة: هنا

رسالة الخطأ تُخبرك أنه لا يوجد الفهرس fullname في المصفوفة res، لقد حددت في الإستعلام أن يجلب لك فقط username لاحظ بعد Select ماذا كتبت! مثلا هذه الأخطاء نقوم بتتبعها بطباعة النتائج إستخدم الدالة print_r او الدالة var_dump لطباعة الناتج res$ قبل كل شيء و ستتمكن من تجاوز المشكلة.

eo في الكود هي إختصار لـ event object و هو عبارة عن كائن يتم تمريره لدالة رد النداء عند حدوث حدث ما، يحتوي ذلك الكائن على عدة خصائص تتعلق بالحدث نفسه، إن كنت مهتم بالتعرف على كل تلك الخصائص بإمكانك تصفح: Event properties أو بإمكانك إنشاء زر بسيط و التسمع على حدث الضغط على ذلك الزر: <button id="myBtn">click</button> ثم في جافاسكربت تكتب: document.getElementById('myBtn').addEventListener("click", function(eventObject) { eventObject.preventDefault(); console.log(eventObject) }); ثم تضغط على الزر و تشاهد النتيجة في الكونسول من خلال أدوات المطورين في المتصفح. التسمية eo تعود للمطور نفسه، عُموماً من بين خصائص الكائن هي الخاصية target من خلالها نتمكن من الوصول إلى الكائن في شجرة ال DOM الذي تسبب في حدوث ذلك الحدث، و الموافق للعُنصر في المستند. في حالتك: const allplus =document.querySelectorAll(".plus") السطر السابق سيُحدد كل العناصر التي تملك الصنف plus و يُعيد مصفوفة، وهي كلها عبارة عن عناصر span تملك صنف plus. ثم من خلال forEach تقوم بالدوران على عناصر تلك المصفوفة و التسمع على حدث click عليها، ثم معالجة الحدث من خلال دالة رد النداء: (eo) => { let content= eo.target.parentElement.parentElement.getElementsByClassName("content")[0]; content.classList.toggle("mm") } عبارة عن دالة سهمية، تقوم بجلب عُنصر ال div الموجود تحت عُنصر span و الذي يملك الصنف content ثم تقوم بتبديل الصنف mm إن كان موجود تقوم بحذفه و إن كان غير موجود تقوم بإضافته. eo.target هو العُنصر الذي تسبب في الحدث. parentElement هو أب العُنصر الحالي استخدم مرتين للصعود درجتين. getElementsByClassName لتحديد العناصر عن طريق إسم الصنف و تُعيد مصفوفة عناصر.

المعامل الثالث هو إسم الحقل في النموذج الأب الذي يُشير إليه إسم الحقل الخاص بالمفتاح الثانوي في النموذج الإبن بالنسبة للعلاقة الموجودة بينهما. بفرض أنه لدينا 3 نماذج User، Post، Comment: users: - id (primary key) - ... - code posts: - postID (primary key) - ... comments: - commentID (primary key) - postID ---> posts - postID - token ---> users - code - ... لو أردنا تعريف العلاقة post التي تربط بين النموذج Comment و النموذج Post من خلال العمود postID في الجدول comments الذي يُشير إلى العمود postID في الجدول posts و الذي يُعتبر في هذه الحالة مفتاح أولي سنكتب: public function post() { return $this->belongsTo(Post::class, 'postID'); } يجب تمرير المُعامل الثاني الذي يُشير إلى المفتاح الأجنبي، لأنه إذا لم نُمرره ستتوقع لارافل أن إسم الحقل هو post_id و ليس postID و سيحدث خطأ. بخصوص المعامل الثالث ستكتشفه لارافل تلقائياً بشرط إعادة تحديد إسم المفتاح الأولي في النموذج Post: protected $primaryKey = 'postID'; و إلا قم بتمرير الإسم في المعامل الثالث. وجب الذكر أن توابع مثل find و غيرها تستخدم المفتاح الأولي في عملية الإستعلام و لارافل تعتبره id لذلك إن تم تغيير الإسم يجب إعادة تعريف الخاصية primaryKey كما تم الشرح أعلاه. لو أردنا تعريف العلاقة owner التي تربط بين النموذج Comment و النموذج User من خلال العمود token في الجدول comments الذي يُشير إلى العمود code في الجدول users و الذي لا يُعتبر في هذه الحالة مفتاح أولي سنكتب: public function owner() { return $this->belongsTo(User::class, 'token', 'code'); } هنا يجب تمرير المُعاملات الثلاثة و إلا ستعتبر لارافل أن المُعامل الثاني هو owner_id، و المعامل الثالث هو id. يُنصح دائما بإتباع نفس قواعد التسمية التي يتبعها الإطار و المتعارف عليها من طرف المطورين.

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

سابقاً في أحد المشاريع كان مطلوب مني برمجة خاصية تُمكنك من إنشاء فاتورة أو سند شحن لكل طلبية يقوم بها المستخدم، بحيث يتم تصدير ملف pdf يحوي معلومات الطلبية، بالإضافة لـ barcode خاص بكل طلبية ساعدتني كثيراً الحزمة laravel-snappy في موضوع تحويل ملف html إلى Pdf من ثم يُمكنك حفظ الملف أو تصديره للمُستخدم. أما بخصوص موضوع ال barcode فاستخدمت الحزمة php-barcode-generator لتوليد barcode لكل طلبية. أما لتوليد qrcode يُمكنك إستخدام الحزمة simple-qrcode

رسالة الخطأ كالتالي: Undefined array key "fileToUpload" ... بسبب: $_FILES['fileToUpload']['name'] و تعني أنك تحاول الوصول لفهرس في مصفوفة غير موجود. حاول طباعة مُحتوى المصفوفة FILES_$ قبل كل شيء لتتمكن من معرفة المشكلة. لاحظت أنك تُحاول رفع صورة من خلال إستمارة (form) و لعمل ذلك يجب على الإستمارة أن تحتوي على الخاصية enctype="multipart/form-data" بالشكل التالي: <form dir="rtl" action="" method="post" enctype="multipart/form-data">

لا أدري ما المقصود بـ activeTemplateTrue هي متغير لكن لا أعلم ما الذي يحتويه. عُموما موضوع إضافة ملف تنسيقات خاص باللغة العربية بسيط: @if (app()->getLocale() === 'ar') <!-- BEGIN VENDOR CSS--> <link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/vendors.css') }}"> <!-- END VENDOR CSS--> <!-- BEGIN STACK CSS--> <link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/app.css') }}"> <link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/custom-rtl.css') }}"> @else <!-- BEGIN VENDOR CSS--> <link rel="stylesheet" href="{{ asset('admin_assets/css/vendors.css') }}"> <!-- END VENDOR CSS--> <!-- BEGIN STACK CSS--> <link rel="stylesheet" href="{{ asset('admin_assets/css/app.css') }}"> <!-- END STACK CSS--> @endif يعني فقط شرط بسيط للتحقق من اللغة و تحميل ملفات التنسيقات الموافقة. حيث في المثال أعلاه admin_assets عبارة عن مجلد موجود بداخل المجلد public. هذه الحزمة ستُساعدك كثيراً في موضوع تعدد اللغات: laravel-localization

بإمكانك إستخدام أحد الخدمات المجانية على الإنترنت لرفع مشاريعك و تزويد رابط الوصول لها لعملائك، مثل خدمة github pages أو منصة Heroku و غيرها يُمكنك الإطلاع على هذه المقاطع المنشورة على الأكاديمية: [فيديو] استخدام GitHub Pages فيديو نشر تطبيق React.js على منصة Heroku فيديو نشر تطبيق PHP على منصة Heroku فيديو نشر تطبيق Laravel على منصة Heroku كما بإمكانك أيضاً حجز إستضافة مدفوعة و دومين و رفع مشاريعك البرمجية عليها.

غالباً إن كان الموقع مبني على نظام ووردبريس و تم إستخدام قالب مشهور و لم يتم التعديل على إسمه يُمكنك إستخدام المتصفح الخاص بك فقط لمعرفة إسم القالب و هذا مثال بإستخدام متصفح كروم و أدوات المطورين: إذا إتبعت نفس الطريقة ستصل للإسم Publisher و بالبحث بالإسم ستصل إلى: Publisher Theme Demos

عند تعريف العلاقة تستخدم التابع withPivot حتى يتم جلب الحقول الإضافية و withTimestamps لجلب حقول الوقت: created_at، updated_at return $this->belongsToMany(Role::class)->withTimestamps()->withPivot('active'); عند ربط مستخدم بدور محدد مثلاً يُمكنك اضافة القيمة التي تريدها للحقل الموجود في الجدول الوسيط بالشكل التالي: $user = User::find(1); $user->roles()->attach(1, ['active' => 1]); بإمكانك إستخدام التابع updateExistingPivot للتعديل على سجل ما: $user = User::find(1); $user->roles()->updateExistingPivot($roleId, [ 'active' => 1, ]); يُمكنك أيضاً إنشاء صنف نموذج خاص بالجدول الوسيط يرث من الصنف Pivot من خلاله تتعامل مع الجدول بشكل عادي: <?php namespace App\Models; use Illuminate\Database\Eloquent\Relations\Pivot; class RoleUser extends Pivot { // }

المُشكلة ليست في الدالة و إنما في المسار رُبما هو خاطئ. حاول إستخدام: $location = __DIR__ . '/assets/images/common_cloth_composition/'.$image; if (file_exists($location)) { } // أو $location = './assets/images/common_cloth_composition/'.$image; if (file_exists($location)) { } // أو $location = 'assets/images/common_cloth_composition/'.$image; if (file_exists($location)) { } بفرض أن الملف الحالي و المجلد assets موجودان ضمن نفس المستوى.

نعم سيكون هناك شرح للمواضيع المتقدمة، ففي كل مسار هناك مسار ضمني تطبيقي، فمثلاً في مسار اساسيات رياكت سنبني في الأخير تطبيق ملاحظات، و في مسار node.js ستتعلم قواعد البيانات MongoDB و في الأخير نبني تطبيق مدونة بإستخدام react و node.js بالإضافة لقواعد البيانات MongoDB ... و هكذا بالنسبة لبقية المسارات.

إن الخيار يعود لك، لكل دورة مجالها فدورة تطوير واجهات المستخدم خاصة بعمل الجزء الأمامي من المواقع Frontend، ويتم فيها إنشاء واجهات المواقع فقط (الازرار والألوان وكل ما يظهر في الموقع) و يتم شرح عدة تقنيات و مكتبات يعتمد عليها المطورون في هذا المجال و ستتعلم هذه الأشياء بجانب إنشائك للعديد من المشاريع و التطبيقات العملية. أما دورة تطوير التطبيقات باستخدام لغة JavaScript فهي دورة ترتكز بشكل كبير على لغة جافاسكربت و التقنيات الخاصة بها، فهي تشرح أساسيات اللغة، و أساسيات React المستعملة في الواجهات الأمامية، تشرح بيئة node.js، إطار React Native المستعمل في تطوير تطبيقات الجوال، Next.js، إطار Electron.js المُستخدم في بناء تطبيقات سطح مكتب، إطار العمل ionic. أنصحك بالإطلاع على صفحة كل دورة و التعرف على ما ستتعلمه، و على حسب خبراتك يُمكنك إختيار ما يُناسبك.

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