محمد أيت لعرايك
الأعضاء-
المساهمات
212 -
تاريخ الانضمام
-
تاريخ آخر زيارة
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو محمد أيت لعرايك
-
الطريقة الموصى بها لكتابة منطق التحقق هي وضع هذا المنطق في ملف منفصل. بهذه الطريقة سيبقى الكود الخاص بك نظيفًا أكتب الأمر التالي php artisan make:request SomeRequest في الدالة Rules حدد قواعد التحقق الخاصة بك و هنا سنشرح كيف تتحقق من مصفوفة public function rules() { return [ "name" => [ 'required', // هدا الحقل إجباري 'array', // هذا الحقل يجب أن يكون على شكل مصفوفة 'min:3' // ويجب أن تكون المصفوفة تحتوي على الأقل على ثلاثة عناصر 'distinct' // ويجب أن تكون عناصر مختلفة ], // حقول أخرى هنا ]; }
-
أسهل طريقة إذا كنت تستخدم ES6. let initialArray = [1, 2, 3]; let newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4] ستكون المصفوفة الجديدة [1،2،3،4] والان لتحديث المصفوفة يكفي أن تكتب : this.setState({ arrayvar:[...this.state.arrayvar, newelement] }); يمكنك تطبيق نفس الطريقة على المتغير updatedDescriptions
- 1 جواب
-
- 1
-
يمكن عمل ذلك بطريقة سهلة بواسطة jquery على الشكل التالي: $(document).ready(function(){ var addInput = function(){ // بناء حقل جديد var input = $('<input type="text" class="form-control">'); // إضافة الحقل عند النقر على الحقل الأول input.insertAfter(this); // تفعيل الحدث وإنتظار نقرة جديدة input.on('click',addInput) } $('input').on('click',addInput) // عند الضغط على الحقل تقوم الدالة المبينة أعلاه باضافة حقل جديد // وتقوم بوضع حدث جديد لترقب نقرة جديد });
-
وأيضا يمكنك إستخدام قواعد التحقق من الصحة المخصصة Custom Validation Rules نفد الأمر php artisan make:rule ValidateArray في الملف المولد أكتب التالي: <?php namespace App\Rules; use Illuminate\Contracts\Validation\Rule; class ValidateArray implements Rule { /** * Determine if the validation rule passes. * * @param string $attribute * @param mixed $value * @return bool */ public function passes($attribute, $value) { return is_array($value); // نتحقق أن المتغير عبارة عن مصفوفة } /** * Get the validation error message. * * @return string */ public function message() { return 'The :attribute must be an array .'; // هنا تكتب رسالة للمستخدم } } بمجرد تحديد القاعدة ، يمكنك إرفاقها بمدقق عن طريق تمرير مثيل لكائن القاعدة مع قواعد التحقق الأخرى الخاصة بك: use App\Rules\ValidateArray; $request->validate([ 'name' => ['required', 'string', new ValidateArray()], ]); .و يمكنك أيضا إضافة العديد من الشروط في القاعدة كطول و نوعية مكونات المصفوفة
- 3 اجابة
-
- 1
-
أنا أنصحك بإستخدام arrow function مثال class SomeClass extends React.Component { changeContent = (e) => { // arrow function هنا تم إستخدام دالة الأسهم this.setState({inputContent: e.target.value}) // this والأن يمكنك الوصول إلى المكون عن طريق } render() { return ( <button onClick={this.handleClick}></button> ); } } في حالة عدم إستخدام دالة السهم سيكون الكود على الشكل التالي: class SomeClass extends React.Component { changeContent(e) { this.setState({inputContent: e.target.value}) //هنا خطأ } render() { return ( <button onClick={()=>{this.handleClick}}></button> ); } } وهذا يعمل بسبب حقيقة أن وظائف السهم arrow functions لا تكون this خاصة بها ، ولكن تأخد هذا من المكون المجودة بها. في هذه الحالة ، فإن this يشير إلى المكون الخاص بك -
-
توجد طريقة أخرى لترتيب التعليقات بواسطة حقل created_at كالتالي : $user = Auth::user() $user = $user->with(['comments' => function ($query) use ('ASC') { $query->orderBy('creatd_at', 'ASC'); }]); بعد ذلك يمكن إظهار التعليقات في صفحة العرض : foreach($user->comments as $comment) { echo "<li>" . $comment->title . " (" . $comment->post->id . ")</li>"; } وهكدا ستظهر التعليقات مرتبة على حسب تاريخ إضافتها
-
إضافة على ما ورد في جواب المدرب عبود فالأمر sudo apt install php-xml سيعمل ولكنه سيتم تنزيل المكون الإضافي لأحدث إصدار من PHP. ولهذا إذا لم يكن إصدار PHP الخاص بك هو الأحدث ، فيمكنك تنفيد الأوامر التالية حسب نسخة PHP الخاصة بك: # PHP 7.1 sudo apt install php7.1-xml # PHP 7.2: sudo apt install php7.2-xml # PHP 7.3 sudo apt install php7.3-xml # PHP 7.4 sudo apt install php7.4-xml # PHP 8 sudo apt install php-xml
- 2 اجابة
-
- 1
-
توجد طريقة أخرى لإضافة الخاصية إلى نمودج وهي عن طريق تعريف دالة خاصة في ملف النمودج الخاص بك مثلا: لنفترض أن لديك عمودين باسم first_name و last_name في جدول المستخدمين وتريد استرداد الاسم الكامل. يمكنك تحقيق ذلك من خلال الكود التالي: class User extends Eloquent { public function getFullNameAttribute() { return $this->first_name.' '.$this->last_name; } } الآن يمكنك الحصول على الاسم الكامل full_name على النحو التالي: $user = User::find(1); $user->full_name;
- 2 اجابة
-
- 1
-
للإضافة , ف css selectors تعمل على حسب الأولوية وتكون على الشكل التالي: - المرتبة الأولى : !important على تنسيق العنصر مثلا .className { color: "red" !important } - المرتبة الثانية : السمة style على العنصر مثلا <h1 style="color:red">Hello world</h1> - المرتبة الثالثة: التنسيق بواسطة ID #messageID{ color: "blue" } - المرتبة الرابعة التنسيق بواسطة ال class .className { color : "orange" } - المرتية الخامسة التنسيق بواسطة العنصر نفسه h1{ color: "green" } للمزيد من التفاصيل حول أولويات التحديد في css يمكنك زيارة موقع مجتمعات W3C هنا
- 4 اجابة
-
- 1
-
يمكنك أن تتحقق من تاريخ معين في PHP بكل سهولة عن طريق تحويل التاريخ إلى string بعد ذلك تستعمل الدالة التالية. $birth = '2000-02-15'; $birth_arr = explode('-', $birth); if (checkdate($birth_arr[2], $birth_arr[1], $birth_arr[0])) { // التاريخ صحيح ويحتوي على الشهر واليوم والسنة }else if($birth_arr[0] && !$birth_arr[1] && !$birth_arr[2]){ // هنا تتأكد أنه لايوجد يوم ولا شهر فقط سنة // التاريخ على شكل سنة } هنا قمت بإستعمال الدالة checkdate في PHP يمكنك الإطلاع على كيفية إستخدامها من هنا
- 10 اجابة
-
- 1
-
يمكنك أيضا إستخدام مصفوفة وتضع فيها جميع من الأسئلة ويمكنك إضافة العديد منها في المستقبل كي يكون الكود الخاص بك قابل للتطوير: مثال #هنا مصفوفة تجمع فيها جميع الأسئلة messages = ["I like to play football","The sky is blue","Python is a programming language"] # تطلب من المستعمل إدخال رقم user_value = input("Type : ") # تقوم بطباعة الرسالة مباشرة # بعد التأكد أن الرقم صحيح ويبدأ بالرقم 1 if(user_value >= 1 && user_value <= len(messages)) : print(messages[user_value - 1])
- 2 اجابة
-
- 1
-
لقد ظهر هذا الخطأ لأنك تقوم بعمل GET Request في مسار لا يقبل إلا POST. في المثال الذي تفضلت به لدينا Route::post('/settings/update', 'SettingsController@update'); إدا ذهبنا إلى المسار http://localhost:8000/settings/update فسيظهر الخطأ MethodNotAllowedHttpException لأن هذا المسار لا يقبل هذا النوع من Request والحل هو إضافة مسار اخر يقبل GET Request لإظهار form تعديل الإعدادات مثلا هكدا Route::get('/settings/create', 'SettingsController@create');
- 3 اجابة
-
- 1
-
إذا كنت لا تريد إستخدام الدالة ()diff و تريد حساب الفرق بين تاريخين بالسنوات و الأشهر و الأيام فيمكنك إستخدام الطريقة التالية: $birth = "1956-03-24"; //تاريخ الولادة $death = "2009-06-26"; // تاريخ الوفاة $diff = abs(strtotime($death) - strtotime($birth)); // حساب الفرق الموجب بين التاريخين $years = floor($diff / (365*60*60*24)); // حساب عدد السنوات $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));// حساب عدد الأشهر $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24)); // حساب عدد الأيام printf('%d سنة %d شهر %d يوم', $years, $months, $days); // طباعة النتيجة printf("\n");
- 10 اجابة
-
- 1
-
توجد طريقة أخرى لتفادي هذا المشكل و هي : 1- أنشئ middleware بسيطة وسمها مثلا Cors: php artisan make:middleware Cors 2- أضف التعليمات البرمجية التالية إلى app/Http/Middleware/Cors.php public function handle($request, Closure $next) { return $next($request) // هنا أضع الإستضافات المسموح بها , في هذه الحالة مسموح لجميع الإستضافات ->header('Access-Control-Allow-Origin', '*') // هنا يمكنك إضافة الدوال المسموح بها ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); } يمكنك استبدال * ب localhost إدا كنت في المضيف المحلي 3-تحميل البرمجيات الوسيطة. أضف السطر التالي إلى مصفوفة routeMiddleware$ في app/Http/Kernel.php 'cors' => \App\Http\Middleware\Cors::class, 4- والخطوة الأخيرة هي استخدام Middleware على المسارات التي تريدها : بافتراض أنك تتحدث عن مسارات api جديدة في Laravel ، فإن المكان المناسب للقيام بذلك هو app/Providers/RouteServiceProvider.php ، داخل وظيفة mapApiRoutes Route::group([ 'middleware' => ['api', 'cors'], 'namespace' => $this->namespace, 'prefix' => 'api', ], function ($router) { // يمكن إضافةالمسرات الخاصة بك هنا Route::apiResource('/posts','PostController'); }); بعد ذلك لن يظهر لك هذا المشكل بعد إضافة cors middleware في RouteServiceProvider.php
-
تعد مربعات التعريف الوصفية Meta boxes واجهة سهلة الاستخدام لإضافة حقول معينة (بيانات التعريف) في منشوراتك وصفحاتك وأنواع المنشورات المخصصة الأخرى.custom post types يأتي WordPress بواجهة سهلة الاستخدام تساعدك على إنشاء محتوى مثل المنشورات والصفحات أو أنواع المنشورات المخصصة. و عادة ، يتكون كل نوع من أنواع المحتوى من المحتوى الفعلي وبيانات التعريف الخاصة به. البيانات الوصفية هي معلومات متعلقة بهذا المحتوى مثل التاريخ والوقت واسم المؤلف والعنوان وغير ذلك. يمكنك أيضًا إضافة بيانات التعريف الخاصة بك باستخدام الحقول المخصصة. custom fields. لإنشاء Meta Boxes مخصص في WordPress ما عليك القيام به هو تثبيت وتفعيل المكون الإضافي Advanced Custom Fields. لمزيد من التفاصيل ، راجع هذا المقال يشرح لك كيفية تثبيت مكون Advanced Custom Fields. بعد ذلك تحتاج إلى تحديد نوع الحقل. يسمح لك المكون الإضافي Advanced Custom Fields بالاختيار من بين مجموعة كاملة من الخيارات. يتضمن ذلك النص ومنطقة النص وأزرار الاختيار ومربعات الاختيار ومحرر WYSIWYG الكامل والصور والمزيد. بمجرد الانتهاء من إضافة الحقول ، يمكنك النزول لأسفل إلى قسم الموقع. هنا المكان الذي يمكنك فيه تحديد متى وأين تريد عرض مربع التعريف الخاص بك. تأتي الحقول المخصصة المتقدمة Advanced Custom Fields مع عدد قليل من القواعد المحددة مسبقًا لتختار من بينها. على سبيل المثال ، يمكنك تحديد أنواع المنشور ، وفئة المنشور ، والتصنيف ، وأصل الصفحة ... بعد إنشاء مربع تعريف مخصص وعرضه على شاشة تحرير المنشور الخاصة بك. تحتاج عرض البيانات المخزنة في تلك الحقول على قالب WordPress الخاص بك. ويوجد طرقتان : أولا يمكنك استخدام رمز قصير لعرض حقل مخصص في المنشور الخاص بك [acf field="article_info"] أو عن طريق الكود البرمجي الخاص بالقالب <h2 class="article"> <?php the_field('article_info'); ?> </h2> سيعرض هذا الرمز البيانات التي تم إدخالها في الحقل المخصص
-
java تعتمد أساسا على البرمجة الكائنية و هناك أربعة مفاهيم object oriented programming رئيسية في Java. هي: التجريد. Abstraction التجريد يعني استخدام أشياء بسيطة لتمثيل التعقيد. complexity نعلم جميعًا كيفية تشغيل التلفزيون ، لكننا لسنا بحاجة إلى معرفة كيفية عمله للإ ستمتاع به. في Java ، يعني Abstraction أن الأشياء البسيطة مثل الكائنات والفئات والمتغيرات تمثل كودًا أساسيًا وبيانات أكثر تعقيدًا. هذا مهم لأنه يتيح لك تجنب تكرار نفس العمل عدة مرات. التغليف.Encapsulation هذه هي ممارسة إبقاء الحقول داخلclasse خاصة ، ثم توفير الوصول إليها عن طريق الدوال العامة. إنه حاجز وقائي يحافظ على أمان البيانات والكود داخل ال class نفسه. بهذه الطريقة ، يمكننا إعادة استخدام كائنات أو المتغيرات دون السماح بالوصول المفتوح إلى البيانات على مستوى النظام. ميراث. Inheritance هذه ميزة خاصة في البرمجة الشيئية في Java. يتيح للمبرمجين إنشاء فئات جديدة تشترك في بعض سمات الفئات الموجودة. يتيح لنا ذلك البناء على الأعمال السابقة دون إعادة اختراع العجلة. تعدد الأشكال. Polymorphism يتيح مفهوم Java OOP هذا للمبرمجين استخدام نفس الكلمة لتعني أشياء مختلفة في سياقات مختلفة. أحد أشكال تعدد الأشكال في Java هو طريقة التحميل الزائد. method overloading هذا عندما يتم تضمين معاني مختلفة من خلال الدالة نفسها. على العموم تعد لغة java لغة إحترافية ومعقدة في نفس الوقت ولا ينصح البدء في تعلمها للمبتدئين اللذين يريدون تعلم البرمجة لأول مرة لكثرة المفاهيم المعقدة بها. ولمزيد من التفاصيل حول هذه اللغة يمكنك الإطلاع على التوثيق الرسمي.
-
اتصال WebSocket هو اتصال دائم بين المتصفح والخادم. يسمح بالاتصال ثنائي الاتجاه: يمكن للخادم إرسال رسائل إلى المتصفح ويمكن للمتصفح - العميل - الرد عبر نفس الاتصال. هذا يختلف عن Ajax العادي ، وهو اتصال أحادي الاتجاه فقط: يمكن للعميل فقط طلب الأشياء من الخادم. ولإنشاء أحداث خاصة مع استخدام websockets أنصحك بإسنخدام laravel-websockets package عند تثبيت الخزمة يمكنك الإستفادة من الدوال على شكل أحداث في كل إتصال مثلا لدينا onOpen: سيتم استدعاؤه عندما يفتح عميل جديد اتصال webSockets onMessage: سيتم استدعاؤه عندما يرسل العميل رسالة جديدة عبر webSocket. onClose سيتم استدعاؤه عند قطع اتصال العميل (عادةً عن طريق التنقل إلى صفحة أخرى ، أو إغلاق علامة التبويب أو نافذة المتصفح) public function onOpen(ConnectionInterface $connection) { // عند فتح الإتصال } public function onMessage(ConnectionInterface $connection, MessageInterface $message) { // عند إرسال رسالة عبر الإتصال } public function onClose(ConnectionInterface $connection) { // عند إنتهاء الإتصال } public function onError(ConnectionInterface $connection, Exception $exception) { // عند حدوث خطأ في لإتصال }
-
تأكد دائما عند إستعمال الدالة json.decode من أن الكائن غير فارغ. وأفضل طريقة لكتابة الكود الخاص بك هو على الشكل التالي: if(response.body.isNotEmpty) { final items = json.decode(response.body).cast<Map<String, dynamic>>(); }else{ // فارغ response.body هنا // يمكن كتابة الكود الخاص بك هنا }
- 1 جواب
-
- 1
-
إذا كنت قد أنشأت تطبيقك باستخدام تطبيق create-react-app ، فمشروعك يتوفر على ملف env. خاص يكون شكله كما هو مبين هنا . ولجلب متغيرات البيئة ما عليك سوى إرفاق REACT_APP مسبقًا بكل متغير ، مثلا إدا كنت تريد devapi ما عليك سوى كتابة process.env.REACT_APP_devapi لنفترض أنك تريد إظهر المتغير PORT داخل مكون react . ما عليك سوى كتابة : render() { return ( <div> <small>You are running this application in port <b>{process.env.REACT_APP_PORT}</b></small> </div> ); }
-
بدلاً من استخدام نفس المنطق لتعيين عنوان الصفحة في جميع المكونات في التطبيق الخاص بك ، يمكن بإنشاء hook مخصص جديد نسميه مثلا ()useDocTitle والذي يساعدنا على إعادة إستخدام المنطق اللذي نريد في كل مكون على حدى. ويمكن فعل ذلك على الكل التالي: import React, { useEffect, useState } from "react"; const useDocTitle = title => { const [doctitle, setDocTitle] = useState(title); useEffect(() => { document.title = doctitle; }, [doctitle]); return [doctitle, setDocTitle]; }; export {useDocTitle}; بعد ذلك يمكننا إستخدام useDocTitle لإعطاء عنوان جديد لكل صفحة : import {useDocTitle} from "customHooks" export default function App() { const [doctitle, setDocTitle] = useDocTitle("Home page"); return ( <div className="App"> <h1>Hello React</h1> {/* نغير العنوان ديناميكيا */} <button onClick={() => setDocTitle("الصفحة الرئيسية")}> Change title </button> </div> ); }
-
أريد أن أضيف ملاحظة صغيرة على ما ذكره المدرب بلال وهو أنك بحاجة إلى تغيير الإتجاه من يسار-يمين LTR إلى يمين-يسار RTL عند تغيير اللغة غي قالب wordpress. ويمكن عمل ذلك بإتباع الخطوات التالية : الخطوة الأولى: قم بإنشاء ملف RTL .للقالب الخاص بك, أنصحك بإستخدام RTLCSS . فهو سيساعدك على تحويل ملف style.css الخاص بالقالب إلى إلى ملف style-rtl.css قم بحفظه في مجلد القالب . وأيضا يوجد cssjanus هذه الأداة بسيطة جدا فهي تقوم أيضا بعملية تحويل ملف style.css إلى style-rtl.css بكل سهولة فقط أكتب CSS من اليسار إلى اليمين (LTR) في الواجهة اليمنى ، وانقر فوق الزر Submit ، وشاهد RTL CSS على اليمين. الخطوة الثانية : تأكد من أن WordPress يرى ملف style-rtl.css المحفوظ في مجلد القالب. يمكن فعل ذلك بإضافة الكود أدناه في ملف functions.php function enqueue_theme_files() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); wp_style_add_data( 'themeslug-style', 'rtl', 'replace' ); } add_action( 'wp_enqueue_scripts', 'enqueue_theme_files' ); هده الدالة تخبر وردبرس بإستخدام ملف style-rtl.css عوض style.css عند عند تغيير اللغة الخطوة الثالثة: إختبار RTL في قالب wordpress ببساطة قم بتغيير اللغة في لوحة التحكم الخاصب بك بالذهاب إلى الإعدادات ثم غير اللغة إلى الغة العربية بعد الحفظ ، سترى أن كل شيء أصبح الآن من اليمين إلى اليسار
-
توجد طريقة أخرى لحل هذه المشكلة, وهي عن طرق إعادة تضمين اسم البيئة في الدالة authorization في ملف App\Providers\TelescopeServiceProvider يجب تغيير القيمة المسترجعة من الدالة authorization /** * Configure the Telescope authorization services. * * @return void */ protected function authorization() { $this->gate(); Telescope::auth(function ($request) { return app()->environment('local') || Gate::check('viewTelescope', [$request->user()]); }); } بالقيمة التالية مع تضمين اسم البيئة testing : return app()->environment(['local', testing]) || Gate::check('viewTelescope', [$request->user()]);
-
أريد أن أضيف ملاحظة صغيرة على الجواب الممتاز الذي ذكره المدرب عبود: إذا كنت تتساءل ، "لماذا أستخدم الدالة validateOnly؟ مع العلم أنني ممكن أستخدم validate؟" والسبب أن الدالة validate في كل تحديث فردي لأي حقل تقوم بالتحقق من صحة جميع الحقول. و يمكن أن تكون هذه تجربة مستخدم سيئة للغاية. تخيل أنك إدا كتبت حرفًا واحدًا في الحقل الأول من ال Form تظهر لك رسالة تحقق من صحة الحقل في جميع الحقول. . ValidateOnly يمنع ذلك ، ويتحقق فقط من صحة الحقل الحالي الجاري تحديثه
- 2 اجابة
-
- 2
-
انظر الكود جيدا promises معرفة في سطر const promises = await socket.on('getDetails' , async (response) => { console.log("order details:" + response); }) }