يتم إضافة خاصية ترتيب الوصفات بشكل تصاعدي أو تنازلي حسب تاريخ التحديث، وذلك باستخدام qs و خاصية strapi لــِ filtering and searching.

في هذا الدرس سنستعرض سوية مفهوم Pagination أو تجزئة القيود ضمن صفحات. كما سيتم إنشاء Pagination Component.

سنقوم بعرض الصورة المصغرة أو البارزة لكل وصفة في الصفحة الرئيسية وصفحة الوصفة الأحادية.

سنرفع الصورة لسيرفر Strapi من NextJS ونعرض رسائل الخطأ و النجاح الخاصة بعملية الرفع.

بداية نقوم بإعادة ترتيب Recipe Form Messages، وثم إضافة حقل الصورة المصغرة مع معاينتها في نموذج الوصفة.

سنقوم بالتحقق من صحة البيانات المدخلة في نموذج إنشاء حساب. وكذلك سنقوم بتنظيف الفراغات المرسلة مع حقول نموذج إنشاء حساب.

التحقق من صحة البيانات المدخلة في Login Form، وأيضاً التحقق من صحة البريد الإلكتروني المدخل من خلال Regex Pattern. كما تم إضافة بعض الستايلات وعرض رسائل الخطأ.

ما هو Validation؟ وما هي أهميته في الموقع الإلكتروني؟ ما هو Sanitization؟ وكيف يتم تطبيقه؟

في هذه الخطوة سننهي الشكل العام لمشروع Recipe بإضافة ستايلات لــِ Recipe Form.

في هذا الدرس، سنقوم بتعديل نموذج الوصفة والهيدر. سنضيف بعض من CSS Classes له، وأيضاً سنضيف Arabic Strings له.

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

نتحدث عن كيفية التعامل مع strings في أي مشروع، وما هي سلبيات وإيجابيات الطرق المختلفة. كما إننا سنقوم بفصل هذه strings في ملف خاص.

سنقوم بالتعديل على Recipe Container & Recipe Card في الصفحة الرئيسية، وسنضيف بعض من Styling لها.