JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

recent
احدث المشاركات
الصفحة الرئيسية

عرض نتيجة الطالب وكتابة الحالة بالالوان - ن 3 المطور

تمهيد (مهم)

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

ابرز التحديثات الجديدة:

  • الاستغناء عن كلمة المرور.
  • سرعة ومظهر السكربت.
  • تحديثات جانبية اخرى.
من الخصائص :
  • ما يميز هذه الاكواد سهولة زيادة عدد الاعمدة التي تريد ظهورها في النتيجة.
  • تقسيم النتيجة الى بطاقة تعريف بالطالب او الموظف ثم بيان تفصيلي لمفردات الاستعلام .
  • السكربت لا يسمح باختيار صف دراسي مستقل ولكن يمكن دمج الصفوف او الفرق الدراسية في ورقة عمل واحدة
  • لا يصلح السكربت في حال اختلاف المواد بين العشب او الفروع مثل العلمي والادبي ولكن يمكن تجنب ذلك بترك المادة بدون درجة او كتابة  ليست مقررة ( تم علاج هذه النقطة في تعديل مدفوع)
  • يمكن استحدام السكربت لنتائج المرحلة الابتدائية التي تعتمد نشر النتيجة باللألوان في حال اخترت وصف النتيجة وليس لونها ( مثلا ان يظهر في العمود الثالث يفوق التوقعات .... الخ .
  • السكربت غير صالح  في الوقت الحالي لمن يريد كتابة التقدير باللألوان مثلا ممتاز بلون وجيد باخر... الخ ( تم علاج هذه النقطة في تعديل مدفوع)
  • من المهم ان تلقي نظرة على المقالات الخاصة بنشر النتائج هنا.
  • رابط معاينة السكربت ارقام من 101 وحتى 101 او اكتب Ali

المتطلبات 

  • حساب جوجل - Gmail
  • تنفيذ الخطوات بحرص ودقة واختبار كل مرحلة تنفذها لتستطيع التراجع عن اي خطأ يظهر معك.

المرحلة الاولى ( اعداد جدول البيانات )

  • سجل الدخول الى جداول بيانات جوجل باستخدام حسابك في جوجل
  • انقر على + لإنشاء جدول بيانات جديد واعطيه اسم وسجل به بيانات الطلاب/الموظفين/المتسابقين وبياناتهم.
  • ضع اسم مناسب لورقة العمل ( نكتب DATA كما مستخدم في المثال).
  • مع مراعاة ان يكون العمود الاول هو معيار البحث لديك ( مفتاح اساسي لا تتكرر بياناته) اكتب ما يناسبك كعنوان له.
  • لا تستخدم دمج الخلايا نهائي واجعل الصف الاول لعناوين الاعمدة وبشكل مبسط .
  • لابد ان تفهم جيد جدول بياناتك ( عدد الاعمدة المسميات ... الخ.
  • مفتاح جدول البيانات او عنوانه ستحتاج اليه وهو الاحرف ما بين / / في url الملف او عنوان الموقع .
الصورة في المقالة تقريبة للخطوات  فقط من اجل التوضيح


  • عدد الاعمدة يحتسب من رقم صفر فمثلا لديك بيانات في 20 عمود اذا من 0 الى 19.
  • بمعنى اول عمود رقمه صفر والثاني واحد وهكذا حتى نصل للعشرين يكون رقمه 19.
  • اكمل جميع بيانات الجدول وراجع النقاط السابقة كاملة وافهمها جيدا سنحتاج لها المرحلة القادمة.

المرحلة الثانية ( تصميم السكربت )

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

  • سينتقل بك مباشرة الى موقع Apps Script ويتطلب الموقع التحقق من بيانات الحساب الخاص بك اذا كانت هذه اول مرة لك اعطه الصلاحيات المطلوبة.
  •  قد تواجه مشكلة في تسجيل الدخول اذا كنت تسجل بحسابات جوجل مختلفة على نفس المتصفح سجل خروج من جميعها واستخدم حساب واحد فقط .

  • حسب الصورة السابقة نفذ الاتي 
  • المشار له برقم واحد اسم الاسكربت اعطيه اسم مناسب حتى تجده بسهولة مستقبلا اذا كنت تنوي إنشاء مشاريع اخرى.
  • المشار له برقم 2 انقر على الزر + واضف ملف html  واعطيه اسم login.
  • سنعود للأرقام 4 و 5 بعد الخطوة القادمة
  • مفترض لديك حاويتن اكواد او تعليمات برمجية باسم code , login قد تكون الحاوية code باسم رمز لا حرج في ذلك.
  • ادخل كل ملف عمل منهما وامسح ما بداخله ( على اليسار يظهر المحتوى ) هي رقم 5 في الصورة قبل السابقة.
  • بعد ان مسحت محتوى كل ملف او حاوية من code - index عليك لصق محتوى جديد لكل حاوية من خلال الاتي فقط انسخ جميع الاكواد من هنا وألصق في كل حاوية التعليمات الخاصة بها وانقر زر الحفظ .

الاكواد المستخدمة

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


أود التنبيه على امر تقني لابد ان تعرفه في اول السطر اذا وضع // فما بعده يعتبر تعليق وليس امر يتم تنفيذه وايضا اذا وضعت مجموعة اوامر بعد علامة تعجب ! فهذا الاوامر لن تنفذ دون الخوض في تفاصيل برمجية

المرحلة الثالثة ( تعديل السكربت)

  • الآن وبعد تنفيذ ما سبق بدقة وبفهم عليك الوصول الى عنوان ملف جدول البيانات - معرف الجدول - ونسخه.
  • توجه الى حاوية التعليمات المسماه code او رمز وفي السطر السادس ألصق معرف الجدول بدل النجوم حافظ على وجود المعرف بين (' هنا ')  اي حافظ على علامة التنصيصة المفردة.
  • واستبدل # باسم ورقة البيانات.
  • الان ولضمان ان الامور تسير على نحو جيد انقر زر نشر موجود في صورة نهاية المرحلة الثانية.
  • اختر نشر جديد وهنا ضاعف تركيزك 
  • من النافذة التى ظهرت امامك انقر زر الاعداد ثم اختيار نوع التطبيق واجعله تطبيق ويب.
  • الوصف : اكتب فيه مثلا اول نشر. 
  • المستخدم الذي لديه الإذن بالوصول إلى عملية النشر : اجعلها اي شخص وهذه ضرورية جدا.
  • انقر زر النشر ستظهر امامك نافذة جديدة و قد يطلب تطبيق الويب منك تفويضًا بالوصول إلى بياناتك انقر تفويض الوصول واسمح له بالوصول وانقر زر متقدم لتكمل هذه الخطوة ثم سماح .

  • انقر رابط النشر الذي ظهر امامك ليفتح لك رابط النتيجة ادخل البيانات الخاصة بك.
  •  اذا كانت جميع امورك تمام وظهرت نتيجة الطلاب فمبارك لك ولاتنسى مع كل تعديل تنقر زر الحفظ .
  • والآن تختار من زر نشر اختبار عملية النشر وتختبر بياناتك حتى تعلم انك على المسار الصحيح.
    • إن ظهرخطأ تعود الى الحاوية التي عدلت عليها وتتراجع عن التعديل ( يمكن ضغط ctrl+z ).
  • الان بعد ان تأكدت ان التعليمات البرمجية تعمل بشكل جيد نتوجه الى الحاوية login.

تعديل عام في login

  • هنا نقوم بالتعديل ليناسب بياناتك ونبدأ بشكل مبسط جدا إن شاء الله.
  • بداية من نشر اختر اختبار عملية النشر حتى ترى الشكل العام وتقيم ما تحتاج تغيره ولا مانع من البحث عن رقم موجود في جدول بياناتك وهذا يدل على وجوب ان تكون هناك بيانات لا تجرب على جدول فارغ.
  • كود اللون المناسب لك زر هذا الموقع HTML Color Codes وانسخ اللون المناسب لك وألصقه بدلا من اللون الموجود بين وسوم <style> ووسم <style/>.
  • في كل مرة تعدل فيها انقر حفظ ثم جرب تعديلك باختيار امر اختبار النشر من زر نشر حتى يتسنى لك الرجوع عن الخطأ او اكمل في طريقك اذا كل شيئ على مايرام هذه نقطة مهمة ولن احتاج الى تكرار ذكرها.
  • السطر 48 به عنوان البوابة الخاصة بك مثلا نتيجة مدرسة كذا , استعلام عن رواتب .... الخ.
  • التطبيق مبني على html , js  فيمكن البحث بسهولة في الانترنت عن اكواد المطلوبة لفعل شيء معين كإدراج صورة مثلا نكتب كود ادراج صورة في html نسخ الكود وتعديله وضعه في المكان الذي تود اظهار الصورة فيه.
  • اعتبارا من السطر 59 مجهود جديد مبني على فهم جدول البيانات يمكنك اخذ قسط من الراحة والعودة.
  • كما انه توجد مقالة لشرح بنية الجداول في html 

تعديل عام في login

    الان سنقوم بالتعديل المناسب لك سنفترض امثلة وعليك تطبيق المناسب لك


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

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

    • عناوين الاعمدة ثلاث اسطر ستكون الاعمدة ثلاث اي زيادة في الاسطر زيادة في الاعمدة والعكس صحيح
    • بناء على عدد الاعمدة الذي قررته تحت عناوين الاعمدة على الحفاظ على نفس العدد في محتوى الاعمدة والا اختل الشكل العام
    • يجب عليك مراعاة اسماء المتغيرات كمثال (الموضوع1)  ستظهر في العمود الاول تحتها متغير "subject1" يظهر نتيجة موضوع1 في العمود الثاني والسطر الثالث متغير يظهر الحالة "status1" في العمود الثالث
    • ماذا لو اردت اظهار عمودين فقط تحت العناوين سطرين فقط ( الموضوع - النتيجة ) وتحت محتوى الاعمدة ( الموضوع1 - "subject1")
    • لا تحتاج ان اذكر بضرورة المحافظة على علامات التنصيص وومراعاة الاكواد ونصيحة مع كل تغير انقر حفظ واختبر المشروع من زر نشر حتى تعلم انك على الطريق الصحيح والا تراجع عن اخر خطواتك.
    • الان اكمل باقي بياناتك حسب الوتيرة السابقة.

    • الان بناء على ماسبق لك من اعداد وحجز عدد من المتغيرات ركز مع الصورة السابقة قم بزيادة الاسطر بنفس الشكل حسب ما لديك مع توضيح الاتي 
    • او سطر محدد باللون الاصفر يقول اجعل المتغير المسمى name يظهر القيمة الموجودة في العمود رقم ثلاثة وتعني فعليا محتوى العمود الرابع سبق وذكرنا
    • السطر الاصفر الثاني المتغير subject1 ل يظهر القيمة في العمود السابق لا اريد الاطناب حتى لا نضل القصد راجع كل ماسبق من الشرح.
    • ثالث سطر اصفر يظهر الحالة لقيمة العمود السابع وهنا لنا فيها وقفة تفيد نتائج الطلاب اكثرفمثلا السطريظهر نتيجة اللغة العربية والنجاح فيها من 40 تكتب - 40 ركز جيد في طريقة كتابة الاكواد وعليه كل مادة مطروح منها درجة النجاح حتى تظهر الطالب ناجح باللون الازرق وراسب باللون الاحمر
    • اذا اردت استبدال كلمة ناجح وراسب بكلمات اخرى ستجدها في السطور الاخيرة .
    • انت جاهز لنشر نتيجتك بالنقر على زر نشر ثم نشر جديد
    • اي تعديلات مستقبلية على جدول البيانات لن تحتاج اعادة النشر
    • اي تعديل على السكربت عليك اعادة نشر جديد او اختيار امر ادارة عمليات النشر واختيار اخر نشر وتعديله لدمج التعديلات الجديدة في الرابط القديم نفسه .
    • النقطة السابقة مهمة فلن تحتاج اعادة نشر الرابط لكن اذا كانت تعديلاتك غير جيدة فلن تستيطع العودة.

    الخلاصة

    • يمكن استخدام السكربت لعرض اي نتيجة لإدارة او مؤسسة او مدرسة اوشركة لمتدربين او موظفين او مسابقة.
    • حاول ان تجرب الامر بنفسك وان لم ينجح كرر فالأمر صدقني يستحق.
    • يمكنك استخدام اي معادلات داخل جدول البيانات واستخدام عمليات النسخ واللصق من اكسل مثلا طالما كنت مراعياَ للشرح السابق.
    • بعد ان تكون انتهيت من التعديلات وحفظتها واختبرتها عليك اعادة نشر الاسكربت من زر النشر ثم نشر جديد حتى تحصل على رابط جديد تعيد نشره في المؤسسة الخاصة بك فالرابط الاول للأسف لن يظهر التعديلات وقد سبق شرح هذه النقطة.
    • لا تستطيع نشر رابط اختبار النشر
    • مع كل تعديل مستقبلا لابد من نشر جديد ورابط جديد وهذا أمر جيد حتى تستطيع العودة الى نشر سابق لذلك فلا تنشر الرابط إلا بعد الانتهاء من جميع التعديلات على الاسكربت ولا تقلق من اي تعديل تجره على ملف البيانات.
    • لتفادي النقطة السابقة يمكن انشاء موقع على الانترنت او صفحة مختلفة - ارشح لك خدمة المواقع من جوجل مجانية - وتضع بها الرابط وتنشرها هى وكل مرة تعدل الرابط ترجع لهذه الصفحة وتعدل رابط النتيجة فيها حتى لا يكثر على متابعك الروابط.
    • يمكنك انشاء تطبيق أندرويد لعرض صفحتك ستجد الشرح في هذه المقالة.
    • فيديو الشرح ( حسب الطلب إن شاء الله)
    • اذا اعجبك الامر فشاركه لتعم الفائدة ولا تنساني ووالدي بدعوة ولك بمثل إن شاء الله.

    حقوق النشر


    بالتوفيق ودمتم بخير

    author-img

    علي الخضر

    تعليقات
      ليست هناك تعليقات
      إرسال تعليق
        الاسمبريد إلكترونيرسالة