بناء نظام عرض نتائج الطلاب باستخدام HTML وJavaScript وجداول Google Sheets
المقدمة
هل تبحث عن طريقة بسيطة وفعالة لعرض نتائج الطلاب أو أي بيانات أخرى مخزنة في جداول بيانات Google Sheet على موقع ويب؟ في هذا المقال، سنتعمق في كود جاهز يمكنك استخدامه كقاعدة متينة لإنشاء نظام عرض نتائج ديناميكي. سنشرح كيفية تركيبه، فهم أجزائه المختلفة، وكيفية التعديل عليه ليناسب احتياجاتك تمامًا.
لماذا هذا الكود؟
يتميز هذا الكود بكونه:- بسيط وواضح: يعتمد على HTML وCSS وJavaScript فقط، ولا يتطلب أي لغات برمجة معقدة من جانب الخادم.
- ديناميكي: يجلب البيانات مباشرة من جدول بيانات Google Sheet، مما يسهل تحديث النتائج دون الحاجة لتعديل الكود.
- مرن: يتعرف تلقائيًا على رؤوس الأعمدة، مما يقلل من الحاجة لتعديل الكود عند تغيير بنية بياناتك.
- سهل التخصيص: يمكنك تعديل التصميم والسلوك بسهولة ليناسب علامتك التجارية أو متطلباتك.
تحذير لا يتناسب مع البيانات الكبيرة ولا الحساسة لابد ان تعي ذلك
ما ستحتاجه قبل البدء
قبل أن نغوص في الكود، تأكد من أن لديك:- جدول بيانات Google Sheet جاهز: يحتوي على بيانات الطلاب. يجب أن يكون العمود الأول مخصصًا لرقم الطالب (أو المعرّف الذي ستبحث عنه)، وأن تكون رؤوس الأعمدة في الصف الأول.
- نشر جدول البيانات كملف CSV: هذه خطوة أساسية ليتمكن الكود من قراءة البيانات.
- افتح Google Sheet الخاص بك.
- اذهب إلى ملف (File) > مشاركة (Share) > نشر على الويب (Publish to the web).
- في النافذة المنبثقة، اختر الورقة 1 (أو اسم ورقتك) من القائمة المنسدلة، ثم اختر قيم مفصولة بفواصل (CSV) (Comma-separated values (.csv)) من القائمة الثانية.
- انقر على نشر (Publish).
- انسخ الرابط الذي يظهر لك. هذا هو الرابط الذي ستستخدمه في الكود.
تركيب الكود خطوة بخطوة
- الكود عبارة عن ملف HTML واحد يحتوي على HTML وCSS وJavaScript فك الضغط عنه.
- افتح ملف results.html بأي محرر نصوص (مثل Notepad, VS Code, Sublime Text) .
- تحديث رابط Google Sheet:
- في الكود، ابحث عن السطر 129 استبدل الرابط الذي حصلت عليه بعد نشر جدول بيانات Google الخاص بك كملف CSV بالنجوم ولا تحذف علامات التنصيص.
- احفظ ملف results.html وافتحه في أي متصفح ويب. سترى واجهة بسيطة مع حقل إدخال وزر "بحث".
- الاكواد متوفرة بشكل خاص لمستخدمي التطبيق.
يمكنك تخصيص هذا الكود ليناسب احتياجاتك بطرق عديدة:
- تعديل التصميم (CSS)
- يمكنك تغيير الألوان، الخطوط، الأحجام، والمسافات لتتناسب مع تصميم موقعك.
- الألوان: غير قيم color و background-color في الأقسام المختلفة (body, .container, button, th, إلخ).
- الخطوط: غير font-family إلى الخط الذي تفضله (تذكر تضمين الخطوط المخصصة إذا لزم الأمر).
- الأحجام: غير قيم font-size أو padding أو margin للعناصر المختلفة.
- الشكل: جرب تعديل border-radius للحصول على حواف مربعة أو مستديرة أكثر.
- font-family: لتغيير نوع الخط المستخدم.
- padding: لزيادة المسافة الداخلية للعناصر، مما يجعلها تبدو أقل ازدحامًا.
- margin: لضبط المسافات الخارجية بين العناصر.
- border-radius: لجعل حواف العناصر أكثر دائرية.
- box-shadow: لإضافة ظل للعناصر مما يمنحها عمقًا.
- transition: لإضافة تأثيرات حركية سلسة عند التفاعل مع العناصر (مثل الأزرار أو صفوف الجدول).
- background-color: لتغيير لون الخلفية.
- color: لتغيير لون النص.
- font-size: لضبط حجم الخط.
- line-height: لضبط تباعد الأسطر داخل الفقرات.
- tr:nth-child(even): لتلوين الصفوف الزوجية في الجدول بلون مختلف، مما يسهل قراءته.
- tr:hover: لتغيير لون خلفية الصف عند مرور مؤشر الماوس فوقه، مما يعطي تجربة مستخدم أفضل.
- رسائل الخطأ والتنبيهات:
- يمكنك تعديل محتوى رسائل alert() أو resultDiv.innerHTML لتكون أكثر تحديدًا أو ودية.
نصائح إضافية
- اختبار البيانات: دائمًا اختبر الكود ببيانات مختلفة في جدول Google Sheet للتأكد من أنه يتعامل مع جميع السيناريوهات المتوقعة (مثل أرقام الطلاب غير الموجودة، أو البيانات الناقصة).
- الأداء للبيانات الكبيرة: إذا كان جدول بياناتك يحتوي على آلاف أو عشرات الآلاف من الصفوف، فإن تحميل ملف CSV بالكامل إلى المتصفح قد يؤثر على الأداء. في هذه الحالة، قد تحتاج إلى حلول أكثر تقدمًا (مثل استخدام Google Sheets API مع خادم خلفي) للتعامل مع البيانات بكفاءة أكبر.
- الأمان: هذا الحل مناسب للبيانات العامة أو غير الحساسة. لا ينصح باستخدامه لعرض معلومات شخصية أو سرية للغاية، حيث أن البيانات تُحمّل إلى متصفح المستخدم مباشرة.
تضمين في موقعك
- يمكنك تضمين هذا الكود كصفحة HTML منفصلة، أو نسخ الأجزاء ذات الصلة (HTML للواجهة، CSS للأنماط، JavaScript للمنطق) ولصقها في ملفاتك الخاصة بموقعك الحالي.
- اذا كنت تستخدم مواقع جوجل ادرجها كرمز وليس تضمين انسخ جميع الاكواد ثم الصقها في مربع التضمين.
- بمعرفة هذه الأساسيات، أنت الآن جاهز لتركيب هذا النظام وتعديله ليصبح أداة قوية ومرنة لعرض بياناتك!
فيديو الشرح
دمتم بخير