Hassan Hedr

لا يمكن مساعدتك في حل الأسئلة أو الواجبات، يرجى شرح مشكلة محددة تواجهها مع إرفاق الشيفرة المتعلقة بها فقط لنتمكن من المساعدة

يمكنك كتابة الشيفرات بلغة PHP داخل الوسم التالي:

<?php /* php هنا */ ?>

ولطباعة قيمة المتغير يمكنك استخدام echo وتمرير المتغير له، لتصبح طريقة عرض العنوان كالتالي:

<h1>Welcom <?php echo $UserName ?></h1>

واختصارًا يمكن كتابة الوسم التالي والذي سيطبع قيمة العبارة البرمجية داخله مباشرةً:

<?= /* php هنا */ ?>

ليصبح العنوان كالتالي:

<h1>Welcom <?= $UserName ?></h1>

يمكنك القراءة أكثر عن تلك الوسوم من مرجع موسوعة حسوب، 

ليس بالضرورة فصل التطبيق إلى العديد من المكونات، للتطبيقات البسيطة ابدأ دومًا بتضمين كل عناصر التطبيق ضمن مكون واحد، مثلًا لنموذج الادخال اكتب العناصر input كلها مباشرةً ضمن مكون Form، بعد فترة ستلاحظ تكرار عناصر ما في أكثر من مكان هنا يمكنك التأكد من أن تلك العناصر قد يكون من الأنسب إخفاء تفاصيل تضمينها ضمن مكون جديد وليكن Input في حالة عناصر الادخال،

فصل المكون سيخلق لك مشاكل مثل ضرورة تعريف طريقة لإعلام المكون الأب بالمعلومات التي يحتاجها من ذلك المكون، يمكنك لذلك تمرير توابع للمكون تُنفذ عند أحداث معينة داخل هذا المكون، في حالتك يمكنك تمرير تابع onChange للمكون Input تُعلم بها المكون الأب بتغير القيمة في ذلك الحقل، لتُخزنها في مكان تجميع كل البيانات من كل الحقول في المكون الأب لإرسالها لاحقًا ضمن طلب من نوع POST،

الهيكلية العامة لهذا الحل ستكون كالتالي يمكنك فهم طريقة العمل وتطبيقها بنفسك على تطبيقك حسب التفاصيل المطلوبة:

function From() {
    return <div>
        <Input onChange={value => {/* تخزين القيمة الجديدة */ }} />
        <Input onChange={value => {/* تخزين القيمة الجديدة */ }} />
    </div>
}

function Input({ onChange }) {
    return <input onChange={event => onChange(event.target.value)} ... />
                                    /*  إعلام المكون الأب بتغير القيمة   */
}

يمكنك الاستفادة من قراءة المقال التالي:

يوجد نوعين من المواقع أو خوادم الويب، وهي الثابتة static والمتغيرة dynamic، ففي المواقع الثابتة كل صفحة من الموقع يقابلها ملف صفحة مخصص لها بمحتوى ثابت لا يتغير، فعند تطبيق هذه الطريقة على موقع سيحوي الكثير من الصفحات والمحتوى مثل موقع الأكاديمية لن يكون هذا الحل عمليًا،

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

يمكنك القراءة أكثر عن نوعي خادم الويب الديناميكي والثابت من المقال التالي:

ويمكنك الاطلاع بنظرة شاملة عن أقسام تعلم الويب ومجالاتها لفهم كيف تُقسم المهام لتخديم موقع متكامل من المقال التالي:

يرجى إرفاق الجزء المتعلق بالاستفسار من الشيفرة مباشرة ضمن نص السؤال بدلًا من إرفاق ملفات المشروع، وذلك حتى تحصل على إجابة وحل لمشكلتك ممن لديه الخبرة 

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

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

يمكنك تقسيم إرسال البيانات إلى عدة مسارات، يُخزن كل منها جزء بيانات الاستمارة في تلك المرحلة ضمن بيانات الجلسة session للمستخدم، وفي المرحلة الأخيرة يمكن استخراج تلك البيانات من الجلسة وإرسالها إلى قاعدة البيانات، حيث تُعرف لكل خطوة مسار لعرض استمارة form تلك الخطوة ومسار إرسال البيانات لها،  بشكل مشابه للتالي: 

// الخطوة الأولى
Route::get('step-one', ...)->name('step.one');
Route::post('step-one', ...);

... // خطوات إضافية

// الخطوة الأخيرة
Route::get('step-final', ...)->name('step.final');
Route::post('step-final', ...);

وفي متحكم كل خطوة نستخرج البيانات الخاصة بها من الطلب ونخزنها ضمن الجلسة بشكل مشابه للتالي:

public function index()
{
  // عرض نموذج الخطوة
  return view('steps.one',...);
}


public function store(Request $request)
{
  // استخراج البيانات الخطوة
  $data = $request->validate([...]);
  
  // تخزينها ضمن الجلسة
  $request->session()->put('data', $data)

  // إعادة التوجيه إلى الخطوة التالية
  return redirect()->route('step.two');
}

وفي تابع تخزين بيانات آخر خطوة يمكنك استخراج بيانات الخطوات السابقة ثم تخزينها في قاعدة البيانات:

public function store(Request $request)
{
  // استخراج البيانات الخطوة الأخيرة
  $data = $request->validate([...]);
  
  // استخراج بيانات الخطوات السابقة
  $step_one_data = $request->session()->get('step-one-data');
  $step_one_data = $request->session()->get('step-two-data');
  ...
  // تخزين البيانات
  Model::create(...);

  // (اختياري) مسح البيانات المخزنة بعد نجاح العملية كاملةً
  $request->session()->forget('step-one-data');
  $request->session()->forget('step-two-data');

  // نجاح الخطوات كاملة 
  ..
}

يمكن لأي تطبيق من أي منصة كانت سواء تطبيق جوال أو تطبيق ويب أو حتى برنامج سطح مكتب التواصل مع أي واجهة برمجية للتطبيقات API ولا يوجد حد لذلك، وذلك لأن التواصل مع الواجهة API يتم عبر بروتوكول HTTP، أي يكفي لتلك التطبيقات )ما ندعوها عميل أو client( أن تتمكن من إرسال طلبات HTTP، 

يمكنك الاستفادة من الاطلاع على المقالات التالية للتعرف على ماهية API:

في بداية تعلم البرمجة ستبدو لك كل الأفكار جديدة وستواجه الكثير من المشاكل، الحل دومًا يكون بالبحث عن حل لمشكلتك والقراءة والسؤال، سواء في السؤال في مجتمعات البرمجة كأكاديمية حسوب أو مراجعة أحد التوثيقات لتلك اللغات كموسوعة حسوب، وأنصحك دومًا بالتطبيق العملي المتكرر فهو سيُعرضك لتلك المشاكل الجديدة مرارًا إلى أن يتقدم مستواك وتتقنها وستلاحظ التحسن تدريجيًا، يمكنك الاطلاع على المقالات التالية ففيها شرح وافِ عن مجال البرمجة بشكل عام وتطوير الويب:

يمكنك البحث ضمن مصفوفة القيم التي تمرر للتابع onPress عن الكائن الذي يحوي على الخاصية selected بالقيمة true، ثم معالجة ذلك الكائن الذي هو أحد الكائنات ضمن المصفوفة radioButtons الممررة للمكون، لتصبح الشيفرة لديك كالتالي:

function handlePress(buttons) {
  const selected = buttons.find(button => button.selected);
  // معالجة الاختيار
}

<RadioGroup
  layout="column"
  radioButtons={radioButtonsData}
  onPress={handlePress}
/>

بتاريخ 4 ساعة قال Ahmed Kawbal:

نعم نجح هاذا ويتم اضافه العناصر بنجاح .  ولاكن اذا قمت بعمل تحديث للشاشه Ctrl +S يتم خذف القيم كامله هل هاذه بسبب انه يعمل في تطبيق Expo  وليس كطبيق مثبت في الجهاز  ..   واذا كان مثبت في الجهاز هل عند الخروج من التطبيق واغلاقه  ثم فتح التطبيق  هل سوف يتم حذف القيم الذي في المصفوفه   

وشكرا......

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

يرجى إرفاق نص الشيفرة الخاصة بالمشكلة بدلًا من الصورة، يمكنك تقسيم المشكلة إلى خطوتين، إضافة العنصر الجديد إلى المصفوفة، ثم حساب مجموع القيم بداخلها، ليصبح التابع لديك كالتالي:

const yo = []

function Moneys(mo){
  yo.push(mo) // إضافة للمصفوفة
  const total = yo.reduce((total, amount) => amount + total, 0) // حساب المجموع
  console.log(total) // طباعة المجموع
}

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

const yo =[]; // تعريف خارج التابع

function Moneys(mo){
  .. // إضافة للمصفوفة وطباعتها
}

يمكنك إضافة الخاصية title لعنصر القائمة ضمن HTML، وتمرير قيمة النص التي تريد أن تظهر عند وضع مؤشر الفأرة فوق العنصر كالتالي:

<li title="الرئيسية">
  ...
</li>

لا داعٍ لاستخدام مكتبة redux لإدارة حالة التطبيق ما دامت الحالة بسيطة، في مشروعك والسيناريو الذي ذكرته لا يوجد حالة للتطبيق يجب إدارتها، كل ما عليك هو تعريف التوجيه بشكل صحيح باستخدام مكتبة react-router ليتم توجيه الروابط إلى صفحاتها المطلوبة، ثم ذكر تلك الروابط ضمن المكونات  المسؤولة عن عرض نوع المنتج والمنتج،

الصعوبة في التطبيق قد يكون سببها اختيار طريقة معقدة لحل المشكلة، مع الوقت والتنفيذ العملي المتكرر والقراءة عن الحلول والإمكانيات وميزات المكتبات المستخدمة ستزيد مهارتك في حل المشكلة بأبسط الطرق، أنصحك بالتركيز فقط على مكتبة react-router لحل مشكلة التنقل بين الصفحات وتجنب تعيين متغيرات أو خطافات hooks مسؤولة عن تغيير الصفحة المعروضة بل فقط استخدم روابط عادية مثل href للمكون a، ومكتبة react-router ستتولى عرض الصفحة المطلوبة

يمكنك التواصل مع مركز المساعدة وشرح مشكلتك لهم بالتفصيل مع إرفاق تلك الصورة  لتوضيح المشكلة، وسيتابعون معك سبب المشكلة ويرشدونك لحلها، حاول إرسال شرح مفصل للخطوات التي قمت بها وما حدث وانتظر الرد منهم في أقرب وقت 

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

يمكنك لذلك الاستفادة من رمز الخطأ عن طريق التابع getCode والذي يعيد رمز الخطأ الذي حدث، ثم التحقق من ذلك الرمز، فمثلًا في حال كان الرمز يبدأ بالرقم 08 فيعني أن الخطأ سببه مشكلة في الاتصال، في هذه الحالة يمكنك تنفيذ الأوامر الأخرى التي تريد كالتالي:

catch(PDOException $e) {
  if(str_starts_with((string)$e->getCode(),'08')){
    // خطأ في الاتصال
    ...
  } else {
    // خطأ آخر
    echo "Connection failed: " . $e->getMessage();
  }
}

ضمن الدورات التي توفرها الأكاديمية يوجد فريق من المدربين لمساعدتك دومًا، في حال واجهت أي مشاكل أو لديك أي استفسارات أثناء متابعتك وتطبيقك لمحتوى الدروس يمكنك إضافة استفسارك أو شرح مشكلتك في قسم التعليقات أسفل فيديو الدرس، وسيتابع المدربين معك حل المشكلة والشرح لك ومساعدتك دومًا 

الخاصية color تؤثر على لون النص فقط، ولا تؤثر في لون محتوى العنصر path، فلتعديل لون هذا العنصر يمكن استخدام الخاصية fill 

element.style.fill = 'blue';

أيضًا لاستهداف العنصر المطلوب يجب أن يكون المُعرّف id له غير مكرر لأي عنصر آخر، أي يجب إزالة العنصر div الذي يحمل نفس قيمة المعرف

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

يمكنك الاستفادة من المقال التالي والذي يشرح ذلك تمامًا ويعرفك على بعض تلك الأدوات ومستقبل هذا المجال:  

الأمر طبيعي عند البدء بتعلم البرمجة، فكل الأفكار والشيفرات وبنيتها ومعانيها تكون جديدة، بداية ركز على الأساسيات ولا تنتقل إلى أفكار لاحقة قبل تمكين الأساسيات، والعامل الأكبر في تمكين الأفكار الجديدة هو التركيز على التطبيق العملي دومًا، ومع تكرار التطبيق العملي ستثبت الأساسيات وتصبح الشيفرات البرمجية مألوفة وتقرأها كما تقرأ أي لغة جديدة، 

ركز في شرح الأفكار الجديدة، ثم وظّف تلك الأفكار في مثال عملي لو كان بسيطًا، فالتطبيق العملي هو الأساس، وحاول القراءة بنفسك عن أي فكرة جديدة لتوسع فهمك لها قدر الحاجة، يمكنك مثلًا الرجوع لموسوعة حسوب ففيها شرح مفصل وموسع عن تفاصيل اللغات البرمجية،  وأنصحك أيضًا بقراء المقالات التالية والتي تشرح لك النقاط التي يجب التركيز عليها عند تعلم البرمجة:

يرجى تعديل السؤال وإرفاق الشيفرة ورسالة الخطأ التي تظهر نصًا بدلًا من الصورة مع تنسيقها بتنسيق الشيفرة كي نستطيع مساعدتك

بتاريخ 5 ساعات قال محمود سعداوي:

قمت باستخدام Notes في App.js

import React, {} from 'react'
import Notes from './Notes/Notes';
import './App.css';
import AddNoteForm from './AddNoteForm/AddNoteForm';


function App() {
  
  return (
    <div className='app'>
      <Notes className='notes'/>
      <AddNoteForm className='add-note-form'/>
    </div>
  );
}

 

لاحظ أنك لم تمرر للمكون Notes الخاصية notes وهذا سبب المشكلة، يجب تمرير تلك الخاصية كالتالي:

<Notes notes={...} .../>
               ^

بتاريخ منذ ساعة مضت قال محمود سعداوي:

لا يمكنني تمرير مصفوفة فارغة 

import React , {useState} from 'react'
import './AddNoteForm.css';
import Alert from '../Alert/Alert' 
import Notes from '../Notes/Notes'

function AddNoteForm() {
  const [title,setTitle] = useState('')
  const [content,setContent] = useState('')
  const [error,setError] = useState(false)
  const [notes,setNotes] = useState([])

  const handleChange_title = (e) => {
    setTitle(e.target.value)
  }
  const handleChange_content = (e) => {
    setContent(e.target.value)
  }

  const saveNoteHandler = (e) =>{
    e.preventDefault()
    if (title.length === 0 || content.length === 0) {
      setError(true)
    } else{

      setError(false)

      const note = {
        id : new Date(),
        title : title,
        content : content
      }

      const updatedNotes = [...notes,note]

      setNotes(updatedNotes)
    }
  }

  return (
    <form>
        <input 
        className='title-content input' 
        type='text' 
        placeholder='title' 
        value={title}
        onChange={handleChange_title}
        />

        <textarea 
        className='note-content input' 
        type='text' 
        placeholder='text' 
        rows='8' 
        value={content}
        onChange={handleChange_content}
        />

        <input 
        className='input-btn input' 
        type='submit' 
        value='Save' 
        onClick = {saveNoteHandler}
        />

        {error ? <Alert/> : ''}

    </form>
    
  )
}

export default AddNoteForm

 

أرجو المساعدة من خلال الإطلاع على كامل الكود في الرابط التالي

https://github.com/Saadaoui-Forkan/my-to-do-lidt

شكرا

في الشيفرة المرفقة لا يوجد استخدام للمكون Notes تأكد من مكان استخدامه وطريقة تمرير تلك الخاصية، كما يرجى إرفاق الجزء من الشيفرة الخاص بذلك الاستخدام بدلًا من رابط خارجي