اذهب إلى المحتوى

Adnane Kadri

الأعضاء
  • المساهمات

    5233
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    52

كل منشورات العضو Adnane Kadri

  1. ستحتاج بادئ الأمر محرر أكواد من مثل sublime text أو Notepad++ لتحرير الأكواد والشيفرات بلغة PHP. ثم ستحتاج لتشغيلها خادما محليا يحوي مفسرا لهذه اللغة من مثل xampp أو wampp. وقد تحتاج كشيء جانبي متصفحا من مثل google chrome أو mozilla firefox لإستعراض خرج هاته التعليمات البرمجية. استعن بالمحتوى المجاني المنشور على أكاديمية حسوب بخصوص التطوير بلغة PHP او اطلع على تفاصيل دورة تطوير تطبيقات الويب باستخدام PHP.
  2. يمكنك استعمال حيلة بسيطة أخرى لمقاربة ذات النتيجة، نستعن في هذا بعناصر label. لنصف الهيكلة التالية: <label> <span id="enabled" class="enabled-checkbox">&#10004;</span> <input id="checkbox" type="checkbox" /> <span id="disabled" class="disabled-checkbox">&#10006;</span> </label> نصف هنا عنصري span واحد يعبر عن حالة تفعيل الصندوق وواحد عن حالة تعطيله. يمكنك تنسيقهما وفقما ما تريد: label input{ display: none; } label .enabled-checkbox ,label .disabled-checkbox { height: 50px; width: 50px; padding:5px; border: 1px solid red; } ايضا انتبه الى ان انه تم اخفاء عنصر input. لأن الضغط على عنصر label سيكون تبديلا لحالة العنصر. ثم اخيرا عن طريق الجافاسكربت: الاستماع الى حدث تغيير حالة الصندوق. ففي حالة تفعيله. نقوم بإخفاء العنصر المتعلق بتمثيل حالة التعطيل واظهار الخاص بحالة التفعيل. وفي حالة تعطيله نقوم بإخفاء العنصر المتعلق بتمثيل حالة التفعيل. واظهار الخاص بحالة التعطيل. let input = document.querySelector('#checkbox'); input.addEventListener('change', (event) => { if (event.currentTarget.checked) { enabled.style.display = "inherit" disabled.style.display = "none" } else { disabled.style.display = "inherit" enabled.style.display = "none" } }) ايضا انتبه الى انه يجب اخفاء احد عنصري span بشكل افتراضي يوافق الحالة الافتراضية لعنصر الصندوق: label .disabled-checkbox{ display: none; }
  3. بجانب المشار إليه من قبل المدرب عمر، من بين المشاريع التي تم استعمال NodeJS فيها كمحرك واجهة خلفية يوجد ايضا: تطوير تطبيق جوال (تطبيق طبيبي) باستخدام React Native. إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js (هنا بالضبط تم استعمال خادم Next وهو في الأصل قائم على NodeJS). تطوير تطبيق جوال للتواصل الاجتماعي باستخدام Ionic. أما بالنسبة لأرشيف المسارات الأقدم فيوجد: تطبيق مشاركة وصفات الطعام. تطوير تطبيق لمطعم باستخدام Ionic 4. تطبيق جوال لطلاب المدارس. تطوير تطبيق قائمة مهام.
  4. يتم في هذا في الغالب توظيف مفهوم مراقبات التقاطع Intersection observers بشكل أو بآخر. يستعمل البعض على سبيل المثال اطر عمل ومكتبات من مثل WOW.js او Animate.css أو Modernizr أو AOS (Animate on scroll) وغيرها من هاته الأطر والمكتبات. أجد استعمال الأخير اسهل وابسط، يتم التثبيت اما عن طريق تضمين الملفات المصدرية: <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> .. <script src="https://unpkg.com/aos@next/dist/aos.js"></script> أو عن طريق مدير الحزم npm: npm install --save aos@next ثم تهيئة المكتبة: AOS.init(); ثم لن يكون عليك إلا وصف الخواص التي تتحكم في هاته الحركيات وارفاقها بالقيم المناسبة. اعرف أكثر عن التحريك في css > إظهار المحتوى أثناء التمرير
  5. لا يفترض ان يكون هنالك علاقة بين مكون collapsible و طلب Ajax في jQuery. يحتمل ان هنالك مشكلة اخرى. هل يمكنك ارفاق الشيفرة كاملة؟
  6. يمكنك الاعتماد على مواقع التوظيف والعمل الحر لأخذ تصور او فكرة عن اهم المكتبات واكثرها طلبا في سوق العمل. هي ذاتها الأشهر في مجتمعات المطورين ايضا. مثلما يمكنك استخدام محركات البحث بفعالية للبحث عن ذات الأمر يمكنك ايضا البحث عن دراسات استقصائية بهذا الخصوص. نجد مثلا دراسة مهمة مثل stackoverflow developer survey 2021 يوجد بملخص الدراسة عدة أقسام كاملة تخص اطر الويب ومكتباته. فحسب الدراسة هنالك: 40 بالمئة من اصل 70 ألف مطور يستعملون React و 35 بالمئة يستعملون jQuery. يعطي هذا فكرة عن مدى شعبية هذين الأخيرين. ايضا تحتاج الاندماج في المجتمعات التقنية لأخذ فكرة عن الأشهر والأكثر طلبا واستعمالا.
  7. دورة تطوير التطبيقات باستخدام JavaScript > أساسيات لغة JavaScript > التخاطب مع الخادم
  8. ان كنت تقصد التعامل مع الخوادم عن طريق الواجهات الأمامية فنعم، يوجد ايضا مجموعة من الدروس تحت عنوان "التخاطب مع الخادم" تم فيها شرح كيفية استقبال البيانات وعرضها بالواجهة الأمامية. مفاهيم أخرى مثل التوثيق والمصادقة والتعامل مع طرق التوثيق المختلفة تم التطرق لها هي الأخرى في مسارات عدة من ذات الدورة من مثل مسار تطبيق دردشة يشبه WhatsApp. فالفكرة في مجملها واحدة.
  9. يوجد في الجزء الخاص بـ NodeJS في دورة تطوير التطبيقات باستخدام JavaScript مسار كامل يشرح هذا المفهوم بإسهاب بعنوان " بناء واجهة برمجية API لتقييم الأفلام " بداية من تصميم النماذج وقواعد البيانات إلى غيرها مرورا ببعض الجزئيات الأخرى. من مثل كيفيات التسجيل والمصادقة وقراءة الموارد، حذفها والتعديل عليها وادارتها. لأن هذا المفهوم يتعلق بشكل أكبر بـ NodeJS وجهة الخادم أكثر من جهة العميل. ولذلك سيتطلب التعرف على أسس NodeJS بجانب التعامل مع قواعد البيانات بواسطته مرورا بآليات التعامل مع خوادم الويب وإطار العمل Express.js حتى يمكن التعامل مع كامل تشعبات هذا المفهوم في NodeJS. اعرف اكثر عن:
  10. يظهر الخطأ لأنك تحاول استدعاء تابع يخص المصفوفات على سلسلة نصية. myString.split(""); myString.filter فالتابع split لا يقوم بتجاوز تعريف المتغير بل يعيد مصفوفة جديدة تماما. في هاته الحالة تبقى myString سلسلة نصية في حال لم يتم تجاوزها عن طريق: let myString = "EElllzzzzzzzeroo"; myString = myString.split(""); او مباشرة: .split("") .filter((el,i) => { return myString.indexOf(el) === i }) ثم لخدمة الغرض الذي لديك يكفي : let myString = "EElllzzzzzzzeroo"; myString = myString .split("") .filter((el,i) => { return myString.indexOf(el) === i }) يفترض ان يحل المشكل لديك. ستعاد مصفوفة من حروف فريدة في المصفوفة. ["E", "l", "z", "e", "r", "o"] String.prototype.split()‎ Array.prototype.filter()‎ String.prototype.indexOf()‎
  11. يحتمل ان هنالك مشكلة بطباعة الـ Unicodes الخاصة باللغة العربية. هل جربت تحويلها الى ترميز utf8 قبل طباعتها؟ $stringToPrint = "محمود رضا\n"; $printer -> text(utf8_encode($stringToPrint)); $printer -> cut(); قد يحل هذا المشكل لديك.
  12. يوجد الكثير من مواقع الويب التي تقدم هاته الصور بشكل مجاني. يمكنك الاستفادة مما تقدمه. نذكر من بينها: موقع freevector موقع undraw للـ illustrations موقع manypixels ابحث في قوقل عن "free vectors & illustrations websites" وستجد الكثير. قد يقدم بعضها خططا مجانية بجانب الميزات التي يوفرها فعليا.
  13. تقوم PHP بالحفاظ على الجلسة بشكل افتراضي حتى يقوم المستخدم بإغلاق المتصفح. يمكنك تجاوز القيمة التي تتحكم في هذا الافتراض عن طريق التعديل على ملف اعداد PHP او باستعمال الوظيفة ini_set: ini_set('session.cookie_lifetime', 60 * 60 * 24 * 365); session_start();
  14. يمكنك الاكتفاء باستخدام session_start في كل صفحة من صفحات التطبيق على نحو: <?php session_start(); ?> <!DOCTYPE html> <html> <body> <?php print_r($_SESSION); ?> </body> </html> سيحافظ هذا على جلسة المستخدم خلال تصفحه الموقع. ثم استعمال session_unset و session_destroy لمحو الجلسة. <?php session_start(); session_unset(); session_destroy(); ?> هل تواجه مشكلة بذلك؟
  15. مرحبا محمد، في SQL يوجد الدالة GROUP_CONCAT التي تسمح بتجميع عدد معين من الصفوف في قيمة واحدة. يمكنك استعمالها بفعالية لخدمة هذا الغرض: SELECT GROUP_CONCAT(column_name , ', ') AS things FROM table_name في مثالك يكون ذلك كـ: SELECT GROUP_CONCAT(username , ', ') AS useranames FROM users
  16. يحتمل ان هنالك اعدادا افتراضيا آخر عطل ظهور الفكرة لديك. جرب انشاء عنصر مستقل تماما وطبق عليه التنسيقات اللازمة: <body> <div class="bg"></div> .. .bg{ position:fixed; height:100%; width:100%; top:0; left:0; background-image:url(image) } ايضا تأكد من امتلاك العنصر body الخلفية الشفافة: body{ background-color: transparent; } ايضا تغاضى عن استعمال z-index لأنه سيتم وضع العنصر الثابت افتراضا وراء باقي العناصر مما لا يعطل الوصول اليه. يحتمل ان يحل هذا المشكل لديك.
  17. لم افهم المشكلة على نحو جيد. هل تحاول تعيين خلفية صورة بشفافية لعنصر body ام تحاول اضافة عنصر صورة شفافة ثابت يظهر كخلفية ثابتة على طول امتداد الصفحة؟
  18. بما ان العنصر يمتلك ثابتة، حاول اعطاءه z-index بقيمة اقل من تلك التي يمتلكها body. z-20 before:z-10 هل يوثر ذلك في ظهورها؟
  19. لما تعطي العنصر before:: الوضعية الثابتة؟ سوف يؤثر على تموضعه فوق العناصر وبالتالي الوصول اليها. جرب اعطاءه الوضعية المطلقة before:absolute before:top-0 before:left-0 قد تحتاج في هذا التخلص نهائيا من before:z-[999] يمكنك ايضا القيام بذلك عن طريق CSS وحدها، يوجد الخاصية background التي تعبر عن تجميعة الخصائص التالية مرتبة: background-color background-image background-repeat background-attachment background-position لنعطيها تدرج لوني شفاف + صورة، يكون كـ: background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url(image.jpg) سينشئ هذا طبقة بيضاء بشفافية نحددها فوق الصورة. سيعطي هذا نفس المقاربة. قد تحتاج ايضا اسناد هاته الخصائص لظهور كامل للخلفية دون اي مشاكل: relative bg-fixed bg-center bg-cover bg-no-repeat
  20. راجع الاجابات المقدمة بخصوص نفس سؤالك المرة السابقة:
  21. تحسين ظهور الموقع في محركات البحث عملية متواصل تحتاج الكثير من المتابعة والتحليل على فترات زمنية مفتوحة. بشكل عام، يعتبر كل توصيف ميتا meta description يعبر عن محتوى الموقع او التطبيق بشكل مختصر ودال جيدا. أما بالنسبة للكلمات المفتاحية meta tags فهي كلمات دالة تعبر بشكل مباشر او غير مباشر عن محتوى الموقع او التطبيق. راعي في عملية تحسين محركات البحث كتابة محتوى جيد خال من الأخطاء بشكل دوري. واهتم ايضا بالالتزام بالنصائح التي يتم تقديمها بخصوص الـ SEO في تبويبة SEO في PageSpeed Insights من Google. استعن ايضا بـ Google Analytics لمتابعة العملية بشكل دائم. اعرف اكثر عن
  22. الدوال السهمية في جافاسكربت لا تمتلك اي ارتباطات مع this او arguments ولا يجب ابدا استعمالها كتوابع او ضمن سياق الكائنات. يفترض ان تستقبل الوظيفة test العنصر المستهدف الممرر اليها في تصريحها ولا مشكلة ان تتجاوز تنسيقاته آنها: const test = (e) => { return e.style.display='none' } ايضا للاشارة الى العنصر button المستهدف في اسنادك للوظيفة استعمل تصريحا عاديا regular function: btn1.addEventListener('click', function() { test(this) }) يفترض ان يصلح هذا المشكل الخاص بك.
  23. الحرف U في VS code هو اختصار للكلمة untracked file وهي الملفات التي لم يتم تعقبها بعد. وتظهر في حالة اضافة ملف جديد لم يتم اضافته بعد الى مستودع git. فيما يلي ايضا كامل اختصارات VS code فيما يخص الملفات: A للاشارة الى Added تظهر في كل ملف تم اضافته الى المستودع المحلي M للاشارة الى Modified تظهر في كل ملف مضاف بالفعل الى المستودع المحلي وتم تغييره في مجلد العمل D عن Deleted تشير الى كل ملف مضاف وتم حذفه R عن Renamed تشير الى كل ملف مضاف وتم تغيير اسمه تخص هاته المؤشرات مجلدات المشاريع المربوطة بمستودعات git. ان اردت التخلص منها قم بفك هذا الربط.
  24. يمكنك على كل حال استعمال حقل من نوع number. ان دعت الحاجة الى استعمال حقل من نوع text فيمكنك الاستماع للحدث onkeypress والتحقق من القيمة المدخلة ثم ان كانت موافقة لمعاييرك قبلتها وفي حالة عدم ذلك قم بتعطيل السلوك الافتراضي وهو: طباعة المحرف لنستعن بالتعابير النمطية regex لتوصيف النمط المقبول وهو: محارف الأرقام + محرفي + و - : /[0-9\.\-+]/ مثال عملي: <input type='text' onkeypress='validate(event)' /> function validate(e) { var key = e.keyCode || e.which; key = String.fromCharCode(key); var regex = /[0-9\.\-+]/; if( !regex.test(key) ) { e.returnValue = false; if(e.preventDefault) e.preventDefault(); } }
  25. لاستعمال الواجهة بشكل غير محدود يجب عليك انشاء حساب في Google console وادخال معلومات بطاقة الائتمان الخاصة بك للحصول على رمز تفعيل يخص موقعك. فخرائط Google لم تعد مجانية واصبح يجب ارفاق بيانات بطاقات الائتمان ليتم فرض فواتير عليك ان تجاوز عدد الطلبات الخاصة بموقعك حد 200 دولار التي يتم تقديمها بشكل مجاني اولي مباشرة بعد ربط بيانات البطاقة بالحساب. يتم تلقائيا وضع هاته العلامة المائية على الخرائط في الحالات: تجاوز الحد المحدد الغاء تفعيل خيارات الفوترة billing في حسابك معلومات بيانات بطاقة الائتمان خاطئة الطلب لا يحتوي من الاساس على مفتاح API يخص الواجهة
×
×
  • أضف...