علي عبد محسن

بما أنك تريد إستهداف كلمات بعينها وليس جزء من نص يحتوي حروف تلك الكلمة, فالأفضل إستخدام الأداة regexp في جملة sql كما يلي SELECT col1 FROM tab1 WHERE col1 regexp '(^|[[:space:]])مجد([[:space:]]|$)'; -- تساوي الكلمة مجد col1ستعيد لك هذه الجملة جميع المدخلات التي تكون فيها قيمة يمكنك البحث عن معاني رموز النمط التعبيري المستخدم أعلاه لمزيد من الفهم. مثلاً ^ تعني بداية نص أو الchar الذي يسبقه و $ تعني نهايته و space تعني مسافة.

نعم الخاصية object-fit تطبقها على الوسم img في الشريحة. إذا طبقتها على img-slider سيعمل أيضا بسبب ال inheritance.

الملاحظ لديك في الصور أنها بأحجام مختلفة بما أنك تقوم بعرضهم دون أخفاء الشريحة السابقة تظهر لك وكأنها صورة فوق الأخرى واحدة أطول من الأخرى إعتماداً على حجم كل صورة. يمكنك حل خذه المشكلة من خلال css فقط من خلال إضافة سطرين للصنف img-slider وكما يلي .img-slider { ... height: 15em; /* نعطي طول ثابت للصور مثلاً هذا الطول أو حسب ما تجده مناسب للتصميم*/ object-fit: cover; /* أيضاً تحتاج وضع هذا الخيار الذي يعدل وضع الصورة آلياً في الشريحة دون تشويه*/ ... }

هنا أعطيتك الخطوات التي تحتاجها وفق الوصف الذي وضعته في سؤالك. يمكنك الأن البحث عن كيفية تنفيذ الخطوات هنا و هنا

للقيام بذلك تحتاج مايلي إنشاء خادم بلغة nodeJs مثبت عليه express كإطار للعمل من خلاله تستلم طلبات من نوع POST لهذا الغرض. تحتاج أيضاً تثبيت مكتبة nodemailer التي من خلالها ترسل إيميل بمحتوى البيانات المراد إرسالها من الخادم الى إيميلك. هذا كله في الواجهة الخلفية backend أما في الواجهة الأمامية تحتاج وضع حقول المدخلات في form مبرمج للإرسال بطريقة POST الى عنوان الخادم server عند الضغط على زر الإرسال submit

بعد الإطلاع على الكود الخاص بك لابد لنا من توضيح بعض الأمور لك لتجنب تكرارها في المستقبل. من السيء جداً أن تعرف إسم صنف في حاوية معينة ثم تقوم بتعريف صنف أخر بنفس الإسم في حاوية اخرى حيث يسبب هذا إرباك عند الصيانة وإخطاء عند التطوير أنت في غنى عنها (الصنف container). كذلك الheader العلوية يجب أن تعيد كتابة تركيب html لها بشكل أفضل. مع وجود الإشكالات لديك نقدم لك إستراتيجية لتجعل الصفحة تستجيب على كافة الأجهزة الصغيرة ويمكنك التعديل على الكود بما يناسب حاجتك وكما يلي /* تعديل الجصنف الذي يتضمن أيقونات التواصل الإجتماعي ليملأ عرض الصف كاملاً */ .container .content .social-icons { margin: 20px 0; width: -webkit-fill-available; display: flex; } /* لايوجد تعديل */ .container .content .social-icons a { padding: 0 15px; font-size: 30px; color: white; } /* هنا تعطي حافظة الشعار والقائمة العلوية عرض أكبر حتى لايظهر مضغوطتً على الشاشات الصغيرة */ header .container { width: inherit; } /* إضافة ميدياكويري لإخفاء العنوان الذي يشبه الشعار على الشاشات الصغيرة لأن الشعار يعوضه */ @media (max-width:650px) { .container .content h2 { display: none; } } /* تصغير حجم الخط على الشاشات الصغيرة */ @media (max-width:470px) { .logo h1{ font-size: large; } /* .container .content h2 { font-size: large; } */ .container .content p { font-size: large; } } /*بالإضافة لحجم الخط نقوم بتعديل قيم المسافة عن الأطار في الشاشات الأصغر */ @media (max-width:400px) { header .container { padding: 1em; } .container .content{ padding-left: 1em; } .logo h1{ font-size: medium; } .container .content p { font-size: medium; } }

كما شرحنا لك يمكنك عمل تقسيم الروابط في جافاسكربت أي في المتصفح وليس في الخادم. ماذا تستعمل للواجهة الأمامية مثلاً jQuery أو React.js أو حتى javascript بكل الحالات تستطيع ذلك فقط الطريقة ستختلف جزئياً لكن المبدأ هو نفسه كما وضحنا لك في الرد الأول.

حتى تتمكن من فتح الصور يجب أولاً أن يكون لديك صلاحية الوصول الى مسار حفظ هذه الملفات وهو أمر تستطيع برمجته إن لم تفعل بعد. الشيء الثاني إذا كنت تستلم الصور بهذه الصيغة التي تعرضها في الصورة المرفقة فجيب أن تقسم النص مثلاً في JavaScript بإستعمال الدالة split من خلال العلامة الفاصلة بين جزء من النص وأخر أي بين روابط الصور وهو في حالتك الفاصلة (,) . بعد ذلك يمكنك وضع روابط الصور في عنصر html المسمى a لكي يصبح قابل للفتح. // imagesString لنفرض أن النص الذي يحتوي على روابط الصور لديك هو let array= imagesString.split(",") الأن كل عنصر من عناصر المصفوفة أعلاه هو رابط صورة. حيث يمكنك المرور على جميع العناصر في حلقة تكرار وتكوين عنصر قابل للضغط. array.map( (img, index ) =>{ ... //هي رابط صورة img هنا كل // <a href=`${img}` >...</a> } // يعتمد الأمر على ماذا تستعمل في الواجهة الأمامية لذا وضعنا حلاً عاماً لتاخذ منه الفكرة

يمكنك فعل ذلك من خلال الذهاب الى المستودع الذي تريد إنشاء المجلد فيه ثم تختار من القائمة المنسدلة new file إختر create new file. بعد أن تفتح لك نافذة جديدة أكتب أسم المجلد المطلوب ثم أكتب بعده / ستلاحظ أنه تكون أسم مجلد جديد كل ما تحتاجه بعد ذلك أن تضع إسم ملف عشوائي بعد ال / التي تظهر بعد إسم المجلد الذي صنعته ثم تعمل commit من أسفل الصفحة.

حتى تتمكن من إظهار الصورة بجانبها عنوان المقال وتحت العنوان أسم المؤلف تحتاج إجراء بعض التغييرات على html في عناصر li مع إضافة صنفين css جديدين ... <li class="related-post"> <div class="item-container"> <!-- وضع الصورة مع المعلومات الأخرى في صف --> <img src="img/laura-jones.jpg" alt="Lightning" width="75" height="75" /> <div class="item-info-container"> <!-- وضع العنوان وإسم المؤلف في عمود --> <a href="#" class="related-link">The Unknown Powers of CSS</a> <p class="related-author">By Jim Dillon</p> </div> </div> </li> ... /* تعريفات الأصناف المرتبطة بالتغييرات المشروحة أعلاه */ .item-container{ display: flex; flex-direction: row; width: 100%; } .item-info-container{ display: flex; flex-direction: column; width: 100%; } ...

في javascript نستخدم الدالة isNaN لفحص القيم من نوع number أو string للتعرف فيما إذا كانت قيمة رقمية أم لا فهي تعيد true أو false عند إستعمالها وهي أختصار ل is not a number. مثلا “5” عند فحصها ب isNaN فإن النتيجة تكون false لأن النص يحتوي بداخله على قيمة عددية. لكن لو فحصنا “a” ستكون النتيجة true لأنها لا تحتوي قيمة عددية. if(isNaN("5")){// => false // وكأن السؤال هل هذا ليس رقماً؟ والجواب يكون لا. أي أنه رقم } if(isNaN("a")){// => true // هنا العكس }

هناك الكثير من الأدوات التي يمكن إستعمالها لإنشاء تطبيقات تعمل على ubuntu نذكر منها wxPython وهي cross-platform GUI toolkit أي أنها منصة عابرة للنظام بمعنى أنها تنتج نسخة لنفس التطبيق يعمل على أنظمة مختلفة مثل linux و mac و windows, وتعتمد على لغة python مفتوحة المصدر. يمكن أيضاً أن نشير الى electron.js وهي طريقة أخرى تعتمد على node.js مفتوحة المصدر وتنتج كذلك تطبيقات عابرة للنظام تعمل على الأنظمة الثلاثة سابقة الذكر. بخصوص الدورات يمكنك البحث هنا عن دورات بهذا الخصوص من خلال ما وضحناه لكم أعلاه.

لا يبدو الوصف المطروح في سؤالك كافياً لتحديد المشكلة لكن بصورة عامة إذا كانت المشكلة أنك تستعمل حساب من نوع standard فيمكنك تغييره الى Administrator للتمتع بصلاحيات أكبر: في صندوق البحث بجانب زر start إبحث عن netplwiz ثم إفتحه عندما يظهر حتى تفتح لك نافذة. الأن إضغط على أسم حسابك ثم إضغط على properties الأن يفترض لديك نافذة جديدة فوق الأصلية إضغط فيها من الأعلى على Group Membership الأن إجعل نوع حسابك Administrator بالإختيار الثاني إضغط على apply ثم ok ثم مرة أخرى Apply ثم ok وقم بإعادة التشغيل restart. يفترض بعد تطبيق الخطوات أن تتمتع بصلاحيات كاملة لل Administrator.

يمكنك عمل middleware لفحص الrequest ومن ثم التأكد من أنه ليس من ضمن قائمة الدول أو الips المحظورة من خلال قائمة مسبقة التعريف أو من خلال إستعمال third party solution ويمكنك تحميل قاعدة بيانات تتضمن سلسلة الip المحددة لكل دولة وتستطيع العثور عليها بالبحث في google. أيضاً للحصول على معلومات ip المتصل يمكنك الإستعانة بخدمات مثل Geobytes و Dnsstuff. وإذا أردت التحقق إذا كان المستخدم يستعمل vpn يمكنك النظر الى حلول مثل ipinfo.

تستطيع إستعمالها مع react بواسطة react-bootstrap ولكن في حالة vue تحتاج BootstrapVue.

jQuery مع bootstrap يعتبر stack مناسب لبناء فئات معينة من التطبيقات من البسيط الى المتوسط. لكن بالمقارنة مع المنصات الأخرى مثل react أو vue أو angular فأن هذه المنصات البرمجية تحتوي على خصائص وأدوات تحسن جودة العمل على مستوى التطوير والنتائج بشكل كبير لا توفره jQuery. فهي مصممة لتصميم أكثر التطبيقات تعقيداً

للتعامل مع كمية كبيرة من البيانات لا يمكن تحميلها دفعة واحدة من قاعدة البيانات لأن ذلك يتسبب بمشكلة في الأداء على طرف الواجهة الخلفية backend وكذلك أستهلاك الواجهة الأمامية frontend للذاكرة وربما حصول crash. لحل هذه المشكلة تستطيع إستعمال مفهوم pagination أي تقسيم البيانات الى أجزاء محسوبة في الbackend يمكن إسقاطها الى صفحات في frontend تعرض جزء معين في كل مرة يغير فيها المستخدم رقم الصفحة وتتم البرمجة لهذه الخاصية في كلا الواجهتين لتعمل بتناغم. يمكنك أيضاً إستعمال شيء مشابه يدعى lazy loading وهي خاصية من النوع asynchronous أي لا تزامنية تتم عن طريق ajax وهي شائعة الإستخدام في تطبيقات الموبايل يتم فيها التحميل المزيد من البيانات في كل مرة يضغط في المستخدم مثلاً على جملة تحميل المزيد أو ماشابه. هذا الكلام ينطبق على تطبيقات flutter مثل غيره ويمكنك البحث على google عن كيفية تنفيذ أي من الطريقتين أعلاه.

يعتمد الأمر كثيراً على ما تريد تحقيقه بحسب طبيعة التصميم لديك, فهناك أكثر من طريقة للحصول على التأثير المطلوب وهو رصف العناصر أو الأعمدة بجانب بعضها ونذكر منها الطريقة التالية ... <!-- HTML --> <div class="row"> <p class="col">Hello</p> <p class="col"> World!</p> <!--له عرض محدد col العمود --> </div> ... /* CSS */ .row { /* توسيط المحتويات بعد أخذ كامل عرض الشاشة */ width: 100%; text-align: center; } .col { width: 100px; /* يمكنك التحكم بعرض العمود كما التحكم بطولة*/ display: inline-block; /* هذا هو الجزء الأكثر أهمية الذي يبرمج الأعمد لتصطف أفقياً*/ } ...

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

إذا فتحت الكونسول بعد فتح الصفحة ستجد خطأ مفاده أنك تحاول الإنصات addEventListener الى عنصر غير موجود تسميه في الكود الخاص بك بمتغير cheak وهذا لأنك تحاول الوصول الى هذا العنصر مبكراً قبل أن يوجد أصلا لأنك تقوم بإنشاء عناصر li من خلال إضافتها بالإستعانة بجافاسكريت وليس قبل أن يتم تحميل الصفحة. لحل المشكلة قم بإجراء التعديلات التالية على الكود الخاص بك وستعمل لديك خاصية الحذف وأيضا إكمال المهمات. // إحذف هذا الجزء من الكود لأنه لايعمل // cheak.addEventListener("onclick" , function(){ // li.classList.add("done"); // }) ... //بكامل محتوياته كما نقوم بإضافة الصنف الذي يعمل تنسيق معين يظهر لنا العنصر قد تم إنهاءه. إذا لم تنشئ هذا الصنف بعد يمكنك إنشاءه li قم بتعديل هذا الجزء ليصبح الكود فعالاً حيث تلاحظ أننا نحذف العنصر // i هنا نربط الحذف والإكمال بالنقر على العنصر <i onclick="li.classList.add('done');" class="fa-circle-check fa-sharp fa-solid "></i> <i onclick="li.remove()" class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i> ...

من المعلوم أن rowspan لا تأخذ إلا قيماً صحيحة وبالتالي لا يمكن إسناد قيمة مثل 1.5 لها. لحل المشكلة يمكنك إسناد القيمة 3 ومن ثم إستعمال الوسم hr لشطر السطر الى نصفين وكما يلي في المثال <td rowspan="3"> <p>This is <hr> a Solution </p> </td> يمكنك التجربة وإطلاعنا على النتيجة فإذا لم تحل المشكلة لديك يمكننا تقديم أسلوب أخر للحل لكن في النهاية الأمر يعتمد على الكود لديك.

من خلال developer tools في المتصفح تجد مجموعة من أهم أحجام الشاشات (القياسية) للهواتف (mobiles) والحواسب اللوحية (tablets) الأكثر شيوعاً في سوق العمل, كما تجد خياراً أخر يدعى responsive يمكنك من خلاله تغيير حجم الشاشة ومشاهدة التغيير الحاصل على التنسيق العام لتطبيق الويب الذي تعمل عليه وكلا الطريقتين صحيحتين ولكن الأمر يعتمد كثيراً على شريحة المستخدمين المستهدفة. مثلاً يعمد بعض أصحاب المشاريع الى صناعة تطبيق متجاوب responsive مع طيف معين من الأجهزة دون أخرى طبقاً للمنطقة الجغرافية التي يتواجد فيها المستخدم end user ونوع الأجهزة التي يستعملها وفق دراسات مسبقة. بالنسبة للمشكلة في navbar لديك يمكنك إستهداف نطاق الأحجام التي تظهر فيها مشكلة التنسيق من خلال عمل media query بسيطة لحل المشكلة وفق الرؤية التالية @media only screen and (min-width: ?) and (max-width: ?) { //font-size يمكنك هنا تغيير حجم الخط مثلا لمحتويات القائمة //للعنصر الحاوية لمحتويات القائمة display يمكنك إيضا تغيير طريقة العرض } // ? علامة الإستفهام تضع بمكانها مدى الحجم المستهدف

للحصول على الشكل الدائري يمكنك إستعمال الخاصية border-radius بقيمة 50% لكن تحتاج لجعل الخاصيتين width و height متساويتين في القيمة حتى تحصل على شكل دائري لاحظ المثال التالي ... .custom-input { width:100px; height:100px; border-radius:50% /* %يجب ان تكون 50 */ } ... <input class="custom-input" type="text" id="fname" name="fname"> ...