ربط صفحة ويب بصفحة أخرى

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

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

أما في حال أردت محاكاة مشاريع لوحات التحكّم فقد تحتاج للاستضافة والتعامل مع قاعدة بيانات وخادم ويب لأن كمية البيانات ستكون أكبر والتعامل مع بيانات تجريبية سيكون أصعب.

إذا كان هنالك api جاهزة فالربط مع api لا يحتاج لمطور backend.

لكن ما يحتاج لـ backend هو انشاء الـ api الخاصة بالـ dashboard وتحتاج لمطور الـ backend كذلك حتى يقوم بإنشاء الـ api الخاص بالـ portfolio (الـ api الخاص برفع وعرض الصور وكذلك الخاص بحفظ معلومات المشروع و عرضها).

وإلا فلن تكون الـ portfolio ديناميكية (قابلة للاضافة والحذف والتعديل) وستحتاج إلى اعادة رفع الموقع في كل مرة تقوم فيها بتعديل جديد.

لجعل الموقع التعريفي الخاص بك يعمل بطريقة ديناميكية (تستطيع التحكم في البيانات بدون التعديل في ال Source Code) كمطور واجهات أمامية، يمكن جعل المشاريع الخاصه بك ديناميكية عن طريق JavaScript و API اذا كان يوجد Api جاهز.

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

يمكنك عمل معرض الأعمال الخاص بك بدون استخدام back-end عن طريق إضافة صور ورابط المشروع في معرض الأعمال، وعند عمل مشاريع جديدة سيتطلب ذلك تعديل الكود الخاص بك واضافة صور وروابط المشروع

ويمكن جعل إضافة مشروع جديد أسهل وشبه ديناميكي دون الحاجة الي back-end عن طريق عمل ملف JSON أو ملف JavaScript يحتوي علي معلومات المشروع ورابطة وروابط الصور المرفقة ومن ثم ربطة بمعرض الأعمال 

مثال :

data.js

var data = [
    {name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
    {name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
    {name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
    {name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]

app.js

var Usrdata = document.querySelector('.box');

document.getElementById('test1').innerHTML = userDetail.map(user => 
    `<div>
      <div>Name: ${user.name}</div>
      <div>Age: ${user.age}</div>
      <div>Place: ${user.place}</div>
      <div>Country: ${user.country}</div>
      <div>Avatar: ${user.avatar}</div>
    </div>`
).join('')

وعندما تريد إضافة مشروع جديد يمكنك بسهولة إضافته إلي ملف البيانات.

أما اذا كنت تريد جعل الموقع ديناميكي بالكامل فعدها ستحتاج الي back-end وربطة مباشرة بمعرض الأعمال أو عن طريق API

افضل استخدام الواجهات الخلفية لذلك 

استطيع فعلها لك مجانا لكي اتدرب لا اكثر

اشكرك