سامح أشرف

هذه مشكلة في إعدادات babel ,وظهرت في نهاية 2015، ويبدو أنك تستعمل إصدار قديم من babel أو أن إعداداته غير معدة بشكل صحيح، يمكن حل هذه المشكلة بإحدى هذه الطرق:
تثبيت حزمة babel-plugin-transform-object-rest-spread من خلال تنفيذ السطر التالي: npm install --save-dev babel-plugin-transform-object-rest-spread ثم إضافة الحزمة إلى ملف .babelrc في مجلد المشروع كالتالي:
{ "plugins": ["transform-object-rest-spread"] }  
إن لم يعمل معك الحل السابق يمكنك أن تجرب تثبيت حزمة babel-preset-stage-3  npm install --save-dev babel-preset-stage-3 وإضافة التالي إلى ملف .babelrc في مجلد المشروع :
{ "presets": ["es2015", "react", "stage-3"] }  

أولاً ، يجب أن تعلم أن هذه ليست طريقة التعامل مع الأشياء في React. عادة ما تريد القيام به هو نقل الأشياء إلى المكونات الأبناء في props مخصصة لذلك وليس العكس، وتمرير الإشعارات من الأبناء إلى المكونات الأباء في الأحداث events (أو الأفضل من ذلك إستخدام dispatch). ولكن إذا كان لا بد من دالة من مكون فرعي، فيمكنك استخدام refs. ومن الأفضل أن تفكر مجددًا في تصميم التطبيق وتحسن طريقة تعامل المكونات مع بعضها البعض.
في السابق ، كانت المراجع refs مدعومة فقط للمكوناتمن نوع class. مع ظهور React Hooks، لم يعد هذا هو الحال وأصبح من الممكن إستخدامها مع function components أيضًا. وهنا إقتباس من موقع رياكت الرسمي يوضح ذلك.
في البداية يجب تجهيز المكون الابن والدالة في داخلة كالتالي:
const { forwardRef, useImperativeHandle } = React; // يتم إرسال ref كقيمة ثانية إلى الدالة التي يتم إستدعائها const Child = forwardRef((props, ref) => { // بهذه الطريقة هنا سيمكنك أن تستخدم الدالة من المكون الأب // حيث يتم إستدعائها من قبل ref مخصص كما سترى لاحقًا useImperativeHandle(ref, () => ({ getLog() { console.log("Called from Child"); } })); return <p>Text</p>; }); هنا مرجع لشرح الخطاف useImperativeHandle من موسوعة حسوب.
بعد ذلك نقوم بإستدعاء الدالة من داخل المكون الأب بإستخدام useRef كالتالي:
const { useRef } = React; const Parent = () => { // بإستخدام `useRef()` سيمكنك أن تستخدم الدالة getLog // كما لو كنت تسدعيها من ملف جافاسكريبت const childRef = useRef(); return ( <> <Child ref={childRef} /> <button onClick={() => childRef.current.getLog()}>Get Log</button> </> ); }; بالتوفيق.

سبب حدوث ذلك هو أن الإصدار 2.25.1 من  moment  يحتوي على مشكلة في حد ذاتيه وتم تسجيلها هنا وإصلاحها أيضًا في الإصدار 2.25.2، لذلك عليك أن تقوم بالتحديث إلى  2.25.2 أو أعلى (يفضل إستخدام أحدث إصدار وهو 2.29.1)
قم بإجراء الخطوات التالية لحل هذه المشكلة:
نفذ الأمر التالي لتثبيت أحدث إصدار من حزمة moment:
npm install --save --save-exact moment@2.29.1 أو قم بإضافة التالي إلى ملف package.json:
"moment": "2.29.1", "moment-timezone": "^0.5.33", وشغل الأمر
npm i  
إذا كنت تستخدم yarn ، فيرجى إضافة resolutions في ملف package.json الخاص بك هكذا:
"dependencies" { "moment": "2.29.1", "moment-timezone": "^0.5.33" }, "resolutions": { "moment": "2.29.1" },
لاحظت أيضًا أن هناك حزم أخرى يجب أن يتم تحديثه، لذلك قم بتنفيذ الأمر التالي حتى يتم تحديث باقي الحزم المثبته:
npm update  

ملف robots.txt عبارة عن ملف نصي عادي يحتوي فقط على قوانين تتبعها محركات البحث لأرشفة الموقع (الأمر عائد إلى محركات البحث بإحترام هذه القوانين أم لا)، لذلك يمكنك عمل هذا الملف بنفسك وكتابة في ما تريد أن تفعله محركات البحث لأرشفه موقعك بطريقة صحيحة وقد وضح ذلك أستاذ @بلال زيادة في إجابته.
ويجب وضع هذا الملف بجانب ملف الـ index الخاص بالموقع (في الغالب في مجلد public_html) ليكون متاحًا من خلال الرابط:
https://www.example.com/robots.txt وهنا كل خصائص ملف robots.txt مفدمة من جوجل ونصائح لتحسينه والحصول على أقصى إستفادة منه.
يفضل دائمًا أن تضيف ملف sitemap أيضًا إلى ملف robots.txt من خلال وضع الجملة التالية فيه:
Sitemap: https://www.example.com/sitemap.xml  

حسب إضافة eslint الخاصة بـ React Hooks يجب أن تبدأ أسماء المكونات بأحرف كبيرة أو علامة الشرطة السفلية _
Checks if the node is a React component name. React component names must always start with a non-lowercase letter. So `MyComponent` or `_MyComponent` are valid component names for instance. لذلك عليك أن تغير اسم الثابت app ليصبح App
// يجب أن تكون const App كما يجب أن تغير جملة التصدير بنفس الشكل:
export default App

هذا قيد خاص أضافه مطورو حزمة create-react-app ويتم تنفيذه في ModuleScopePlugin لضمان بقاء الملفات في src /، ويضمن هذا المكون الإضافي أن الإستيرادات النسبية relative imports من مجلد التطبيق لا تصل إلى خارجه (أي لا يمكن للمشروع في حالة production أن يصل إلى مجلد src لأسباب أمنية)، ومع ذلك يمكنك أن تزيل هذا القيد من خلال إستخدام حزمة react-app-rewired من خلال الخطوات التالية:
تثبيت الحزمة:
npm install react-app-rewired --save-dev  
قم بصنع ملف باسم config-overrides.js في مجلد المشروع الرئيسي، وأكتب بداخله:
// نستدعي إضافة ModuleScopePlugin const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); // وهنا نقوم بتعديل الإعدادت وحذفها منها module.exports = function override(config, env) { config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin)); return config; };  
عدل على ملف package.json كالتالي:
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" }  
شغل المشروع للتجربة
npm start // Build your app npm run build  
بالرغمن من كل الخطوات السابقة إلا أنه لا يجب أن تستورد من المجلد public - حيث سيتم تكرار تلك الملفات في مجلد build وسيكون متاحًا من خلال عنوانين URL مختلفين، مما يؤدي في النهاية إلى تفاقم حجم تنزيل الحزمة. بينما الإستيراد من مجلد src لأفضل وله مميزات أكثر لأن كل شيء يتم حزمه وضغطه من خلال webpack وستكون حينها كل الصور والملفات أكفاءة فضل في التحميل.

عند استخدام التصدير الافتراضي بهذا الشكل:
export default function cube(x) { return x * x * x; } ليس عليك أن تستخدم الإستيراد المجزء بل نقوم بإستدعاء الدالة مباشرة
// يسبب السطر التالي خطأ import { cube } from 'my-module'; // هذه الطريقة الصحيحة import cube from 'my-module'; لذلك يجب عليك أن تعدل السطر التالي:
import { combineReducers } from '../../store/reducers'; // ليصبح هكذا import combineReducers from '../../store/reducers'; يمكنك أن تقرأ أكثر حول التصدير في جافاسكريبت من موسوعة حسوب.

حسب موقع رياكت الرسمي لا تقم بتعديل this.state بطريقة مباشرة أبدًا، وعليك أن تتعامل معها على أنها غير قابلة للتعديل:
وذلك لأن إستخدام التابع push لتعديل this.state قد يسبب أخطاء كثير وقد يؤثر على lifecycle hooks حيث أن دوال مثل componentDidUpdate  لن تعرف أنه قد تم تعديل الحالة state، بينما الطريقة الأفضل هي إستخدام دالة لتعديل الحالة state كالتالي:
this.setState(prevState => ({ firends: [...prevState.firends, person] })) يمكنك أيضًا إستعمال التابع concat لجعل الكود أكثر سهولة وقابل للقراءة أكثر:
this.setState({ firends: this.state.firends.concat([person]) })

نعم سيفي بالغرض لأغلب أقسام البرمجة مثل برمجة وتطوير المواقع أو عمل تطبيقات لسطح المكتب، لكن ستحتاج إلى ذاكرة عشوائية Ram أكبر إن أردت عمل تطبيقات للهواتف لكي تسطيع تشغيل محاكي للهاتف.
أما Apple ID فهو عبارة عن خدمة تستخدمها شركة أبل للمصادقة أو تسجيل الدخول على أجهزة آي فون أو آي باد أو آي ماك، يمكنك إعتبارة أنه بريدك الإلكتروني في شركة أبل.
وهذا إقتباس من موقع أبل الرسمي:
 

يجب نقل الكود الخاص بجلب البيانات من قاعدة البيانات إلى أعلى الملف (قبل العنصر doctype)، وبذلك تستطيع إستعمال هذه البيانات في كل أجزاء الصفحة. بعد ذلك عليك وضع الكود التالي في نهاية العنصر head (بعد title مباشرة):
<?php $keywords = explode(' ', $title); $keywords = implode(' ,', $keywords); ?> <meta type="keywords" content="<?= $keywords ?>" /> بهذه الطريقة سيتم تقسيم العنوان إلى مصفوفة ثم دمج عناصر هذه المصفوفة في شكل كلمات مفتاحية (تفصل بينهم بفاصلة , ) ثم وضع هذه الكلمات في عنصر meta من نوع keywords.

حسب هذه المقالة في موقع أبل الرسمي يفضل إستخدام خدمات iCloud فهي تحافظ على صوركِ ومقاطع الفيديو الخاصة بكِ آمنة ومحدثة ومتاحة تلقائيًا على جميع أجهزة Apple الخاصة بك ، وعلى iCloud.com ، وحتى على جهاز الكمبيوتر الخاص بكِ.
أما البدائل لخدمات iCloud هي:
النقل إلى حاسوب PC: يمكنك استيراد الصور إلى جهاز الكمبيوتر الخاص بكِ عن طريق توصيل جهازكِ بجهاز الكمبيوتر الخاص بكِ بإستخدام الكابل كالتالي: يجب تحديث تطبيق iTunes إلى أحدث إصدار موجود حتى لا تحدث مشاكل. قمي بتوصيل iPhone أو iPad أو iPod touch بجهاز الكمبيوتر باستخدام كابل USB. قمي بإلغاء قفل الشاشة في جهازك المحمول. إذا رأيت إشعار مطالبة على جهازك المحمول تطلب منك الوثوق بهذا الكمبيوتر Trust This Computer، فانقر فوق السماح Allow أو Trust للمتابعة. من قائمة أبدأ Start أختاري تطبيق Photos، ومن أعلى اليمين اختاري من قائمة import الخيار From a USB device ثم اختاري جهاز iPhone الخاص بكِ. النقل من خلال تطبيقات مثل Share it أو Zapya كما تم توضيح ذلك في إجابة الأستاذ@Wael Aljamal ملاحظة: إذا تم تفعيل iCloud على جهاز iPhone الخاص بكِ، فلن تتمكني من تنزيل الصور أو مقاطع الفيديو الخاصة بكِ. وذلك لأن صورك موجودة على iCloud ولكن ليس على جهازكِ. إذا كنتِ تريدين فتح أو استيراد هذه الصور أو مقاطع الفيديو إلى جهاز الكمبيوتر الخاص بكِ، فأفعلي ذلك بإستخدام تطبيق iCloud لسطح المكتب.
 

يبدو أن لديك مشكلة في CORS وطبقة على السيرفر تعمل لحماية المواقع من الطلبات الخبيثة، ويمكنك حل المشكلة من خلال تثبيت مكتبة cors في الـ backend الخاص بك، ويمكنك فعل ذلك في laravel من خلال الأمر :
composer require fruitcake/laravel-cors وإضافة middleware إلى ملف app/Http/Kernal.php كالتالي:
protected $middleware = [ \Fruitcake\Cors\HandleCors::class, // ... ]; أو إن كنت تستخدم express.js قم بتثبيت المكتبة من خلال الأمر التالي:
npm install cors ثم قم بإضافة الكود التالي إلى الملف السيرفر الخاص بك:
var express = require('express') // إستدعاء المكتبة var cors = require('cors') var app = express() // تسغيل cors middleware app.use(cors()) بالتوفيق

رسالة الخطأ تشير إلى أن العنصر المستخدم لعرض مكونات react غير موجود، وهذا لأن كود جافا سكريبت يتم تنفيذه قبل إنشاء العنصر body وبالتالي لا يجده. والحل هو إما وضع كل كود جافا سكريبت داخل حدث DOMContentLoaded  أو الأفضل وهو نقل كل كود جافا سكريبت إلى نهاية عنصر body مع إستخدام عنصر div داخلي لعرض مكونات react بدلا من document.body 

يحدث هذا الخطأ لأنك تقوم بإستدعاء التابع toggle داخل التابع render وهذا يسبب أن يقوم react بعمل re-render المكون والحل هو تغير الجزء الخاص بإستدعاء التابع toggle ليصبح كالتالي:
{<div className="btn btn-lg" onClick={this.toggle}>Toggle</div>} وفي حالة أردت أن تقوم بتمرير قيمة معينة للتابع toggle مثل الكائن event يمكنك أن تستخدم الدالة السهمية
onClick={(event) => this.toggle(event, params)} بهذا الشكل لن يتم إستدعاء التابع toggle مباشرة بل سيتم تنفيذه إذا قام المستخدم بالضغط عليه.
بالتوفيق.

يوجد بعذ الإختلافات فعلًا بين الـ Functional Component و الـ Class Component وهنا شرح بسيط للفرق بينهما:
Functional Component: هي عبارة عن دوالة جافاسكريبت عادية، في الغالب نستعمل الدوال السهمية (لأنها أبسط) لكن يمكن إستخدام دوال جافاسكريبت العادية (بإستخدام الكلمة الفتاحية function). تسمى أحيانًا بـ "stateless components" أو "dumb components"، ويمكنها إستقبال بيانات بشكل بسيط (مثل Arguments في دوال جافاسكريبت)، وفي الغالب تكون مسئولة عن عرض أجزاء الـ UI في الموقع. لا يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount). ملاحظة: لم يعد هذا ضروري حيث بدًأ من React 16.8 حيث أصبح بإمكانك إستخدام  useEffect hook للوصول إلى دوال Lifecycle Hooks لا نستخدم دالة render داخل الـ Functional Component بل نقوم بإرجاع المكون مباسرة بإستخدام return. يمكن إستخدام props داخل الـ Functional Component دون مشكلة. يُفضل إستخدامها إن لم تكن تستخدم React state. import React from "react"; const Title = props => ( <div> <h1>Hello, {props.name}</h1> </div> ); export default Title;  
Class Components:
تستخدم خواص ES6 لعمل صنف من خلال الكلمات المفتاحية Class و extends.
تسمى أحيانًا بـ "Smart Components" أو "Stateful Components" 
يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount).
يمكن إستخدام props داخل الـ Class Component دون مشكلة من خلال this.props
import React, { Component } from "react"; class Title extends Component { render() { return ( <div> <h1>Hello, {this.props.name}</h1> </div> ); } } export default Title;  
الخلاصة: حاول أن تستخدم الـ Functional Component لعرض أجزاء واجهة المستخدم UI حيث أنها أبسط، وقم بإستخدام الـ Class Component في المكونات الأكثر تعقيدًا والتي تحتاج إلى إستخدام دوال Lifecycle Hooks.

لا يمكن إستخدام عناصر script في أي حالة من الحالات الآتية:
إستخدام رابط ملف جافاسكريبت خارجي  إستخدام الكائن dangerouslySetInnerHTML والسبب في ذلك هو أن الكائن React DOM (المسئول عن عرض مكونات React في الصفحة) يستخدم التابع createElement لتحويل كود JSX إلى عناصر HTML عادية، بعد ذلك يتم إستخدام التابع innerHTML لعرض هذه العناصر في الصفحة، وهذا التابع الآخير لا يقوم بتنفيذ عناصر Script لأسباب أمنية، وهذا هو السبب في أن عناصر script لن تعمل في مكونات react.
لكن الأمر أصبح أسهل في النسخ الحديثة من react وأصبح من الممكن إستخدام useEffect لتحميل وتنفيذ أكواد جافاسكريبت الخارجية، وهنا مثال:
import { useEffect } from 'react'; const useScript = url => { useEffect(() => { const script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, [url]); }; export default useScript; ويمكن إستخدام الـ Hook السابق بالطريقة التالية:
import useScript from 'hooks/useScript'; const MyComponent = props => { useScript('https://example.com/JsFile.js'); // باقي أكواد المكون هنا } بالطريقة السابقة يمكن تحميل وإستدعاء أكواد جافاسكريبت (مثل ملفات jQuery أو Stripe أو  Google Analytics إلخ).

يبدو أن لديك مصفوفة تحتوي على عناصر undefined وبالتأكيد هذه العناصر لا تحتوي على urls ، لذلك يجب أن تقوم بفتلرة هذه المصفوفة والتأكد من أن كل عنصر ليس من نوع undefined، ويمكنك فعل ذلك من خلال التابع filter بهذا الشكل:
arr.filter(Boolean)
هنا الكود الصحيح لملف Mainboard.js:
function Mainboard({ pins }) { return ( <Wrapper> <Container> {pins.filter(Boolean).map((pin, index) => { const {urls} = pin; return <Pin key={index} urls={urls}/> })} </Container> </Wrapper> ); } بهذا الشكل سيتم إستخدام عناصر المصفوفة pins التي ليست من نوع undefined وليست false أيضًا.

بالتأكيد يمكنك ذلك، فكل الدورات تظل متاحة مدى الحياة ويمكنك أن تقوم بمراجعتها وقتما تشاء، كما ستحصل على كل التحديثات الخاصة بالدورة أيضُا، وأنا اقتبس هنا من صفحة الدورات:
بالتوفيق

على حسب المشروع، قد يكون المشروع عبارة عن تحويل ملف فوتوشوب إلى HTML & CSS، حينها يتم تسليم ملفات HTML و CSS والصور والخطوط المستخدمه في الموقع، أو قد يكون المشروع عبارة عن عمل لوحة تحكم لموقع موجود مسبقًا، حينها يعطيك العميل ملفات HTML و CSS وتصميم لوحة التحكم التي يريدها، فتقوم بعمل لوحة التحكم حسب المطلوب، وترسل ملفات لوحة التحكم بكل محتوياتها. وربما يريد العميل إصلاح مشكلات تواجهة في موقعه (مثلاً، القائمة الجانبية لا تعمل على الهواتف بسبب مشكلة CSS)، فيعطيك العميل ملفات الصفحة التي بها المشكلة لتقوم بإصلاحها وتعيد إرسال هذه الملفات إليه.
وليس دائماً يعرف العميل كيف يتعامل مع ملفات المشروع النهائية، فعليك دائماً أن تتفق معه على صيغة الملفات النهائية، وما إن كان سيتطيع التعامل معها بنفسه أم أن لديه شخص آخر ذو خبرة سيقوم بتركيب هذه الملفات في الموقع (مدير خوادم على سبيل المثال).

سأقوم بشرح دالة لكي تنفذ هذه المسألة بلغة جافاسكريبت وعليك أن تقوم بكتابة كود c++ لنفسك.
أول شيء نقوم بعمل دالة تستقبل العدد N كـ argument، ولابد من أن تبدأ الحلقة من الرقم  n، ولأننا نريد مضاعفة الرقم n فنقوم بزيادة المتغير i بقيمة n كل مرة، ونضع أيضًا شرط لإستمرار حلقة التكرار وهو ألا تزيد قيمة المتغير i عن 500
function multiplier(n) { // نبدأ الحلقة من الرقم n // ونضع شرط لإستمرار الحلقة وهو أن يكون المتغير i أصغر من أو يساوي 500 // نزيد قيمة المتغير i بقيمة n for(var i = n; i<=500; i+=n) { console.log(i) } } // طباعة كل مضاعفات الرقم 50 multiplier(50) بالتوفيق

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

يمكنك أن تبدأ في أي دورة من الدورات الحالية الموجودة في أكاديمية حسوب في أي وقت من هنا، ولا يوجد وقت محدد لبدء أي دورة منهم. الأمر متوقف عليك ومتى تريد أن تبدأ.

مرحبًا @محمد علي31
مستقل لا يوفر طرق أخرى للسحب غير الباي بال (كما وضح الأخ الفاضل @Abdulhamid Hamsho)، بالرغم من ذلك فلن تواجهة مشكلة في سحب الأرباح بإستخدام باي بال في مصر، فقد قمت بتجربة الشراء وسحب الأموال من عدد من المواقع بإستخدام باي بال ومن ثم سحبت الأموال إلى فيزا البريد المصري، وأستطعت سحب الأموال من ماكينة الصراف الآلى الخاص بالمصرف العربي الدولي في نفس اليوم (خلال أقل من 5 ساعات).
لاحظ أن باي بال لديه قوانين فيما يخص سحب الأموال إلى الفيزا، ومنها:
يجب أن يتم تفعيل باي بال من خلال إضافة كارت فيزا إليه، وسيتم سحب حوالي 1.5$ من الفيزا (يتم إرجاعها خلال أسبوع) يتم التحويل تلقائيًا ودون أي رسوم من باي بال إلى الفيزا يوم 1 في الشهر يمكنك تحويل الأموال من باي بال إلى الفيزا في أي وقت مقابل 5 دولار رسوم تحويل يحصل عليها باي بال من رصيدك. الحد الأقصى لعملية سحب الأموال من باي بال لفيزا البريد المصري حوالي 500 $ كل 15 يوم قد يستغرق سحب الأموال من باي بال إلى الفيزا وقت أطول، وقد يصل إلى 7 أيام في بعض الأحيان.

مرحبًا @Osama Wwe
يبدو أنك تستعمل نوع من قواعد البيانات SQL لحفظ الفواتير، يجب أن تحتوي كل فاتورة على تاريخ إضافة في جدول ما
يجب أن تقوم بتحديد تاريخ اليوم قبل أسبوع من الآن عبر إستخدام مكتبة datetime >>> import datetime as dt >>> today = dt.date.today() >>> week_ago = today - dt.timedelta(days=7) >>> week_ago datetime.date(2021, 1, 27) ثم تقوم بتنفيذ تعليمة SQL تحتوي على جملة Where بالشكل التالي: SELECT count(cost) FROM bills WHERE created_at >= 'week_ago'; مع تغير 'week_ago' بالتاريخ المحدد في الخطوة السابقة وبهذه الطريقة ستحصل على إجمالي الفواتير التي الموجودة خلال الأسبوع الماضي.
ملاحظة: إن كان التطبيق متعدد المستخدمين (لكل مستخدم عدد من الفواتير) يجب تحديد المستخدم في تعليمة SQL السابقة أيضًا.

مرحبًا @Hamada Ahmed
يمكنك إضافة الخاصية required إلى وسم input الخاص بالصورة ليكون بهذا الشكل
<input type="file" name="image" id="" required> هكذا لن يستطيع المستخدم الضغط على زر submit إلا إن اختار صورة بالفعل.
ثم يمكنك التحقق من ذلك في php من خلال الدالة isset والتي ستتحقق من إن كان هناك ملف باسم image في هذه الحالة، وعليك التحقق من وجود أي أخطاء أيضُا عن طريق العنصر error داخل متغير الصورة بهذه الطريقة:
if(!isset($_FILES['image']) || $_FILES['image']['error'] == UPLOAD_ERR_NO_FILE) { echo "Error no file selected"; }