MERN School Management System
1.0.0
نظام إدارة المدرسة هو تطبيق قائم على الويب تم إنشاؤه باستخدام مكدس MERN (MongoDB وExpress.js وReact.js وNode.js). ويهدف إلى تبسيط إدارة المدرسة وتنظيم الفصل وتسهيل التواصل بين الطلاب والمعلمين والإداريين.
أدوار المستخدم: يدعم النظام ثلاثة أدوار للمستخدم: المسؤول، المعلم، والطالب. كل دور له وظائف محددة ومستويات الوصول.
لوحة تحكم المسؤول: يمكن للمسؤولين إضافة طلاب ومعلمين جدد، وإنشاء الفصول الدراسية والمواضيع، وإدارة حسابات المستخدمين، والإشراف على إعدادات النظام.
تتبع الحضور: يمكن للمدرسين بسهولة تسجيل الحضور لفصولهم الدراسية، ووضع علامة على الطلاب كحاضرين أو غائبين، وإنشاء تقارير الحضور.
تقييم الأداء: يمكن للمدرسين تقييم أداء الطلاب من خلال تقديم العلامات والملاحظات. يمكن للطلاب عرض علاماتهم وتتبع تقدمهم مع مرور الوقت.
تصور البيانات: يمكن للطلاب تصور بيانات أدائهم من خلال الرسوم البيانية والجداول التفاعلية، مما يساعدهم على فهم أدائهم الأكاديمي في لمحة.
الاتصال: يمكن للمستخدمين التواصل بسهولة من خلال النظام. يستطيع المعلمون إرسال رسائل إلى الطلاب والعكس، مما يعزز التواصل والتعاون الفعال.
git clone https://github.com/Yogndrr/MERN-School-Management-System.gitافتح محطتين في نوافذ/علامات تبويب منفصلة.
المحطة 1: إعداد الواجهة الخلفية
cd backend
npm install
npm startقم بإنشاء ملف يسمى .env في المجلد الخلفي. بداخله أكتب هذا :
MONGO_URL = mongodb://127.0.0.1/schoolإذا كنت تستخدم MongoDB Compass، فيمكنك استخدام رابط قاعدة البيانات هذا، ولكن إذا كنت تستخدم MongoDB Atlas، فبدلاً من هذا الرابط، اكتب رابط قاعدة البيانات الخاص بك.
المحطة 2: إعداد الواجهة الأمامية
cd frontend
npm install
npm start انتقل الآن إلى localhost:3000 في متصفحك. سيتم تشغيل واجهة برمجة تطبيقات الواجهة الخلفية على localhost:5000 .
قد تواجه خطأ أثناء التسجيل، إما خطأ في الشبكة أو خطأ في التحميل يستمر إلى أجل غير مسمى.
لحلها:
انتقل إلى frontend > .env .
قم بإلغاء التعليق على السطر الأول. بعد ذلك، قم بإنهاء محطة الواجهة الأمامية. افتح محطة جديدة وقم بتنفيذ الأوامر التالية:
cd frontend
npm startبعد الانتهاء من هذه الخطوات، حاول الاشتراك مرة أخرى. إذا استمرت المشكلة، فاتبع هذه الخطوات الإضافية لحلها:
انتقل إلى الواجهة frontend > src > redux > userRelated > userHandle.js .
أضف السطر التالي بعد عبارات الاستيراد:
const REACT_APP_BASE_URL = "http://localhost:5000" ;process.env.REACT_APP_BASE_URL بـ REACT_APP_BASE_URL .هام: كرر نفس العملية مع كافة الملفات الأخرى التي تحمل كلمة "Handle" في أسمائها.
على سبيل المثال، في مجلد redux ، هناك مجلدات أخرى مثل userRelated . في المجلد teacherRelated ، ستجد ملفًا باسم teacherHandle . وبالمثل، تحتوي المجلدات الأخرى على ملفات تحمل أسمائها كلمة "مؤشر". تأكد من تحديث هذه الملفات أيضًا.
تنشأ المشكلة لأن ملف .env الموجود في الواجهة الأمامية قد لا يعمل لجميع المستخدمين، بينما يعمل معي.
بالإضافة إلى ذلك:
عند اختبار المشروع، ابدأ بالتسجيل بدلاً من تسجيل الدخول كضيف أو استخدام تسجيل الدخول العادي إذا لم تقم بإنشاء حساب بعد.
لاستخدام وضع الضيف، انتقل إلى LoginPage.js وقم بتوفير بريد إلكتروني وكلمة مرور من مشروع تم إنشاؤه بالفعل في النظام. وهذا يبسط عملية تسجيل الدخول، وبعد إنشاء حسابك، يمكنك استخدام بيانات الاعتماد الخاصة بك.
يجب أن تحل هذه الخطوات خطأ الشبكة في الواجهة الأمامية. إذا استمرت المشكلة، فلا تتردد في الاتصال بي للحصول على مزيد من المساعدة.
عند محاولة حذف العناصر، قد تواجه رسالة منبثقة تفيد "عذرًا، تم تعطيل وظيفة الحذف في الوقت الحالي". تظهر هذه الرسالة لأنني قمت بتعطيل وظيفة الحذف على موقعي المباشر لمنع الضيوف من حذف العناصر. إذا كنت ترغب في تمكين ميزة الحذف، يرجى اتباع الخطوات التالية:
انتقل إلى الواجهة frontend > src > redux > userRelated > userHandle.js .
إذا لم تقم بإجراء أية تغييرات، فيجب أن تجد وظيفة deleteUser في السطر 71. وقد يتم التعليق عليها. قد يبدو مثل هذا:
// export const deleteUser = (id, address) => async (dispatch) => {
// dispatch(getRequest());
// try {
// const result = await axios.delete(`${process.env.REACT_APP_BASE_URL}/${address}/${id}`);
// if (result.data.message) {
// dispatch(getFailed(result.data.message));
// } else {
// dispatch(getDeleteSuccess());
// }
// } catch (error) {
// dispatch(getError(error));
// }
// }deleteUser وقم بالتعليق على وظيفة deleteUser هذه التي تعمل حاليًا من السطر 87 إلى السطر 90: export const deleteUser = ( id , address ) => async ( dispatch ) => {
dispatch ( getRequest ( ) ) ;
dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
} إذا قمت بتعديل الكود مسبقًا، فقد تجد وظائف deleteUser في أسطر مختلفة. في هذه الحالة، قم بإلغاء التعليق على الكود الأصلي وقم بالتعليق على الكود الحالي.
بعد ذلك، انتقل إلى الواجهة frontend > src > pages > admin . ستجد هنا مجلدات مختلفة ملحقة بكلمة "ذات صلة". افتح كل مجلد وحدد موقع الملفات المسبوقة بـ "إظهار".
افتح كل ملف باستخدام "Show" كبادئة وابحث عن وظيفة باسم deleteHandler . على سبيل المثال:
const deleteHandler = ( deleteID , address ) => {
console . log ( deleteID ) ;
console . log ( address ) ;
setMessage ( "Sorry, the delete function has been disabled for now." ) ;
setShowPopup ( true ) ;
// dispatch(deleteUser(deleteID, address))
// .then(() => {
// dispatch(getAllSclasses(adminID, "Sclass"));
// })
} هذا مثال مقتطف من ShowClasses . في الملفات الأخرى التي تحتوي على "إظهار" كبادئة، قد يختلف الأمر.
قم بإلغاء التعليق على التعليمات البرمجية التي تم التعليق عليها داخل وظيفة deleteHandler وقم بالتعليق على التعليمات البرمجية الموجودة. يجب أن يشبه هذا:
const deleteHandler = ( deleteID , address ) => {
// console.log(deleteID);
// console.log(address);
// setMessage("Sorry, the delete function has been disabled for now.");
// setShowPopup(true);
dispatch ( deleteUser ( deleteID , address ) )
. then ( ( ) => {
dispatch ( getAllSclasses ( adminID , "Sclass" ) ) ;
} )
}deleteHandler في الملفات المسبوقة بـ "عرض". تحقق من تلك الملفات وكرر نفس العملية.إذا استمرت المشكلة، فلا تتردد في الاتصال بي للحصول على مزيد من المساعدة.
لا تنس أن تترك نجمة لهذا المشروع إذا وجدت الحل مفيدًا. شكرًا لك!
