Adnane Kadri

يمكنك ايضا عن طريق الجافاسكربت جلب قيمتي الازاحتين: الأفقية والعمودية للصفحة او الوثيقة. ثم الاستماع الى الحدث onscroll لإعادة المستخدم الى هاتين الازاحتين كل مرة يتم فيها محاولة عمل تمرير. يعني هذا: منع المستخدم من التمرير. يكون ذلك كـ: // جلب الازاحتين الافقية والعمودية لصفحة الويب let TopScroll = window.pageYOffset || document.documentElement.scrollTop; let LeftScroll = window.pageXOffset || document.documentElement.scrollLeft, // اعادة المستخدم الى الموضع المحدد بهاتين الازاحتين window.onscroll = function() { window.scrollTo(LeftScroll, TopScroll); }; فهم الأحداث في جافاسكربت

هل حاولت الاطلاع على دورات الأكاديمية؟

يمكنك ايضا استعمال التابع entries عن الكائن Object لطباعة كل مفتاح وقيمة على التوالي، يكون ذلك كـ: Object.entries(obj) يعيد هذا التابع مصفوفة ثنائية البعد Two-dimensional Arrays ذات ثنائيات مفتاح قيمة كـ: [["p1", "value1"], ["p2", "value2"], ["p3", "value3"]] يمكنك المرور عليها عن طريق اي تكرار، وليكن for in : for (const [key, value] of result) { console.log(key, value); } فتكون كاملة الشيفرة: const myObj = { a: 1, b: 2, c: 3 }; let i = Object.entries(myObj); for (const [key, value] of i) { console.log(key, value); } الناتج: "a", 1 "b", 2 "c", 3 الكائن Object في JavaScript التابع Object/entries في جافاسكربت

يمكنك انشاء دالة مخصصة تقوم بالأمر عليك، فيما يلي منطق عمل الدالة: تقوم هاته الدالة باستقبال العدد المراد اضافة بادئة صفرية اليه num وعدد الاصفار المراد اضافتها اليه num_of_zeros. تقوم الدالة بتكرار السلسلة النصية "0" عدد num_of_zeros مرة. وتخزنها في متغير محلي. في حالة ما كان العدد موجبا فإن الدالة ستقوم مباشرة باضافة الاصفار الى بدايته. في حالة ما كان العدد سالبا فان الدالة ستقوم بحقن الاصفار بعد علامة ال -. مثال عملي: /** * اضافة بادئة اصفار الى عدد * * @param num * @param num_of_zeros * @return string */ function padZeros(num, num_of_zeros) { var zeros = ('0').repeat(num_of_zeros); return num >= 0 ? zeros + num : String(num).substr(0, 1) + zeros + String(num).substr(1) ; } مثال عن الاستعمال: console.log(padZeros(-4, 10)) // "-00000000004" console.log(padZeros(1, 4)) // "00001" الكائن String في JavaScript التابع Repeat في جافاسكربت التابع substring في جافاسكربت

هل يمكنك طباعة ناتج الرد بدل حقنه في الوثيقة؟ success:function(data){ //$(this).parents('.inputEditTex').nextAll('.p-comment-homepage').html(data); console.log(data); } هلا قمت باطلاعي على نتيجة الطباعة. يحتمل ايضا ان هنالك مشكل بتحديد الحقل الذي سيتم فيه حقن التعليق.

بداية، قم بتثبيت tailwindcss وملحقاتها: npm install -D tailwindcss postcss autoprefixer قم بتكوين ملف اعداد tailwindcss: npx tailwindcss init -p قم بتوصيف امتدادات الملفات المراد التعامل معها في ملف tailwind.config.js: module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } اضف موجهات tailwindcss الى ملف التنسيقات الرئيسي لديك: @tailwind base; @tailwind components; @tailwind utilities; قم بتضمين ملف التنسيقات بملف الجافاسكربت الرئيسي لديك: import './css/style.css'; قد تحتاج كخطوة اضافية تضمين tailwindcss و autoprefixer ضمن اضافات postcss في ملف اعداد postcss.config.js: module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ] } وأخيرا تشغيل الامر npm run dev والبدء في استعمال tailwindcss ضمن مشروعك.

لا مشكلة بشيفرة الـجافاسكربت او الـ HTML. ولكن كون شيفرة الجافاسكربت لا تطبع شيئا بعد نجاح تقديم طلب الاجاكس يعني انها لا تلتقط قيمة معادة من الواجهة الخلفية الاصلية. جرب اعادة قيمة من شيفرة الـ PHP كـ: if (isset($_GET['ed']) && isset($_GET['text'])) { $comNum=$_GET['ed']; $text=$_GET['text']; $stmt=$conn->prepare(" UPDATE comments set c_text=? where c_id=? "); $stmt->execute(array($text,$comNum)); if ($stmt) { $stmt=$conn->prepare(" SELECT * from comments where c_id=? "); $stmt->execute(array($comNum)); $com=$stmt->fetch(); if (!empty($com)) { return "<span>". $com['c_text'] ."</span>"; } } }

مبدئيا، هي صور تحوي يتم التحكم في حدودها وزواياها بشكل يجعلها تظهر بالشكل الذي هو عليه. ولكن يمكنك ايضا اضافة المزيد من الصور والطبقات والعناصر فوق الصورة والتأكد من جعلها تتموضع بشكل صحيح. قد تمتلك هاته الصور اجزاء شفافة بشكل ما يجعل ظهور الصورة الاخرى يظهر بشكل منحني او مائل او دائري. فعلى سبيل المثال: ليكن المكون banner على الشكل: <div class="banner"> <img width="200px" src="my-img.png" alt="text" /> </div> لنضف طبقة جزء منها شفاف كـ: <div class="banner"> <img class="my-img" src="path/to/img" alt="text" /> <img class="layer" src="path/to/layer"> </div> ولنطبق التنسيقات التالية عليهما: .banner{ position: relative; } .banner .layer{ position: absolute; /*جعل الطبقة تتموضع بشكل مطلق*/ top: 0; right: 0; width: 100%; } تفحص المثال. ابحث عن layers png وستجد الكثير من الاشكال التي يمكن وضعها فوق صورة ما لتعطي ناتجا يظهر بشكل جميل.

بداية، يمكنك اختصار الشيفرات التالية: function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ toggleBtn.classList.remove('toggle-on'); toggleBtn.classList.add('toggle-off'); navMenu.classList.remove('w-[75px]'); navMenu.classList.remove('rounded-[40px]'); navMenu.classList.add('w-[250px]'); navMenu.classList.add('rounded-[20px]'); container.classList.remove('left-[70px]'); container.classList.add('left-[250px]'); }else{ toggleBtn.classList.remove('toggle-off'); toggleBtn.classList.add('toggle-on'); navMenu.classList.remove('w-[250px]'); navMenu.classList.add('w-[75px]'); navMenu.classList.remove('rounded-[20px]'); navMenu.classList.add('rounded-[40px]'); container.classList.remove('left-[250px]'); container.classList.add('left-[70px]'); } لتصبح: function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ toggleBtn.classList.remove('toggle-on'); toggleBtn.classList.add('toggle-off'); navMenu.classList.remove('w-[75px]' ,'rounded-[40px]'); navMenu.classList.add('w-[250px]' ,'rounded-[20px]'); container.classList.remove('left-[70px]'); container.classList.add('left-[250px]'); }else{ toggleBtn.classList.remove('toggle-off'); toggleBtn.classList.add('toggle-on'); navMenu.classList.remove('w-[250px]' ,'rounded-[20px]'); navMenu.classList.add('w-[75px]' ,'rounded-[40px]'); container.classList.remove('left-[250px]'); container.classList.add('left-[70px]'); } ثم ما الحاجة من كل هاته التلاعبات بشجرة الوثيقة؟ لما لا يكفي تغيير صنف واحد وليكن هو حاوي قائمة التصفح. قم بتبديل صنف واحد مثلا وليكن is-enabled function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ navMenu.classList.add('is-enabled') }else{ navMenu.classList.remove('is-enabled') } أو حتى: function toggleOn(){ navMenu.classList.toggle('is-enabled') ثم تعامل مع الباقي عن طريق الـ css و tailwindCSS: .nav-menu { // اي تنسيقات } .nav-menu .toggle-btn{ // اي تنسيقات } .nav-menu .container{ // اي تنسيقات } .nav-menu.is-enabled { // اي تنسيقات } .nav-menu.is-enabled .toggle-btn{ // اي تنسيقات } .nav-menu.is-enabled .container{ // اي تنسيقات } او عن طريق sass: .nav-menu { // اي تنسيقات .toggle-btn{ // اي تنسيقات } .container{ // اي تنسيقات } &.is-enabled { // اي تنسيقات .toggle-btn{ // اي تنسيقات } .container{ // اي تنسيقات } } } يوجد قاعدة تسعى لتحسين تجربة الاستخدام تسمى Less Javascript, more HTML and CSS أي "اقل جافاسكربت ، اكثر HTML و CSS". حاول التقليل من الاعتماد على جافاسكربت كليا في اشياء يمكن القيام بها عن طريق css (رغم انها قادرة).

بطبيعة الحال لأن الشرط المقيد بها غير محقق. فـقيمة pshirt لا تساوي قيمة ite. راجع القيم التي يحتويها كلا المتغيران. أظنك تحتاجين تنظيم الشيفرة وتهويتها اكثر، بجانب اعطاء اسماء اكثر دلالية للمتغيرات. ما الذي قد يعنيه ite مثلا؟

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

يشير الخطأ الى الموضع 17 من ملف main-sidebar.blade.php الموافق لـ Auth::user()->name . يحدث الخطأ في الغالب عندما تحاول الوصول الى صفحة تقوم باستعمال ملف العرض main-sidebar.blade.php بدون ان يتم توثيق تسجيل الدخول، فالقيمة Auth::user ليست كائنا وبالتالي لن يمكن قراءة الخاصية name منه. الحل: يجب اما حماية الصفحة التي تستعمل هذا الملف بطبقة وسيطة auth أو قراءة الخاصية name بشكل شرطي وليكن: Auth::user() ? Auth::user()->name : null

استخدام الخاصية loading قد يكون حلا كافيا في بعض المتصفحات الحديثة ولكن رغم هذا الا انه يفضل عمل مقاربة تشمل كامل المتصفحات. يمكنك تخزين الرابط المصدري للصورة في خاصية مخصصة ولتكن data-source ثم عن طريق الجافاسكربت تحديد كامل عناصر الصور في الوثيقة وحقن القيمة المخزنة بـ source داخل src حتى يتم تفسيرها من المتصفح بشكل عادي. وبالطبع فان هذا يكون بعد عرضها في الوثيقة او بالاستماع لحدث ما. <img src="" data-source="./path/to/img.png" alt="image title" /> يتم الاستعانة بمفهوم مراقبات التقاطع Intersection observers لخدمة هذا الغرض في الغالب. يمكنك بها التعرف ما ان كانت الصورة معروضة او لم يتم الانزلاق اليها بعد. يمكنك كطريقة تنظيمية انشاء اكثر من ملف نعم، ولكن يفضل استعمال محددات عناصر سليلة للتعرف على تلك الخاصة باللغة العربية وتلك الخاصة بلغات اخرى. مثال: @tailwind base; @tailwind components; @tailwind utilities; body { // تنسيقات عامة } body.rtl { // تنسيقات مخصصة عربية }

الذي تحاول فعله بالضبط غير واضح، هل تحاول تطبيق خصائص معينة على العنصر الابن عند عمل هوفر على الاب؟

يمكنك ايضا الاستفادة من استخدام مفهوم الـ lazy loading لتحميل الصور وعرضها بالصفحة. والفكرة الاساسية فيه هو ان الصور يتم عرضها وتحميلها من موردها الاصلي بعد عرضها في الواجهة فقط وليس مع تحميل الصفحة. وهو ما سيقوم بتسريع اداء الموقع بشكل مبالغ فيه. قم بضغط وتقليل ملفات الجافاسكربت والcss التي تستخدمها داخل الموقع، استعمل تطبيقات ال minifier للتخلص من الفراغات والتعليقات وغيرها من الاشياء التي تقوم بتكبير حجم الملف. التزم بقواعد الشيفرات النظيفة ولا تكرر ما تقوم به، حاول اختصار شيفراتك وأعد صيانتها. لا تستعمل المكتبات إلا في حالة الحاجة لها حقا، لما قد تستعمل مثلا مكتبة بـ 100 ميزة وتستعمل منها واحدة فقط؟ تذكر انها على الجافاسكربت و الـ css وقم ببناء واحدة لك تخدم غرضك بالضبط.

React Router او موجه رياكت هو في الاصل مكتبة تستعمل في التوجيه Routing من جانبي العميل والخادم. يمكن استعمالها على تطبيقات React سواء في الهاتف عن طريق ReactNative او الخادم بوساطة NodeJS او على الويب باستخدام React. بمعنى انها مثل الملحقة التي تقوم بخدمة هذا الغرض. فمثلما يمكن استعمال React لبناء عدد من المكونات التي تستعملها في صفحة الويب خاصتك يمكنك الاعتماد عليها بالكامل في انشاء تطبيقات ويب متعددة الصفحات يمكن استعمال ملحقة التوجيه بينها للتحصل على تصفح لطيف بينها يلخص عمل تطبيقات الصفحة الواحدة. يمكن تثبيته عن طريق تثبيت ملحقاته باستخدام مدير الحزم npm : npm install react-router-dom في المكون الجذر للتطبيق، قم باستيراد وحدة BrowserRouter وضع داخلها مكون التطبيق: import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") ); root.render( <BrowserRouter> <App /> </BrowserRouter> ); ثم بأي مكون ما يمكنك استعمال اي رابط للتنقل الى صفحة اخرى كـ: import { Link } from "react-router-dom"; export default function App() { return ( <div> <h1>اسم التطبيق</h1> <nav> <Link to="/contact-us">اتصل بنا</Link> </nav> </div> ); } يقتضي هذا ان يكون هنالك مكون باسم contact-us على ذات مستوى App.js

هل تبحث عن طريقة لتخزين مصفوفة في قواعد البيانات؟

نعم يمكنك بناء تطبيقات ويب وتطبيقات جوال في ذات الوقت عن طريق flutter او xamarin. فهاته التقنيات قادرة على انشاء تطبيقات cross-platform قادرة على الاشتغال في كلتا البيئتين. ولكنه لا ينصح بهما دوما في اغلب حلول الويب. فقد يفيان بالغرض في بناء لوحات تحكم او تطبيقات صفحة واحدة SPA's او تطبيقات الويب التقديمة PWA ولكنهما يفشلان في تقديم حلول لتطبيقات الويب التي تعتمد بشكل كبير على تحسين محركات البحث والتصفح SEO مثل المدونات والمواقع الشخصية والمنتديات وغيرها. فـ flutter مثلا يعتمد على ال hashes في التوجيه routing داخل الموقع وهو ما ليس جيدا بالنسبة لمحركات البحث. وهذا راجع الى كون flutter web يعتمد على الجافاسكربت في تصيير المكونات على المتصفح بعد طلب الصفحة. وهو الامر الآخر السيء بالنسبة لموضوع ال SEO. الويب ما يزال يعتمد على ال HTML الدلالي بشكل كبير وهو شيء لا تعوضه طريقة React او VueJS او Angular او Flutter في تصيير المكونات بصفحات الويب. بالنسبة لأطر عمل الواجهة الأمامية فقد تجاوز اغلبها هذا الموضوع بسبب ظهور موضوع التصيير على الخادم SSR والتصيير المسبق Pre-rendering ولكن هذا الامر لم يشمل flutter بعد. يأمل الكثيرون من مطوروه ان يتم تطويره ليستوعب هذا المفهوم ايضا. (يمكنك الاستفادة من متابعة نقاش حول هذا الموضوع على github).

كطريقة تقليدية جدا يمكنك اعادة اعداد البريد كل مرة تريد فيها تبديل تلك التي تعدها في المشروع. استعمل التابع الثابت set عن الواجهة Config لتعيين قيمة جديدة لمفتاح معين: /** * ارسال رسالة بريد الكتروني باستخدام خدمة معينة * @return void */ public function sendMail() { // شيفرة ارسال الرسالة } /** * ارسال رسالة بريد الكتروني باستخدام خدمة غير الاولى * @return void */ public function sendMailUsingOtherService() { $this->switchMailer(); // شيفرة ارسال الرسالة } /** * اعادة اعداد خدمة البريد * @return void */ private function switchMailer() { Config::set('mail.encryption','ssl'); // طريقة تشفير جديدة Config::set('mail.host','smtps.example.com'); // مستضيف خدمة جديد Config::set('mail.port','465'); // منفذ جديد Config::set('mail.username','youraddress@example.com'); // اسم مستخدم جديد Config::set('mail.password','password'); // كلمة مرور جديدة Config::set('mail.from', ['address' => 'JhonDoe@gmail.com' , 'name' => 'JhonDoe']); Artisan::call('cache:clear'); // قد تكون هاته الخطوة ضرورية ايضا لاعادة التقاط التحديثات } اما كحل يلائم النسخ التي هي اكبر من النسخة 7.x فيوجد التابع mailer الذي يمكن من خلاله تحديد خدمة البريد التي تستهدفها بارسالك رسالة معينة: Mail::mailer('my_mailer') ->to($user()) ->send(new MyMailableClass()); راجع ايضا التعامل مع البريد الإلكتروني (Mail) في Laravel

بالطبع يمكن. فآداء لارافيل مع قاعدة بيانات NoSQL شيء خرافي حقا. يتم الاستعمال عادة مع اعدادها بوساطة بيئات تطوير مثل Homestead. يوجد خيار mongodb يقبل قيمة بوليانية في ملف اعداد homestead مثلا. اما استعمالها بشكل منفصل فيكون بوساطة حزم composer توفر هاته الوظيفية (أظنها افضل). توجد مثلا حزمة jenssegers/mongodb. حيث تضيف هذه الحزمة وظائف إلى نموذج Eloquent ومنشئ لاستعلامات لـ MongoDB باستخدام واجهة التطبيق البرمجية للارافيل. وتستعمل نفس الوظائف بالضبط تماما. أي انك بعد عملية الضبط واعداد الاتصال الا التعامل مع Laravel Eloquent بشكل كلي. تثبت عن طريق تنفيذ الامر: composer require jenssegers/mongodb ويتم اعداد الاتصال في مصفوفة connections في ملف الاعداد database.php كـ: 'connections' => [ 'mongodb' => [ 'driver' => 'mongodb', 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', 27017), 'database' => env('DB_DATABASE', 'homestead'), 'username' => env('DB_USERNAME', 'homestead'), 'password' => env('DB_PASSWORD', 'secret'), 'options' => [ 'database' => env('DB_AUTHENTICATION_DATABASE', 'admin'), // required with Mongo 3+ ], ], في الاستعمال، يجب وراثة صنف النموذج الاساسي للحزمة: use Jenssegers\Mongodb\Eloquent\Model; class Book extends Model { // } ثم يمكنك البدء باستعمالها بشكل عادي تماما.

بجانب المشار اليه من قبل المدرب وائل يمكنك التحقق من انه تم ارسال رسالة بريد الكتروني في بيئة اختبارية عن طريق التوكيد assertSent use Illuminate\Support\Facades\Mail; .. /** @test*/ public function a_mail_is_sent() { Mail::fake(); $this->post('/path/to/target' ,$someData); Mail::assertSent(YourMailable::class); } او عددا معينا من المرات: Mail::assertSent(YourMailable::class, 2); او تفاصيل الرسالة: Mail::assertSent(YourMailable::class, function ($mail) use ($user) { return $mail->hasTo($user->email) && // مرسل الى $mail->hasFrom('...') && // مرسل من طرف $mail->hasSubject('...'); // موضوع المراسلة });

ان كنت تقوم بتعريف قيمة لمتغير البيئة MAIL_MAILER في ملف env. فإنه سيتم اعتبارها مباشرة، وستترك القيمة log كقيمة افتراضية في حالة عدم اعداد هذا المتغير فقط. جرب ايضا تجاوز تعريف القيمة بملف متغيرات البيئة: MAIL_MAILER=log اجعلها log بدل smtp. لا تنسى ايضا محو التخزين المؤقت لملفات الاعداد لالتقاط الاعداد الجديد: php artisan config:clear

لمعرفة القالب المستعمل في وردبرس نقوم اما باللجوء للتطبيقات والاضافات الكاشفة من مثل wpthemedetector أو satoristudio أو حتى اضافات قوقل كروم من مثل wordpress-theme-detector. تستقبل هاته التطبيقات رابط الموقع وتقوم بتحليل الشيفرات لتجد القالب المستعمل. يمكن ايضا معرفة ذلك يدويا، عن طريق الوصول الى الكود المصدري للصفحة والبحث عن ما يلي wp-content/themes/ فهو اسم القالب مباشرة. فعلى سبيل المثال، كل من المرفق سابقا يشير الى استخدام القالب الذي اسمه Publisher مقدم من BetterStudio.

بجانب الاشارة الى المفتاح يجب الاشارة ايضا الى اسم الملف الحاوي للاعداد. فان كان الملف هو app.php نشير الى المتغير كـ: app.author ويكون استدعاءه كـ: {{ Config::get('app.author') }} او مباشرة باستعمال الدالة المساعدة config: config('app.author') الضبط في Laravel

يحدث هذا لأن التابع update تابع غير ثابت، على عكس insert او create مثلا. يجب الاشارة الى انموذج من الصنف Feature لتعديل بياناته فأنت تستهدف عنصرا معينا. فبدل: Feature::update($request->id, Request::all()); للبحث عن "ميزة" معينة وتعديل بياناتها. نستعين بـ find للبحث والاستعلام و update للتحديث والتجاوز: Feature::find($request->id)->update(Request::all()); مقدمة إلى رابط الكائنات بالعلاقات Eloquent