لوحة المتصدرين

السبب في هذه المشكلة أنك خالفت العُرف في تعريفك للمفاتيح الثانوية فلا يوجد مفتاح ثانوي بالإسم user_id في جدول المشتريات و بما أنك خالفت العُرف يجب أن تكون صريح بخصوص المفتاح الثانوي عند إنشائك لعلاقة user في النموذج Purshase و بما أن هناك حقلين created_by و updated_by فهناك حالات يكون فيها المُنشئ ليس هو المُعدل و بالتالي يوجد علاقتين بالشكل التالي: public function creator(){ return $this->belongsTo('App\Models\User', 'created_by'); } public function updater(){ return $this->belongsTo('App\Models\User', 'updated_by'); } و في صفحة العرض تقوم بالتالي: <h6><strong>Created By:</strong> {{ $purchase->creator->name }}</h6> <h6><strong>Updated By:</strong> {{ $purchase->updater->name ?? 'لم يتم التعديل' }}</h6>

لديك عدة طرق أرفق لك منها إثنتين 1- بإستخدام ال state export default function Send() { const[buttonDisabled, setButtonDisabled] = useState(false); // الخطوة 1 const handleSubmit = () => { setButtonDisabled(true) // الخطوة 2 axios.post(...).then(res => {...}).catch(err => ...) } return ( <div> // .... الخطوة 3 <button disabled={buttonDisabled} onClick={handleSubmit}>send</button> </div> ) } 2- بإستخدام ال refs export default function Send() { const buttonRef = useRef(); // الخطوة رقم 1 const handleSubmit = () => { // الخطوة رقم 2 if(buttonRef.current){ buttonRef.current.setAttribute("disabled", "disabled"); } axios.post(...).then(res => {...}).catch(err => ...) } return ( <div> ....// الخطوة رقم 3 <button ref={buttonRef} onClick={handleSubmit}>send</button> </div> ) }

أنا الأن أستظيف مشاريعي على netlify بما أنها مجانية وأريد ان أعرف ان كان هناك أماكن أخرى مجانية لاستظافة مشاريع react وأيضا أيضا أريد معرفة ما ان كانت الاستظافات المجانية ستؤثر على كفاءة عمل المشروع واذا كان الجواب نعم ما الحل هل يجب علي استظافة مشروعي في مكان أخر مدفوع ?

أتلقى الخطأ التالي في مشروعي الذي أستعمل فيه الإصدار الثامن: Attempt to read property "created_by" on null هذا ما يوجد في ملف العرض: <h6><strong>Created By:</strong> {{ $purchase->user->created_by }}</h6> <h6><strong>Updated By:</strong> {{ $purchase->user->updated_by }}</h6> حيث النموذج User: <?php namespace App\Models; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; class User extends Authenticatable { use HasFactory, Notifiable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'role_id', 'name', 'username', 'email', 'password', ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', ]; /** * The attributes that should be cast to native types. * * @var array */ protected $casts = [ 'email_verified_at' => 'datetime', ]; public function role(){ return $this->belongsTo('App\Models\Role'); } public function scopeAuthors($query){ return $query->where('role_id',2); } public function products(){ return $this->hasMany('App\Models\Product'); } public function purchases(){ return $this->hasMany('App\Models\Purchase'); } public function invoices(){ return $this->hasMany('App\Models\Invoice'); } } و النموذج Purchase: <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Purchase extends Model { use HasFactory; public function user(){ return $this->belongsTo('App\Models\User'); } public function supplier(){ return $this->belongsTo('App\Models\Supplier'); } public function category(){ return $this->belongsTo('App\Models\Category'); } public function unit(){ return $this->belongsTo('App\Models\Unit'); } public function product(){ return $this->belongsTo('App\Models\Product'); } } ملف التهجير الخاص بالمستخدمين: public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->integer('role_id')->default(3); $table->string('name'); $table->string('username')->unique(); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->string('image')->default('default.png'); $table->rememberToken(); $table->timestamps(); }); } ملف التهجير الخاص بالمشتريات: public function up() { Schema::create('purchases', function (Blueprint $table) { $table->id(); $table->string('purchase_no'); $table->date('date'); $table->double('buying_qty'); $table->double('unit_price'); $table->double('buying_price'); $table->boolean('status')->default('0'); $table->integer('supplier_id'); $table->integer('category_id'); $table->integer('product_id'); $table->integer('created_by'); $table->integer('updated_by')->nullable(); $table->text('description')->nullable(); $table->timestamps(); }); } ماهو حل المشكلة.

السبب في المُشكلة أن بعض الحزم يجب تحديثها حتى تتوافق مع الإصدار الثامن يُمكنك معرفة ذلك من: Updating Dependencies: guzzlehttp/guzzle to ^7.0.1 facade/ignition to ^2.3.6 laravel/framework to ^8.0 laravel/ui to ^3.0 nunomaduro/collision to ^5.0 phpunit/phpunit to ^9.0 Horizon v5.0 Passport v10.0 Socialite v5.0 Telescope v4.0 و من بين الحزم حزمة Passport يجب أن تكون أعلى من 10.0 فقط قم بتغيير إصدار الحزمة إلى الإصدار الذي يتوافق مع الإصدار الثامن للارافل ثم قم بتنفيذ: composer update

غير واضح في السؤال ماهي لغة البرمجة التي يتم استعمالها، فيختلف تعريف المتغيّرات من لغة لأخرى، ففي بعض اللغات يجب ذكر نوع البيانات التي سيتم تخزينها في المتغيّر مثال لغة الجافا: String name = "myName"; وفي لغات أخرى يتم فقط وضع القيمة بشكل مباشر ضمن المتغيّر دون الحاجة لذكر نوع البيانات، مثال في الجافاسكريبت: var name = "myName"; --> (string) وأيضاً في بايثون: name = "Hello" عموماً، طريقة تعريف المتغيّر المذكورة في السؤال ليست خاطئة، ولكن قد تختلف من لغة برمجة لأخرى.

اكتب برنامج يقرا " نون"باستخدام داله جاهزة ويقارن اذا ادخل المستخدم كلمه تقرا من الجهتين قم بطباعه يمكن اما اذا لم تكن كذلك اطبع لايمكن

أريد عمل دالة calculate_sgpa هذه الدالة تقبل ثلاثة مدخلات، كل مدخل منهم يعبر عن درجة الطالب في مادة دراسية، وتقوم هذه الدالة بحساب درجة GPA الخاصة بالفصل الدراسي (SGPA). على سبيل المثال، يتم إستدعاء الدالة وتمرير الدرجات التالية إليها: 'A', 'A' و'D' وتقوم الدالة بإرجاع القيمة 3.0 وذلك نتيجة للعملية (4+4+1)/3

يمكنك أن توقف خاصية CSRF Token على أحد المسارات من خلال الـ Middleware الخاص بذلك وهو VerifyCsrfToken، وتم تجهيزه مسبقًا بالخاصية $except لكي يتم وضع المسارات فيه بالشكل التالي: protected $except = [ '/users/*', // لكل المسارات التي تبدأ بـ users '/test' ]; كما يمكنك أن توقف ميزة CSRF لكل مسارات التطبيق بالشكل التالي: protected $except = [ '*', ]; أو من خلال ملف app/Http/Kernel.php قم بحذف الصنف التالي من web: App\Http\Middleware\VerifyCsrfToken::class تحذير هام: لا تقم أبدًا بتعطيل خاصية CSRF Token لأن هذا الأمر من الممكن أن يسمح لمهاجم إلى القيام بعمليات معينة على حساب مستخدم ما، كتحويل مبلغ مالي من موقع بنكي، أو تعديل اسم المستخدم أو حتى يمكن أن تصل لتغيير كلمة المرور.

عن طريق عمل مصفوفه من الخيارات التي تم تحديدها وذلك كالتالي export default function Select() { const [state, setState] = useState(); const handleChange = (e) => { let value = Array.from(e.target.selectedOptions, (option) => option.value); setState(value); }; return ( <div> <select name="select" multiple={true} onChange={handleChange}> <option value={1}>First option</option> <option value={2}>Second option</option> <option value={3}>Third option</option> </select> </div> ); }

يمكنك إيقاف قيمة التحديث من خلال تمرير timestamps إلى دالة save بهذا الشكل $user->name = 'new name'; $user->save(['timestamps' => false]); أو تمريرها بهذا الشكل $user->timestamps = false; $user->name = 'new name'; $user->save();

هيكلة المجلدات ترجع بشكل كبير الى ذوق المبرمج وبرأيي الشخصي أفضل هيكلة مجلدات تبسط العمل على react الى أقصى حد هي هيكلة الصفحات بحيث كل صفحة يكون لديها مجلد components خاص بها و مجلد hooks لل custom hooks بحيث نفصل المنطق عن المكونات ونستوردها على شكل hooks مبسطة في components وفي الأخير نقوم باستيراد المكونات للمكون الصفحة الرئيسي بالنسبة لهيكلة redux فهيكلته معروفة ----src/ --utils/ --static/ --redux/ --common/ --pages/ --page1/ --hooks/ --components/ --Page1.js --page2/ --hooks/ --components/ --Page2.js --page3/ --hooks/ --components/ --Page3.js --page4/ --hooks/ --components/ --Page4.js

لا يمكنك استخدام if else داخل ال return لكن يمكنك استخدام ternary operator ولحسن الحظ ليس فقط يمكنك استخدامها لتحاكي if else بل ايضا if else if else وذلك عن طريق ربطها كسلسلة متتالية import React from 'react'; export default function test() { return false ? <h1>1</h1> : false ? <h2>2</h2> : true ? <h3>3</h3> : null; } المثال في الأعلى هو نفسه if (false) { return <h1>1</h1>; } else if (false) { return <h2>2</h2>; } else if (true) { return <h3>3h3</h3>; } else { return null; }

يمكنك تسهيل الأمر بانشاء custom hook تناسب حاجياتك البرمجية فمثلا يمكنك القيام بأمر مماثل function useForm() { const [form, setForm] = useState(); const handleChange = (e) => { setForm((prev) => ({ ...prev, [e.target.name]: e.target.value })); }; const handleSubmit = (actions) => { action(); }; return [form, setForm, handleChange, handleSubmit]; } هذه ال Hook ستسهل ليس فقط النموذج الحالي الذي لديك الأن وأيضا يمكنك استخدامها في أي نموذج أخر مستقبلي على نفس المشروع واستخدامها هو كأي hook أخرى import useForm from './useForm' import React from 'react' export default function user() { const [form, setForm, handleChange, handleSubmit] = useForm() return ( ..... ) }

لقد واجهت مشكلتك قبل الان وكل ما أعرفه عن تحميل الملفات أنه عند استخدام مثلا <Link to="file/file.pdf" download target="_blank"></Link>; وللتنويه مجلد file يجب أن يكون في public يحمل الملف عادي دون أن يفتح في المتصفح لكن بالنسبة لملف ليس محلي أي يقبع في خادم أخر يجب عليك استخدام عنصر a <a href="https://example.com/file.pdf" download ></a>; دون استخدام target blank

يمكنك إيقافها بشكل مؤقت من خلال تعطيل قيمة المتغير timestamps ->timestamps = false; في النموذج المستخدم بعملية التعديل قبل القيام بحفظ التغييرات ليصبح هكذا: $user = User::find(1); $user->timestamps = false; $user->age = 10; $user->save(); بهذه الطريقة, تم إيقاف timestamps مؤقتًا في هذا الكائن فقط

إن كنت تعني أنك تقوم برسم رابط للملف ولكن الرابط يعرض محتوى الملف بدلاً من تحميله حينها يمكنك استعمال خاصية download كالتالي: <a href="fileurl" download></a> وجود خاصية download بحد ذاتها يخبر المتصفح بأن يحمل الملف بدلاً من عرض محتواه، هذه الخاصية تعمل في كل المتصفحات ما عدا IE، بالنسبة للـIE فلا يوجد حل مع اﻷسف. بالطبع يمكنك إسناد نص لخاصية download هكذا: <a href="fileurl" download="filename.pdf"></a> حينها عند الضغط على الرابط سيتم تحميله باسم filename.pdf. إن كنت تعني شيئاً آخر فأرجو منك توضيح مقصدك.

أجل يمكنك إستخدام الطريقة التاليه والتي تسمى ternary operator {this.props.found? <h1>Some Content</h1> : <h1>Not Found<h1/>} ففي حالة كان هناك props.found سوف يتم عرض المكون الذي يحوي some content وإلا فسيتم عرض المكون الذي يحتوي على Not Found

يوجد عدة طرق لإنجاز المطلوب مثلا: تعريف دالة ضمن render ثم استدعائها في التابع return حيث تعيد هذه الدالة المكون المطلوب حسب شرط ما.. // ... class App extends Component { // ... render() { let {isLoggedIn} = this.state; const renderAuthButton = () => { if (isLoggedIn) { return <button>Logout</button>; } else { return <button>Login</button>; } } return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {renderAuthButton()} </div> ); } } // ... أو بطريقة مختصرة باستخدام المعامل الثلاثي: حيث بعد اختبار الشرط سيتم إضافة المكون المناسب render() { let { isLoggedIn } = this.state; return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {isLoggedIn ? <button>Logout</button> : <button>Login</button>} </div> ); } }

يمكنك أن تستخدم ternary operator وهي صيغة مبسطة لل if condition ? true : false ولتطبيقها على المثال تكون كالآتي : render(){ return( <div> <h1>{this.props.found ? 'Some Content' : 'Not Found'}</h1> </div> ); }

تسمى المدخلات التي تسجل قيمتها في ال state وكذلك يكون لها onChange handler ب "Controlled Input" ولذا لابد من استخدام ال state وال handler ولكن يمكننا توفير كتابة handler لكل input وكتابة handler واحد فقط للجميع كالتالي handleChange(e){ const { name, value } = e.target; this.setState({ [name]: value }) } بحيث يكون ال name هو الاسم المسجل داخل ال state لهذا ال input. وأيضا لتسهيل كتابة ال state عليك طالما أنت تستخدم ال hooks ف الأفضل في هذه الحاله أن تستخدم useReducer كالتالي const [input, setInput] = useReducer( (state, newState) => ({ ...state, ...newState }), { name1: "", // هنا أسماء المدخلات name2: "", name3: "" } ); const handleChange = e => { const { name, value } = e.target; setInput({ [name]: value }); }; هناك أيضا مكتبات خارجيه تساعدك وتسهل عليك الأمر أكثر وأكثر يمكنك الإطلاع عليها أرشح لك منها react hook form Formik

نعم هناك طريقة ستقوم فيها بكتابة handler واحد لجميع عناصر ال input وهي كالتالي handleChange (e) { this.setState({ [e.target.name]: e.target.value }); } تقوم هذه الطريقة بتغيير ال state لل input الذي قام بإستدعاء الدالة لذلك إذا تم تغيير قيمة ال password مثلاً ستم تنفيذ الدالة السابقة كالتالي handleChange (evt) { this.setState({ password: "باسورد" }); } ولكن بالنسبة لل state ستحتاج لإضافة جميع عناصر ال input

يمكن قراءة قيم حقول inputs بطريقة ديناميكية باستعمال handler وحيد يكون بالشكل التالي: this.setState({ [evt.target.name]: evt.target.value }) كما نلاحظ هذه من نوع ES6 Computed property names أي سوف يتم تعويض اسم الخاصية المتغيرة مع قيمتها مهما اختلفت.

عملية التنظيم والهيكلة للمشروع تختلف بطبيعة الحال بإختلاف المشروع على إفتراض أن المشروع كبير مثلما تقول ويتم إستهلاك الكثير من الوقت في عملية الهيكله فيمكنك إتباع ال modular pattern حيث تقوم بقسيم المشروع الى عدة وحدات كل وحدة تحتوي علي فولدر خاص ب components الخاصه بهذه الوحدة بالاضافة الى فولدر services الخاص باللوجيك المسئول عن ال API وفولدر __tests__ يحوي عملية الاختبار لهذه الوحده في حالة كنت تريده فيكون على سبيل المثال تقسم المشروع كالتالي: ├── src │ ├── globals │ │ ├── contexts - يحتوي علي أي كونتكست │ │ ├── core.service.js - يحتوي على اللوجيك المستخدم مع ال API المشترك في المشروع بأكمله │ │ └── routes.js - يحتوي على جميل المسارات │ ├── index.js - الملف الرئيسي │ ├── modules - الوحدات المكونه للمشروع │ │ ├── blog │ │ │ ├── components │ │ │ │ ├── blogCard │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── blogListPage │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── CategoriesFilter │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── SearchFilter │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ └── singleBlogPage │ │ │ │ ├── index.js │ │ │ │ └── style.module.css │ │ │ ├── services │ │ │ │ ├── blog.service.js │ │ │ │ └── category.service.js │ │ │ └── __tests__ │ │ ├── contact │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── icon │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ └── page │ │ │ │ ├── index.js │ │ │ │ └── style.module.css │ │ │ ├── services │ │ │ │ └── contact.service.js │ │ │ └── __tests__ │ │ ├── events │ │ │ ├── components │ │ │ │ ├── ApplyButton │ │ │ │ │ ├── ApplyButton.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── eventCard │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── EventDetails │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── eventsListPage │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── eventsSection │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── Gallery │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── PopupContent │ │ │ │ │ ├── PopupContent.js │ │ │ │ │ └── style.module.css │ │ │ │ └── singleEventPage │ │ │ │ ├── index.js │ │ │ │ └── style.module.css │ │ │ ├── services │ │ │ │ └── events.service.js │ │ │ └── __tests__ │ │ ├── static-pages │ │ │ ├── about │ │ │ │ └── components │ │ │ │ ├── page │ │ │ │ │ ├── components │ │ │ │ │ │ ├── header │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ └── style.module.css │ │ │ │ │ │ ├── sectionName │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ └── style.module.css │ │ │ │ │ │ ├── sectionName │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ └── style.module.css │ │ │ │ │ │ └── structureSection │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── style.module.css │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── section │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ └── video │ │ │ │ └── index.js │ │ │ └── home │ │ │ ├── components │ │ │ │ ├── bestProjects │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ ├── intro │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.module.css │ │ │ │ └── page │ │ │ │ ├── index.js │ │ │ │ └── style.module.css │ │ │ ├── services │ │ │ │ └── clients.service.js │ │ │ └── __tests__ │ │ └── teamServices │ │ ├── components │ │ │ ├── singleServicePage │ │ │ │ ├── index.js │ │ │ │ └── style.module.css │ │ │ └── teamServicesSection │ │ │ ├── index.js │ │ │ └── style.module.css │ │ ├── store │ │ │ └── services.json │ │ └── __tests__ │ │ ├── singleServiceSection.test.js │ │ └── __snapshots__ │ ├── serviceWorker.js │ ├── shared │ │ ├── footer │ │ │ ├── index.js │ │ │ └── style.module.css │ │ ├── header │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── Image-loader │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── Input.js │ │ ├── layout │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── lazy-image │ │ │ └── index.js │ │ ├── loading │ │ │ └── index.js │ │ ├── newsletterForm │ │ │ ├── index.js │ │ │ └── style.module.css │ │ ├── notFoundPage │ │ │ ├── index.js │ │ │ └── style.module.css │ │ ├── services │ │ │ ├── date.service.js │ │ │ ├── image.service.js │ │ │ ├── language.service.js │ │ │ ├── newsletter.service.js │ │ │ └── validation.service.js │ │ ├── sideDrawer │ │ │ ├── index.js │ │ │ └── style.module.css │ │ ├── __tests__ │ │ │ ├── footer.test.js │ │ │ ├── header.test.js │ │ │ ├── newsLetter.test.js │ │ │ ├── sideDrawer.test.js │ │ │ └── themeBtn.test.js │ │ └── theme-button │ │ ├── index.js │ │ └── style.css │ └── styles.css وهذا مثال على تخطيط وتنظيم لمشروع متوسط نوعا ويتيح لك الإمكانية للتوسع في المستقبل دون معاناه ودون إستهلاك الكثير من الوقت حيث أن المشروع مقسم وحدات وكل وحدة منعزلة بمفردها حتى في حالة أردت إستخدام وحدة كاملة في مشروع أخر فيمكنك فقط نسخ الفولدر الخاص بها كاملا ونقله الى المشروع الذي تريد دون أي معاناة تذكر.