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เปิด 2 เทอร์มินัลในหน้าต่าง/แท็บแยกกัน
เทอร์มินัล 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 ในเบราว์เซอร์ของคุณ Backend API จะทำงานที่ 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 ในทำนองเดียวกัน โฟลเดอร์อื่นๆ มีไฟล์ที่มีคำว่า "Handle" อยู่ในชื่อ อย่าลืมอัปเดตไฟล์เหล่านี้ด้วย
ปัญหานี้เกิดขึ้นเนื่องจากไฟล์ .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 อาจอยู่ในไฟล์ที่ขึ้นต้นด้วย "View" ตรวจสอบไฟล์เหล่านั้นและทำซ้ำขั้นตอนเดียวกันหากปัญหายังคงอยู่ โปรดติดต่อฉันเพื่อขอความช่วยเหลือเพิ่มเติม
อย่าลืมติดดาวให้กับโปรเจ็กต์นี้หากคุณพบว่าวิธีแก้ปัญหามีประโยชน์ ขอบคุณ!
