كيف سيتم بناء الواجهة الأمامية في دورة PHP رغم أن الدورة خاصة بالواجهة الخلفية؟

أثناء تعلم الدورة ستعرف أنه يتم البناء من خلال نمط تصميم MVC.

وعند بناء موقع مثل Instagram أو متجر إلكتروني باستخدام دورة PHP والتركيز على الجانب الخلفي (backend) ستحتاج في الواقع إلى استخدام لغات وتقنيات الواجهة الأمامية (frontend) مثل HTML وCSS وJavaScript بالإضافة إلى إطار العمل Laravel ومكتبات مثل Bootstrap أو Tailwind CSS.

بالنسبة للتعامل مع HTML، فستقوم بكتابة كود HTML داخل صفحات PHP لتقديم المحتوى المناسب وتجميع البيانات التي يتم استرجاعها من قاعدة البيانات وعرضها بطريقة ملائمة.

وباستخدام إطار العمل Laravel، ستحصل على العديد من المزايا المتقدمة مثل التوجيه (Routing)، وإدارة قواعد البيانات، والتحقق من الصحة والأمان، وإنشاء API، وغيرها من الوظائف التي تسهل تطوير تطبيقات الويب.

أما بالنسبة للتصميم والتنسيق، يمكنك استخدام أدوات مثل CSS وSass لتحسين تصميم الموقع وتطبيق الأنماط الخاصة بك. ويمكنك أيضًا استخدام إطار عمل CSS مثل Bootstrap أو Tailwind CSS لتسهيل وتسريع عملية تصميم وتنسيق الموقع.

وفيما يتعلق بتجميع الملفات، يمكنك استخدام أدوات مثل Vite أو Webpack لتجميع وتحسين وتقليص حجم الملفات الأمامية (مثل CSS وJavaScript) وتحويلها إلى إصدارات أكثر كفاءة لتحسين أداء الموقع.

إذاً، في عملية بناء موقع مثل Instagram أو متجر إلكتروني، يجمع العمل بين لغات الواجهة الأمامية وإطار العمل Laravel في الجانب الخلفي لتحقيق الوظائف المطلوبة وتقديم تجربة مستخدم متكاملة وجذابة.

أي ما يحدث هو نمط "Server-side Rendering" (تقديم من الخادم) في بناء موقع مثل Instagram أو متجر إلكتروني باستخدام PHP وإطار العمل Laravel.

ففي الـ Server-side Rendering، يتم تجهيز صفحات الويب على الخادم قبل أن يتم إرسالها إلى المتصفح. وعندما يقوم المستخدم بزيارة صفحة، وتنفيذ الكود PHP على الخادم لجمع البيانات اللازمة من قاعدة البيانات وإعداد صفحة HTML النهائية التي تحتوي على المحتوى المطلوب.

وباستخدام إطار العمل Laravel، تستطيع تعريف المسارات (Routes) والمنطق المرتبطة بها في صفحات PHP مثل routes/web.php أو routes/api.php.

فعند استلام طلب المستخدم، يتم تنفيذ الكود المناسب لجمع البيانات وإعداد صفحة HTML للرد على الطلب.

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

وبخصوص اللغات الخاصة بالواجهة الأمامية، فمن خلال إشتراكك في الدورة ستحصل على وصول للمسارات الأولى من جميع الدورات الأخرى، وبالتالي ستتمكن من تعلم أساسيات HTML, CSS, JS.

وسيتم شرح كل ما ذكرته في دورة PHP ولكن عليك بتعلم الأساسيات أولاً قبل البدء في الدورة، أي عليك برؤية المسار الأول من دورة دورة تطوير واجهات المستخدم و المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript .

بتاريخ 42 دقائق مضت قال Mustafa Suleiman:

أثناء تعلم الدورة ستعرف أنه يتم البناء من خلال نمط تصميم MVC.

وعند بناء موقع مثل Instagram أو متجر إلكتروني باستخدام دورة PHP والتركيز على الجانب الخلفي (backend) ستحتاج في الواقع إلى استخدام لغات وتقنيات الواجهة الأمامية (frontend) مثل HTML وCSS وJavaScript بالإضافة إلى إطار العمل Laravel ومكتبات مثل Bootstrap أو Tailwind CSS.

بالنسبة للتعامل مع HTML، فستقوم بكتابة كود HTML داخل صفحات PHP لتقديم المحتوى المناسب وتجميع البيانات التي يتم استرجاعها من قاعدة البيانات وعرضها بطريقة ملائمة.

وباستخدام إطار العمل Laravel، ستحصل على العديد من المزايا المتقدمة مثل التوجيه (Routing)، وإدارة قواعد البيانات، والتحقق من الصحة والأمان، وإنشاء API، وغيرها من الوظائف التي تسهل تطوير تطبيقات الويب.

أما بالنسبة للتصميم والتنسيق، يمكنك استخدام أدوات مثل CSS وSass لتحسين تصميم الموقع وتطبيق الأنماط الخاصة بك. ويمكنك أيضًا استخدام إطار عمل CSS مثل Bootstrap أو Tailwind CSS لتسهيل وتسريع عملية تصميم وتنسيق الموقع.

وفيما يتعلق بتجميع الملفات، يمكنك استخدام أدوات مثل Vite أو Webpack لتجميع وتحسين وتقليص حجم الملفات الأمامية (مثل CSS وJavaScript) وتحويلها إلى إصدارات أكثر كفاءة لتحسين أداء الموقع.

إذاً، في عملية بناء موقع مثل Instagram أو متجر إلكتروني، يجمع العمل بين لغات الواجهة الأمامية وإطار العمل Laravel في الجانب الخلفي لتحقيق الوظائف المطلوبة وتقديم تجربة مستخدم متكاملة وجذابة.

أي ما يحدث هو نمط "Server-side Rendering" (تقديم من الخادم) في بناء موقع مثل Instagram أو متجر إلكتروني باستخدام PHP وإطار العمل Laravel.

ففي الـ Server-side Rendering، يتم تجهيز صفحات الويب على الخادم قبل أن يتم إرسالها إلى المتصفح. وعندما يقوم المستخدم بزيارة صفحة، وتنفيذ الكود PHP على الخادم لجمع البيانات اللازمة من قاعدة البيانات وإعداد صفحة HTML النهائية التي تحتوي على المحتوى المطلوب.

وباستخدام إطار العمل Laravel، تستطيع تعريف المسارات (Routes) والمنطق المرتبطة بها في صفحات PHP مثل routes/web.php أو routes/api.php.

فعند استلام طلب المستخدم، يتم تنفيذ الكود المناسب لجمع البيانات وإعداد صفحة HTML للرد على الطلب.

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

وبخصوص اللغات الخاصة بالواجهة الأمامية، فمن خلال إشتراكك في الدورة ستحصل على وصول للمسارات الأولى من جميع الدورات الأخرى، وبالتالي ستتمكن من تعلم أساسيات HTML, CSS, JS.

وسيتم شرح كل ما ذكرته في دورة PHP ولكن عليك بتعلم الأساسيات أولاً قبل البدء في الدورة، أي عليك برؤية المسار الأول من دورة دورة تطوير واجهات المستخدم و المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript .

هل معني ذلك أنه يجب أن يكون لدي معرفة بلغات الواجهات الأمامية قبل البدء في هذه الدورة

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

مع أن مطور ال backend يقوم باستلام ملفات ال html و ال css وال js جاهزة من خلال ال frontend ولكن يفضل تعلم أساسيات ال html و ال css لماذا؟

يعتبر تعلم HTML و CSS ضروريًا لمطوري الـ backend، حيث يتعين عليهم فهم كيفية عمل الواجهات الأمامية وكيفية التفاعل معها. 

على سبيل المثال، عندما يقوم مطور الـ backend بتطوير تطبيق ويب، يحتاج إلى عرض البيانات التي يقوم بجمعها بطريقة منظمة وجذابة على صفحات الويب. وهذا يتطلب فهمًا جيدًا لـ HTML و CSS لتصميم صفحات الويب وتنسيقها بشكل صحيح.

علاوة على ذلك، يمكن لمطوري الـ backend الذين يتمتعون بمهارات في HTML و CSS بناء واجهات مستخدم جذابة وسلسة لتعزيز تجربة المستخدم وجعل تطبيقاتهم أكثر أهمية وجاذبية.

بالإضافة إلى ذلك، يساعد تعلم HTML و CSS على تحسين التواصل بين مطوري الـ backend وفريق الـ frontend في تطوير التطبيقات الويب، حيث يمكن للمطورين الـ backend التواصل بشكل أفضل مع فريق الـ frontend لتحقيق الأهداف المشتركة.

لذلك، ينصح بتعلم HTML و CSS لمطوري الـ backend لتحسين قدراتهم وتوسيع دائرة معرفتهم في مجال تطوير التطبيقات الويب.

لذلك أكاديمية حسوب تقوم بفتح المسار الأول من دورة تطوير واجهات المستخدم (ودورات أخرى) عند الإشتراك في أي دورة لذك سيكون متاحاً أمامك هذه الدروس

• أساسيات HTML
• أساسيات CSS
• أساسيات JavaScript
• أساسيات jQuery
• بناء موقع شخصي

وهي كافية تماماً لتعلم أساسيات ال frontend